whiteboard: use a bounded canvas for preview when drawing with pen. Saves memory and makes it possible to use ipad.

Author: williamstein

src/packages/frontend/frame-editors/whiteboard-editor/canvas.tsx

@@ -88,7 +88,7 @@ import {
 } from "./math";
 import { throttle } from "lodash";
 import Draggable from "react-draggable";
-import { clearCanvas, drawCurve } from "./elements/pen";
+import { clearCanvas, drawCurve, getMaxCanvasSizeScale } from "./elements/pen";
 
 import { getParams } from "./tools/tool-panel";
 
@@ -98,7 +98,9 @@ import { aspectRatioToNumber } from "./tools/frame";
 
 import Cursors from "./cursors";
 
-const penDPIFactor = 1; // I can't get this to work! :-(
+// I can't get this to work! :-(
+// When I can, this should be window.devicePixelRatio
+const penDPIFactor = 1;
 
 const MIDDLE_MOUSE_BUTTON = 1;
 
@@ -145,10 +147,20 @@ export default function Canvas({
 
   const navDrag = useRef<null | { x0: number; y0: number }>(null);
   const innerCanvasRef = useRef<any>(null);
-  const transforms = useMemo(
-    () => getTransforms(elements, margin, canvasScale),
-    [elements, margin, canvasScale]
-  );
+
+  const canvasScaleRef = useRef<number>(1);
+  const transforms = useMemo(() => {
+    const t = getTransforms(elements, margin, canvasScale);
+    // also update the canvas scale, which is needed to keep
+    // the canvas preview layer (for the pen) from getting too big
+    // and wasting memory.
+    canvasScaleRef.current = getMaxCanvasSizeScale(
+      penDPIFactor * t.width,
+      penDPIFactor * t.height
+    );
+    return t;
+  }, [elements, margin, canvasScale]);
+
   const mousePath = useRef<{ x: number; y: number }[] | null>(null);
   const handRef = useRef<{
     scrollLeft: number;
@@ -852,10 +864,22 @@ export default function Canvas({
       if (canvas == null) return;
       const ctx = canvas.getContext("2d");
       if (ctx == null) return;
+      const path: Point[] = [];
+      for (const point of mousePath.current.slice(
+        mousePath.current.length - 3
+      )) {
+        path.push({
+          x: point.x * canvasScaleRef.current,
+          y: point.y * canvasScaleRef.current,
+        });
+      }
+      const { color, radius, opacity } = getToolParams("pen");
       drawCurve({
         ctx,
-        path: mousePath.current.slice(mousePath.current.length - 2),
-        ...getToolParams("pen"),
+        path,
+        color,
+        radius: canvasScaleRef.current * radius,
+        opacity,
       });
       return;
     }
@@ -978,8 +1002,8 @@ export default function Canvas({
         {!isNavigator && selectedTool == "pen" && (
           <canvas
             ref={penCanvasRef}
-            width={penDPIFactor * transforms.width}
-            height={penDPIFactor * transforms.height}
+            width={canvasScaleRef.current * penDPIFactor * transforms.width}
+            height={canvasScaleRef.current * penDPIFactor * transforms.height}
             style={{
               width: `${transforms.width}px`,
               height: `${transforms.height}px`,

src/packages/frontend/frame-editors/whiteboard-editor/elements/pen.tsx

@@ -52,31 +52,20 @@ export default function Pen({ element }: Props) {
       ctx,
       path: decompressPath(path, scaleRef.current),
       color: color ?? "black",
-      radius: radius ?? 1,
+      radius: (radius ?? 1) * scaleRef.current,
       opacity,
-      scale: scaleRef.current,
     });
   }, [element]);
 
   const w = (element.w ?? 100) + 2 * pad;
   const h = (element.h ?? 100) + 2 * pad;
-  let scale;
-  if (w * DPIFactor <= MAX_CANVAS_SIZE && w * DPIFactor <= MAX_CANVAS_SIZE) {
-    scale = 1;
-  } else {
-    if (w >= h) {
-      scale = MAX_CANVAS_SIZE / (w * DPIFactor);
-    } else {
-      scale = MAX_CANVAS_SIZE / (h * DPIFactor);
-    }
-  }
-  scaleRef.current = scale;
+  scaleRef.current = getMaxCanvasSizeScale(w * DPIFactor, h * DPIFactor);
   return (
     <div>
       <canvas
         ref={canvasRef}
-        width={scale * w * DPIFactor}
-        height={scale * h * DPIFactor}
+        width={scaleRef.current * w * DPIFactor}
+        height={scaleRef.current * h * DPIFactor}
         style={{
           width: `${w}px`,
           height: `${h}px`,
@@ -99,14 +88,12 @@ export function drawCurve({
   color,
   radius,
   opacity,
-  scale = 1,
 }: {
   ctx;
   path: Point[];
   color?: string;
   radius?: number;
   opacity?: number;
-  scale?: number;
 }) {
   // There's some useful MIT licensed code at https://github.com/embiem/react-canvas-draw
   // that inspired this.
@@ -118,7 +105,7 @@ export function drawCurve({
     ctx.globalAlpha = opacity;
   }
 
-  ctx.lineWidth = 2 * (radius ?? 0.5) * scale;
+  ctx.lineWidth = 2 * (radius ?? 0.5);
 
   let p1 = path[0];
   let p2 = path[1];
@@ -138,3 +125,17 @@ export function drawCurve({
   ctx.lineTo(p1.x, p1.y);
   ctx.stroke();
 }
+
+// Return a single scalar so that multiplying by it transforms
+// coordinates
+export function getMaxCanvasSizeScale(w: number, h: number): number {
+  if (w <= MAX_CANVAS_SIZE && w <= MAX_CANVAS_SIZE) {
+    return 1;
+  } else {
+    if (w >= h) {
+      return MAX_CANVAS_SIZE / w;
+    } else {
+      return MAX_CANVAS_SIZE / h;
+    }
+  }
+}