microsoft / SandDance

Visually explore, understand, and present your data.
https://microsoft.github.io/SandDance
MIT License
6.38k stars 525 forks source link

Ability to choose easing curve #130

Open Timmmm opened 4 years ago

Timmmm commented 4 years ago

This is really awesome, thanks! One minor feature request - is there a way to change the transition easing curve? You can change the durations, but the easing curve appears to be hard-coded to easeExpInOut which I find a bit "snappy". I think this is the relevant code:

function newCubeLayer(presenter, config, cubeData, highlightColor, lightSettings, lightingMix, interpolator) {
    const getPosition = getTiming(config.transitionDurations.position, easeExpInOut);
    const getSize = getTiming(config.transitionDurations.size, easeExpInOut);
    const getColor = getTiming(config.transitionDurations.color);

Just needs a config.transitionCurve or something too.

danmarshall commented 4 years ago

Thanks for the request @Timmmm. This would make a good first PR - begin by copying TransitionDurations in interfaces.ts: https://github.com/microsoft/SandDance/blob/011ac1e7d444b4f3b24b64ad96359814f0ee07b5/packages/sanddance/src/vega-deck.gl/interfaces.ts#L119

to create TransitionEasings, like this:

export interface TransitionEasings {
    color?: (t: number) => number;
    position?: (t: number) => number;
    size?: (t: number) => number;
    view?: (t: number) => number;
}

then add it to PresenterConfig: https://github.com/microsoft/SandDance/blob/011ac1e7d444b4f3b24b64ad96359814f0ee07b5/packages/sanddance/src/vega-deck.gl/interfaces.ts#L130

and finally to the place you mentioned in newCubeLayer: https://github.com/microsoft/SandDance/blob/54e14a0bf865b6dbd0ff4fe74b073f65eff26583/packages/sanddance/src/vega-deck.gl/layers.ts#L55

That would take care of the Presenter which integrates with deck.gl

Next, we add it to the SandDance Viewer by copying TransitionDurations in types.ts: https://github.com/microsoft/SandDance/blob/1e3e1f766b852a6b9cc7ffbbe92ce03d69d8d5b6/packages/sanddance/src/types.ts#L49

to create TransitionEasings at the next level, and adding it to ViewerOptions: https://github.com/microsoft/SandDance/blob/1e3e1f766b852a6b9cc7ffbbe92ce03d69d8d5b6/packages/sanddance/src/types.ts#L90

Lastly, we can add it to the defaultPresenterConfig in viewer.ts in the createConfig function: https://github.com/microsoft/SandDance/blob/54e14a0bf865b6dbd0ff4fe74b073f65eff26583/packages/sanddance/src/viewer.ts#L540

Hope that makes sense.

imrishabh18 commented 4 years ago

Hey @danmarshall , can i take up this issue ?

danmarshall commented 4 years ago

Hi @imrishabh18 , yes please and thank you!

imrishabh18 commented 4 years ago

What should I add at layer.ts file for TransitionEasings ?

danmarshall commented 4 years ago

@imrishabh18 - not sure what you are asking exactly... do you mean https://github.com/microsoft/SandDance/blob/master/packages/vega-deck.gl/src/layers.ts#L54 ?