@tsdraw/react 0.8.4 → 0.9.0

package/dist/index.cjs

@@ -303,7 +303,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,
@@ -345,7 +349,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;
@@ -393,9 +397,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;
@@ -436,7 +440,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 = core.beginCameraPan(editor.viewport, event.clientX, event.clientY);
@@ -471,11 +475,15 @@ function createTouchInteractionController(editor, canvas, handlers) {
     if (wasFingerPan) {
       endFingerPan();
       if (releasedPanSession) {
-        fingerPanSlide = core.startCameraSlide(
-          releasedPanSession,
-          (dx, dy) => editor.panBy(dx, dy),
-          () => handlers.refreshView()
-        );
+        const slideConfig = handlers.getSlideOptions();
+        if (slideConfig.enabled) {
+          fingerPanSlide = core.startCameraSlide(
+            releasedPanSession,
+            (dx, dy) => editor.panBy(dx, dy),
+            () => handlers.refreshView(),
+            slideConfig.slideOptions
+          );
+        }
       }
     }
     maybeHandleTouchTapGesture();
@@ -486,6 +494,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") {
@@ -529,7 +538,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
 }
 
 // src/canvas/keyboardShortcuts.ts
-var TOOL_SHORTCUTS = {
+var DEFAULT_TOOL_SHORTCUTS = {
   v: "select",
   h: "hand",
   e: "eraser",
@@ -541,6 +550,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;
@@ -548,7 +562,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;
@@ -561,7 +575,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();
@@ -736,8 +750,18 @@ function getHandlePagePoint(bounds, handle) {
   }
 }
 var ZOOM_WHEEL_CAP = 10;
+var VIEW_ONLY_TOOLS = /* @__PURE__ */ new Set(["select", "hand"]);
 function useTsdrawCanvasController(options = {}) {
   const onMountRef = react.useRef(options.onMount);
+  const onChangeRef = react.useRef(options.onChange);
+  const onCameraChangeRef = react.useRef(options.onCameraChange);
+  const onToolChangeRef = react.useRef(options.onToolChange);
+  const cameraOptionsRef = react.useRef(options.cameraOptions);
+  const touchOptionsRef = react.useRef(options.touchOptions);
+  const keyboardShortcutsRef = react.useRef(options.keyboardShortcuts);
+  const penOptionsRef = react.useRef(options.penOptions);
+  const backgroundRef = react.useRef(options.background);
+  const readOnlyRef = react.useRef(options.readOnly ?? false);
   const containerRef = react.useRef(null);
   const canvasRef = react.useRef(null);
   const editorRef = react.useRef(null);
@@ -797,6 +821,33 @@ function useTsdrawCanvasController(options = {}) {
   react.useEffect(() => {
     onMountRef.current = options.onMount;
   }, [options.onMount]);
+  react.useEffect(() => {
+    onChangeRef.current = options.onChange;
+  }, [options.onChange]);
+  react.useEffect(() => {
+    onCameraChangeRef.current = options.onCameraChange;
+  }, [options.onCameraChange]);
+  react.useEffect(() => {
+    onToolChangeRef.current = options.onToolChange;
+  }, [options.onToolChange]);
+  react.useEffect(() => {
+    cameraOptionsRef.current = options.cameraOptions;
+  }, [options.cameraOptions]);
+  react.useEffect(() => {
+    touchOptionsRef.current = options.touchOptions;
+  }, [options.touchOptions]);
+  react.useEffect(() => {
+    keyboardShortcutsRef.current = options.keyboardShortcuts;
+  }, [options.keyboardShortcuts]);
+  react.useEffect(() => {
+    penOptionsRef.current = options.penOptions;
+  }, [options.penOptions]);
+  react.useEffect(() => {
+    backgroundRef.current = options.background;
+  }, [options.background]);
+  react.useEffect(() => {
+    readOnlyRef.current = options.readOnly ?? false;
+  }, [options.readOnly]);
   react.useEffect(() => {
     selectedShapeIdsRef.current = selectedShapeIds;
   }, [selectedShapeIds]);
@@ -813,8 +864,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);
+    core.renderCanvasBackground(ctx, editor.viewport, logicalWidth, logicalHeight, backgroundRef.current, editor.renderer.theme);
     editor.render(ctx);
   }, []);
   const refreshSelectionBounds = react.useCallback((editor, ids = selectedShapeIdsRef.current) => {
@@ -920,14 +974,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 core.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;
@@ -1094,16 +1155,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) {
@@ -1113,8 +1182,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;
       }
@@ -1135,6 +1206,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);
@@ -1142,7 +1216,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 = core.getTopShapeAtPoint(editor, { x, y });
@@ -1189,7 +1264,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;
       }
@@ -1204,9 +1280,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);
       }
@@ -1340,14 +1417,18 @@ function useTsdrawCanvasController(options = {}) {
       editor.tools.pointerUp();
       render();
       refreshSelectionBounds(editor);
-      if (handPanSession) {
+      if (handPanSession && cameraOptionsRef.current?.slideEnabled !== false) {
         activeCameraSlideRef.current = core.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) {
@@ -1392,41 +1473,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, {
@@ -1507,6 +1606,7 @@ function useTsdrawCanvasController(options = {}) {
     const cleanupEditorListener = editor.listen(() => {
       if (ignorePersistenceChanges) return;
       schedulePersist();
+      onChangeRef.current?.(editor.getDocumentSnapshot());
     });
     const cleanupHistoryListener = editor.listenHistory(() => {
       syncHistoryState();
@@ -1573,6 +1673,9 @@ function useTsdrawCanvasController(options = {}) {
         render();
       }
     });
+    if (options.autoFocus !== false) {
+      container.focus({ preventScroll: true });
+    }
     return () => {
       disposed = true;
       schedulePersistRef.current = null;
@@ -1616,15 +1719,21 @@ function useTsdrawCanvasController(options = {}) {
     editor.renderer.setTheme(options.theme ?? "light");
     render();
   }, [options.theme, render]);
+  react.useEffect(() => {
+    if (!editorRef.current) return;
+    render();
+  }, [options.background, render]);
   const setTool = react.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]
   );
@@ -1860,12 +1969,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__ */ jsxRuntime.jsx(
     ToolOverlay,
@@ -1954,12 +2074,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: [