refactor(commands): centralize command ids

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 },

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 });
   });
 });

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<DocumentAddArtboardPayload> = {
-  id: "document.addArtboard",
+  id: commandIds.documentAddArtboard,
   name: "Add artboard",
   execute({ state }, payload) {
     return {

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;

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;
+  [commandIds.documentAddArtboard]: DocumentAddArtboardPayload;
-  "selection.set": SelectionSetPayload;
+  [commandIds.selectionSet]: SelectionSetPayload;
-  "selection.clear": void;
+  [commandIds.selectionClear]: void;
-  "selection.addLayer": SelectionAddLayerPayload;
+  [commandIds.selectionAddLayer]: SelectionAddLayerPayload;
-  "tool.setActive": ToolSetActivePayload;
+  [commandIds.toolSetActive]: ToolSetActivePayload;
-  "tool.enterTemporaryPan": void;
+  [commandIds.toolEnterTemporaryPan]: void;
-  "tool.exitTemporaryPan": void;
+  [commandIds.toolExitTemporaryPan]: void;
-  "viewport.pan": ViewportPanPayload;
+  [commandIds.viewportPan]: ViewportPanPayload;
-  "viewport.setZoom": ViewportSetZoomPayload;
+  [commandIds.viewportSetZoom]: ViewportSetZoomPayload;
-  "viewport.zoomAroundPoint": ViewportZoomAroundPointPayload;
+  [commandIds.viewportZoomAroundPoint]: ViewportZoomAroundPointPayload;
-  "viewport.setSize": ViewportSetSizePayload;
+  [commandIds.viewportSetSize]: ViewportSetSizePayload;
-  "viewport.reset": void;
+  [commandIds.viewportReset]: void;
 };
 
 export type CommandId = keyof CommandPayloads;

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<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;

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<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;

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<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 {

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);

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: commandIds.toolEnterTemporaryPan, payload: undefined },
-      { commandId: "tool.exitTemporaryPan", payload: undefined },
+      { commandId: commandIds.toolExitTemporaryPan, payload: undefined },
     ]);
   });
 

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,

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 } } });
   });
 });
 

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,
   });

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 })}
           >
             <Icon size={22} weight={active ? "fill" : "regular"} />
           </button>

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<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);