Add nebula examples to website (#76)

docs/modules/editable-layers/sidebar.json

@@ -1,6 +1,6 @@
 {
   "type": "category",
-  "label": "deck.gl-community/editable-layers",
+  "label": "@deck.gl-community/editable-layers",
   "items": [
     "modules/editable-layers/README",
     "modules/editable-layers/developer-guide/get-started",

examples/editable-layers/advanced/src/example.tsx

@@ -104,7 +104,7 @@ const ALL_MODES: any = [
       {label: 'Draw Point', mode: DrawPointMode},
       {label: 'Draw LineString', mode: DrawLineStringMode},
       {label: 'Draw Polygon', mode: DrawPolygonMode},
-      {label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
+      // {label: 'Draw 90° Polygon', mode: Draw90DegreePolygonMode},
       {label: 'Draw Polygon By Dragging', mode: DrawPolygonByDraggingMode},
       {label: 'Draw Rectangle', mode: DrawRectangleMode},
       {label: 'Draw Rectangle From Center', mode: DrawRectangleFromCenterMode},

examples/editable-layers/advanced/src/toolbox.tsx

@@ -18,7 +18,7 @@ export const Toolbox = styled.div`
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   overflow: auto;
-  z-index: 999;
+  z-index: 30;
 `;
 
 export const ToolboxRow = (props) => <div>{props.children}</div>;

examples/editable-layers/editor/example.tsx

@@ -84,6 +84,7 @@ export function Example() {
       </DeckGL>
 
       <Toolbox
+        left={true}
         geoJson={geoJson}
         mode={mode}
         modeConfig={modeConfig}

modules/react-editable-layers/src/toolbox.tsx

@@ -16,12 +16,12 @@ import {Icon} from '@deck.gl-community/react';
 import {ImportModal} from './import-modal';
 import {ExportModal} from './export-modal';
 
-const Tools = styled.div`
+const Tools = styled.div<{left: boolean}>`
   position: absolute;
   display: flex;
   flex-direction: column;
   top: 10px;
-  right: 10px;
+  ${(props) => (props.left ? 'left' : 'right')}: 10px;
 `;
 
 const Button = styled.button<{active?: boolean; kind?: string}>`
@@ -46,15 +46,16 @@ const SubToolsContainer = styled.div`
   position: relative;
 `;
 
-const SubTools = styled.div`
+const SubTools = styled.div<{left: boolean}>`
   display: flex;
   flex-direction: row-reverse;
   position: absolute;
   top: 0;
-  right: 0;
+  ${(props) => (props.left ? 'left' : 'right')}: 0;
 `;
 
 export type Props = {
+  left?: boolean;
   mode: any;
   modeConfig: any;
   geoJson: any;
@@ -102,7 +103,7 @@ function ModeButton({buttonConfig, mode, onClick}: any) {
     </Button>
   );
 }
-function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
+function ModeGroupButtons({left, modeGroup, mode, onSetMode}: any) {
   const [expanded, setExpanded] = React.useState(false);
 
   const {modes} = modeGroup;
@@ -111,7 +112,7 @@ function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
 
   if (expanded) {
     subTools = (
-      <SubTools>
+      <SubTools left={left}>
         {modes.map((buttonConfig, i) => (
           <ModeButton
             key={i}
@@ -146,6 +147,7 @@ function ModeGroupButtons({modeGroup, mode, onSetMode}: any) {
 }
 
 export function Toolbox({
+  left = false,
   mode,
   modeConfig,
   geoJson,
@@ -161,9 +163,15 @@ export function Toolbox({
 
   return (
     <>
-      <Tools>
+      <Tools left={left}>
         {MODE_GROUPS.map((modeGroup, i) => (
-          <ModeGroupButtons key={i} modeGroup={modeGroup} mode={mode} onSetMode={onSetMode} />
+          <ModeGroupButtons
+            left={left}
+            key={i}
+            modeGroup={modeGroup}
+            mode={mode}
+            onSetMode={onSetMode}
+          />
         ))}
 
         {/* <box-icon name='current-location' ></box-icon> */}
@@ -176,7 +184,7 @@ export function Toolbox({
 
         <SubToolsContainer>
           {showConfig && (
-            <SubTools>
+            <SubTools left={left}>
               <Button onClick={() => setShowConfig(false)}>
                 <Icon name="chevron-right" />
               </Button>
@@ -210,7 +218,7 @@ export function Toolbox({
 
         <SubToolsContainer>
           {showClearConfirmation && (
-            <SubTools>
+            <SubTools left={left}>
               <Button
                 onClick={() => {
                   onSetGeoJson({type: 'FeatureCollection', features: []});

website/docusaurus.config.js

@@ -50,28 +50,37 @@ const config = {
         resolve: {
           modules: [resolve('node_modules'), resolve('../node_modules')],
           alias: {
-            '@deck.gl/aggregation-layers': resolve('../modules/aggregation-layers/src'),
-            '@deck.gl/arcgis': resolve('../modules/arcgis/src'),
-            '@deck.gl/carto': resolve('../modules/carto/src'),
-            '@deck.gl/core': resolve('../modules/core/src'),
-            '@deck.gl/extensions': resolve('../modules/extensions/src'),
-            '@deck.gl/geo-layers': resolve('../modules/geo-layers/src'),
-            '@deck.gl/google-maps': resolve('../modules/google-maps/src'),
-            '@deck.gl/json': resolve('../modules/json/src'),
-            '@deck.gl/layers': resolve('../modules/layers/src'),
-            '@deck.gl/mapbox': resolve('../modules/mapbox/src'),
-            '@deck.gl/mesh-layers': resolve('../modules/mesh-layers/src'),
-            '@deck.gl/react': resolve('../modules/react/src'),
-            'website-examples': resolve('../examples/website'),
+            'examples': resolve('../examples'),
+            '@deck.gl-community/bing-maps': resolve('../modules/bing-maps/src'),
+            '@deck.gl-community/graph-layers': resolve('../modules/graph-layers/src'),
+            '@deck.gl-community/react': resolve('../modules/react/src'),
+            '@deck.gl-community/layers': resolve('../modules/layers/src'),
+            '@deck.gl-community/arrow-layers': resolve('../modules/arrow-layers/src'),
+            '@deck.gl-community/editable-layers': resolve('../modules/editable-layers/src'),
+            '@deck.gl-community/react-editable-layers': resolve('../modules/react-editable-layers/src'),
+            'react-deck-graph-layers': resolve('../modules/react-graph-layers/src'),
             react: resolve('node_modules/react'),
             'react-dom': resolve('node_modules/react-dom'),
+            '@deck.gl/aggregation-layers': resolve('../node_modules/@deck.gl/aggregation-layers'),
+            '@deck.gl/arcgis': resolve('../node_modules/@deck.gl/arcgis'),
+            '@deck.gl/carto': resolve('../node_modules/@deck.gl/carto'),
+            '@deck.gl/core': resolve('../node_modules/@deck.gl/core'),
+            '@deck.gl/extensions': resolve('../node_modules/@deck.gl/extensions'),
+            '@deck.gl/geo-layers': resolve('../node_modules/@deck.gl/geo-layers'),
+            '@deck.gl/google-maps': resolve('../node_modules/@deck.gl/google-maps'),
+            '@deck.gl/json': resolve('../node_modules/@deck.gl/json'),
+            '@deck.gl/layers': resolve('../node_modules/@deck.gl/layers'),
+            '@deck.gl/mapbox': resolve('../node_modules/@deck.gl/mapbox'),
+            '@deck.gl/mesh-layers': resolve('../node_modules/@deck.gl/mesh-layers'),
+            '@deck.gl/react': resolve('../node_modules/@deck.gl/react'),
             '@luma.gl': resolve('../node_modules/@luma.gl'),
             '@math.gl': resolve('../node_modules/@math.gl'),
             '@loaders.gl/i3s': resolve('node_modules/@loaders.gl/i3s'),
             '@loaders.gl/las': resolve('node_modules/@loaders.gl/las'),
             '@loaders.gl/obj': resolve('node_modules/@loaders.gl/obj'),
             '@loaders.gl/ply': resolve('node_modules/@loaders.gl/ply'),
-            '@loaders.gl': resolve('../node_modules/@loaders.gl')
+            '@loaders.gl': resolve('../node_modules/@loaders.gl'),
+            'styled-react-modal': resolve('node_modules/styled-react-modal')
           }
         },
         plugins: [

website/package.json

@@ -31,12 +31,13 @@
     "d3-scale": "^3.2.1",
     "expr-eval": "^2.0.2",
     "mapbox-gl": "^2.0.0",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "^4.1.3",
     "react": "^18.2.0",
     "react-ace": "^6.1.4",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.7",
-    "styled-components": "^5.3.11"
+    "styled-components": "^5.3.11",
+    "styled-react-modal": "^3.1.1"
   },
   "devDependencies": {
     "@docusaurus/core": "^3.2.1",

website/src/constants/defaults.js

@@ -10,4 +10,4 @@ export const MAPBOX_STYLES = {
 };
 
 export const DATA_URI = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website';
-export const GITHUB_TREE = 'https://github.com/visgl/deck.gl/tree/master';
+export const GITHUB_TREE = 'https://github.com/visgl/deck.gl-community/tree/master';

website/src/examples-sidebar.js

@@ -8,13 +8,22 @@
 
  Create as many sidebars as you want.
  */
+
 const sidebars = {
   examplesSidebar: [
     {
       type: 'doc',
       label: 'Overview',
       id: 'index'
     },
+    {
+      type: 'category',
+      label: '@deck.gl-community/editable-layers',
+      items: [
+        "editable-layers-editor",
+        "editable-layers-advanced"
+      ]
+    },
     // {
     //   type: 'category',
     //   label: 'Layers',

website/src/examples/editable-layers-advanced.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+import {GITHUB_TREE} from '../constants/defaults';
+import App from 'examples/editable-layers/advanced/src/example';
+
+import {makeExample} from '../components';
+
+class AdvancedDemo extends Component {
+  static title = 'Advanced';
+
+  static code = `${GITHUB_TREE}/examples/editable-layers/advanced`;
+
+  static renderInfo(meta) {
+    return (
+      <>
+      </>
+    );
+  }
+
+  render() {
+    const {params, ...otherProps} = this.props;
+
+    return (
+      <App
+        {...otherProps}
+      />
+    );
+  }
+}
+
+export default makeExample(AdvancedDemo);

website/src/examples/editable-layers-advanced.mdx

@@ -0,0 +1,5 @@
+# Advanced
+
+import Demo from './editable-layers-advanced';
+
+<Demo />

website/src/examples/editable-layers-editor.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react';
+import {GITHUB_TREE} from '../constants/defaults';
+import {Example as App} from 'examples/editable-layers/editor/example';
+
+import {makeExample} from '../components';
+
+class EditorDemo extends Component {
+  static title = 'Editor';
+
+  static code = `${GITHUB_TREE}/examples/editable-layers/editor`;
+
+  static renderInfo(meta) {
+    return (
+      <>
+      </>
+    );
+  }
+
+  render() {
+    const {params, ...otherProps} = this.props;
+
+    return (
+      <App
+        {...otherProps}
+      />
+    );
+  }
+}
+
+export default makeExample(EditorDemo);

website/src/examples/editable-layers-editor.mdx

@@ -0,0 +1,5 @@
+# Editor
+
+import Demo from './editable-layers-editor';
+
+<Demo />