@tsdraw/react 0.8.5 → 0.9.0

package/dist/index.cjs

@@ -760,6 +760,7 @@ function useTsdrawCanvasController(options = {}) {
   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);
@@ -841,6 +842,9 @@ function useTsdrawCanvasController(options = {}) {
   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]);
@@ -860,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) => {
@@ -1712,6 +1719,10 @@ 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;
@@ -1963,6 +1974,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,