Merge master

Author: Brikaa

.env.development

@@ -1,3 +1,5 @@
+MODE="development"
+
 VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
 VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 

.env.production

@@ -1,3 +1,5 @@
+MODE="production"
+
 VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
 VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 

packages/element/src/delta.ts

@@ -187,10 +187,12 @@ export class Delta<T> {
       return;
     }
 
-    if (
-      typeof deleted[property] === "object" ||
-      typeof inserted[property] === "object"
-    ) {
+    const isDeletedObject =
+      deleted[property] !== null && typeof deleted[property] === "object";
+    const isInsertedObject =
+      inserted[property] !== null && typeof inserted[property] === "object";
+
+    if (isDeletedObject || isInsertedObject) {
       type RecordLike = Record<string, V | undefined>;
 
       const deletedObject: RecordLike = deleted[property] ?? {};
@@ -222,6 +224,9 @@ export class Delta<T> {
         Reflect.deleteProperty(deleted, property);
         Reflect.deleteProperty(inserted, property);
       }
+    } else if (deleted[property] === inserted[property]) {
+      Reflect.deleteProperty(deleted, property);
+      Reflect.deleteProperty(inserted, property);
     }
   }
 
@@ -658,6 +663,24 @@ export class AppStateDelta implements DeltaContainer<AppState> {
             }
 
             break;
+          case "lockedMultiSelections": {
+            const prevLockedUnits = prevAppState[key] || {};
+            const nextLockedUnits = nextAppState[key] || {};
+
+            if (!isShallowEqual(prevLockedUnits, nextLockedUnits)) {
+              visibleDifferenceFlag.value = true;
+            }
+            break;
+          }
+          case "activeLockedId": {
+            const prevHitLockedId = prevAppState[key] || null;
+            const nextHitLockedId = nextAppState[key] || null;
+
+            if (prevHitLockedId !== nextHitLockedId) {
+              visibleDifferenceFlag.value = true;
+            }
+            break;
+          }
           default: {
             assertNever(
               key,
@@ -753,6 +776,8 @@ export class AppStateDelta implements DeltaContainer<AppState> {
       editingLinearElementId,
       selectedLinearElementId,
       croppingElementId,
+      lockedMultiSelections,
+      activeLockedId,
       ...standaloneProps
     } = delta as ObservedAppState;
 
@@ -797,6 +822,18 @@ export class AppStateDelta implements DeltaContainer<AppState> {
         "selectedGroupIds",
         (prevValue) => (prevValue ?? false) as ValueOf<T["selectedGroupIds"]>,
       );
+      Delta.diffObjects(
+        deleted,
+        inserted,
+        "lockedMultiSelections",
+        (prevValue) => (prevValue ?? {}) as ValueOf<T["lockedMultiSelections"]>,
+      );
+      Delta.diffObjects(
+        deleted,
+        inserted,
+        "activeLockedId",
+        (prevValue) => (prevValue ?? null) as ValueOf<T["activeLockedId"]>,
+      );
     } catch (e) {
       // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it
       console.error(`Couldn't postprocess appstate change deltas.`);

packages/element/src/elbowArrow.ts

@@ -974,6 +974,25 @@ export const updateElbowArrowPoints = (
         ),
       "Elbow arrow segments must be either horizontal or vertical",
     );
+
+    invariant(
+      updates.fixedSegments?.find(
+        (segment) =>
+          segment.index === 1 &&
+          pointsEqual(segment.start, (updates.points ?? arrow.points)[0]),
+      ) == null &&
+        updates.fixedSegments?.find(
+          (segment) =>
+            segment.index === (updates.points ?? arrow.points).length - 1 &&
+            pointsEqual(
+              segment.end,
+              (updates.points ?? arrow.points)[
+                (updates.points ?? arrow.points).length - 1
+              ],
+            ),
+        ) == null,
+      "The first and last segments cannot be fixed",
+    );
   }
 
   const fixedSegments = updates.fixedSegments ?? arrow.fixedSegments ?? [];

packages/element/src/linearElementEditor.ts

@@ -85,11 +85,6 @@ import type {
   PointsPositionUpdates,
 } from "./types";
 
