changed collection background grid to dots like figma until zoomed in, then lines.

1 files changed, 23 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 079f1b9d6..1e341f60d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -16,7 +16,7 @@ import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } fro
 import { ImageField } from '../../../../fields/URLField';
 import { TraceMobx } from '../../../../fields/util';
 import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
-import { aggregateBounds, emptyFunction, intersectRect, lightOrDark, returnFalse, returnNone, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { aggregateBounds, DashColor, emptyFunction, intersectRect, lightOrDark, returnFalse, returnNone, returnZero, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
 import { Docs, DocUtils } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
@@ -1918,7 +1918,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     showPresPaths = () => (CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.getPaths(this.rootDoc) : null);
     brushedView = () => this._brushedView;
-    gridColor = () => lightOrDark(this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor + ':box'));
+    gridColor = () =>
+        DashColor(lightOrDark(this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor)))
+            .fade(0.6)
+            .toString();
     @computed get marqueeView() {
         TraceMobx();
         return (
@@ -2187,9 +2190,9 @@ interface CollectionFreeFormViewBackgroundGridProps {
 @observer
 class CollectionFreeFormBackgroundGrid extends React.Component<CollectionFreeFormViewBackgroundGridProps> {
     chooseGridSpace = (gridSpace: number): number => {
-        if (!this.props.zoomScaling()) return 50;
-        const divisions = this.props.PanelWidth() / this.props.zoomScaling() / gridSpace + 3;
-        return divisions < 60 ? gridSpace : this.chooseGridSpace(gridSpace * 10);
+        if (!this.props.zoomScaling()) return gridSpace;
+        const divisions = this.props.PanelWidth() / this.props.zoomScaling() / gridSpace;
+        return divisions < 90 ? gridSpace : this.chooseGridSpace(gridSpace * 2);
     };
     render() {
         const gridSpace = this.chooseGridSpace(NumCast(this.props.layoutDoc['_backgroundGrid-spacing'], 50));
@@ -2215,14 +2218,22 @@ class CollectionFreeFormBackgroundGrid extends React.Component<CollectionFreeFor
                         ctx.clearRect(0, 0, w, h);
                         if (ctx) {
                             ctx.strokeStyle = strokeStyle;
+                            ctx.fillStyle = strokeStyle;
                             ctx.beginPath();
-                            for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) {
-                                ctx.moveTo(x, Cy - h);
-                                ctx.lineTo(x, Cy + h);
-                            }
-                            for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) {
-                                ctx.moveTo(Cx - w, y);
-                                ctx.lineTo(Cx + w, y);
+                            if (this.props.zoomScaling() > 1) {
+                                for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace) {
+                                    ctx.moveTo(x, Cy - h);
+                                    ctx.lineTo(x, Cy + h);
+                                }
+                                for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) {
+                                    ctx.moveTo(Cx - w, y);
+                                    ctx.lineTo(Cx + w, y);
+                                }
+                            } else {
+                                for (let x = Cx - renderGridSpace; x <= w - Cx; x += renderGridSpace)
+                                    for (let y = Cy - renderGridSpace; y <= h - Cy; y += renderGridSpace) {
+                                        ctx.fillRect(Math.round(x), Math.round(y), 1, 1);
+                                    }
                             }
                             ctx.stroke();
                         }