1 files changed, 42 insertions, 45 deletions
diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index a5e21259a..e1ad1e6e5 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 type Props = {
     setFunc: (newPoints: { p1: number[]; p2: number[] }) => void;
     currPoints: { p1: number[]; p2: number[] };
-    easeFunc: string;
 };
 
 const ANIMATION_DURATION = 750;
@@ -20,52 +19,50 @@ export const TIMING_DEFAULT_MAPPINGS = {
     'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1.0)',
 };
 
+export function EaseFuncToPoints(func: string) {
+    let strPoints = func || 'ease';
+    if (!strPoints.startsWith('cubic')) {
+        switch (func) {
+            case 'linear':
+                strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
+                break;
+            case 'ease':
+                strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
+                break;
+            case 'ease-in':
+                strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
+                break;
+            case 'ease-out':
+                strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
+                break;
+            case 'ease-in-out':
+                strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
+                break;
+            default:
+                strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
+        }
+    }
+    const components = strPoints
+        .split('(')[1]
+        .split(')')[0]
+        .split(',')
+        .map(elem => parseFloat(elem));
+    return {
+        p1: [components[0], components[1]],
+        p2: [components[2], components[3]],
+    };
+}
+
 /**
  * Visual editor for a bezier curve with draggable control points.
  * */
 
-const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
+function CubicBezierEditor({ setFunc, currPoints }: Props) {
     const [animating, setAnimating] = useState(false);
     const [c1Down, setC1Down] = useState(false);
     const [c2Down, setC2Down] = useState(false);
 
-    const roundToHundredth = (num: number) => {
-        return Math.round(num * 100) / 100;
-    };
-
-    const convertToPoints = (func: string) => {
-        let strPoints = func ? func : 'ease';
-        if (!strPoints.startsWith('cubic')) {
-            switch (func) {
-                case 'linear':
-                    strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
-                    break;
-                case 'ease':
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-                    break;
-                case 'ease-in':
-                    strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
-                    break;
-                case 'ease-out':
-                    strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
-                    break;
-                case 'ease-in-out':
-                    strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
-                    break;
-                default:
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-            }
-        }
-        const components = strPoints
-            .split('(')[1]
-            .split(')')[0]
-            .split(',')
-            .map(elem => parseFloat(elem));
-        return {
-            p1: [components[0], components[1]],
-            p2: [components[2], components[3]],
-        };
-    };
+    const roundToHundredth = (num: number) => Math.round(num * 100) / 100;
 
     useEffect(() => {
         if (animating) {
@@ -76,7 +73,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
     }, [animating]);
 
     useEffect(() => {
-        if (!c1Down) return;
+        if (!c1Down) return undefined;
         window.addEventListener('pointerup', () => {
             setC1Down(false);
         });
@@ -99,7 +96,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
 
     // Sets up pointer events for moving the control points
     useEffect(() => {
-        if (!c2Down) return;
+        if (!c2Down) return undefined;
         window.addEventListener('pointerup', () => {
             setC2Down(false);
         });
@@ -163,7 +160,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC1Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC1Down(false);
                     }}
                 />
@@ -173,7 +170,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC2Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC2Down(false);
                     }}
                     x1={`${EDITOR_WIDTH + OFFSET}`}
@@ -193,13 +190,13 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC2Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC2Down(false);
                     }}
                 />
             </svg>
         </div>
     );
-};
+}
 
 export default CubicBezierEditor;