refactor(commands): centralize command ids

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

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 {