improve efficiency for scenes with lots of documents by using computed functions to avoid invalidations. moved grid renderer to its own component to avoid invalidations when panning/zooming.

1 files changed, 6 insertions, 4 deletions

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 460982c8a..235c8accb 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -18,17 +18,18 @@ import { StyleProp } from "../StyleProvider";
 import "./CollectionFreeFormDocumentView.scss";
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import React = require("react");
+import { Id } from "../../../fields/FieldSymbols";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined;
     sizeProvider?: (doc: Doc, replica: string) => { width: number, height: number } | undefined;
     layerProvider: ((doc: Doc, assign?: boolean) => boolean) | undefined;
+    renderCutoffProvider: (doc: Doc) => boolean;
     zIndex?: number;
     highlight?: boolean;
     jitterRotation: number;
     dataTransition?: string;
     replica: string;
-    renderCutoff: () => number;
     renderIndex: number;
     CollectionFreeFormView: CollectionFreeFormView;
 }
@@ -178,10 +179,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 mixBlendMode,
                 display: this.ZInd === -99 ? "none" : undefined
             }} >
-            {this.props.renderCutoff() >= this.props.renderIndex ?
-                <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
+            {this.props.renderCutoffProvider(this.props.Document) ?
+                <div style={{ position: "absolute", width: this.panelWidth(), height: this.panelHeight(), background: "lightGreen" }} />
                 :
-                <div style={{ position: "absolute", width: this.panelWidth(), height: this.panelHeight(), background: "lightGreen" }}></div>}
+                <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
+            }
         </div>;
     }
 }