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

fix(tools): respect pan while painting

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 17:56:41 +02:00
parent 64aebbe23a
commit 29c0d1eafd
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
view/canvas/brush.ts
View File

@@ -4,6 +4,7 @@ import type { Vec2D } from "@core/geometry";
import type { Layer } from "@core/layer"; import type { Layer } from "@core/layer";
import type { RasterLayer } from "@core/raster-layer"; import type { RasterLayer } from "@core/raster-layer";
import type { EditorState } from "@editor/state"; import type { EditorState } from "@editor/state";
import { isPanInteractionMode } from "@editor/tools";
import type { AppStore } from "@editor/store"; import type { AppStore } from "@editor/store";
export type BrushSession = { export type BrushSession = {
@@ -13,7 +14,7 @@ export type BrushSession = {
}; };
export function beginBrushSession(document: ImageDocument, editor: EditorState, point: Vec2D): BrushSession | undefined { export function beginBrushSession(document: ImageDocument, editor: EditorState, point: Vec2D): BrushSession | undefined {
if (editor.tools.activeTool !== "brush" && editor.tools.activeTool !== "eraser") return undefined; if (isPanInteractionMode(editor.tools.interactionMode) || (editor.tools.activeTool !== "brush" && editor.tools.activeTool !== "eraser")) return undefined;
const layerId = editor.selection.layerIds[0]; const layerId = editor.selection.layerIds[0];
if (!layerId) return undefined; if (!layerId) return undefined;
const layer = findRasterLayer(document.artboards.flatMap((artboard) => artboard.layers), layerId); const layer = findRasterLayer(document.artboards.flatMap((artboard) => artboard.layers), layerId);

29
view/canvas/useCanvasInput.ts
View File

@@ -62,16 +62,6 @@ export function useCanvasInput(
const handlePointerDown = (event: PointerEvent) => { const handlePointerDown = (event: PointerEvent) => {
const inputEvent = pointerInputEventFromPointerEvent(event); const inputEvent = pointerInputEventFromPointerEvent(event);
const state = store.getState();
const brush = beginBrushSession(state.document, state.editor, viewportPointToDocumentPoint(inputEvent.position, state.editor.viewport));
if (brush) {
brushSessionId.current += 1;
brushSession.current = brush;
canvas.setPointerCapture(event.pointerId);
event.preventDefault();
return;
}
const transformed = transformHandler.pointerDown(inputEvent); const transformed = transformHandler.pointerDown(inputEvent);
if (transformed) { if (transformed) {
canvas.setPointerCapture(event.pointerId); canvas.setPointerCapture(event.pointerId);
@@ -87,6 +77,18 @@ export function useCanvasInput(
return; return;
} }
const state = store.getState();
const brush = (inputEvent.buttons & 1) === 1 && !isPanInteractionMode(state.editor.tools.interactionMode)
? beginBrushSession(state.document, state.editor, viewportPointToDocumentPoint(inputEvent.position, state.editor.viewport))
: undefined;
if (brush) {
brushSessionId.current += 1;
brushSession.current = brush;
canvas.setPointerCapture(event.pointerId);
event.preventDefault();
return;
}
const currentState = store.getState(); const currentState = store.getState();
const selectionToolActive = currentState.editor.tools.activeTool === "select" || currentState.editor.tools.activeTool === "crop"; const selectionToolActive = currentState.editor.tools.activeTool === "select" || currentState.editor.tools.activeTool === "crop";
const selected = selectionToolActive && handleArtboardSelection({ const selected = selectionToolActive && handleArtboardSelection({
@@ -101,6 +103,13 @@ export function useCanvasInput(
const handlePointerMove = (event: PointerEvent) => { const handlePointerMove = (event: PointerEvent) => {
const inputEvent = pointerInputEventFromPointerEvent(event); const inputEvent = pointerInputEventFromPointerEvent(event);
if (brushSession.current) { if (brushSession.current) {
if ((inputEvent.buttons & 1) !== 1 || isPanInteractionMode(store.getState().editor.tools.interactionMode)) {
brushSessionId.current += 1;
brushSession.current = undefined;
event.preventDefault();
return;
}
const activeSessionId = brushSessionId.current; const activeSessionId = brushSessionId.current;
const point = viewportPointToDocumentPoint(inputEvent.position, store.getState().editor.viewport); const point = viewportPointToDocumentPoint(inputEvent.position, store.getState().editor.viewport);
const settings = store.getState().editor.tools.brush; const settings = store.getState().editor.tools.brush;