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 =
+    const frameElementsOffsetsMap = new Map<
-      selectedElements.length === 1 && selectedFrames.length === 1;
+      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,
-          ? selectedElements
-          : this.scene.getSelectedElements({
-              selectedElementIds: this.state.selectedElementIds,
-              includeElementsInFrames: true,
-            }),
         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
+      const elementsToHighlight = new Set<ExcalidrawElement>();
-      if (resizingSingleFrameOnly) {
+      selectedFrames.forEach((frame) => {
-        const selectedFrame = selectedFrames[0];
+        getElementsInResizingFrame(
-        if (selectedFrame) {
+          this.scene.getNonDeletedElements(),
-          this.setState({
+          frame,
-            elementsToHighlight: getElementsInResizingFrame(
+          this.state,
-              this.scene.getNonDeletedElements(),
+        ).forEach((element) => elementsToHighlight.add(element));
-              selectedFrame,
+      });
-              this.state,
+
-            ),
+      this.setState({
-          });
+        elementsToHighlight: [...elementsToHighlight],
-        }
+      });
-      }
 
       return true;
     }