From 2b0e4ccc096998eb1d727f2e85ea8c1a63b27e08 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 18 Nov 2023 23:47:13 -0500
Subject: fixed ctrl-drag for expressions, maps, fform doc selections. fixed
 using shift to add Doc to a selection and also when bounding box already
 covers the doc to add.  fixed dragging maximize button to start goldenlayout
 drag properly.  fixed typing character to group,etc a multiselection when a
 text doc has input focus.  fixed using clusters. add Shift-U to ungroup
 alternate group style.  multi-select blurs() all active inputs.
 shift-selecting a multi-selected Doc, deselects it.

---
 .../views/collections/CollectionDockingView.tsx    |  1 +
 .../collections/CollectionStackedTimeline.tsx      |  4 ++--
 src/client/views/collections/CollectionSubView.tsx |  4 +---
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 23 ++++++++++++----------
 .../collectionGrid/CollectionGridView.tsx          |  2 +-
 5 files changed, 18 insertions(+), 16 deletions(-)

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

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9c644e2cc..f155e64b5 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -85,6 +85,7 @@ export class CollectionDockingView extends CollectionSubView() {
         const dragSource = CollectionDockingView.Instance?._goldenLayout.createDragSource(document.createElement('div'), config);
         this.tabDragStart(dragSource, finishDrag);
         dragSource._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: emptyFunction, button: 0 });
+        return true;
     };
 
     tabItemDropped = () => DragManager.CompleteWindowDrag?.(false);
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 7c61bc4da..584098d35 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -270,7 +270,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                         !wasPlaying && doubleTap && this.props.Play();
                     }
                 },
-                this.props.isSelected(true) || this.props.isContentActive(),
+                this.props.isSelected() || this.props.isContentActive(),
                 undefined,
                 () => {
                     if (shiftKey) {
@@ -681,7 +681,7 @@ interface StackedTimelineAnchorProps {
     _timeline: HTMLDivElement | null;
     focus: DocFocusFunc;
     currentTimecode: () => number;
-    isSelected: (outsideReaction?: boolean) => boolean;
+    isSelected: () => boolean;
     stackedTimeline: CollectionStackedTimeline;
     trimStart: number;
     trimEnd: number;
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index f70c85dcf..328b060c4 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -60,9 +60,7 @@ export function CollectionSubView<X>(moreProps?: X) {
             return this.props.DataDoc instanceof Doc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template
         }
 
-        rootSelected = (outsideReaction?: boolean) => {
-            return this.props.isSelected(outsideReaction) || (this.rootDoc && this.props.rootSelected(outsideReaction));
-        };
+        rootSelected = () => this.props.isSelected() || (this.rootDoc && this.props.rootSelected());
 
         // The data field for rendering this collection will be on the this.props.Document unless we're rendering a template in which case we try to use props.DataDoc.
         // When a document has a DataDoc but it's not a template, then it contains its own rendering data, but needs to pass the DataDoc through
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2801c1a4a..ba4e30a9b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -104,10 +104,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return (this.props.viewField ?? '') + '_freeform_autoReset';
     }
 
-    @computed get _layoutElements(): ViewDefResult[] {
-        const computation = this.doInternalLayoutComputation;
-        return this.doLayoutComputation(computation.newPool, computation.computedElementData);
-    }
+    @observable _layoutElements: ViewDefResult[] = [];
     @observable _panZoomTransition: number = 0; // sets the pan/zoom transform ease time- used by nudge(), focus() etc to smoothly zoom/pan.  set to 0 to use document's transition time or default of 0
     @observable _firstRender = false; // this turns off rendering of the collection's content so that there's instant feedback when a tab is switched of what content will be shown.  could be used for performance improvement
     @observable _showAnimTimeline = false;
@@ -169,7 +166,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @computed get screenToLocalXf() {
         return this.props
             .ScreenToLocalTransform()
-            .scale(this.props.isAnnotationOverlay ? 1 : 1 / this.nativeDim())
+            .scale(this.props.isAnnotationOverlay ? 1 : 1)
             .translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY)
             .transform(this.panZoomXf);
     }
@@ -551,7 +548,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     @action
-    updateCluster(doc: Doc) {
+    updateCluster = (doc: Doc) => {
         const childLayouts = this.childLayoutPairs.map(pair => pair.layout);
         if (this.props.Document._freeform_useClusters) {
             this._clusterSets.forEach(set => Doc.IndexOf(doc, set) !== -1 && set.splice(Doc.IndexOf(doc, set), 1));
@@ -580,7 +577,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 this._clusterSets[doc.layout_cluster ?? 0].push(doc);
             }
         }
-    }
+    };
 
     clusterStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => {
         let styleProp = this.props.styleProvider?.(doc, props, property); // bcz: check 'props'  used to be renderDepth + 1
@@ -1186,7 +1183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             ? 'none'
             : this.props.childPointerEvents?.() ??
               (this.props.viewDefDivClick || //
-              (engine === computePassLayout.name && !this.props.isSelected(true)) ||
+              (engine === computePassLayout.name && !this.props.isSelected()) ||
               this.isContentActive() === false
                   ? 'none'
                   : this.props.pointerEvents?.());
@@ -1471,7 +1468,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             ? 'none'
                             : this.props.childPointerEvents?.() ??
                                   (this.props.viewDefDivClick || //
-                                  (engine === computePassLayout.name && !this.props.isSelected(true)) ||
+                                  (engine === computePassLayout.name && !this.props.isSelected()) ||
                                   this.isContentActive() === false
                                       ? 'none'
                                       : this.props.pointerEvents?.());
@@ -1486,6 +1483,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 );
             })
         );
+        this._disposers.layoutElements = reaction(
+            // layoutElements can't be a computed value because doLayoutComputation() is an action that has side effect of updating clusters
+            () => this.doInternalLayoutComputation,
+            computation => (this._layoutElements = this.doLayoutComputation(computation.newPool, computation.computedElementData)),
+            { fireImmediately: true }
+        );
     }
 
     static replaceCanvases(oldDiv: HTMLElement, newDiv: HTMLElement) {
@@ -1570,7 +1573,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     componentWillUnmount() {
-        this.rootDoc[this.autoResetFieldKey]  && this.resetView()
+        this.rootDoc[this.autoResetFieldKey] && this.resetView();
         Object.values(this._disposers).forEach(disposer => disposer?.());
     }
 
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index cd8b7a0cc..274012000 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -359,7 +359,7 @@ export class CollectionGridView extends CollectionSubView() {
                 },
                 false
             );
-            if (this.props.isSelected(true)) e.stopPropagation();
+            if (this.props.isSelected()) e.stopPropagation();
         }
     };
 
-- 
cgit v1.2.3-70-g09d2