implement cancel in some mouse handlers for the project editor

eez-open · Dec 15, 2024 · d4c637f · d4c637f
1 parent d518d43
commit d4c637f
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 125 deletions.
diff --git a/packages/project-editor/features/changes/flow-viewer.tsx b/packages/project-editor/features/changes/flow-viewer.tsx
@@ -427,7 +427,7 @@ export const Canvas = observer(
             this.buttonsAtDown = event.buttons;
 
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, true);
                 this.mouseHandler = undefined;
             }
 
@@ -472,9 +472,9 @@ export const Canvas = observer(
             }
         };
 
-        onDragEnd(event: PointerEvent) {
+        onDragEnd(event: PointerEvent, cancel: boolean) {
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, cancel);
 
                 this.mouseHandler = undefined;
             }

diff --git a/packages/project-editor/flow/editor/editor.tsx b/packages/project-editor/flow/editor/editor.tsx
@@ -583,7 +583,7 @@ export const Canvas = observer(
             this.buttonsAtDown = event.buttons;
 
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, true);
                 this.mouseHandler = undefined;
             }
 
@@ -676,11 +676,11 @@ export const Canvas = observer(
             }
         };
 
-        onDragEnd(event: PointerEvent) {
+        onDragEnd(event: PointerEvent, cancel: boolean) {
             let preventContextMenu = false;
 
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, cancel);
 
                 if (this.mouseHandler instanceof PanMouseHandler) {
                     if (pointDistance(this.mouseHandler.totalMovement) > 10) {
@@ -779,7 +779,10 @@ export const Canvas = observer(
                         );
                         if (menu) {
                             if (this.mouseHandler) {
-                                this.mouseHandler.up(this.props.flowContext);
+                                this.mouseHandler.up(
+                                    this.props.flowContext,
+                                    true
+                                );
                                 this.mouseHandler = undefined;
                             }
 

diff --git a/packages/project-editor/flow/editor/mouse-handler.tsx b/packages/project-editor/flow/editor/mouse-handler.tsx
@@ -44,7 +44,7 @@ export interface IMouseHandler {
     lastPointerEvent: IPointerEvent;
     down(context: IFlowContext, event: IPointerEvent): void;
     move(context: IFlowContext, event: IPointerEvent): void;
-    up(context: IFlowContext): void;
+    up(context: IFlowContext, cancel: boolean): void;
     render?(context: IFlowContext): React.ReactNode;
     onTransformChanged(context: IFlowContext): void;
 }
@@ -135,7 +135,7 @@ export class MouseHandler implements IMouseHandler {
         };
     }
 
-    up(context: IFlowContext) {}
+    up(context: IFlowContext, cancel: boolean) {}
 
     onTransformChanged(context: IFlowContext) {
         const transform = context.viewState.transform;
@@ -282,8 +282,8 @@ export class RubberBandSelectionMouseHandler extends MouseHandler {
         );
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
 
         runInAction(() => {
             this.rubberBendRect = undefined;
@@ -465,8 +465,8 @@ export class DragMouseHandler extends MouseHandlerWithSnapLines {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
 
         if (this.objectNodes) {
             for (let i = 0; i < this.objectNodes.length; ++i) {
@@ -664,8 +664,8 @@ export class ResizeMouseHandler extends MouseHandlerWithSnapLines {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
 
         context.document.onDragEnd();
     }
@@ -815,22 +815,24 @@ export class NewConnectionLineFromOutputMouseHandler extends MouseHandler {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
 
-        if (this.target) {
-            context.document.connect(
-                this.sourceObject.id,
-                this.connectionOutput,
-                this.target.objectId,
-                this.target.connectionInput
-            );
-        } else if (this.distance >= 20) {
-            context.document.connectToNewTarget(
-                this.sourceObject.id,
-                this.connectionOutput,
-                context.viewState.transform.offsetToPagePoint(this.endPoint)
-            );
+        if (!cancel) {
+            if (this.target) {
+                context.document.connect(
+                    this.sourceObject.id,
+                    this.connectionOutput,
+                    this.target.objectId,
+                    this.target.connectionInput
+                );
+            } else if (this.distance >= 20) {
+                context.document.connectToNewTarget(
+                    this.sourceObject.id,
+                    this.connectionOutput,
+                    context.viewState.transform.offsetToPagePoint(this.endPoint)
+                );
+            }
         }
 
         context.document.onDragEnd();
@@ -1008,22 +1010,26 @@ export class NewConnectionLineFromInputMouseHandler extends MouseHandler {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
 
-        if (this.source) {
-            context.document.connect(
-                this.source.objectId,
-                this.source.connectionOutput,
-                this.targetObject.id,
-                this.connectionInput
-            );
-        } else if (this.distance >= 20) {
-            context.document.connectToNewSource(
-                this.targetObject.id,
-                this.connectionInput,
-                context.viewState.transform.offsetToPagePoint(this.startPoint)
-            );
+        if (!cancel) {
+            if (this.source) {
+                context.document.connect(
+                    this.source.objectId,
+                    this.source.connectionOutput,
+                    this.targetObject.id,
+                    this.connectionInput
+                );
+            } else if (this.distance >= 20) {
+                context.document.connectToNewSource(
+                    this.targetObject.id,
+                    this.connectionInput,
+                    context.viewState.transform.offsetToPagePoint(
+                        this.startPoint
+                    )
+                );
+            }
         }
 
         context.document.onDragEnd();
@@ -1218,45 +1224,47 @@ export class MoveOutputConnectionLinesMouseHandler extends MouseHandler {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
-
-        const source = this.source;
-        if (source) {
-            const sourceObject = context.projectStore.getObjectFromObjectId(
-                source.objectId
-            ) as Component;
-
-            const changes = {
-                source: sourceObject.objID,
-                output: source.connectionOutput
-            };
-
-            if (this.connectionLines.length > 0) {
-                context.projectStore.undoManager.setCombineCommands(true);
-
-                this.connectionLines.forEach(connectionLine => {
-                    if (
-                        context.document.connectionExists(
-                            source.objectId,
-                            source.connectionOutput,
-                            getId(connectionLine.targetComponent!),
-                            connectionLine.input
-                        )
-                    ) {
-                        context.projectStore.deleteObject(connectionLine);
-                    } else {
-                        context.projectStore.updateObject(
-                            connectionLine,
-                            changes
-                        );
-                    }
-                });
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
+
+        if (!cancel) {
+            const source = this.source;
+            if (source) {
+                const sourceObject = context.projectStore.getObjectFromObjectId(
+                    source.objectId
+                ) as Component;
+
+                const changes = {
+                    source: sourceObject.objID,
+                    output: source.connectionOutput
+                };
+
+                if (this.connectionLines.length > 0) {
+                    context.projectStore.undoManager.setCombineCommands(true);
+
+                    this.connectionLines.forEach(connectionLine => {
+                        if (
+                            context.document.connectionExists(
+                                source.objectId,
+                                source.connectionOutput,
+                                getId(connectionLine.targetComponent!),
+                                connectionLine.input
+                            )
+                        ) {
+                            context.projectStore.deleteObject(connectionLine);
+                        } else {
+                            context.projectStore.updateObject(
+                                connectionLine,
+                                changes
+                            );
+                        }
+                    });
+
+                    context.projectStore.undoManager.setCombineCommands(false);
+                }
 
-                context.projectStore.undoManager.setCombineCommands(false);
+                context.viewState.deselectAllObjects();
             }
-
-            context.viewState.deselectAllObjects();
         }
 
         context.document.onDragEnd();
@@ -1460,45 +1468,47 @@ export class MoveInputConnectionLinesMouseHandler extends MouseHandler {
         }
     }
 
-    up(context: IFlowContext) {
-        super.up(context);
-
-        const target = this.target;
-        if (target) {
-            const targetObject = context.projectStore.getObjectFromObjectId(
-                target.objectId
-            ) as Component;
-
-            const changes = {
-                target: targetObject.objID,
-                input: target.connectionInput
-            };
-
-            if (this.connectionLines.length > 0) {
-                context.projectStore.undoManager.setCombineCommands(true);
-
-                this.connectionLines.forEach(connectionLine => {
-                    if (
-                        context.document.connectionExists(
-                            getId(connectionLine.sourceComponent!),
-                            connectionLine.output,
-                            target.objectId,
-                            target.connectionInput
-                        )
-                    ) {
-                        context.projectStore.deleteObject(connectionLine);
-                    } else {
-                        context.projectStore.updateObject(
-                            connectionLine,
-                            changes
-                        );
-                    }
-                });
+    up(context: IFlowContext, cancel: boolean) {
+        super.up(context, cancel);
+
+        if (!cancel) {
+            const target = this.target;
+            if (target) {
+                const targetObject = context.projectStore.getObjectFromObjectId(
+                    target.objectId
+                ) as Component;
+
+                const changes = {
+                    target: targetObject.objID,
+                    input: target.connectionInput
+                };
+
+                if (this.connectionLines.length > 0) {
+                    context.projectStore.undoManager.setCombineCommands(true);
+
+                    this.connectionLines.forEach(connectionLine => {
+                        if (
+                            context.document.connectionExists(
+                                getId(connectionLine.sourceComponent!),
+                                connectionLine.output,
+                                target.objectId,
+                                target.connectionInput
+                            )
+                        ) {
+                            context.projectStore.deleteObject(connectionLine);
+                        } else {
+                            context.projectStore.updateObject(
+                                connectionLine,
+                                changes
+                            );
+                        }
+                    });
+
+                    context.projectStore.undoManager.setCombineCommands(false);
+                }
 
-                context.projectStore.undoManager.setCombineCommands(false);
+                context.viewState.deselectAllObjects();
             }
-
-            context.viewState.deselectAllObjects();
         }
 
         context.document.onDragEnd();

diff --git a/packages/project-editor/flow/runtime-viewer/viewer.tsx b/packages/project-editor/flow/runtime-viewer/viewer.tsx
@@ -305,7 +305,7 @@ export const Canvas = observer(
             this.buttonsAtDown = event.buttons;
 
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, true);
                 this.mouseHandler = undefined;
             }
 
@@ -352,11 +352,11 @@ export const Canvas = observer(
             }
         };
 
-        onDragEnd(event: PointerEvent) {
+        onDragEnd(event: PointerEvent, cancel: boolean) {
             let preventContextMenu = false;
 
             if (this.mouseHandler) {
-                this.mouseHandler.up(this.props.flowContext);
+                this.mouseHandler.up(this.props.flowContext, cancel);
 
                 if (this.mouseHandler instanceof PanMouseHandler) {
                     if (pointDistance(this.mouseHandler.totalMovement) > 10) {
@@ -445,7 +445,10 @@ export const Canvas = observer(
                         );
                         if (menu) {
                             if (this.mouseHandler) {
-                                this.mouseHandler.up(this.props.flowContext);
+                                this.mouseHandler.up(
+                                    this.props.flowContext,
+                                    true
+                                );
                                 this.mouseHandler = undefined;
                             }