More actionFinalize

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/excalidraw/actions/actionFinalize.tsx

@@ -3,6 +3,7 @@ import { pointFrom } from "@excalidraw/math";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
+  isBindingEnabled,
 } from "@excalidraw/element/binding";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
@@ -36,10 +37,43 @@ 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();
+    console.log("actionFinalize");
+    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) {
+        return {
+          appState: {
+            selectedLinearElement: {
+              ...linearElementEditor,
+              selectedPointsIndices: null,
+            },
+            suggestedBindings: [],
+          },
+          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+        };
+      }
+    }
 
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
@@ -125,7 +159,7 @@ export const actionFinalize = register({
 
       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);
+        newElements = newElements.filter((el) => el.id !== element!.id);
       }
 
       // If the multi point line closes the loop,
@@ -150,7 +184,8 @@ export const actionFinalize = register({
         isBindingElement(element) &&
         !isLoop &&
         element.points.length > 1 &&
-        !appState.selectedElementIds[element.id]
+        !appState.selectedElementIds[element.id] &&
+        isBindingEnabled(appState)
       ) {
         const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
           element,

packages/excalidraw/components/App.tsx

@@ -109,13 +109,11 @@ import {
 } from "@excalidraw/element/bounds";
 
 import {
-  bindOrUnbindLinearElement,
   bindOrUnbindLinearElements,
   fixBindingsAfterDeletion,
   getHoveredElementForBinding,
   isBindingEnabled,
   isLinearElementSimpleAndAlreadyBound,
-  maybeBindLinearElement,
   shouldEnableBindingForPointerEvent,
   updateBoundElements,
   getSuggestedBindingsForArrows,
@@ -2781,7 +2779,6 @@ class App extends React.Component<AppProps, AppState> {
     this.updateEmbeddables();
     const elements = this.scene.getElementsIncludingDeleted();
     const elementsMap = this.scene.getElementsMapIncludingDeleted();
-    const nonDeletedElementsMap = this.scene.getNonDeletedElementsMap();
 
     if (!this.state.showWelcomeScreen && !elements.length) {
       this.setState({ showWelcomeScreen: true });
@@ -2935,18 +2932,19 @@ class App extends React.Component<AppProps, AppState> {
       isBindingEnabled(this.state) &&
       isBindingElement(multiElement, false)
     ) {
-      maybeBindLinearElement(
+      this.actionManager.executeAction(actionFinalize);
-        multiElement,
+      // maybeBindLinearElement(
-        this.state,
+      //   multiElement,
-        tupleToCoors(
+      //   this.state,
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
+      //   tupleToCoors(
-            multiElement,
+      //     LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            -1,
+      //       multiElement,
-            nonDeletedElementsMap,
+      //       -1,
-          ),
+      //       nonDeletedElementsMap,
-        ),
+      //     ),
-        this.scene,
+      //   ),
-      );
+      //   this.scene,
+      // );
     }
 
     this.store.commit(elementsMap, this.state);
@@ -9011,35 +9009,9 @@ class App extends React.Component<AppProps, AppState> {
             this.setState({ selectedLinearElement: null });
           }
         } else {
-          const linearElementEditor = LinearElementEditor.handlePointerUp(
+          this.actionManager.executeAction(actionFinalize, "ui", {
-            childEvent,
+            event: childEvent,
-            this.state.selectedLinearElement,
+          });
-            this.state,
-            this.scene,
-          );
-
-          const { startBindingElement, endBindingElement } =
-            linearElementEditor;
-          const element = this.scene.getElement(linearElementEditor.elementId);
-          if (isBindingElement(element)) {
-            this.actionManager.executeAction(actionFinalize);
-            bindOrUnbindLinearElement(
-              element,
-              startBindingElement,
-              endBindingElement,
-              this.scene,
-            );
-          }
-
-          if (linearElementEditor !== this.state.selectedLinearElement) {
-            this.setState({
-              selectedLinearElement: {
-                ...linearElementEditor,
-                selectedPointsIndices: null,
-              },
-              suggestedBindings: [],
-            });
-          }
         }
       }