Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/node-transitions.js

@@ -0,0 +1,113 @@
+import BezierEasing from 'bezier-easing';
+
+const EaseCurves = require('./easecurves');
+
+export default function transitionParameter(node, name, endValue, transition) {
+  if (node._transitions && node._transitions[name]) {
+    node._transitions[name].stop();
+    delete node._transitions[name];
+  }
+
+  const startValue = node.getInputValue(name);
+
+  const input = node.getInput(name);
+
+  let animation;
+
+  if (input && input.type === 'color') {
+    animation = colorAnimation(
+      node.context.styles.resolveColor(startValue),
+      node.context.styles.resolveColor(endValue)
+    );
+  } else if (typeof startValue === 'number' && typeof endValue === 'number') {
+    animation = numberAnimation(startValue, endValue);
+  } else if (
+    typeof startValue === 'object' &&
+    startValue.hasOwnProperty('value') &&
+    typeof endValue === 'object' &&
+    endValue.hasOwnProperty('value')
+  ) {
+    animation = numberAnimation(startValue.value, endValue.value);
+  }
+
+  if (animation) {
+    if (!node._transitions) node._transitions = {};
+
+    const ease = BezierEasing(transition.curve);
+
+    node._transitions[name] = node.context.timerScheduler.createTimer({
+      duration: transition.dur,
+      onRunning: (t) => {
+        const v = animation(ease.get(t));
+        node.queueInput(name, v);
+      },
+      onFinish: () => {
+        delete node._transitions[name];
+      }
+    });
+
+    node._transitions[name].start();
+  } else {
+    //no transition supported for this parameter type, so just set it
+    node.queueInput(name, endValue);
+  }
+}
+
+function numberAnimation(start, end) {
+  return (t) => {
+    return EaseCurves.linear(start, end, t);
+  };
+}
+
+function setRGBA(result, hex) {
+  if (hex === 'transparent' || !hex) {
+    result[3] = 0;
+    return;
+  }
+
+  const numComponents = (hex.length - 1) / 2;
+
+  for (let i = 0; i < numComponents; ++i) {
+    const index = 1 + i * 2;
+    result[i] = parseInt(hex.substring(index, index + 2), 16);
+  }
+}
+
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? '0' + hex : hex;
+}
+
+function rgbaToHex(rgba) {
+  return '#' + componentToHex(rgba[0]) + componentToHex(rgba[1]) + componentToHex(rgba[2]) + componentToHex(rgba[3]);
+}
+
+function colorAnimation(start, end) {
+  const rgba0 = [0, 0, 0, 255];
+  setRGBA(rgba0, start);
+
+  const rgba1 = [0, 0, 0, 255];
+  setRGBA(rgba1, end);
+
+  if (!start || start === 'transparent') {
+    rgba0[0] = rgba1[0];
+    rgba0[1] = rgba1[1];
+    rgba0[2] = rgba1[2];
+  }
+  if (!end || end === 'transparent') {
+    rgba1[0] = rgba0[0];
+    rgba1[1] = rgba0[1];
+    rgba1[2] = rgba0[2];
+  }
+
+  const rgba = [0, 0, 0, 0];
+
+  return (t) => {
+    rgba[0] = Math.floor(EaseCurves.linear(rgba0[0], rgba1[0], t));
+    rgba[1] = Math.floor(EaseCurves.linear(rgba0[1], rgba1[1], t));
+    rgba[2] = Math.floor(EaseCurves.linear(rgba0[2], rgba1[2], t));
+    rgba[3] = Math.floor(EaseCurves.linear(rgba0[3], rgba1[3], t));
+
+    return rgbaToHex(rgba);
+  };
+}