-const editorMidPointsCache: {
-  version: number | null;
-  points: (GlobalPoint | null)[];
-  zoom: number | null;
-} = { version: null, points: [], zoom: null };
 export class LinearElementEditor {
   public readonly elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
@@ -536,7 +531,7 @@ export class LinearElementEditor {
     element: NonDeleted<ExcalidrawLinearElement>,
     elementsMap: ElementsMap,
     appState: InteractiveCanvasAppState,
-  ): typeof editorMidPointsCache["points"] => {
+  ): (GlobalPoint | null)[] => {
     const boundText = getBoundTextElement(element, elementsMap);
 
     // Since its not needed outside editor unless 2 pointer lines or bound text
@@ -548,25 +543,7 @@ export class LinearElementEditor {
     ) {
       return [];
     }
-    if (
-      editorMidPointsCache.version === element.version &&
-      editorMidPointsCache.zoom === appState.zoom.value
-    ) {
-      return editorMidPointsCache.points;
-    }
-    LinearElementEditor.updateEditorMidPointsCache(
-      element,
-      elementsMap,
-      appState,
-    );
-    return editorMidPointsCache.points!;
-  };
 
-  static updateEditorMidPointsCache = (
-    element: NonDeleted<ExcalidrawLinearElement>,
-    elementsMap: ElementsMap,
-    appState: InteractiveCanvasAppState,
-  ) => {
     const points = LinearElementEditor.getPointsGlobalCoordinates(
       element,
       elementsMap,
@@ -598,9 +575,8 @@ export class LinearElementEditor {
       midpoints.push(segmentMidPoint);
       index++;
     }
-    editorMidPointsCache.points = midpoints;
-    editorMidPointsCache.version = element.version;
-    editorMidPointsCache.zoom = appState.zoom.value;
+
+    return midpoints;
   };
 
   static getSegmentMidpointHitCoords = (
@@ -654,8 +630,11 @@ export class LinearElementEditor {
       }
     }
     let index = 0;
-    const midPoints: typeof editorMidPointsCache["points"] =
-      LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
+    const midPoints = LinearElementEditor.getEditorMidPoints(
+      element,
+      elementsMap,
+      appState,
+    );
 
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
@@ -1611,23 +1590,14 @@ export class LinearElementEditor {
       y = midPoint[1] - boundTextElement.height / 2;
     } else {
       const index = element.points.length / 2 - 1;
+      const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
+        element,
+        points[index],
+        points[index + 1],
+        index + 1,
+        elementsMap,
+      );
 
-      let midSegmentMidpoint = editorMidPointsCache.points[index];
-      if (element.points.length === 2) {
-        midSegmentMidpoint = pointCenter(points[0], points[1]);
-      }
-      if (
-        !midSegmentMidpoint ||
-        editorMidPointsCache.version !== element.version
-      ) {
-        midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
-          element,
-          points[index],
-          points[index + 1],
-          index + 1,
-          elementsMap,
-        );
-      }
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;
       y = midSegmentMidpoint[1] - boundTextElement.height / 2;
     }

packages/element/src/store.ts

@@ -939,6 +939,8 @@ const getDefaultObservedAppState = (): ObservedAppState => {
     editingLinearElementId: null,
     selectedLinearElementId: null,
     croppingElementId: null,
+    activeLockedId: null,
+    lockedMultiSelections: {},
   };
 };
 
@@ -952,6 +954,8 @@ export const getObservedAppState = (appState: AppState): ObservedAppState => {
     editingLinearElementId: appState.editingLinearElement?.elementId || null,
     selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
     croppingElementId: appState.croppingElementId,
+    activeLockedId: appState.activeLockedId,
+    lockedMultiSelections: appState.lockedMultiSelections,
   };
 
   Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {

packages/element/tests/delta.test.tsx

@@ -16,6 +16,8 @@ describe("AppStateDelta", () => {
         editingGroupId: null,
         croppingElementId: null,
         editingLinearElementId: null,
+        lockedMultiSelections: {},
+        activeLockedId: null,
       };
 
       const prevAppState1: ObservedAppState = {
@@ -57,6 +59,8 @@ describe("AppStateDelta", () => {
         croppingElementId: null,
         selectedLinearElementId: null,
         editingLinearElementId: null,
+        activeLockedId: null,
+        lockedMultiSelections: {},
       };
 
       const prevAppState1: ObservedAppState = {
@@ -102,6 +106,8 @@ describe("AppStateDelta", () => {
         croppingElementId: null,
         selectedLinearElementId: null,
         editingLinearElementId: null,
+        activeLockedId: null,
+        lockedMultiSelections: {},
       };
 
       const prevAppState1: ObservedAppState = {