@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/state/layers-reducer.ts

@@ -0,0 +1,318 @@
+import { commitToolcraftStatePatch } from "./history-patches";
+import { getNextToolcraftLayerId } from "./layer-state";
+import type {
+  ToolcraftCommand,
+  ToolcraftLayer,
+  ToolcraftLayerDraft,
+  ToolcraftState,
+} from "./types";
+
+type ToolcraftLayersCommand = Extract<
+  ToolcraftCommand,
+  {
+    type:
+      | "layers.add"
+      | "layers.delete"
+      | "layers.moveToGroup"
+      | "layers.rename"
+      | "layers.reorder"
+      | "layers.select"
+      | "layers.toggleCollapsed"
+      | "layers.toggleVisibility";
+  }
+>;
+
+function getNextLayerName(
+  layers: readonly ToolcraftLayer[],
+  prefix: "Group" | "Layer",
+): string {
+  const nextIndex =
+    layers.reduce((highestIndex, layer) => {
+      const label = layer.displayName ?? layer.name;
+      const match = new RegExp(`^${prefix} (\\d+)$`).exec(label);
+      const currentIndex = Number(match?.[1] ?? 0);
+
+      return Math.max(highestIndex, currentIndex);
+    }, 0) + 1;
+
+  return `${prefix} ${nextIndex}`;
+}
+
+function createToolcraftLayer(
+  state: ToolcraftState,
+  draft: ToolcraftLayerDraft | undefined,
+): ToolcraftLayer {
+  const kind = draft?.kind ?? "layer";
+  const name =
+    draft?.name ??
+    draft?.displayName ??
+    getNextLayerName(state.layers, kind === "group" ? "Group" : "Layer");
+
+  return {
+    collapsed: kind === "group" ? (draft?.collapsed ?? false) : draft?.collapsed,
+    displayName: draft?.displayName ?? name,
+    id: draft?.id ?? getNextToolcraftLayerId(state),
+    kind,
+    name,
+    parentGroupId: draft?.parentGroupId,
+    visible: draft?.visible ?? true,
+  };
+}
+
+function clampInsertIndex(length: number, insertIndex: number | undefined): number {
+  return Math.max(0, Math.min(length, insertIndex ?? length));
+}
+
+function getToolcraftLayerBlockIds(
+  layers: readonly ToolcraftLayer[],
+  layerId: string,
+): Set<string> {
+  const blockIds = new Set<string>([layerId]);
+  let changed = true;
+
+  while (changed) {
+    changed = false;
+
+    for (const layer of layers) {
+      if (layer.parentGroupId && blockIds.has(layer.parentGroupId) && !blockIds.has(layer.id)) {
+        blockIds.add(layer.id);
+        changed = true;
+      }
+    }
+  }
+
+  return blockIds;
+}
+
+function canMoveLayerToParent(
+  layers: readonly ToolcraftLayer[],
+  layerId: string,
+  parentGroupId: string | null,
+): boolean {
+  if (!parentGroupId) {
+    return true;
+  }
+
+  if (layerId === parentGroupId) {
+    return false;
+  }
+
+  const parent = layers.find((layer) => layer.id === parentGroupId);
+
+  if (!parent || parent.kind !== "group") {
+    return false;
+  }
+
+  return !getToolcraftLayerBlockIds(layers, layerId).has(parentGroupId);
+}
+
+export function reduceToolcraftLayersCommand(
+  state: ToolcraftState,
+  command: ToolcraftLayersCommand,
+): ToolcraftState {
+  switch (command.type) {
+    case "layers.add": {
+      const layer = createToolcraftLayer(state, command.layer);
+      const insertIndex = clampInsertIndex(state.layers.length, command.insertIndex);
+      const layers = [
+        ...state.layers.slice(0, insertIndex),
+        layer,
+        ...state.layers.slice(insertIndex),
+      ];
+
+      return commitToolcraftStatePatch(state, {
+        after: {
+          layers,
+          selectedLayerId: layer.id,
+        },
+        before: {
+          layers: state.layers,
+          selectedLayerId: state.selectedLayerId,
+        },
+        label: layer.kind === "group" ? "Add group" : "Add layer",
+      });
+    }
+
+    case "layers.delete": {
+      if (!state.layers.some((layer) => layer.id === command.layerId)) {
+        return state;
+      }
+
+      const deletedLayerIds = getToolcraftLayerBlockIds(state.layers, command.layerId);
+      const layers = state.layers.filter((layer) => !deletedLayerIds.has(layer.id));
+      const mediaAssets = state.mediaAssets.filter((asset) => !deletedLayerIds.has(asset.layerId));
+      const selectedLayerId = deletedLayerIds.has(state.selectedLayerId ?? "")
+        ? (layers[0]?.id ?? null)
+        : state.selectedLayerId;
+
+      return commitToolcraftStatePatch(state, {
+        after: {
+          layers,
+          mediaAssets,
+          selectedLayerId,
+        },
+        before: {
+          layers: state.layers,
+          mediaAssets: state.mediaAssets,
+          selectedLayerId: state.selectedLayerId,
+        },
+        label: "Delete layer",
+      });
+    }
+
+    case "layers.moveToGroup": {
+      const movedRootLayerIds = new Set(
+        command.layerIds.filter((layerId) =>
+          canMoveLayerToParent(state.layers, layerId, command.parentGroupId),
+        ),
+      );
+
+      if (movedRootLayerIds.size === 0) {
+        return state;
+      }
+
+      const nextParentGroupId = command.parentGroupId ?? undefined;
+      const movedBlockIds = new Set<string>();
+
+      for (const layerId of movedRootLayerIds) {
+        getToolcraftLayerBlockIds(state.layers, layerId).forEach((blockLayerId) => {
+          movedBlockIds.add(blockLayerId);
+        });
+      }
+
+      const movingBlock = state.layers.filter((layer) => movedBlockIds.has(layer.id));
+      const updatedMovingBlock = movingBlock.map((layer) =>
+        movedRootLayerIds.has(layer.id) ? { ...layer, parentGroupId: nextParentGroupId } : layer,
+      );
+      const remainingLayers = state.layers.filter((layer) => !movedBlockIds.has(layer.id));
+      const targetGroupIndex = command.parentGroupId
+        ? remainingLayers.findIndex((layer) => layer.id === command.parentGroupId)
+        : -1;
+      const movedLayers = command.parentGroupId
+        ? targetGroupIndex >= 0
+          ? [
+              ...remainingLayers.slice(0, targetGroupIndex + 1),
+              ...updatedMovingBlock,
+              ...remainingLayers.slice(targetGroupIndex + 1),
+            ]
+          : state.layers
+        : state.layers.map((layer) =>
+            movedRootLayerIds.has(layer.id) ? { ...layer, parentGroupId: nextParentGroupId } : layer,
+          );
+      const layers = command.parentGroupId
+        ? movedLayers.map((layer) =>
+            layer.id === command.parentGroupId && layer.kind === "group" && layer.collapsed
+              ? { ...layer, collapsed: false }
+              : layer,
+          )
+        : movedLayers;
+
+      if (layers === state.layers) {
+        return state;
+      }
+
+      if (
+        layers.every(
+          (layer, index) =>
+            layer.id === state.layers[index]?.id &&
+            layer.parentGroupId === state.layers[index]?.parentGroupId &&
+            layer.collapsed === state.layers[index]?.collapsed,
+        )
+      ) {
+        return state;
+      }
+
+      return commitToolcraftStatePatch(state, {
+        after: { layers },
+        before: { layers: state.layers },
+        label: command.parentGroupId ? "Move layers to group" : "Move layers to root",
+      });
+    }
+
+    case "layers.select":
+      if (!state.layers.some((layer) => layer.id === command.layerId)) {
+        return state;
+      }
+
+      return {
+        ...state,
+        selectedLayerId: command.layerId,
+      };
+
+    case "layers.rename": {
+      const name = command.name.trim();
+
+      if (!name || !state.layers.some((layer) => layer.id === command.layerId)) {
+        return state;
+      }
+
+      const layers = state.layers.map((layer) =>
+        layer.id === command.layerId ? { ...layer, displayName: name } : layer,
+      );
+
+      return commitToolcraftStatePatch(state, {
+        after: { layers },
+        before: { layers: state.layers },
+        label: "Rename layer",
+      });
+    }
+
+    case "layers.toggleCollapsed": {
+      const targetLayer = state.layers.find((layer) => layer.id === command.layerId);
+
+      if (!targetLayer || targetLayer.kind !== "group") {
+        return state;
+      }
+
+      const layers = state.layers.map((layer) =>
+        layer.id === command.layerId ? { ...layer, collapsed: !layer.collapsed } : layer,
+      );
+
+      return commitToolcraftStatePatch(state, {
+        after: { layers },
+        before: { layers: state.layers },
+        label: "Toggle group",
+      });
+    }
+
+    case "layers.toggleVisibility": {
+      if (!state.layers.some((layer) => layer.id === command.layerId)) {
+        return state;
+      }
+
+      const layers = state.layers.map((layer) =>
+        layer.id === command.layerId ? { ...layer, visible: !layer.visible } : layer,
+      );
+
+      return commitToolcraftStatePatch(state, {
+        after: { layers },
+        before: { layers: state.layers },
+        label: "Toggle layer visibility",
+      });
+    }
+
+    case "layers.reorder": {
+      const nextLayerIds = new Set(command.layers.map((layer) => layer.id));
+
+      if (nextLayerIds.size !== command.layers.length || nextLayerIds.size !== state.layers.length) {
+        return state;
+      }
+
+      if (!state.layers.every((layer) => nextLayerIds.has(layer.id))) {
+        return state;
+      }
+
+      return commitToolcraftStatePatch(state, {
+        after: {
+          layers: command.layers,
+          selectedLayerId: command.selectedLayerId ?? state.selectedLayerId,
+        },
+        before: {
+          layers: state.layers,
+          selectedLayerId: state.selectedLayerId,
+        },
+        label: "Reorder layers",
+      });
+    }
+  }
+}

