rename(worldview) dimension to resolution (#175)

* rename(worldview) dimension to resolution * more dimension to resolution
visgl · Oct 7, 2021 · 6f6cc08 · 6f6cc08
1 parent 5e169fd
commit 6f6cc08
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 52 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -34,7 +34,7 @@ const timecode = {
   framerate: 30
 }
 
-const dimension = {
+const resolution = {
   width: 1920,
   height: 1080
 }
@@ -80,8 +80,8 @@ export default function App() {
     <div style={{position: 'relative'}}>
       <DeckGL
         ref={deckRef}
-        width={dimension.width}
-        height={dimension.height}
+        width={resolution.width}
+        height={resolution.height}
         {...adapter.getProps({deck, onNextFrame, getLayers})}
       />
       <div style={{position: 'absolute'}}>

diff --git a/examples/camera/app.js b/examples/camera/app.js
@@ -35,7 +35,7 @@ const timecode = {
   framerate: 30
 };
 
-const dimension = {
+const resolution = {
   width: 640,
   height: 480
 };
@@ -73,8 +73,8 @@ export default function App() {
   useEffect(() => {
     adapter.animationManager.setKeyframes('deck', {
       cameraKeyframe: {
-        width: dimension.width,
-        height: dimension.height,
+        width: resolution.width,
+        height: resolution.height,
         timings: [0, timecode.end - 250],
         keyframes: [viewStateA, viewStateB],
         easings: easing.easeInOut
@@ -103,8 +103,8 @@ export default function App() {
         }}
         controller={true}
         effects={[vignetteEffect, aaEffect]}
-        width={dimension.width}
-        height={dimension.height}
+        width={resolution.width}
+        height={resolution.height}
         layers={layers}
         {...adapter.getProps({deck, onNextFrame})}
       />

diff --git a/examples/quick-start/app.js b/examples/quick-start/app.js
@@ -59,7 +59,7 @@ const TIMECODE = {
   framerate: 30
 };
 
-const DIMENSION = {
+const RESOLUTION = {
   width: 640,
   height: 480
 };
@@ -68,7 +68,7 @@ export default function App() {
   return (
     <QuickAnimation
       initialViewState={INITIAL_VIEW_STATE}
-      dimension={DIMENSION}
+      resolution={RESOLUTION}
       animation={animation}
       deckProps={{
         parameters: {

diff --git a/examples/quick-start/quick-start-after.js b/examples/quick-start/quick-start-after.js
@@ -59,7 +59,7 @@ const TIMECODE = {
   framerate: 30
 };
 
-const DIMENSION = {
+const RESOLUTION = {
   width: 640,
   height: 480
 };
@@ -68,7 +68,7 @@ export default function App() {
   return (
     <QuickAnimation
       initialViewState={INITIAL_VIEW_STATE}
-      dimension={DIMENSION}
+      resolution={RESOLUTION}
       animation={animation}
       deckProps={{
         parameters: {

diff --git a/examples/terrain/app.js b/examples/terrain/app.js
@@ -109,7 +109,7 @@ const timecode = {
   framerate: 30
 };
 
-const dimension = {
+const resolution = {
   width: 640,
   height: 480
 };
@@ -156,8 +156,8 @@ export default function App() {
           setCameraFrame(vs);
         }}
         controller={true}
-        width={dimension.width}
-        height={dimension.height}
+        width={resolution.width}
+        height={resolution.height}
         layers={layers}
         {...adapter.getProps({deck, onNextFrame})}
       />

diff --git a/examples/trips/app.js b/examples/trips/app.js
@@ -88,7 +88,7 @@ const timecode = {
   framerate: 30
 };
 
-const dimension = {
+const resolution = {
   width: 1280,
   height: 720
 };
@@ -206,8 +206,8 @@ export default function App({mapStyle = 'mapbox://styles/mapbox/dark-v9'}) {
           // blendEquation: GL.FUNC_ADD,
           blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA]
         }}
-        width={dimension.width}
-        height={dimension.height}
+        width={resolution.width}
+        height={resolution.height}
         {...adapter.getProps({deck})}
       >
         {glContext && (

diff --git a/examples/worldview/src/features/map/DebugOverlay.js b/examples/worldview/src/features/map/DebugOverlay.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 /* eslint-disable complexity */
-export function DebugOverlay({containerRef, deckRef, dimension, previewSize, dpi, onDpiChange}) {
+export function DebugOverlay({containerRef, deckRef, resolution, previewSize, dpi, onDpiChange}) {
   const container = containerRef && containerRef.current;
   const deck = deckRef.current;
   const canvas = deck && deck._canvasRef.current;
@@ -11,7 +11,7 @@ export function DebugOverlay({containerRef, deckRef, dimension, previewSize, dpi
   return (
     <div style={{position: 'absolute', top: 0, left: 0, color: 'white'}}>
       <div>
-        Expected Export size: <b>{dimension.width}</b>px x <b>{dimension.height}</b>px
+        Expected Export size: <b>{resolution.width}</b>px x <b>{resolution.height}</b>px
       </div>
       <div>
         Expected Container size: <b>{previewSize.width}</b>px x <b>{previewSize.height}</b>px

diff --git a/examples/worldview/src/features/map/Map.js b/examples/worldview/src/features/map/Map.js
@@ -45,8 +45,11 @@ export class Map extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const {dimension, previewSize} = this.props;
-    if (!isEqual(prevProps.dimension, dimension) || !isEqual(prevProps.previewSize, previewSize)) {
+    const {resolution, previewSize} = this.props;
+    if (
+      !isEqual(prevProps.resolution, resolution) ||
+      !isEqual(prevProps.previewSize, previewSize)
+    ) {
       this._resizeVideo();
     }
   }
@@ -57,8 +60,8 @@ export class Map extends Component {
   }
 
   _resizeVideo() {
-    const {previewSize, dimension} = this.props;
-    this._setDevicePixelRatio(nearestEven(dimension.width / previewSize.width));
+    const {previewSize, resolution} = this.props;
+    this._setDevicePixelRatio(nearestEven(resolution.width / previewSize.width));
     if (this.mapRef.current) {
       const map = this.mapRef.current.getMap();
       map.resize();
@@ -128,7 +131,7 @@ export class Map extends Component {
       setViewState,
       deckProps,
       staticMapProps,
-      dimension,
+      resolution,
       debug
     } = this.props;
     const {glContext} = this.state;
@@ -156,8 +159,8 @@ export class Map extends Component {
           glOptions={{stencil: true}}
           onWebGLInitialized={gl => this.setState({glContext: gl})}
           onViewStateChange={({viewState: vs}) => setViewState(vs)}
-          width={dimension.width}
-          height={dimension.height}
+          width={resolution.width}
+          height={resolution.height}
           {...adapter.getProps({deck, extraProps: deckProps})}
         >
           {glContext && (
@@ -174,7 +177,7 @@ export class Map extends Component {
           <DebugOverlay
             deckRef={this.deckRef}
             containerRef={this.containerRef}
-            dimension={dimension}
+            resolution={resolution}
             previewSize={previewSize}
           />
         )}

diff --git a/examples/worldview/src/features/map/MapContainer.js b/examples/worldview/src/features/map/MapContainer.js
@@ -23,14 +23,14 @@ import React from 'react';
 import {Map} from './Map';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {dimensionSelector, adapterSelector} from '../renderer';
+import {resolutionSelector, adapterSelector} from '../renderer';
 
 import {updateViewState, viewStateSelector} from './mapSlice';
 import {updateTimeCursor} from '../timeline/timelineSlice';
 
 export const MapContainer = ({previewSize, deckProps, staticMapProps, debug}) => {
   const dispatch = useDispatch();
-  const dimension = useSelector(dimensionSelector);
+  const resolution = useSelector(resolutionSelector);
   const viewState = useSelector(viewStateSelector);
   const adapter = useSelector(adapterSelector);
 
@@ -45,7 +45,7 @@ export const MapContainer = ({previewSize, deckProps, staticMapProps, debug}) =>
       setViewState={vs => dispatch(updateViewState(vs))}
       // Hubble Props
       adapter={adapter}
-      dimension={dimension}
+      resolution={resolution}
       updateTimeCursor={timeMs => dispatch(updateTimeCursor(timeMs))}
       debug={debug}
     />

diff --git a/examples/worldview/src/features/monitor/MonitorPanel.js b/examples/worldview/src/features/monitor/MonitorPanel.js
@@ -4,7 +4,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import {
   busySelector,
   durationSelector,
-  dimensionSelector,
+  resolutionSelector,
   usePreviewHandler,
   useRenderHandler,
   seekTime
@@ -100,7 +100,7 @@ const SeekSlider = () => {
   );
 };
 
-const DimensionPicker = () => {
+const ResolutionPicker = () => {
   const dispatch = useDispatch();
 
   return (
@@ -125,7 +125,7 @@ const DimensionPicker = () => {
 export const MonitorPanel = ({deckProps = undefined, staticMapProps = undefined}) => {
   const rendererBusy = useSelector(busySelector);
   const viewState = useSelector(viewStateSelector);
-  const dimension = useSelector(dimensionSelector);
+  const resolution = useSelector(resolutionSelector);
   const onPreview = usePreviewHandler();
   const onRender = useRenderHandler();
 
@@ -142,7 +142,10 @@ export const MonitorPanel = ({deckProps = undefined, staticMapProps = undefined}
       }}
     >
       <div style={{flex: 1, position: 'relative'}}>
-        <Pillarbox dimension={dimension} overlay={rendererBusy === 'rendering' && <RenderStatus />}>
+        <Pillarbox
+          resolution={resolution}
+          overlay={rendererBusy === 'rendering' && <RenderStatus />}
+        >
           {previewSize => (
             <Map
               previewSize={previewSize}
@@ -155,7 +158,7 @@ export const MonitorPanel = ({deckProps = undefined, staticMapProps = undefined}
       </div>
       <PrintViewState viewState={viewState} />
       <MonitorBottomToolbar playing={Boolean(rendererBusy)} onPreview={onPreview} />
-      <DimensionPicker />
+      <ResolutionPicker />
       <button onClick={onRender}>Render</button>
       <SeekSlider />
     </div>

diff --git a/examples/worldview/src/features/monitor/Pillarbox.js b/examples/worldview/src/features/monitor/Pillarbox.js
@@ -3,16 +3,16 @@ import styled from 'styled-components';
 import {AutoSizer} from 'react-virtualized';
 import {nearestEven, scale} from '../../utils';
 
-const AutoSizePillarbox = ({children, dimension}) => {
+const AutoSizePillarbox = ({children, resolution}) => {
   const getPreviewSize = useCallback(
     ({width, height}) => {
-      const scalar = scale({width, height}, dimension);
+      const scalar = scale({width, height}, resolution);
       return {
-        width: nearestEven(dimension.width * scalar, 0),
-        height: nearestEven(dimension.height * scalar, 0)
+        width: nearestEven(resolution.width * scalar, 0),
+        height: nearestEven(resolution.height * scalar, 0)
       };
     },
-    [dimension]
+    [resolution]
   );
 
   return (
@@ -54,9 +54,9 @@ const PillarboxOverlay = ({children, size}) => {
   );
 };
 
-export const Pillarbox = ({children, overlay, dimension}) => {
+export const Pillarbox = ({children, overlay, resolution}) => {
   return (
-    <AutoSizePillarbox dimension={dimension}>
+    <AutoSizePillarbox resolution={resolution}>
       {({previewSize, pillarboxSize}) => (
         <PillarboxBackground size={pillarboxSize}>
           {children ? (

diff --git a/examples/worldview/src/features/renderer/index.js b/examples/worldview/src/features/renderer/index.js
@@ -12,7 +12,7 @@ export {
   formatConfigsChange,
   resolutionChange,
   timecodeChange,
-  dimensionSelector,
+  resolutionSelector,
   busySelector,
   durationSelector,
   adapterSelector

diff --git a/examples/worldview/src/features/renderer/rendererSlice.js b/examples/worldview/src/features/renderer/rendererSlice.js
@@ -37,7 +37,7 @@ const defaultResolution = getResolutionSetting();
 const initialState = {
   adapter: new DeckAdapter({}),
   busy: false, // 'rendering' | 'previewing'
-  dimensionState: defaultResolution,
+  resolution: defaultResolution,
   filename: DEFAULT_FILENAME,
   format: 'webm',
   formatConfigs: {
@@ -75,7 +75,7 @@ const filenameChangeSlice = {
 };
 
 const resolutionChangeSlice = {
-  reducer: (state, action) => void (state.dimensionState = action.payload),
+  reducer: (state, action) => void (state.resolution = action.payload),
   // @param resolution: <Preset | {width, height}>
   prepare: resolution => {
     // resolution is preset string
@@ -155,7 +155,7 @@ export const durationSelector = createSelector(timecodeSelector, timecode => {
 export const formatConfigsSelector = state => state.hubbleGl.renderer.formatConfigs;
 export const filenameSelector = state => state.hubbleGl.renderer.filename;
 
-export const dimensionSelector = state => state.hubbleGl.renderer.dimensionState;
+export const resolutionSelector = state => state.hubbleGl.renderer.resolution;
 
 /**
  * Returns a truthy string if busy, otherwise false.

diff --git a/modules/react/src/components/quick-animation.js b/modules/react/src/components/quick-animation.js
@@ -8,7 +8,7 @@ export const QuickAnimation = ({
   initialViewState,
   animation,
   timecode,
-  dimension = {width: 640, height: 480},
+  resolution = {width: 640, height: 480},
   formatConfigs = {},
   deckProps = {}
 }) => {
@@ -30,8 +30,8 @@ export const QuickAnimation = ({
     },
     gif: {
       sampleInterval: 1,
-      width: dimension.width,
-      height: dimension.height
+      width: resolution.width,
+      height: resolution.height
     },
     ...formatConfigs
   };
@@ -54,8 +54,8 @@ export const QuickAnimation = ({
           setCameraFrame(vs);
         }}
         controller={true}
-        width={dimension.width}
-        height={dimension.height}
+        width={resolution.width}
+        height={resolution.height}
         layers={layers}
         {...adapter.getProps({deck, onNextFrame, extraProps: deckProps})}
       />