@tsdraw/react 0.8.4 → 0.9.0

package/dist/index.d.cts

@@ -1,6 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ColorStyle, DashStyle, FillStyle, SizeStyle, ToolId, Editor, ToolDefinition } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+
+interface TsdrawCameraOptions {
+    panSpeed?: number;
+    zoomSpeed?: number;
+    zoomRange?: ZoomRange;
+    wheelBehavior?: 'pan' | 'zoom' | 'none';
+    slideEnabled?: boolean;
+    slideFriction?: number;
+    locked?: boolean;
+}
+interface TsdrawTouchOptions {
+    pinchToZoom?: boolean;
+    fingerPanInPenMode?: boolean;
+    tapUndoRedo?: boolean;
+    trackpadGestures?: boolean;
+}
+interface TsdrawKeyboardShortcutOptions {
+    enabled?: boolean;
+    toolShortcuts?: Record<string, ToolId>;
+    overrideDefaults?: boolean;
+}
+interface TsdrawPenOptions {
+    pressureSensitivity?: number;
+    autoDetect?: boolean;
+}
 
 type TsdrawStylePanelPartItem = 'colors' | 'dashes' | 'fills' | 'sizes' | (string & {});
 interface TsdrawStylePanelRenderContext {
@@ -123,6 +149,17 @@ interface TsdrawProps {
     initialToolId?: ToolId;
     uiOptions?: TsdrawUiOptions;
     onMount?: (api: TsdrawMountApi) => void | (() => void);
+    cameraOptions?: TsdrawCameraOptions;
+    touchOptions?: TsdrawTouchOptions;
+    keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
+    penOptions?: TsdrawPenOptions;
+    background?: TsdrawBackgroundOptions;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    snapshot?: TsdrawEditorSnapshot;
+    onChange?: (snapshot: TsdrawDocumentSnapshot) => void;
+    onCameraChange?: (viewport: Viewport) => void;
+    onToolChange?: (toolId: ToolId) => void;
 }
 type TsdrawCanvasProps = TsdrawProps;
 declare function Tsdraw(props: TsdrawProps): react_jsx_runtime.JSX.Element;
@@ -148,4 +185,4 @@ interface ToolbarPart {
 }
 declare function getDefaultToolbarIcon(toolId: ToolId, isActive: boolean): ReactNode;
 
-export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };
+export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, type TsdrawCameraOptions, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawKeyboardShortcutOptions, type TsdrawMountApi, type TsdrawPenOptions, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawTouchOptions, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };

package/dist/index.d.ts

