@tsdraw/react 0.8.3 → 0.8.5

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, isSelectTool } from '@tsdraw/core';
+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 { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
 
 // src/components/TsdrawCanvas.tsx
@@ -295,15 +295,17 @@ function getCanvasCursor(currentTool, state) {
   }
   return state.showToolOverlay ? "none" : "crosshair";
 }
-
-// src/canvas/touchInteractions.ts
 var TAP_MAX_DURATION_MS = 100;
 var DOUBLE_TAP_INTERVAL_MS = 100;
 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,
@@ -318,21 +320,34 @@ function createTouchInteractionController(editor, canvas, handlers) {
     mode: "not-sure",
     previousCenter: { x: 0, y: 0 },
     initialCenter: { x: 0, y: 0 },
-    previousDistance: 1,
-    initialDistance: 1
+    initialDistance: 1,
+    initialZoom: 1
   };
+  let fingerPanPointerId = null;
+  let fingerPanSession = null;
+  let fingerPanSlide = null;
   const isTouchPointer = (event) => event.pointerType === "touch";
+  const stopFingerPanSlide = () => {
+    if (fingerPanSlide) {
+      fingerPanSlide.stop();
+      fingerPanSlide = null;
+    }
+  };
+  const endFingerPan = () => {
+    fingerPanPointerId = null;
+    fingerPanSession = null;
+  };
   const endTouchCameraGesture = () => {
     touchCameraState.active = false;
     touchCameraState.mode = "not-sure";
-    touchCameraState.previousDistance = 1;
     touchCameraState.initialDistance = 1;
+    touchCameraState.initialZoom = 1;
   };
   const maybeHandleTouchTapGesture = () => {
     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;
@@ -361,8 +376,8 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchCameraState.mode = "not-sure";
     touchCameraState.previousCenter = center;
     touchCameraState.initialCenter = center;
-    touchCameraState.previousDistance = Math.max(1, distance);
     touchCameraState.initialDistance = Math.max(1, distance);
+    touchCameraState.initialZoom = editor.getZoomLevel();
   };
   const updateTouchCameraGesture = () => {
     if (!touchCameraState.active) return false;
@@ -380,24 +395,33 @@ 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;
-    editor.panBy(centerDx, centerDy);
     if (touchCameraState.mode === "zooming") {
-      const zoomFactor = distance / touchCameraState.previousDistance;
-      editor.zoomAt(zoomFactor, centerOnCanvasX, centerOnCanvasY);
+      const targetZoom = Math.max(0.1, Math.min(4, touchCameraState.initialZoom * (distance / touchCameraState.initialDistance)));
+      const pannedX = editor.viewport.x + centerDx;
+      const pannedY = editor.viewport.y + centerDy;
+      const pageAtCenterX = (centerOnCanvasX - pannedX) / editor.viewport.zoom;
+      const pageAtCenterY = (centerOnCanvasY - pannedY) / editor.viewport.zoom;
+      editor.setViewport({
+        x: centerOnCanvasX - pageAtCenterX * targetZoom,
+        y: centerOnCanvasY - pageAtCenterY * targetZoom,
+        zoom: targetZoom
+      });
+    } else {
+      editor.panBy(centerDx, centerDy);
     }
     touchCameraState.previousCenter = center;
-    touchCameraState.previousDistance = distance;
     handlers.refreshView();
     return true;
   };
   const handlePointerDown = (event) => {
     if (!isTouchPointer(event)) return false;
+    stopFingerPanSlide();
     activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
     if (!touchTapState.active) {
       touchTapState.active = true;
@@ -410,9 +434,16 @@ function createTouchInteractionController(editor, canvas, handlers) {
     }
     touchTapState.startPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
     if (activeTouchPoints.size === 2) {
+      endFingerPan();
       beginTouchCameraGesture();
       return true;
     }
+    if (allowFingerPan && handlers.isPenModeActive() && activeTouchPoints.size === 1) {
+      handlers.cancelActivePointerInteraction();
+      fingerPanPointerId = event.pointerId;
+      fingerPanSession = beginCameraPan(editor.viewport, event.clientX, event.clientY);
+      return true;
+    }
     return false;
   };
   const handlePointerMove = (event) => {
@@ -423,22 +454,45 @@ function createTouchInteractionController(editor, canvas, handlers) {
       const moved = Math.hypot(event.clientX - tapStart.x, event.clientY - tapStart.y);
       if (moved > TAP_MOVE_TOLERANCE) touchTapState.moved = true;
     }
+    if (fingerPanPointerId === event.pointerId && fingerPanSession) {
+      const target = moveCameraPan(fingerPanSession, event.clientX, event.clientY);
+      editor.setViewport({ x: target.x, y: target.y });
+      handlers.refreshView();
+      return true;
+    }
     return updateTouchCameraGesture();
   };
   const handlePointerUpOrCancel = (event) => {
     if (!isTouchPointer(event)) return false;
     const wasCameraGestureActive = touchCameraState.active;
+    const wasFingerPan = fingerPanPointerId === event.pointerId;
+    const releasedPanSession = wasFingerPan ? fingerPanSession : null;
     activeTouchPoints.delete(event.pointerId);
     touchTapState.startPoints.delete(event.pointerId);
     if (activeTouchPoints.size < 2) endTouchCameraGesture();
+    if (wasFingerPan) {
+      endFingerPan();
+      if (releasedPanSession) {
+        const slideConfig = handlers.getSlideOptions();
+        if (slideConfig.enabled) {
+          fingerPanSlide = startCameraSlide(
+            releasedPanSession,
+            (dx, dy) => editor.panBy(dx, dy),
+            () => handlers.refreshView(),
+            slideConfig.slideOptions
+          );
+        }
+      }
+    }
     maybeHandleTouchTapGesture();
-    return wasCameraGestureActive;
+    return wasCameraGestureActive || wasFingerPan;
   };
   let gestureLastScale = 1;
   let gestureActive = false;
   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") {
@@ -466,6 +520,8 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchTapState.active = false;
     touchTapState.startPoints.clear();
     endTouchCameraGesture();
+    endFingerPan();
+    stopFingerPanSlide();
   };
   return {
     handlePointerDown,
@@ -474,12 +530,13 @@ function createTouchInteractionController(editor, canvas, handlers) {
     handleGestureEvent,
     reset,
     isCameraGestureActive: () => touchCameraState.active,
+    isFingerPanActive: () => fingerPanPointerId !== null,
     isTrackpadZoomActive: () => gestureActive
   };
 }
 
 // src/canvas/keyboardShortcuts.ts
