feat: complete TASK-WP4-01 editor shell and background

2026-08-03 03:47:16 +08:00
parent 433ccdcf86
commit 8d8fbeb816
8 changed files with 878 additions and 2 deletions
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  CanvasEditHistory,
+  createEditorCanvasState,
+  defaultBackgroundAdjustments,
+  deserializeFabricCanvas,
+  switchBackground,
+  updateBackgroundAdjustments,
+} from "../../apps/web/src/editor-canvas.js";
+
+const element = {
+  colors: ["#111111", "#222222", "#333333", "#444444", "#555555"],
+  created_at: "2026-08-02T18:00:00.000Z",
+  element_id: "00000000-0000-4000-8000-000000000001",
+  opacity: 1,
+  position: { x: 0.25, y: 0.35 },
+  resource_version: "palette-v1",
+  rotation: 14,
+  scale: { x: 1.2, y: 0.8 },
+  template_or_asset_id: "palette-fixture",
+  type: "color_card" as const,
+  z_index: 0,
+};
+
+describe("TDD-WP4-BG-001/002 canvas boundary", () => {
+  it("switches background without moving overlays, resets processing, and re-extracts palette", () => {
+    const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "3:4" });
+    const withOverlay = { ...initial, background: { ...initial.background, adjustments: { ...initial.background.adjustments, brightness: 42, filter: "mono" } }, elements: [element] };
+    const nextPalette = ["#abcdef", "#123456", "#fedcba", "#654321", "#a1b2c3"];
+    const switched = switchBackground(withOverlay, "00000000-0000-4000-8000-000000000011", nextPalette);
+    expect(switched.background).toEqual({ asset_id: "00000000-0000-4000-8000-000000000011", adjustments: defaultBackgroundAdjustments() });
+    expect(switched.elements[0]).toMatchObject({ position: element.position, scale: element.scale, rotation: element.rotation, colors: nextPalette });
+  });
+
+  it("keeps preview changes immutable and allows one committed history step", () => {
+    const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "1:1" });
+    const history = new CanvasEditHistory(initial);
+    const preview = updateBackgroundAdjustments(initial, { brightness: 25, contrast: -10, fit: "fit" });
+    expect(initial.background.adjustments).toEqual(defaultBackgroundAdjustments());
+    expect(preview.background.adjustments).toMatchObject({ brightness: 25, contrast: -10, fit: "fit" });
+    history.commit(preview);
+    expect(history.canUndo).toBe(true);
+    expect(history.undo()).toEqual(initial);
+    expect(history.canRedo).toBe(true);
+    expect(history.redo()).toEqual(preview);
+  });
+
+  it("strips Fabric-private fields at the persistence boundary", () => {
+    const state = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "9:16" });
+    const decoded = deserializeFabricCanvas({ ...state, _objects: [{ type: "fabric-private" }], viewportTransform: [1, 0, 0, 1, 0, 0] });
+    expect(decoded).toEqual(state);
+    expect(deserializeFabricCanvas({ ...state, elements: [{ ...element, _cacheCanvas: {} }] })).toBeUndefined();
+  });
+});