1 files changed, 31 insertions, 4 deletions
diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index 0744709aa..06a246675 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 type Props = {
     setFunc: (newPoints: { p1: number[]; p2: number[] }) => void;
+    currPoints: { p1: number[]; p2: number[] };
 };
 
 const ANIMATION_DURATION = 750;
@@ -11,9 +12,25 @@ const CONTAINER_WIDTH = 200;
 const EDITOR_WIDTH = 100;
 const OFFSET = (CONTAINER_WIDTH - EDITOR_WIDTH) / 2;
 
-const CubicBezierEditor = ({ setFunc }: Props) => {
+export const TIMING_DEFAULT_MAPPINGS = {
+    ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
+    linear: 'cubic-bezier(0.0, 0.0, 1.0, 1.0)',
+    'ease-in': 'cubic-bezier(0.42, 0, 1.0, 1.0)',
+    'ease-out': 'cubic-bezier(0, 0, 0.58, 1.0)',
+    'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1.0)',
+};
+
+const CubicBezierEditor = ({ setFunc, currPoints }: Props) => {
     const [animating, setAnimating] = useState(false);
-    const [cPoints, setCPoints] = useState({ p1: [0.67, 0.2], p2: [0.37, 0.88] });
+    // Should let parent control state
+    const [cPoints, setCPoints] = useState(
+        currPoints
+            ? currPoints
+            : {
+                  p1: [0.25, 0.1],
+                  p2: [0.25, 1.0],
+              }
+    );
     const [c1Down, setC1Down] = useState(false);
     const [c2Down, setC2Down] = useState(false);
 
@@ -72,7 +89,7 @@ const CubicBezierEditor = ({ setFunc }: Props) => {
             }));
             setFunc({
                 ...cPoints,
-                p1: [roundToHundredth(cPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p2[1] - e.movementY / EDITOR_WIDTH)],
+                p2: [roundToHundredth(cPoints.p2[0] + e.movementX / EDITOR_WIDTH), roundToHundredth(cPoints.p2[1] - e.movementY / EDITOR_WIDTH)],
             });
         };
 
@@ -82,7 +99,17 @@ const CubicBezierEditor = ({ setFunc }: Props) => {
     }, [c2Down, cPoints]);
 
     return (
-        <div>
+        <div
+        // onPointerDown={e => {
+        //     e.stopPropagation;
+        // }}
+        // onPointerMove={e => {
+        //     e.stopPropagation;
+        // }}
+        // onPointerUp={e => {
+        //     e.stopPropagation;
+        // }}
+        >
             <svg className="presBox-bezier-editor" width={`${CONTAINER_WIDTH}`} height={`${CONTAINER_WIDTH}`} xmlns="http://www.w3.org/2000/svg">
                 {/* Outlines */}
                 <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${EDITOR_WIDTH + OFFSET}`} y2={`${0 + OFFSET}`} stroke="#c1c1c1" strokeWidth="1" />