@pixel-point/toolcraft 0.0.13 → 0.0.15

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

@@ -0,0 +1,306 @@
+import { describe, expect, it } from "vitest";
+
+import { toolcraftReducer } from "./reducer";
+import { createState } from "./reducer-test-utils";
+
+describe("toolcraftReducer layers", () => {
+  it("adds and selects runtime layers and groups", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: {
+        displayName: "Scene Group",
+        id: "group-1",
+        kind: "group",
+        name: "scene-group",
+      },
+      type: "layers.add",
+    });
+    const state = toolcraftReducer(withGroup, {
+      insertIndex: 1,
+      layer: {
+        displayName: "Layer 1",
+        id: "layer-1",
+        name: "layer-1",
+        parentGroupId: "group-1",
+      },
+      type: "layers.add",
+    });
+
+    expect(state.layers).toEqual([
+      {
+        collapsed: false,
+        displayName: "Scene Group",
+        id: "group-1",
+        kind: "group",
+        name: "scene-group",
+        parentGroupId: undefined,
+        visible: true,
+      },
+      {
+        collapsed: undefined,
+        displayName: "Layer 1",
+        id: "layer-1",
+        kind: "layer",
+        name: "layer-1",
+        parentGroupId: "group-1",
+        visible: true,
+      },
+    ]);
+    expect(state.selectedLayerId).toBe("layer-1");
+  });
+
+  it("renames layers and toggles visibility and collapsed groups", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Scene Group" },
+      type: "layers.add",
+    });
+    const hidden = toolcraftReducer(withGroup, {
+      layerId: "group-1",
+      type: "layers.toggleVisibility",
+    });
+    const collapsed = toolcraftReducer(hidden, {
+      layerId: "group-1",
+      type: "layers.toggleCollapsed",
+    });
+    const renamed = toolcraftReducer(collapsed, {
+      layerId: "group-1",
+      name: "Main Scene",
+      type: "layers.rename",
+    });
+
+    expect(renamed.layers[0]).toMatchObject({
+      collapsed: true,
+      displayName: "Main Scene",
+      visible: false,
+    });
+    expect(renamed.history.undo.at(-1)?.label).toBe("Rename layer");
+  });
+
+  it("deletes groups with their children", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withChild = toolcraftReducer(withGroup, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    const withSibling = toolcraftReducer(withChild, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withSibling, {
+      layerId: "group-1",
+      type: "layers.delete",
+    });
+
+    expect(state.layers.map((layer) => layer.id)).toEqual(["layer-2"]);
+    expect(state.selectedLayerId).toBe("layer-2");
+  });
+
+  it("deletes nested groups with every descendant layer", () => {
+    let state = createState();
+
+    state = toolcraftReducer(state, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "group-2", kind: "group", name: "Group 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-2" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+
+    const deleted = toolcraftReducer(state, {
+      layerId: "group-1",
+      type: "layers.delete",
+    });
+
+    expect(deleted.layers.map((layer) => layer.id)).toEqual(["layer-2"]);
+    expect(deleted.selectedLayerId).toBe("layer-2");
+  });
+
+  it("deletes media assets attached to a layer", () => {
+    const imported = toolcraftReducer(createState(), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { width: 1024, height: 768, unit: "px" },
+      },
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(imported, {
+      layerId: "layer-1",
+      type: "layers.delete",
+    });
+
+    expect(state.layers).toEqual([]);
+    expect(state.mediaAssets).toEqual([]);
+    expect(state.selectedLayerId).toBeNull();
+  });
+
+  it("moves layers into groups and back to root", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withLayer = toolcraftReducer(withGroup, {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+
+    const grouped = toolcraftReducer(withLayer, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+    const rooted = toolcraftReducer(grouped, {
+      layerIds: ["layer-1"],
+      parentGroupId: null,
+      type: "layers.moveToGroup",
+    });
+
+    expect(grouped.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+    expect(grouped.history.undo.at(-1)?.label).toBe("Move layers to group");
+    expect(rooted.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBeUndefined();
+    expect(rooted.history.undo.at(-1)?.label).toBe("Move layers to root");
+  });
+
+  it("opens collapsed groups when moving layers into them", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withCollapsedGroup = toolcraftReducer(withGroup, {
+      layerId: "group-1",
+      type: "layers.toggleCollapsed",
+    });
+    const withLayer = toolcraftReducer(withCollapsedGroup, {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+
+    const grouped = toolcraftReducer(withLayer, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+
+    expect(grouped.layers.find((layer) => layer.id === "group-1")?.collapsed).toBe(false);
+    expect(grouped.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+  });
+
+  it("places moved layers directly under the target group", () => {
+    const withFirst = toolcraftReducer(createState(), {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+    const withGroup = toolcraftReducer(withFirst, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withExistingChild = toolcraftReducer(withGroup, {
+      layer: { id: "layer-2", name: "Layer 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    const withDraggedLayer = toolcraftReducer(withExistingChild, {
+      layer: { id: "layer-3", name: "Layer 3" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withDraggedLayer, {
+      layerIds: ["layer-3"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+
+    expect(state.layers.map((layer) => layer.id)).toEqual([
+      "layer-1",
+      "group-1",
+      "layer-3",
+      "layer-2",
+    ]);
+    expect(state.layers.find((layer) => layer.id === "layer-3")?.parentGroupId).toBe("group-1");
+  });
+
+  it("does not move groups into their own descendants", () => {
+    const withParent = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withChild = toolcraftReducer(withParent, {
+      layer: { id: "group-2", kind: "group", name: "Group 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withChild, {
+      layerIds: ["group-1"],
+      parentGroupId: "group-2",
+      type: "layers.moveToGroup",
+    });
+
+    expect(state).toBe(withChild);
+  });
+
+  it("reorders layers and supports undo and redo", () => {
+    const withFirst = toolcraftReducer(createState(), {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+    const withSecond = toolcraftReducer(withFirst, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+    const reordered = toolcraftReducer(withSecond, {
+      layers: [withSecond.layers[1]!, withSecond.layers[0]!],
+      selectedLayerId: "layer-1",
+      type: "layers.reorder",
+    });
+    const undone = toolcraftReducer(reordered, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(reordered.layers.map((layer) => layer.id)).toEqual(["layer-2", "layer-1"]);
+    expect(reordered.selectedLayerId).toBe("layer-1");
+    expect(undone.layers.map((layer) => layer.id)).toEqual(["layer-1", "layer-2"]);
+    expect(redone.layers.map((layer) => layer.id)).toEqual(["layer-2", "layer-1"]);
+  });
+
+  it("preserves nested move undo and redo", () => {
+    let state = createState();
+
+    state = toolcraftReducer(state, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "group-2", kind: "group", name: "Group 2" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+
+    const moved = toolcraftReducer(state, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-2",
+      type: "layers.moveToGroup",
+    });
+    const undone = toolcraftReducer(moved, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(moved.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-2");
+    expect(undone.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+    expect(redone.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-2");
+  });
+});

package/templates/runtime/state/reducer-media-import-sizing.test.ts

@@ -0,0 +1,197 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { createToolcraftState } from "./create-template-state";
+import { importImageMedia } from "./reducer-media-test-utils";
+import { toolcraftReducer } from "./reducer";
+import { createState } from "./reducer-test-utils";
+
+describe("toolcraftReducer media import sizing", () => {
+  it("imports media as an editable-canvas-sized layer and records history", () => {
+    const state = createState();
+
+    const next = importImageMedia(state, {
+      fileName: "material.png",
+      position: { x: 10, y: 20 },
+      size: state.canvas.size,
+    });
+
+    expect(next.layers).toEqual([
+      {
+        displayName: "material",
+        id: "layer-1",
+        kind: "layer",
+        name: "material",
+        visible: true,
+      },
+    ]);
+    expect(next.mediaAssets).toEqual([
+      {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        id: "media-1",
+        layerId: "layer-1",
+        mimeType: "image/png",
+        position: { x: 10, y: 20 },
+        size: state.canvas.size,
+      },
+    ]);
+    expect(next.selectedLayerId).toBe("layer-1");
+    expect(next.history.undo.at(-1)?.label).toBe("Import media");
+  });
+
+  it("deletes imported media without deleting the owning layer", () => {
+    const state = importImageMedia(createState(), {
+      fileName: "material.png",
+      position: { x: 10, y: 20 },
+      size: { height: 512, unit: "px", width: 512 },
+    });
+
+    const next = toolcraftReducer(state, {
+      mediaId: "media-1",
+      type: "media.delete",
+    });
+
+    expect(next.layers).toEqual(state.layers);
+    expect(next.selectedLayerId).toBe("layer-1");
+    expect(next.mediaAssets).toEqual([]);
+    expect(next.history.undo.at(-1)?.label).toBe("Delete media");
+  });
+
+  it("keeps the current editable-output canvas size when importing background/source images", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 720, unit: "px", width: 1280 },
+        upload: true,
+      },
+      panels: {},
+    });
+    const state = createToolcraftState(app);
+    const imported = importImageMedia(state, {
+      dataUrl: "data:image/png;base64,wide",
+      fileName: "wide-source.png",
+      position: { x: 42, y: 24 },
+      size: { height: 1000, unit: "px", width: 4000 },
+    });
+
+    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 = importImageMedia(heightChanged, {
+      dataUrl: "data:image/png;base64,tall",
+      fileName: "tall-source.png",
+      size: { height: 4000, unit: "px", width: 1000 },
+    });
+
+    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);
+    const first = importImageMedia(state, {
+      dataUrl: "data:image/png;base64,first",
+      fileName: "first.png",
+      position: { x: 42, y: 24 },
+      size: { height: 600, unit: "px", width: 800 },
+    });
+    const second = importImageMedia(first, {
+      dataUrl: "data:image/png;base64,second",
+      fileName: "second.png",
+      position: { x: -20, y: 10 },
+      size: { height: 720, unit: "px", width: 1280 },
+    });
+
+    expect(first.canvas.size).toEqual({ height: 600, unit: "px", width: 800 });
+    expect(first.mediaAssets[0]).toMatchObject({
+      fileName: "first.png",
+      position: { x: 0, y: 0 },
+      size: { height: 600, unit: "px", width: 800 },
+    });
+    expect(first.history.undo.at(-1)?.after).toMatchObject({
+      "canvas.size": { height: 600, unit: "px", width: 800 },
+    });
+    expect(second.canvas.size).toEqual({ height: 720, unit: "px", width: 1280 });
+    expect(second.layers).toHaveLength(1);
+    expect(second.mediaAssets).toHaveLength(1);
+    expect(second.mediaAssets[0]).toMatchObject({
+      fileName: "second.png",
+      id: "media-1",
+      layerId: "layer-1",
+      position: { x: 0, y: 0 },
+      size: { height: 720, unit: "px", width: 1280 },
+    });
+  });
+
+  it("appends single-layer media when import is explicitly non-replacing", () => {
+    const state = createState();
+    const first = importImageMedia(
+      state,
+      {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+    const second = importImageMedia(
+      first,
+      {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+
+    expect(second.layers.map((layer) => layer.id)).toEqual(["layer-1", "layer-2"]);
+    expect(second.mediaAssets.map((asset) => asset.id)).toEqual(["media-1", "media-2"]);
+    expect(second.mediaAssets.map((asset) => asset.fileName)).toEqual([
+      "first.png",
+      "second.png",
+    ]);
+    expect(second.selectedLayerId).toBe("layer-2");
+  });
+});

package/templates/runtime/state/reducer-media-reorder-history.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+
+import { importImageMedia } from "./reducer-media-test-utils";
+import { toolcraftReducer } from "./reducer";
+import { createState } from "./reducer-test-utils";
+
+describe("toolcraftReducer media reorder and history", () => {
+  it("reorders imported media assets and records undo history", () => {
+    const state = createState();
+    const first = importImageMedia(
+      state,
+      {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+    const second = importImageMedia(
+      first,
+      {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+    const third = importImageMedia(
+      second,
+      {
+        dataUrl: "data:image/png;base64,third",
+        fileName: "third.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+
+    const reordered = toolcraftReducer(third, {
+      mediaIds: ["media-3", "media-1", "media-2"],
+      type: "media.reorder",
+    });
+    const undone = toolcraftReducer(reordered, { type: "history.undo" });
+
+    expect(reordered.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-3",
+      "media-1",
+      "media-2",
+    ]);
+    expect(reordered.history.undo.at(-1)?.label).toBe("Reorder media");
+    expect(undone.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-1",
+      "media-2",
+      "media-3",
+    ]);
+  });
+
+  it("keeps omitted media assets after explicitly reordered media", () => {
+    const state = createState();
+    const first = importImageMedia(
+      state,
+      {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+    const second = importImageMedia(
+      first,
+      {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+    const third = importImageMedia(
+      second,
+      {
+        dataUrl: "data:image/png;base64,third",
+        fileName: "third.png",
+        size: state.canvas.size,
+      },
+      { replaceExisting: false },
+    );
+
+    const reordered = toolcraftReducer(third, {
+      mediaIds: ["media-2"],
+      type: "media.reorder",
+    });
+
+    expect(reordered.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-2",
+      "media-1",
+      "media-3",
+    ]);
+  });
+
+  it("undoes and redoes media imports", () => {
+    const imported = importImageMedia(createState(), {
+      fileName: "material.png",
+      position: { x: 10, y: 20 },
+      size: { height: 768, unit: "px", width: 1024 },
+    });
+
+    const undone = toolcraftReducer(imported, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(undone.layers).toEqual([]);
+    expect(undone.mediaAssets).toEqual([]);
+    expect(undone.selectedLayerId).toBeNull();
+    expect(redone.layers).toHaveLength(1);
+    expect(redone.mediaAssets).toHaveLength(1);
+    expect(redone.selectedLayerId).toBe("layer-1");
+  });
+});