package/templates/runtime/state/media-reducer.ts

@@ -0,0 +1,283 @@
+import { commitToolcraftStatePatch } from "./history-patches";
+import { getNextToolcraftLayerId } from "./layer-state";
+import { getMediaReadyTimelineState } from "./timeline-readiness";
+import type {
+  ToolcraftCommand,
+  ToolcraftMediaAsset,
+  ToolcraftMediaTransform,
+  ToolcraftState,
+} from "./types";
+
+type ToolcraftMediaCommand = Extract<
+  ToolcraftCommand,
+  {
+    type: "media.delete" | "media.import" | "media.reorder" | "media.transform";
+  }
+>;
+
+function getNextMediaId(state: ToolcraftState): string {
+  const existingIds = new Set(state.mediaAssets.map((asset) => asset.id));
+  let index = state.mediaAssets.length + 1;
+
+  while (existingIds.has(`media-${index}`)) {
+    index += 1;
+  }
+
+  return `media-${index}`;
+}
+
+function getSingleLayerImportId(state: ToolcraftState): string | undefined {
+  return state.schema.panels.layers
+    ? undefined
+    : state.layers.find((layer) => layer.kind !== "group")?.id;
+}
+
+function getSingleMediaImportId(state: ToolcraftState): string | undefined {
+  return state.schema.panels.layers ? undefined : state.mediaAssets[0]?.id;
+}
+
+function getImportedLayerName(fileName: string): string {
+  const name = fileName.replace(/\.[^.]+$/, "").trim();
+
+  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,
+  };
+}
+
+export function reduceToolcraftMediaCommand(
+  state: ToolcraftState,
+  command: ToolcraftMediaCommand,
+): ToolcraftState {
+  switch (command.type) {
+    case "media.import": {
+      const shouldReplaceSingleLayerMedia =
+        !state.schema.panels.layers && command.replaceExisting !== false;
+      const assetKind = command.asset.assetKind ?? "image";
+      const sourceTarget = command.asset.sourceTarget;
+      const existingSourceMediaAsset =
+        shouldReplaceSingleLayerMedia && sourceTarget
+          ? state.mediaAssets.find((asset) => asset.sourceTarget === sourceTarget)
+          : undefined;
+      const shouldResizeCanvas =
+        state.schema.canvas.sizing.mode === "intrinsic-media" &&
+        assetKind === "image" &&
+        command.asset.size !== undefined;
+      const layerId =
+        command.asset.layerId ??
+        existingSourceMediaAsset?.layerId ??
+        (shouldReplaceSingleLayerMedia && !sourceTarget
+          ? getSingleLayerImportId(state)
+          : undefined) ??
+        getNextToolcraftLayerId(state);
+      const mediaId =
+        command.asset.id ??
+        existingSourceMediaAsset?.id ??
+        (shouldReplaceSingleLayerMedia && !sourceTarget
+          ? getSingleMediaImportId(state)
+          : undefined) ??
+        getNextMediaId(state);
+      const layer = {
+        displayName: command.asset.layerName ?? getImportedLayerName(command.asset.fileName),
+        id: layerId,
+        kind: "layer" as const,
+        name: command.asset.layerName ?? getImportedLayerName(command.asset.fileName),
+        visible: true,
+      };
+      const mediaAsset: ToolcraftMediaAsset = {
+        ...(command.asset.assetKind ? { assetKind: command.asset.assetKind } : {}),
+        dataUrl: command.asset.dataUrl,
+        fileName: command.asset.fileName,
+        id: mediaId,
+        layerId,
+        mimeType: command.asset.mimeType,
+        position: shouldResizeCanvas ? { x: 0, y: 0 } : command.asset.position,
+        ...(command.asset.size ? { size: command.asset.size } : {}),
+        ...(sourceTarget ? { sourceTarget } : {}),
+      };
+      const layers = shouldReplaceSingleLayerMedia
+        ? sourceTarget
+          ? state.layers.some((entry) => entry.id === layerId)
+            ? state.layers.map((entry) => (entry.id === layerId ? layer : entry))
+            : [...state.layers, layer]
+          : [layer]
+        : [...state.layers, layer];
+      const mediaAssets = shouldReplaceSingleLayerMedia
+        ? sourceTarget
+          ? existingSourceMediaAsset
+            ? state.mediaAssets.map((asset) =>
+                asset.id === existingSourceMediaAsset.id ? mediaAsset : asset,
+              )
+            : [...state.mediaAssets, mediaAsset]
+          : [mediaAsset]
+        : [...state.mediaAssets, mediaAsset];
+      const after = {
+        ...(shouldResizeCanvas ? { "canvas.size": command.asset.size } : {}),
+        layers,
+        mediaAssets,
+        selectedLayerId: layerId,
+      };
+      const before = {
+        ...(shouldResizeCanvas ? { "canvas.size": state.canvas.size } : {}),
+        layers: state.layers,
+        mediaAssets: state.mediaAssets,
+        selectedLayerId: state.selectedLayerId,
+      };
+
+      return commitToolcraftStatePatch(state, {
+        after,
+        before,
+        label: "Import media",
+      });
+    }
+
+    case "media.delete": {
+      if (!state.mediaAssets.some((asset) => asset.id === command.mediaId)) {
+        return state;
+      }
+
+      const mediaAssets = state.mediaAssets.filter((asset) => asset.id !== command.mediaId);
+      const timeline = getMediaReadyTimelineState(state.schema, state.timeline, mediaAssets);
+      const shouldCommitTimeline = timeline !== state.timeline;
+
+      return commitToolcraftStatePatch(state, {
+        after: {
+          mediaAssets,
+          ...(shouldCommitTimeline ? { timeline } : {}),
+        },
+        before: {
+          mediaAssets: state.mediaAssets,
+          ...(shouldCommitTimeline ? { timeline: state.timeline } : {}),
+        },
+        label: "Delete media",
+      });
+    }
+
+    case "media.reorder": {
+      if (state.mediaAssets.length < 2 || command.mediaIds.length === 0) {
+        return state;
+      }
+
+      const mediaById = new Map(state.mediaAssets.map((asset) => [asset.id, asset]));
+      const seenIds = new Set<string>();
+      const reorderedMediaAssets = command.mediaIds.flatMap((mediaId) => {
+        const mediaAsset = mediaById.get(mediaId);
+
+        if (!mediaAsset || seenIds.has(mediaId)) {
+          return [];
+        }
+
+        seenIds.add(mediaId);
+        return [mediaAsset];
+      });
+
+      if (reorderedMediaAssets.length === 0) {
+        return state;
+      }
+
+      for (const mediaAsset of state.mediaAssets) {
+        if (!seenIds.has(mediaAsset.id)) {
+          reorderedMediaAssets.push(mediaAsset);
+        }
+      }
+
+      if (
+        reorderedMediaAssets.length === state.mediaAssets.length &&
+        reorderedMediaAssets.every((asset, index) => asset.id === state.mediaAssets[index]?.id)
+      ) {
+        return state;
+      }
+
+      return commitToolcraftStatePatch(state, {
+        after: { mediaAssets: reorderedMediaAssets },
+        before: { mediaAssets: state.mediaAssets },
+        label: "Reorder media",
+      });
+    }
+
+    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 commitToolcraftStatePatch(state, {
+        after: { mediaAssets },
+        before: { mediaAssets: state.mediaAssets },
+        label: "Transform media",
+      });
+    }
+  }
+}

