feat: stop storing selection element into appState.draggingElement

src/actions/actionBoundText.tsx

@@ -10,7 +10,7 @@ import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
-  measureTextElement,
+  measureText,
   redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@@ -31,6 +31,7 @@ import {
 } from "../element/types";
 import { AppState } from "../types";
 import { Mutable } from "../utility-types";
+import { getFontString } from "../utils";
 import { register } from "./register";
 
 export const actionUnbindText = register({
@@ -47,11 +48,10 @@ export const actionUnbindText = register({
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        const { width, height, baseline } = measureTextElement(
-          boundTextElement,
-          {
-            text: boundTextElement.originalText,
-          },
+        const { width, height, baseline } = measureText(
+          boundTextElement.originalText,
+          getFontString(boundTextElement),
+          boundTextElement.lineHeight,
         );
         const originalContainerHeight = getOriginalContainerHeightFromCache(
           element.id,

src/actions/actionFinalize.tsx

@@ -170,6 +170,7 @@ export const actionFinalize = register({
             : activeTool,
         activeEmbeddable: null,
         draggingElement: null,
+        selectionElement: null,
         multiElement: null,
         editingElement: null,
         startBoundElement: null,
@@ -196,7 +197,9 @@ export const actionFinalize = register({
   keyTest: (event, appState) =>
     (event.key === KEYS.ESCAPE &&
       (appState.editingLinearElement !== null ||
-        (!appState.draggingElement && appState.multiElement === null))) ||
+        (!appState.selectionElement &&
+          !appState.draggingElement &&
+          appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
   PanelComponent: ({ appState, updateData, data }) => (

src/actions/actionHistory.tsx

@@ -21,6 +21,7 @@ const writeData = (
     !appState.multiElement &&
     !appState.resizingElement &&
     !appState.editingElement &&
+    !appState.selectionElement &&
     !appState.draggingElement
   ) {
     const data = updater();

src/components/App.tsx

@@ -3014,7 +3014,8 @@ class App extends React.Component<AppProps, AppState> {
         !event.ctrlKey &&
         !event.altKey &&
         !event.metaKey &&
-        this.state.draggingElement === null
+        !this.state.draggingElement &&
+        !this.state.selectionElement
       ) {
         const shape = findShapeByKey(event.key);
         if (shape) {
@@ -3343,6 +3344,7 @@ class App extends React.Component<AppProps, AppState> {
 
         this.setState({
           draggingElement: null,
+          selectionElement: null,
           editingElement: null,
         });
         if (this.state.activeTool.locked) {
@@ -4421,8 +4423,7 @@ class App extends React.Component<AppProps, AppState> {
     // finger is lifted
     if (
       event.pointerType === "touch" &&
-      this.state.draggingElement &&
-      this.state.draggingElement.type === "freedraw"
+      this.state.draggingElement?.type === "freedraw"
     ) {
       const element = this.state.draggingElement as ExcalidrawFreeDrawElement;
       this.updateScene({
@@ -4434,6 +4435,7 @@ class App extends React.Component<AppProps, AppState> {
             }
           : {}),
         appState: {
+          selectionElement: null,
           draggingElement: null,
           editingElement: null,
           startBoundElement: null,
@@ -4561,13 +4563,16 @@ class App extends React.Component<AppProps, AppState> {
       // retrieve the latest element as the state may be stale
       const pendingImageElement =
         this.state.pendingImageElementId &&
-        this.scene.getElement(this.state.pendingImageElementId);
+        this.scene.getElement<ExcalidrawImageElement>(
+          this.state.pendingImageElementId,
+        );
 
       if (!pendingImageElement) {
         return;
       }
 
       this.setState({
+        selectionElement: null,
         draggingElement: pendingImageElement,
         editingElement: pendingImageElement,
         pendingImageElementId: null,
@@ -5374,6 +5379,7 @@ class App extends React.Component<AppProps, AppState> {
     );
     this.scene.addNewElement(element);
     this.setState({
+      selectionElement: null,
       draggingElement: element,
       editingElement: element,
       startBoundElement: boundElement,
@@ -5593,6 +5599,7 @@ class App extends React.Component<AppProps, AppState> {
 
       this.scene.addNewElement(element);
       this.setState({
+        selectionElement: null,
         draggingElement: element,
         editingElement: element,
         startBoundElement: boundElement,
@@ -5667,12 +5674,13 @@ class App extends React.Component<AppProps, AppState> {
     if (element.type === "selection") {
       this.setState({
         selectionElement: element,
-        draggingElement: element,
+        draggingElement: null,
       });
     } else {
       this.scene.addNewElement(element);
       this.setState({
         multiElement: null,
+        selectionElement: null,
         draggingElement: element,
         editingElement: element,
       });
@@ -5705,6 +5713,7 @@ class App extends React.Component<AppProps, AppState> {
 
     this.setState({
       multiElement: null,
+      selectionElement: null,
       draggingElement: frame,
       editingElement: frame,
     });
@@ -5763,7 +5772,9 @@ class App extends React.Component<AppProps, AppState> {
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
-      this.maybeDragNewGenericElement(pointerDownState, event);
+      if (!this.maybeUpdateSelectionElement(pointerDownState, event)) {
+        this.maybeDragNewGenericElement(pointerDownState, event);
+      }
     });
   }
 
@@ -5776,7 +5787,9 @@ class App extends React.Component<AppProps, AppState> {
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
-      this.maybeDragNewGenericElement(pointerDownState, event);
+      if (!this.maybeUpdateSelectionElement(pointerDownState, event)) {
+        this.maybeDragNewGenericElement(pointerDownState, event);
+      }
     });
   }
 
@@ -6132,6 +6145,13 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
+      pointerDownState.lastCoords.x = pointerCoords.x;
+      pointerDownState.lastCoords.y = pointerCoords.y;
+
+      if (this.maybeHandleBoxSelection(pointerDownState, event)) {
+        return;
+      }
+
       // It is very important to read this.state within each move event,
       // otherwise we would read a stale one!
       const draggingElement = this.state.draggingElement;
@@ -6199,105 +6219,6 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.lastCoords.y = pointerCoords.y;
         this.maybeDragNewGenericElement(pointerDownState, event);
       }
-
-      if (this.state.activeTool.type === "selection") {
-        pointerDownState.boxSelection.hasOccurred = true;
-
-        const elements = this.scene.getNonDeletedElements();
-
-        // box-select line editor points
-        if (this.state.editingLinearElement) {
-          LinearElementEditor.handleBoxSelection(
-            event,
-            this.state,
-            this.setState.bind(this),
-          );
-          // regular box-select
-        } else {
-          let shouldReuseSelection = true;
-
-          if (!event.shiftKey && isSomeElementSelected(elements, this.state)) {
-            if (
-              pointerDownState.withCmdOrCtrl &&
-              pointerDownState.hit.element
-            ) {
-              this.setState((prevState) =>
-                selectGroupsForSelectedElements(
-                  {
-                    ...prevState,
-                    selectedElementIds: {
-                      [pointerDownState.hit.element!.id]: true,
-                    },
-                  },
-                  this.scene.getNonDeletedElements(),
-                  prevState,
-                  this,
-                ),
-              );
-            } else {
-              shouldReuseSelection = false;
-            }
-          }
-          const elementsWithinSelection = getElementsWithinSelection(
-            elements,
-            draggingElement,
-          );
-
-          this.setState((prevState) => {
-            const nextSelectedElementIds = {
-              ...(shouldReuseSelection && prevState.selectedElementIds),
-              ...elementsWithinSelection.reduce(
-                (acc: Record<ExcalidrawElement["id"], true>, element) => {
-                  acc[element.id] = true;
-                  return acc;
-                },
-                {},
-              ),
-            };
-
-            if (pointerDownState.hit.element) {
-              // if using ctrl/cmd, select the hitElement only if we
-              // haven't box-selected anything else
-              if (!elementsWithinSelection.length) {
-                nextSelectedElementIds[pointerDownState.hit.element.id] = true;
-              } else {
-                delete nextSelectedElementIds[pointerDownState.hit.element.id];
-              }
-            }
-
-            prevState = !shouldReuseSelection
-              ? { ...prevState, selectedGroupIds: {}, editingGroupId: null }
-              : prevState;
-
-            return {
-              ...selectGroupsForSelectedElements(
-                {
-                  editingGroupId: prevState.editingGroupId,
-                  selectedElementIds: nextSelectedElementIds,
-                },
-                this.scene.getNonDeletedElements(),
-                prevState,
-                this,
-              ),
-              // select linear element only when we haven't box-selected anything else
-              selectedLinearElement:
-                elementsWithinSelection.length === 1 &&
-                isLinearElement(elementsWithinSelection[0])
-                  ? new LinearElementEditor(
-                      elementsWithinSelection[0],
-                      this.scene,
-                    )
-                  : null,
-              showHyperlinkPopup:
-                elementsWithinSelection.length === 1 &&
-                (elementsWithinSelection[0].link ||
-                  isEmbeddableElement(elementsWithinSelection[0]))
-                  ? "info"
-                  : false,
-            };
-          });
-        }
-      }
     });
   }
 
@@ -6558,6 +6479,7 @@ class App extends React.Component<AppProps, AppState> {
             resetCursor(this.interactiveCanvas);
             this.setState((prevState) => ({
               draggingElement: null,
+              selectionElement: null,
               activeTool: updateActiveTool(this.state, {
                 type: "selection",
               }),
@@ -6576,6 +6498,7 @@ class App extends React.Component<AppProps, AppState> {
           } else {
             this.setState((prevState) => ({
               draggingElement: null,
+              selectionElement: null,
             }));
           }
         }
@@ -6595,140 +6518,137 @@ class App extends React.Component<AppProps, AppState> {
         );
         this.setState({
           draggingElement: null,
+          selectionElement: null,
         });
         return;
       }
 
-      if (draggingElement) {
-        if (pointerDownState.drag.hasOccurred) {
-          const sceneCoords = viewportCoordsToSceneCoords(
-            childEvent,
-            this.state,
+      if (pointerDownState.drag.hasOccurred) {
+        const sceneCoords = viewportCoordsToSceneCoords(childEvent, this.state);
+
+        // when editing the points of a linear element, we check if the
+        // linear element still is in the frame afterwards
+        // if not, the linear element will be removed from its frame (if any)
+        if (
+          this.state.selectedLinearElement &&
+          this.state.selectedLinearElement.isDragging
+        ) {
+          const linearElement = this.scene.getElement(
+            this.state.selectedLinearElement.elementId,
           );
 
-          // when editing the points of a linear element, we check if the
-          // linear element still is in the frame afterwards
-          // if not, the linear element will be removed from its frame (if any)
-          if (
-            this.state.selectedLinearElement &&
-            this.state.selectedLinearElement.isDragging
-          ) {
-            const linearElement = this.scene.getElement(
-              this.state.selectedLinearElement.elementId,
-            );
+          if (linearElement?.frameId) {
+            const frame = getContainingFrame(linearElement);
 
-            if (linearElement?.frameId) {
-              const frame = getContainingFrame(linearElement);
+            if (frame && linearElement) {
+              if (!elementOverlapsWithFrame(linearElement, frame)) {
+                // remove the linear element from all groups
+                // before removing it from the frame as well
+                mutateElement(linearElement, {
+                  groupIds: [],
+                });
 
-              if (frame && linearElement) {
-                if (!elementOverlapsWithFrame(linearElement, frame)) {
-                  // remove the linear element from all groups
-                  // before removing it from the frame as well
-                  mutateElement(linearElement, {
-                    groupIds: [],
-                  });
-
-                  this.scene.replaceAllElements(
-                    removeElementsFromFrame(
-                      this.scene.getElementsIncludingDeleted(),
-                      [linearElement],
-                      this.state,
-                    ),
-                  );
-                }
+                this.scene.replaceAllElements(
+                  removeElementsFromFrame(
+                    this.scene.getElementsIncludingDeleted(),
+                    [linearElement],
+                    this.state,
+                  ),
+                );
               }
             }
-          } else {
-            // update the relationships between selected elements and frames
-            const topLayerFrame =
-              this.getTopLayerFrameAtSceneCoords(sceneCoords);
+          }
+        } else {
+          // update the relationships between selected elements and frames
+          const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);
 
-            const selectedElements = this.scene.getSelectedElements(this.state);
-            let nextElements = this.scene.getElementsIncludingDeleted();
+          const selectedElements = this.scene.getSelectedElements(this.state);
+          let nextElements = this.scene.getElementsIncludingDeleted();
 
-            const updateGroupIdsAfterEditingGroup = (
-              elements: ExcalidrawElement[],
-            ) => {
-              if (elements.length > 0) {
-                for (const element of elements) {
-                  const index = element.groupIds.indexOf(
-                    this.state.editingGroupId!,
-                  );
+          const updateGroupIdsAfterEditingGroup = (
+            elements: ExcalidrawElement[],
+          ) => {
+            if (elements.length > 0) {
+              for (const element of elements) {
+                const index = element.groupIds.indexOf(
+                  this.state.editingGroupId!,
+                );
 
+                mutateElement(
+                  element,
+                  {
+                    groupIds: element.groupIds.slice(0, index),
+                  },
+                  false,
+                );
+              }
+
+              nextElements.forEach((element) => {
+                if (
+                  element.groupIds.length &&
+                  getElementsInGroup(
+                    nextElements,
+                    element.groupIds[element.groupIds.length - 1],
+                  ).length < 2
+                ) {
                   mutateElement(
                     element,
                     {
-                      groupIds: element.groupIds.slice(0, index),
+                      groupIds: [],
                     },
                     false,
                   );
                 }
+              });
 
-                nextElements.forEach((element) => {
-                  if (
-                    element.groupIds.length &&
-                    getElementsInGroup(
-                      nextElements,
-                      element.groupIds[element.groupIds.length - 1],
-                    ).length < 2
-                  ) {
-                    mutateElement(
-                      element,
-                      {
-                        groupIds: [],
-                      },
-                      false,
-                    );
-                  }
-                });
-
-                this.setState({
-                  editingGroupId: null,
-                });
-              }
-            };
-
-            if (
-              topLayerFrame &&
-              !this.state.selectedElementIds[topLayerFrame.id]
-            ) {
-              const elementsToAdd = selectedElements.filter(
-                (element) =>
-                  element.frameId !== topLayerFrame.id &&
-                  isElementInFrame(element, nextElements, this.state),
-              );
-
-              if (this.state.editingGroupId) {
-                updateGroupIdsAfterEditingGroup(elementsToAdd);
-              }
-
-              nextElements = addElementsToFrame(
-                nextElements,
-                elementsToAdd,
-                topLayerFrame,
-              );
-            } else if (!topLayerFrame) {
-              if (this.state.editingGroupId) {
-                const elementsToRemove = selectedElements.filter(
-                  (element) =>
-                    element.frameId &&
-                    !isElementInFrame(element, nextElements, this.state),
-                );
-
-                updateGroupIdsAfterEditingGroup(elementsToRemove);
-              }
+              this.setState({
+                editingGroupId: null,
+              });
             }
+          };
 
-            nextElements = updateFrameMembershipOfSelectedElements(
-              nextElements,
-              this.state,
-              this,
+          if (
+            topLayerFrame &&
+            !this.state.selectedElementIds[topLayerFrame.id]
+          ) {
+            const elementsToAdd = selectedElements.filter(
+              (element) =>
+                element.frameId !== topLayerFrame.id &&
+                isElementInFrame(element, nextElements, this.state),
             );
 
-            this.scene.replaceAllElements(nextElements);
-          }
-        }
+            if (this.state.editingGroupId) {
+              updateGroupIdsAfterEditingGroup(elementsToAdd);
+            }
 
+            nextElements = addElementsToFrame(
+              nextElements,
+              elementsToAdd,
+              topLayerFrame,
+            );
+          } else if (!topLayerFrame) {
+            if (this.state.editingGroupId) {
+              const elementsToRemove = selectedElements.filter(
+                (element) =>
+                  element.frameId &&
+                  !isElementInFrame(element, nextElements, this.state),
+              );
+
+              updateGroupIdsAfterEditingGroup(elementsToRemove);
+            }
+          }
+
+          nextElements = updateFrameMembershipOfSelectedElements(
+            nextElements,
+            this.state,
+            this,
+          );
+
+          this.scene.replaceAllElements(nextElements);
+        }
+      }
+
+      if (draggingElement) {
         if (draggingElement.type === "frame") {
           const elementsInsideFrame = getElementsInNewFrame(
             this.scene.getElementsIncludingDeleted(),
@@ -7032,8 +6952,7 @@ class App extends React.Component<AppProps, AppState> {
       if (
         !activeTool.locked &&
         activeTool.type !== "freedraw" &&
-        draggingElement &&
-        draggingElement.type !== "selection"
+        draggingElement
       ) {
         this.setState((prevState) => ({
           selectedElementIds: makeNextSelectedElementIds(
@@ -7072,12 +6991,14 @@ class App extends React.Component<AppProps, AppState> {
         resetCursor(this.interactiveCanvas);
         this.setState({
           draggingElement: null,
+          selectionElement: null,
           suggestedBindings: [],
           activeTool: updateActiveTool(this.state, { type: "selection" }),
         });
       } else {
         this.setState({
           draggingElement: null,
+          selectionElement: null,
           suggestedBindings: [],
         });
       }
@@ -7876,6 +7797,139 @@ class App extends React.Component<AppProps, AppState> {
     );
   };
 
+  private maybeUpdateSelectionElement = (
+    pointerDownState: PointerDownState,
+    event: PointerEvent | KeyboardEvent,
+  ): boolean => {
+    const { selectionElement } = this.state;
+
+    if (!selectionElement || this.state.activeTool.type !== "selection") {
+      return false;
+    }
+
+    const pointerCoords = pointerDownState.lastCoords;
+
+    dragNewElement(
+      selectionElement,
+      this.state.activeTool.type,
+      pointerDownState.origin.x,
+      pointerDownState.origin.y,
+      pointerCoords.x,
+      pointerCoords.y,
+      distance(pointerDownState.origin.x, pointerCoords.x),
+      distance(pointerDownState.origin.y, pointerCoords.y),
+      shouldMaintainAspectRatio(event),
+      shouldResizeFromCenter(event),
+    );
+
+    return true;
+  };
+
+  private maybeHandleBoxSelection = (
+    pointerDownState: PointerDownState,
+    event: PointerEvent,
+  ): boolean => {
+    const { selectionElement } = this.state;
+
+    if (!selectionElement || this.state.activeTool.type !== "selection") {
+      return false;
+    }
+
+    this.maybeUpdateSelectionElement(pointerDownState, event);
+
+    pointerDownState.boxSelection.hasOccurred = true;
+
+    const elements = this.scene.getNonDeletedElements();
+
+    // box-select line editor points
+    if (this.state.editingLinearElement) {
+      LinearElementEditor.handleBoxSelection(
+        event,
+        this.state,
+        this.setState.bind(this),
+      );
+      // regular box-select
+    } else {
+      let shouldReuseSelection = true;
+
+      if (!event.shiftKey && isSomeElementSelected(elements, this.state)) {
+        if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {
+          this.setState((prevState) =>
+            selectGroupsForSelectedElements(
+              {
+                ...prevState,
+                selectedElementIds: {
+                  [pointerDownState.hit.element!.id]: true,
+                },
+              },
+              this.scene.getNonDeletedElements(),
+              prevState,
+              this,
+            ),
+          );
+        } else {
+          shouldReuseSelection = false;
+        }
+      }
+      const elementsWithinSelection = getElementsWithinSelection(
+        elements,
+        selectionElement,
+      );
+
+      this.setState((prevState) => {
+        const nextSelectedElementIds = {
+          ...(shouldReuseSelection && prevState.selectedElementIds),
+          ...elementsWithinSelection.reduce(
+            (acc: Record<ExcalidrawElement["id"], true>, element) => {
+              acc[element.id] = true;
+              return acc;
+            },
+            {},
+          ),
+        };
+
+        if (pointerDownState.hit.element) {
+          // if using ctrl/cmd, select the hitElement only if we
+          // haven't box-selected anything else
+          if (!elementsWithinSelection.length) {
+            nextSelectedElementIds[pointerDownState.hit.element.id] = true;
+          } else {
+            delete nextSelectedElementIds[pointerDownState.hit.element.id];
+          }
+        }
+
+        prevState = !shouldReuseSelection
+          ? { ...prevState, selectedGroupIds: {}, editingGroupId: null }
+          : prevState;
+
+        return {
+          ...selectGroupsForSelectedElements(
+            {
+              editingGroupId: prevState.editingGroupId,
+              selectedElementIds: nextSelectedElementIds,
+            },
+            this.scene.getNonDeletedElements(),
+            prevState,
+            this,
+          ),
+          // select linear element only when we haven't box-selected anything else
+          selectedLinearElement:
+            elementsWithinSelection.length === 1 &&
+            isLinearElement(elementsWithinSelection[0])
+              ? new LinearElementEditor(elementsWithinSelection[0], this.scene)
+              : null,
+          showHyperlinkPopup:
+            elementsWithinSelection.length === 1 &&
+            (elementsWithinSelection[0].link ||
+              isEmbeddableElement(elementsWithinSelection[0]))
+              ? "info"
+              : false,
+        };
+      });
+    }
+    return true;
+  };
+
   private maybeDragNewGenericElement = (
     pointerDownState: PointerDownState,
     event: MouseEvent | KeyboardEvent,
@@ -7885,93 +7939,73 @@ class App extends React.Component<AppProps, AppState> {
     if (!draggingElement) {
       return;
     }
-    if (
-      draggingElement.type === "selection" &&
-      this.state.activeTool.type !== "eraser"
-    ) {
-      dragNewElement(
-        draggingElement,
-        this.state.activeTool.type,
-        pointerDownState.origin.x,
-        pointerDownState.origin.y,
-        pointerCoords.x,
-        pointerCoords.y,
-        distance(pointerDownState.origin.x, pointerCoords.x),
-        distance(pointerDownState.origin.y, pointerCoords.y),
-        shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter(event),
-      );
-    } else {
-      let [gridX, gridY] = getGridPoint(
-        pointerCoords.x,
-        pointerCoords.y,
-        event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
-      );
+    let [gridX, gridY] = getGridPoint(
+      pointerCoords.x,
+      pointerCoords.y,
+      event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize,
+    );
 
-      const image =
-        isInitializedImageElement(draggingElement) &&
-        this.imageCache.get(draggingElement.fileId)?.image;
-      const aspectRatio =
-        image && !(image instanceof Promise)
-          ? image.width / image.height
-          : null;
+    const image =
+      isInitializedImageElement(draggingElement) &&
+      this.imageCache.get(draggingElement.fileId)?.image;
+    const aspectRatio =
+      image && !(image instanceof Promise) ? image.width / image.height : null;
 
-      this.maybeCacheReferenceSnapPoints(event, [draggingElement]);
+    this.maybeCacheReferenceSnapPoints(event, [draggingElement]);
 
-      const { snapOffset, snapLines } = snapNewElement(
-        draggingElement,
-        this.state,
-        event,
-        {
-          x:
-            pointerDownState.originInGrid.x +
-            (this.state.originSnapOffset?.x ?? 0),
-          y:
-            pointerDownState.originInGrid.y +
-            (this.state.originSnapOffset?.y ?? 0),
-        },
-        {
-          x: gridX - pointerDownState.originInGrid.x,
-          y: gridY - pointerDownState.originInGrid.y,
-        },
-      );
+    const { snapOffset, snapLines } = snapNewElement(
+      draggingElement,
+      this.state,
+      event,
+      {
+        x:
+          pointerDownState.originInGrid.x +
+          (this.state.originSnapOffset?.x ?? 0),
+        y:
+          pointerDownState.originInGrid.y +
+          (this.state.originSnapOffset?.y ?? 0),
+      },
+      {
+        x: gridX - pointerDownState.originInGrid.x,
+        y: gridY - pointerDownState.originInGrid.y,
+      },
+    );
 
-      gridX += snapOffset.x;
-      gridY += snapOffset.y;
+    gridX += snapOffset.x;
+    gridY += snapOffset.y;
 
+    this.setState({
+      snapLines,
+    });
+
+    dragNewElement(
+      draggingElement,
+      this.state.activeTool.type,
+      pointerDownState.originInGrid.x,
+      pointerDownState.originInGrid.y,
+      gridX,
+      gridY,
+      distance(pointerDownState.originInGrid.x, gridX),
+      distance(pointerDownState.originInGrid.y, gridY),
+      isImageElement(draggingElement)
+        ? !shouldMaintainAspectRatio(event)
+        : shouldMaintainAspectRatio(event),
+      shouldResizeFromCenter(event),
+      aspectRatio,
+      this.state.originSnapOffset,
+    );
+
+    this.maybeSuggestBindingForAll([draggingElement]);
+
+    // highlight elements that are to be added to frames on frames creation
+    if (this.state.activeTool.type === "frame") {
       this.setState({
-        snapLines,
+        elementsToHighlight: getElementsInResizingFrame(
+          this.scene.getNonDeletedElements(),
+          draggingElement as ExcalidrawFrameElement,
+          this.state,
+        ),
       });
-
-      dragNewElement(
-        draggingElement,
-        this.state.activeTool.type,
-        pointerDownState.originInGrid.x,
-        pointerDownState.originInGrid.y,
-        gridX,
-        gridY,
-        distance(pointerDownState.originInGrid.x, gridX),
-        distance(pointerDownState.originInGrid.y, gridY),
-        isImageElement(draggingElement)
-          ? !shouldMaintainAspectRatio(event)
-          : shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter(event),
-        aspectRatio,
-        this.state.originSnapOffset,
-      );
-
-      this.maybeSuggestBindingForAll([draggingElement]);
-
-      // highlight elements that are to be added to frames on frames creation
-      if (this.state.activeTool.type === "frame") {
-        this.setState({
-          elementsToHighlight: getElementsInResizingFrame(
-            this.scene.getNonDeletedElements(),
-            draggingElement as ExcalidrawFrameElement,
-            this.state,
-          ),
-        });
-      }
     }
   };
 

src/components/HintViewer.tsx

@@ -82,8 +82,9 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
 
   if (activeTool.type === "selection") {
     if (
-      appState.draggingElement?.type === "selection" &&
+      appState.selectionElement &&
       !selectedElements.length &&
+      !appState.draggingElement &&
       !appState.editingElement &&
       !appState.editingLinearElement
     ) {

src/data/restore.ts

@@ -34,13 +34,13 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
   detectLineHeight,
   getDefaultLineHeight,
-  measureTextElement,
+  measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";
 
@@ -93,8 +93,7 @@ const repairBinding = (binding: PointBinding | null) => {
 };
 
 const restoreElementWithProperties = <
-  T extends Required<Omit<ExcalidrawElement, "subtype" | "customData">> & {
-    subtype?: ExcalidrawElement["subtype"];
+  T extends Required<Omit<ExcalidrawElement, "customData">> & {
     customData?: ExcalidrawElement["customData"];
     /** @deprecated */
     boundElementIds?: readonly ExcalidrawElement["id"][];
@@ -160,9 +159,6 @@ const restoreElementWithProperties = <
     locked: element.locked ?? false,
   };
 
-  if ("subtype" in element) {
-    base.subtype = element.subtype;
-  }
   if ("customData" in element) {
     base.customData = element.customData;
   }
@@ -208,7 +204,11 @@ const restoreElement = (
           : // no element height likely means programmatic use, so default
             // to a fixed line height
             getDefaultLineHeight(element.fontFamily));
-      const baseline = measureTextElement(element, { text }).baseline;
+      const baseline = measureBaseline(
+        element.text,
+        getFontString(element),
+        lineHeight,
+      );
       element = restoreElementWithProperties(element, {
         fontSize,
         fontFamily,

src/element/Hyperlink.tsx

@@ -210,6 +210,7 @@ export const Hyperlink = ({
   };
   const { x, y } = getCoordsForPopover(element, appState);
   if (
+    appState.selectionElement ||
     appState.draggingElement ||
     appState.resizingElement ||
     appState.isRotating ||

src/element/linearElementEditor.ts

@@ -134,10 +134,7 @@ export class LinearElementEditor {
     appState: AppState,
     setState: React.Component<any, AppState>["setState"],
   ) {
-    if (
-      !appState.editingLinearElement ||
-      appState.draggingElement?.type !== "selection"
-    ) {
+    if (!appState.editingLinearElement || !appState.selectionElement) {
       return false;
     }
     const { editingLinearElement } = appState;
@@ -149,7 +146,7 @@ export class LinearElementEditor {
     }
 
     const [selectionX1, selectionY1, selectionX2, selectionY2] =
-      getElementAbsoluteCoords(appState.draggingElement);
+      getElementAbsoluteCoords(appState.selectionElement);
 
     const pointsSceneCoords =
       LinearElementEditor.getPointsGlobalCoordinates(element);

src/element/mutateElement.ts

@@ -6,21 +6,12 @@ import { Point } from "../types";
 import { getUpdatedTimestamp } from "../utils";
 import { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
-import { getSubtypeMethods } from "./subtypes";
 
 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
   "id" | "version" | "versionNonce"
 >;
 
-const cleanUpdates = <TElement extends Mutable<ExcalidrawElement>>(
-  element: TElement,
-  updates: ElementUpdate<TElement>,
-): ElementUpdate<TElement> => {
-  const map = getSubtypeMethods(element.subtype);
-  return map?.clean ? (map.clean(updates) as typeof updates) : updates;
-};
-
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same drawing. Note: this will trigger the component to update. Make sure you
@@ -31,8 +22,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   informMutation = true,
 ): TElement => {
   let didChange = false;
-  let increment = false;
-  const oldUpdates = cleanUpdates(element, updates);
 
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
@@ -81,7 +70,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
             }
           }
           if (!didChangePoints) {
-            key in oldUpdates && (increment = true);
             continue;
           }
         }
@@ -89,7 +77,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
       (element as any)[key] = value;
       didChange = true;
-      key in oldUpdates && (increment = true);
     }
   }
   if (!didChange) {
@@ -105,11 +92,9 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     ShapeCache.delete(element);
   }
 
-  if (increment) {
-    element.version++;
-    element.versionNonce = randomInteger();
-    element.updated = getUpdatedTimestamp();
-  }
+  element.version++;
+  element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();
 
   if (informMutation) {
     Scene.getScene(element)?.informMutation();
@@ -123,8 +108,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
   updates: ElementUpdate<TElement>,
 ): TElement => {
   let didChange = false;
-  let increment = false;
-  const oldUpdates = cleanUpdates(element, updates);
   for (const key in updates) {
     const value = (updates as any)[key];
     if (typeof value !== "undefined") {
@@ -136,7 +119,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
         continue;
       }
       didChange = true;
-      key in oldUpdates && (increment = true);
     }
   }
 
@@ -144,9 +126,6 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     return element;
   }
 
-  if (!increment) {
-    return { ...element, ...updates };
-  }
   return {
     ...element,
     ...updates,

src/element/newElement.ts

@@ -15,7 +15,12 @@ import {
   ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
 } from "../element/types";
-import { arrayToMap, getUpdatedTimestamp, isTestEnv } from "../utils";
+import {
+  arrayToMap,
+  getFontString,
+  getUpdatedTimestamp,
+  isTestEnv,
+} from "../utils";
 import { randomInteger, randomId } from "../random";
 import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -25,9 +30,9 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
   getContainerElement,
-  measureTextElement,
+  measureText,
   normalizeText,
-  wrapTextElement,
+  wrapText,
   getBoundTextMaxWidth,
   getDefaultLineHeight,
 } from "./textElement";
@@ -40,21 +45,6 @@ import {
   VERTICAL_ALIGN,
 } from "../constants";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
-import { getSubtypeMethods } from "./subtypes";
-
-export const maybeGetSubtypeProps = (obj: {
-  subtype?: ExcalidrawElement["subtype"];
-  customData?: ExcalidrawElement["customData"];
-}) => {
-  const data: typeof obj = {};
-  if ("subtype" in obj && obj.subtype !== undefined) {
-    data.subtype = obj.subtype;
-  }
-  if ("customData" in obj && obj.customData !== undefined) {
-    data.customData = obj.customData;
-  }
-  return data as typeof obj;
-};
 
 export type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -68,8 +58,6 @@ export type ElementConstructorOpts = MarkOptional<
   | "version"
   | "versionNonce"
   | "link"
-  | "subtype"
-  | "customData"
   | "strokeStyle"
   | "fillStyle"
   | "strokeColor"
@@ -105,10 +93,8 @@ const _newElementBase = <T extends ExcalidrawElement>(
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
-  const { subtype, customData } = rest;
   // assign type to guard against excess properties
   const element: Merge<ExcalidrawGenericElement, { type: T["type"] }> = {
-    ...maybeGetSubtypeProps({ subtype, customData }),
     id: rest.id || randomId(),
     type,
     x,
@@ -142,11 +128,8 @@ export const newElement = (
   opts: {
     type: ExcalidrawGenericElement["type"];
   } & ElementConstructorOpts,
-): NonDeleted<ExcalidrawGenericElement> => {
-  const map = getSubtypeMethods(opts?.subtype);
-  map?.clean && map.clean(opts);
-  return _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
-};
+): NonDeleted<ExcalidrawGenericElement> =>
+  _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
 
 export const newEmbeddableElement = (
   opts: {
@@ -213,12 +196,10 @@ export const newTextElement = (
   const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
   const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
   const text = normalizeText(opts.text);
-  const metrics = measureTextElement(
-    { ...opts, fontSize, fontFamily, lineHeight },
-    {
-      text,
-      customData: opts.customData,
-    },
+  const metrics = measureText(
+    text,
+    getFontString({ fontFamily, fontSize }),
+    lineHeight,
   );
   const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
   const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
@@ -263,9 +244,7 @@ const getAdjustedDimensions = (
     width: nextWidth,
     height: nextHeight,
     baseline: nextBaseline,
-  } = measureTextElement(element, {
-    text: nextText,
-  });
+  } = measureText(nextText, getFontString(element), element.lineHeight);
   const { textAlign, verticalAlign } = element;
   let x: number;
   let y: number;
@@ -274,7 +253,11 @@ const getAdjustedDimensions = (
     verticalAlign === VERTICAL_ALIGN.MIDDLE &&
     !element.containerId
   ) {
-    const prevMetrics = measureTextElement(element);
+    const prevMetrics = measureText(
+      element.text,
+      getFontString(element),
+      element.lineHeight,
+    );
     const offsets = getTextElementPositionOffsets(element, {
       width: nextWidth - prevMetrics.width,
       height: nextHeight - prevMetrics.height,
@@ -330,9 +313,11 @@ export const refreshTextDimensions = (
   }
   const container = getContainerElement(textElement);
   if (container) {
-    text = wrapTextElement(textElement, getBoundTextMaxWidth(container), {
+    text = wrapText(
       text,
-    });
+      getFontString(textElement),
+      getBoundTextMaxWidth(container),
+    );
   }
   const dimensions = getAdjustedDimensions(textElement, text);
   return { text, ...dimensions };

src/element/resizeElements.ts

@@ -51,7 +51,7 @@ import {
   handleBindTextResize,
   getBoundTextMaxWidth,
   getApproxMinLineHeight,
-  measureTextElement,
+  measureText,
   getBoundTextMaxHeight,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -224,7 +224,11 @@ const measureFontSizeFromWidth = (
   if (nextFontSize < MIN_FONT_SIZE) {
     return null;
   }
-  const metrics = measureTextElement(element, { fontSize: nextFontSize });
+  const metrics = measureText(
+    element.text,
+    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
+    element.lineHeight,
+  );
   return {
     size: nextFontSize,
     baseline: metrics.baseline + (nextHeight - metrics.height),

src/element/subtypes/index.ts

@@ -1,222 +0,0 @@
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types";
-import { getNonDeletedElements } from "../";
-
-import { isTextElement } from "../typeChecks";
-import { getContainerElement, redrawTextBoundingBox } from "../textElement";
-import { ShapeCache } from "../../scene/ShapeCache";
-import Scene from "../../scene/Scene";
-
-// Use "let" instead of "const" so we can dynamically add subtypes
-let subtypeNames: readonly Subtype[] = [];
-let parentTypeMap: readonly {
-  subtype: Subtype;
-  parentType: ExcalidrawElement["type"];
-}[] = [];
-
-export type SubtypeRecord = Readonly<{
-  subtype: Subtype;
-  parents: readonly ExcalidrawElement["type"][];
-}>;
-
-// Subtype Names
-export type Subtype = Required<ExcalidrawElement>["subtype"];
-export const getSubtypeNames = (): readonly Subtype[] => {
-  return subtypeNames;
-};
-
-// Subtype Methods
-export type SubtypeMethods = {
-  clean: (
-    updates: Omit<
-      Partial<ExcalidrawElement>,
-      "id" | "version" | "versionNonce"
-    >,
-  ) => Omit<Partial<ExcalidrawElement>, "id" | "version" | "versionNonce">;
-  ensureLoaded: (callback?: () => void) => Promise<void>;
-  getEditorStyle: (element: ExcalidrawTextElement) => Record<string, any>;
-  measureText: (
-    element: Pick<
-      ExcalidrawTextElement,
-      | "subtype"
-      | "customData"
-      | "fontSize"
-      | "fontFamily"
-      | "text"
-      | "lineHeight"
-    >,
-    next?: {
-      fontSize?: number;
-      text?: string;
-      customData?: ExcalidrawElement["customData"];
-    },
-  ) => { width: number; height: number; baseline: number };
-  render: (
-    element: NonDeleted<ExcalidrawElement>,
-    context: CanvasRenderingContext2D,
-  ) => void;
-  renderSvg: (
-    svgRoot: SVGElement,
-    root: SVGElement,
-    element: NonDeleted<ExcalidrawElement>,
-    opt?: { offsetX?: number; offsetY?: number },
-  ) => void;
-  wrapText: (
-    element: Pick<
-      ExcalidrawTextElement,
-      | "subtype"
-      | "customData"
-      | "fontSize"
-      | "fontFamily"
-      | "originalText"
-      | "lineHeight"
-    >,
-    containerWidth: number,
-    next?: {
-      fontSize?: number;
-      text?: string;
-      customData?: ExcalidrawElement["customData"];
-    },
-  ) => string;
-};
-
-type MethodMap = { subtype: Subtype; methods: Partial<SubtypeMethods> };
-const methodMaps = [] as Array<MethodMap>;
-
-// Use `getSubtypeMethods` to call subtype-specialized methods, like `render`.
-export const getSubtypeMethods = (
-  subtype: Subtype | undefined,
-): Partial<SubtypeMethods> | undefined => {
-  const map = methodMaps.find((method) => method.subtype === subtype);
-  return map?.methods;
-};
-
-export const addSubtypeMethods = (
-  subtype: Subtype,
-  methods: Partial<SubtypeMethods>,
-) => {
-  if (!subtypeNames.includes(subtype)) {
-    return;
-  }
-  if (!methodMaps.find((method) => method.subtype === subtype)) {
-    methodMaps.push({ subtype, methods });
-  }
-};
-
-// Callback to re-render subtyped `ExcalidrawElement`s after completing
-// async loading of the subtype.
-export type SubtypeLoadedCb = (hasSubtype: SubtypeCheckFn) => void;
-export type SubtypeCheckFn = (element: ExcalidrawElement) => boolean;
-
-// Functions to prepare subtypes for use
-export type SubtypePrepFn = (onSubtypeLoaded?: SubtypeLoadedCb) => {
-  methods: Partial<SubtypeMethods>;
-};
-
-// This is the main method to set up the subtype.  The optional
-// `onSubtypeLoaded` callback may be used to re-render subtyped
-// `ExcalidrawElement`s after the subtype has finished async loading.
-export const prepareSubtype = (
-  record: SubtypeRecord,
-  subtypePrepFn: SubtypePrepFn,
-  onSubtypeLoaded?: SubtypeLoadedCb,
-): { methods: Partial<SubtypeMethods> } => {
-  const map = getSubtypeMethods(record.subtype);
-  if (map) {
-    return { methods: map };
-  }
-
-  // Check for undefined/null subtypes and parentTypes
-  if (
-    record.subtype === undefined ||
-    record.subtype === "" ||
-    record.parents === undefined ||
-    record.parents.length === 0
-  ) {
-    return { methods: {} };
-  }
-
-  // Register the types
-  const subtype = record.subtype;
-  subtypeNames = [...subtypeNames, subtype];
-  record.parents.forEach((parentType) => {
-    parentTypeMap = [...parentTypeMap, { subtype, parentType }];
-  });
-
-  // Prepare the subtype
-  const { methods } = subtypePrepFn(onSubtypeLoaded);
-
-  // Register the subtype's methods
-  addSubtypeMethods(record.subtype, methods);
-  return { methods };
-};
-
-// Ensure all subtypes are loaded before continuing, eg to
-// redraw text element bounding boxes correctly.
-export const ensureSubtypesLoadedForElements = async (
-  elements: readonly ExcalidrawElement[],
-  callback?: () => void,
-) => {
-  // Only ensure the loading of subtypes which are actually needed.
-  // We don't want to be held up by eg downloading the MathJax SVG fonts
-  // if we don't actually need them yet.
-  const subtypesUsed = [] as Subtype[];
-  elements.forEach((el) => {
-    if (
-      "subtype" in el &&
-      el.subtype !== undefined &&
-      !subtypesUsed.includes(el.subtype)
-    ) {
-      subtypesUsed.push(el.subtype);
-    }
-  });
-  await ensureSubtypesLoaded(subtypesUsed, callback);
-};
-
-export const ensureSubtypesLoaded = async (
-  subtypes: Subtype[],
-  callback?: () => void,
-) => {
-  // Use a for loop so we can do `await map.ensureLoaded()`
-  for (let i = 0; i < subtypes.length; i++) {
-    const subtype = subtypes[i];
-    // Should be defined if prepareSubtype() has run
-    const map = getSubtypeMethods(subtype);
-    if (map?.ensureLoaded) {
-      await map.ensureLoaded();
-    }
-  }
-  if (callback) {
-    callback();
-  }
-};
-
-// Call this method after finishing any async loading for
-// subtypes of ExcalidrawElement if the newly loaded code
-// would change the rendering.
-export const checkRefreshOnSubtypeLoad = (
-  hasSubtype: SubtypeCheckFn,
-  elements: readonly ExcalidrawElement[],
-) => {
-  let refreshNeeded = false;
-  const scenes: Scene[] = [];
-  getNonDeletedElements(elements).forEach((element) => {
-    // If the element is of the subtype that was just
-    // registered, update the element's dimensions, mark the
-    // element for a re-render, and indicate the scene needs a refresh.
-    if (hasSubtype(element)) {
-      ShapeCache.delete(element);
-      if (isTextElement(element)) {
-        redrawTextBoundingBox(element, getContainerElement(element));
-      }
-      refreshNeeded = true;
-      const scene = Scene.getScene(element);
-      if (scene && !scenes.includes(scene)) {
-        // Store in case we have multiple scenes
-        scenes.push(scene);
-      }
-    }
-  });
-  // Only inform each scene once
-  scenes.forEach((scene) => scene.informMutation());
-  return refreshNeeded;
-};

src/element/textElement.ts

@@ -1,4 +1,3 @@
-import { getSubtypeMethods, SubtypeMethods } from "./subtypes";
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
   ExcalidrawElement,
@@ -37,30 +36,6 @@ import {
 } from "./textWysiwyg";
 import { ExtractSetType } from "../utility-types";
 
-export const measureTextElement = function (element, next) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.measureText) {
-    return map.measureText(element, next);
-  }
-
-  const fontSize = next?.fontSize ?? element.fontSize;
-  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
-  const text = next?.text ?? element.text;
-  return measureText(text, font, element.lineHeight);
-} as SubtypeMethods["measureText"];
-
-export const wrapTextElement = function (element, containerWidth, next) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.wrapText) {
-    return map.wrapText(element, containerWidth, next);
-  }
-
-  const fontSize = next?.fontSize ?? element.fontSize;
-  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
-  const text = next?.text ?? element.originalText;
-  return wrapText(text, font, containerWidth);
-} as SubtypeMethods["wrapText"];
-
 export const normalizeText = (text: string) => {
   return (
     text
@@ -93,24 +68,22 @@ export const redrawTextBoundingBox = (
 
   if (container) {
     maxWidth = getBoundTextMaxWidth(container, textElement);
-    boundTextUpdates.text = wrapTextElement(textElement, maxWidth);
+    boundTextUpdates.text = wrapText(
+      textElement.originalText,
+      getFontString(textElement),
+      maxWidth,
+    );
   }
-  const metrics = measureTextElement(textElement, {
-    text: boundTextUpdates.text,
-  });
+  const metrics = measureText(
+    boundTextUpdates.text,
+    getFontString(textElement),
+    textElement.lineHeight,
+  );
 
   boundTextUpdates.width = metrics.width;
   boundTextUpdates.height = metrics.height;
   boundTextUpdates.baseline = metrics.baseline;
 
-  // Maintain coordX for non left-aligned text in case the width has changed
-  if (!container) {
-    if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
-      boundTextUpdates.x += textElement.width - metrics.width;
-    } else if (textElement.textAlign === TEXT_ALIGN.CENTER) {
-      boundTextUpdates.x += textElement.width / 2 - metrics.width / 2;
-    }
-  }
   if (container) {
     const maxContainerHeight = getBoundTextMaxHeight(
       container,
@@ -223,9 +196,17 @@ export const handleBindTextResize = (
       (transformHandleType !== "n" && transformHandleType !== "s")
     ) {
       if (text) {
-        text = wrapTextElement(textElement, maxWidth);
+        text = wrapText(
+          textElement.originalText,
+          getFontString(textElement),
+          maxWidth,
+        );
       }
-      const metrics = measureTextElement(textElement, { text });
+      const metrics = measureText(
+        text,
+        getFontString(textElement),
+        textElement.lineHeight,
+      );
       nextHeight = metrics.height;
       nextWidth = metrics.width;
       nextBaseLine = metrics.baseline;

src/element/textWysiwyg.tsx

@@ -26,7 +26,6 @@ import {
   getContainerElement,
   getTextElementAngle,
   getTextWidth,
-  measureText,
   normalizeText,
   redrawTextBoundingBox,
   wrapText,
@@ -44,10 +43,8 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
-import { SubtypeMethods, getSubtypeMethods } from "./subtypes";
 
 const getTransform = (
-  offsetX: number,
   width: number,
   height: number,
   angle: number,
@@ -65,8 +62,7 @@ const getTransform = (
   if (height > maxHeight && zoom.value !== 1) {
     translateY = (maxHeight * (zoom.value - 1)) / 2;
   }
-  const offset = offsetX !== 0 ? ` translate(${offsetX}px, 0px)` : "";
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)${offset}`;
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
 const originalContainerCache: {
@@ -101,14 +97,6 @@ export const getOriginalContainerHeightFromCache = (
   return originalContainerCache[id]?.height ?? null;
 };
 
-const getEditorStyle = function (element) {
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.getEditorStyle) {
-    return map.getEditorStyle(element);
-  }
-  return {};
-} as SubtypeMethods["getEditorStyle"];
-
 export const textWysiwyg = ({
   id,
   onChange,
@@ -168,24 +156,11 @@ export const textWysiwyg = ({
       const container = getContainerElement(updatedTextElement);
       let maxWidth = updatedTextElement.width;
 
-      // Editing metrics
-      const eMetrics = measureText(
-        container && updatedTextElement.containerId
-          ? wrapText(
-              updatedTextElement.originalText,
-              getFontString(updatedTextElement),
-              getBoundTextMaxWidth(container),
-            )
-          : updatedTextElement.originalText,
-        getFontString(updatedTextElement),
-        updatedTextElement.lineHeight,
-      );
-
-      let maxHeight = eMetrics.height;
-      let textElementWidth = Math.max(updatedTextElement.width, eMetrics.width);
+      let maxHeight = updatedTextElement.height;
+      let textElementWidth = updatedTextElement.width;
       // Set to element height by default since that's
       // what is going to be used for unbounded text
-      const textElementHeight = Math.max(updatedTextElement.height, maxHeight);
+      const textElementHeight = updatedTextElement.height;
 
       if (container && updatedTextElement.containerId) {
         if (isArrowElement(container)) {
@@ -271,35 +246,13 @@ export const textWysiwyg = ({
         editable.selectionEnd = editable.value.length - diff;
       }
 
-      let transformWidth = updatedTextElement.width;
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);
       } else {
         textElementWidth += 0.5;
-        transformWidth += 0.5;
       }
 
-      // Horizontal offset in case updatedTextElement has a non-WYSIWYG subtype
-      const offWidth = container
-        ? Math.min(
-            0,
-            updatedTextElement.width - Math.min(maxWidth, eMetrics.width),
-          )
-        : Math.min(maxWidth, updatedTextElement.width) -
-          Math.min(maxWidth, eMetrics.width);
-      const offsetX =
-        textAlign === "right"
-          ? offWidth
-          : textAlign === "center"
-          ? offWidth / 2
-          : 0;
-      const { width: w, height: h } = updatedTextElement;
-      const transformOrigin =
-        updatedTextElement.width !== eMetrics.width ||
-        updatedTextElement.height !== eMetrics.height
-          ? { transformOrigin: `${w / 2}px ${h / 2}px` }
-          : {};
       let lineHeight = updatedTextElement.lineHeight;
 
       // In Safari the font size gets rounded off when rendering hence calculating the line height by rounding off font size
@@ -317,15 +270,13 @@ export const textWysiwyg = ({
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight,
-        width: `${Math.min(textElementWidth, maxWidth)}px`,
+        width: `${textElementWidth}px`,
         height: `${textElementHeight}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
-        ...transformOrigin,
         transform: getTransform(
-          offsetX,
-          transformWidth,
-          updatedTextElement.height,
+          textElementWidth,
+          textElementHeight,
           getTextElementAngle(updatedTextElement),
           appState,
           maxWidth,
@@ -383,7 +334,6 @@ export const textWysiwyg = ({
     whiteSpace,
     overflowWrap: "break-word",
     boxSizing: "content-box",
-    ...getEditorStyle(element),
   });
   editable.value = element.originalText;
   updateWysiwygStyle();

src/element/types.ts

@@ -65,7 +65,6 @@ type _ExcalidrawElementBase = Readonly<{
   updated: number;
   link: string | null;
   locked: boolean;
-  subtype?: string;
   customData?: Record<string, any>;
 }>;
 

src/renderer/renderElement.ts

@@ -31,7 +31,6 @@ import {
   InteractiveCanvasAppState,
 } from "../types";
 import { getDefaultAppState } from "../appState";
-import { getSubtypeMethods } from "../element/subtypes";
 import {
   BOUND_TEXT_PADDING,
   FRAME_STYLE,
@@ -265,12 +264,6 @@ const drawElementOnCanvas = (
 ) => {
   context.globalAlpha =
     ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.render) {
-    map.render(element, context);
-    context.globalAlpha = 1;
-    return;
-  }
   switch (element.type) {
     case "rectangle":
     case "embeddable":
@@ -904,11 +897,6 @@ export const renderElementToSvg = (
     root = anchorTag;
   }
 
-  const map = getSubtypeMethods(element.subtype);
-  if (map?.renderSvg) {
-    map.renderSvg(svgRoot, root, element, { offsetX, offsetY });
-    return;
-  }
   const opacity =
     ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
 

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -5152,35 +5152,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "currentItemTextAlign": "left",
   "cursorButton": "down",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "boundElements": null,
-    "fillStyle": "hachure",
-    "frameId": null,
-    "groupIds": [],
-    "height": 0,
-    "id": "id3",
-    "isDeleted": false,
-    "link": null,
-    "locked": false,
-    "opacity": 100,
-    "roughness": 1,
-    "roundness": {
-      "type": 2,
-    },
-    "seed": 400692809,
-    "strokeColor": "#1e1e1e",
-    "strokeStyle": "solid",
-    "strokeWidth": 1,
-    "type": "selection",
-    "updated": 1,
-    "version": 1,
-    "versionNonce": 0,
-    "width": 0,
-    "x": 500,
-    "y": 500,
-  },
+  "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
@@ -5449,35 +5421,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "currentItemTextAlign": "left",
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "boundElements": null,
-    "fillStyle": "hachure",
-    "frameId": null,
-    "groupIds": [],
-    "height": 0,
-    "id": "id3",
-    "isDeleted": false,
-    "link": null,
-    "locked": false,
-    "opacity": 100,
-    "roughness": 1,
-    "roundness": {
-      "type": 2,
-    },
-    "seed": 400692809,
-    "strokeColor": "#1e1e1e",
-    "strokeStyle": "solid",
-    "strokeWidth": 1,
-    "type": "selection",
-    "updated": 1,
-    "version": 1,
-    "versionNonce": 0,
-    "width": 0,
-    "x": 50,
-    "y": 50,
-  },
+  "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
@@ -5718,35 +5662,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "currentItemTextAlign": "left",
   "cursorButton": "down",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "boundElements": null,
-    "fillStyle": "hachure",
-    "frameId": null,
-    "groupIds": [],
-    "height": 0,
-    "id": "id1",
-    "isDeleted": false,
-    "link": null,
-    "locked": false,
-    "opacity": 100,
-    "roughness": 1,
-    "roundness": {
-      "type": 2,
-    },
-    "seed": 2019559783,
-    "strokeColor": "#1e1e1e",
-    "strokeStyle": "solid",
-    "strokeWidth": 1,
-    "type": "selection",
-    "updated": 1,
-    "version": 1,
-    "versionNonce": 0,
-    "width": 0,
-    "x": 110,
-    "y": 110,
-  },
+  "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
@@ -16262,35 +16178,7 @@ exports[`regression tests > switches from group of selected elements to another
   "currentItemTextAlign": "left",
   "cursorButton": "down",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "boundElements": null,
-    "fillStyle": "hachure",
-    "frameId": null,
-    "groupIds": [],
-    "height": 0,
-    "id": "id4",
-    "isDeleted": false,
-    "link": null,
-    "locked": false,
-    "opacity": 100,
-    "roughness": 1,
-    "roundness": {
-      "type": 2,
-    },
-    "seed": 493213705,
-    "strokeColor": "#1e1e1e",
-    "strokeStyle": "solid",
-    "strokeWidth": 1,
-    "type": "selection",
-    "updated": 1,
-    "version": 1,
-    "versionNonce": 0,
-    "width": 0,
-    "x": 0,
-    "y": 0,
-  },
+  "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
@@ -16662,35 +16550,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "currentItemTextAlign": "left",
   "cursorButton": "down",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": {
-    "angle": 0,
-    "backgroundColor": "transparent",
-    "boundElements": null,
-    "fillStyle": "hachure",
-    "frameId": null,
-    "groupIds": [],
-    "height": 0,
-    "id": "id2",
-    "isDeleted": false,
-    "link": null,
-    "locked": false,
-    "opacity": 100,
-    "roughness": 1,
-    "roundness": {
-      "type": 2,
-    },
-    "seed": 238820263,
-    "strokeColor": "#1e1e1e",
-    "strokeStyle": "solid",
-    "strokeWidth": 1,
-    "type": "selection",
-    "updated": 1,
-    "version": 1,
-    "versionNonce": 0,
-    "width": 0,
-    "x": 0,
-    "y": 0,
-  },
+  "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,

src/tests/helpers/api.ts

@@ -16,14 +16,6 @@ import util from "util";
 import path from "path";
 import { getMimeType } from "../../data/blob";
 import {
-  SubtypeLoadedCb,
-  SubtypePrepFn,
-  SubtypeRecord,
-  checkRefreshOnSubtypeLoad,
-  prepareSubtype,
-} from "../../element/subtypes";
-import {
-  maybeGetSubtypeProps,
   newEmbeddableElement,
   newFrameElement,
   newFreeDrawElement,
@@ -40,16 +32,6 @@ const readFile = util.promisify(fs.readFile);
 const { h } = window;
 
 export class API {
-  static addSubtype = (record: SubtypeRecord, subtypePrepFn: SubtypePrepFn) => {
-    const subtypeLoadedCb: SubtypeLoadedCb = (hasSubtype) => {
-      if (checkRefreshOnSubtypeLoad(hasSubtype, h.elements)) {
-        h.app.refresh();
-      }
-    };
-    const prep = prepareSubtype(record, subtypePrepFn, subtypeLoadedCb);
-    return prep;
-  };
-
   static setSelectedElements = (elements: ExcalidrawElement[]) => {
     h.setState({
       selectedElementIds: elements.reduce((acc, element) => {
@@ -131,8 +113,6 @@ export class API {
     verticalAlign?: T extends "text"
       ? ExcalidrawTextElement["verticalAlign"]
       : never;
-    subtype?: ExcalidrawElement["subtype"];
-    customData?: ExcalidrawElement["customData"];
     boundElements?: ExcalidrawGenericElement["boundElements"];
     containerId?: T extends "text"
       ? ExcalidrawTextElement["containerId"]
@@ -161,10 +141,6 @@ export class API {
 
     const appState = h?.state || getDefaultAppState();
 
-    const custom = maybeGetSubtypeProps({
-      subtype: rest.subtype,
-      customData: rest.customData,
-    });
     const base: Omit<
       ExcalidrawGenericElement,
       | "id"
@@ -179,7 +155,6 @@ export class API {
       | "link"
       | "updated"
     > = {
-      ...custom,
       x,
       y,
       frameId: rest.frameId ?? null,

src/tests/subtypes.test.tsx

@@ -1,395 +0,0 @@
-import { vi } from "vitest";
-import {
-  SubtypeLoadedCb,
-  SubtypeRecord,
-  SubtypeMethods,
-  SubtypePrepFn,
-  addSubtypeMethods,
-  ensureSubtypesLoadedForElements,
-  getSubtypeMethods,
-  getSubtypeNames,
-} from "../element/subtypes";
-
-import { render } from "./test-utils";
-import { API } from "./helpers/api";
-import { Excalidraw, FONT_FAMILY } from "../packages/excalidraw/index";
-
-import {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  FontString,
-} from "../element/types";
-import { getFontString } from "../utils";
-import * as textElementUtils from "../element/textElement";
-import { isTextElement } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-
-const MW = 200;
-const TWIDTH = 200;
-const THEIGHT = 20;
-const TBASELINE = 0;
-const FONTSIZE = 20;
-const DBFONTSIZE = 40;
-const TRFONTSIZE = 60;
-
-const test2: SubtypeRecord = {
-  subtype: "test2",
-  parents: ["text"],
-};
-
-const test3: SubtypeRecord = {
-  subtype: "test3",
-  parents: ["text", "line"],
-};
-
-const prepareNullSubtype = function () {
-  const methods = {} as SubtypeMethods;
-  methods.clean = cleanTest2ElementUpdate;
-  methods.measureText = measureTest2;
-  methods.wrapText = wrapTest2;
-
-  return { methods };
-} as SubtypePrepFn;
-
-const cleanTest2ElementUpdate = function (updates) {
-  const oldUpdates = {};
-  for (const key in updates) {
-    if (key !== "fontFamily") {
-      (oldUpdates as any)[key] = (updates as any)[key];
-    }
-  }
-  (updates as any).fontFamily = FONT_FAMILY.Cascadia;
-  return oldUpdates;
-} as SubtypeMethods["clean"];
-
-let test2Loaded = false;
-
-const ensureLoadedTest2: SubtypeMethods["ensureLoaded"] = async (callback) => {
-  test2Loaded = true;
-  if (onTest2Loaded) {
-    onTest2Loaded((el) => isTextElement(el) && el.subtype === test2.subtype);
-  }
-  if (callback) {
-    callback();
-  }
-};
-
-const measureTest2: SubtypeMethods["measureText"] = function (element, next) {
-  const text = next?.text ?? element.text;
-  const customData = next?.customData ?? {};
-  const fontSize = customData.triple
-    ? TRFONTSIZE
-    : next?.fontSize ?? element.fontSize;
-  const fontFamily = element.fontFamily;
-  const fontString = getFontString({ fontSize, fontFamily });
-  const lineHeight = element.lineHeight;
-  const metrics = textElementUtils.measureText(text, fontString, lineHeight);
-  const width = test2Loaded
-    ? metrics.width * 2
-    : Math.max(metrics.width - 10, 0);
-  const height = test2Loaded
-    ? metrics.height * 2
-    : Math.max(metrics.height - 5, 0);
-  return { width, height, baseline: 1 };
-};
-
-const wrapTest2: SubtypeMethods["wrapText"] = function (
-  element,
-  maxWidth,
-  next,
-) {
-  const text = next?.text ?? element.originalText;
-  if (next?.customData && next?.customData.triple === true) {
-    return `${text.split(" ").join("\n")}\nHELLO WORLD.`;
-  }
-  if (next?.fontSize === DBFONTSIZE) {
-    return `${text.split(" ").join("\n")}\nHELLO World.`;
-  }
-  return `${text.split(" ").join("\n")}\nHello world.`;
-};
-
-let onTest2Loaded: SubtypeLoadedCb | undefined;
-
-const prepareTest2Subtype = function (onSubtypeLoaded) {
-  const methods = {
-    clean: cleanTest2ElementUpdate,
-    ensureLoaded: ensureLoadedTest2,
-    measureText: measureTest2,
-    wrapText: wrapTest2,
-  } as SubtypeMethods;
-
-  onTest2Loaded = onSubtypeLoaded;
-
-  return { methods };
-} as SubtypePrepFn;
-
-const prepareTest3Subtype = function () {
-  const methods = {} as SubtypeMethods;
-
-  return { methods };
-} as SubtypePrepFn;
-
-const { h } = window;
-
-describe("subtype registration", () => {
-  it("should check for invalid subtype or parents", async () => {
-    await render(<Excalidraw />, {});
-    // Define invalid subtype records
-    const null1 = {} as SubtypeRecord;
-    const null2 = { subtype: "" } as SubtypeRecord;
-    const null3 = { subtype: "null" } as SubtypeRecord;
-    const null4 = { subtype: "null", parents: [] } as SubtypeRecord;
-    // Try registering the invalid subtypes
-    const prepN1 = API.addSubtype(null1, prepareNullSubtype);
-    const prepN2 = API.addSubtype(null2, prepareNullSubtype);
-    const prepN3 = API.addSubtype(null3, prepareNullSubtype);
-    const prepN4 = API.addSubtype(null4, prepareNullSubtype);
-    // Verify the guards in `prepareSubtype` worked
-    expect(prepN1).toStrictEqual({ methods: {} });
-    expect(prepN2).toStrictEqual({ methods: {} });
-    expect(prepN3).toStrictEqual({ methods: {} });
-    expect(prepN4).toStrictEqual({ methods: {} });
-  });
-  it("should return subtype methods correctly", async () => {
-    // Check initial registration works
-    let prep2 = API.addSubtype(test2, prepareTest2Subtype);
-    expect(prep2.methods).toStrictEqual({
-      clean: cleanTest2ElementUpdate,
-      ensureLoaded: ensureLoadedTest2,
-      measureText: measureTest2,
-      wrapText: wrapTest2,
-    });
-    // Check repeat registration fails
-    prep2 = API.addSubtype(test2, prepareNullSubtype);
-    expect(prep2.methods).toStrictEqual({
-      clean: cleanTest2ElementUpdate,
-      ensureLoaded: ensureLoadedTest2,
-      measureText: measureTest2,
-      wrapText: wrapTest2,
-    });
-
-    // Check initial registration works
-    let prep3 = API.addSubtype(test3, prepareTest3Subtype);
-    expect(prep3.methods).toStrictEqual({});
-    // Check repeat registration fails
-    prep3 = API.addSubtype(test3, prepareNullSubtype);
-    expect(prep3.methods).toStrictEqual({});
-  });
-});
-
-describe("subtypes", () => {
-  it("should correctly register", async () => {
-    const subtypes = getSubtypeNames();
-    expect(subtypes).toContain(test2.subtype);
-    expect(subtypes).toContain(test3.subtype);
-  });
-  it("should return subtype methods", async () => {
-    expect(getSubtypeMethods(undefined)).toBeUndefined();
-    const test2Methods = getSubtypeMethods(test2.subtype);
-    expect(test2Methods?.clean).toStrictEqual(cleanTest2ElementUpdate);
-    expect(test2Methods?.ensureLoaded).toStrictEqual(ensureLoadedTest2);
-    expect(test2Methods?.measureText).toStrictEqual(measureTest2);
-    expect(test2Methods?.render).toBeUndefined();
-    expect(test2Methods?.renderSvg).toBeUndefined();
-    expect(test2Methods?.wrapText).toStrictEqual(wrapTest2);
-  });
-  it("should not overwrite subtype methods", async () => {
-    addSubtypeMethods(test2.subtype, {});
-    addSubtypeMethods(test3.subtype, { clean: cleanTest2ElementUpdate });
-    const test2Methods = getSubtypeMethods(test2.subtype);
-    expect(test2Methods?.measureText).toStrictEqual(measureTest2);
-    expect(test2Methods?.wrapText).toStrictEqual(wrapTest2);
-    const test3Methods = getSubtypeMethods(test3.subtype);
-    expect(test3Methods?.clean).toBeUndefined();
-  });
-  it("should apply to ExcalidrawElements", async () => {
-    const elements = [
-      API.createElement({ type: "text", id: "A", subtype: test3.subtype }),
-      API.createElement({ type: "line", id: "B", subtype: test3.subtype }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    elements.forEach((el) => expect(el.subtype).toBe(test3.subtype));
-  });
-  it("should enforce prop value restrictions", async () => {
-    const elements = [
-      API.createElement({
-        type: "text",
-        id: "A",
-        subtype: test2.subtype,
-        fontFamily: FONT_FAMILY.Virgil,
-      }),
-      API.createElement({
-        type: "text",
-        id: "B",
-        fontFamily: FONT_FAMILY.Virgil,
-      }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    elements.forEach((el) => {
-      if (el.subtype === test2.subtype) {
-        expect(el.fontFamily).toBe(FONT_FAMILY.Cascadia);
-      } else {
-        expect(el.fontFamily).toBe(FONT_FAMILY.Virgil);
-      }
-    });
-  });
-  it("should consider enforced prop values in version increments", async () => {
-    const rectA = API.createElement({
-      type: "text",
-      id: "A",
-      subtype: test2.subtype,
-      fontFamily: FONT_FAMILY.Virgil,
-      fontSize: 10,
-    });
-    const rectB = API.createElement({
-      type: "text",
-      id: "B",
-      subtype: test2.subtype,
-      fontFamily: FONT_FAMILY.Virgil,
-      fontSize: 10,
-    });
-    // Initial element creation checks
-    expect(rectA.fontFamily).toBe(FONT_FAMILY.Cascadia);
-    expect(rectB.fontFamily).toBe(FONT_FAMILY.Cascadia);
-    expect(rectA.version).toBe(1);
-    expect(rectB.version).toBe(1);
-    // Check that attempting to set prop values not permitted by the subtype
-    // doesn't increment element versions
-    mutateElement(rectA, { fontFamily: FONT_FAMILY.Helvetica });
-    mutateElement(rectB, { fontFamily: FONT_FAMILY.Helvetica, fontSize: 20 });
-    expect(rectA.version).toBe(1);
-    expect(rectB.version).toBe(2);
-    // Check that element versions don't increment when creating new elements
-    // while attempting to use prop values not permitted by the subtype
-    // First check based on `rectA` (unsuccessfully mutated)
-    const rectC = newElementWith(rectA, { fontFamily: FONT_FAMILY.Virgil });
-    const rectD = newElementWith(rectA, {
-      fontFamily: FONT_FAMILY.Virgil,
-      fontSize: 15,
-    });
-    expect(rectC.version).toBe(1);
-    expect(rectD.version).toBe(2);
-    // Then check based on `rectB` (successfully mutated)
-    const rectE = newElementWith(rectB, { fontFamily: FONT_FAMILY.Virgil });
-    const rectF = newElementWith(rectB, {
-      fontFamily: FONT_FAMILY.Virgil,
-      fontSize: 15,
-    });
-    expect(rectE.version).toBe(2);
-    expect(rectF.version).toBe(3);
-  });
-  it("should call custom text methods", async () => {
-    const testString = "A quick brown fox jumps over the lazy dog.";
-    const elements = [
-      API.createElement({
-        type: "text",
-        id: "A",
-        subtype: test2.subtype,
-        text: testString,
-        fontSize: FONTSIZE,
-      }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    const mockMeasureText = (text: string, font: FontString) => {
-      if (text === testString) {
-        let multiplier = 1;
-        if (font.includes(`${DBFONTSIZE}`)) {
-          multiplier = 2;
-        }
-        if (font.includes(`${TRFONTSIZE}`)) {
-          multiplier = 3;
-        }
-        const width = multiplier * TWIDTH;
-        const height = multiplier * THEIGHT;
-        const baseline = multiplier * TBASELINE;
-        return { width, height, baseline };
-      }
-      return { width: 1, height: 0, baseline: 0 };
-    };
-
-    vi.spyOn(textElementUtils, "measureText").mockImplementation(
-      mockMeasureText,
-    );
-
-    elements.forEach((el) => {
-      if (isTextElement(el)) {
-        // First test with `ExcalidrawTextElement.text`
-        const metrics = textElementUtils.measureTextElement(el);
-        expect(metrics).toStrictEqual({
-          width: TWIDTH - 10,
-          height: THEIGHT - 5,
-          baseline: TBASELINE + 1,
-        });
-        const wrappedText = textElementUtils.wrapTextElement(el, MW);
-        expect(wrappedText).toEqual(
-          `${testString.split(" ").join("\n")}\nHello world.`,
-        );
-
-        // Now test with modified text in `next`
-        let next: {
-          text?: string;
-          fontSize?: number;
-          customData?: Record<string, any>;
-        } = {
-          text: "Hello world.",
-        };
-        const nextMetrics = textElementUtils.measureTextElement(el, next);
-        expect(nextMetrics).toStrictEqual({ width: 0, height: 0, baseline: 1 });
-        const nextWrappedText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextWrappedText).toEqual("Hello\nworld.\nHello world.");
-
-        // Now test modified fontSizes in `next`
-        next = { fontSize: DBFONTSIZE };
-        const nextFM = textElementUtils.measureTextElement(el, next);
-        expect(nextFM).toStrictEqual({
-          width: 2 * TWIDTH - 10,
-          height: 2 * THEIGHT - 5,
-          baseline: 2 * TBASELINE + 1,
-        });
-        const nextFWrText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextFWrText).toEqual(
-          `${testString.split(" ").join("\n")}\nHELLO World.`,
-        );
-
-        // Now test customData in `next`
-        next = { customData: { triple: true } };
-        const nextCD = textElementUtils.measureTextElement(el, next);
-        expect(nextCD).toStrictEqual({
-          width: 3 * TWIDTH - 10,
-          height: 3 * THEIGHT - 5,
-          baseline: 3 * TBASELINE + 1,
-        });
-        const nextCDWrText = textElementUtils.wrapTextElement(el, MW, next);
-        expect(nextCDWrText).toEqual(
-          `${testString.split(" ").join("\n")}\nHELLO WORLD.`,
-        );
-      }
-    });
-  });
-});
-describe("subtype loading", () => {
-  let elements: ExcalidrawElement[];
-  beforeEach(async () => {
-    const testString = "A quick brown fox jumps over the lazy dog.";
-    elements = [
-      API.createElement({
-        type: "text",
-        id: "A",
-        subtype: test2.subtype,
-        text: testString,
-      }),
-    ];
-    await render(<Excalidraw />, { localStorageData: { elements } });
-    h.elements = elements;
-  });
-  it("should redraw text bounding boxes", async () => {
-    h.setState({ selectedElementIds: { A: true } });
-    const el = h.elements[0] as ExcalidrawTextElement;
-    expect(el.width).toEqual(100);
-    expect(el.height).toEqual(100);
-    ensureSubtypesLoadedForElements(elements);
-    expect(el.width).toEqual(TWIDTH * 2);
-    expect(el.height).toEqual(THEIGHT * 2);
-    expect(el.baseline).toEqual(TBASELINE + 1);
-  });
-});

src/types.ts

@@ -17,6 +17,7 @@ import {
   StrokeRoundness,
   ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
+  ExcalidrawSelectionElement,
 } from "./element/types";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -182,10 +183,25 @@ export type AppState = {
     element: NonDeletedExcalidrawElement;
     state: "hover" | "active";
   } | null;
-  draggingElement: NonDeletedExcalidrawElement | null;
+  /** element that's being dragged or created */
+  draggingElement: Exclude<
+    NonDeletedExcalidrawElement,
+    ExcalidrawSelectionElement
+  > | null;
+  /**
+   * Element that's being resized.
+   * NOTE not set when resizing a group or linear element
+   */
   resizingElement: NonDeletedExcalidrawElement | null;
+  /** multi-point linear element when it's being created */
   multiElement: NonDeleted<ExcalidrawLinearElement> | null;
-  selectionElement: NonDeletedExcalidrawElement | null;
+  /**
+   * The selection box (we currently use an excalidraw element).
+   *
+   * Checking for this attribute is a good way to determine whether the user is
+   * selecting.
+   */
+  selectionElement: ExcalidrawSelectionElement | null;
   isBindingEnabled: boolean;
   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
   suggestedBindings: SuggestedBinding[];
@@ -198,9 +214,14 @@ export type AppState = {
   };
   editingFrame: string | null;
   elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
-  // element being edited, but not necessarily added to elements array yet
-  // (e.g. text element when typing into the input)
+  /**
+   * Text that's being element, or new element being created.
+   */
   editingElement: NonDeletedExcalidrawElement | null;
+  /**
+   * Linear element that's being edited (when in the linear element editor).
+   * Not set when creating multi-point linear element.
+   */
   editingLinearElement: LinearElementEditor | null;
   activeTool: {
     /**