From 53d456afb43b70cc240bc6a37094fa37cfe37436 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 12 Oct 2023 11:24:19 -0400
Subject: performance fixes to reduce re-rendering : moved link brushing out of
 Doc's highlighting and into Annotation.tsx, stopped freeformview from
 rerendering whenever its invalidated by not always setting layoutElements to
 a new list.

---
 src/client/views/collections/CollectionSubView.tsx     |  4 ++--
 .../collectionFreeForm/CollectionFreeFormView.tsx      | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

(limited to 'src/client/views/collections')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 158f9d8ee..011bc1de5 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -67,7 +67,7 @@ export function CollectionSubView<X>(moreProps?: X) {
             return this.layoutDoc[this.props.fieldKey];
         }
 
-        get childLayoutPairs(): { layout: Doc; data: Doc }[] {
+        @computed get childLayoutPairs(): { layout: Doc; data: Doc }[] {
             const { Document, DataDoc } = this.props;
             const validPairs = this.childDocs
                 .map(doc => Doc.GetLayoutDataDocPair(Document, !this.props.isAnnotationOverlay ? DataDoc : undefined, doc))
@@ -77,7 +77,7 @@ export function CollectionSubView<X>(moreProps?: X) {
                 });
             return validPairs.map(({ data, layout }) => ({ data: data as Doc, layout: layout! })); // this mapping is a bit of a hack to coerce types
         }
-        get childDocList() {
+        @computed get childDocList() {
             return Cast(this.dataField, listSpec(Doc));
         }
         collectionFilters = () => this._focusFilters ?? StrListCast(this.props.Document._childFilters);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3a8e8f2ef..407f18d62 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,6 +1,6 @@
 import { Bezier } from 'bezier-js';
 import { Colors } from 'browndash-components';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import { DateField } from '../../../../fields/DateField';
@@ -59,7 +59,7 @@ export type collectionFreeformViewProps = {
     originTopLeft?: boolean;
     annotationLayerHostsContent?: boolean; // whether to force scaling of content (needed by ImageBox)
     viewDefDivClick?: ScriptField;
-    childPointerEvents?: string;
+    childPointerEvents?: () => string | undefined;
     viewField?: string;
     noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale)
     engineProps?: any;
@@ -1082,7 +1082,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case freeformScrollMode.Pan:
                 // if ctrl is selected then zoom
                 if (!e.ctrlKey && this.props.isContentActive(true)) {
-                    this.scrollPan({ deltaX: -e.deltaX, deltaY: e.shiftKey ? 0 : -e.deltaY });
+                    this.scrollPan({ deltaX: -e.deltaX * this.getTransform().Scale, deltaY: e.shiftKey ? 0 : -e.deltaY * this.getTransform().Scale });
                     break;
                 }
             default:
@@ -1292,7 +1292,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine);
         const pointerEvents = DocumentView.Interacting
             ? 'none'
-            : this.props.childPointerEvents ?? (this.props.viewDefDivClick || (engine === computePassLayout.name && !this.props.isSelected(true)) || this.isContentActive() === false ? 'none' : this.props.pointerEvents?.());
+            : this.props.childPointerEvents?.() ?? (this.props.viewDefDivClick || (engine === computePassLayout.name && !this.props.isSelected(true)) || this.isContentActive() === false ? 'none' : this.props.pointerEvents?.());
         return pointerEvents;
     }
     pointerEvents = () => this._pointerEvents;
@@ -1511,6 +1511,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     get doLayoutComputation() {
         const { newPool, computedElementData } = this.doInternalLayoutComputation;
         const array = Array.from(newPool.entries());
+        let somethingChanged = false;
         runInAction(() => {
             for (const entry of array) {
                 const lastPos = this._cachedPool.get(entry[0]); // last computed pos
@@ -1528,12 +1529,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     newPos.transition !== lastPos.transition
                 ) {
                     this._layoutPoolData.set(entry[0], newPos);
+                    somethingChanged = true;
                 }
                 if (!lastPos || newPos.height !== lastPos.height || newPos.width !== lastPos.width) {
                     this._layoutSizeData.set(entry[0], { width: newPos.width, height: newPos.height });
+                    somethingChanged = true;
                 }
             }
         });
+        if (!somethingChanged) return undefined;
         this._cachedPool.clear();
         Array.from(newPool.entries()).forEach(k => this._cachedPool.set(k[0], k[1]));
         const elements = computedElementData.slice();
@@ -1609,7 +1613,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
                 this._disposers.layoutComputation = reaction(
                     () => this.doLayoutComputation,
-                    elements => (this._layoutElements = elements || []),
+                    elements => {
+                        if (elements !== undefined) this._layoutElements = elements || [];
+                    },
                     { fireImmediately: true, name: 'doLayout' }
                 );
 
@@ -1917,7 +1923,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             <MarqueeView
                 {...this.props}
                 ref={this._marqueeViewRef}
-                ungroup={this.props.Document._isGroup ? this.promoteCollection : undefined}
+                ungroup={this.rootDoc._isGroup ? this.promoteCollection : undefined}
                 nudge={this.isAnnotationOverlay || this.props.renderDepth > 0 ? undefined : this.nudge}
                 addDocTab={this.addDocTab}
                 slowLoadDocuments={this.slowLoadDocuments}
-- 
cgit v1.2.3-70-g09d2