syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(commands): centralize command ids

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 11:31:02 +02:00
parent 8320203f11
commit 84a610f019
15 changed files with 66 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/app.ts
View File

@@ -1,4 +1,5 @@
import { documentCommands } from "@commands/document";
import { commandIds } from "@commands/ids";
import { createCommandRegistry } from "@commands/registry";
import { selectionCommands } from "@commands/selection";
import { toolCommands } from "@commands/tool";
@@ -13,7 +14,7 @@ export function createImageStudioApp(options?: { documentName?: string; createDe
const store = createAppStore(createInitialAppState(options?.documentName), registry);
if (options?.createDefaultArtboard !== false) {
store.dispatch("document.addArtboard", {
store.dispatch(commandIds.documentAddArtboard, {
id: crypto.randomUUID(),
name: "Artboard 1",
bounds: { x: -400, y: -300, w: 800, h: 600 },

3
commands/dispatcher.test.ts
View File

@@ -1,6 +1,7 @@
import { describe, expect, test } from "bun:test";
import { createInitialAppState } from "@editor/initial-state";
import { createAppStore } from "@editor/store";
import { commandIds } from "./ids";
import { createCommandRegistry } from "./registry";
import { viewportPanCommand } from "./viewport";
@@ -12,7 +13,7 @@ describe("command dispatcher", () => {
test("dispatch applies command result to store", () => {
const store = createAppStore(createInitialAppState("Test"), createCommandRegistry([viewportPanCommand]));
store.dispatch("viewport.pan", { delta: { x: 3, y: 7 } });
store.dispatch(commandIds.viewportPan, { delta: { x: 3, y: 7 } });
expect(store.getState().editor.viewport.center).toEqual({ x: 3, y: 7 });
});
});

3
commands/document.ts
View File

@@ -1,6 +1,7 @@
import type { Rect } from "@core/geometry";
import type { ArtboardId } from "@core/id";
import type { Command } from "./command";
import { commandIds } from "./ids";
export type DocumentAddArtboardPayload = {
id: ArtboardId;
@@ -9,7 +10,7 @@ export type DocumentAddArtboardPayload = {
};
export const documentAddArtboardCommand: Command<DocumentAddArtboardPayload> = {
id: "document.addArtboard",
id: commandIds.documentAddArtboard,
name: "Add artboard",
execute({ state }, payload) {
return {

14
commands/ids.ts Normal file
View File

@@ -0,0 +1,14 @@
export const commandIds = {
documentAddArtboard: "document.addArtboard",
selectionSet: "selection.set",
selectionClear: "selection.clear",
selectionAddLayer: "selection.addLayer",
toolSetActive: "tool.setActive",
toolEnterTemporaryPan: "tool.enterTemporaryPan",
toolExitTemporaryPan: "tool.exitTemporaryPan",
viewportPan: "viewport.pan",
viewportSetZoom: "viewport.setZoom",
viewportZoomAroundPoint: "viewport.zoomAroundPoint",
viewportSetSize: "viewport.setSize",
viewportReset: "viewport.reset",
} as const;

25
commands/payloads.ts
View File

@@ -1,3 +1,4 @@
import { commandIds } from "./ids";
import type { DocumentAddArtboardPayload } from "./document";
import type { SelectionAddLayerPayload, SelectionSetPayload } from "./selection";
import type { ToolSetActivePayload } from "./tool";
@@ -9,18 +10,18 @@ import type {
} from "./viewport";
export type CommandPayloads = {
"document.addArtboard": DocumentAddArtboardPayload;
"selection.set": SelectionSetPayload;
"selection.clear": void;
"selection.addLayer": SelectionAddLayerPayload;
"tool.setActive": ToolSetActivePayload;
"tool.enterTemporaryPan": void;
"tool.exitTemporaryPan": void;
"viewport.pan": ViewportPanPayload;
"viewport.setZoom": ViewportSetZoomPayload;
"viewport.zoomAroundPoint": ViewportZoomAroundPointPayload;
"viewport.setSize": ViewportSetSizePayload;
"viewport.reset": void;
[commandIds.documentAddArtboard]: DocumentAddArtboardPayload;
[commandIds.selectionSet]: SelectionSetPayload;
[commandIds.selectionClear]: void;
[commandIds.selectionAddLayer]: SelectionAddLayerPayload;
[commandIds.toolSetActive]: ToolSetActivePayload;
[commandIds.toolEnterTemporaryPan]: void;
[commandIds.toolExitTemporaryPan]: void;
[commandIds.viewportPan]: ViewportPanPayload;
[commandIds.viewportSetZoom]: ViewportSetZoomPayload;
[commandIds.viewportZoomAroundPoint]: ViewportZoomAroundPointPayload;
[commandIds.viewportSetSize]: ViewportSetSizePayload;
[commandIds.viewportReset]: void;
};
export type CommandId = keyof CommandPayloads;

7
commands/selection.ts
View File

@@ -1,5 +1,6 @@
import type { ArtboardId, LayerId } from "@core/id";
import type { Command } from "./command";
import { commandIds } from "./ids";
export type SelectionSetPayload = {
artboardId?: ArtboardId;
@@ -11,7 +12,7 @@ export type SelectionAddLayerPayload = {
};
export const selectionSetCommand: Command<SelectionSetPayload> = {
id: "selection.set",
id: commandIds.selectionSet,
name: "Set selection",
execute({ state }, payload) {
return {
@@ -28,7 +29,7 @@ export const selectionSetCommand: Command<SelectionSetPayload> = {
};
export const selectionClearCommand: Command = {
id: "selection.clear",
id: commandIds.selectionClear,
name: "Clear selection",
execute({ state }) {
return {
@@ -42,7 +43,7 @@ export const selectionClearCommand: Command = {
};
export const selectionAddLayerCommand: Command<SelectionAddLayerPayload> = {
id: "selection.addLayer",
id: commandIds.selectionAddLayer,
name: "Add layer to selection",
execute({ state }, payload) {
if (state.editor.selection.layerIds.includes(payload.layerId)) return state;

7
commands/tool.ts
View File

@@ -1,12 +1,13 @@
import type { ToolId } from "@editor/tools";
import type { Command } from "./command";
import { commandIds } from "./ids";
export type ToolSetActivePayload = {
tool: ToolId;
};
export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
id: "tool.setActive",
id: commandIds.toolSetActive,
name: "Set active tool",
execute({ state }, payload) {
return {
@@ -23,7 +24,7 @@ export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
};
export const toolEnterTemporaryPanCommand: Command = {
id: "tool.enterTemporaryPan",
id: commandIds.toolEnterTemporaryPan,
name: "Enter temporary pan",
execute({ state }) {
if (state.editor.tools.interactionMode.type === "temporary-pan") return state;
@@ -42,7 +43,7 @@ export const toolEnterTemporaryPanCommand: Command = {
};
export const toolExitTemporaryPanCommand: Command = {
id: "tool.exitTemporaryPan",
id: commandIds.toolExitTemporaryPan,
name: "Exit temporary pan",
execute({ state }) {
const mode = state.editor.tools.interactionMode;

11
commands/viewport.ts
View File

@@ -1,5 +1,6 @@
import type { Vec2D } from "@core/geometry";
import type { Command } from "./command";
import { commandIds } from "./ids";
export type ViewportPanPayload = {
delta: Vec2D;
@@ -20,7 +21,7 @@ export type ViewportSetSizePayload = {
};
export const viewportPanCommand: Command<ViewportPanPayload> = {
id: "viewport.pan",
id: commandIds.viewportPan,
name: "Pan viewport",
execute({ state }, payload) {
return {
@@ -40,7 +41,7 @@ export const viewportPanCommand: Command<ViewportPanPayload> = {
};
export const viewportSetZoomCommand: Command<ViewportSetZoomPayload> = {
id: "viewport.setZoom",
id: commandIds.viewportSetZoom,
name: "Set viewport zoom",
execute({ state }, payload) {
const zoom = Math.max(0.01, payload.zoom);
@@ -59,7 +60,7 @@ export const viewportSetZoomCommand: Command<ViewportSetZoomPayload> = {
};
export const viewportZoomAroundPointCommand: Command<ViewportZoomAroundPointPayload> = {
id: "viewport.zoomAroundPoint",
id: commandIds.viewportZoomAroundPoint,
name: "Zoom viewport around point",
execute({ state }, payload) {
const viewport = state.editor.viewport;
@@ -91,7 +92,7 @@ export const viewportZoomAroundPointCommand: Command<ViewportZoomAroundPointPayl
};
export const viewportSetSizeCommand: Command<ViewportSetSizePayload> = {
id: "viewport.setSize",
id: commandIds.viewportSetSize,
name: "Set viewport size",
execute({ state }, payload) {
return {
@@ -111,7 +112,7 @@ export const viewportSetSizeCommand: Command<ViewportSetSizePayload> = {
};
export const viewportResetCommand: Command = {
id: "viewport.reset",
id: commandIds.viewportReset,
name: "Reset viewport",
execute({ state }) {
return {

5
input/viewport-pan-store.test.ts
View File

@@ -1,4 +1,5 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import { toolCommands } from "@commands/tool";
import { viewportCommands } from "@commands/viewport";
import { createCommandRegistry } from "@commands/registry";
@@ -29,7 +30,7 @@ describe("viewport pan store integration", () => {
expect(controller.pointerMove(pointerEvent({ buttons: 1, position: { x: 10, y: 0 } }))).toBe(false);
expect(store.getState().editor.viewport.center).toEqual({ x: 0, y: 0 });
store.dispatch("tool.enterTemporaryPan", undefined);
store.dispatch(commandIds.toolEnterTemporaryPan, undefined);
expect(controller.pointerDown(pointerEvent({ buttons: 1, position: { x: 0, y: 0 } }))).toBe(true);
expect(controller.pointerMove(pointerEvent({ buttons: 1, position: { x: 10, y: 0 } }))).toBe(true);
@@ -40,7 +41,7 @@ describe("viewport pan store integration", () => {
const store = createAppStore(createInitialAppState("Test"), registry);
const controller = createController(store);
store.dispatch("tool.setActive", { tool: "pan" });
store.dispatch(commandIds.toolSetActive, { tool: "pan" });
expect(controller.pointerDown(pointerEvent({ buttons: 1, position: { x: 0, y: 0 } }))).toBe(true);
expect(controller.pointerMove(pointerEvent({ buttons: 1, position: { x: 4, y: -2 } }))).toBe(true);

5
input/viewport-pan.test.ts
View File

@@ -1,4 +1,5 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import { createViewportPanInputController } from "./viewport-pan";
const ignoredState = undefined as never;
@@ -20,8 +21,8 @@ describe("viewport pan input controller", () => {
expect(controller.keyDown(keyEvent("Space"))).toBe(true);
expect(controller.keyUp(keyEvent("Space"))).toBe(true);
expect(dispatched).toEqual([
{ commandId: "tool.enterTemporaryPan", payload: undefined },
{ commandId: "tool.exitTemporaryPan", payload: undefined },
{ commandId: commandIds.toolEnterTemporaryPan, payload: undefined },
{ commandId: commandIds.toolExitTemporaryPan, payload: undefined },
]);
});

5
input/viewport-pan.ts
View File

@@ -1,4 +1,5 @@
import type { Dispatch } from "@commands/dispatcher";
import { commandIds } from "@commands/ids";
import type { GlobalKeybindConsumer, KeybindEvent } from "./keyboard";
import type { GlobalPointerConsumer, PointerInputEvent } from "./pointer";
import { createViewportPointerPanHandler } from "./viewport";
@@ -31,13 +32,13 @@ export function createViewportPanInputController(options: {
if (options.globalKeyConsumer(event)) return true;
if (event.code !== "Space") return false;
options.dispatch("tool.enterTemporaryPan", undefined);
options.dispatch(commandIds.toolEnterTemporaryPan, undefined);
return true;
},
keyUp(event) {
if (event.code !== "Space") return false;
options.dispatch("tool.exitTemporaryPan", undefined);
options.dispatch(commandIds.toolExitTemporaryPan, undefined);
return true;
},
pointerDown: pointerPan.pointerDown,

5
input/viewport.test.ts
View File

@@ -1,4 +1,5 @@
import { describe, expect, test } from "bun:test";
import { commandIds } from "@commands/ids";
import { createViewportPointerPanHandler, handleViewportWheel } from "./viewport";
const ignoredState = undefined as never;
@@ -17,7 +18,7 @@ describe("viewport input", () => {
});
expect(consumed).toBe(true);
expect(dispatched[0]).toEqual({ commandId: "viewport.zoomAroundPoint", payload: { zoom: Math.exp(0.1), point: { x: 10, y: 20 } } });
expect(dispatched[0]).toEqual({ commandId: commandIds.viewportZoomAroundPoint, payload: { zoom: Math.exp(0.1), point: { x: 10, y: 20 } } });
});
test("global wheel consumer prevents command dispatch", () => {
@@ -49,7 +50,7 @@ describe("viewport input", () => {
expect(pan.pointerDown(basePointer({ buttons: 4, position: { x: 10, y: 10 } }))).toBe(true);
expect(pan.pointerMove(basePointer({ buttons: 4, position: { x: 14, y: 6 } }))).toBe(true);
expect(dispatched[0]).toEqual({ commandId: "viewport.pan", payload: { delta: { x: -2, y: 2 } } });
expect(dispatched[0]).toEqual({ commandId: commandIds.viewportPan, payload: { delta: { x: -2, y: 2 } } });
});
});

5
input/viewport.ts
View File

@@ -1,4 +1,5 @@
import type { Dispatch } from "@commands/dispatcher";
import { commandIds } from "@commands/ids";
import type { GlobalPointerConsumer, GlobalWheelConsumer, PointerInputEvent, WheelInputEvent } from "./pointer";
export type ViewportPointerPanHandler = {
@@ -37,7 +38,7 @@ export function createViewportPointerPanHandler(options: {
};
lastPosition = event.position;
options.dispatch("viewport.pan", {
options.dispatch(commandIds.viewportPan, {
delta: {
x: -screenDelta.x / zoom,
y: -screenDelta.y / zoom,
@@ -69,7 +70,7 @@ export function handleViewportWheel(options: {
if (options.globalConsumer(options.event)) return true;
const zoomFactor = Math.exp(-options.event.delta.y * 0.001);
options.dispatch("viewport.zoomAroundPoint", {
options.dispatch(commandIds.viewportZoomAroundPoint, {
zoom: options.currentZoom * zoomFactor,
point: options.event.position,
});

3
view/ToolOverlay.tsx
View File

@@ -1,4 +1,5 @@
import { Cursor, Hand } from "@phosphor-icons/react";
import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import type { InteractionMode, ToolId } from "@editor/tools";
import { availableToolIds } from "@editor/tools";
@@ -28,7 +29,7 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl
aria-pressed={active}
title={labelForTool(tool)}
className={buttonClass(active)}
onClick={() => dispatch("tool.setActive", { tool })}
onClick={() => dispatch(commandIds.toolSetActive, { tool })}
>
<Icon size={22} weight={active ? "fill" : "regular"} />
</button>

3
view/canvas/useCanvasResize.ts
View File

@@ -1,5 +1,6 @@
import { useEffect, type RefObject } from "react";
import type { Dispatch } from "@commands/dispatcher";
import { commandIds } from "@commands/ids";
export function useCanvasResize(canvasRef: RefObject<HTMLCanvasElement | null>, dispatch: Dispatch) {
useEffect(() => {
@@ -11,7 +12,7 @@ export function useCanvasResize(canvasRef: RefObject<HTMLCanvasElement | null>,
const width = Math.floor(entry.contentRect.width);
const height = Math.floor(entry.contentRect.height);
dispatch("viewport.setSize", { w: width, h: height });
dispatch(commandIds.viewportSetSize, { w: width, h: height });
});
resizeObserver.observe(canvas);