From 44d8c4c8764d49a8e8d0ae713432c07f07cb7597 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 6 Apr 2026 00:02:23 +0200 Subject: refactor: unify element updates into pipeline and centralize ripple --- .../panels/properties/hooks/use-keyframed-number-property.ts | 2 +- .../panels/properties/hooks/use-keyframed-vector-property.ts | 4 ++-- .../components/editor/panels/properties/tabs/blending-tab.tsx | 8 ++++---- .../components/editor/panels/properties/tabs/graphic-tab.tsx | 4 ++-- .../src/components/editor/panels/properties/tabs/masks-tab.tsx | 2 +- .../src/components/editor/panels/properties/tabs/text-tab.tsx | 10 +++++----- apps/web/src/components/providers/editor-provider.tsx | 8 ++++++++ 7 files changed, 23 insertions(+), 15 deletions(-) (limited to 'apps/web/src/components') diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts index ddd3d2e4..0c10d443 100644 --- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts +++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts @@ -144,7 +144,7 @@ export function useKeyframedNumberProperty({ { trackId, elementId, - updates: buildBaseUpdates({ value: nextValue }), + patch: buildBaseUpdates({ value: nextValue }), }, ], }); diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts index a342859c..7ee1f221 100644 --- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts +++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-vector-property.ts @@ -152,7 +152,7 @@ export function useKeyframedVectorProperty({ } editor.timeline.updateElements({ updates: [ - { trackId, elementId, updates: buildBaseUpdates({ value: vector }) }, + { trackId, elementId, patch: buildBaseUpdates({ value: vector }) }, ], }); }; @@ -172,7 +172,7 @@ export function useKeyframedVectorProperty({ } editor.timeline.updateElements({ updates: [ - { trackId, elementId, updates: buildBaseUpdates({ value: vector }) }, + { trackId, elementId, patch: buildBaseUpdates({ value: vector }) }, ], }); }; diff --git a/apps/web/src/components/editor/panels/properties/tabs/blending-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/blending-tab.tsx index a69acebf..f8e5397d 100644 --- a/apps/web/src/components/editor/panels/properties/tabs/blending-tab.tsx +++ b/apps/web/src/components/editor/panels/properties/tabs/blending-tab.tsx @@ -41,7 +41,7 @@ type BlendingElement = { animations?: ElementAnimations; }; -const BLEND_MODE_GROUPS = [ +const BLEND_MODE_GROUPS: { value: BlendMode; label: string }[][] = [ [{ value: "normal", label: "Normal" }], [ { value: "darken", label: "Darken" }, @@ -99,7 +99,7 @@ export function BlendingTab({ ], }); - const commitBlendMode = (value: string) => { + const commitBlendMode = (value: BlendMode) => { if (editor.timeline.isPreviewActive()) { editor.timeline.commitPreview(); } else { @@ -108,7 +108,7 @@ export function BlendingTab({ { trackId, elementId: element.id, - updates: { blendMode: value as BlendMode }, + patch: { blendMode: value }, }, ], }); @@ -209,7 +209,7 @@ export function BlendingTab({ key={option.value} value={option.value} onPointerEnter={() => - previewBlendMode({ value: option.value as BlendMode }) + previewBlendMode({ value: option.value }) } > {option.label} diff --git a/apps/web/src/components/editor/panels/properties/tabs/graphic-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/graphic-tab.tsx index 4593050e..c61c9cd7 100644 --- a/apps/web/src/components/editor/panels/properties/tabs/graphic-tab.tsx +++ b/apps/web/src/components/editor/panels/properties/tabs/graphic-tab.tsx @@ -123,7 +123,7 @@ function StrokeSection({ { trackId, elementId: element.id, - updates: { params: { ...element.params, strokeWidth: 0 } }, + patch: { params: { ...element.params, strokeWidth: 0 } }, }, ], }); @@ -133,7 +133,7 @@ function StrokeSection({ { trackId, elementId: element.id, - updates: { + patch: { params: { ...element.params, strokeWidth: lastStrokeWidth.current, diff --git a/apps/web/src/components/editor/panels/properties/tabs/masks-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/masks-tab.tsx index d416dc28..f48a50cb 100644 --- a/apps/web/src/components/editor/panels/properties/tabs/masks-tab.tsx +++ b/apps/web/src/components/editor/panels/properties/tabs/masks-tab.tsx @@ -165,7 +165,7 @@ export function MasksTab({ element, trackId }: MasksTabProps) { { trackId, elementId: element.id, - updates: { + patch: { masks: [ buildDefaultMaskInstance({ maskType, diff --git a/apps/web/src/components/editor/panels/properties/tabs/text-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/text-tab.tsx index 11412c04..5fffbcec 100644 --- a/apps/web/src/components/editor/panels/properties/tabs/text-tab.tsx +++ b/apps/web/src/components/editor/panels/properties/tabs/text-tab.tsx @@ -165,7 +165,7 @@ function TypographySection({ { trackId, elementId: element.id, - updates: { fontFamily: value }, + patch: { fontFamily: value }, }, ], }) @@ -188,7 +188,7 @@ function TypographySection({ { trackId, elementId: element.id, - updates: { + patch: { fontSize: DEFAULTS.text.element.fontSize, }, }, @@ -291,7 +291,7 @@ function SpacingSection({ { trackId, elementId: element.id, - updates: { letterSpacing: DEFAULTS.text.letterSpacing }, + patch: { letterSpacing: DEFAULTS.text.letterSpacing }, }, ], }) @@ -317,7 +317,7 @@ function SpacingSection({ { trackId, elementId: element.id, - updates: { lineHeight: DEFAULTS.text.lineHeight }, + patch: { lineHeight: DEFAULTS.text.lineHeight }, }, ], }) @@ -512,7 +512,7 @@ function BackgroundSection({ { trackId, elementId: element.id, - updates: { + patch: { background: { ...element.background, enabled, diff --git a/apps/web/src/components/providers/editor-provider.tsx b/apps/web/src/components/providers/editor-provider.tsx index 20476a13..12b64853 100644 --- a/apps/web/src/components/providers/editor-provider.tsx +++ b/apps/web/src/components/providers/editor-provider.tsx @@ -7,6 +7,7 @@ import { EditorCore } from "@/core"; import { useEditor } from "@/hooks/use-editor"; import { useKeybindingsListener } from "@/hooks/use-keybindings"; import { useKeybindingsStore } from "@/stores/keybindings-store"; +import { useTimelineStore } from "@/stores/timeline-store"; import { useEditorActions } from "@/hooks/actions/use-editor-actions"; import { loadFontAtlas } from "@/lib/fonts/google-fonts"; import { initializeGpuRenderer } from "@/services/renderer/gpu-renderer"; @@ -117,6 +118,13 @@ export function EditorProvider({ projectId, children }: EditorProviderProps) { function EditorRuntimeBindings() { const editor = useEditor(); + const rippleEditingEnabled = useTimelineStore( + (state) => state.rippleEditingEnabled, + ); + + useEffect(() => { + editor.command.isRippleEnabled = rippleEditingEnabled; + }, [editor, rippleEditingEnabled]); useEffect(() => { const handleBeforeUnload = (event: BeforeUnloadEvent) => { -- cgit v1.3.1