99 lines
4.3 KiB
TypeScript
99 lines
4.3 KiB
TypeScript
import { describe, expect, test } from "bun:test";
|
|
import { createInitialAppState } from "@editor/initial-state";
|
|
import { toolEnterMaskEditCommand, toolEnterTemporaryPanCommand, toolExitMaskEditCommand, toolExitTemporaryPanCommand, toolSetActiveCommand, toolSetBrushPreviewCommand, toolSetBrushSettingsCommand, toolSetBrushStrokePreviewCommand, toolSetMaskViewModeCommand } from "./tool";
|
|
|
|
const defaultBrush = { color: "#111827", size: 8, hardness: 100 };
|
|
|
|
describe("tool commands", () => {
|
|
test("sets active tool", () => {
|
|
const next = toolSetActiveCommand.execute({ state: createInitialAppState("Test") }, { tool: "brush" });
|
|
expect(next.editor.tools).toEqual({ activeTool: "brush", interactionMode: { type: "tool", tool: "brush" }, brush: defaultBrush });
|
|
});
|
|
|
|
test("sets brush settings", () => {
|
|
const next = toolSetBrushSettingsCommand.execute({ state: createInitialAppState("Test") }, { color: "#ff0000", size: 24, hardness: 50 });
|
|
|
|
expect(next.editor.tools.brush).toEqual({ color: "#ff0000", size: 24, hardness: 50 });
|
|
});
|
|
|
|
test("sets and clears brush preview", () => {
|
|
const showing = toolSetBrushPreviewCommand.execute({ state: createInitialAppState("Test") }, { position: { x: 10, y: 20 } });
|
|
const cleared = toolSetBrushPreviewCommand.execute({ state: showing }, undefined);
|
|
|
|
expect(showing.editor.brushPreview).toEqual({ position: { x: 10, y: 20 } });
|
|
expect(cleared.editor.brushPreview).toBeUndefined();
|
|
});
|
|
|
|
test("sets and clears brush stroke preview", () => {
|
|
const showing = toolSetBrushStrokePreviewCommand.execute({ state: createInitialAppState("Test") }, { layerId: "layer", assetId: "asset", source: "preview" });
|
|
const cleared = toolSetBrushStrokePreviewCommand.execute({ state: showing }, undefined);
|
|
|
|
expect(showing.editor.brushStrokePreview).toEqual({ layerId: "layer", assetId: "asset", source: "preview" });
|
|
expect(cleared.editor.brushStrokePreview).toBeUndefined();
|
|
});
|
|
|
|
test("enters and exits mask edit", () => {
|
|
const editing = toolEnterMaskEditCommand.execute({ state: stateWithMask() }, { targetLayerId: "target", maskLayerId: "mask" });
|
|
const exited = toolExitMaskEditCommand.execute({ state: editing }, undefined);
|
|
|
|
expect(editing.editor.maskEdit).toEqual({ targetLayerId: "target", maskLayerId: "mask" });
|
|
expect(editing.editor.selection).toEqual({ artboardId: "a1", layerIds: ["target"] });
|
|
expect(editing.editor.tools.activeTool).toBe("brush");
|
|
expect(exited.editor.maskEdit).toBeUndefined();
|
|
});
|
|
|
|
test("sets mask view mode while editing a mask", () => {
|
|
const editing = toolEnterMaskEditCommand.execute({ state: stateWithMask() }, { targetLayerId: "target", maskLayerId: "mask" });
|
|
const alpha = toolSetMaskViewModeCommand.execute({ state: editing }, { mode: "alpha" });
|
|
const ignored = toolSetMaskViewModeCommand.execute({ state: createInitialAppState("Test") }, { mode: "blackWhite" });
|
|
|
|
expect(alpha.editor.maskEdit).toEqual({ targetLayerId: "target", maskLayerId: "mask", viewMode: "alpha" });
|
|
expect(ignored.editor.maskEdit).toBeUndefined();
|
|
});
|
|
|
|
test("enters and exits temporary pan", () => {
|
|
const initial = createInitialAppState("Test");
|
|
const panning = toolEnterTemporaryPanCommand.execute({ state: initial }, undefined);
|
|
const restored = toolExitTemporaryPanCommand.execute({ state: panning }, undefined);
|
|
|
|
expect(panning.editor.tools).toEqual({ activeTool: "select", interactionMode: { type: "temporary-pan", previousTool: "select" }, brush: defaultBrush });
|
|
expect(restored.editor.tools).toEqual(initial.editor.tools);
|
|
});
|
|
});
|
|
|
|
function stateWithMask() {
|
|
return {
|
|
...createInitialAppState("Test"),
|
|
document: {
|
|
...createInitialAppState("Test").document,
|
|
artboards: [
|
|
{
|
|
id: "a1",
|
|
name: "Artboard 1",
|
|
bounds: { x: 0, y: 0, w: 320, h: 240 },
|
|
backgroundColor: "transparent" as const,
|
|
visible: true,
|
|
locked: false,
|
|
layers: [
|
|
raster("mask", "Mask"),
|
|
{ ...raster("target", "Target"), clippingMask: { maskLayerId: "mask" } },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
}
|
|
|
|
function raster(id: string, name: string) {
|
|
return {
|
|
id,
|
|
type: "raster" as const,
|
|
name,
|
|
visible: true,
|
|
locked: false,
|
|
opacity: 1,
|
|
assetId: `${id}-asset`,
|
|
transform: { position: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, rotation: 0 },
|
|
};
|
|
}
|