Normalize indices on init

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

dev-docs/yarn.lock

@@ -1547,7 +1547,7 @@
     "@docusaurus/theme-search-algolia" "2.2.0"
     "@docusaurus/types" "2.2.0"
 
-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -2790,11 +2790,11 @@ brace-expansion@^1.1.7:
     concat-map "0.0.1"
 
 braces@^3.0.2, braces@~3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
-  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
-    fill-range "^7.1.1"
+    fill-range "^7.0.1"
 
 browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.18.1, browserslist@^4.20.2, browserslist@^4.20.3, browserslist@^4.21.2:
   version "4.21.2"
@@ -4004,10 +4004,10 @@ filesize@^8.0.6:
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
   integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
 
-fill-range@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
-  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -6260,14 +6260,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"

excalidraw-app/App.tsx

@@ -26,6 +26,7 @@ import {
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
+  normalizeIndices,
 } from "../packages/excalidraw";
 import type {
   AppState,
@@ -305,14 +306,21 @@ const initializeScene = async (opts: {
       key: roomLinkData.roomKey,
     };
   } else if (scene) {
+    const normalizedScene = {
+      ...scene,
+      // non-collab scenes are always always normalized on init
+      // collab scenes are normalized only on "first-in-room" as part of collabAPI
+      elements: normalizeIndices(scene.elements),
+    };
+
     return isExternalScene && jsonBackendMatch
       ? {
-          scene,
+          scene: normalizedScene,
           isExternalScene,
           id: jsonBackendMatch[1],
           key: jsonBackendMatch[2],
         }
-      : { scene, isExternalScene: false };
+      : { scene: normalizedScene, isExternalScene: false };
   }
   return { scene: null, isExternalScene: false };
 };

excalidraw-app/collab/Collab.tsx

@@ -18,6 +18,7 @@ import {
   restoreElements,
   zoomToFitBounds,
   reconcileElements,
+  normalizeIndices,
 } from "../../packages/excalidraw";
 import type { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
@@ -637,7 +638,16 @@ class Collab extends PureComponent<CollabProps, CollabState> {
         fetchScene: true,
         roomLinkData: existingRoomLinkData,
       });
