change css back to original

lint
add svgContainer offset
2023-10-07 10:38:46 +02:00 · 2023-10-07 10:37:37 +02:00 · 2023-10-07 10:35:06 +02:00 · 2023-10-07 08:49:32 +02:00
53 changed files with 630 additions and 2686 deletions
@@ -2,7 +2,7 @@

 ### Does this package support collaboration ?

-No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
+No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.

 ### Turning off Aggressive Anti-Fingerprinting in Brave browser

@@ -18,7 +18,7 @@ We strongly recommend turning it off. You can follow the steps below on how to d

 2. Once opened, look for **Aggressively Block Fingerprinting**

-![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+![Aggresive block fingerprinting](../../assets/aggressive-block-fingerprint.png)

 3. Switch to **Block Fingerprinting**

@@ -1,22 +0,0 @@
-# Frames
-
-## Ordering
-
-Frames should be ordered where frame children come first, followed by the frame element itself:
-
-```
-[
-  other_element,
-  frame1_child1,
-  frame1_child2,
-  frame1,
-  other_element,
-  frame2_child1,
-  frame2_child2,
-  frame2,
-  other_element,
-  ...
-]
-```
-
-If not oredered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
@@ -23,11 +23,7 @@ const sidebars = {
      },
      items: ["introduction/development", "introduction/contributing"],
    },
