Merge 43e9034 into 9033b57

examples/quick-start/app.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
+import {QuickAnimation, Keyframes, hold} from 'hubble.gl';
+import {easing} from 'popmotion';
+
+const INITIAL_VIEW_STATE = {
+  longitude: -122.402,
+  latitude: 37.79,
+  zoom: 11
+};
+const DURATION = 3000;
+
+export default function App() {
+  const getKeyframes = () => {
+    return {
+      circle: new Keyframes({
+        features: ['opacity', 'radiusScale'],
+        keyframes: [
+          {opacity: 0, radiusScale: 0.01},
+          {opacity: 1, radiusScale: 1},
+          {opacity: 1, radiusScale: 1},
+          {opacity: 1, radiusScale: 20}
+        ],
+        timings: [0, 1000, 1500, 3000],
+        // https://popmotion.io/api/easing/
+        easings: [easing.anticipate, hold, easing.anticipate]
+      }),
+      text: new Keyframes({
+        features: ['opacity', 'getAngle'],
+        keyframes: [
+          {opacity: 0, getAngle: -90},
+          {opacity: 1, getAngle: 0},
+          {opacity: 1, getAngle: 0},
+          {opacity: 0, getAngle: 0}
+        ],
+        timings: [0, 1000, 1500, 2000],
+        easings: [easing.reversed(easing.anticipate), hold, easing.easeIn]
+      })
+    };
+  };
+  const getLayers = scene => {
+    const circleFrame = scene.keyframes.circle.getFrame();
+    const textFrame = scene.keyframes.text.getFrame();
+    return [
+      new ScatterplotLayer({
+        data: [{position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}],
+        getFillColor: d => d.color,
+        getRadius: d => d.radius,
+        ...circleFrame
+      }),
+      new TextLayer({
+        data: [{position: [-122.402, 37.79], text: 'Hello World'}],
+        ...textFrame
+      })
+    ];
+  };
+  return (
+    <QuickAnimation
+      initialViewState={INITIAL_VIEW_STATE}
+      width={640}
+      height={480}
+      getLayers={getLayers}
+      getLayerKeyframes={getKeyframes}
+      deckProps={{
+        parameters: {
+          clearColor: [255, 255, 255, 1]
+        }
+      }}
+      duration={DURATION}
+    />
+  );
+}

examples/quick-start/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import {render} from 'react-dom';
+import App from './app';
+
+render(<App />, document.body.appendChild(document.createElement('div')));

examples/quick-start/package.json

@@ -0,0 +1,26 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "clean": "rm -rf yarn.lock ./node_modules",
+    "bootstrap": "yarn clean && yarn"
+  },
+  "peerDependencies": {
+    "@luma.gl/debug": "^8.2.0"
+  },
+  "dependencies": {
+    "d3-color": "^1.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
+    "babel-loader": "^8.0.5",
+    "html-webpack-plugin": "^3.0.7",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.11"
+  }
+}

examples/quick-start/quick-start-after.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
+import {QuickAnimation, Keyframes, hold} from 'hubble.gl';
+import {easing} from 'popmotion';
+
+const INITIAL_VIEW_STATE = {
+  longitude: -122.402,
+  latitude: 37.79,
+  zoom: 11
+};
+
+const DURATION = 3000;
+
+export default function App() {
+  const getKeyframes = () => {
+    return {
+      circle: new Keyframes({
+        features: ['opacity', 'radiusScale'],
+        keyframes: [
+          {opacity: 0, radiusScale: 0.01},
+          {opacity: 1, radiusScale: 1},
+          {opacity: 1, radiusScale: 1},
+          {opacity: 1, radiusScale: 20}
+        ],
+        timings: [0, 1000, 1500, 3000],
+        easings: [easing.anticipate, hold, easing.anticipate]
+      }),
+      text: new Keyframes({
+        features: ['opacity', 'getAngle'],
+        keyframes: [
+          {opacity: 0, getAngle: -90},
+          {opacity: 1, getAngle: 0},
+          {opacity: 1, getAngle: 0},
+          {opacity: 0, getAngle: 0}
+        ],
+        timings: [0, 1000, 1500, 2000],
+        easings: [easing.reversed(easing.anticipate), hold, easing.easeIn]
+      })
+    };
+  };
+
+  const getLayers = scene => {
+    const circleFrame = scene.keyframes.circle.getFrame();
+    const textFrame = scene.keyframes.text.getFrame();
+    return [
+      new ScatterplotLayer({
+        data: [{position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}],
+        getFillColor: d => d.color,
+        getRadius: d => d.radius,
+        ...circleFrame
+      }),
+      new TextLayer({
+        data: [{position: [-122.402, 37.79], text: 'Hello World'}],
+        ...textFrame
+      })
+    ];
+  };
+
+  return (
+    <QuickAnimation
+      initialViewState={INITIAL_VIEW_STATE}
+      width={640}
+      height={480}
+      getLayers={getLayers}
+      getLayerKeyframes={getKeyframes}
+      deckProps={{
+        parameters: {
+          clearColor: [255, 255, 255, 1]
+        }
+      }}
+      duration={DURATION}
+    />
+  );
+}

