From 4590b47e190d21c98c020d3ac5f381ec4b34e270 Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Fri, 3 Jul 2026 21:15:31 +0200 Subject: [PATCH] Remove crop tool --- commands/tool.test.ts | 4 ++-- editor/tools.ts | 2 +- input/transform-controls.test.ts | 19 ------------------- input/transform-controls.ts | 7 +++---- input/viewport-pan-store.test.ts | 2 +- view/App.tsx | 1 - view/LayersSheet.tsx | 7 +------ view/ToolOverlay.tsx | 4 +--- view/canvas/cursor.ts | 1 - view/canvas/useCanvasInput.ts | 2 +- view/toolLabels.ts | 2 -- 11 files changed, 10 insertions(+), 41 deletions(-) diff --git a/commands/tool.test.ts b/commands/tool.test.ts index 208229e..6ee177c 100644 --- a/commands/tool.test.ts +++ b/commands/tool.test.ts @@ -6,8 +6,8 @@ const defaultBrush = { color: "#111827", size: 8, hardness: 100 }; describe("tool commands", () => { test("sets active tool", () => { - const next = toolSetActiveCommand.execute({ state: createInitialAppState("Test") }, { tool: "crop" }); - expect(next.editor.tools).toEqual({ activeTool: "crop", interactionMode: { type: "tool", tool: "crop" }, brush: defaultBrush }); + const next = toolSetActiveCommand.execute({ state: createInitialAppState("Test") }, { tool: "brush" }); + expect(next.editor.tools).toEqual({ activeTool: "brush", interactionMode: { type: "tool", tool: "brush" }, brush: defaultBrush }); }); test("sets brush settings", () => { diff --git a/editor/tools.ts b/editor/tools.ts index 706f088..d4412f3 100644 --- a/editor/tools.ts +++ b/editor/tools.ts @@ -1,4 +1,4 @@ -export const availableToolIds = ["select", "crop", "brush", "eraser", "pan"] as const; +export const availableToolIds = ["select", "brush", "eraser", "pan"] as const; export type ToolId = (typeof availableToolIds)[number]; diff --git a/input/transform-controls.test.ts b/input/transform-controls.test.ts index fa2c521..53b824c 100644 --- a/input/transform-controls.test.ts +++ b/input/transform-controls.test.ts @@ -39,25 +39,6 @@ describe("transform controls input", () => { expect(dispatched).toEqual([]); }); - test("crop tool resizes from handles but does not move body", () => { - const state = createState({ - selection: { artboardId: "a1", layerIds: [] }, - tools: { activeTool: "crop", interactionMode: { type: "tool", tool: "crop" } }, - }); - const dispatched: unknown[] = []; - const controller = createTransformControlsInputController({ - getDocument: () => state.document, - getEditor: () => state.editor, - dispatch: (commandId, payload) => { - dispatched.push({ commandId, payload }); - return ignoredState; - }, - }); - - expect(controller.pointerDown(pointerEvent({ position: { x: 100, y: 100 }, buttons: 1 }))).toBe(false); - expect(controller.pointerDown(pointerEvent({ position: { x: 150, y: 150 }, buttons: 1 }))).toBe(true); - }); - test("dispatches transform lifecycle for selected artboard", () => { let state = createState({ selection: { artboardId: "a1", layerIds: [] } }); const dispatched: unknown[] = []; diff --git a/input/transform-controls.ts b/input/transform-controls.ts index b7cedd4..8a38199 100644 --- a/input/transform-controls.ts +++ b/input/transform-controls.ts @@ -16,7 +16,7 @@ import type { PointerInputEvent } from "./pointer"; type TransformHandle = "body" | "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w"; -type InputToolId = "select" | "crop" | "brush" | "eraser" | "pan"; +type InputToolId = "select" | "brush" | "eraser" | "pan"; type InputInteractionMode = | { type: "tool"; tool: InputToolId } @@ -48,8 +48,7 @@ export function createTransformControlsInputController(options: { if (event.pointerType !== "mouse" || (event.buttons & 1) !== 1) return false; const editor = options.getEditor(); - const cropToolActive = editor.tools.activeTool === "crop"; - if ((editor.tools.activeTool !== "select" && !cropToolActive) || isPanInteractionMode(editor.tools.interactionMode)) return false; + if (editor.tools.activeTool !== "select" || isPanInteractionMode(editor.tools.interactionMode)) return false; const document = options.getDocument(); const target = selectedTransformTarget(document, editor.selection); @@ -59,7 +58,7 @@ export function createTransformControlsInputController(options: { if (!bounds) return false; const handle = hitTestArtboardTransformHandle(event.position, bounds, editor.viewport); - if (!handle || (cropToolActive && handle === "body")) return false; + if (!handle) return false; options.dispatch(commandIds.transformBegin, { target, diff --git a/input/viewport-pan-store.test.ts b/input/viewport-pan-store.test.ts index 77c211b..2a77f62 100644 --- a/input/viewport-pan-store.test.ts +++ b/input/viewport-pan-store.test.ts @@ -45,7 +45,7 @@ describe("viewport pan store integration", () => { }); }); -type InputToolId = "select" | "crop" | "brush" | "eraser" | "pan"; +type InputToolId = "select" | "brush" | "eraser" | "pan"; type InputStore = ReturnType; diff --git a/view/App.tsx b/view/App.tsx index 654678a..4605783 100644 --- a/view/App.tsx +++ b/view/App.tsx @@ -122,7 +122,6 @@ export function App({ app }: AppProps) { maskEdit={state.editor.maskEdit} open={layersOpen} dispatch={app.store.dispatch} - onClose={() => setLayersOpen(false)} />
void; }; -export function LayersSheet({ document, selection, maskEdit, open, dispatch, onClose }: LayersSheetProps) { +export function LayersSheet({ document, selection, maskEdit, open, dispatch }: LayersSheetProps) { const selectedArtboardId = selection.artboardId ?? document.artboards[0]?.id; const selectedLayer = findLayerInfoInDocument(document, selection.layerIds[0]); const canGroup = Boolean(selection.artboardId && selection.layerIds.length > 0); @@ -491,7 +490,3 @@ function createGroup(name: string): Layer { function toolbarButtonClass() { return "inline-flex h-8 items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 text-white/75 transition hover:border-white/20 hover:bg-white/10 hover:text-white disabled:pointer-events-none disabled:opacity-35"; } - -function iconButtonClass() { - return "grid size-8 place-items-center rounded-full text-white/70 transition hover:bg-white/10 hover:text-white focus:outline-none focus-visible:outline-none"; -} diff --git a/view/ToolOverlay.tsx b/view/ToolOverlay.tsx index 9aa79bc..a55f58c 100644 --- a/view/ToolOverlay.tsx +++ b/view/ToolOverlay.tsx @@ -1,4 +1,4 @@ -import { Crop, Cursor, Eraser, Hand, PaintBrush } from "@phosphor-icons/react"; +import { Cursor, Eraser, Hand, PaintBrush } from "@phosphor-icons/react"; import { commandIds } from "@commands/ids"; import type { AppStore } from "@editor/store"; import type { InteractionMode, ToolId } from "@editor/tools"; @@ -41,8 +41,6 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl function iconForTool(tool: ToolId) { switch (tool) { - case "crop": - return Crop; case "brush": return PaintBrush; case "eraser": diff --git a/view/canvas/cursor.ts b/view/canvas/cursor.ts index 9c10447..4a94c7b 100644 --- a/view/canvas/cursor.ts +++ b/view/canvas/cursor.ts @@ -6,6 +6,5 @@ export function canvasCursorClass(interactionMode: InteractionMode, input: Canva if (input.isPanning) return "cursor-grabbing"; if (isPanInteractionMode(interactionMode)) return "cursor-grab"; if (interactionMode.type === "tool" && (interactionMode.tool === "brush" || interactionMode.tool === "eraser")) return hasBrushPreview ? "cursor-none" : "cursor-crosshair"; - if (interactionMode.type === "tool" && interactionMode.tool === "crop") return "cursor-crosshair"; return "cursor-default"; } diff --git a/view/canvas/useCanvasInput.ts b/view/canvas/useCanvasInput.ts index bbb34f9..27207c8 100644 --- a/view/canvas/useCanvasInput.ts +++ b/view/canvas/useCanvasInput.ts @@ -117,7 +117,7 @@ export function useCanvasInput( } const currentState = store.getState(); - const selectionToolActive = currentState.editor.tools.activeTool === "select" || currentState.editor.tools.activeTool === "crop"; + const selectionToolActive = currentState.editor.tools.activeTool === "select"; const selected = selectionToolActive && handleArtboardSelection({ event: inputEvent, document: currentState.document, diff --git a/view/toolLabels.ts b/view/toolLabels.ts index 114acb5..98c6507 100644 --- a/view/toolLabels.ts +++ b/view/toolLabels.ts @@ -2,8 +2,6 @@ import type { ToolId } from "@editor/tools"; export function labelForTool(tool: ToolId): string { switch (tool) { - case "crop": - return "Crop"; case "brush": return "Brush"; case "eraser":