Add new editor module and example app (#349)

* Adds a new `@nebula.gl/editor` module
* Adds a super-basic `Toolbox` component just to show how props and callbacks can flow
* Adds a new `editor` example so that we can experiment.

.gitignore

@@ -21,4 +21,5 @@ yarn-error.log
 # copied as part of a build step
 modules/main/README.md
 modules/edit-modes/README.md
+modules/editor/README.md
 modules/layers/README.md

examples/editor/.babelrc

@@ -0,0 +1,7 @@
+{
+  presets: ['@babel/env', '@babel/react', '@babel/flow'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-export-default-from'
+  ]
+}

examples/editor/app.js

@@ -0,0 +1,15 @@
+// @flow
+import document from 'global/document';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Example } from './example.js';
+
+const root = document.createElement('div');
+
+if (document.body) {
+  document.body.style.margin = '0';
+
+  document.body.appendChild(root);
+  ReactDOM.render(<Example />, root);
+}

examples/editor/example.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import DeckGL from '@deck.gl/react';
+import { EditableGeoJsonLayer } from '@nebula.gl/layers';
+import { Toolbox } from '@nebula.gl/editor';
+import { DrawPolygonMode } from '@nebula.gl/edit-modes';
+import { StaticMap } from 'react-map-gl';
+
+const MAPBOX_ACCESS_TOKEN =
+  'pk.eyJ1IjoiZ2Vvcmdpb3MtdWJlciIsImEiOiJjanZidTZzczAwajMxNGVwOGZrd2E5NG90In0.gdsRu_UeU_uPi9IulBruXA';
+
+const initialViewState = {
+  longitude: -122.43,
+  latitude: 37.775,
+  zoom: 12
+};
+
+export function Example() {
+  const [features, setFeatures] = React.useState({
+    type: 'FeatureCollection',
+    features: []
+  });
+  const [selectedFeatureIndexes] = React.useState([]);
+  const [mode, setMode] = React.useState(() => DrawPolygonMode);
+  const [modeConfig, setModeConfig] = React.useState(null);
+
+  const layer = new EditableGeoJsonLayer({
+    data: features,
+    mode,
+    modeConfig,
+    selectedFeatureIndexes,
+
+    onEdit: ({ updatedData }) => {
+      setFeatures(updatedData);
+    }
+  });
+
+  return (
+    <>
+      <DeckGL
+        initialViewState={initialViewState}
+        controller={{
+          doubleClickZoom: false
+        }}
+        layers={[layer]}
+        getCursor={layer.getCursor.bind(layer)}
+      >
+        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
+      </DeckGL>
+      <Toolbox
+        position="topright"
+        mode={mode}
+        onSetMode={setMode}
+        modeConfig={modeConfig}
+        onSetModeConfig={setModeConfig}
+      />
+    </>
+  );
+}

examples/editor/package.json

@@ -0,0 +1,30 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^8.0.6",
+    "@deck.gl/layers": "^8.0.6",
+    "@deck.gl/mesh-layers": "^8.0.6",
+    "@deck.gl/react": "^8.0.6",
+    "react": "^16.8.0",
+    "react-dom": "^16.4.2",
+    "react-map-gl": "^5.2.1",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.3.0",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.11"
+  }
+}

examples/editor/webpack.config.js

@@ -0,0 +1,68 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+
+// avoid destructuring for older Node version support
+const resolve = require('path').resolve;
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const CONFIG = {
+  mode: 'development',
+
+  devtool: 'source-map',
+
+  entry: {
+    app: resolve('./app.js')
+  },
+
+  module: {
+    rules: [
+      {
+        // Compile ES2015 using babel
+        test: /\.js$/,
+        include: [resolve('.'), resolve('../../modules')],
+        exclude: [/node_modules/],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              require('@babel/preset-env'),
+              require('@babel/preset-react'),
+              require('@babel/preset-flow')
+            ],
+            plugins: [
+              require('@babel/plugin-proposal-class-properties'),
+              require('@babel/plugin-proposal-export-default-from')
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192
+            }
+          }
+        ]
+      },
+      {
+        // webpackl 4 fix for broken turf module: https://github.com/uber/nebula.gl/issues/64
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto'
+      }
+    ]
+  },
+
+  // Optional: Enables reading mapbox token from environment variable
+  plugins: [
+    new HtmlWebpackPlugin({ title: 'nebula.gl' }),
+    new webpack.EnvironmentPlugin(['MapboxAccessToken'])
+  ]
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('./../webpack.config.local')(CONFIG)(env) : CONFIG);