From 9b643abceeaf1fb20406145333df0240ddcae0fe Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Wed, 30 Apr 2025 22:30:40 +0200 Subject: [PATCH] More actionFinalize Signed-off-by: Mark Tolmacs --- .../excalidraw/actions/actionFinalize.tsx | 41 ++++++++++++- packages/excalidraw/components/App.tsx | 60 +++++-------------- 2 files changed, 54 insertions(+), 47 deletions(-) diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx index 247dd44a99..cd640860af 100644 --- a/packages/excalidraw/actions/actionFinalize.tsx +++ b/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, diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index f963a3f9b9..8763045eb8 100644 --- a/packages/excalidraw/components/App.tsx +++ b/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 { 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 { isBindingEnabled(this.state) && isBindingElement(multiElement, false) ) { - maybeBindLinearElement( - multiElement, - this.state, - tupleToCoors( - LinearElementEditor.getPointAtIndexGlobalCoordinates( - multiElement, - -1, - nonDeletedElementsMap, - ), - ), - this.scene, - ); + this.actionManager.executeAction(actionFinalize); + // maybeBindLinearElement( + // multiElement, + // this.state, + // tupleToCoors( + // LinearElementEditor.getPointAtIndexGlobalCoordinates( + // multiElement, + // -1, + // nonDeletedElementsMap, + // ), + // ), + // this.scene, + // ); } this.store.commit(elementsMap, this.state); @@ -9011,35 +9009,9 @@ class App extends React.Component { this.setState({ selectedLinearElement: null }); } } else { - const linearElementEditor = LinearElementEditor.handlePointerUp( - 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: [], - }); - } + this.actionManager.executeAction(actionFinalize, "ui", { + event: childEvent, + }); } }