feat: Widen ActionName and ShortcutName to include custom.${string}

src/actions/shortcuts.ts

@@ -2,11 +2,12 @@ import { isDarwin } from "../constants";
 import { t } from "../i18n";
 import { SubtypeOf } from "../utility-types";
 import { getShortcutKey } from "../utils";
-import { ActionName } from "./types";
+import { ActionName, CustomActionName } from "./types";
 
 export type ShortcutName =
   | SubtypeOf<
       ActionName,
+      | CustomActionName
       | "toggleTheme"
       | "loadScene"
       | "clearCanvas"
@@ -40,6 +41,15 @@ export type ShortcutName =
   | "saveScene"
   | "imageExport";
 
+export const registerCustomShortcuts = (
+  shortcuts: Record<CustomActionName, string[]>,
+) => {
+  for (const key in shortcuts) {
+    const shortcut = key as CustomActionName;
+    shortcutMap[shortcut] = shortcuts[shortcut];
+  }
+};
+
 const shortcutMap: Record<ShortcutName, string[]> = {
   toggleTheme: [getShortcutKey("Shift+Alt+D")],
   saveScene: [getShortcutKey("CtrlOrCmd+S")],

src/actions/types.ts

@@ -35,7 +35,11 @@ type ActionFn = (
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
 
+export const makeCustomActionName = (name: string) =>
+  `custom.${name}` as CustomActionName;
+export type CustomActionName = `custom.${string}`;
 export type ActionName =
+  | CustomActionName
   | "copy"
   | "cut"
   | "paste"

src/components/App.tsx

@@ -8238,8 +8238,27 @@ class App extends React.Component<AppProps, AppState> {
       event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
     );
 
-    const resizingSingleFrameOnly =
-      selectedElements.length === 1 && selectedFrames.length === 1;
+    const frameElementsOffsetsMap = new Map<
+      string,
+      {
+        x: number;
+        y: number;
+      }
+    >();
+
+    selectedFrames.forEach((frame) => {
+      const elementsInFrame = getFrameChildren(
+        this.scene.getNonDeletedElements(),
+        frame.id,
+      );
+
+      elementsInFrame.forEach((element) => {
+        frameElementsOffsetsMap.set(frame.id + element.id, {
+          x: element.x - frame.x,
+          y: element.y - frame.y,
+        });
+      });
+    });
 
     // check needed for avoiding flickering when a key gets pressed
     // during dragging
@@ -8280,12 +8299,7 @@ class App extends React.Component<AppProps, AppState> {
       transformElements(
         pointerDownState,
         transformHandleType,
-        resizingSingleFrameOnly
-          ? selectedElements
-          : this.scene.getSelectedElements({
-              selectedElementIds: this.state.selectedElementIds,
-              includeElementsInFrames: true,
-            }),
+        selectedElements,
         pointerDownState.resize.arrowDirection,
         shouldRotateWithDiscreteAngle(event),
         shouldResizeFromCenter(event),
@@ -8301,19 +8315,18 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       this.maybeSuggestBindingForAll(selectedElements);
 
-      // highlight frame children ONLY when resizing a single frame
-      if (resizingSingleFrameOnly) {
-        const selectedFrame = selectedFrames[0];
-        if (selectedFrame) {
-          this.setState({
-            elementsToHighlight: getElementsInResizingFrame(
-              this.scene.getNonDeletedElements(),
-              selectedFrame,
-              this.state,
-            ),
-          });
-        }
-      }
+      const elementsToHighlight = new Set<ExcalidrawElement>();
+      selectedFrames.forEach((frame) => {
+        getElementsInResizingFrame(
+          this.scene.getNonDeletedElements(),
+          frame,
+          this.state,
+        ).forEach((element) => elementsToHighlight.add(element));
+      });
+
+      this.setState({
+        elementsToHighlight: [...elementsToHighlight],
+      });
 
       return true;
     }