fix(animation): add getTimeRangeFilterKeyframes prop for export-video…

…-panel-container (#221) * add getTimeRangeFilterKeyframes prop
visgl · Jan 19, 2022 · b88efcb · b88efcb
1 parent 82eab71
commit b88efcb
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/modules/core/src/animations/kepler-animation.js b/modules/core/src/animations/kepler-animation.js
@@ -54,6 +54,7 @@ export default class KeplerAnimation extends Animation {
     layerKeyframes = [],
     filters = [],
     filterKeyframes = [],
+    getTimeRangeFilterKeyframes = undefined,
     animationConfig = undefined,
     tripKeyframe = undefined,
     cameraKeyframe = undefined,
@@ -76,7 +77,8 @@ export default class KeplerAnimation extends Animation {
       filterKeyframes,
       cameraKeyframe,
       animationConfig,
-      tripKeyframe
+      tripKeyframe,
+      getTimeRangeFilterKeyframes
     });
     this.draw();
   }
@@ -86,6 +88,7 @@ export default class KeplerAnimation extends Animation {
     layerKeyframes = [],
     filters = [],
     filterKeyframes = [],
+    getTimeRangeFilterKeyframes = undefined,
     animationConfig = undefined,
     tripKeyframe = undefined,
     cameraKeyframe = undefined,
@@ -129,7 +132,12 @@ export default class KeplerAnimation extends Animation {
           if (acc[filter.id]) {
             acc[filter.id].set({filter, ...filterKeyframe});
           } else {
-            acc[filter.id] = new KeplerFilterKeyframes({filter, filterIdx, ...filterKeyframe});
+            acc[filter.id] = new KeplerFilterKeyframes({
+              filter,
+              filterIdx,
+              getTimeRangeFilterKeyframes,
+              ...filterKeyframe
+            });
             this.unattachedKeyframes.push(acc[filter.id]);
           }
         }

diff --git a/modules/core/src/keyframes/kepler-filter-keyframes.js b/modules/core/src/keyframes/kepler-filter-keyframes.js
@@ -114,18 +114,35 @@ class KeplerFilterKeyframes extends Keyframes {
   id;
   type;
   filterIdx;
+  getTimeRangeFilterKeyframes;
 
-  constructor({filter, filterIdx, timings, keyframes, easings, interpolators}) {
+  constructor({
+    filter,
+    filterIdx,
+    timings,
+    keyframes,
+    easings,
+    interpolators,
+    getTimeRangeFilterKeyframes = undefined
+  }) {
     if (filter.type === 'input') {
       throw new Error("filter type 'input' is not supported.");
     }
     super(
-      KeplerFilterKeyframes._processParams({filter, timings, keyframes, easings, interpolators})
+      KeplerFilterKeyframes._processParams({
+        filter,
+        timings,
+        keyframes,
+        easings,
+        interpolators,
+        getTimeRangeFilterKeyframes
+      })
     );
     this.id = filter.id;
     this.type = filter.type;
     this.animationWindow = filter.animationWindow;
     this.filterIdx = filterIdx;
+    this.getTimeRangeFilterKeyframes = getTimeRangeFilterKeyframes;
   }
 
   set({filter = undefined, filterIdx = undefined, timings, keyframes, easings, interpolators}) {
@@ -136,7 +153,14 @@ class KeplerFilterKeyframes extends Keyframes {
       this.filterIdx = filterIdx;
     }
     super.set(
-      KeplerFilterKeyframes._processParams({filter, timings, keyframes, easings, interpolators})
+      KeplerFilterKeyframes._processParams({
+        filter,
+        timings,
+        keyframes,
+        easings,
+        interpolators,
+        getTimeRangeFilterKeyframes: this.getTimeRangeFilterKeyframes
+      })
     );
   }
 
@@ -178,13 +202,22 @@ class KeplerFilterKeyframes extends Keyframes {
     return super.getFrame();
   }
 
-  static _processParams({filter = undefined, timings, keyframes, easings, interpolators}) {
+  static _processParams({
+    filter = undefined,
+    timings,
+    keyframes,
+    easings,
+    interpolators,
+    getTimeRangeFilterKeyframes = undefined
+  }) {
     let params = {features: ['value'], timings, keyframes, easings, interpolators};
     if (filter && filter.type === 'timeRange' && keyframes === undefined) {
       if (timings.length !== 2) throw new Error('[start, end] timings required.');
       params = {
         ...params,
-        ...timeRangeKeyframes({filter, timings})
+        ...(getTimeRangeFilterKeyframes
+          ? getTimeRangeFilterKeyframes({filter, timings})
+          : timeRangeKeyframes({filter, timings}))
       };
     }
     return params;

diff --git a/modules/react/src/components/export-video/export-video-panel-container.js b/modules/react/src/components/export-video/export-video-panel-container.js
@@ -82,14 +82,15 @@ export class ExportVideoPanelContainer extends Component {
   }
 
   componentDidMount() {
-    const {onTripFrameUpdate, onFilterFrameUpdate} = this.props;
+    const {onTripFrameUpdate, onFilterFrameUpdate, getTimeRangeFilterKeyframes} = this.props;
     const animation = new KeplerAnimation({
       ...this.getFilterKeyframes(),
       ...this.getTripKeyframes(),
       cameraKeyframe: this.getCameraKeyframes(),
       onCameraFrameUpdate: this.setViewState,
       onTripFrameUpdate,
-      onFilterFrameUpdate
+      onFilterFrameUpdate,
+      getTimeRangeFilterKeyframes
     });
     this.state.adapter.animationManager.attachAnimation(animation);
   }