syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tools): add crop tool

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 17:32:46 +02:00
parent 5e4cde4df9
commit c946fb4c93
8 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
input/transform-controls.test.ts
View File

@@ -44,6 +44,34 @@ describe("transform controls input", () => {
expect(dispatched).toEqual([]);
});
test("crop tool resizes from handles but does not move body", () => {
const state = {
...createInitialAppState("Test"),
document: {
...createInitialAppState("Test").document,
artboards: [{ id: "a1", name: "Artboard", bounds: { x: -50, y: -50, w: 100, h: 100 }, backgroundColor: "transparent", visible: true, locked: false, layers: [] }],
},
editor: {
...createInitialAppState("Test").editor,
viewport: { center: { x: 0, y: 0 }, zoom: 1, rotation: 0, size: { w: 200, h: 200 } },
selection: { artboardId: "a1", layerIds: [] },
tools: { activeTool: "crop" as const, interactionMode: { type: "tool" as const, tool: "crop" as const } },
},
};
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 = {
...createInitialAppState("Test"),

5
input/transform-controls.ts
View File

@@ -25,7 +25,8 @@ export function createTransformControlsInputController(options: {
if (event.pointerType !== "mouse" || (event.buttons & 1) !== 1) return false;
const editor = options.getEditor();
if (editor.tools.activeTool !== "select" || isPanInteractionMode(editor.tools.interactionMode)) return false;
const cropToolActive = editor.tools.activeTool === "crop";
if ((editor.tools.activeTool !== "select" && !cropToolActive) || isPanInteractionMode(editor.tools.interactionMode)) return false;
const document = options.getDocument();
const target = selectedTransformTarget(document, editor.selection);
@@ -35,7 +36,7 @@ export function createTransformControlsInputController(options: {
if (!bounds) return false;
const handle = hitTestArtboardTransformHandle(event.position, bounds, editor.viewport);
if (!handle) return false;
if (!handle || (cropToolActive && handle === "body")) return false;
options.dispatch(commandIds.transformBegin, {
target,