External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: clean up graph editor

Browse Source
This commit is contained in:
Maze Winther
2026-04-06 13:15:50 +02:00
parent c411edb7c1
commit 79df736431
3 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/panels/timeline/graph-editor/bezier-graph.tsx
+3 -3
View File
@@ -62,9 +62,9 @@ function curvePath({ curve }: { curve: NormalizedCubicBezier }) {
const points: string[] = []; const points: string[] = [];
for (let i = 0; i <= CURVE_SEGMENTS; i++) { for (let i = 0; i <= CURVE_SEGMENTS; i++) {
const progress = i / CURVE_SEGMENTS; const progress = i / CURVE_SEGMENTS;
points.push( const x = toSvgX({ value: getBezierPoint({ progress, p0: 0, p1: curve[0], p2: curve[2], p3: 1 }) });
`${toSvgX({ value: getBezierPoint({ progress, p0: 0, p1: curve[0], p2: curve[2], p3: 1 }) })},${toSvgY({ value: getBezierPoint({ progress, p0: 0, p1: curve[1], p2: curve[3], p3: 1 }) })}`, const y = toSvgY({ value: getBezierPoint({ progress, p0: 0, p1: curve[1], p2: curve[3], p3: 1 }) });
); points.push(`${x},${y}`);
} }
return `M${points.join("L")}`; return `M${points.join("L")}`;
} }
apps/web/src/components/editor/panels/timeline/graph-editor/popover.tsx
+11 -3
View File
@@ -299,13 +299,21 @@ function PresetItem({
); );
} }
function toThumbX({ value }: { value: number }) {
return THUMB_PADDING_X + value * (THUMB_WIDTH - THUMB_PADDING_X * 2);
}
function toThumbY({ value }: { value: number }) {
return THUMB_PADDING_Y + (1 - value) * (THUMB_HEIGHT - THUMB_PADDING_Y * 2);
}
function CurveThumb({ value }: { value: NormalizedCubicBezier }) { function CurveThumb({ value }: { value: NormalizedCubicBezier }) {
const points: string[] = []; const points: string[] = [];
for (let i = 0; i <= THUMB_SEGMENTS; i++) { for (let i = 0; i <= THUMB_SEGMENTS; i++) {
const progress = i / THUMB_SEGMENTS; const progress = i / THUMB_SEGMENTS;
points.push( const x = toThumbX({ value: getBezierPoint({ progress, p0: 0, p1: value[0], p2: value[2], p3: 1 }) });
`${THUMB_PADDING_X + getBezierPoint({ progress, p0: 0, p1: value[0], p2: value[2], p3: 1 }) * (THUMB_WIDTH - THUMB_PADDING_X * 2)},${THUMB_PADDING_Y + (1 - getBezierPoint({ progress, p0: 0, p1: value[1], p2: value[3], p3: 1 })) * (THUMB_HEIGHT - THUMB_PADDING_Y * 2)}`, const y = toThumbY({ value: getBezierPoint({ progress, p0: 0, p1: value[1], p2: value[3], p3: 1 }) });
); points.push(`${x},${y}`);
} }
return ( return (
<svg <svg
apps/web/src/components/editor/panels/timeline/graph-editor/use-controller.ts
+10 -4
View File
@@ -89,7 +89,8 @@ export function useGraphEditorController() {
[discardPreview], [discardPreview],
); );
function handlePreviewValue(nextValue: NormalizedCubicBezier) { const handlePreviewValue = useCallback(
(nextValue: NormalizedCubicBezier) => {
if (state.status !== "ready") { if (state.status !== "ready") {
return; return;
} }
@@ -111,9 +112,12 @@ export function useGraphEditorController() {
], ],
}); });
hasPreviewRef.current = true; hasPreviewRef.current = true;
} },
[editor, state],
);
function handleCommitValue(nextValue: NormalizedCubicBezier) { const handleCommitValue = useCallback(
(nextValue: NormalizedCubicBezier) => {
if (state.status !== "ready") { if (state.status !== "ready") {
return; return;
} }
@@ -137,7 +141,9 @@ export function useGraphEditorController() {
})), })),
}); });
hasPreviewRef.current = false; hasPreviewRef.current = false;
} },
[editor, state],
);
return { return {
open, open,