cleaned up recomputing group bounds to use a reaction

2 files changed, 26 insertions, 9 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index e3de80009..378c67253 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -90,12 +90,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return this.propertyToggleBtn("Grid", "_backgroundGridShow", on => `Display background grid in collection`, on => "border-all");
     }
     @computed get groupButton() {
-        return this.propertyToggleBtn("Group", "isGroup", on => `Display collection as a Group`, on => "object-group", (dv, doc) => {
-            doc.isGroup = !doc.isGroup;
-            doc.forceActive = doc.isGroup;
-            const dview = dv || DocumentManager.Instance.getFirstDocumentView(doc);
-            (dview?.ComponentView as CollectionFreeFormView)?.updateGroupBounds?.()
-        });
+        return this.propertyToggleBtn("Group", "isGroup", on => `Display collection as a Group`, on => "object-group", (dv, doc) => { doc.isGroup = !doc.isGroup; doc.forceActive = doc.isGroup; });
     }
     @computed get snapButton() {
         return this.propertyToggleBtn("Snap\xA0Lines", "showSnapLines", on => `Display snapping lines when objects are dragged`, on => "border-all", undefined, true);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ef127d328..d73aed07c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -212,7 +212,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     updateGroupBounds = () => {
         if (!this.props.Document._isGroup) return;
         const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[WidthSym](), height: cd[HeightSym]() }));
-        const cbounds = aggregateBounds(clist, 0, 0);
+        const cbounds = aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding));
         const c = [NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym]() / 2, NumCast(this.layoutDoc.y) + this.layoutDoc[HeightSym]() / 2];
         const p = [NumCast(this.layoutDoc._panX), NumCast(this.layoutDoc._panY)];
         const pbounds = {
@@ -269,7 +269,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             !StrListCast(d._layerTags).includes(StyleLayers.Background) && (d._raiseWhenDragged === undefined ? Doc.UserDoc()._raiseWhenDragged : d._raiseWhenDragged) && (d.zIndex = zsorted.length + 1 + i); // bringToFront
         }
 
-        this.updateGroupBounds();
+        //this.updateGroupBounds();
 
         (docDragData.droppedDocuments.length === 1 || de.shiftKey) && this.updateClusterDocs(docDragData.droppedDocuments);
         return true;
@@ -1236,7 +1236,29 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             { fireImmediately: true, name: "doLayout" });
 
         this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
-        this.rootDoc.isGroup && this.updateGroupBounds()
+        // this.rootDoc.isGroup && this.updateGroupBounds();
+
+        this._disposers.groupBounds = reaction(() => {
+            if (!this.props.Document._isGroup) return { pbounds: undefined, cbounds: undefined };
+            const clist = this.childDocs.map(cd => ({ x: NumCast(cd.x), y: NumCast(cd.y), width: cd[WidthSym](), height: cd[HeightSym]() }));
+            const cbounds = aggregateBounds(clist, NumCast(this.layoutDoc._xPadding), NumCast(this.layoutDoc._yPadding));
+            const c = [NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym]() / 2, NumCast(this.layoutDoc.y) + this.layoutDoc[HeightSym]() / 2];
+            const p = [NumCast(this.layoutDoc._panX), NumCast(this.layoutDoc._panY)];
+            const pbounds = {
+                x: (cbounds.x - p[0]) * this.zoomScaling() + c[0], y: (cbounds.y - p[1]) * this.zoomScaling() + c[1],
+                r: (cbounds.r - p[0]) * this.zoomScaling() + c[0], b: (cbounds.b - p[1]) * this.zoomScaling() + c[1]
+            };
+            return { pbounds, cbounds };
+        }, ({ pbounds, cbounds }) => {
+            if (pbounds && cbounds) {
+                this.layoutDoc._width = (pbounds.r - pbounds.x);
+                this.layoutDoc._height = (pbounds.b - pbounds.y);
+                this.layoutDoc._panX = (cbounds.r + cbounds.x) / 2;
+                this.layoutDoc._panY = (cbounds.b + cbounds.y) / 2;
+                this.layoutDoc.x = pbounds.x;
+                this.layoutDoc.y = pbounds.y;
+            }
+        }, { fireImmediately: true });
     }
 
     componentWillUnmount() {