feat: Call actionFinalize at the end of arrow creation and drag (#9453)

* First iter Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * Restore binding Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * More actionFinalize Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * Additional fixes Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * New elbow arrow is removed if too small Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * Remove very small arrows * Still allow loops * Restore tests Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * Update history snapshot * More history snapshot updates * keep invisible 2-point lines/freedraw elements --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2025-05-25 22:28:24 +02:00
parent cc571c4681
commit 4dc205537c
8 changed files with 254 additions and 130 deletions
@@ -3,8 +3,9 @@ import { pointFrom } from "@excalidraw/math";
 import {
  maybeBindLinearElement,
  bindOrUnbindLinearElement,
-} from "@excalidraw/element";
-import { LinearElementEditor } from "@excalidraw/element";
+  isBindingEnabled,
+} from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";

 import { isBindingElement, isLinearElement } from "@excalidraw/element";

@@ -15,6 +16,12 @@ import { isInvisiblySmallElement } from "@excalidraw/element";

 import { CaptureUpdateAction } from "@excalidraw/element";

+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  NonDeleted,
+} from "@excalidraw/element/types";
+
 import { t } from "../i18n";
 import { resetCursor } from "../cursor";
 import { done } from "../components/icons";
@@ -28,11 +35,50 @@ export const actionFinalize = register({
  name: "finalize",
  label: "",
  trackEvent: false,
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState, data, app) => {
    const { interactiveCanvas, focusContainer, scene } = app;

    const elementsMap = scene.getNonDeletedElementsMap();

+    if (data?.event && appState.selectedLinearElement) {
+      const linearElementEditor = LinearElementEditor.handlePointerUp(
+        data.event,
+        appState.selectedLinearElement,
+        appState,
+        app.scene,
+      );
+
+      const { startBindingElement, endBindingElement } = linearElementEditor;
+      const element = app.scene.getElement(linearElementEditor.elementId);
+      if (isBindingElement(element)) {
+        bindOrUnbindLinearElement(
+          element,
+          startBindingElement,
+          endBindingElement,
+          app.scene,
+        );
+      }
+
+      if (linearElementEditor !== appState.selectedLinearElement) {
+        let newElements = elements;
+        if (element && isInvisiblySmallElement(element)) {
+          // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
+          newElements = newElements.filter((el) => el.id !== element!.id);
+        }
+        return {
+          elements: newElements,
+          appState: {
+            selectedLinearElement: {
+              ...linearElementEditor,
+              selectedPointsIndices: null,
+            },
+            suggestedBindings: [],
+          },
+          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+        };
+      }
+    }
+
    if (appState.editingLinearElement) {
      const { elementId, startBindingElement, endBindingElement } =
        appState.editingLinearElement;
@@ -80,75 +126,85 @@ export const actionFinalize = register({
      focusContainer();
    }

-    const multiPointElement = appState.multiElement
-      ? appState.multiElement
-      : appState.newElement?.type === "freedraw"
-      ? appState.newElement
-      : null;
+    let element: NonDeleted<ExcalidrawElement> | null = null;
+    if (appState.multiElement) {
+      element = appState.multiElement;
+    } else if (
+      appState.newElement?.type === "freedraw" ||
+      isBindingElement(appState.newElement)
+    ) {
+      element = appState.newElement;
+    } else if (Object.keys(appState.selectedElementIds).length === 1) {
+      const candidate = elementsMap.get(
+        Object.keys(appState.selectedElementIds)[0],
+      ) as NonDeleted<ExcalidrawLinearElement> | undefined;
+      if (candidate) {
+        element = candidate;
+      }
+    }

-    if (multiPointElement) {
+    if (element) {
      // pen and mouse have hover
      if (
-        multiPointElement.type !== "freedraw" &&
+        appState.multiElement &&
+        element.type !== "freedraw" &&
        appState.lastPointerDownWith !== "touch"
      ) {
-        const { points, lastCommittedPoint } = multiPointElement;
+        const { points, lastCommittedPoint } = element;
        if (
          !lastCommittedPoint ||
          points[points.length - 1] !== lastCommittedPoint
        ) {
-          scene.mutateElement(multiPointElement, {
-            points: multiPointElement.points.slice(0, -1),
+          scene.mutateElement(element, {
+            points: element.points.slice(0, -1),
          });
        }
      }

-      if (isInvisiblySmallElement(multiPointElement)) {
+      if (element && isInvisiblySmallElement(element)) {
        // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
-        newElements = newElements.filter(
-          (el) => el.id !== multiPointElement.id,
-        );
+        newElements = newElements.filter((el) => el.id !== element!.id);
      }

-      // If the multi point line closes the loop,
-      // set the last point to first point.
-      // This ensures that loop remains closed at different scales.
-      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
-      if (
-        multiPointElement.type === "line" ||
-        multiPointElement.type === "freedraw"
-      ) {
-        if (isLoop) {
-          const linePoints = multiPointElement.points;
-          const firstPoint = linePoints[0];
-          scene.mutateElement(multiPointElement, {
-            points: linePoints.map((p, index) =>
-              index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
-                : p,
-            ),
-          });
+      if (isLinearElement(element) || element.type === "freedraw") {
+        // If the multi point line closes the loop,
+        // set the last point to first point.
+        // This ensures that loop remains closed at different scales.
+        const isLoop = isPathALoop(element.points, appState.zoom.value);
+        if (element.type === "line" || element.type === "freedraw") {
+          if (isLoop) {
+            const linePoints = element.points;
+            const firstPoint = linePoints[0];
+            scene.mutateElement(element, {
+              points: linePoints.map((p, index) =>
+                index === linePoints.length - 1
+                  ? pointFrom(firstPoint[0], firstPoint[1])
+                  : p,
+              ),
+            });
+          }
        }
-      }

-      if (
-        isBindingElement(multiPointElement) &&
-        !isLoop &&
-        multiPointElement.points.length > 1
-      ) {
-        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-          multiPointElement,
-          -1,
-          arrayToMap(elements),
-        );
-        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
+        if (
+          isBindingElement(element) &&
+          !isLoop &&
+          element.points.length > 1 &&
+          isBindingEnabled(appState)
+        ) {
+          const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+            element,
+            -1,
+            arrayToMap(elements),
+          );
+          maybeBindLinearElement(element, appState, { x, y }, scene);
+        }
      }
    }

    if (
      (!appState.activeTool.locked &&
        appState.activeTool.type !== "freedraw") ||
-      !multiPointElement
+      !element
    ) {
      resetCursor(interactiveCanvas);
    }
@@ -175,7 +231,7 @@ export const actionFinalize = register({
        activeTool:
          (appState.activeTool.locked ||
            appState.activeTool.type === "freedraw") &&
-          multiPointElement
+          element
            ? appState.activeTool
            : activeTool,
        activeEmbeddable: null,
@@ -186,21 +242,18 @@ export const actionFinalize = register({
        startBoundElement: null,
        suggestedBindings: [],
        selectedElementIds:
-          multiPointElement &&
+          element &&
          !appState.activeTool.locked &&
          appState.activeTool.type !== "freedraw"
            ? {
                ...appState.selectedElementIds,
-                [multiPointElement.id]: true,
+                [element.id]: true,
              }
            : appState.selectedElementIds,
        // To select the linear element when user has finished mutipoint editing
        selectedLinearElement:
-          multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(
-                multiPointElement,
-                arrayToMap(newElements),
-              )
+          element && isLinearElement(element)
+            ? new LinearElementEditor(element, arrayToMap(newElements))
            : appState.selectedLinearElement,
        pendingImageElementId: null,
      },