From 84a610f019621996e24c4d2cfa8924498421b757 Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Fri, 3 Jul 2026 11:31:02 +0200 Subject: [PATCH] refactor(commands): centralize command ids --- app/app.ts | 3 ++- commands/dispatcher.test.ts | 3 ++- commands/document.ts | 3 ++- commands/ids.ts | 14 ++++++++++++++ commands/payloads.ts | 25 +++++++++++++------------ commands/selection.ts | 7 ++++--- commands/tool.ts | 7 ++++--- commands/viewport.ts | 11 ++++++----- input/viewport-pan-store.test.ts | 5 +++-- input/viewport-pan.test.ts | 5 +++-- input/viewport-pan.ts | 5 +++-- input/viewport.test.ts | 5 +++-- input/viewport.ts | 5 +++-- view/ToolOverlay.tsx | 3 ++- view/canvas/useCanvasResize.ts | 3 ++- 15 files changed, 66 insertions(+), 38 deletions(-) create mode 100644 commands/ids.ts diff --git a/app/app.ts b/app/app.ts index 0f0e723..3e48fdf 100644 --- a/app/app.ts +++ b/app/app.ts @@ -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 }, diff --git a/commands/dispatcher.test.ts b/commands/dispatcher.test.ts index 83e7a32..99dedec 100644 --- a/commands/dispatcher.test.ts +++ b/commands/dispatcher.test.ts @@ -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 }); }); }); diff --git a/commands/document.ts b/commands/document.ts index 698cedf..488665d 100644 --- a/commands/document.ts +++ b/commands/document.ts @@ -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 = { - id: "document.addArtboard", + id: commandIds.documentAddArtboard, name: "Add artboard", execute({ state }, payload) { return { diff --git a/commands/ids.ts b/commands/ids.ts new file mode 100644 index 0000000..e55bb2a --- /dev/null +++ b/commands/ids.ts @@ -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; diff --git a/commands/payloads.ts b/commands/payloads.ts index 62cd7c9..e5995cb 100644 --- a/commands/payloads.ts +++ b/commands/payloads.ts @@ -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; diff --git a/commands/selection.ts b/commands/selection.ts index 4bc30e6..cb8f69f 100644 --- a/commands/selection.ts +++ b/commands/selection.ts @@ -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 = { - id: "selection.set", + id: commandIds.selectionSet, name: "Set selection", execute({ state }, payload) { return { @@ -28,7 +29,7 @@ export const selectionSetCommand: Command = { }; 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 = { - id: "selection.addLayer", + id: commandIds.selectionAddLayer, name: "Add layer to selection", execute({ state }, payload) { if (state.editor.selection.layerIds.includes(payload.layerId)) return state; diff --git a/commands/tool.ts b/commands/tool.ts index b1a72ce..d77d244 100644 --- a/commands/tool.ts +++ b/commands/tool.ts @@ -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 = { - id: "tool.setActive", + id: commandIds.toolSetActive, name: "Set active tool", execute({ state }, payload) { return { @@ -23,7 +24,7 @@ export const toolSetActiveCommand: Command = { }; 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; diff --git a/commands/viewport.ts b/commands/viewport.ts index 34fd0a2..1abfef8 100644 --- a/commands/viewport.ts +++ b/commands/viewport.ts @@ -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 = { - id: "viewport.pan", + id: commandIds.viewportPan, name: "Pan viewport", execute({ state }, payload) { return { @@ -40,7 +41,7 @@ export const viewportPanCommand: Command = { }; export const viewportSetZoomCommand: Command = { - 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 = { }; export const viewportZoomAroundPointCommand: Command = { - 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 = { - id: "viewport.setSize", + id: commandIds.viewportSetSize, name: "Set viewport size", execute({ state }, payload) { return { @@ -111,7 +112,7 @@ export const viewportSetSizeCommand: Command = { }; export const viewportResetCommand: Command = { - id: "viewport.reset", + id: commandIds.viewportReset, name: "Reset viewport", execute({ state }) { return { diff --git a/input/viewport-pan-store.test.ts b/input/viewport-pan-store.test.ts index 93c3508..a58dcc7 100644 --- a/input/viewport-pan-store.test.ts +++ b/input/viewport-pan-store.test.ts @@ -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); diff --git a/input/viewport-pan.test.ts b/input/viewport-pan.test.ts index 8fb0aed..64cffde 100644 --- a/input/viewport-pan.test.ts +++ b/input/viewport-pan.test.ts @@ -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 }, ]); }); diff --git a/input/viewport-pan.ts b/input/viewport-pan.ts index 3989f98..a783eba 100644 --- a/input/viewport-pan.ts +++ b/input/viewport-pan.ts @@ -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, diff --git a/input/viewport.test.ts b/input/viewport.test.ts index 760cdd6..bbb8d51 100644 --- a/input/viewport.test.ts +++ b/input/viewport.test.ts @@ -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 } } }); }); }); diff --git a/input/viewport.ts b/input/viewport.ts index 1139871..701590b 100644 --- a/input/viewport.ts +++ b/input/viewport.ts @@ -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, }); diff --git a/view/ToolOverlay.tsx b/view/ToolOverlay.tsx index 0086044..2e44434 100644 --- a/view/ToolOverlay.tsx +++ b/view/ToolOverlay.tsx @@ -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 })} > diff --git a/view/canvas/useCanvasResize.ts b/view/canvas/useCanvasResize.ts index 45a2746..7df7608 100644 --- a/view/canvas/useCanvasResize.ts +++ b/view/canvas/useCanvasResize.ts @@ -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, dispatch: Dispatch) { useEffect(() => { @@ -11,7 +12,7 @@ export function useCanvasResize(canvasRef: RefObject, 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);