-    {
-      type: "category",
-      label: "Codebase",
-      items: ["codebase/json-schema", "codebase/frames"],
-    },
+    { type: "category", label: "Codebase", items: ["codebase/json-schema"] },
    {
      type: "category",
      label: "@excalidraw/excalidraw",
@@ -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,
@@ -10,7 +10,7 @@ import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey, updateActiveTool } from "../utils";
+import { getShortcutKey, setCursor, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
@@ -21,7 +21,6 @@ import {
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { Bounds } from "../element/bounds";
-import { setCursor } from "../cursor";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool } from "../utils";
+import { updateActiveTool, resetCursor } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -15,7 +15,6 @@ import {
 } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import { AppState } from "../types";
-import { resetCursor } from "../cursor";

 export const actionFinalize = register({
  name: "finalize",
@@ -4,8 +4,7 @@ import { removeAllElementsFromFrame } from "../frame";
 import { getFrameElements } from "../frame";
 import { KEYS } from "../keys";
 import { AppClassProperties, AppState } from "../types";
-import { updateActiveTool } from "../utils";
-import { setCursorForShape } from "../cursor";
+import { setCursorForShape, updateActiveTool } from "../utils";
 import { register } from "./register";

 const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
@@ -2,13 +2,13 @@
 .undo-redo-buttons {
  background-color: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
-  box-shadow: 0 0 0 1px var(--color-surface-lowest);
 }

 .zoom-button,
 .undo-redo-buttons button {
+  border: 1px solid var(--default-border-color) !important;
  border-radius: 0 !important;
-  background-color: var(--color-surface-low) !important;
+  background-color: transparent !important;
  font-size: 0.875rem !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
@@ -241,14 +241,18 @@ import {
  isInputLike,
  isToolIcon,
  isWritableElement,
+  resetCursor,
  resolvablePromise,
  sceneCoordsToViewportCoords,
+  setCursor,
+  setCursorForShape,
  tupleToCoors,
  viewportCoordsToSceneCoords,
  withBatchedUpdates,
  wrapEvent,
  withBatchedUpdatesThrottled,
  updateObject,
+  setEraserCursor,
  updateActiveTool,
  getShortcutKey,
  isTransparent,
@@ -367,12 +371,6 @@ import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
 import { LaserToolOverlay } from "./LaserTool/LaserTool";
 import { LaserPathManager } from "./LaserTool/LaserPathManager";
-import {
-  setEraserCursor,
-  setCursor,
-  resetCursor,
-  setCursorForShape,
-} from "../cursor";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -1157,9 +1155,6 @@ class App extends React.Component<AppProps, AppState> {
            this.state.selectionElement ||
            this.state.draggingElement ||
            this.state.resizingElement ||
-            (this.state.activeTool.type === "laser" &&
-              // technically we can just test on this once we make it more safe
-              this.state.cursorButton === "down") ||
            (this.state.editingElement &&
              !isTextElement(this.state.editingElement))
              ? POINTER_EVENTS.disabled
@@ -4484,15 +4479,12 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }

-    this.lastPointerDownEvent = event;
-
-    // we must exit before we set `cursorButton` state and `savePointer`
-    // else it will send pointer state & laser pointer events in collab when
-    // panning
    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
      return;
    }

+    this.lastPointerDownEvent = event;
+
    this.setState({
      lastPointerDownWith: event.pointerType,
      cursorButton: "down",
@@ -12,32 +12,32 @@

    &--color-primary {
      &.ExcButton--variant-filled {
-        --text-color: var(--color-surface-lowest);
+        --text-color: var(--input-bg-color);
        --back-color: var(--color-primary);

        &:hover {
-          --back-color: var(--color-brand-hover);
+          --back-color: var(--color-primary-darker);
        }

        &:active {
-          --back-color: var(--color-brand-active);
+          --back-color: var(--color-primary-darkest);
        }
      }

      &.ExcButton--variant-outlined,
      &.ExcButton--variant-icon {
        --text-color: var(--color-primary);
-        --border-color: var(--color-border-outline);
-        --back-color: transparent;
+        --border-color: var(--color-primary);
+        --back-color: var(--input-bg-color);

        &:hover {
-          --text-color: var(--color-brand-hover);
-          --border-color: var(--color-brand-hover);
+          --text-color: var(--color-primary-darker);
+          --border-color: var(--color-primary-darker);
        }

        &:active {
-          --text-color: var(--color-brand-active);
-          --border-color: var(--color-brand-active);
+          --text-color: var(--color-primary-darkest);
+          --border-color: var(--color-primary-darkest);
        }
      }
    }
@@ -19,35 +19,20 @@
    }

    &__btn {
-      --background: var(--color-surface-mid);
-
      display: flex;
      column-gap: 0.5rem;
      align-items: center;
-      background-color: var(--background);
+      border: 1px solid var(--default-border-color);
      padding: 0.625rem 1rem;
-      border: 1px solid var(--background);
      border-radius: var(--border-radius-lg);
      color: var(--text-primary-color);
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.4px;

-      @at-root .excalidraw.theme--dark#{&} {
-        --background: var(--color-surface-high);
-        &:hover {
-          --background: #363541;
-        }
-      }
-
      &:hover {
-        --background: var(--color-surface-high);
        text-decoration: none;
      }
-
-      &:active {
-        border-color: var(--color-primary);
-      }
    }

    &__link-icon {
@@ -106,6 +106,13 @@ export class LaserPathManager {
  }

  startPath(x: number, y: number) {
+    if (this.container) {
+      this.container.style.top = "0px";
+      this.container.style.left = "0px";
+      const { x, y } = this.container.getBoundingClientRect();
+      this.container.style.top = `${-y}px`;
+      this.container.style.left = `${-x}px`;
+    }
    this.ownState.currentPath = instantiatePath();
    this.ownState.currentPath.addPoint([x, y, performance.now()]);
    this.updatePath(this.ownState);
@@ -6,7 +6,6 @@
    position: fixed;
    top: 0;
    left: 0;
-
    z-index: 2;

    .LaserToolOverlayCanvas {
@@ -99,10 +99,10 @@
    font-size: 0.75rem;

    &:hover {
-      background-color: var(--color-brand-hover);
+      background-color: var(--color-primary-darker);
    }
    &:active {
-      background-color: var(--color-brand-active);
+      background-color: var(--color-primary-darkest);
    }
  }

@@ -1,18 +1,27 @@
@import "../css/variables.module";

 .excalidraw {
-  --RadioGroup-background: var(--island-bg-color);
-  --RadioGroup-border: var(--color-surface-high);
+  --RadioGroup-background: #ffffff;
+  --RadioGroup-border: var(--color-gray-30);

  --RadioGroup-choice-color-off: var(--color-primary);
-  --RadioGroup-choice-color-off-hover: var(--color-brand-hover);
-  --RadioGroup-choice-background-off: var(--island-bg-color);
-  --RadioGroup-choice-background-off-active: var(--color-surface-high);
+  --RadioGroup-choice-color-off-hover: var(--color-primary-darkest);
+  --RadioGroup-choice-background-off: white;
+  --RadioGroup-choice-background-off-active: var(--color-gray-20);

-  --RadioGroup-choice-color-on: var(--color-surface-lowest);
+  --RadioGroup-choice-color-on: white;
  --RadioGroup-choice-background-on: var(--color-primary);
-  --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
-  --RadioGroup-choice-background-on-active: var(--color-brand-active);
+  --RadioGroup-choice-background-on-hover: var(--color-primary-darker);
+  --RadioGroup-choice-background-on-active: var(--color-primary-darkest);
+
+  &.theme--dark {
+    --RadioGroup-background: var(--color-gray-85);
+    --RadioGroup-border: var(--color-gray-70);
+
+    --RadioGroup-choice-background-off: var(--color-gray-85);
+    --RadioGroup-choice-background-off-active: var(--color-gray-70);
+    --RadioGroup-choice-color-on: var(--color-gray-85);
+  }

  .RadioGroup {
    box-sizing: border-box;
@@ -3,7 +3,8 @@
 .excalidraw {
  .sidebar-trigger {
    @include outlineButtonStyles;
-    @include filledButtonOnCanvas;
+
+    background-color: var(--island-bg-color);

    width: auto;
    height: var(--lg-button-size);
@@ -1,13 +1,15 @@
@import "../css/variables.module";

 .excalidraw {
-  --Switch-disabled-color: var(--color-border-outline);
-  --Switch-disabled-toggled-background: var(--color-border-outline-variant);
-  --Switch-disabled-border: var(--color-border-outline-variant);
-  --Switch-track-background: var(--island-bg-color);
-  --Switch-thumb-background: var(--color-on-surface);
-  --Switch-hover-background: var(--color-brand-hover);
-  --Switch-active-background: var(--color-brand-active);
+  --Switch-disabled-color: #d6d6d6;
+  --Switch-track-background: white;
+  --Switch-thumb-background: #3d3d3d;
+
+  &.theme--dark {
+    --Switch-disabled-color: #5c5c5c;
+    --Switch-track-background: #242424;
+    --Switch-thumb-background: #b8b8b8;
+  }

  .Switch {
    position: relative;
@@ -26,11 +28,7 @@

    &:hover {
      background: var(--Switch-track-background);
-      border: 1px solid var(--Switch-hover-background);
-    }
-
-    &:active {
-      border: 1px solid var(--Switch-active-background);
+      border: 1px solid #999999;
    }

    &.toggled {
@@ -45,11 +43,11 @@

    &.disabled {
      background: var(--Switch-track-background);
-      border: 1px solid var(--Switch-disabled-border);
+      border: 1px solid var(--Switch-disabled-color);

      &.toggled {
-        background: var(--Switch-disabled-toggled-background);
-        border: 1px solid var(--Switch-disabled-toggled-background);
+        background: var(--Switch-disabled-color);
+        border: 1px solid var(--Switch-disabled-color);
      }
    }

@@ -94,7 +92,7 @@
    }

    &.disabled.toggled:before {
-      background: var(--Switch-disabled-color);
+      background: var(--color-gray-50);
    }

    & input {
@@ -1,16 +1,25 @@
@import "../css/variables.module";

 .excalidraw {
-  --ExcTextField--color: var(--color-on-surface);
-  --ExcTextField--label-color: var(--color-on-surface);
-  --ExcTextField--background: transparent;
-  --ExcTextField--readonly--background: var(--color-surface-high);
-  --ExcTextField--readonly--color: var(--color-on-surface);
-  --ExcTextField--border: var(--color-border-outline);
-  --ExcTextField--readonly--border: var(--color-border-outline-variant);
-  --ExcTextField--border-hover: var(--color-brand-hover);
-  --ExcTextField--border-active: var(--color-brand-active);
-  --ExcTextField--placeholder: var(--color-border-outline-variant);
+  --ExcTextField--color: var(--color-gray-80);
+  --ExcTextField--label-color: var(--color-gray-80);
+  --ExcTextField--background: white;
+  --ExcTextField--readonly--background: var(--color-gray-10);
+  --ExcTextField--readonly--color: var(--color-gray-80);
+  --ExcTextField--border: var(--color-gray-40);
+  --ExcTextField--border-hover: var(--color-gray-50);
+  --ExcTextField--placeholder: var(--color-gray-40);
+
+  &.theme--dark {
+    --ExcTextField--color: var(--color-gray-10);
+    --ExcTextField--label-color: var(--color-gray-20);
+    --ExcTextField--background: var(--color-gray-85);
+    --ExcTextField--readonly--background: var(--color-gray-80);
+    --ExcTextField--readonly--color: var(--color-gray-40);
+    --ExcTextField--border: var(--color-gray-70);
+    --ExcTextField--border-hover: var(--color-gray-60);
+    --ExcTextField--placeholder: var(--color-gray-80);
+  }

  .ExcTextField {
    &--fullWidth {
@@ -52,7 +61,7 @@

        &:active,
        &:focus-within {
-          border-color: var(--ExcTextField--border-active);
+          border-color: var(--color-primary);
        }
      }

@@ -98,7 +107,7 @@

      &--readonly {
        background: var(--ExcTextField--readonly--background);
-        border-color: var(--ExcTextField--readonly--border);
+        border-color: transparent;

        & input {
          color: var(--ExcTextField--readonly--color);
@@ -97,6 +97,10 @@
      }
    }

+    // &:hover {
+    //   background-color: var(--button-gray-2);
+    // }
+
    &:active {
      background-color: var(--button-gray-3);
    }
@@ -106,6 +110,7 @@
    }

    &--hide {
+      // visibility: hidden;
      display: none !important;
    }
  }
@@ -22,7 +22,6 @@
  .App-toolbar__extra-tools-trigger {
    box-shadow: none;
    border: 0;
-    background-color: transparent;

    &:active {
      background-color: var(--button-hover-bg);
@@ -114,13 +114,11 @@ const areEqual = (
    return false;
  }

-  return (
-    isShallowEqual(
-      // asserting AppState because we're being passed the whole AppState
-      // but resolve to only the StaticCanvas-relevant props
-      getRelevantAppStateProps(prevProps.appState as AppState),
-      getRelevantAppStateProps(nextProps.appState as AppState),
-    ) && isShallowEqual(prevProps.renderConfig, nextProps.renderConfig)
+  return isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the StaticCanvas-relevant props
+    getRelevantAppStateProps(prevProps.appState as AppState),
+    getRelevantAppStateProps(nextProps.appState as AppState),
  );
 };

@@ -16,7 +16,7 @@
      .dropdown-menu-container {
        padding: 8px 8px;
        box-sizing: border-box;
-        // background-color: var(--island-bg-color);
+        background-color: var(--island-bg-color);
        box-shadow: var(--shadow-island);
        border-radius: var(--border-radius-lg);
        position: relative;
@@ -29,7 +29,7 @@
    }

    .dropdown-menu-container {
-      background-color: var(--island-bg-color);
+      background-color: #fff !important;
      max-height: calc(100vh - 150px);
      overflow-y: auto;
      --gap: 2;
@@ -40,7 +40,7 @@
      padding: 0 0.625rem;
      column-gap: 0.625rem;
      font-size: 0.875rem;
-      color: var(--color-on-surface);
+      color: var(--color-gray-100);
      width: 100%;
      box-sizing: border-box;
      font-weight: normal;
@@ -49,7 +49,7 @@

    .dropdown-menu-item {
      background-color: transparent;
-      border: 1px solid transparent;
+      border: 0;
      align-items: center;
      height: 2rem;
      cursor: pointer;
@@ -80,11 +80,6 @@
        text-decoration: none;
      }

-      &:active {
-        background-color: var(--button-hover-bg);
-        border-color: var(--color-brand-active);
-      }
-
      svg {
        width: 1rem;
        height: 1rem;
@@ -103,33 +98,22 @@
      font-weight: 500;
    }
  }
+  &.theme--dark {
+    .dropdown-menu-item {
+      color: var(--color-gray-40);
+    }
+
+    .dropdown-menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }

  .dropdown-menu-button {
    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
    width: var(--lg-button-size);
    height: var(--lg-button-size);

-    --background: var(--color-surface-mid);
-
-    background-color: var(--background);
-
-    @at-root .excalidraw.theme--dark#{&} {
-      --background: var(--color-surface-high);
-      &:hover {
-        --background: #363541;
-      }
-    }
-
-    &:hover {
-      --background: var(--color-surface-high);
-      background-color: var(--background);
-      text-decoration: none;
-    }
-
-    &:active {
-      border-color: var(--color-primary);
-    }
-
    svg {
      width: var(--lg-icon-size);
      height: var(--lg-icon-size);
@@ -14,8 +14,6 @@

    --button-active-bg: var(--color-primary-darker);

-    box-shadow: 0 0 0 1px var(--color-surface-lowest);
-
    flex-shrink: 0;

    // double .active to force specificity
@@ -43,7 +43,6 @@ const MainMenu = Object.assign(
                });
              }}
              data-testid="main-menu-trigger"
-              className="main-menu-trigger"
            >
              {HamburgerMenuIcon}
            </DropdownMenu.Trigger>
@@ -174,7 +174,7 @@
    justify-content: space-between;

    background: none;
-    border: 1px solid transparent;
+    border: none;

    padding: 0.75rem;

@@ -204,7 +204,7 @@

  .welcome-screen-menu-item:hover {
    text-decoration: none;
-    background: var(--button-hover-bg);
+    background: var(--color-gray-10);

    .welcome-screen-menu-item__shortcut {
      color: var(--color-gray-50);
@@ -216,8 +216,7 @@
  }

  .welcome-screen-menu-item:active {
-    background: var(--button-hover-bg);
-    border-color: var(--color-brand-active);
+    background: var(--color-gray-20);

    .welcome-screen-menu-item__shortcut {
      color: var(--color-gray-50);
@@ -248,7 +247,8 @@
    }

    .welcome-screen-menu-item:hover {
-      background-color: var(--color-surface-low);
+      background: var(--color-gray-85);
+
      .welcome-screen-menu-item__shortcut {
        color: var(--color-gray-50);
      }
@@ -259,6 +259,7 @@
    }

    .welcome-screen-menu-item:active {
+      background-color: var(--color-gray-90);
      .welcome-screen-menu-item__text {
        color: var(--color-gray-10);
      }
@@ -444,14 +444,13 @@
    }

    &:active {
-      border: 1px solid var(--button-active-border);
+      border: 1px solid var(--color-primary-darkest);
    }
  }

  .help-icon {
    @include outlineButtonStyles;
-    @include filledButtonOnCanvas;
-
+    background-color: var(--island-bg-color);
    width: var(--lg-button-size);
    height: var(--lg-button-size);

@@ -622,20 +621,6 @@
      padding: 0;
    }
  }
-
-  .main-menu-trigger {
-    @include filledButtonOnCanvas;
-  }
-
-  .App-menu__left {
-    --button-border: transparent;
-    --button-bg: var(--color-surface-mid);
-
-    @at-root .excalidraw.theme--dark#{&} {
-      --button-hover-bg: #363541;
-      --button-bg: var(--color-surface-high);
-    }
-  }
 }

 .ErrorSplash.excalidraw {
@@ -12,30 +12,27 @@
  --dialog-border-color: var(--color-gray-20);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #{$oc-blue-2};
-  --icon-fill-color: var(--color-on-surface);
+  --icon-fill-color: var(--color-gray-80);
  --icon-green-fill-color: #{$oc-green-9};
  --default-bg-color: #{$oc-white};
  --input-bg-color: #{$oc-white};
  --input-border-color: #{$oc-gray-4};
  --input-hover-bg-color: #{$oc-gray-1};
  --input-label-color: #{$oc-gray-7};
-  --island-bg-color: #ffffff;
+  --island-bg-color: rgba(255, 255, 255, 0.96);
  --keybinding-color: var(--color-gray-40);
  --link-color: #{$oc-blue-7};
  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: var(--island-bg-color);
+  --popup-bg-color: #{$oc-white};
  --popup-secondary-bg-color: #{$oc-gray-1};
  --popup-text-color: #{$oc-black};
  --popup-text-inverted-color: #{$oc-white};
  --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
-    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
-    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-
-  --button-hover-bg: var(--color-surface-high);
-  --button-active-bg: var(--color-surface-high);
-  --button-active-border: var(--color-brand-active);
-  --default-border-color: var(--color-surface-high);
+  --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
+    0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
+    0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
+  --button-hover-bg: var(--color-gray-10);
+  --default-border-color: var(--color-gray-30);

  --default-button-size: 2rem;
  --default-icon-size: 1rem;
@@ -66,14 +63,14 @@
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
-  --sidebar-border-color: var(--color-surface-high);
-  --sidebar-bg-color: var(--island-bg-color);
+  --sidebar-border-color: var(--color-gray-20);
+  --sidebar-bg-color: #fff;
  --library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01),
    0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09),
    0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);

  --space-factor: 0.25rem;
-  --text-primary-color: var(--color-on-surface);
+  --text-primary-color: var(--color-gray-80);

  --color-selection: #6965db;

@@ -135,19 +132,6 @@
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;

-  --color-surface-high: hsl(244, 100%, 97%);
-  --color-surface-mid: hsl(240 25% 96%);
-  --color-surface-low: hsl(240 25% 94%);
-  --color-surface-lowest: #ffffff;
-  --color-on-surface: #1b1b1f;
-  --color-brand-hover: #5753d0;
-  --color-on-primary-container: #030064;
-  --color-surface-primary-container: #e0dfff;
-  --color-brand-active: #4440bf;
-  --color-border-outline: #767680;
-  --color-border-outline-variant: #c5c5d0;
-  --color-surface-primary-container: #e0dfff;
-
  &.theme--dark {
    &.theme--dark-background-none {
      background: none;
@@ -166,24 +150,29 @@
    --dialog-border-color: var(--color-gray-80);
    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
    --focus-highlight-color: #{$oc-blue-6};
+    --icon-fill-color: var(--color-gray-40);
    --icon-green-fill-color: #{$oc-green-4};
    --default-bg-color: #121212;
    --input-bg-color: #121212;
    --input-border-color: #2e2e2e;
    --input-hover-bg-color: #181818;
    --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #232329;
+    --island-bg-color: #262627;
    --keybinding-color: var(--color-gray-60);
    --link-color: #{$oc-blue-4};
    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
+    --popup-bg-color: #2c2c2c;
    --popup-secondary-bg-color: #222;
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
-      0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
-      0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-
+    --text-primary-color: var(--color-gray-40);
+    --button-hover-bg: var(--color-gray-80);
+    --default-border-color: var(--color-gray-80);
+    --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
+      0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),
+      0px 1.13px 4.13211px rgba(0, 0, 0, 0.035),
+      0px 0.769896px 1.4945px rgba(0, 0, 0, 0.0243888);
    --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
      0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
      0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@@ -191,6 +180,8 @@
      0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
      0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
    --avatar-border-color: var(--color-gray-85);
+    --sidebar-border-color: var(--color-gray-85);
+    --sidebar-bg-color: #191919;

    --scrollbar-thumb: #{$oc-gray-8};
    --scrollbar-thumb-hover: #{$oc-gray-7};
@@ -233,18 +224,5 @@
    --color-promo: #d297ff;

    --color-logo-text: #e2dfff;
-
-    --color-surface-high: hsl(245, 10%, 21%);
-    --color-surface-low: hsl(240, 8%, 15%);
-    --color-surface-mid: hsl(240 6% 10%);
-    --color-surface-lowest: hsl(0, 0%, 7%);
-    --color-on-surface: #e3e3e8;
-    --color-brand-hover: #bbb8ff;
-    --color-on-primary-container: #e0dfff;
-    --color-surface-primary-container: #403e6a;
-    --color-brand-active: #d0ccff;
-    --color-border-outline: #8e8d9c;
-    --color-border-outline-variant: #46464f;
-    --color-surface-primary-container: #403e6a;
  }
 }
@@ -11,7 +11,7 @@
    .ToolIcon_type_radio,
    .ToolIcon_type_checkbox {
      &:checked + .ToolIcon__icon {
-        --icon-fill-color: var(--color-on-primary-container);
+        --icon-fill-color: var(--color-primary-darker);

        svg {
          fill: var(--icon-fill-color);
@@ -23,11 +23,11 @@
  .ToolIcon_type_radio,
  .ToolIcon_type_checkbox {
    &:checked + .ToolIcon__icon {
-      background: var(--color-surface-primary-container);
-      --keybinding-color: var(--color-on-primary-container);
+      background: var(--color-primary-light);
+      --keybinding-color: var(--color-gray-60);

      svg {
-        color: var(--color-on-primary-container);
+        color: var(--color-primary-darker);
      }
    }
  }
@@ -44,11 +44,7 @@

    &:active {
      background: var(--button-hover-bg);
-      border: 1px solid var(--button-active-border);
-
-      svg {
-        color: var(--color-on-primary-container);
-      }
+      border: 1px solid var(--color-primary-darkest);
    }
  }
 }
@@ -67,7 +63,7 @@
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
-  color: var(--button-color, var(--color-on-surface));
+  color: var(--button-color, var(--text-primary-color));

  svg {
    width: var(--button-width, var(--lg-icon-size));
@@ -92,38 +88,22 @@
  }

  &.active {
-    background-color: var(
-      --button-selected-bg,
-      var(--color-surface-primary-container)
-    );
-    border-color: var(
-      --button-selected-border,
-      var(--color-surface-primary-container)
-    );
+    background-color: var(--button-selected-bg, var(--color-primary-light));
+    border-color: var(--button-selected-border, var(--color-primary-light));

    &:hover {
      background-color: var(
        --button-selected-hover-bg,
-        var(--color-surface-primary-container)
+        var(--color-primary-light)
      );
    }

    svg {
-      color: var(--button-color, var(--color-on-primary-container));
+      color: var(--button-color, var(--color-primary-darker));
    }
  }
 }

-@mixin filledButtonOnCanvas {
-  border: none;
-  box-shadow: 0 0 0 1px var(--color-surface-lowest);
-  background-color: var(--color-surface-low);
-
-  &:active {
-    box-shadow: 0 0 0 1px var(--color-brand-active);
-  }
-}
-
 $theme-filter: "invert(93%) hue-rotate(180deg)";
 $right-sidebar-width: "302px";

@@ -1,103 +0,0 @@
-import { CURSOR_TYPE, MIME_TYPES, THEME } from "./constants";
-import OpenColor from "open-color";
-import { AppState, DataURL } from "./types";
-import { isHandToolActive, isEraserActive } from "./appState";
-
-const laserPointerCursorSVG_tag = `<svg viewBox="0 0 24 24" stroke-width="1" width="28" height="28" xmlns="http://www.w3.org/2000/svg">`;
-const laserPointerCursorBackgroundSVG = `<path d="M6.164 11.755a5.314 5.314 0 0 1-4.932-5.298 5.314 5.314 0 0 1 5.311-5.311 5.314 5.314 0 0 1 5.307 5.113l8.773 8.773a3.322 3.322 0 0 1 0 4.696l-.895.895a3.322 3.322 0 0 1-4.696 0l-8.868-8.868Z" style="fill:#fff"/>`;
-const laserPointerCursorIconSVG = `<path stroke="#1b1b1f" fill="#fff" d="m7.868 11.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L11.201 7.78 9.558 9.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M3.664 3.625l1 1M2.529 6.922l1.407-.144m5.735-2.932-1.118.866M4.285 9.823l.758-1.194m1.863-6.207-.13 1.408"/>`;
-
-const laserPointerCursorDataURL_lightMode = `data:${
-  MIME_TYPES.svg
-},${encodeURIComponent(
-  `${laserPointerCursorSVG_tag}${laserPointerCursorIconSVG}</svg>`,
-)}`;
-const laserPointerCursorDataURL_darkMode = `data:${
-  MIME_TYPES.svg
-},${encodeURIComponent(
-  `${laserPointerCursorSVG_tag}${laserPointerCursorBackgroundSVG}${laserPointerCursorIconSVG}</svg>`,
-)}`;
-
-export const resetCursor = (interactiveCanvas: HTMLCanvasElement | null) => {
-  if (interactiveCanvas) {
-    interactiveCanvas.style.cursor = "";
-  }
-};
-
-export const setCursor = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  cursor: string,
-) => {
-  if (interactiveCanvas) {
-    interactiveCanvas.style.cursor = cursor;
-  }
-};
-
-let eraserCanvasCache: any;
-let previewDataURL: string;
-export const setEraserCursor = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  theme: AppState["theme"],
-) => {
-  const cursorImageSizePx = 20;
-
-  const drawCanvas = () => {
-    const isDarkTheme = theme === THEME.DARK;
-    eraserCanvasCache = document.createElement("canvas");
-    eraserCanvasCache.theme = theme;
-    eraserCanvasCache.height = cursorImageSizePx;
-    eraserCanvasCache.width = cursorImageSizePx;
-    const context = eraserCanvasCache.getContext("2d")!;
-    context.lineWidth = 1;
-    context.beginPath();
-    context.arc(
-      eraserCanvasCache.width / 2,
-      eraserCanvasCache.height / 2,
-      5,
-      0,
-      2 * Math.PI,
-    );
-    context.fillStyle = isDarkTheme ? OpenColor.black : OpenColor.white;
-    context.fill();
-    context.strokeStyle = isDarkTheme ? OpenColor.white : OpenColor.black;
-    context.stroke();
-    previewDataURL = eraserCanvasCache.toDataURL(MIME_TYPES.svg) as DataURL;
-  };
-  if (!eraserCanvasCache || eraserCanvasCache.theme !== theme) {
-    drawCanvas();
-  }
-
-  setCursor(
-    interactiveCanvas,
-    `url(${previewDataURL}) ${cursorImageSizePx / 2} ${
-      cursorImageSizePx / 2
-    }, auto`,
-  );
-};
-
-export const setCursorForShape = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  appState: Pick<AppState, "activeTool" | "theme">,
-) => {
-  if (!interactiveCanvas) {
-    return;
-  }
-  if (appState.activeTool.type === "selection") {
-    resetCursor(interactiveCanvas);
-  } else if (isHandToolActive(appState)) {
-    interactiveCanvas.style.cursor = CURSOR_TYPE.GRAB;
-  } else if (isEraserActive(appState)) {
-    setEraserCursor(interactiveCanvas, appState.theme);
-    // do nothing if image tool is selected which suggests there's
-    // a image-preview set as the cursor
-    // Ignore custom type as well and let host decide
-  } else if (appState.activeTool.type === "laser") {
-    const url =
-      appState.theme === THEME.LIGHT
-        ? laserPointerCursorDataURL_lightMode
-        : laserPointerCursorDataURL_darkMode;
-    interactiveCanvas.style.cursor = `url(${url}), auto`;
-  } else if (!["image", "custom"].includes(appState.activeTool.type)) {
-    interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  }
-};
@@ -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;
  }
@@ -193,7 +189,7 @@ const restoreElement = (
        fontSize = parseFloat(fontPx);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
-      const text = (typeof element.text === "string" && element.text) || "";
+      const text = element.text ?? "";

      // line-height might not be specified either when creating elements
      // programmatically, or when importing old diagrams.
@@ -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,
@@ -222,17 +222,9 @@ const restoreElement = (
        baseline,
      });

-      // if empty text, mark as deleted. We keep in array
-      // for data integrity purposes (collab etc.)
-      if (!text && !element.isDeleted) {
-        element = { ...element, originalText: text, isDeleted: true };
-        element = bumpVersion(element);
-      }
-
      if (refreshDimensions) {
        element = { ...element, ...refreshTextDimensions(element) };
      }
-
      return element;
    case "freedraw": {
      return restoreElementWithProperties(element, {
@@ -307,7 +299,6 @@ const restoreElement = (
    // We also don't want to throw, but instead return void so we filter
    // out these unsupported elements from the restored array.
  }
-  return null;
 };

 /**
@@ -2,8 +2,7 @@ import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import { t } from "../i18n";
 import { ExcalidrawProps } from "../types";
-import { getFontString, updateActiveTool } from "../utils";
-import { setCursorForShape } from "../cursor";
+import { getFontString, setCursorForShape, updateActiveTool } from "../utils";
 import { newTextElement } from "./newElement";
 import { getContainerElement, wrapText } from "./textElement";
 import { isEmbeddableElement } from "./typeChecks";
@@ -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,
@@ -161,8 +140,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
 *
 * NOTE: does not trigger re-render.
 */
-export const bumpVersion = <T extends Mutable<ExcalidrawElement>>(
-  element: T,
+export const bumpVersion = (
+  element: Mutable<ExcalidrawElement>,
  version?: ExcalidrawElement["version"],
 ) => {
  element.version = (version ?? element.version) + 1;
@@ -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 };
@@ -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),
@@ -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;
-};
@@ -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;
@@ -17,6 +17,7 @@ import {
 } from "./types";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
+import { resize } from "../tests/utils";
 import { getOriginalContainerHeightFromCache } from "./textWysiwyg";

 // Unmount ReactDOM from root
@@ -952,7 +953,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      // should center align horizontally and vertically by default
-      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          85,
@@ -976,7 +977,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      // should left align horizontally and bottom vertically after resize
-      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          15,
@@ -998,7 +999,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      // should right align horizontally and top vertically after resize
-      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          374.99999999999994,
@@ -1048,7 +1049,7 @@ describe("textWysiwyg", () => {
      expect(rectangle.height).toBe(75);
      expect(textElement.fontSize).toBe(20);

-      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
        shift: true,
      });
      expect(rectangle.width).toBe(200);
@@ -1188,7 +1189,7 @@ describe("textWysiwyg", () => {
      updateTextEditor(editor, "Hello");
      editor.blur();

-      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect(rectangle.height).toBeCloseTo(155, 8);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);

@@ -1512,16 +1513,28 @@ describe("textWysiwyg", () => {
    });
  });

-  it("should bump the version of a labeled arrow when the label is updated", async () => {
+  it("should bump the version of labelled arrow when label updated", async () => {
    await render(<Excalidraw handleKeyboardGlobally={true} />);
    const arrow = UI.createElement("arrow", {
      width: 300,
      height: 0,
    });
-    await UI.editText(arrow, "Hello");
+
+    mouse.select(arrow);
+    Keyboard.keyPress(KEYS.ENTER);
+    let editor = getTextEditor();
+    await new Promise((r) => setTimeout(r, 0));
+    updateTextEditor(editor, "Hello");
+    editor.blur();
+
    const { version } = arrow;

-    await UI.editText(arrow, "Hello\nworld!");
+    mouse.select(arrow);
+    Keyboard.keyPress(KEYS.ENTER);
+    editor = getTextEditor();
+    await new Promise((r) => setTimeout(r, 0));
+    updateTextEditor(editor, "Hello\nworld!");
+    editor.blur();

    expect(arrow.version).toEqual(version + 1);
  });
@@ -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();
@@ -634,7 +584,7 @@ export const textWysiwyg = ({
    window.removeEventListener("pointerdown", onPointerDown);
    window.removeEventListener("pointerup", bindBlurEvent);
    window.removeEventListener("blur", handleSubmit);
-    window.removeEventListener("beforeunload", handleSubmit);
+
    unbindUpdate();

    editable.remove();
@@ -751,7 +701,6 @@ export const textWysiwyg = ({
    passive: false,
    capture: true,
  });
-  window.addEventListener("beforeunload", handleSubmit);
  excalidrawContainer
    ?.querySelector(".excalidraw-textEditorContainer")!
    .appendChild(editable);
@@ -65,7 +65,6 @@ type _ExcalidrawElementBase = Readonly<{
  updated: number;
  link: string | null;
  locked: boolean;
-  subtype?: string;
  customData?: Record<string, any>;
 }>;

@@ -177,7 +177,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect2, frame]);
      });

-      it("should add elements", async () => {
+      it.skip("should add elements", async () => {
        h.elements = [rect2, rect3, frame];

        func(frame, rect2);
@@ -188,7 +188,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect3, rect2, frame]);
      });

-      it("should add elements when there are other other elements in between", async () => {
+      it.skip("should add elements when there are other other elements in between", async () => {
        h.elements = [rect1, rect2, rect4, rect3, frame];

        func(frame, rect2);
@@ -199,7 +199,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect4, rect3, rect2, frame]);
      });

-      it("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, rect2, rect1, frame];

        func(frame, rect2);
@@ -234,7 +234,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect2, rect3, frame, rect4]);
      });

