@pixel-point/toolcraft 0.0.9 → 0.0.11

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" });

package/templates/runtime/state/reducer.ts

@@ -1,6 +1,8 @@
 import {
   getToolcraftCanvasSizeTargetDimension,
   isToolcraftCanvasAspectRatioTarget,
+  isToolcraftTimelinePanelExtendedTarget,
+  isToolcraftTimelinePanelVisibleTarget,
 } from "../schema/runtime-targets";
 import { getToolcraftCanvasAspectRatioPreset } from "../schema/canvas-aspect-ratio-presets";
 import {
@@ -8,6 +10,11 @@ import {
   toolcraftCanvasZoomDefault,
   toolcraftCanvasZoomStep,
 } from "./canvas-zoom";
+import {
+  cloneToolcraftLayers,
+  cloneToolcraftMediaAssets,
+  createToolcraftDefaultMediaState,
+} from "./media-defaults";
 import { getMediaReadyTimelineState } from "./timeline-readiness";
 import type {
   ToolcraftCommand,
@@ -15,6 +22,8 @@ import type {
   ToolcraftHistoryMode,
   ToolcraftLayer,
   ToolcraftLayerDraft,
+  ToolcraftMediaAsset,
+  ToolcraftMediaTransform,
   ToolcraftState,
   ToolcraftTimelineKeyframe,
   ToolcraftTimelineKeyframeGroup,
@@ -235,7 +244,7 @@ function getResetMediaPatch(
   state: ToolcraftState,
   targets?: ReadonlySet<string>,
 ): Pick<ToolcraftHistoryPatch, "after" | "before"> | null {
-  if (state.schema.panels.layers || state.mediaAssets.length === 0) {
+  if (state.schema.panels.layers) {
     return null;
   }
 
@@ -245,15 +254,46 @@ function getResetMediaPatch(
     return null;
   }
 
-  const mediaAssets = state.mediaAssets.filter((asset) => {
-    if (asset.sourceTarget) {
-      return !fileDropTargets.has(asset.sourceTarget);
-    }
-
-    return false;
-  });
+  const defaultMediaState = createToolcraftDefaultMediaState(state.schema);
+  const defaultTargetMediaAssets = defaultMediaState.mediaAssets.filter((asset) =>
+    asset.sourceTarget ? fileDropTargets.has(asset.sourceTarget) : false,
+  );
+  const defaultTargetLayerIds = new Set(defaultTargetMediaAssets.map((asset) => asset.layerId));
+  const currentTargetLayerIds = new Set(
+    state.mediaAssets.flatMap((asset) =>
+      asset.sourceTarget && fileDropTargets.has(asset.sourceTarget) ? [asset.layerId] : [],
+    ),
+  );
+  const mediaAssets = [
+    ...state.mediaAssets.filter((asset) => {
+      if (asset.sourceTarget) {
+        return !fileDropTargets.has(asset.sourceTarget);
+      }
 
-  if (mediaAssets.length === state.mediaAssets.length) {
+      return false;
+    }),
+    ...cloneToolcraftMediaAssets(defaultTargetMediaAssets),
+  ];
+  const layers = [
+    ...state.layers.filter(
+      (layer) => !currentTargetLayerIds.has(layer.id) && !defaultTargetLayerIds.has(layer.id),
+    ),
+    ...cloneToolcraftLayers(
+      defaultMediaState.layers.filter((layer) => defaultTargetLayerIds.has(layer.id)),
+    ),
+  ];
+  const selectedLayerId =
+    state.selectedLayerId && layers.some((layer) => layer.id === state.selectedLayerId)
+      ? state.selectedLayerId
+      : (layers[0]?.id ?? null);
+
+  if (
+    mediaAssets.length === state.mediaAssets.length &&
+    mediaAssets.every((asset, index) => asset.id === state.mediaAssets[index]?.id) &&
+    layers.length === state.layers.length &&
+    layers.every((layer, index) => layer.id === state.layers[index]?.id) &&
+    selectedLayerId === state.selectedLayerId
+  ) {
     return null;
   }
 
@@ -262,11 +302,15 @@ function getResetMediaPatch(
 
   return {
     after: {
+      layers,
       mediaAssets,
+      selectedLayerId,
       ...(shouldCommitTimeline ? { timeline } : {}),
     },
     before: {
+      layers: state.layers,
       mediaAssets: state.mediaAssets,
+      selectedLayerId: state.selectedLayerId,
       ...(shouldCommitTimeline ? { timeline: state.timeline } : {}),
     },
   };
@@ -533,6 +577,74 @@ function getImportedLayerName(fileName: string): string {
   return name || "Material";
 }
 
+function normalizeMediaRotation(rotationDeg: number): 0 | 90 | 180 | 270 {
+  const normalized = ((Math.round(rotationDeg / 90) * 90) % 360 + 360) % 360;
+
+  return normalized === 90 || normalized === 180 || normalized === 270 ? normalized : 0;
+}
+
+function compactMediaTransform(
+  transform: ToolcraftMediaTransform,
+): ToolcraftMediaTransform | undefined {
+  const normalizedRotation = normalizeMediaRotation(transform.rotationDeg ?? 0);
+  const nextTransform: ToolcraftMediaTransform = {};
+
+  if (normalizedRotation !== 0) {
+    nextTransform.rotationDeg = normalizedRotation;
+  }
+
+  if (transform.flipHorizontal) {
+    nextTransform.flipHorizontal = true;
+  }
+
+  if (transform.flipVertical) {
+    nextTransform.flipVertical = true;
+  }
+
+  return Object.keys(nextTransform).length > 0 ? nextTransform : undefined;
+}
+
+function getTransformedMediaAsset(
+  mediaAsset: ToolcraftMediaAsset,
+  operation: Extract<ToolcraftCommand, { type: "media.transform" }>["operation"],
+): ToolcraftMediaAsset {
+  const currentTransform = mediaAsset.transform ?? {};
+  const rotationDeg = normalizeMediaRotation(currentTransform.rotationDeg ?? 0);
+  const transform: ToolcraftMediaTransform = {
+    flipHorizontal: currentTransform.flipHorizontal,
+    flipVertical: currentTransform.flipVertical,
+    rotationDeg,
+  };
+
+  switch (operation) {
+    case "flip-horizontal":
+      transform.flipHorizontal = !transform.flipHorizontal;
+      break;
+    case "flip-vertical":
+      transform.flipVertical = !transform.flipVertical;
+      break;
+    case "rotate-left":
+      transform.rotationDeg = normalizeMediaRotation(rotationDeg - 90);
+      break;
+    case "rotate-right":
+      transform.rotationDeg = normalizeMediaRotation(rotationDeg + 90);
+      break;
+  }
+
+  const compactTransform = compactMediaTransform(transform);
+
+  if (!compactTransform) {
+    const { transform: _transform, ...rest } = mediaAsset;
+
+    return rest;
+  }
+
+  return {
+    ...mediaAsset,
+    transform: compactTransform,
+  };
+}
+
 function getNextLayerName(
   layers: readonly ToolcraftLayer[],
   prefix: "Group" | "Layer",
@@ -640,6 +752,44 @@ export function toolcraftReducer(
     case "controls.setValue": {
       const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(command.target);
 
+      if (isToolcraftTimelinePanelExtendedTarget(command.target)) {
+        const extended = command.value === true;
+
+        if (state.panels.timeline.extended === extended) {
+          return state;
+        }
+
+        return {
+          ...state,
+          panels: {
+            ...state.panels,
+            timeline: {
+              ...state.panels.timeline,
+              extended,
+            },
+          },
+        };
+      }
+
+      if (isToolcraftTimelinePanelVisibleTarget(command.target)) {
+        const hidden = command.value === false;
+
+        if (state.panels.timeline.hidden === hidden) {
+          return state;
+        }
+
+        return {
+          ...state,
+          panels: {
+            ...state.panels,
+            timeline: {
+              ...state.panels.timeline,
+              hidden,
+            },
+          },
+        };
+      }
+
       if (isToolcraftCanvasAspectRatioTarget(command.target)) {
         const ratio = normalizeCanvasAspectRatioValue(command.value, state.canvas.size);
         const size =
@@ -1131,6 +1281,22 @@ export function toolcraftReducer(
         },
       };
 
+    case "panels.setHidden":
+      if (state.panels[command.panelId].hidden === command.hidden) {
+        return state;
+      }
+
+      return {
+        ...state,
+        panels: {
+          ...state.panels,
+          [command.panelId]: {
+            ...state.panels[command.panelId],
+            hidden: command.hidden,
+          },
+        },
+      };
+
     case "panels.resetOffset":
       return {
         ...state,
@@ -1288,6 +1454,26 @@ export function toolcraftReducer(
       });
     }
 
+    case "media.transform": {
+      const targetMediaAsset = state.mediaAssets.find((asset) => asset.id === command.mediaId);
+
+      if (!targetMediaAsset || (targetMediaAsset.assetKind ?? "image") !== "image") {
+        return state;
+      }
+
+      const mediaAssets = state.mediaAssets.map((asset) =>
+        asset.id === targetMediaAsset.id
+          ? getTransformedMediaAsset(asset, command.operation)
+          : asset,
+      );
+
+      return commitStatePatch(state, {
+        after: { mediaAssets },
+        before: { mediaAssets: state.mediaAssets },
+        label: "Transform media",
+      });
+    }
+
     case "timeline.setCurrentTime": {
       return {
         ...state,

package/templates/runtime/state/timeline-loop.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getToolcraftTimelineLoopProgress,
+  getToolcraftTimelineLoopTime,
+} from "./timeline-loop";
+
+describe("timeline loop helpers", () => {
+  it("wraps timeline time into a forward-only seamless loop", () => {
+    expect(
+      getToolcraftTimelineLoopTime({
+        currentTimeSeconds: 0,
+        durationSeconds: 8,
+      }),
+    ).toBe(0);
+    expect(
+      getToolcraftTimelineLoopTime({
+        currentTimeSeconds: 7.5,
+        durationSeconds: 8,
+      }),
+    ).toBe(7.5);
+    expect(
+      getToolcraftTimelineLoopTime({
+        currentTimeSeconds: 8,
+        durationSeconds: 8,
+      }),
+    ).toBe(0);
+    expect(
+      getToolcraftTimelineLoopTime({
+        currentTimeSeconds: 9.25,
+        durationSeconds: 8,
+      }),
+    ).toBe(1.25);
+  });
+
+  it("maps one full product cycle to the current timeline duration", () => {
+    expect(
+      getToolcraftTimelineLoopProgress({
+        currentTimeSeconds: 2,
+        durationSeconds: 4,
+      }),
+    ).toBe(0.5);
+    expect(
+      getToolcraftTimelineLoopProgress({
+        currentTimeSeconds: 2,
+        durationSeconds: 8,
+      }),
+    ).toBe(0.25);
+    expect(
+      getToolcraftTimelineLoopProgress({
+        currentTimeSeconds: 8,
+        durationSeconds: 8,
+      }),
+    ).toBe(0);
+  });
+
+  it("handles invalid timeline values as the first loop frame", () => {
+    expect(
+      getToolcraftTimelineLoopProgress({
+        currentTimeSeconds: Number.NaN,
+        durationSeconds: 8,
+      }),
+    ).toBe(0);
+    expect(
+      getToolcraftTimelineLoopProgress({
+        currentTimeSeconds: 4,
+        durationSeconds: 0,
+      }),
+    ).toBe(0);
+  });
+});