summaryrefslogtreecommitdiff
path: root/apps/web/src/timeline/hooks/use-timeline-resize.ts
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/timeline/hooks/use-timeline-resize.ts')
-rw-r--r--apps/web/src/timeline/hooks/use-timeline-resize.ts19
1 files changed, 7 insertions, 12 deletions
diff --git a/apps/web/src/timeline/hooks/use-timeline-resize.ts b/apps/web/src/timeline/hooks/use-timeline-resize.ts
index 46363fb6..6bd0c606 100644
--- a/apps/web/src/timeline/hooks/use-timeline-resize.ts
+++ b/apps/web/src/timeline/hooks/use-timeline-resize.ts
@@ -1,5 +1,6 @@
-import { useEffect, useReducer, useRef } from "react";
+import { useEffect, useReducer, useState } from "react";
import { useEditor } from "@/editor/use-editor";
+import { useCommittedRef } from "@/hooks/use-committed-ref";
import { useShiftKey } from "@/hooks/use-shift-key";
import { useElementSelection } from "@/timeline/hooks/element/use-element-selection";
import { useTimelineStore } from "@/timeline/timeline-store";
@@ -10,6 +11,7 @@ import {
} from "@/timeline/controllers/resize-controller";
import type { ResizeSide } from "@/timeline/group-resize";
import type { SnapPoint } from "@/timeline/snapping";
+import type { TimelineElement } from "@/timeline";
export type { ResizeSide };
@@ -41,7 +43,7 @@ export function useTimelineResize({
updates: updates.map(({ trackId, elementId, patch }) => ({
trackId,
elementId,
- updates: patch,
+ updates: patch as Partial<TimelineElement>,
})),
}),
commitElements: (updates) =>
@@ -49,20 +51,13 @@ export function useTimelineResize({
updates: updates.map(({ trackId, elementId, patch }) => ({
trackId,
elementId,
- patch,
+ patch: patch as Partial<TimelineElement>,
})),
}),
onSnapPointChange,
};
-
- const configRef = useRef(config);
- configRef.current = config;
-
- const controllerRef = useRef<ResizeController | null>(null);
- if (!controllerRef.current) {
- controllerRef.current = new ResizeController({ configRef });
- }
- const controller = controllerRef.current;
+ const configRef = useCommittedRef(config);
+ const [controller] = useState(() => new ResizeController({ configRef }));
const [, rerender] = useReducer((n: number) => n + 1, 0);
useEffect(() => controller.subscribe(rerender), [controller]);