fixed performance issues with background grid by avoiding making really big canvases.

2 files changed, 16 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 21e653e02..1033050b9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1438,38 +1438,35 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return false;
     });
 
-    chooseGridSpace = (start: number): number => {
-        const w = this.props.PanelWidth() / this.zoomScaling() + 3 * start;
-        if (w / start > 60) return this.chooseGridSpace(start * 10);
-        return start;
+    chooseGridSpace = (gridSpace: number): number => {
+        const divisions = this.props.PanelWidth() / this.zoomScaling() / gridSpace + 3;
+        return divisions < 60 ? gridSpace : this.chooseGridSpace(gridSpace * 10);
     }
 
     @computed get grid() {
-        const gridSpace = this.chooseGridSpace(NumCast(this.layoutDoc["_backgroundGrid-space"], 50));
-        const shiftX = this.props.isAnnotationOverlay ? 0 : -(this.panX()) % gridSpace - gridSpace;
-        const shiftY = this.props.isAnnotationOverlay ? 0 : -(this.panY()) % gridSpace - gridSpace;
-        const cx = this.centeringShiftX();
-        const cy = this.centeringShiftY();
-        const w = this.props.PanelWidth() / this.zoomScaling() + 3 * gridSpace;
-        const h = this.props.PanelHeight() / this.zoomScaling() + 3 * gridSpace;
-        return <canvas className="collectionFreeFormView-grid" width={w} height={h} style={{ transform: `scale(${this.zoomScaling()}) translate(${shiftX}px, ${shiftY}px)` }}
+        const gridSpace = this.chooseGridSpace(NumCast(this.layoutDoc["_backgroundGrid-spacing"], 50));
+        const shiftX = (this.props.isAnnotationOverlay ? 0 : -this.panX() % gridSpace - gridSpace) * this.zoomScaling();
+        const shiftY = (this.props.isAnnotationOverlay ? 0 : -this.panY() % gridSpace - gridSpace) * this.zoomScaling();
+        const renderGridSpace = gridSpace * this.zoomScaling();
+        const w = this.props.PanelWidth() + 2 * renderGridSpace;
+        const h = this.props.PanelHeight() + 2 * renderGridSpace;
+        return <canvas className="collectionFreeFormView-grid" width={w} height={h} style={{ transform: `translate(${shiftX}px, ${shiftY}px)` }}
             ref={(el) => {
                 const ctx = el?.getContext('2d');
                 if (ctx) {
-                    const Cx = (cx / this.zoomScaling()) % gridSpace - 0;
-                    const Cy = (cy / this.zoomScaling()) % gridSpace - 0;
-                    ctx.lineWidth = Math.min(1, Math.max(0.5, 0.5 / this.zoomScaling())) * (gridSpace > 50 ? 3 : 1);
+                    const Cx = this.centeringShiftX() % renderGridSpace;
+                    const Cy = this.centeringShiftY() % renderGridSpace;
+                    ctx.lineWidth = Math.min(1, Math.max(0.5, this.zoomScaling()));
                     ctx.setLineDash(gridSpace > 50 ? [3, 3] : [1, 5]);
                     ctx.clearRect(0, 0, w, h);
                     if (ctx) {
                         ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
-                        ctx.lineWidth = Math.min(1, Math.max(0.5, 0.5 / this.zoomScaling()));
                         ctx.beginPath();
-                        for (let x = Cx; x <= -Cx + w; x += gridSpace) {
+                        for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) {
                             ctx.moveTo(x, Cy - h);
                             ctx.lineTo(x, Cy + h);
                         }
-                        for (let y = Cy; y <= -Cy + h; y += gridSpace) {
+                        for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) {
                             ctx.moveTo(Cx - w, y);
                             ctx.lineTo(Cx + w, y);
                         }
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index 6e58f7f13..e0404d9d3 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -34,6 +34,7 @@ export const documentSchema = createSchema({
     _scrollLeft: "number",        // scroll position of a scrollable document (pdf, text, web)
 
     // appearance properties on the layout
+    "_backgroundGrid-spacing": "number", // the size of the grid for collection views
     _autoHeight: "boolean",     // whether the height of the document should be computed automatically based on its contents
     _nativeWidth: "number",     // native width of document which determines how much document contents are scaled when the document's width is set
     _nativeHeight: "number",    // "