@pixel-point/toolcraft 0.0.8 → 0.0.11

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

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

@@ -0,0 +1,35 @@
+import type { ToolcraftTimelineState } from "./types";
+
+export type ToolcraftTimelineLoopOptions = Pick<
+  ToolcraftTimelineState,
+  "currentTimeSeconds" | "durationSeconds"
+>;
+
+function getPositiveModulo(value: number, modulo: number): number {
+  return ((value % modulo) + modulo) % modulo;
+}
+
+export function getToolcraftTimelineLoopTime({
+  currentTimeSeconds,
+  durationSeconds,
+}: ToolcraftTimelineLoopOptions): number {
+  if (
+    !Number.isFinite(currentTimeSeconds) ||
+    !Number.isFinite(durationSeconds) ||
+    durationSeconds <= 0
+  ) {
+    return 0;
+  }
+
+  return getPositiveModulo(currentTimeSeconds, durationSeconds);
+}
+
+export function getToolcraftTimelineLoopProgress(
+  options: ToolcraftTimelineLoopOptions,
+): number {
+  if (!Number.isFinite(options.durationSeconds) || options.durationSeconds <= 0) {
+    return 0;
+  }
+
+  return getToolcraftTimelineLoopTime(options) / options.durationSeconds;
+}

package/templates/runtime/state/types.ts

@@ -37,6 +37,11 @@ export type ToolcraftCommand =
       panelId: ToolcraftPanelId;
       type: "panels.setOffset";
     }
+  | {
+      hidden: boolean;
+      panelId: ToolcraftPanelId;
+      type: "panels.setHidden";
+    }
   | { panelId: ToolcraftPanelId; type: "panels.resetOffset" }
   | {
       asset: Omit<ToolcraftMediaAsset, "id" | "layerId"> & {
@@ -49,6 +54,11 @@ export type ToolcraftCommand =
     }
   | { mediaId: string; type: "media.delete" }
   | { mediaIds: string[]; type: "media.reorder" }
+  | {
+      mediaId: string;
+      operation: ToolcraftMediaTransformOperation;
+      type: "media.transform";
+    }
   | { currentTimeSeconds: number; type: "timeline.setCurrentTime" }
   | { durationSeconds: number; type: "timeline.setDuration" }
   | { expanded: boolean; type: "timeline.setExpanded" }
@@ -106,10 +116,12 @@ export const toolcraftRuntimeCommandTypes = [
   "canvas.zoomReset",
   "canvas.setViewport",
   "panels.setOffset",
+  "panels.setHidden",
   "panels.resetOffset",
   "media.import",
   "media.delete",
   "media.reorder",
+  "media.transform",
   "timeline.setCurrentTime",
   "timeline.setDuration",
   "timeline.setExpanded",
@@ -171,8 +183,21 @@ export type ToolcraftMediaAsset = {
   position: ToolcraftPoint;
   size?: ToolcraftCanvasSize;
   sourceTarget?: string;
+  transform?: ToolcraftMediaTransform;
+};
+
+export type ToolcraftMediaTransform = {
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  rotationDeg?: 0 | 90 | 180 | 270;
 };
 
+export type ToolcraftMediaTransformOperation =
+  | "flip-horizontal"
+  | "flip-vertical"
+  | "rotate-left"
+  | "rotate-right";
+
 export type ToolcraftHistoryPatch = {
   after: Record<string, unknown>;
   before: Record<string, unknown>;
@@ -223,6 +248,8 @@ export type ToolcraftPanelId = "controls" | "layers" | "timeline" | "toolbar";
 
 export type ToolcraftPanelState = {
   collapsed?: boolean;
+  extended?: boolean;
+  hidden?: boolean;
   offset: { x: number; y: number };
 };