correct easing at 0 & 1 (microsoft#259)

guel-codes · Jul 21, 2020 · 4640aef · 4640aef
1 parent 4cc744e
commit 4640aef
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/vega-deck.gl/src/easing.ts b/packages/vega-deck.gl/src/easing.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+import { easeExpInOut } from 'd3-ease';
+
+export function easing(t: number) {
+    if (t === 0 || t === 1) return t;
+    return easeExpInOut(t);
+}
diff --git a/packages/vega-deck.gl/src/layers.ts b/packages/vega-deck.gl/src/layers.ts
@@ -5,6 +5,7 @@ import { base } from './base';
 import { layerNames } from './constants';
 import { CubeLayer, CubeLayerInterpolatedProps, CubeLayerProps } from './cube-layer/cube-layer';
 import { LinearInterpolator_Class } from './deck.gl-classes/linearInterpolator';
+import { easing } from './easing';
 import {
     Cube,
     PresenterConfig,
@@ -18,7 +19,6 @@ import { Presenter } from './presenter';
 import { RGBAColor } from '@deck.gl/core/utils/color';
 import { DeckProps } from '@deck.gl/core/lib/deck';
 import { InterpolationTransitionTiming } from '@deck.gl/core/lib/layer';
-import { easeExpInOut } from 'd3-ease';
 import { Layer } from 'deck.gl';
 import { TextLayerProps } from '@deck.gl/layers/text-layer/text-layer';
 
@@ -56,8 +56,8 @@ export function getLayers(
 }
 
 function newCubeLayer(presenter: Presenter, config: PresenterConfig, cubeData: Cube[], highlightColor: RGBAColor, lightSettings: any /*LightSettings*/, lightingMix: number, interpolator?: LinearInterpolator_Class<CubeLayerInterpolatedProps>) {
-    const getPosition = getTiming(config.transitionDurations.position, easeExpInOut);
-    const getSize = getTiming(config.transitionDurations.size, easeExpInOut);
+    const getPosition = getTiming(config.transitionDurations.position, easing);
+    const getSize = getTiming(config.transitionDurations.size, easing);
     const getColor = getTiming(config.transitionDurations.color);
     const cubeLayerProps: CubeLayerProps = {
         interpolator,

diff --git a/packages/vega-deck.gl/src/presenter.ts b/packages/vega-deck.gl/src/presenter.ts
@@ -13,6 +13,7 @@ import {
 import { LinearInterpolator, LinearInterpolator_Class } from './deck.gl-classes/linearInterpolator';
 import { OrbitController_Class } from './deck.gl-classes/orbitController';
 import { createStage, defaultPresenterConfig, defaultPresenterStyle } from './defaults';
+import { easing } from './easing';
 import { lightingEffects } from './effects';
 import { PresenterElement } from './enums';
 import {
@@ -33,7 +34,6 @@ import { sceneToStage } from './stagers';
 import { targetViewState, viewStateProps } from './viewState';
 import { DeckProps } from '@deck.gl/core/lib/deck';
 import { View } from '@msrvida/chart-types';
-import { easeExpInOut } from 'd3-ease';
 import { getActiveElementInfo, mount, setActiveElement } from 'tsx-create-element';
 
 interface IBounds {
@@ -286,7 +286,7 @@ export class Presenter {
                 linearInterpolator.layerStartProps = { lightingMix: oldCubeLayer.props.lightingMix };
                 linearInterpolator.layerEndProps = { lightingMix };
                 viewState.transitionDuration = config.transitionDurations.view;
-                viewState.transitionEasing = easeExpInOut;
+                viewState.transitionEasing = easing;
                 viewState.transitionInterpolator = linearInterpolator;
             }
             if (stage.view === '2d') {
@@ -339,7 +339,7 @@ export class Presenter {
     homeCamera() {
         const viewState = targetViewState(this._last.height, this._last.width, this._last.view) as any;
         viewState.transitionDuration = defaultPresenterConfig.transitionDurations.view;
-        viewState.transitionEasing = easeExpInOut;
+        viewState.transitionEasing = easing;
         viewState.transitionInterpolator = new LinearInterpolator(viewStateProps);
         const deckProps: Partial<DeckProps> = {
             effects: lightingEffects(),