refactor: decoupling global Scene state part-1 (#7577)

packages/excalidraw/actions/actionFlip.ts

@@ -1,9 +1,13 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
+import {
+  ExcalidrawElement,
+  NonDeleted,
+  NonDeletedElementsMap,
+} from "../element/types";
 import { resizeMultipleElements } from "../element/resizeElements";
-import { AppState, PointerDownState } from "../types";
+import { AppState } from "../types";
 import { arrayToMap } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { getCommonBoundingBox } from "../element/bounds";
@@ -20,7 +24,12 @@ export const actionFlipHorizontal = register({
   perform: (elements, appState, _, app) => {
     return {
       elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "horizontal"),
+        flipSelectedElements(
+          elements,
+          app.scene.getNonDeletedElementsMap(),
+          appState,
+          "horizontal",
+        ),
         appState,
         app,
       ),
@@ -38,7 +47,12 @@ export const actionFlipVertical = register({
   perform: (elements, appState, _, app) => {
     return {
       elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "vertical"),
+        flipSelectedElements(
+          elements,
+          app.scene.getNonDeletedElementsMap(),
+          appState,
+          "vertical",
+        ),
         appState,
         app,
       ),
@@ -53,6 +67,7 @@ export const actionFlipVertical = register({
 
 const flipSelectedElements = (
   elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedElementsMap,
   appState: Readonly<AppState>,
   flipDirection: "horizontal" | "vertical",
 ) => {
@@ -67,6 +82,7 @@ const flipSelectedElements = (
 
   const updatedElements = flipElements(
     selectedElements,
+    elementsMap,
     appState,
     flipDirection,
   );
@@ -79,15 +95,17 @@ const flipSelectedElements = (
 };
 
 const flipElements = (
-  elements: NonDeleted<ExcalidrawElement>[],
+  selectedElements: NonDeleted<ExcalidrawElement>[],
+  elementsMap: NonDeletedElementsMap,
   appState: AppState,
   flipDirection: "horizontal" | "vertical",
 ): ExcalidrawElement[] => {
-  const { minX, minY, maxX, maxY } = getCommonBoundingBox(elements);
+  const { minX, minY, maxX, maxY } = getCommonBoundingBox(selectedElements);
 
   resizeMultipleElements(
-    { originalElements: arrayToMap(elements) } as PointerDownState,
-    elements,
+    elementsMap,
+    selectedElements,
+    elementsMap,
     "nw",
     true,
     flipDirection === "horizontal" ? maxX : minX,
@@ -96,7 +114,7 @@ const flipElements = (
 
   (isBindingEnabled(appState)
     ? bindOrUnbindSelectedElements
-    : unbindLinearElements)(elements);
+    : unbindLinearElements)(selectedElements);
 
-  return elements;
+  return selectedElements;
 };

packages/excalidraw/actions/actionFrame.ts

@@ -63,11 +63,7 @@ export const actionRemoveAllElementsFromFrame = register({
 
     if (isFrameLikeElement(selectedElement)) {
       return {
-        elements: removeAllElementsFromFrame(
-          elements,
-          selectedElement,
-          appState,
-        ),
+        elements: removeAllElementsFromFrame(elements, selectedElement),
         appState: {
           ...appState,
           selectedElementIds: {

packages/excalidraw/actions/actionGroup.tsx

@@ -105,11 +105,7 @@ export const actionGroup = register({
       const frameElementsMap = groupByFrameLikes(selectedElements);
 
       frameElementsMap.forEach((elementsInFrame, frameId) => {
-        nextElements = removeElementsFromFrame(
-          nextElements,
-          elementsInFrame,
-          appState,
-        );
+        removeElementsFromFrame(elementsInFrame);
       });
     }
 
@@ -229,7 +225,6 @@ export const actionUngroup = register({
           nextElements,
           getElementsInResizingFrame(nextElements, frame, appState),
           frame,
-          appState,
         );
       }
     });

packages/excalidraw/actions/actionProperties.tsx

@@ -1,4 +1,4 @@
-import { AppState, Primitive } from "../types";
+import { AppClassProperties, AppState, Primitive } from "../types";
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -66,7 +66,6 @@ import {
 import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
   getBoundTextElement,
-  getContainerElement,
   getDefaultLineHeight,
 } from "../element/textElement";
 import {
@@ -189,6 +188,7 @@ const offsetElementAfterFontResize = (
 const changeFontSize = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  app: AppClassProperties,
   getNewFontSize: (element: ExcalidrawTextElement) => number,
   fallbackValue?: ExcalidrawTextElement["fontSize"],
 ) => {
@@ -206,7 +206,10 @@ const changeFontSize = (
           let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
             fontSize: newFontSize,
           });
-          redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+          redrawTextBoundingBox(
+            newElement,
+            app.scene.getContainerElement(oldElement),
+          );
 
           newElement = offsetElementAfterFontResize(oldElement, newElement);
 
@@ -600,8 +603,8 @@ export const actionChangeOpacity = register({
 export const actionChangeFontSize = register({
   name: "changeFontSize",
   trackEvent: false,
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value, value);
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, () => value, value);
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <fieldset>
@@ -663,8 +666,8 @@ export const actionChangeFontSize = register({
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
   trackEvent: false,
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, (element) =>
       Math.round(
         // get previous value before relative increase (doesn't work fully
         // due to rounding and float precision issues)
@@ -685,8 +688,8 @@ export const actionDecreaseFontSize = register({
 export const actionIncreaseFontSize = register({
   name: "increaseFontSize",
   trackEvent: false,
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, (element) =>
       Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
     );
   },
@@ -703,7 +706,7 @@ export const actionIncreaseFontSize = register({
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   trackEvent: false,
-  perform: (elements, appState, value) => {
+  perform: (elements, appState, value, app) => {
     return {
       elements: changeProperty(
         elements,
@@ -717,7 +720,10 @@ export const actionChangeFontFamily = register({
                 lineHeight: getDefaultLineHeight(value),
               },
             );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+            redrawTextBoundingBox(
+              newElement,
+              app.scene.getContainerElement(oldElement),
+            );
             return newElement;
           }
 
@@ -795,7 +801,7 @@ export const actionChangeFontFamily = register({
 export const actionChangeTextAlign = register({
   name: "changeTextAlign",
   trackEvent: false,
-  perform: (elements, appState, value) => {
+  perform: (elements, appState, value, app) => {
     return {
       elements: changeProperty(
         elements,
@@ -806,7 +812,10 @@ export const actionChangeTextAlign = register({
               oldElement,
               { textAlign: value },
             );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+            redrawTextBoundingBox(
+              newElement,
+              app.scene.getContainerElement(oldElement),
+            );
             return newElement;
           }
 
@@ -875,7 +884,7 @@ export const actionChangeTextAlign = register({
 export const actionChangeVerticalAlign = register({
   name: "changeVerticalAlign",
   trackEvent: { category: "element" },
-  perform: (elements, appState, value) => {
+  perform: (elements, appState, value, app) => {
     return {
       elements: changeProperty(
         elements,
@@ -887,7 +896,10 @@ export const actionChangeVerticalAlign = register({
               { verticalAlign: value },
             );
 
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+            redrawTextBoundingBox(
+              newElement,
+              app.scene.getContainerElement(oldElement),
+            );
             return newElement;
           }