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

feat: enhance layer masking functionality and brush controls

Browse Source 
- Refactor LayersSheet component to support mask editing state and improve layer visibility handling.
- Introduce functions to collect mask layer IDs and count display layers excluding masks.
- Update BrushControls to include mask view mode options and a Done button for exiting mask editing.
- Modify brush session handling to support brush previews when editing masks.
- Implement a new BrushPreviewRenderer for rendering brush strokes with visual feedback.
- Add document geometry utilities for transforming points and resolving layer bounds.
- Ensure proper cleanup of brush preview on pointer leave and other interactions.
This commit is contained in:
syntaxbullet
2026-07-03 20:49:29 +02:00
parent daaa2a6667
commit 4ad0bb8b2c
33 changed files with 1889 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
input/viewport-pan-store.test.ts
View File

@@ -1,61 +1,101 @@
import { describe, expect, test } from "bun:test";
import type { Dispatch } from "@commands/dispatcher";
import { commandIds } from "@commands/ids";
import { toolCommands } from "@commands/tool";
import { viewportCommands } from "@commands/viewport";
import { createCommandRegistry } from "@commands/registry";
import { createInitialAppState } from "@editor/initial-state";
import { createAppStore } from "@editor/store";
import type { PointerInputEvent } from "./pointer";
import { createViewportPanInputController } from "./viewport-pan";
const registry = createCommandRegistry([...toolCommands, ...viewportCommands]);
const ignoredState = undefined as never;
describe("viewport pan store integration", () => {
test("space key input updates actual store tool mode", () => {
const store = createAppStore(createInitialAppState("Test"), registry);
test("space key input updates actual tool mode", () => {
const store = createInputStore();
const controller = createController(store);
expect(controller.keyDown(keyEvent("Space"))).toBe(true);
expect(store.getState().editor.tools.interactionMode).toEqual({ type: "temporary-pan", previousTool: "select" });
expect(store.state.tools.interactionMode).toEqual({ type: "temporary-pan", previousTool: "select" });
expect(controller.keyUp(keyEvent("Space"))).toBe(true);
expect(store.getState().editor.tools.interactionMode).toEqual({ type: "tool", tool: "select" });
expect(store.state.tools.interactionMode).toEqual({ type: "tool", tool: "select" });
});
test("left-drag only pans while temporary pan is active", () => {
const store = createAppStore(createInitialAppState("Test"), registry);
const store = createInputStore();
const controller = createController(store);
expect(controller.pointerDown(pointerEvent({ buttons: 1, position: { x: 0, y: 0 } }))).toBe(false);
expect(controller.pointerMove(pointerEvent({ buttons: 1, position: { x: 10, y: 0 } }))).toBe(false);
expect(store.getState().editor.viewport.center).toEqual({ x: 0, y: 0 });
expect(store.state.viewport.center).toEqual({ x: 0, y: 0 });
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);
expect(store.getState().editor.viewport.center).toEqual({ x: -10, y: 0 });
expect(store.state.viewport.center).toEqual({ x: -10, y: 0 });
});
test("left-drag pans while pan tool is active", () => {
const store = createAppStore(createInitialAppState("Test"), registry);
const store = createInputStore();
const controller = createController(store);
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);
expect(store.getState().editor.viewport.center).toEqual({ x: -4, y: 2 });
expect(store.state.viewport.center).toEqual({ x: -4, y: 2 });
});
});
function createController(store: ReturnType<typeof createAppStore>) {
type InputToolId = "select" | "crop" | "brush" | "eraser" | "pan";
type InputStore = ReturnType<typeof createInputStore>;
function createInputStore() {
const store = {
state: {
viewport: { center: { x: 0, y: 0 }, zoom: 1 },
tools: {
activeTool: "select" as InputToolId,
interactionMode: { type: "tool" as const, tool: "select" as InputToolId },
},
},
dispatch: ((commandId, payload) => {
switch (commandId) {
case commandIds.toolSetActive:
store.state.tools.activeTool = payload.tool;
store.state.tools.interactionMode = { type: "tool", tool: payload.tool };
break;
case commandIds.toolEnterTemporaryPan:
store.state.tools.interactionMode = { type: "temporary-pan", previousTool: store.state.tools.activeTool };
break;
case commandIds.toolExitTemporaryPan: {
const mode = store.state.tools.interactionMode;
if (mode.type === "temporary-pan") {
store.state.tools.activeTool = mode.previousTool;
store.state.tools.interactionMode = { type: "tool", tool: mode.previousTool };
}
break;
}
case commandIds.viewportPan:
store.state.viewport.center = {
x: store.state.viewport.center.x + payload.delta.x,
y: store.state.viewport.center.y + payload.delta.y,
};
break;
}
return ignoredState;
}) as Dispatch,
};
return store;
}
function createController(store: InputStore) {
return createViewportPanInputController({
globalKeyConsumer: () => false,
globalPointerConsumer: () => false,
getCurrentZoom: () => store.getState().editor.viewport.zoom,
getCurrentZoom: () => store.state.viewport.zoom,
isPanMode: () => {
const mode = store.getState().editor.tools.interactionMode;
const mode = store.state.tools.interactionMode;
return mode.type === "temporary-pan" || (mode.type === "tool" && mode.tool === "pan");
},
dispatch: store.dispatch,