@@ -1,6 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ColorStyle, DashStyle, FillStyle, SizeStyle, ToolId, Editor, ToolDefinition } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+
+interface TsdrawCameraOptions {
+    panSpeed?: number;
+    zoomSpeed?: number;
+    zoomRange?: ZoomRange;
+    wheelBehavior?: 'pan' | 'zoom' | 'none';
+    slideEnabled?: boolean;
+    slideFriction?: number;
+    locked?: boolean;
+}
+interface TsdrawTouchOptions {
+    pinchToZoom?: boolean;
+    fingerPanInPenMode?: boolean;
+    tapUndoRedo?: boolean;
+    trackpadGestures?: boolean;
+}
+interface TsdrawKeyboardShortcutOptions {
+    enabled?: boolean;
+    toolShortcuts?: Record<string, ToolId>;
+    overrideDefaults?: boolean;
+}
+interface TsdrawPenOptions {
+    pressureSensitivity?: number;
+    autoDetect?: boolean;
+}
 
 type TsdrawStylePanelPartItem = 'colors' | 'dashes' | 'fills' | 'sizes' | (string & {});
 interface TsdrawStylePanelRenderContext {
@@ -123,6 +149,17 @@ interface TsdrawProps {
     initialToolId?: ToolId;
     uiOptions?: TsdrawUiOptions;
     onMount?: (api: TsdrawMountApi) => void | (() => void);
+    cameraOptions?: TsdrawCameraOptions;
+    touchOptions?: TsdrawTouchOptions;
+    keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
+    penOptions?: TsdrawPenOptions;
+    background?: TsdrawBackgroundOptions;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    snapshot?: TsdrawEditorSnapshot;
+    onChange?: (snapshot: TsdrawDocumentSnapshot) => void;
+    onCameraChange?: (viewport: Viewport) => void;
+    onToolChange?: (toolId: ToolId) => void;
 }
 type TsdrawCanvasProps = TsdrawProps;
 declare function Tsdraw(props: TsdrawProps): react_jsx_runtime.JSX.Element;
@@ -148,4 +185,4 @@ interface ToolbarPart {
 }
 declare function getDefaultToolbarIcon(toolId: ToolId, isActive: boolean): ReactNode;
 
-export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawMountApi, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };
+export { type ToolbarActionItem, type ToolbarPart, type ToolbarPartItem, type ToolbarRenderItem, type ToolbarToolItem, Tsdraw, type TsdrawCameraOptions, TsdrawCanvas, type TsdrawCanvasProps, type TsdrawCursorContext, type TsdrawCustomElement, type TsdrawCustomElementRenderArgs, type TsdrawCustomTool, type TsdrawKeyboardShortcutOptions, type TsdrawMountApi, type TsdrawPenOptions, type TsdrawProps, type TsdrawStylePanelCustomPart, type TsdrawStylePanelPartItem, type TsdrawStylePanelRenderContext, type TsdrawToolOverlayState, type TsdrawToolbarBuiltInAction, type TsdrawTouchOptions, type TsdrawUiOptions, type TsdrawUiPlacement, type UiAnchor, getDefaultToolbarIcon };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, pageToScreen, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, HandDraggingState, startCameraSlide, isSelectTool, beginCameraPan, moveCameraPan } from '@tsdraw/core';
+import { DEFAULT_COLORS, renderCanvasBackground, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, pageToScreen, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, HandDraggingState, startCameraSlide, isSelectTool, beginCameraPan, moveCameraPan } from '@tsdraw/core';
 import { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
 
 // src/components/TsdrawCanvas.tsx
@@ -301,7 +301,11 @@ var TAP_MOVE_TOLERANCE = 14;
 var PINCH_MODE_ZOOM_DISTANCE = 24;
 var PINCH_MODE_PAN_DISTANCE = 16;
 var PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE = 64;
-function createTouchInteractionController(editor, canvas, handlers) {
+function createTouchInteractionController(editor, canvas, handlers, touchOptions) {
+  const allowPinchZoom = touchOptions?.pinchToZoom !== false;
+  const allowFingerPan = touchOptions?.fingerPanInPenMode !== false;
+  const allowTapUndoRedo = touchOptions?.tapUndoRedo !== false;
+  const allowTrackpadGestures = touchOptions?.trackpadGestures !== false;
   const activeTouchPoints = /* @__PURE__ */ new Map();
   const touchTapState = {
     active: false,
@@ -343,7 +347,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
     if (activeTouchPoints.size > 0) return;
     if (!touchTapState.active) return;
     const elapsed = performance.now() - touchTapState.startTime;
-    if (!touchTapState.moved && elapsed <= TAP_MAX_DURATION_MS && (touchTapState.maxTouchCount === 2 || touchTapState.maxTouchCount === 3)) {
+    if (allowTapUndoRedo && !touchTapState.moved && elapsed <= TAP_MAX_DURATION_MS && (touchTapState.maxTouchCount === 2 || touchTapState.maxTouchCount === 3)) {
       const fingerCount = touchTapState.maxTouchCount;
       const now = performance.now();
       const previousTapTime = touchTapState.lastTapAtByCount[fingerCount] ?? 0;
@@ -391,9 +395,9 @@ function createTouchInteractionController(editor, canvas, handlers) {
     const touchDistance = Math.abs(distance - touchCameraState.initialDistance);
     const originDistance = Math.hypot(center.x - touchCameraState.initialCenter.x, center.y - touchCameraState.initialCenter.y);
     if (touchCameraState.mode === "not-sure") {
-      if (touchDistance > PINCH_MODE_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+      if (allowPinchZoom && touchDistance > PINCH_MODE_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
       else if (originDistance > PINCH_MODE_PAN_DISTANCE) touchCameraState.mode = "panning";
-    } else if (touchCameraState.mode === "panning" && touchDistance > PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+    } else if (allowPinchZoom && touchCameraState.mode === "panning" && touchDistance > PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
     const canvasRect = canvas.getBoundingClientRect();
     const centerOnCanvasX = center.x - canvasRect.left;
     const centerOnCanvasY = center.y - canvasRect.top;
@@ -434,7 +438,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
       beginTouchCameraGesture();
       return true;
     }
-    if (handlers.isPenModeActive() && activeTouchPoints.size === 1) {
+    if (allowFingerPan && handlers.isPenModeActive() && activeTouchPoints.size === 1) {
       handlers.cancelActivePointerInteraction();
       fingerPanPointerId = event.pointerId;
       fingerPanSession = beginCameraPan(editor.viewport, event.clientX, event.clientY);
@@ -469,11 +473,15 @@ function createTouchInteractionController(editor, canvas, handlers) {
     if (wasFingerPan) {
       endFingerPan();
       if (releasedPanSession) {
-        fingerPanSlide = startCameraSlide(
-          releasedPanSession,
-          (dx, dy) => editor.panBy(dx, dy),
-          () => handlers.refreshView()
-        );
+        const slideConfig = handlers.getSlideOptions();
+        if (slideConfig.enabled) {
+          fingerPanSlide = startCameraSlide(
+            releasedPanSession,
+            (dx, dy) => editor.panBy(dx, dy),
+            () => handlers.refreshView(),
+            slideConfig.slideOptions
+          );
+        }
       }
     }
     maybeHandleTouchTapGesture();
@@ -484,6 +492,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
   const handleGestureEvent = (event, container) => {
     if (!container.contains(event.target)) return;
     event.preventDefault();
+    if (!allowTrackpadGestures) return;
     const gestureEvent = event;
     if (gestureEvent.scale == null) return;
     if (event.type === "gesturestart") {
@@ -527,7 +536,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
 }
 
 // src/canvas/keyboardShortcuts.ts
-var TOOL_SHORTCUTS = {
+var DEFAULT_TOOL_SHORTCUTS = {
   v: "select",
   h: "hand",
   e: "eraser",
@@ -539,6 +548,11 @@ var TOOL_SHORTCUTS = {
   o: "circle",
   c: "circle"
 };
+function resolveToolShortcuts(shortcutOptions) {
+  if (!shortcutOptions?.toolShortcuts) return DEFAULT_TOOL_SHORTCUTS;
+  if (shortcutOptions.overrideDefaults) return { ...shortcutOptions.toolShortcuts };
+  return { ...DEFAULT_TOOL_SHORTCUTS, ...shortcutOptions.toolShortcuts };
+}
 function isEditableTarget(eventTarget) {
   const element = eventTarget;
   if (!element) return false;
@@ -546,7 +560,7 @@ function isEditableTarget(eventTarget) {
   const tagName = element.tagName;
   return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
 }
-function handleKeyboardShortcutKeyDown(event, handlers) {
+function handleKeyboardShortcutKeyDown(event, handlers, toolShortcutMap = DEFAULT_TOOL_SHORTCUTS) {
   if (isEditableTarget(event.target)) return;
   const loweredKey = event.key.toLowerCase();
   const isMetaPressed = event.metaKey || event.ctrlKey;
@@ -559,7 +573,7 @@ function handleKeyboardShortcutKeyDown(event, handlers) {
     }
   }
   if (!isMetaPressed && !event.altKey) {
-    const nextToolId = TOOL_SHORTCUTS[loweredKey];
+    const nextToolId = toolShortcutMap[loweredKey];
     if (nextToolId && handlers.isToolAvailable(nextToolId)) {
       handlers.setToolFromShortcut(nextToolId);
       event.preventDefault();
@@ -734,8 +748,18 @@ function getHandlePagePoint(bounds, handle) {
   }
 }
 var ZOOM_WHEEL_CAP = 10;
+var VIEW_ONLY_TOOLS = /* @__PURE__ */ new Set(["select", "hand"]);
 function useTsdrawCanvasController(options = {}) {
   const onMountRef = useRef(options.onMount);
+  const onChangeRef = useRef(options.onChange);
+  const onCameraChangeRef = useRef(options.onCameraChange);
+  const onToolChangeRef = useRef(options.onToolChange);
+  const cameraOptionsRef = useRef(options.cameraOptions);
+  const touchOptionsRef = useRef(options.touchOptions);
+  const keyboardShortcutsRef = useRef(options.keyboardShortcuts);
+  const penOptionsRef = useRef(options.penOptions);
+  const backgroundRef = useRef(options.background);
+  const readOnlyRef = useRef(options.readOnly ?? false);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
   const editorRef = useRef(null);
@@ -795,6 +819,33 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     onMountRef.current = options.onMount;
   }, [options.onMount]);
+  useEffect(() => {
+    onChangeRef.current = options.onChange;
+  }, [options.onChange]);
+  useEffect(() => {
+    onCameraChangeRef.current = options.onCameraChange;
+  }, [options.onCameraChange]);
+  useEffect(() => {
+    onToolChangeRef.current = options.onToolChange;
+  }, [options.onToolChange]);
+  useEffect(() => {
+    cameraOptionsRef.current = options.cameraOptions;
+  }, [options.cameraOptions]);
+  useEffect(() => {
+    touchOptionsRef.current = options.touchOptions;
+  }, [options.touchOptions]);
+  useEffect(() => {
+    keyboardShortcutsRef.current = options.keyboardShortcuts;
+  }, [options.keyboardShortcuts]);
+  useEffect(() => {
+    penOptionsRef.current = options.penOptions;
+  }, [options.penOptions]);
+  useEffect(() => {
+    backgroundRef.current = options.background;
+  }, [options.background]);
+  useEffect(() => {
+    readOnlyRef.current = options.readOnly ?? false;
+  }, [options.readOnly]);
   useEffect(() => {
     selectedShapeIdsRef.current = selectedShapeIds;
   }, [selectedShapeIds]);
@@ -811,8 +862,11 @@ function useTsdrawCanvasController(options = {}) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     const dpr = dprRef.current || 1;
+    const logicalWidth = canvas.width / dpr;
+    const logicalHeight = canvas.height / dpr;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+    ctx.clearRect(0, 0, logicalWidth, logicalHeight);
+    renderCanvasBackground(ctx, editor.viewport, logicalWidth, logicalHeight, backgroundRef.current, editor.renderer.theme);
     editor.render(ctx);
   }, []);
   const refreshSelectionBounds = useCallback((editor, ids = selectedShapeIdsRef.current) => {
@@ -918,14 +972,21 @@ function useTsdrawCanvasController(options = {}) {
     const canvas = canvasRef.current;
     if (!container || !canvas) return;
     const initialTool = options.initialTool ?? "pen";
+    const cameraOpts = cameraOptionsRef.current;
+    const touchOpts = touchOptionsRef.current;
+    const toolShortcutMap = resolveToolShortcuts(keyboardShortcutsRef.current);
     const editor = new Editor({
       toolDefinitions: options.toolDefinitions,
-      initialToolId: initialTool
+      initialToolId: initialTool,
+      zoomRange: cameraOpts?.zoomRange
     });
     editor.renderer.setTheme(options.theme ?? "light");
     if (!editor.tools.hasTool(initialTool)) {
       editor.setCurrentTool("pen");
     }
+    if (options.snapshot) {
+      editor.loadPersistenceSnapshot(options.snapshot);
+    }
     let disposed = false;
     let ignorePersistenceChanges = false;
     let disposeMount;
@@ -1092,16 +1153,24 @@ function useTsdrawCanvasController(options = {}) {
       render();
       refreshSelectionBounds(editor);
     };
+    const emitCameraChange = () => {
+      onCameraChangeRef.current?.({ ...editor.viewport });
+    };
     const touchInteractions = createTouchInteractionController(editor, canvas, {
       cancelActivePointerInteraction,
       refreshView: () => {
         render();
         refreshSelectionBounds(editor);
+        emitCameraChange();
       },
       runUndo: () => applyDocumentChangeResult(editor.undo()),
       runRedo: () => applyDocumentChangeResult(editor.redo()),
-      isPenModeActive: () => penModeRef.current
-    });
+      isPenModeActive: () => penModeRef.current,
+      getSlideOptions: () => ({
+        enabled: cameraOptionsRef.current?.slideEnabled !== false,
+        slideOptions: { friction: cameraOptionsRef.current?.slideFriction }
+      })
+    }, touchOpts);
     const hasRealPressure = (pressure) => pressure != null && pressure > 0 && pressure !== 0.5;
     const stopActiveSlide = () => {
       if (activeCameraSlideRef.current) {
@@ -1111,8 +1180,10 @@ function useTsdrawCanvasController(options = {}) {
     };
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
+      if (cameraOptionsRef.current?.locked && e.pointerType !== "pen") return;
       stopActiveSlide();
-      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+      const penAutoDetect = penOptionsRef.current?.autoDetect !== false;
+      if (penAutoDetect && !penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
         penDetectedRef.current = true;
         penModeRef.current = true;
       }
@@ -1133,6 +1204,9 @@ function useTsdrawCanvasController(options = {}) {
       if (activePointerIdsRef.current.size > 1) {
         return;
       }
+      if (readOnlyRef.current && !VIEW_ONLY_TOOLS.has(currentToolRef.current)) {
+        return;
+      }
       isPointerActiveRef.current = true;
       editor.beginHistoryEntry();
       canvas.setPointerCapture(e.pointerId);
@@ -1140,7 +1214,8 @@ function useTsdrawCanvasController(options = {}) {
       updatePointerPreview(e.clientX, e.clientY);
       const first = sampleEvents(e)[0];
       const { x, y } = getPagePoint(first);
-      const pressure = first.pressure ?? 0.5;
+      const pressureSensitivity = penOptionsRef.current?.pressureSensitivity ?? 1;
+      const pressure = (first.pressure ?? 0.5) * pressureSensitivity;
       const isPen = first.pointerType === "pen" || hasRealPressure(first.pressure);
       if (currentToolRef.current === "select") {
         const hit = getTopShapeAtPoint(editor, { x, y });
@@ -1187,7 +1262,8 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerMove = (e) => {
-      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+      const penAutoDetectOnMove = penOptionsRef.current?.autoDetect !== false;
+      if (penAutoDetectOnMove && !penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
         penDetectedRef.current = true;
         penModeRef.current = true;
       }
@@ -1202,9 +1278,10 @@ function useTsdrawCanvasController(options = {}) {
       const dx = prevClient ? e.clientX - prevClient.x : 0;
       const dy = prevClient ? e.clientY - prevClient.y : 0;
       lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
+      const movePressureSensitivity = penOptionsRef.current?.pressureSensitivity ?? 1;
       for (const sample of sampleEvents(e)) {
         const { x, y } = getPagePoint(sample);
-        const pressure = sample.pressure ?? 0.5;
+        const pressure = (sample.pressure ?? 0.5) * movePressureSensitivity;
         const isPen = sample.pointerType === "pen" || hasRealPressure(sample.pressure);
         editor.input.pointerMove(x, y, pressure, isPen);
       }
@@ -1338,14 +1415,18 @@ function useTsdrawCanvasController(options = {}) {
       editor.tools.pointerUp();
       render();
       refreshSelectionBounds(editor);
-      if (handPanSession) {
+      if (handPanSession && cameraOptionsRef.current?.slideEnabled !== false) {
         activeCameraSlideRef.current = startCameraSlide(
           handPanSession,
-          (slideDx, slideDy) => editor.panBy(slideDx, slideDy),
+          (slideDx, slideDy) => {
+            editor.panBy(slideDx, slideDy);
+            emitCameraChange();
+          },
           () => {
             render();
             refreshSelectionBounds(editor);
-          }
+          },
+          { friction: cameraOptionsRef.current?.slideFriction }
         );
       }
       if (pendingRemoteDocumentRef.current) {
@@ -1390,41 +1471,59 @@ function useTsdrawCanvasController(options = {}) {
     const handleWheel = (e) => {
       if (!container.contains(e.target)) return;
       e.preventDefault();
+      const camOpts = cameraOptionsRef.current;
+      if (camOpts?.locked) return;
+      if (camOpts?.wheelBehavior === "none") return;
       if (touchInteractions.isTrackpadZoomActive()) return;
       const delta = normalizeWheelDelta(e);
+      const panMultiplier = camOpts?.panSpeed ?? 1;
+      const zoomMultiplier = camOpts?.zoomSpeed ?? 1;
       if (delta.z !== 0) {
         const rect = canvas.getBoundingClientRect();
         const pointX = e.clientX - rect.left;
         const pointY = e.clientY - rect.top;
-        editor.zoomAt(Math.exp(delta.z), pointX, pointY);
+        editor.zoomAt(Math.exp(delta.z * zoomMultiplier), pointX, pointY);
       } else {
-        editor.panBy(delta.x, delta.y);
+        editor.panBy(delta.x * panMultiplier, delta.y * panMultiplier);
       }
       render();
       refreshSelectionBounds(editor);
+      emitCameraChange();
     };
     const handleGestureEvent = (e) => {
       touchInteractions.handleGestureEvent(e, container);
     };
     const handleKeyDown = (e) => {
+      if (keyboardShortcutsRef.current?.enabled === false) return;
+      const isReadOnly = readOnlyRef.current;
       handleKeyboardShortcutKeyDown(e, {
-        isToolAvailable: (tool) => editor.tools.hasTool(tool),
+        isToolAvailable: (tool) => {
+          if (isReadOnly && !VIEW_ONLY_TOOLS.has(tool)) return false;
+          return editor.tools.hasTool(tool);
+        },
         setToolFromShortcut: (tool) => {
           editor.setCurrentTool(tool);
           setCurrentToolState(tool);
           currentToolRef.current = tool;
           if (tool !== "select") resetSelectUi();
           render();
+          onToolChangeRef.current?.(tool);
+        },
+        runHistoryShortcut: (shouldRedo) => {
+          if (isReadOnly) return false;
+          return applyDocumentChangeResult(shouldRedo ? editor.redo() : editor.undo());
+        },
+        deleteSelection: () => {
+          if (isReadOnly) return false;
+          return currentToolRef.current === "select" ? deleteCurrentSelection() : false;
         },
-        runHistoryShortcut: (shouldRedo) => applyDocumentChangeResult(shouldRedo ? editor.redo() : editor.undo()),
-        deleteSelection: () => currentToolRef.current === "select" ? deleteCurrentSelection() : false,
         dispatchKeyDown: (event) => {
           editor.input.setModifiers(event.shiftKey, event.ctrlKey, event.metaKey);
           editor.tools.keyDown({ key: event.key });
           render();
         },
         dispatchKeyUp: () => void 0
-      });
+      }, toolShortcutMap);
     };
     const handleKeyUp = (e) => {
       handleKeyboardShortcutKeyUp(e, {
@@ -1505,6 +1604,7 @@ function useTsdrawCanvasController(options = {}) {
     const cleanupEditorListener = editor.listen(() => {
       if (ignorePersistenceChanges) return;
       schedulePersist();
+      onChangeRef.current?.(editor.getDocumentSnapshot());
     });
     const cleanupHistoryListener = editor.listenHistory(() => {
       syncHistoryState();
@@ -1571,6 +1671,9 @@ function useTsdrawCanvasController(options = {}) {
         render();
       }
     });
+    if (options.autoFocus !== false) {
+      container.focus({ preventScroll: true });
+    }
     return () => {
       disposed = true;
       schedulePersistRef.current = null;
@@ -1614,15 +1717,21 @@ function useTsdrawCanvasController(options = {}) {
     editor.renderer.setTheme(options.theme ?? "light");
     render();
   }, [options.theme, render]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    render();
+  }, [options.background, render]);
   const setTool = useCallback(
     (tool) => {
       const editor = editorRef.current;
       if (!editor) return;
       if (!editor.tools.hasTool(tool)) return;
+      if (readOnlyRef.current && !VIEW_ONLY_TOOLS.has(tool)) return;
       editor.setCurrentTool(tool);
       setCurrentToolState(tool);
       currentToolRef.current = tool;
       if (tool !== "select") resetSelectUi();
+      onToolChangeRef.current?.(tool);
     },
     [resetSelectUi]
   );
@@ -1858,12 +1967,23 @@ function Tsdraw(props) {
     initialTool,
     theme: resolvedTheme,
     persistenceKey: props.persistenceKey,
-    onMount: props.onMount
+    onMount: props.onMount,
+    cameraOptions: props.cameraOptions,
+    touchOptions: props.touchOptions,
+    keyboardShortcuts: props.keyboardShortcuts,
+    penOptions: props.penOptions,
+    background: props.background,
+    readOnly: props.readOnly,
+    autoFocus: props.autoFocus,
+    snapshot: props.snapshot,
+    onChange: props.onChange,
+    onCameraChange: props.onCameraChange,
+    onToolChange: props.onToolChange
   });
   const toolbarPlacementStyle = resolvePlacementStyle(props.uiOptions?.toolbar?.placement, "bottom-center", 0, 14);
   const stylePanelPlacementStyle = resolvePlacementStyle(props.uiOptions?.stylePanel?.placement, "top-right", 8, 8);
   const isToolbarHidden = props.uiOptions?.toolbar?.hide === true;
-  const isStylePanelHidden = props.uiOptions?.stylePanel?.hide === true;
+  const isStylePanelHidden = props.uiOptions?.stylePanel?.hide === true || props.readOnly === true;
   const canvasCursor = props.uiOptions?.cursor?.getCursor?.(cursorContext) ?? defaultCanvasCursor;
   const defaultToolOverlay = /* @__PURE__ */ jsx(
     ToolOverlay,
@@ -1952,12 +2072,14 @@ function Tsdraw(props) {
     "div",
     {
       ref: containerRef,
+      tabIndex: 0,
       className: `tsdraw tsdraw-${resolvedTheme}mode ${props.className ?? ""}`,
       style: {
         width: props.width ?? "100%",
         height: props.height ?? "100%",
         position: "relative",
         overflow: "hidden",
+        outline: "none",
         ...props.style
       },
       children: [