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

Add pan tool toolbar

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 11:27:48 +02:00
parent b5c7f87a20
commit 8320203f11
9 changed files with 168 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
view/canvas/cursor.ts
View File

@@ -1,8 +1,9 @@
import type { InteractionMode } from "@editor/tools";
import { isPanInteractionMode } from "@editor/tools";
import type { CanvasInputState } from "./useCanvasInput";
export function canvasCursorClass(interactionMode: InteractionMode, input: CanvasInputState) {
if (input.isPanning) return "cursor-grabbing";
if (interactionMode.type === "temporary-pan") return "cursor-grab";
if (isPanInteractionMode(interactionMode)) return "cursor-grab";
return "cursor-default";
}

3
view/canvas/useCanvasInput.ts
View File

@@ -1,5 +1,6 @@
import { useEffect, useState, type RefObject } from "react";
import type { AppStore } from "@editor/store";
import { isPanInteractionMode } from "@editor/tools";
import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
import {
createViewportPanInputController,
@@ -35,7 +36,7 @@ export function useCanvasInput(
globalPointerConsumer: options.globalPointerConsumer,
dispatch: store.dispatch,
getCurrentZoom: () => store.getState().editor.viewport.zoom,
isPanMode: () => store.getState().editor.tools.interactionMode.type === "temporary-pan",
isPanMode: () => isPanInteractionMode(store.getState().editor.tools.interactionMode),
});
const handleKeyDown = (event: KeyboardEvent) => {