feat(tools): add crop tool

view/ToolOverlay.tsx

@@ -1,4 +1,4 @@
-import { Cursor, Hand } from "@phosphor-icons/react";
+import { Crop, Cursor, Hand } from "@phosphor-icons/react";
 import { commandIds } from "@commands/ids";
 import type { AppStore } from "@editor/store";
 import type { InteractionMode, ToolId } from "@editor/tools";
@@ -41,6 +41,8 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl
 
 function iconForTool(tool: ToolId) {
   switch (tool) {
+    case "crop":
+      return Crop;
     case "pan":
       return Hand;
     case "select":

view/canvas/cursor.ts

@@ -5,5 +5,6 @@ import type { CanvasInputState } from "./useCanvasInput";
 export function canvasCursorClass(interactionMode: InteractionMode, input: CanvasInputState) {
   if (input.isPanning) return "cursor-grabbing";
   if (isPanInteractionMode(interactionMode)) return "cursor-grab";
+  if (interactionMode.type === "tool" && interactionMode.tool === "crop") return "cursor-crosshair";
   return "cursor-default";
 }

view/canvas/useCanvasInput.ts

@@ -75,7 +75,8 @@ export function useCanvasInput(
       }
 
       const state = store.getState();
-      const selected = state.editor.tools.activeTool === "select" && handleArtboardSelection({
+      const selectionToolActive = state.editor.tools.activeTool === "select" || state.editor.tools.activeTool === "crop";
+      const selected = selectionToolActive && handleArtboardSelection({
         event: inputEvent,
         document: state.document,
         viewport: state.editor.viewport,

view/toolLabels.ts

@@ -1,5 +1,12 @@
 import type { ToolId } from "@editor/tools";
 
 export function labelForTool(tool: ToolId): string {
-  return tool === "pan" ? "Pan" : "Select";
+  switch (tool) {
+    case "crop":
+      return "Crop";
+    case "pan":
+      return "Pan";
+    case "select":
+      return "Select";
+  }
 }