From 25ab75cb9badbf000810595a463b3def7e57d5a7 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Fri, 17 Nov 2023 19:50:15 +0800
Subject: [PATCH] wip: resizing multiple frames resizes frame children

---
 src/components/App.tsx | 91 +++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 40 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 42080e831..108780d45 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8299,7 +8299,12 @@ class App extends React.Component<AppProps, AppState> {
       transformElements(
         pointerDownState,
         transformHandleType,
-        selectedElements,
+        selectedFrames.length > 1
+          ? this.scene.getSelectedElements({
+              selectedElementIds: this.state.selectedElementIds,
+              includeElementsInFrames: true,
+            })
+          : selectedElements,
         pointerDownState.resize.arrowDirection,
         shouldRotateWithDiscreteAngle(event),
         shouldResizeFromCenter(event),
@@ -8315,51 +8320,57 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       this.maybeSuggestBindingForAll(selectedElements);
 
-      const elementsToHighlight = new Set<ExcalidrawElement>();
-      selectedFrames.forEach((frame) => {
-        const elementsInFrame = getFrameChildren(
-          this.scene.getNonDeletedElements(),
-          frame.id,
-        );
+      if (selectedFrames.length === 1) {
+        const elementsToHighlight = new Set<ExcalidrawElement>();
+        selectedFrames.forEach((frame) => {
+          const elementsInFrame = getFrameChildren(
+            this.scene.getNonDeletedElements(),
+            frame.id,
+          );
 
-        // keep elements' positions relative to their frames on frames resizing
-        if (transformHandleType) {
-          if (transformHandleType.includes("w")) {
-            elementsInFrame.forEach((element) => {
-              mutateElement(element, {
-                x:
-                  frame.x +
-                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
-                y:
-                  frame.y +
-                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+          // keep elements' positions relative to their frames on frames resizing
+          if (transformHandleType) {
+            if (transformHandleType.includes("w")) {
+              elementsInFrame.forEach((element) => {
+                mutateElement(element, {
+                  x:
+                    frame.x +
+                    (frameElementsOffsetsMap.get(frame.id + element.id)?.x ||
+                      0),
+                  y:
+                    frame.y +
+                    (frameElementsOffsetsMap.get(frame.id + element.id)?.y ||
+                      0),
+                });
               });
-            });
-          }
-          if (transformHandleType.includes("n")) {
-            elementsInFrame.forEach((element) => {
-              mutateElement(element, {
-                x:
-                  frame.x +
-                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
-                y:
-                  frame.y +
-                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+            }
+            if (transformHandleType.includes("n")) {
+              elementsInFrame.forEach((element) => {
+                mutateElement(element, {
+                  x:
+                    frame.x +
+                    (frameElementsOffsetsMap.get(frame.id + element.id)?.x ||
+                      0),
+                  y:
+                    frame.y +
+                    (frameElementsOffsetsMap.get(frame.id + element.id)?.y ||
+                      0),
+                });
               });
-            });
+            }
           }
-        }
 
-        getElementsInResizingFrame(
-          this.scene.getNonDeletedElements(),
-          frame,
-          this.state,
-        ).forEach((element) => elementsToHighlight.add(element));
-      });
+          getElementsInResizingFrame(
+            this.scene.getNonDeletedElements(),
+            frame,
+            this.state,
+          ).forEach((element) => elementsToHighlight.add(element));
+        });
 
-      this.setState({
-        elementsToHighlight: [...elementsToHighlight],
-      });
+        this.setState({
+          elementsToHighlight: [...elementsToHighlight],
+        });
+      }
 
       return true;
     }