Merge 031b3da into 956d475

visgl · Oct 9, 2019 · fe38bd9 · fe38bd9
2 parents 956d475 + 031b3da
commit fe38bd9
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 46 deletions.
diff --git a/examples/cesium/3d-tiles/app.js b/examples/cesium/3d-tiles/app.js
@@ -15,12 +15,6 @@ const MELBOURNE_ION_ASSET_ID = 43978;
 
 const viewer = new Cesium.Viewer('cesiumContainer');
 
-// const tileset = viewer.scene.primitives.add(
-//   new Cesium.Cesium3DTileset({
-//     url: Cesium.IonResource.fromAssetId(MELBOURNE_ION_ASSET_ID)
-//   })
-// );
-
 viewer.camera.flyTo({
   destination: new Cesium.Cartesian3(-4129177.4436845127, 2897358.104762894, -3895489.035314936),
   orientation: {

diff --git a/examples/deck.gl/3d-tiles/app.js b/examples/deck.gl/3d-tiles/app.js
@@ -3,7 +3,6 @@ import React, {PureComponent} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
-
 import {MapController, FlyToInterpolator} from '@deck.gl/core';
 // import {Tile3DLayer} from '@deck.gl/geo-layers';
 import Tile3DLayer from './3d-tile-layer/tile-3d-layer';
@@ -12,27 +11,25 @@ import {lumaStats} from '@luma.gl/core';
 import {StatsWidget} from '@probe.gl/stats-widget';
 
 // To manage dependencies and bundle size, the app must decide which supporting loaders to bring in
-import {registerLoaders} from '@loaders.gl/core';
-import {DracoWorkerLoader} from '@loaders.gl/draco';
+import {registerLoaders, setLoaderOptions} from '@loaders.gl/core';
+import {DracoLoader} from '@loaders.gl/draco';
 import {GLTFLoader} from '@loaders.gl/gltf';
 
 import ControlPanel from './components/control-panel';
 import fileDrop from './components/file-drop';
 
 import {loadExampleIndex, INITIAL_EXAMPLE_CATEGORY, INITIAL_EXAMPLE_NAME} from './examples';
+import {INITIAL_MAP_STYLE} from './constants';
 
-registerLoaders([GLTFLoader, DracoWorkerLoader]);
+// enable DracoWorkerLoader when fixed
+registerLoaders([GLTFLoader, DracoLoader]);
+setLoaderOptions({
+  worker: false
+});
 
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
-const MAP_STYLES = {
-  'Base Map: Satellite': 'mapbox://styles/mapbox/satellite-v9',
-  'Base Map: Light': 'mapbox://styles/mapbox/light-v9',
-  'Base Map: Dark': 'mapbox://styles/mapbox/dark-v9'
-};
-
-const INITIAL_MAP_STYLE = MAP_STYLES['Base Map: Dark'];
 const TRANSITION_DURAITON = 4000;
 const EXAMPLES_VIEWSTATE = {
   latitude: 40.04248558075302,
@@ -57,6 +54,9 @@ export default class App extends PureComponent {
       // CURRENT VIEW POINT / CAMERA POSITIO
       viewState: INITIAL_VIEW_STATE,
 
+      // current tileset
+      tileset: null,
+
       // MAP STATE
       selectedMapStyle: INITIAL_MAP_STYLE,
 
@@ -65,8 +65,7 @@ export default class App extends PureComponent {
       examplesByCategory: null,
       selectedExample: {},
       category: INITIAL_EXAMPLE_CATEGORY,
-      name: INITIAL_EXAMPLE_NAME,
-      attributions: []
+      name: INITIAL_EXAMPLE_NAME
     };
 
     this._deckRef = null;
@@ -163,7 +162,7 @@ export default class App extends PureComponent {
 
   // Called by Tile3DLayer when a new tileset is loaded
   _onTilesetLoad(tileset) {
-    this.setState({description: tileset.description, attributions: tileset.credits.attributions});
+    this.setState({tileset});
     this._tilesetStatsWidget.setStats(tileset.stats);
     this._centerViewOnTileset(tileset);
   }
@@ -200,28 +199,17 @@ export default class App extends PureComponent {
   }
 
   _renderControlPanel() {
-    const {
-      examplesByCategory,
-      category,
-      name,
-      viewState,
-      selectedMapStyle,
-      attributions,
-      description
-    } = this.state;
+    const {examplesByCategory, category, name, viewState, tileset} = this.state;
     if (!examplesByCategory) {
       return null;
     }
 
     return (
       <ControlPanel
-        mapStyles={MAP_STYLES}
-        selectedMapStyle={selectedMapStyle}
         data={examplesByCategory}
         category={category}
         name={name}
-        description={description}
-        attributions={attributions}
+        tileset={tileset}
         onMapStyleChange={this._onSelectMapStyle.bind(this)}
         onExampleChange={this._onSelectExample.bind(this)}
       >

diff --git a/examples/deck.gl/3d-tiles/components/control-panel.js b/examples/deck.gl/3d-tiles/components/control-panel.js
@@ -3,6 +3,8 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import marked from 'marked';
 
+import {MAP_STYLES} from '../constants';
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -48,10 +50,9 @@ const propTypes = {
   name: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   droppedFile: PropTypes.string,
-  attributions: PropTypes.array,
-  description: PropTypes.string,
-  mapStyles: PropTypes.object.isRequired,
-  selectedMapStyle: PropTypes.string.isRequired,
+  tileset: PropTypes.object,
+  mapStyles: PropTypes.object,
+  selectedMapStyle: PropTypes.string,
   onExampleChange: PropTypes.func,
   onMapStyleChange: PropTypes.func,
   children: PropTypes.node
@@ -75,6 +76,11 @@ export default class ControlPanel extends PureComponent {
           const selected = evt.target.value;
           const [newCategory, newName] = selected.split('.');
           const categoryExamples = data[newCategory].examples;
+          this.setState({
+            category: newCategory,
+            name: newName,
+            example: categoryExamples[newName]
+          });
           onExampleChange({
             category: newCategory,
             name: newName,
@@ -102,7 +108,7 @@ export default class ControlPanel extends PureComponent {
   }
 
   _renderMapStyles() {
-    const {onMapStyleChange, mapStyles, selectedMapStyle} = this.props;
+    const {onMapStyleChange, mapStyles = MAP_STYLES, selectedMapStyle} = this.props;
 
     return (
       <DropDown
@@ -129,17 +135,23 @@ export default class ControlPanel extends PureComponent {
   }
 
   _renderInfo() {
-    const {description, attributions} = this.props;
-    if (!attributions || attributions.length === 0) {
+    if (!this.props.tileset) {
+      return null;
+    }
+
+    const {description, credits} = this.props.tileset;
+    const attributions = credits && credits.attributions;
+    if (!attributions || attributions.length === 0 || !description) {
       return null;
     }
 
     return (
       <InfoContainer>
-        {Boolean(attributions.length) && <b>Tileset Credentials</b>}
-        {attributions.map(attribution => (
-          <div key={attribution.html} dangerouslySetInnerHTML={{__html: attribution.html}} />
-        ))}
+        {Boolean(attributions && attributions.length) && <b>Tileset Credentials</b>}
+        {Boolean(attributions && attributions.length) &&
+          attributions.map(attribution => (
+            <div key={attribution.html} dangerouslySetInnerHTML={{__html: attribution.html}} />
+          ))}
         {description && <Description dangerouslySetInnerHTML={{__html: marked(description)}} />}
       </InfoContainer>
     );

diff --git a/examples/deck.gl/3d-tiles/constants.js b/examples/deck.gl/3d-tiles/constants.js
@@ -0,0 +1,7 @@
+export const MAP_STYLES = {
+  'Base Map: Satellite': 'mapbox://styles/mapbox/satellite-v9',
+  'Base Map: Light': 'mapbox://styles/mapbox/light-v9',
+  'Base Map: Dark': 'mapbox://styles/mapbox/dark-v9'
+};
+
+export const INITIAL_MAP_STYLE = MAP_STYLES['Base Map: Dark'];
diff --git a/examples/deck.gl/gltf/package.json b/examples/deck.gl/gltf/package.json
@@ -20,6 +20,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-inline-import": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.1.2",

diff --git a/examples/deck.gl/pointcloud/package.json b/examples/deck.gl/pointcloud/package.json
@@ -17,6 +17,7 @@
     "@babel/core": "^7.4.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-inline-import": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",

diff --git a/examples/webpack.config.local.js b/examples/webpack.config.local.js
@@ -15,6 +15,8 @@ const ALIASES = require('ocular-dev-tools/config/ocular.config')({
 }).aliases;
 
 const ROOT_DIR = resolve(__dirname, '..');
+const PACKAGE_ROOT = resolve('../../../');
+const PACKAGE_INFO = require(resolve(PACKAGE_ROOT, 'package.json'));
 
 const BABEL_CONFIG = {
   presets: ['@babel/env'],
@@ -65,7 +67,7 @@ const LOCAL_DEVELOPMENT_CONFIG = {
     stats: {
       warnings: false
     },
-    contentBase: [resolve('.'), resolve('../../')]
+    contentBase: [resolve('.'), resolve('../../../')]
   },
 
   // this is required by draco
@@ -109,7 +111,12 @@ const LOCAL_DEVELOPMENT_CONFIG = {
     ]
   },
 
-  plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
+  plugins: [
+    new webpack.EnvironmentPlugin(['MapboxAccessToken']),
+    new webpack.DefinePlugin({
+      __VERSION__: JSON.stringify(PACKAGE_INFO.version)
+    })
+  ]
 };
 
 function addLocalDependency(config, dependency) {