Merge 9d82306 into 307b847

examples/experimental/bezier/src/bezier-graph-layer.js

@@ -1,6 +1,6 @@
 import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
 import {ScatterplotLayer} from '@deck.gl/layers';
-import {BezierCurveLayer} from './bezier-curve-layer/bezier-curve-layer';
+import BezierCurveLayer from './bezier-curve-layer/bezier-curve-layer';
 
 export default class BezierGraphLayer extends CompositeLayer {
   updateState({props, changeFlags}) {

examples/experimental/json-browser/app.js

@@ -0,0 +1,226 @@
+/* global window */
+import React, {Component} from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import DeckGL from '@deck.gl/react';
+import {_JSONConverter as JSONConverter} from '@deck.gl/json';
+
+import {StaticMap} from 'react-map-gl';
+
+import AceEditor from 'react-ace';
+import 'brace/mode/json';
+import 'brace/theme/github';
+
+import JSON_CONFIGURATION from './config/configuration';
+import JSON_TEMPLATES from './config/templates';
+
+const INITIAL_JSON = Object.values(JSON_TEMPLATES)[0];
+
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+const MAPBOX_STYLESHEET = `https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css`;
+
+const STYLES = {
+  CONTAINER: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+
+  LEFT_PANE: {
+    flex: '0 1 40%',
+    margin: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch'
+  },
+
+  LEFT_PANE_SELECTOR: {
+    flex: '0 0 34px',
+
+    margin: 0,
+    padding: '5px 35px 5px 5px',
+    fontSize: 16,
+    border: '1px solid #ccc',
+    appearance: 'none'
+  },
+
+  LEFT_PANE_TEXT: {
+    flex: '0 1 100%'
+  },
+
+  RIGHT_PANE: {
+    flex: '0 1 60%',
+    margin: 0
+  }
+};
+
+// Helper function to set mapbox stylesheet (avoids need for index.html just to set styles)
+function setStyleSheet(url) {
+  /* global document */
+  document.body.style.margin = '0px';
+  const styles = document.createElement('link');
+  styles.type = 'text/css';
+  styles.rel = 'stylesheet';
+  styles.href = url;
+  document.head.appendChild(styles);
+}
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+
+    setStyleSheet(MAPBOX_STYLESHEET);
+
+    this.state = {
+      // react-ace
+      text: '',
+      // deck.gl JSON Props
+      jsonProps: {},
+      // NOTE: viewState is re-initialized from jsonProps when those change,
+      // but can be updated independently by the user "panning".
+      viewState: null
+    };
+
+    // TODO/ib - could use arrow functions
+    // keeping like this for now to allow this code to be copied back to deck.gl
+    this._onTemplateChange = this._onTemplateChange.bind(this);
+    this._onEditorChange = this._onEditorChange.bind(this);
+
+    this.jsonConverter = new JSONConverter({configuration: JSON_CONFIGURATION});
+  }
+
+  componentDidMount() {
+    this._setEditorText(INITIAL_JSON);
+    this._setJSON(INITIAL_JSON);
+  }
+
+  // Updates deck.gl JSON props
+  // Called on init, when template is changed, or user types
+  _setJSON(json) {
+    const jsonProps = this.jsonConverter.convertJsonToDeckProps(json);
+    this.setState({
+      jsonProps,
+      viewState: jsonProps.viewState
+    });
+  }
+
+  // Updates pretty printed text in editor.
+  // Called on init, when template is changed, or user types
+  _setEditorText(json) {
+    // Pretty print JSON with tab size 2
+    const text = typeof json !== 'string' ? JSON.stringify(json, null, 2) : json;
+    // console.log('setting text', text)
+    this.setState({
+      text
+    });
+  }
+
+  _onTemplateChange(event) {
+    const value = event && event.target && event.target.value;
+    const json = JSON_TEMPLATES[value];
+    if (json) {
+      // Triggers an editor change, which updates the JSON
+      this._setEditorText(json);
+    }
+  }
+
+  _onEditorChange(text, event) {
+    let json = null;
+    // Parse JSON, while capturing and ignoring exceptions
+    try {
+      json = text && JSON.parse(text);
+    } catch (error) {
+      // ignore error, user is editing and not yet correct JSON
+    }
+    this._setEditorText(text);
+    this._setJSON(json);
+  }
+
+  _onViewStateChange({viewState}) {
+    // TODO - It would be cool to update the viewState here!
+    this.setState({viewState});
+  }
+
+  _renderJsonSelector() {
+    return (
+      <select
+        name="JSON templates"
+        onChange={this._onTemplateChange}
+        style={STYLES.LEFT_PANE_SELECTOR}
+      >
+        {Object.entries(JSON_TEMPLATES).map(([key]) => (
+          <option key={key} value={key}>
+            {key}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  render() {
+    const {jsonProps} = this.state;
+    const viewState = this.state.viewState;
+
+    return (
+      <div style={STYLES.CONTAINER}>
+        {/* Left Pane: Ace Editor and Template Selector */}
+        <div id="left-pane" style={STYLES.LEFT_PANE}>
+          {this._renderJsonSelector()}
+
+          <div style={STYLES.LEFT_PANE_TEXT}>
+            <AutoSizer>
+              {({width, height}) => (
+                <AceEditor
+                  width={`${width}px`}
+                  height={`${height}px`}
+                  mode="json"
+                  theme="github"
+                  onChange={this._onEditorChange}
+                  name="AceEditorDiv"
+                  editorProps={{$blockScrolling: true}}
+                  ref={instance => {
+                    this.ace = instance;
+                  }}
+                  value={this.state.text}
+                />
+              )}
+            </AutoSizer>
+          </div>
+        </div>
+
+        {/* Right Pane: DeckGL */}
+        <div id="right-pane" style={STYLES.RIGHT_PANE}>
+          {Boolean(jsonProps.map) && (
+            // TODO/ib/ib - can't get autosizer to work with react-map-gl
+            // upgrade to react-map-gl 4 which has built in autosizer
+            <StaticMap
+              reuseMap
+              {...jsonProps.map}
+              style={{}}
+              {...viewState}
+              viewState={viewState}
+              viewport={viewState}
+              width={window.innerWidth * 0.6}
+              height={window.innerHeight}
+              mapboxApiAccessToken={MAPBOX_TOKEN}
+            />
+          )}
+
+          <AutoSizer>
+            {() => (
+              <DeckGL
+                id="json-deck"
+                {...jsonProps}
+                viewState={viewState}
+                onViewStateChange={this._onViewStateChange.bind(this)}
+              />
+            )}
+          </AutoSizer>
+        </div>
+      </div>
+    );
+  }
+}

examples/experimental/json-common/configuration.js → examples/experimental/json-browser/config/configuration.js

@@ -1,10 +1,15 @@
 import {COORDINATE_SYSTEM} from '@deck.gl/core';
 import GL from '@luma.gl/constants';
 
+import * as Layers from '@deck.gl/layers';
+import * as AggregationLayers from '@deck.gl/aggregation-layers';
+import * as GeoLayers from '@deck.gl/geo-layers';
+import * as MeshLayers from '@deck.gl/mesh-layers';
+
 export default {
   // a map of all layers that should be exposes as JSONLayers
-  layers: Object.assign({}, require('@deck.gl/layers'), {
-    BezierGraphLayer: require('../bezier/bezier-graph-layer').default
+  layers: Object.assign({}, Layers, AggregationLayers, GeoLayers, MeshLayers, {
+    BezierGraphLayer: require('../../bezier/src/bezier-graph-layer').default
     // PlotLayer: require('../../website/plot/plot-layer').default
   }),
   // Any non-standard views

examples/experimental/json-browser/config/templates.js

@@ -0,0 +1,13 @@
+export default {
+  'website/3D Heatmap (HexagonLayer)': require('../../json-examples/3d-heatmap.json'),
+  'get-started/US map (GeoJsonLayer)': require('../../json-examples/us-map.json'),
+  'get-started/Dot Text (Scatterplot/TextLayer)': require('../../json-examples/dot-text.json'),
+  'experimental/Graph (BezierLayer)': require('../../json-examples/bezier-graph.json'),
+  // WEBSITE EXAMPLES AS JSON PAYLOADS
+  'website/GeoJSON (GeoJsonLayer)': require('../../json-examples/geojson.json'),
+  'website/Line (LineLayer)': require('../../json-examples/line.json'),
+  'website/Scatterplot (ScatterplotLayer)': require('../../json-examples/scatterplot.json'),
+  'website/Screen Grid (ScreenGridLayer)': require('../../json-examples/screen-grid.json'),
+  'website/TagMap (TextLayer)': require('../../json-examples/tagmap.json'),
+  'website/Plot (PlotLayer)': require('../../json-examples/plot.json')
+};

examples/experimental/json-react/package.json → examples/experimental/json-browser/package.json

@@ -8,13 +8,18 @@
     "build": "NODE_ENV=production webpack --env.prod=true"
   },
   "dependencies": {
+    "@deck.gl/core": "^7.0.0-alpha",
     "@deck.gl/json": "^7.0.0-alpha",
+    "@deck.gl/layers": "^7.0.0-alpha",
+    "@deck.gl/react": "^7.0.0-alpha",
+    "@luma.gl/constants": "^7.0.0-alpha",
     "brace": "^0.11.1",
-    "deck.gl": "^7.0.0-alpha",
-    "react": "~16.2.0",
+    "brace": "^0.11.1",
+    "react": "~16.7.0",
     "react-ace": "^6.1.4",
-    "react-dom": "~16.2.0",
-    "react-map-gl": "^3.3.4"
+    "react-dom": "~16.7.0",
+    "react-map-gl": "^4.0.0",
+    "react-virtualized-auto-sizer": "^1.0.2"
   },
   "devDependencies": {
     "buble": "^0.19.3",

examples/experimental/json-browser/root.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {render} from 'react-dom';
+import App from './app';
+
+/* global document */
+render(
+  <div style={{width: '100%', height: '100%'}}>
+    <App />
+  </div>,
+  document.body.appendChild(document.createElement('div'))
+);

examples/experimental/json-react/webpack.config.js → examples/experimental/json-browser/webpack.config.js

@@ -1,16 +1,16 @@
+/* eslint-disable */
 // 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 {resolve} = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const CONFIG = {
   mode: 'development',
 
   entry: {
-    app: resolve('./app.js')
+    app: resolve('./root.js')
   },
 
   module: {
@@ -38,4 +38,5 @@ const CONFIG = {
 };
 
 // This line enables bundling against src in this repo rather than installed deck.gl module
-module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);
+module.exports = env =>
+  env ? require('../../webpack.config.local')(CONFIG, __dirname)(env) : CONFIG;