From 3ae79d3742030a255855d0c9c4ba8345f1cc73dd Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 9 Sep 2021 17:10:36 -0400
Subject: fixed infinite loop for context menus when right-clicking on them.

---
 .../collectionLinear/CollectionLinearView.tsx      | 101 +++++++++++----------
 1 file changed, 53 insertions(+), 48 deletions(-)

(limited to 'src/client/views/collections/collectionLinear/CollectionLinearView.tsx')

diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index e78ca2a32..fae92e076 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -1,8 +1,8 @@
 import { Tooltip } from '@material-ui/core';
-import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
+import { Doc, HeightSym, WidthSym, Opt } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
 import { Id } from '../../../../fields/FieldSymbols';
 import { makeInterface } from '../../../../fields/Schema';
@@ -74,9 +74,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     }
 
     dimension = () => NumCast(this.rootDoc._height); // 2 * the padding
-    getTransform = (ele: React.RefObject<HTMLDivElement>) => () => {
-        if (!ele.current) return Transform.Identity();
-        const { scale, translateX, translateY } = Utils.GetScreenTransform(ele.current);
+    getTransform = (ele: Opt<HTMLDivElement>) => {
+        if (!ele) return Transform.Identity();
+        const { scale, translateX, translateY } = Utils.GetScreenTransform(ele);
         return new Transform(-translateX, -translateY, 1);
     }
 
@@ -114,6 +114,53 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         e.preventDefault();
     }
 
+
+    getDisplayDoc(doc: Doc) {
+        const nested = doc._viewType === CollectionViewType.Linear;
+        const hidden = doc.hidden === true;;
+
+        let dref: Opt<HTMLDivElement>;
+        const docXf = () => this.getTransform(dref);
+        // const scalable = pair.layout.onClick || pair.layout.onDragStart;
+        return hidden ? (null) : <div className={`collectionLinearView-docBtn`} key={doc[Id]} ref={r => dref = r || undefined}
+            style={{
+                pointerEvents: "all",
+                width: nested ? undefined : NumCast(doc._width),
+                height: nested ? undefined : NumCast(doc._height),
+                marginLeft: !nested ? 2.5 : 0,
+                marginRight: !nested ? 2.5 : 0,
+                // width: NumCast(pair.layout._width),
+                // height: NumCast(pair.layout._height),
+            }}  >
+            <DocumentView
+                Document={doc}
+                isContentActive={this.props.isContentActive}
+                isDocumentActive={returnTrue}
+                addDocument={this.props.addDocument}
+                moveDocument={this.props.moveDocument}
+                addDocTab={this.props.addDocTab}
+                pinToPres={emptyFunction}
+                rootSelected={this.props.isSelected}
+                removeDocument={this.props.removeDocument}
+                // ScreenToLocalTransform={docXf} // bcz: Ugh -- this is what we want, but it breaks things when right-clicking on linear view item since docXf is not a constant value across invalidations
+                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                PanelWidth={nested ? doc[WidthSym] : this.dimension}
+                PanelHeight={nested ? doc[HeightSym] : this.dimension}
+                renderDepth={this.props.renderDepth + 1}
+                focus={emptyFunction}
+                styleProvider={this.props.styleProvider}
+                layerProvider={this.props.layerProvider}
+                docViewPath={returnEmptyDoclist}
+                whenChildContentsActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                docFilters={this.props.docFilters}
+                docRangeFilters={this.props.docRangeFilters}
+                searchFilterDocs={this.props.searchFilterDocs}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined} />
+        </div>;
+    }
+
     render() {
         const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
         const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
@@ -151,49 +198,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                         flexDirection: flexDir,
                         gap: flexGap
                     }}>
-                    {this.childLayoutPairs.map((pair, ind) => {
-                        const nested = pair.layout._viewType === CollectionViewType.Linear;
-                        const dref = React.createRef<HTMLDivElement>();
-                        const hidden = pair.layout.hidden === true;
-                        // const scalable = pair.layout.onClick || pair.layout.onDragStart;
-                        return hidden ? (null) : <div className={`collectionLinearView-docBtn`} key={pair.layout[Id]} ref={dref}
-                            style={{
-                                pointerEvents: "all",
-                                width: nested ? undefined : NumCast(pair.layout._width),
-                                height: nested ? undefined : NumCast(pair.layout._height),
-                                marginLeft: !nested ? 2.5 : 0,
-                                marginRight: !nested ? 2.5 : 0,
-                                // width: NumCast(pair.layout._width),
-                                // height: NumCast(pair.layout._height),
-                            }}  >
-                            <DocumentView
-                                Document={pair.layout}
-                                DataDoc={pair.data}
-                                isContentActive={this.props.isContentActive}
-                                isDocumentActive={returnTrue}
-                                addDocument={this.props.addDocument}
-                                moveDocument={this.props.moveDocument}
-                                addDocTab={this.props.addDocTab}
-                                pinToPres={emptyFunction}
-                                rootSelected={this.props.isSelected}
-                                removeDocument={this.props.removeDocument}
-                                ScreenToLocalTransform={this.getTransform(dref)}
-                                PanelWidth={nested ? pair.layout[WidthSym] : this.dimension}
-                                PanelHeight={nested ? pair.layout[HeightSym] : this.dimension}
-                                renderDepth={this.props.renderDepth + 1}
-                                focus={emptyFunction}
-                                styleProvider={this.props.styleProvider}
-                                layerProvider={this.props.layerProvider}
-                                docViewPath={returnEmptyDoclist}
-                                whenChildContentsActiveChanged={emptyFunction}
-                                bringToFront={emptyFunction}
-                                docFilters={this.props.docFilters}
-                                docRangeFilters={this.props.docRangeFilters}
-                                searchFilterDocs={this.props.searchFilterDocs}
-                                ContainingCollectionView={undefined}
-                                ContainingCollectionDoc={undefined} />
-                        </div>;
-                    })}
+                    {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
                 </div>
                 {DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background" style={{
                     pointerEvents: "all"
-- 
cgit v1.2.3-70-g09d2