diff --git a/packages/project-editor/features/changes/flow-viewer.tsx b/packages/project-editor/features/changes/flow-viewer.tsx index 32dc0428..3052a465 100644 --- 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 index 01acc375..7b42f342 100644 --- 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 index 9207a4f2..99f0ce35 100644 --- 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 index 3f729db8..00a5d6d7 100644 --- 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; } diff --git a/packages/project-editor/flow/timeline.tsx b/packages/project-editor/flow/timeline.tsx index 6247dcf4..e7c9f938 100644 --- a/packages/project-editor/flow/timeline.tsx +++ b/packages/project-editor/flow/timeline.tsx @@ -2075,8 +2075,8 @@ export class WidgetTimelinePathEditorHandler extends MouseHandlerWithSnapLines { } } - up(context: IFlowContext) { - super.up(context); + up(context: IFlowContext, cancel: boolean) { + super.up(context, cancel); context.projectStore.undoManager.setCombineCommands(false); } }