-      scenePromise.resolve(sceneData);
+
+      if (sceneData) {
+        scenePromise.resolve({
+          ...sceneData,
+          // normalize fractional indices on init for shared scenes, while making sure there are no other collaborators
+          elements: normalizeIndices([...sceneData.elements]),
+        });
+      } else {
+        scenePromise.resolve(null);
+      }
     });
 
     this.portal.socket.on(

excalidraw-app/data/index.ts

@@ -254,7 +254,7 @@ export const loadScene = async (
       await importFromBackend(id, privateKey),
       localDataState?.appState,
       localDataState?.elements,
-      { repairBindings: true, refreshDimensions: false },
+      { repairBindings: true },
     );
   } else {
     data = restore(localDataState || null, null, null, {

packages/excalidraw/components/App.tsx

@@ -224,8 +224,7 @@ import type {
   ScrollBars,
 } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, getElementShape } from "../shapes";
-import type { GeometricShape } from "../../utils/geometry/shape";
+import { findShapeByKey, getBoundTextShape, getElementShape } from "../shapes";
 import { getSelectionBoxShape } from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import type {
@@ -4515,37 +4514,6 @@ class App extends React.Component<AppProps, AppState> {
     return null;
   }
 
-  private getBoundTextShape(element: ExcalidrawElement): GeometricShape | null {
-    const boundTextElement = getBoundTextElement(
-      element,
-      this.scene.getNonDeletedElementsMap(),
-    );
-
-    if (boundTextElement) {
-      if (element.type === "arrow") {
-        return getElementShape(
-          {
-            ...boundTextElement,
-            // arrow's bound text accurate position is not stored in the element's property
-            // but rather calculated and returned from the following static method
-            ...LinearElementEditor.getBoundTextElementPosition(
-              element,
-              boundTextElement,
-              this.scene.getNonDeletedElementsMap(),
-            ),
-          },
-          this.scene.getNonDeletedElementsMap(),
-        );
-      }
-      return getElementShape(
-        boundTextElement,
-        this.scene.getNonDeletedElementsMap(),
-      );
-    }
-
-    return null;
-  }
-
   private getElementAtPosition(
     x: number,
     y: number,
@@ -4677,7 +4645,7 @@ class App extends React.Component<AppProps, AppState> {
     const hitBoundTextOfElement = hitElementBoundText(
       x,
       y,
-      this.getBoundTextShape(element),
+      getBoundTextShape(element, this.scene.getNonDeletedElementsMap()),
     );
     if (hitBoundTextOfElement) {
       return true;

packages/excalidraw/data/blob.ts

@@ -154,7 +154,11 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          { repairBindings: true, refreshDimensions: false },
+          {
+            repairBindings: true,
+            normalizeIndices: true,
+            refreshDimensions: false,
+          },
         ),
       };
     } else if (isValidLibrary(data)) {

packages/excalidraw/data/restore.ts

@@ -46,9 +46,9 @@ import { arrayToMap } from "../utils";
 import type { MarkOptional, Mutable } from "../utility-types";
 import { detectLineHeight, getContainerElement } from "../element/textElement";
 import { normalizeLink } from "./url";
-import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
 import { getLineHeight } from "../fonts";
+import { normalizeIndices, syncInvalidIndices } from "../fractionalIndex";
 
 type RestoredAppState = Omit<
   AppState,
@@ -405,36 +405,41 @@ export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  opts?: { refreshDimensions?: boolean; repairBindings?: boolean } | undefined,
+  opts?:
+    | {
+        refreshDimensions?: boolean;
+        repairBindings?: boolean;
+        normalizeIndices?: boolean;
+      }
+    | undefined,
 ): OrderedExcalidrawElement[] => {
   // used to detect duplicate top-level element ids
   const existingIds = new Set<string>();
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  const restoredElements = syncInvalidIndices(
-    (elements || []).reduce((elements, element) => {
-      // filtering out selection, which is legacy, no longer kept in elements,
-      // and causing issues if retained
-      if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-        let migratedElement: ExcalidrawElement | null = restoreElement(element);
-        if (migratedElement) {
-          const localElement = localElementsMap?.get(element.id);
-          if (localElement && localElement.version > migratedElement.version) {
-            migratedElement = bumpVersion(
-              migratedElement,
-              localElement.version,
-            );
-          }
-          if (existingIds.has(migratedElement.id)) {
-            migratedElement = { ...migratedElement, id: randomId() };
-          }
-          existingIds.add(migratedElement.id);
-
-          elements.push(migratedElement);
+  const restoredElementsTemp = (elements || []).reduce((elements, element) => {
+    // filtering out selection, which is legacy, no longer kept in elements,
+    // and causing issues if retained
+    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
+      let migratedElement: ExcalidrawElement | null = restoreElement(element);
+      if (migratedElement) {
+        const localElement = localElementsMap?.get(element.id);
+        if (localElement && localElement.version > migratedElement.version) {
+          migratedElement = bumpVersion(migratedElement, localElement.version);
         }
+        if (existingIds.has(migratedElement.id)) {
+          migratedElement = { ...migratedElement, id: randomId() };
+        }
+        existingIds.add(migratedElement.id);
+
+        elements.push(migratedElement);
       }
-      return elements;
-    }, [] as ExcalidrawElement[]),
-  );
+    }
+    return elements;
+  }, [] as ExcalidrawElement[]);
+
+  const restoredElements = opts?.normalizeIndices
+    ? normalizeIndices(restoredElementsTemp)
+    : syncInvalidIndices(restoredElementsTemp);
 
   if (!opts?.repairBindings) {
     return restoredElements;
@@ -601,7 +606,11 @@ export const restore = (
    */
   localAppState: Partial<AppState> | null | undefined,
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  elementsConfig?: { refreshDimensions?: boolean; repairBindings?: boolean },
+  elementsConfig?: {
+    refreshDimensions?: boolean;
+    repairBindings?: boolean;
+    normalizeIndices?: boolean;
+  },
 ): RestoredDataState => {
   return {
     elements: restoreElements(data?.elements, localElements, elementsConfig),

packages/excalidraw/element/collision.ts

@@ -18,6 +18,7 @@ import {
   isImageElement,
   isTextElement,
 } from "./typeChecks";
+import { getBoundTextShape } from "../shapes";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
   if (element.type === "arrow") {
@@ -97,6 +98,12 @@ export const hitElementBoundingBoxOnly = (
 ) => {
   return (
     !hitElementItself(hitArgs) &&
+    // bound text is considered part of the element (even if it's outside the bounding box)
+    !hitElementBoundText(
+      hitArgs.x,
+      hitArgs.y,
+      getBoundTextShape(hitArgs.element, elementsMap),
+    ) &&
     hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap)
   );
 };
@@ -105,6 +112,6 @@ export const hitElementBoundText = (
   x: number,
   y: number,
   textShape: GeometricShape | null,
-) => {
-  return textShape && isPointInShape([x, y], textShape);
+): boolean => {
+  return !!textShape && isPointInShape([x, y], textShape);
 };

packages/excalidraw/element/textElement.ts

@@ -635,8 +635,7 @@ export const getMaxCharWidth = (font: FontString) => {
 
 export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
   return container?.boundElements?.length
-    ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
-        null
+    ? container?.boundElements?.find((ele) => ele.type === "text")?.id || null
     : null;
 };
 

packages/excalidraw/fractionalIndex.ts

@@ -6,6 +6,14 @@ import type {
   OrderedExcalidrawElement,
 } from "./element/types";
 import { InvalidFractionalIndexError } from "./errors";
+import { arrayToMap } from "./utils";
+
+/**
+ * Normalizes indices for all elements, to prevent possible issues caused by using stale (too old, too long) indices.
+ */
+export const normalizeIndices = (elements: ExcalidrawElement[]) => {
+  return syncMovedIndices(elements, arrayToMap(elements));
+};
 
 /**
  * Envisioned relation between array order and fractional indices:

packages/excalidraw/index.tsx

@@ -222,6 +222,8 @@ export {
   restoreLibraryItems,
 } from "./data/restore";
 
+export { normalizeIndices } from "./fractionalIndex";
+
 export { reconcileElements } from "./data/reconcile";
 
 export {

packages/excalidraw/mermaid.test.ts

@@ -0,0 +1,15 @@
+import { isMaybeMermaidDefinition } from "./mermaid";
+
+describe("isMaybeMermaidDefinition", () => {
+  it("should return true for a valid mermaid definition", () => {
+    expect(isMaybeMermaidDefinition("flowchart")).toBe(true);
+    expect(isMaybeMermaidDefinition("flowchart LR")).toBe(true);
+    expect(isMaybeMermaidDefinition("flowchart LR\nola")).toBe(true);
+    expect(isMaybeMermaidDefinition("%%{}%%flowchart")).toBe(true);
+    expect(isMaybeMermaidDefinition("%%{}%% flowchart")).toBe(true);
+
+    expect(isMaybeMermaidDefinition("graphs")).toBe(false);
+    expect(isMaybeMermaidDefinition("this flowchart")).toBe(false);
+    expect(isMaybeMermaidDefinition("this\nflowchart")).toBe(false);
+  });
+});

packages/excalidraw/mermaid.ts

@@ -2,6 +2,7 @@
 export const isMaybeMermaidDefinition = (text: string) => {
   const chartTypes = [
     "flowchart",
+    "graph",
     "sequenceDiagram",
     "classDiagram",
     "stateDiagram",
@@ -23,9 +24,9 @@ export const isMaybeMermaidDefinition = (text: string) => {
   ];
 
   const re = new RegExp(
-    `^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
-      .map((x) => `${x}(-beta)?`)
-      .join("|")}\\b`,
+    `^(?:%%{.*?}%%[\\s\\n]*)?\\b(?:${chartTypes
+      .map((x) => `\\s*${x}(-beta)?`)
+      .join("|")})\\b`,
   );
 
   return re.test(text.trim());

packages/excalidraw/shapes.tsx

@@ -20,6 +20,8 @@ import {
 } from "./components/icons";
 import { getElementAbsoluteCoords } from "./element";
 import { shouldTestInside } from "./element/collision";
+import { LinearElementEditor } from "./element/linearElementEditor";
+import { getBoundTextElement } from "./element/textElement";
 import type { ElementsMap, ExcalidrawElement } from "./element/types";
 import { KEYS } from "./keys";
 import { ShapeCache } from "./scene/ShapeCache";
@@ -159,3 +161,31 @@ export const getElementShape = (
     }
   }
 };
+
+export const getBoundTextShape = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+): GeometricShape | null => {
+  const boundTextElement = getBoundTextElement(element, elementsMap);
+
+  if (boundTextElement) {
+    if (element.type === "arrow") {
+      return getElementShape(
+        {
+          ...boundTextElement,
+          // arrow's bound text accurate position is not stored in the element's property
+          // but rather calculated and returned from the following static method
+          ...LinearElementEditor.getBoundTextElementPosition(
+            element,
+            boundTextElement,
+            elementsMap,
+          ),
+        },
+        elementsMap,
+      );
+    }
+    return getElementShape(boundTextElement, elementsMap);
+  }
+
+  return null;
+};

packages/excalidraw/tests/data/restore.test.ts

@@ -4,6 +4,7 @@ import type {
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
+  FractionalIndex,
 } from "../../element/types";
 import * as sizeHelpers from "../../element/sizeHelpers";
 import { API } from "../helpers/api";
@@ -579,6 +580,45 @@ describe("restore", () => {
   });
 });
 
+describe("normalize indices", () => {
+  it("shoudl normalize indices of all elements when normalize is true", () => {
+    const ellipse = API.createElement({
+      type: "ellipse",
+      index: "Zz" as FractionalIndex,
+    });
+    const container = API.createElement({
+      type: "rectangle",
+      index: undefined,
+    });
+    const boundElement = API.createElement({
+      type: "text",
+      containerId: container.id,
+      index: "a0000000000000000000000" as FractionalIndex,
+    });
+
+    const restoredElements = restore.restoreElements(
+      [ellipse, container, boundElement],
+      null,
+      { normalizeIndices: true },
+    );
+
+    expect(restoredElements).toEqual([
+      expect.objectContaining({
+        id: ellipse.id,
+        index: "a0",
+      }),
+      expect.objectContaining({
+        id: container.id,
+        index: "a1",
+      }),
+      expect.objectContaining({
+        id: boundElement.id,
+        index: "a2",
+      }),
+    ]);
+  });
+});
+
 describe("repairing bindings", () => {
   it("should repair container boundElements when repair is true", () => {
     const container = API.createElement({