@tsdraw/react 0.8.5 → 0.9.0

package/dist/index.d.cts

@@ -1,6 +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, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } 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;
@@ -152,6 +153,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;
     snapshot?: TsdrawEditorSnapshot;

package/dist/index.d.ts

@@ -1,6 +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, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } 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;
@@ -152,6 +153,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;
     snapshot?: TsdrawEditorSnapshot;

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
@@ -758,6 +758,7 @@ function useTsdrawCanvasController(options = {}) {
   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);
@@ -839,6 +840,9 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     penOptionsRef.current = options.penOptions;
   }, [options.penOptions]);
+  useEffect(() => {
+    backgroundRef.current = options.background;
+  }, [options.background]);
   useEffect(() => {
     readOnlyRef.current = options.readOnly ?? false;
   }, [options.readOnly]);
@@ -858,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) => {
@@ -1710,6 +1717,10 @@ 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;
@@ -1961,6 +1972,7 @@ function Tsdraw(props) {
     touchOptions: props.touchOptions,
     keyboardShortcuts: props.keyboardShortcuts,
     penOptions: props.penOptions,
+    background: props.background,
     readOnly: props.readOnly,
     autoFocus: props.autoFocus,
     snapshot: props.snapshot,