-var TOOL_SHORTCUTS = {
+var DEFAULT_TOOL_SHORTCUTS = {
   v: "select",
   h: "hand",
   e: "eraser",
@@ -491,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;
@@ -498,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;
@@ -511,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();
@@ -686,8 +748,17 @@ 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 readOnlyRef = useRef(options.readOnly ?? false);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
   const editorRef = useRef(null);
@@ -702,6 +773,7 @@ function useTsdrawCanvasController(options = {}) {
   const schedulePersistRef = useRef(null);
   const isPointerActiveRef = useRef(false);
   const pendingRemoteDocumentRef = useRef(null);
+  const activeCameraSlideRef = useRef(null);
   const selectionRotationRef = useRef(0);
   const resizeRef = useRef({
     handle: null,
@@ -746,6 +818,30 @@ 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(() => {
+    readOnlyRef.current = options.readOnly ?? false;
+  }, [options.readOnly]);
   useEffect(() => {
     selectedShapeIdsRef.current = selectedShapeIds;
   }, [selectedShapeIds]);
@@ -869,14 +965,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;
@@ -1043,40 +1146,60 @@ 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())
-    });
-    const isDrawingTool = (tool) => tool !== "select" && tool !== "hand";
+      runRedo: () => applyDocumentChangeResult(editor.redo()),
+      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) {
+        activeCameraSlideRef.current.stop();
+        activeCameraSlideRef.current = null;
+      }
+    };
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
-      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+      if (cameraOptionsRef.current?.locked && e.pointerType !== "pen") return;
+      stopActiveSlide();
+      const penAutoDetect = penOptionsRef.current?.autoDetect !== false;
+      if (penAutoDetect && !penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
         penDetectedRef.current = true;
         penModeRef.current = true;
       }
       lastPointerDownWithRef.current = e.pointerType;
       activePointerIdsRef.current.add(e.pointerId);
       const startedCameraGesture = touchInteractions.handlePointerDown(e);
