From 93d1e3383ce47e45157d70f9ba6251239dae6bc2 Mon Sep 17 00:00:00 2001 From: Maze <167211895+mazeincoding@users.noreply.github.com> Date: Mon, 23 Feb 2026 03:24:02 +0100 Subject: feat: major editor overhaul (assets, properties, timeline, fonts) (#709) * feat: major editor overhaul (assets, properties, timeline, fonts) Refactor editor core systems to standardize UI architecture and improve performance. Assets & Properties: - Replace monolithic property items with composable `Section` architecture. - Add specialized sections for Transform, Blending, and Text. - Implement `NumberField` with scrubbing and math evaluation. - Add new ColorPicker with EyeDropper and multiple format support. - Standardize asset panels using new `PanelView` layout. Fonts & Stickers: - Implement custom font atlas/sprite system for high-performance previews. - Add virtualized FontPicker with search and favorites. - Refactor stickers to use a provider-based architecture (icons, emoji, flags, shapes). - Standardize sticker IDs to `provider:value` format. Timeline & Interaction: - Convert bookmarks to rich objects with notes, colors, and duration. - Refactor drag-and-drop to use Command pattern (enabling proper undo/redo). - Add Shift modifier to disable snapping during moves/resizes. - Add new overlays for layout guides and text editing. Renderer: - Add support for multi-line text, custom line-height, and letter-spacing. - Implement global composite operation (blend modes). - Update sticker node to resolve dynamic provider IDs. Infrastructure: - Add storage migrations (v3->v6) for text weights, sticker IDs, and bookmarks. - Update global styles and core UI components (Button, Input, Popover). * add ts-nocheck directive to settings-legacy.tsx to suppress TypeScript errors * fix: correct global composite operation assignment in TextNode to ensure proper blend mode handling * deleted shadcn components with errors * formatting * fix linter issues * migrate from next middleware to proxy * add missing component back * add breadcrumb back * chore: add @radix-ui/react-primitive deps * chore: more deps * chore: add missing env vars to bun-ci * next env --- .../web/src/lib/commands/timeline/clipboard/paste.ts | 4 +++- .../commands/timeline/element/duplicate-elements.ts | 8 ++++++-- .../lib/commands/timeline/element/insert-element.ts | 4 ++-- .../lib/commands/timeline/element/split-elements.ts | 8 ++++++-- apps/web/src/lib/commands/timeline/index.ts | 2 ++ .../web/src/lib/commands/timeline/tracks-snapshot.ts | 20 ++++++++++++++++++++ 6 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 apps/web/src/lib/commands/timeline/tracks-snapshot.ts (limited to 'apps/web/src/lib/commands/timeline') diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts index 39feb8ce..49554e0e 100644 --- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts +++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts @@ -130,7 +130,9 @@ export class PasteCommand extends Command { if (this.savedState) { const editor = EditorCore.getInstance(); editor.timeline.updateTracks(this.savedState); - editor.selection.setSelectedElements({ elements: this.previousSelection }); + editor.selection.setSelectedElements({ + elements: this.previousSelection, + }); } } diff --git a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts index 4bec6444..cf1bd94c 100644 --- a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts +++ b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts @@ -84,7 +84,9 @@ export class DuplicateElementsCommand extends Command { editor.timeline.updateTracks(updatedTracks); if (this.duplicatedElements.length > 0) { - editor.selection.setSelectedElements({ elements: this.duplicatedElements }); + editor.selection.setSelectedElements({ + elements: this.duplicatedElements, + }); } } @@ -92,7 +94,9 @@ export class DuplicateElementsCommand extends Command { if (this.savedState) { const editor = EditorCore.getInstance(); editor.timeline.updateTracks(this.savedState); - editor.selection.setSelectedElements({ elements: this.previousSelection }); + editor.selection.setSelectedElements({ + elements: this.previousSelection, + }); } } diff --git a/apps/web/src/lib/commands/timeline/element/insert-element.ts b/apps/web/src/lib/commands/timeline/element/insert-element.ts index 6067d72b..e1551471 100644 --- a/apps/web/src/lib/commands/timeline/element/insert-element.ts +++ b/apps/web/src/lib/commands/timeline/element/insert-element.ts @@ -163,8 +163,8 @@ export class InsertElementCommand extends Command { return false; } - if (element.type === "sticker" && !element.iconName) { - console.error("Sticker element must have iconName"); + if (element.type === "sticker" && !element.stickerId) { + console.error("Sticker element must have stickerId"); return false; } diff --git a/apps/web/src/lib/commands/timeline/element/split-elements.ts b/apps/web/src/lib/commands/timeline/element/split-elements.ts index 13d4d730..abe133c9 100644 --- a/apps/web/src/lib/commands/timeline/element/split-elements.ts +++ b/apps/web/src/lib/commands/timeline/element/split-elements.ts @@ -119,7 +119,9 @@ export class SplitElementsCommand extends Command { editor.timeline.updateTracks(updatedTracks); if (this.rightSideElements.length > 0) { - editor.selection.setSelectedElements({ elements: this.rightSideElements }); + editor.selection.setSelectedElements({ + elements: this.rightSideElements, + }); } } @@ -127,7 +129,9 @@ export class SplitElementsCommand extends Command { if (this.savedState) { const editor = EditorCore.getInstance(); editor.timeline.updateTracks(this.savedState); - editor.selection.setSelectedElements({ elements: this.previousSelection }); + editor.selection.setSelectedElements({ + elements: this.previousSelection, + }); } } } diff --git a/apps/web/src/lib/commands/timeline/index.ts b/apps/web/src/lib/commands/timeline/index.ts index 30bc81ef..cb285d94 100644 --- a/apps/web/src/lib/commands/timeline/index.ts +++ b/apps/web/src/lib/commands/timeline/index.ts @@ -1,3 +1,5 @@ export * from "./track"; export * from "./element"; export * from "./clipboard"; + +export { TracksSnapshotCommand } from "./tracks-snapshot"; diff --git a/apps/web/src/lib/commands/timeline/tracks-snapshot.ts b/apps/web/src/lib/commands/timeline/tracks-snapshot.ts new file mode 100644 index 00000000..2ba059c7 --- /dev/null +++ b/apps/web/src/lib/commands/timeline/tracks-snapshot.ts @@ -0,0 +1,20 @@ +import { Command } from "@/lib/commands/base-command"; +import type { TimelineTrack } from "@/types/timeline"; +import { EditorCore } from "@/core"; + +export class TracksSnapshotCommand extends Command { + constructor( + private before: TimelineTrack[], + private after: TimelineTrack[], + ) { + super(); + } + + execute(): void { + EditorCore.getInstance().timeline.updateTracks(this.after); + } + + undo(): void { + EditorCore.getInstance().timeline.updateTracks(this.before); + } +} -- cgit v1.3.1