@tsdraw/react 0.9.2 → 0.9.4

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
-export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, AutoShapeOptions, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { AutoShapeKind, AutoShapeOptions, AutoShapeThresholds, TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
 
 interface TsdrawCameraOptions {
     panSpeed?: number;
@@ -156,6 +156,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    autoShape?: boolean | AutoShapeOptions;
     background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
-export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, AutoShapeOptions, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { AutoShapeKind, AutoShapeOptions, AutoShapeThresholds, TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
 
 interface TsdrawCameraOptions {
     panSpeed?: number;
@@ -156,6 +156,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    autoShape?: boolean | AutoShapeOptions;
     background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;

package/dist/index.js

@@ -909,6 +909,11 @@ function getHandlePagePoint(bounds, handle) {
       return { x: bounds.maxX, y: bounds.maxY };
   }
 }
+function resolveAutoShapeOption(input) {
+  if (input === false) return { enabled: false };
+  if (input === true || input == null) return { enabled: true };
+  return { enabled: input.enabled ?? true, ...input };
+}
 var ZOOM_WHEEL_CAP = 10;
 var VIEW_ONLY_TOOLS = /* @__PURE__ */ new Set(["select", "hand"]);
 function useTsdrawCanvasController(options = {}) {
@@ -920,6 +925,7 @@ function useTsdrawCanvasController(options = {}) {
   const touchOptionsRef = useRef(options.touchOptions);
   const keyboardShortcutsRef = useRef(options.keyboardShortcuts);
   const penOptionsRef = useRef(options.penOptions);
+  const autoShapeRef = useRef(options.autoShape);
   const backgroundRef = useRef(options.background);
   const readOnlyRef = useRef(options.readOnly ?? false);
   const containerRef = useRef(null);
@@ -1002,6 +1008,11 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     penOptionsRef.current = options.penOptions;
   }, [options.penOptions]);
+  useEffect(() => {
+    autoShapeRef.current = options.autoShape;
+    const editor = editorRef.current;
+    if (editor) editor.setAutoShape(resolveAutoShapeOption(options.autoShape));
+  }, [options.autoShape]);
   useEffect(() => {
     backgroundRef.current = options.background;
   }, [options.background]);
@@ -1140,7 +1151,8 @@ function useTsdrawCanvasController(options = {}) {
     const editor = new Editor({
       toolDefinitions: options.toolDefinitions,
       initialToolId: initialTool,
-      zoomRange: cameraOpts?.zoomRange
+      zoomRange: cameraOpts?.zoomRange,
+      autoShape: resolveAutoShapeOption(autoShapeRef.current)
     });
     editor.renderer.setTheme(options.theme ?? "light");
     if (!editor.tools.hasTool(initialTool)) {
@@ -1773,6 +1785,10 @@ function useTsdrawCanvasController(options = {}) {
       if (ignorePersistenceChanges) return;
       schedulePersist();
     });
+    const cleanupRenderRequest = editor.onRequestRender(() => {
+      render();
+      refreshSelectionBounds(editor);
+    });
     resize();
     const ro = new ResizeObserver(resize);
     ro.observe(container);
@@ -1841,6 +1857,7 @@ function useTsdrawCanvasController(options = {}) {
       schedulePersistRef.current = null;
       cleanupEditorListener();
       cleanupHistoryListener();
+      cleanupRenderRequest();
       disposeMount?.();
       ro.disconnect();
       canvas.removeEventListener("pointerdown", handlePointerDown);
@@ -2110,6 +2127,7 @@ function Tsdraw(props) {
     touchOptions: props.touchOptions,
     keyboardShortcuts: props.keyboardShortcuts,
     penOptions: props.penOptions,
+    autoShape: props.autoShape,
     background: props.background,
     readOnly: props.readOnly,
     autoFocus: props.autoFocus,