-      if (startedCameraGesture || touchInteractions.isCameraGestureActive()) {
+      if (startedCameraGesture || touchInteractions.isCameraGestureActive() || touchInteractions.isFingerPanActive()) {
         e.preventDefault();
         if (!canvas.hasPointerCapture(e.pointerId)) {
           canvas.setPointerCapture(e.pointerId);
         }
         return;
       }
-      const allowPointerDown = !penModeRef.current || e.pointerType !== "touch" || !isDrawingTool(currentToolRef.current);
-      if (!allowPointerDown) {
+      const isTouchBlockedByPenMode = penModeRef.current && e.pointerType === "touch";
+      if (isTouchBlockedByPenMode) {
         return;
       }
       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);
@@ -1084,7 +1207,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 });
@@ -1126,12 +1250,13 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.input.pointerDown(x, y, pressure, isPen);
       editor.input.setModifiers(first.shiftKey, first.ctrlKey, first.metaKey);
-      editor.tools.pointerDown({ point: { x, y, z: pressure } });
+      editor.tools.pointerDown({ point: { x, y, z: pressure }, screenX: e.clientX, screenY: e.clientY });
       render();
       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;
       }
@@ -1139,16 +1264,17 @@ function useTsdrawCanvasController(options = {}) {
         e.preventDefault();
         return;
       }
-      if (penModeRef.current && e.pointerType === "touch" && isDrawingTool(currentToolRef.current) && !isPointerActiveRef.current) return;
+      if (penModeRef.current && e.pointerType === "touch" && !isPointerActiveRef.current) return;
       if (activePointerIdsRef.current.size > 1) return;
       updatePointerPreview(e.clientX, e.clientY);
       const prevClient = lastPointerClientRef.current;
       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);
       }
@@ -1193,7 +1319,7 @@ function useTsdrawCanvasController(options = {}) {
         }
       }
       editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.pointerMove({ screenDeltaX: dx, screenDeltaY: dy });
+      editor.tools.pointerMove({ screenDeltaX: dx, screenDeltaY: dy, screenX: e.clientX, screenY: e.clientY });
       render();
       refreshSelectionBounds(editor);
     };
@@ -1272,9 +1398,30 @@ function useTsdrawCanvasController(options = {}) {
           return;
         }
       }
+      let handPanSession = null;
+      if (currentToolRef.current === "hand") {
+        const currentState = editor.tools.getCurrentState();
+        if (currentState instanceof HandDraggingState) {
+          handPanSession = currentState.getPanSession();
+        }
+      }
       editor.tools.pointerUp();
       render();
       refreshSelectionBounds(editor);
+      if (handPanSession && cameraOptionsRef.current?.slideEnabled !== false) {
+        activeCameraSlideRef.current = startCameraSlide(
+          handPanSession,
+          (slideDx, slideDy) => {
+            editor.panBy(slideDx, slideDy);
+            emitCameraChange();
+          },
+          () => {
+            render();
+            refreshSelectionBounds(editor);
+          },
+          { friction: cameraOptionsRef.current?.slideFriction }
+        );
+      }
       if (pendingRemoteDocumentRef.current) {
         const pendingRemoteDocument = pendingRemoteDocumentRef.current;
         pendingRemoteDocumentRef.current = null;
@@ -1317,41 +1464,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, {
@@ -1432,6 +1597,7 @@ function useTsdrawCanvasController(options = {}) {
     const cleanupEditorListener = editor.listen(() => {
       if (ignorePersistenceChanges) return;
       schedulePersist();
+      onChangeRef.current?.(editor.getDocumentSnapshot());
     });
     const cleanupHistoryListener = editor.listenHistory(() => {
       syncHistoryState();
@@ -1498,6 +1664,9 @@ function useTsdrawCanvasController(options = {}) {
         render();
       }
     });
+    if (options.autoFocus !== false) {
+      container.focus({ preventScroll: true });
+    }
     return () => {
       disposed = true;
       schedulePersistRef.current = null;
@@ -1519,6 +1688,7 @@ function useTsdrawCanvasController(options = {}) {
       isPointerActiveRef.current = false;
       activePointerIdsRef.current.clear();
       pendingRemoteDocumentRef.current = null;
+      stopActiveSlide();
       touchInteractions.reset();
       persistenceChannel?.close();
       void persistenceDb?.close();
@@ -1545,10 +1715,12 @@ function useTsdrawCanvasController(options = {}) {
       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]
   );
@@ -1784,12 +1956,22 @@ 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,
+    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,
@@ -1878,12 +2060,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: [