-      it("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, frame, rect2, rect1];

        func(frame, rect2);
@@ -436,121 +436,5 @@ describe("adding elements to frames", () => {
      expect(rect2.frameId).toBe(null);
      expectEqualIds([rect2_copy, frame, rect2]);
    });
-
-    it("random order 01", () => {
-      const frame1 = API.createElement({
-        type: "frame",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-      const frame2 = API.createElement({
-        type: "frame",
-        x: 200,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-      const frame3 = API.createElement({
-        type: "frame",
-        x: 300,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        x: 25,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame1.id,
-      });
-      const rectangle2 = API.createElement({
-        type: "rectangle",
-        x: 225,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame2.id,
-      });
-      const rectangle3 = API.createElement({
-        type: "rectangle",
-        x: 325,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame3.id,
-      });
-      const rectangle4 = API.createElement({
-        type: "rectangle",
-        x: 350,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame3.id,
-      });
-
-      h.elements = [
-        frame1,
-        rectangle4,
-        rectangle1,
-        rectangle3,
-        frame3,
-        rectangle2,
-        frame2,
-      ];
-
-      API.setSelectedElements([rectangle2]);
-
-      const origSize = h.elements.length;
-
-      expect(h.elements.length).toBe(origSize);
-      dragElementIntoFrame(frame3, rectangle2);
-      expect(h.elements.length).toBe(origSize);
-    });
-
-    it("random order 02", () => {
-      const frame1 = API.createElement({
-        type: "frame",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-      const frame2 = API.createElement({
-        type: "frame",
-        x: 200,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        x: 25,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame1.id,
-      });
-      const rectangle2 = API.createElement({
-        type: "rectangle",
-        x: 225,
-        y: 25,
-        width: 50,
-        height: 50,
-        frameId: frame2.id,
-      });
-
-      h.elements = [rectangle1, rectangle2, frame1, frame2];
-
-      API.setSelectedElements([rectangle2]);
-
-      expect(h.elements.length).toBe(4);
-      dragElementIntoFrame(frame2, rectangle1);
-      expect(h.elements.length).toBe(4);
-    });
  });
 });
@@ -452,31 +452,22 @@ export const getContainingFrame = (
 };

 // --------------------------- Frame Operations -------------------------------
-
-/**
- * Retains (or repairs for target frame) the ordering invriant where children
- * elements come right before the parent frame:
- * [el, el, child, child, frame, el]
- */
 export const addElementsToFrame = (
  allElements: ExcalidrawElementsIncludingDeleted,
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameElement,
 ) => {
-  const { allElementsIndexMap, currTargetFrameChildrenMap } =
+  const currTargetFrameChildrenMap = new Map(
    allElements.reduce(
-      (acc, element, index) => {
-        acc.allElementsIndexMap.set(element.id, index);
+      (acc: [ExcalidrawElement["id"], ExcalidrawElement][], element) => {
        if (element.frameId === frame.id) {
-          acc.currTargetFrameChildrenMap.set(element.id, true);
+          acc.push([element.id, element]);
        }
        return acc;
      },
-      {
-        allElementsIndexMap: new Map<ExcalidrawElement["id"], number>(),
-        currTargetFrameChildrenMap: new Map<ExcalidrawElement["id"], true>(),
-      },
-    );
+      [],
+    ),
+  );

  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));

@@ -529,36 +520,12 @@ export const addElementsToFrame = (
      currFrameChildren.forEach((child) => {
        processedElements.add(child.id);
      });
-
-      // if not found, add all children on top by assigning the lowest index
-      const targetFrameIndex = allElementsIndexMap.get(frame.id) ?? -1;
-
-      const { newChildren_left, newChildren_right } = finalElementsToAdd.reduce(
-        (acc, element) => {
-          // if index not found, add on top of current frame children
-          const elementIndex = allElementsIndexMap.get(element.id) ?? Infinity;
-          if (elementIndex < targetFrameIndex) {
-            acc.newChildren_left.push(element);
-          } else {
-            acc.newChildren_right.push(element);
-          }
-          return acc;
-        },
-        {
-          newChildren_left: [] as ExcalidrawElement[],
-          newChildren_right: [] as ExcalidrawElement[],
-        },
-      );
-
-      nextElements.push(
-        ...newChildren_left,
-        ...currFrameChildren,
-        ...newChildren_right,
-        element,
-      );
+      // console.log(currFrameChildren, finalElementsToAdd, element);
+      nextElements.push(...currFrameChildren, ...finalElementsToAdd, element);
      continue;
    }

+    // console.log("(2)", element.frameId);
    nextElements.push(element);
  }

@@ -740,17 +707,6 @@ export const isElementInFrame = (
    : element;

  if (frame) {
-    // Perf improvement:
-    // For an element that's already in a frame, if it's not being dragged
-    // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
-    // It has to be in its containing frame.
-    if (
-      !appState.selectedElementIds[element.id] ||
-      !appState.selectedElementsAreBeingDragged
-    ) {
-      return true;
-    }
-
    if (_element.groupIds.length === 0) {
      return elementOverlapsWithFrame(_element, frame);
    }
@@ -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;

@@ -340,12 +340,12 @@ exports[`restoreElements > should restore text element correctly with unknown fo
  "groupIds": [],
  "height": 100,
  "id": "id-text01",
-  "isDeleted": true,
+  "isDeleted": false,
  "lineHeight": 1.25,
  "link": null,
  "locked": false,
  "opacity": 100,
-  "originalText": "",
+  "originalText": "test",
  "roughness": 1,
  "roundness": {
    "type": 3,
@@ -358,8 +358,8 @@ exports[`restoreElements > should restore text element correctly with unknown fo
  "textAlign": "left",
  "type": "text",
  "updated": 1,
-  "version": 2,
-  "versionNonce": Any<Number>,
+  "version": 1,
+  "versionNonce": 0,
  "verticalAlign": "top",
  "width": 100,
  "x": 0,
@@ -86,15 +86,12 @@ describe("restoreElements", () => {
    textElement.text = null;
    textElement.font = "10 unknown";

-    expect(textElement.isDeleted).toBe(false);
    const restoredText = restore.restoreElements(
      [textElement],
      null,
    )[0] as ExcalidrawTextElement;
-    expect(restoredText.isDeleted).toBe(true);
    expect(restoredText).toMatchSnapshot({
      seed: expect.any(Number),
-      versionNonce: expect.any(Number),
    });
  });

@@ -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) => {
@@ -112,7 +94,6 @@ export class API {
    angle?: number;
    id?: string;
    isDeleted?: boolean;
-    frameId?: ExcalidrawElement["id"];
    groupIds?: string[];
    // generic element props
    strokeColor?: ExcalidrawGenericElement["strokeColor"];
@@ -131,8 +112,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 +140,6 @@ export class API {

    const appState = h?.state || getDefaultAppState();

-    const custom = maybeGetSubtypeProps({
-      subtype: rest.subtype,
-      customData: rest.customData,
-    });
    const base: Omit<
      ExcalidrawGenericElement,
      | "id"
@@ -176,13 +151,12 @@ export class API {
      | "versionNonce"
      | "isDeleted"
      | "groupIds"
+      | "frameId"
      | "link"
      | "updated"
    > = {
-      ...custom,
      x,
      y,
-      frameId: rest.frameId ?? null,
      angle: rest.angle ?? 0,
      strokeColor: rest.strokeColor ?? appState.currentItemStrokeColor,
      backgroundColor:
@@ -1,37 +1,13 @@
-import type { Point } from "../../types";
-import type {
+import {
  ExcalidrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
-  ExcalidrawArrowElement,
-  ExcalidrawRectangleElement,
-  ExcalidrawEllipseElement,
-  ExcalidrawDiamondElement,
-  ExcalidrawTextContainer,
-  ExcalidrawTextElementWithContainer,
 } from "../../element/types";
-import {
-  getTransformHandles,
-  getTransformHandlesFromCoords,
-  OMIT_SIDES_FOR_FRAME,
-  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
-  TransformHandleType,
-  type TransformHandle,
-  type TransformHandleDirection,
-} from "../../element/transformHandles";
 import { KEYS } from "../../keys";
-import { type ToolName } from "../queries/toolQueries";
-import { fireEvent, GlobalTestState, screen } from "../test-utils";
+import { ToolName } from "../queries/toolQueries";
+import { fireEvent, GlobalTestState } from "../test-utils";
 import { mutateElement } from "../../element/mutateElement";
 import { API } from "./api";
-import {
-  isFrameElement,
-  isLinearElement,
-  isFreeDrawElement,
-  isTextElement,
-} from "../../element/typeChecks";
-import { getCommonBounds, getElementPointsCoords } from "../../element/bounds";
-import { rotatePoint } from "../../math";

 const { h } = window;

@@ -110,29 +86,6 @@ export class Keyboard {
  };
 }

-const getElementPointForSelection = (element: ExcalidrawElement): Point => {
-  const { x, y, width, height, angle } = element;
-  const target: Point = [
-    x +
-      (isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
-    y,
-  ];
-  let center: Point;
-
-  if (isLinearElement(element)) {
-    const bounds = getElementPointsCoords(element, element.points);
-    center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2];
-  } else {
-    center = [x + width / 2, y + height / 2];
-  }
-
-  if (isTextElement(element)) {
-    return center;
-  }
-
-  return rotatePoint(target, center, angle);
-};
-
 export class Pointer {
  public clientX = 0;
  public clientY = 0;
@@ -246,120 +199,31 @@ export class Pointer {
    elements: ExcalidrawElement | ExcalidrawElement[],
  ) {
    API.clearSelection();
-
    Keyboard.withModifierKeys({ shift: true }, () => {
      elements = Array.isArray(elements) ? elements : [elements];
      elements.forEach((element) => {
        this.reset();
-        this.click(...getElementPointForSelection(element));
+        this.click(element.x, element.y);
      });
    });
-
    this.reset();
  }

  clickOn(element: ExcalidrawElement) {
    this.reset();
-    this.click(...getElementPointForSelection(element));
+    this.click(element.x, element.y);
    this.reset();
  }

  doubleClickOn(element: ExcalidrawElement) {
    this.reset();
-    this.doubleClick(...getElementPointForSelection(element));
+    this.doubleClick(element.x, element.y);
    this.reset();
  }
 }

 const mouse = new Pointer("mouse");

-const transform = (
-  element: ExcalidrawElement | ExcalidrawElement[],
-  handle: TransformHandleType,
-  mouseMove: [deltaX: number, deltaY: number],
-  keyboardModifiers: KeyboardModifiers = {},
-) => {
-  const elements = Array.isArray(element) ? element : [element];
-  mouse.select(elements);
-  let handleCoords: TransformHandle | undefined;
-
-  if (elements.length === 1) {
-    handleCoords = getTransformHandles(elements[0], h.state.zoom, "mouse")[
-      handle
-    ];
-  } else {
-    const [x1, y1, x2, y2] = getCommonBounds(elements);
-    const isFrameSelected = elements.some(isFrameElement);
-    const transformHandles = getTransformHandlesFromCoords(
-      [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
-      0,
-      h.state.zoom,
-      "mouse",
-      isFrameSelected ? OMIT_SIDES_FOR_FRAME : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
-    );
-    handleCoords = transformHandles[handle];
-  }
-
-  if (!handleCoords) {
-    throw new Error(`There is no "${handle}" handle for this selection`);
-  }
-
-  const clientX = handleCoords[0] + handleCoords[2] / 2;
-  const clientY = handleCoords[1] + handleCoords[3] / 2;
-
-  Keyboard.withModifierKeys(keyboardModifiers, () => {
-    mouse.reset();
-    mouse.down(clientX, clientY);
-    mouse.move(mouseMove[0], mouseMove[1]);
-    mouse.up();
-  });
-};
-
-const proxy = <T extends ExcalidrawElement>(
-  element: T,
-): typeof element & {
-  /** Returns the actual, current element from the elements array, instead of
-      the proxy */
-  get(): typeof element;
-} => {
-  return new Proxy(
-    {},
-    {
-      get(target, prop) {
-        const currentElement = h.elements.find(
-          ({ id }) => id === element.id,
-        ) as any;
-        if (prop === "get") {
-          if (currentElement.hasOwnProperty("get")) {
-            throw new Error(
-              "trying to get `get` test property, but ExcalidrawElement seems to define its own",
-            );
-          }
-          return () => currentElement;
-        }
-        return currentElement[prop];
-      },
-    },
-  ) as any;
-};
-
-/** Tools that can be used to draw shapes */
-type DrawingToolName = Exclude<ToolName, "lock" | "selection" | "eraser">;
-
-type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
-  ? ExcalidrawLinearElement
-  : T extends "arrow"
-  ? ExcalidrawArrowElement
-  : T extends "text"
-  ? ExcalidrawTextElement
-  : T extends "rectangle"
-  ? ExcalidrawRectangleElement
-  : T extends "ellipse"
-  ? ExcalidrawEllipseElement
-  : T extends "diamond"
-  ? ExcalidrawDiamondElement
-  : ExcalidrawElement;
-
 export class UI {
  static clickTool = (toolName: ToolName) => {
    fireEvent.click(GlobalTestState.renderResult.getByToolName(toolName));
@@ -382,10 +246,6 @@ export class UI {
    fireEvent.click(element);
  };

-  static clickByTitle = (title: string) => {
-    fireEvent.click(screen.getByTitle(title));
-  };
-
  /**
   * Creates an Excalidraw element, and returns a proxy that wraps it so that
   * accessing props will return the latest ones from the object existing in
@@ -395,17 +255,16 @@ export class UI {
   * If you need to get the actual element, not the proxy, call `get()` method
   * on the proxy object.
   */
-  static createElement<T extends DrawingToolName>(
+  static createElement<T extends ToolName>(
    type: T,
    {
      position = 0,
      x = position,
      y = position,
      size = 10,
-      width: initialWidth = size,
-      height: initialHeight = initialWidth,
+      width = size,
+      height = width,
      angle = 0,
-      points: initialPoints,
    }: {
      position?: number;
      x?: number;
@@ -414,46 +273,25 @@ export class UI {
      width?: number;
      height?: number;
      angle?: number;
-      points?: T extends "line" | "arrow" | "freedraw" ? Point[] : never;
    } = {},
-  ): Element<T> & {
+  ): (T extends "arrow" | "line" | "freedraw"
+    ? ExcalidrawLinearElement
+    : T extends "text"
+    ? ExcalidrawTextElement
+    : ExcalidrawElement) & {
    /** Returns the actual, current element from the elements array, instead
        of the proxy */
-    get(): Element<T>;
+    get(): T extends "arrow" | "line" | "freedraw"
+      ? ExcalidrawLinearElement
+      : T extends "text"
+      ? ExcalidrawTextElement
+      : ExcalidrawElement;
  } {
-    const width = initialWidth ?? initialHeight ?? size;
-    const height = initialHeight ?? size;
-    const points: Point[] = initialPoints ?? [
-      [0, 0],
-      [width, height],
-    ];
-
    UI.clickTool(type);
-
-    if (type === "text") {
-      mouse.reset();
-      mouse.click(x, y);
-    } else if ((type === "line" || type === "arrow") && points.length > 2) {
-      points.forEach((point) => {
-        mouse.reset();
-        mouse.click(x + point[0], y + point[1]);
-      });
-      Keyboard.keyPress(KEYS.ESCAPE);
-    } else if (type === "freedraw" && points.length > 2) {
-      const firstPoint = points[0];
-      mouse.reset();
-      mouse.down(x + firstPoint[0], y + firstPoint[1]);
-      points
-        .slice(1)
-        .forEach((point) => mouse.moveTo(x + point[0], y + point[1]));
-      mouse.upAt();
-      Keyboard.keyPress(KEYS.ESCAPE);
-    } else {
-      mouse.reset();
-      mouse.down(x, y);
-      mouse.reset();
-      mouse.up(x + width, y + height);
-    }
+    mouse.reset();
+    mouse.down(x, y);
+    mouse.reset();
+    mouse.up(x + (width ?? height ?? size), y + (height ?? size));

    const origElement = h.elements[h.elements.length - 1] as any;

@@ -461,58 +299,25 @@ export class UI {
      mutateElement(origElement, { angle });
    }

-    return proxy(origElement);
-  }
-
-  static async editText<
-    T extends ExcalidrawTextElement | ExcalidrawTextContainer,
-  >(element: T, text: string) {
-    const openedEditor = document.querySelector<HTMLTextAreaElement>(
-      ".excalidraw-textEditorContainer > textarea",
-    );
-
-    if (!openedEditor) {
-      mouse.select(element);
-      Keyboard.keyPress(KEYS.ENTER);
-    }
-
-    const editor =
-      openedEditor ??
-      document.querySelector<HTMLTextAreaElement>(
-        ".excalidraw-textEditorContainer > textarea",
-      );
-    if (!editor) {
-      throw new Error("Can't find wysiwyg text editor in the dom");
-    }
-
-    fireEvent.input(editor, { target: { value: text } });
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    editor.blur();
-
-    return isTextElement(element)
-      ? element
-      : proxy(
-          h.elements[
-            h.elements.length - 1
-          ] as ExcalidrawTextElementWithContainer,
-        );
-  }
-
-  static resize(
-    element: ExcalidrawElement | ExcalidrawElement[],
-    handle: TransformHandleDirection,
-    mouseMove: [deltaX: number, deltaY: number],
-    keyboardModifiers: KeyboardModifiers = {},
-  ) {
-    return transform(element, handle, mouseMove, keyboardModifiers);
-  }
-
-  static rotate(
-    element: ExcalidrawElement | ExcalidrawElement[],
-    mouseMove: [deltaX: number, deltaY: number],
-    keyboardModifiers: KeyboardModifiers = {},
-  ) {
-    return transform(element, "rotation", mouseMove, keyboardModifiers);
+    return new Proxy(
+      {},
+      {
+        get(target, prop) {
+          const currentElement = h.elements.find(
+            (element) => element.id === origElement.id,
+          ) as any;
+          if (prop === "get") {
+            if (currentElement.hasOwnProperty("get")) {
+              throw new Error(
+                "trying to get `get` test property, but ExcalidrawElement seems to define its own",
+              );
+            }
+            return () => currentElement;
+          }
+          return currentElement[prop];
+        },
+      },
+    ) as any;
  }

  static group(elements: ExcalidrawElement[]) {
@@ -16,6 +16,7 @@ import { Point } from "../types";
 import { KEYS } from "../keys";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { queryByTestId, queryByText } from "@testing-library/react";
+import { resize, rotate } from "./utils";
 import {
  getBoundTextElementPosition,
  wrapText,
@@ -938,10 +939,71 @@ describe("Test Linear Elements", () => {
      expect(line.boundElements).toBeNull();
    });

-    // TODO fix #7029 and rewrite this test
-    it.todo(
-      "should not rotate the bound text and update position of bound text and bounding box correctly when arrow rotated",
-    );
+    it("should not rotate the bound text and update position of bound text and bounding box correctly when arrow rotated", () => {
+      createThreePointerLinearElement("arrow", {
+        type: ROUNDNESS.PROPORTIONAL_RADIUS,
+      });
+
+      const arrow = h.elements[0] as ExcalidrawLinearElement;
+
+      const { textElement, container } = createBoundTextElement(
+        DEFAULT_TEXT,
+        arrow,
+      );
+
+      expect(container.angle).toBe(0);
+      expect(textElement.angle).toBe(0);
+      expect(getBoundTextElementPosition(arrow, textElement))
+        .toMatchInlineSnapshot(`
+          {
+            "x": 75,
+            "y": 60,
+          }
+        `);
+      expect(textElement.text).toMatchInlineSnapshot(`
+        "Online whiteboard 
+        collaboration made 
+        easy"
+      `);
+      expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
+        .toMatchInlineSnapshot(`
+          [
+            20,
+            20,
+            105,
+            80,
+            55.45893770831013,
+            45,
+          ]
+        `);
+
+      rotate(container, -35, 55);
+      expect(container.angle).toMatchInlineSnapshot(`1.3988061968364685`);
+      expect(textElement.angle).toBe(0);
+      expect(getBoundTextElementPosition(container, textElement))
+        .toMatchInlineSnapshot(`
+          {
+            "x": 21.73926141863671,
+            "y": 73.31003398390868,
+          }
+        `);
+      expect(textElement.text).toMatchInlineSnapshot(`
+        "Online whiteboard 
+        collaboration made 
+        easy"
+      `);
+      expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
+        .toMatchInlineSnapshot(`
+          [
+            20,
+            20,
+            102.41961302274555,
+            86.49012635273976,
+            55.45893770831013,
+            45,
+          ]
+        `);
+    });

    it("should resize and position the bound text and bounding box correctly when 3 pointer arrow element resized", () => {
      createThreePointerLinearElement("arrow", {
@@ -980,7 +1042,7 @@ describe("Test Linear Elements", () => {
          ]
        `);

-      UI.resize(container, "ne", [300, 200]);
+      resize(container, "ne", [300, 200]);

      expect({ width: container.width, height: container.height })
        .toMatchInlineSnapshot(`
@@ -1,81 +0,0 @@
-import ReactDOM from "react-dom";
-import { render } from "./test-utils";
-import { reseed } from "../random";
-import { UI } from "./helpers/ui";
-import { Excalidraw } from "../packages/excalidraw/index";
-import { expect } from "vitest";
-
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
-
-beforeEach(() => {
-  localStorage.clear();
-  reseed(7);
-});
-
-test("unselected bound arrow updates when rotating its target element", async () => {
-  await render(<Excalidraw />);
-  const rectangle = UI.createElement("rectangle", {
-    width: 200,
-    height: 100,
-  });
-  const arrow = UI.createElement("arrow", {
-    x: -80,
-    y: 50,
-    width: 70,
-    height: 0,
-  });
-
-  expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
-
-  UI.rotate(rectangle, [60, 36], { shift: true });
-
-  expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
-  expect(arrow.x).toBeCloseTo(-80);
-  expect(arrow.y).toBeCloseTo(50);
-  expect(arrow.width).toBeCloseTo(110.7, 1);
-  expect(arrow.height).toBeCloseTo(0);
-});
-
-test("unselected bound arrows update when rotating their target elements", async () => {
-  await render(<Excalidraw />);
-  const ellipse = UI.createElement("ellipse", {
-    x: 0,
-    y: 80,
-    width: 300,
-    height: 120,
-  });
-  const ellipseArrow = UI.createElement("arrow", {
-    position: 0,
-    width: 40,
-    height: 80,
-  });
-  const text = UI.createElement("text", {
-    position: 220,
-  });
-  await UI.editText(text, "test");
-  const textArrow = UI.createElement("arrow", {
-    x: 360,
-    y: 300,
-    width: -100,
-    height: -40,
-  });
-
-  expect(ellipseArrow.endBinding?.elementId).toEqual(ellipse.id);
-  expect(textArrow.endBinding?.elementId).toEqual(text.id);
-
-  UI.rotate([ellipse, text], [-82, 23], { shift: true });
-
-  expect(ellipseArrow.endBinding?.elementId).toEqual(ellipse.id);
-  expect(ellipseArrow.x).toEqual(0);
-  expect(ellipseArrow.y).toEqual(0);
-  expect(ellipseArrow.points[0]).toEqual([0, 0]);
-  expect(ellipseArrow.points[1][0]).toBeCloseTo(48.5, 1);
-  expect(ellipseArrow.points[1][1]).toBeCloseTo(126.5, 1);
-
-  expect(textArrow.endBinding?.elementId).toEqual(text.id);
-  expect(textArrow.x).toEqual(360);
-  expect(textArrow.y).toEqual(300);
-  expect(textArrow.points[0]).toEqual([0, 0]);
-  expect(textArrow.points[1][0]).toBeCloseTo(-94, 1);
-  expect(textArrow.points[1][1]).toBeCloseTo(-116.1, 1);
-});
@@ -480,7 +480,7 @@ describe("tool locking & selection", () => {
    expect(h.state.activeTool.locked).toBe(true);

    for (const { value } of Object.values(SHAPES)) {
-      if (value !== "image" && value !== "selection" && value !== "eraser") {
+      if (value !== "image" && value !== "selection") {
        const element = UI.createElement(value);
        expect(h.state.selectedElementIds[element.id]).not.toBe(true);
      }
@@ -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);
-  });
-});
@@ -0,0 +1,48 @@
+import {
+  getTransformHandles,
+  TransformHandleDirection,
+} from "../element/transformHandles";
+import { ExcalidrawElement } from "../element/types";
+import { Keyboard, KeyboardModifiers, Pointer } from "./helpers/ui";
+
+const mouse = new Pointer("mouse");
+const { h } = window;
+
+export const resize = (
+  element: ExcalidrawElement,
+  handleDir: TransformHandleDirection,
+  mouseMove: [number, number],
+  keyboardModifiers: KeyboardModifiers = {},
+) => {
+  mouse.select(element);
+  const handle = getTransformHandles(element, h.state.zoom, "mouse")[
+    handleDir
+  ]!;
+  const clientX = handle[0] + handle[2] / 2;
+  const clientY = handle[1] + handle[3] / 2;
+  Keyboard.withModifierKeys(keyboardModifiers, () => {
+    mouse.reset();
+    mouse.down(clientX, clientY);
+    mouse.move(mouseMove[0], mouseMove[1]);
+    mouse.up();
+  });
+};
+
+export const rotate = (
+  element: ExcalidrawElement,
+  deltaX: number,
+  deltaY: number,
+  keyboardModifiers: KeyboardModifiers = {},
+) => {
+  mouse.select(element);
+  const handle = getTransformHandles(element, h.state.zoom, "mouse").rotation!;
+  const clientX = handle[0] + handle[2] / 2;
+  const clientY = handle[1] + handle[3] / 2;
+
+  Keyboard.withModifierKeys(keyboardModifiers, () => {
+    mouse.reset();
+    mouse.down(clientX, clientY);
+    mouse.move(clientX + deltaX, clientY + deltaY);
+    mouse.up();
+  });
+};
@@ -1,9 +1,13 @@
+import oc from "open-color";
 import { COLOR_PALETTE } from "./colors";
 import {
+  CURSOR_TYPE,
  DEFAULT_VERSION,
  EVENT,
  FONT_FAMILY,
  isDarwin,
+  MIME_TYPES,
+  THEME,
  WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
 import {
@@ -11,8 +15,9 @@ import {
  FontString,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { ActiveTool, AppState, ToolType, Zoom } from "./types";
+import { ActiveTool, AppState, DataURL, ToolType, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
+import { isEraserActive, isHandToolActive } from "./appState";
 import { ResolutionType } from "./utility-types";
 import React from "react";

@@ -389,6 +394,84 @@ export const updateActiveTool = (
  };
 };

+export const resetCursor = (interactiveCanvas: HTMLCanvasElement | null) => {
+  if (interactiveCanvas) {
+    interactiveCanvas.style.cursor = "";
+  }
+};
+
+export const setCursor = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  cursor: string,
+) => {
+  if (interactiveCanvas) {
+    interactiveCanvas.style.cursor = cursor;
+  }
+};
+
+let eraserCanvasCache: any;
+let previewDataURL: string;
+export const setEraserCursor = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  theme: AppState["theme"],
+) => {
+  const cursorImageSizePx = 20;
+
+  const drawCanvas = () => {
+    const isDarkTheme = theme === THEME.DARK;
+    eraserCanvasCache = document.createElement("canvas");
+    eraserCanvasCache.theme = theme;
+    eraserCanvasCache.height = cursorImageSizePx;
+    eraserCanvasCache.width = cursorImageSizePx;
+    const context = eraserCanvasCache.getContext("2d")!;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.arc(
+      eraserCanvasCache.width / 2,
+      eraserCanvasCache.height / 2,
+      5,
+      0,
+      2 * Math.PI,
+    );
+    context.fillStyle = isDarkTheme ? oc.black : oc.white;
+    context.fill();
+    context.strokeStyle = isDarkTheme ? oc.white : oc.black;
+    context.stroke();
+    previewDataURL = eraserCanvasCache.toDataURL(MIME_TYPES.svg) as DataURL;
+  };
+  if (!eraserCanvasCache || eraserCanvasCache.theme !== theme) {
+    drawCanvas();
+  }
+
+  setCursor(
+    interactiveCanvas,
+    `url(${previewDataURL}) ${cursorImageSizePx / 2} ${
+      cursorImageSizePx / 2
+    }, auto`,
+  );
+};
+
+export const setCursorForShape = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  appState: Pick<AppState, "activeTool" | "theme">,
+) => {
+  if (!interactiveCanvas) {
+    return;
+  }
+  if (appState.activeTool.type === "selection") {
+    resetCursor(interactiveCanvas);
+  } else if (isHandToolActive(appState)) {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.GRAB;
+  } else if (isEraserActive(appState)) {
+    setEraserCursor(interactiveCanvas, appState.theme);
+    // do nothing if image tool is selected which suggests there's
+    // a image-preview set as the cursor
+    // Ignore custom type as well and let host decide
+  } else if (!["image", "custom"].includes(appState.activeTool.type)) {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
+  }
+};
+
 export const isFullScreen = () =>
  document.fullscreenElement?.nodeName === "HTML";
Author	SHA1	Message	Date
zsviczian	60a3584e86	change css back to original	2023-10-07 10:38:46 +02:00
zsviczian	fa0e653236	lint	2023-10-07 10:37:37 +02:00
zsviczian	16de3d9243	add svgContainer offset	2023-10-07 10:35:06 +02:00
zsviczian	c65d6506f7	fix lasertool offset	2023-10-07 08:49:32 +02:00