diff options
author | bobzel <zzzman@gmail.com> | 2024-05-15 15:24:31 -0400 |
---|---|---|
committer | bobzel <zzzman@gmail.com> | 2024-05-15 15:24:31 -0400 |
commit | 78fa489cd6e93ba5952c509deabafa4a69b74fd6 (patch) | |
tree | 2a7bbfd962637d2203ec317b7fa4b73e3cdb6e3b /src/client/views/nodes/trails/CubicBezierEditor.tsx | |
parent | b9a10c183a384f1ef52a999e12cb28a7c4fbbf55 (diff) |
lint cleanup
Diffstat (limited to 'src/client/views/nodes/trails/CubicBezierEditor.tsx')
-rw-r--r-- | src/client/views/nodes/trails/CubicBezierEditor.tsx | 87 |
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; |