examples/quick-start/quick-start-before.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
+import DeckGL from '@deck.gl/react';
+
+const INITIAL_VIEW_STATE = {
+  longitude: -122.402,
+  latitude: 37.79,
+  zoom: 11
+};
+
+export default function App() {
+  const layers = [
+    new ScatterplotLayer({
+      data: [{position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}],
+      getFillColor: d => d.color,
+      getRadius: d => d.radius
+    }),
+    new TextLayer({
+      data: [{position: [-122.402, 37.79], text: 'Hello World'}]
+    })
+  ];
+
+  return (
+    <DeckGL
+      initialViewState={INITIAL_VIEW_STATE}
+      width={640}
+      height={480}
+      layers={layers}
+      parameters={{
+        clearColor: [255, 255, 255, 1]
+      }}
+    />
+  );
+}

examples/quick-start/webpack.config.js

@@ -0,0 +1,38 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const config = {
+  mode: 'development',
+
+  entry: {
+    index: './index.js'
+  },
+
+  module: {
+    rules: [
+      {
+        // Transpile ES6 to ES5 with babel
+        // Remove if your app does not use JSX or you don't need to support old browsers
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: [/node_modules/],
+        options: {
+          plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
+          presets: ['@babel/preset-env', '@babel/preset-react']
+        }
+      }
+    ]
+  },
+
+  node: {
+    fs: 'empty'
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({title: 'hubble.gl deck quick-start example'}),
+    // Optional: Enables reading mapbox token from environment variable
+    new webpack.EnvironmentPlugin(['MapboxAccessToken'])
+  ]
+};
+
+module.exports = env => (env && env.local ? require('../webpack.config.local')(config) : config);

modules/core/src/adapters/deck-adapter.js

@@ -105,13 +105,15 @@ export default class DeckAdapter {
    * @param {() => Object<string, import('../keyframes').Keyframes>} getKeyframes
    */
   render(
-    getCameraKeyframes,
+    getCameraKeyframes = undefined,
     Encoder = PreviewEncoder,
     encoderSettings = {},
     onStop = undefined,
     getKeyframes = undefined
   ) {
-    this.scene.setCameraKeyframes(getCameraKeyframes());
+    if (getCameraKeyframes) {
+      this.scene.setCameraKeyframes(getCameraKeyframes());
+    }
     if (getKeyframes) {
       this.scene.setKeyframes(getKeyframes());
     }

modules/main/src/index.js

@@ -42,4 +42,4 @@ export {
   hold
 } from '@hubble.gl/core';
 
-export {useNextFrame, BasicControls, EncoderDropdown} from '@hubble.gl/react';
+export {useNextFrame, BasicControls, EncoderDropdown, QuickAnimation} from '@hubble.gl/react';

modules/react/src/components/index.js

@@ -22,3 +22,4 @@ export {default as EncoderDropdown} from './encoder-dropdown';
 export {default as ResolutionGuide} from './resolution-guide';
 export {ExportVideoModal, ExportVideoPanelContainer} from './export-video';
 export {injectKeplerUI, InjectKeplerUI, WithKeplerUI, KeplerUIContext} from './inject-kepler';
+export {QuickAnimation} from './quick-animation';

modules/react/src/components/quick-animation.js

@@ -0,0 +1,83 @@
+import React, {useState, useRef} from 'react';
+import DeckGL from '@deck.gl/react';
+import {DeckScene, DeckAdapter} from '@hubble.gl/core';
+import ResolutionGuide from './resolution-guide';
+import BasicControls from './basic-controls';
+import {useNextFrame} from '../hooks';
+
+export const QuickAnimation = ({
+  getCameraKeyframes = undefined,
+  getLayerKeyframes,
+  getLayers,
+  initialViewState,
+  duration,
+  width = 640,
+  height = 480,
+  encoderSettings = {},
+  deckProps = {}
+}) => {
+  const deckgl = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const nextFrame = useNextFrame();
+
+  const [viewState, setViewState] = useState(initialViewState);
+
+  const getDeckScene = animationLoop => {
+    return new DeckScene({
+      animationLoop,
+      lengthMs: duration,
+      width,
+      height,
+      initialKeyframes: getLayerKeyframes()
+    });
+  };
+
+  const [adapter] = useState(new DeckAdapter(getDeckScene));
+
+  const mergedEncoderSettings = {
+    framerate: 30,
+    webm: {
+      quality: 0.8
+    },
+    jpeg: {
+      quality: 0.8
+    },
+    gif: {
+      sampleInterval: 1
+    },
+    ...encoderSettings
+  };
+
+  return (
+    <div style={{position: 'relative'}}>
+      <div style={{position: 'absolute'}}>
+        <ResolutionGuide />
+      </div>
+      <DeckGL
+        ref={deckgl}
+        viewState={viewState}
+        onViewStateChange={({viewState: vs}) => {
+          setViewState(vs);
+        }}
+        controller={true}
+        {...adapter.getProps(deckgl, setReady, nextFrame, getLayers)}
+        {...deckProps}
+      />
+      <div style={{position: 'absolute'}}>
+        {ready && (
+          <BasicControls
+            adapter={adapter}
+            busy={busy}
+            setBusy={setBusy}
+            encoderSettings={mergedEncoderSettings}
+            getCameraKeyframes={
+              getCameraKeyframes ? () => getCameraKeyframes(viewState) : getCameraKeyframes
+            }
+            getKeyframes={getLayerKeyframes}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

modules/react/src/index.js

@@ -27,6 +27,7 @@ export {
   injectKeplerUI,
   InjectKeplerUI,
   WithKeplerUI,
-  KeplerUIContext
+  KeplerUIContext,
+  QuickAnimation
 } from './components';
 export {useNextFrame} from './hooks';