package/templates/runtime/state/media-state.ts

@@ -0,0 +1,105 @@
+import {
+  cloneToolcraftLayers,
+  cloneToolcraftMediaAssets,
+  createToolcraftDefaultMediaState,
+} from "./media-defaults";
+import { getMediaReadyTimelineState } from "./timeline-readiness";
+import type {
+  ToolcraftHistoryPatch,
+  ToolcraftState,
+} from "./types";
+
+function getFileDropResetTargets(
+  state: ToolcraftState,
+  targets?: ReadonlySet<string>,
+): Set<string> {
+  const fileDropTargets = new Set<string>();
+
+  for (const section of state.schema.panels.controls?.sections ?? []) {
+    for (const control of Object.values(section.controls)) {
+      if (control.type !== "fileDrop" || (targets && !targets.has(control.target))) {
+        continue;
+      }
+
+      fileDropTargets.add(control.target);
+    }
+  }
+
+  return fileDropTargets;
+}
+
+export function getToolcraftResetMediaPatch(
+  state: ToolcraftState,
+  targets?: ReadonlySet<string>,
+): Pick<ToolcraftHistoryPatch, "after" | "before"> | null {
+  if (state.schema.panels.layers) {
+    return null;
+  }
+
+  const fileDropTargets = getFileDropResetTargets(state, targets);
+
+  if (fileDropTargets.size === 0) {
+    return null;
+  }
+
+  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);
+      }
+
+      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;
+  }
+
+  const timeline = getMediaReadyTimelineState(state.schema, state.timeline, mediaAssets);
+  const shouldCommitTimeline = timeline !== state.timeline;
+
+  return {
+    after: {
+      layers,
+      mediaAssets,
+      selectedLayerId,
+      ...(shouldCommitTimeline ? { timeline } : {}),
+    },
+    before: {
+      layers: state.layers,
+      mediaAssets: state.mediaAssets,
+      selectedLayerId: state.selectedLayerId,
+      ...(shouldCommitTimeline ? { timeline: state.timeline } : {}),
+    },
+  };
+}