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.

1 files changed, 13 insertions, 10 deletions

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?.());
     }