@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/runtime/state/persistence.ts

@@ -2,10 +2,12 @@ import type {
   ToolcraftLocalStoragePersistenceSchema,
   ResolvedToolcraftAppSchema,
 } from "../schema/types";
+import { isToolcraftTimelinePanelRuntimeTarget } from "../schema/runtime-targets";
 import type {
   ToolcraftCanvasState,
   ToolcraftInitialState,
   ToolcraftLayer,
+  ToolcraftMediaAsset,
   ToolcraftPanelId,
   ToolcraftPanelState,
   ToolcraftState,
@@ -92,6 +94,14 @@ function readPanel(value: unknown): Partial<ToolcraftPanelState> | undefined {
     panel.collapsed = value.collapsed;
   }
 
+  if (typeof value.extended === "boolean") {
+    panel.extended = value.extended;
+  }
+
+  if (typeof value.hidden === "boolean") {
+    panel.hidden = value.hidden;
+  }
+
   return Object.keys(panel).length > 0 ? panel : undefined;
 }
 
@@ -161,6 +171,85 @@ function readLayers(value: unknown): ToolcraftLayer[] | undefined {
   });
 }
 
+function readMediaAsset(value: unknown): ToolcraftMediaAsset | undefined {
+  if (
+    !isRecord(value) ||
+    typeof value.id !== "string" ||
+    typeof value.layerId !== "string" ||
+    typeof value.dataUrl !== "string" ||
+    typeof value.fileName !== "string" ||
+    typeof value.mimeType !== "string"
+  ) {
+    return undefined;
+  }
+
+  const position = readPoint(value.position);
+
+  if (!position) {
+    return undefined;
+  }
+
+  const mediaAsset: ToolcraftMediaAsset = {
+    dataUrl: value.dataUrl,
+    fileName: value.fileName,
+    id: value.id,
+    layerId: value.layerId,
+    mimeType: value.mimeType,
+    position,
+  };
+  const size = readCanvasSize(value.size);
+
+  if (value.assetKind === "file" || value.assetKind === "image") {
+    mediaAsset.assetKind = value.assetKind;
+  }
+
+  if (size) {
+    mediaAsset.size = size;
+  }
+
+  if (typeof value.sourceTarget === "string") {
+    mediaAsset.sourceTarget = value.sourceTarget;
+  }
+
+  if (isRecord(value.transform)) {
+    mediaAsset.transform = {};
+
+    if (typeof value.transform.flipHorizontal === "boolean") {
+      mediaAsset.transform.flipHorizontal = value.transform.flipHorizontal;
+    }
+
+    if (typeof value.transform.flipVertical === "boolean") {
+      mediaAsset.transform.flipVertical = value.transform.flipVertical;
+    }
+
+    if (
+      value.transform.rotationDeg === 0 ||
+      value.transform.rotationDeg === 90 ||
+      value.transform.rotationDeg === 180 ||
+      value.transform.rotationDeg === 270
+    ) {
+      mediaAsset.transform.rotationDeg = value.transform.rotationDeg;
+    }
+
+    if (Object.keys(mediaAsset.transform).length === 0) {
+      delete mediaAsset.transform;
+    }
+  }
+
+  return mediaAsset;
+}
+
+function readMediaAssets(value: unknown): ToolcraftMediaAsset[] | undefined {
+  if (!Array.isArray(value)) {
+    return undefined;
+  }
+
+  return value.flatMap((item) => {
+    const mediaAsset = readMediaAsset(item);
+    return mediaAsset ? [mediaAsset] : [];
+  });
+}
+
 function readBezierControlPoints(
   value: unknown,
 ): ToolcraftTimelineBezierControlPoints | undefined {
@@ -296,7 +385,10 @@ function getKnownValueTargets(schema: ResolvedToolcraftAppSchema): Set<string> {
 
   for (const section of schema.panels.controls?.sections ?? []) {
     for (const control of Object.values(section.controls)) {
-      if (control.type !== "panelActions") {
+      if (
+        control.type !== "panelActions" &&
+        !isToolcraftTimelinePanelRuntimeTarget(control.target)
+      ) {
         targets.add(control.target);
       }
     }
@@ -369,6 +461,10 @@ export function createToolcraftPersistenceSnapshot(
     initialState.selectedLayerId = state.selectedLayerId;
   }
 
+  if (included.has("media")) {
+    initialState.mediaAssets = state.mediaAssets;
+  }
+
   return {
     state: initialState,
     version: persistence.version,
@@ -450,6 +546,14 @@ export function parseToolcraftPersistenceSnapshot(
     }
   }
 
+  if (included.has("media")) {
+    const mediaAssets = readMediaAssets(persistedState.mediaAssets);
+
+    if (mediaAssets) {
+      initialState.mediaAssets = mediaAssets;
+    }
+  }
+
   return Object.keys(initialState).length > 0 ? initialState : undefined;
 }
 

package/templates/runtime/state/reducer.test.ts

@@ -1,10 +1,11 @@
 import { describe, expect, it } from "vitest";
 
 import { defineToolcraft } from "../schema/define-toolcraft";
+import type { ToolcraftInitialState } from "./types";
 import { createToolcraftState } from "./create-template-state";
 import { toolcraftReducer } from "./reducer";
 
-function createState() {
+function createState(initialState?: ToolcraftInitialState) {
   const app = defineToolcraft({
     canvas: {
       enabled: true,
@@ -28,7 +29,7 @@ function createState() {
     },
   });
 
-  return createToolcraftState(app);
+  return createToolcraftState(app, initialState);
 }
 
 describe("toolcraftReducer", () => {
@@ -147,6 +148,70 @@ describe("toolcraftReducer", () => {
     });
   });
 
+  it("restores predefined fileDrop media on global and section reset", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "default-background.png",
+            id: "default-background",
+            layerId: "default-background-layer",
+            mimeType: "image/png",
+            size: { height: 1080, unit: "px", width: 1920 },
+            sourceTarget: "media.background",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                background: {
+                  defaultValue: null,
+                  target: "media.background",
+                  type: "fileDrop",
+                },
+              },
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const initial = createToolcraftState(app);
+    const deleted = toolcraftReducer(initial, {
+      mediaId: "default-background",
+      type: "media.delete",
+    });
+    const sectionReset = toolcraftReducer(deleted, {
+      label: "Reset Background section",
+      targets: ["media.background"],
+      type: "controls.resetTargets",
+    });
+    const deletedAgain = toolcraftReducer(sectionReset, {
+      mediaId: "default-background",
+      type: "media.delete",
+    });
+    const globalReset = toolcraftReducer(deletedAgain, { type: "controls.reset" });
+
+    expect(initial.mediaAssets.map((asset) => asset.id)).toEqual(["default-background"]);
+    expect(deleted.mediaAssets).toEqual([]);
+    expect(sectionReset.mediaAssets.map((asset) => asset.id)).toEqual([
+      "default-background",
+    ]);
+    expect(sectionReset.layers.map((layer) => layer.id)).toEqual([
+      "default-background-layer",
+    ]);
+    expect(sectionReset.selectedLayerId).toBe("default-background-layer");
+    expect(globalReset.mediaAssets.map((asset) => asset.id)).toEqual([
+      "default-background",
+    ]);
+  });
+
   it("stores arbitrary fileDrop media without image dimensions and clears it on reset", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -194,6 +259,64 @@ describe("toolcraftReducer", () => {
     expect(state.mediaAssets).toEqual([]);
   });
 
+  it("records image media rotate and flip transforms in runtime history", () => {
+    const imported = toolcraftReducer(createState(), {
+      asset: {
+        assetKind: "image",
+        dataUrl: "data:image/png;base64,test",
+        fileName: "source.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 768, unit: "px", width: 1024 },
+      },
+      type: "media.import",
+    });
+
+    const rotated = toolcraftReducer(imported, {
+      mediaId: imported.mediaAssets[0]?.id ?? "",
+      operation: "rotate-right",
+      type: "media.transform",
+    });
+    const flipped = toolcraftReducer(rotated, {
+      mediaId: imported.mediaAssets[0]?.id ?? "",
+      operation: "flip-horizontal",
+      type: "media.transform",
+    });
+    const undone = toolcraftReducer(flipped, { type: "history.undo" });
+
+    expect(rotated.mediaAssets[0]?.transform).toEqual({ rotationDeg: 90 });
+    expect(flipped.mediaAssets[0]?.transform).toEqual({
+      flipHorizontal: true,
+      rotationDeg: 90,
+    });
+    expect(flipped.history.undo.at(-1)).toMatchObject({
+      before: { mediaAssets: rotated.mediaAssets },
+      label: "Transform media",
+    });
+    expect(undone.mediaAssets[0]?.transform).toEqual({ rotationDeg: 90 });
+  });
+
+  it("ignores image transforms for arbitrary file media", () => {
+    const imported = toolcraftReducer(createState(), {
+      asset: {
+        assetKind: "file",
+        dataUrl: "data:text/plain;base64,aGVsbG8=",
+        fileName: "notes.txt",
+        mimeType: "text/plain",
+        position: { x: 0, y: 0 },
+      },
+      type: "media.import",
+    });
+
+    const transformed = toolcraftReducer(imported, {
+      mediaId: imported.mediaAssets[0]?.id ?? "",
+      operation: "rotate-right",
+      type: "media.transform",
+    });
+
+    expect(transformed).toBe(imported);
+  });
+
   it("clears only selected fileDrop media on section reset", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -554,6 +677,52 @@ describe("toolcraftReducer", () => {
     expect(next.values).toBe(state.values);
   });
 
+  it("stores timeline extended presentation outside control values", () => {
+    const state = createState();
+
+    const extended = toolcraftReducer(state, {
+      target: "panels.timeline.extended",
+      type: "controls.setValue",
+      value: true,
+    });
+
+    expect(extended.panels.timeline.extended).toBe(true);
+    expect(extended.values).toBe(state.values);
+    expect(extended.history).toBe(state.history);
+
+    const compact = toolcraftReducer(extended, {
+      target: "panels.timeline.extended",
+      type: "controls.setValue",
+      value: false,
+    });
+
+    expect(compact.panels.timeline.extended).toBe(false);
+    expect(compact.values).toBe(state.values);
+  });
+
+  it("keeps legacy timeline panel visibility outside control values", () => {
+    const state = createState();
+
+    const hidden = toolcraftReducer(state, {
+      target: "panels.timeline.visible",
+      type: "controls.setValue",
+      value: false,
+    });
+
+    expect(hidden.panels.timeline.hidden).toBe(true);
+    expect(hidden.values).toBe(state.values);
+    expect(hidden.history).toBe(state.history);
+
+    const shown = toolcraftReducer(hidden, {
+      hidden: false,
+      panelId: "timeline",
+      type: "panels.setHidden",
+    });
+
+    expect(shown.panels.timeline.hidden).toBe(false);
+    expect(shown.values).toBe(state.values);
+  });
+
   it("resets a panel offset to its default position", () => {
     const moved = toolcraftReducer(createState(), {
       offset: { x: 40, y: 80 },
@@ -630,9 +799,85 @@ describe("toolcraftReducer", () => {
     expect(next.history.undo.at(-1)?.label).toBe("Delete media");
   });
 
-  it("sizes intrinsic media apps from the imported image and replaces single-layer media", () => {
+  it("keeps the current editable-output canvas size when importing background/source images", () => {
     const app = defineToolcraft({
-      canvas: { enabled: true, upload: true },
+      canvas: {
+        enabled: true,
+        size: { height: 720, unit: "px", width: 1280 },
+        upload: true,
+      },
+      panels: {},
+    });
+    const state = createToolcraftState(app);
+    const imported = toolcraftReducer(state, {
+      asset: {
+        dataUrl: "data:image/png;base64,wide",
+        fileName: "wide-source.png",
+        mimeType: "image/png",
+        position: { x: 42, y: 24 },
+        size: { height: 1000, unit: "px", width: 4000 },
+      },
+      type: "media.import",
+    });
+
+    expect(imported.schema.canvas.sizing).toEqual({ mode: "editable-output" });
+    expect(imported.canvas.size).toEqual({ height: 720, unit: "px", width: 1280 });
+    expect(imported.mediaAssets[0]).toMatchObject({
+      fileName: "wide-source.png",
+      position: { x: 42, y: 24 },
+      size: { height: 1000, unit: "px", width: 4000 },
+    });
+    expect(imported.history.undo.at(-1)?.after).not.toHaveProperty("canvas.size");
+  });
+
+  it("keeps manually edited editable-output canvas size when importing source images", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+    const widthChanged = toolcraftReducer(createToolcraftState(app), {
+      target: "canvas.size.width",
+      type: "controls.setValue",
+      value: "1440",
+    });
+    const heightChanged = toolcraftReducer(widthChanged, {
+      target: "canvas.size.height",
+      type: "controls.setValue",
+      value: "900",
+    });
+    const imported = toolcraftReducer(heightChanged, {
+      asset: {
+        dataUrl: "data:image/png;base64,tall",
+        fileName: "tall-source.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 4000, unit: "px", width: 1000 },
+      },
+      type: "media.import",
+    });
+
+    expect(imported.schema.canvas.sizing).toEqual({ mode: "editable-output" });
+    expect(imported.canvas.size).toEqual({ height: 900, unit: "px", width: 1440 });
+    expect(imported.values["canvas.size.width"]).toBe(1440);
+    expect(imported.values["canvas.size.height"]).toBe(900);
+    expect(imported.mediaAssets[0]).toMatchObject({
+      fileName: "tall-source.png",
+      size: { height: 4000, unit: "px", width: 1000 },
+    });
+    expect(imported.history.undo.at(-1)?.after).not.toHaveProperty("canvas.size");
+  });
+
+  it("sizes explicit intrinsic media apps from the imported image and replaces single-layer media", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, sizing: { mode: "intrinsic-media" }, upload: true },
       panels: {},
     });
     const state = createToolcraftState(app);
@@ -1236,6 +1481,37 @@ describe("toolcraftReducer", () => {
     expect(scrubbed.history.undo).toHaveLength(0);
   });
 
+  it("keeps loop state when timeline duration changes", () => {
+    const state = toolcraftReducer(
+      createState({
+        timeline: {
+          currentTimeSeconds: 9,
+          durationSeconds: 10,
+          isLooping: true,
+          isPlaying: true,
+        },
+      }),
+      {
+        target: "selectedLayer.opacity",
+        type: "controls.setValue",
+        value: 42,
+      },
+    );
+
+    const resized = toolcraftReducer(state, {
+      durationSeconds: 6,
+      type: "timeline.setDuration",
+    });
+
+    expect(resized.timeline.durationSeconds).toBe(6);
+    expect(resized.timeline.currentTimeSeconds).toBe(6);
+    expect(resized.timeline.isPlaying).toBe(true);
+    expect(resized.timeline.isLooping).toBe(true);
+    expect(resized.values).toEqual(state.values);
+    expect(resized.values["selectedLayer.opacity"]).toBe(42);
+    expect(resized.defaults).toEqual(state.defaults);
+  });
+
   it("restarts playback from the beginning when play is pressed at the non-looping end", () => {
     const paused = toolcraftReducer(createState(), { type: "timeline.togglePlayback" });
     const loopDisabled = toolcraftReducer(paused, { type: "timeline.toggleLoop" });