114 lines
5.2 KiB
TypeScript
114 lines
5.2 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import type { CanvasState } from "@dada/shared-contracts";
|
|
|
|
type CanvasElement = CanvasState["elements"][number];
|
|
|
|
import {
|
|
CanvasElementController,
|
|
createStaticStickerElement,
|
|
type CanvasElementIdentity,
|
|
} from "../../apps/web/src/editor-elements.js";
|
|
import { createEditorCanvasState } from "../../apps/web/src/editor-canvas.js";
|
|
|
|
function identity(index: number): CanvasElementIdentity {
|
|
return {
|
|
createdAt: "2026-08-03T00:00:00.000Z",
|
|
elementId: `00000000-0000-4000-8000-${String(index).padStart(12, "0")}`,
|
|
};
|
|
}
|
|
|
|
function sticker(index: number, overrides: Partial<CanvasElement> = {}) {
|
|
return createStaticStickerElement({
|
|
assetId: `STK${String(index).padStart(3, "0")}`,
|
|
identity: identity(index),
|
|
position: { x: 0.5, y: 0.5 },
|
|
resourceVersion: "fixture-v1",
|
|
zIndex: index - 1,
|
|
...overrides,
|
|
});
|
|
}
|
|
|
|
function state(elements: CanvasElement[] = []): CanvasState {
|
|
return { ...createEditorCanvasState({ assetId: null, ratio: "3:4" }), elements };
|
|
}
|
|
|
|
describe("TDD-WP4-CAN-001 canvas selection and limit", () => {
|
|
it("keeps fifty editable elements and rejects the fifty-first without mutation", () => {
|
|
const controller = new CanvasElementController(state());
|
|
for (let index = 1; index <= 50; index += 1) controller.add(sticker(index));
|
|
const before = controller.value;
|
|
expect(before.elements).toHaveLength(50);
|
|
expect(() => controller.add(sticker(51))).toThrowError("canvas_element_limit_reached");
|
|
expect(controller.value).toEqual(before);
|
|
});
|
|
|
|
it("cycles overlapping hits, resets after pointer movement, and exposes only point candidates", () => {
|
|
const controller = new CanvasElementController(state([
|
|
sticker(1, { position: { x: 0.5, y: 0.5 }, z_index: 0 }),
|
|
sticker(2, { position: { x: 0.5, y: 0.5 }, z_index: 1 }),
|
|
sticker(3, { position: { x: 0.8, y: 0.8 }, z_index: 2 }),
|
|
]));
|
|
expect(controller.selectAt({ x: 0.5, y: 0.5 })).toEqual([identity(2).elementId]);
|
|
expect(controller.selectAt({ x: 0.5, y: 0.5 })).toEqual([identity(1).elementId]);
|
|
controller.pointerMoved();
|
|
expect(controller.selectAt({ x: 0.5, y: 0.5 })).toEqual([identity(2).elementId]);
|
|
expect(controller.candidatesAt({ x: 0.5, y: 0.5 }).map((entry) => entry.element_id)).toEqual([
|
|
identity(2).elementId,
|
|
identity(1).elementId,
|
|
]);
|
|
});
|
|
|
|
it("supports Shift/multi-mode toggles and marquee selection without creating a layer panel", () => {
|
|
const controller = new CanvasElementController(state([
|
|
sticker(1, { position: { x: 0.2, y: 0.2 }, z_index: 0 }),
|
|
sticker(2, { position: { x: 0.4, y: 0.4 }, z_index: 1 }),
|
|
sticker(3, { position: { x: 0.8, y: 0.8 }, z_index: 2 }),
|
|
]));
|
|
controller.selectAt({ x: 0.2, y: 0.2 });
|
|
controller.selectAt({ x: 0.4, y: 0.4 }, { append: true });
|
|
expect(controller.selectedIds).toEqual([identity(1).elementId, identity(2).elementId]);
|
|
controller.selectAt({ x: 0.2, y: 0.2 }, { append: true });
|
|
expect(controller.selectedIds).toEqual([identity(2).elementId]);
|
|
expect(controller.marqueeSelect({ height: 0.5, width: 0.5, x: 0.1, y: 0.1 })).toEqual([
|
|
identity(1).elementId,
|
|
identity(2).elementId,
|
|
]);
|
|
});
|
|
});
|
|
|
|
describe("TDD-WP4-STK-001 sticker transformations", () => {
|
|
it("moves with center snapping and applies scale, rotation, flip and opacity", () => {
|
|
const controller = new CanvasElementController(state([sticker(1, { position: { x: 0.42, y: 0.48 } })]));
|
|
controller.selectById(identity(1).elementId);
|
|
const moved = controller.moveSelected({ x: 0.075, y: 0.015 });
|
|
expect(moved.guides).toEqual(expect.arrayContaining(["canvas-center-x", "canvas-center-y"]));
|
|
expect(controller.value.elements[0]?.position).toEqual({ x: 0.5, y: 0.5 });
|
|
expect(controller.moveSelected({ x: 0.01, y: 0 }, { snap: false }).guides).toEqual([]);
|
|
expect(controller.value.elements[0]?.position).toEqual({ x: 0.51, y: 0.5 });
|
|
controller.scaleSelected(1.5);
|
|
controller.rotateSelected(45);
|
|
controller.flipSelectedHorizontal();
|
|
controller.setSelectedOpacity(0.35);
|
|
expect(controller.value.elements[0]).toMatchObject({
|
|
opacity: 0.35,
|
|
rotation: 45,
|
|
scale: { x: 1.5, y: 1.5 },
|
|
style_parameters: { flip_horizontal: true },
|
|
});
|
|
});
|
|
|
|
it("duplicates, reorders and deletes selected stickers while preserving stable resource identity", () => {
|
|
const controller = new CanvasElementController(state([sticker(1), sticker(2, { position: { x: 0.7, y: 0.7 } })]));
|
|
controller.selectById(identity(1).elementId);
|
|
controller.duplicateSelected(() => identity(10));
|
|
const duplicate = controller.value.elements.find((entry) => entry.element_id === identity(10).elementId);
|
|
expect(duplicate).toMatchObject({ resource_version: "fixture-v1", template_or_asset_id: "STK001" });
|
|
controller.changeLayer("back");
|
|
expect(controller.value.elements.find((entry) => entry.element_id === identity(10).elementId)?.z_index).toBe(0);
|
|
controller.changeLayer("front");
|
|
expect(controller.value.elements.find((entry) => entry.element_id === identity(10).elementId)?.z_index).toBe(2);
|
|
controller.deleteSelected();
|
|
expect(controller.value.elements.map((entry) => entry.element_id)).not.toContain(identity(10).elementId);
|
|
});
|
|
});
|