#695

Author: mvladic

packages/eez-studio-ui/draggable.tsx

@@ -1,4 +1,5 @@
 import { closestBySelector } from "eez-studio-shared/dom";
+import { IPointerEvent } from "project-editor/flow/editor/mouse-handler";
 
 export const DRAGGABLE_OVERLAY_ELEMENT_ID = "eez-draggable-overlay-element";
 
@@ -22,6 +23,7 @@ export class Draggable {
     params: any;
     savedBodyUserSelect: string | null = null;
     capturedPointerId: number = 0;
+    lastDragMoveEvent: PointerEvent | undefined;
 
     constructor(private config: DraggableConfig) {}
 
@@ -108,6 +110,7 @@ export class Draggable {
         this.element.setPointerCapture(e.pointerId);
 
         this.dragging = true;
+        this.lastDragMoveEvent = undefined;
 
         this.xDragStart = e.clientX;
         this.yDragStart = e.clientY;
@@ -126,6 +129,7 @@ export class Draggable {
     onPointerMove = (e: PointerEvent) => {
         if (this.dragging) {
             if (this.config.onDragMove) {
+                this.lastDragMoveEvent = e;
                 this.config.onDragMove(
                     e,
                     e.clientX - this.xDragStart,
@@ -155,11 +159,30 @@ export class Draggable {
     };
 
     onKeyDown = (e: KeyboardEvent) => {
-        if (e.keyCode == 27 /* ESC */) {
+        if (e.key == "Escape") {
             e.preventDefault();
             e.stopPropagation();
 
             this.finishDragging(undefined, true);
+        } else if (this.dragging) {
+            if (this.config.onDragMove && this.lastDragMoveEvent) {
+                let moveEvent: IPointerEvent = {
+                    clientX: this.lastDragMoveEvent.clientX,
+                    clientY: this.lastDragMoveEvent.clientY,
+                    movementX: this.lastDragMoveEvent.movementX,
+                    movementY: this.lastDragMoveEvent.movementY,
+                    ctrlKey: e.ctrlKey,
+                    shiftKey: e.shiftKey,
+                    timeStamp: e.timeStamp
+                };
+
+                this.config.onDragMove(
+                    moveEvent as PointerEvent,
+                    moveEvent.clientX - this.xDragStart,
+                    moveEvent.clientY - this.yDragStart,
+                    this.params
+                );
+            }
         }
     };
 

packages/project-editor/flow/editor/mouse-handler.tsx

@@ -371,6 +371,94 @@ export class DragMouseHandler extends MouseHandlerWithSnapLines {
         });
     }
 
+    getConnectionLineAlignedY(context: IFlowContext, event: IPointerEvent) {
+        if (!event.ctrlKey) {
+            return undefined;
+        }
+
+        let foundConnectionLine;
+        let foundDx = 0;
+
+        for (const connectionLine of (context.document.flow.object as Flow)
+            .connectionLines) {
+            if (
+                this.selectedObjects.find(
+                    selectedObject =>
+                        selectedObject.object == connectionLine.sourceComponent
+                )
+            ) {
+                // skip connection lines where source is among selected objects
+                continue;
+            }
+
+            const selectedObject = this.selectedObjects.find(
+                selectedObject =>
+                    selectedObject.object == connectionLine.targetComponent
+            );
+            if (selectedObject) {
+                const sourceOutputX =
+                    connectionLine.sourceComponent.geometry.left +
+                    connectionLine.sourceComponent.geometry.outputs[
+                        connectionLine.output
+                    ].position.x;
+
+                const targetInputX =
+                    this.rects[
+                        this.selectedObjects.findIndex(
+                            selectedObject =>
+                                selectedObject.object ==
+                                connectionLine.targetComponent
+                        )
+                    ].left +
+                    connectionLine.targetComponent.geometry.inputs[
+                        connectionLine.input
+                    ].position.x;
+
+                const dx = targetInputX - sourceOutputX;
+
+                if (
+                    dx > 0 &&
+                    (!foundConnectionLine || Math.abs(dx) < Math.abs(foundDx))
+                ) {
+                    foundConnectionLine = connectionLine;
+                    foundDx = dx;
+                }
+            }
+        }
+
+        if (!foundConnectionLine) {
+            return undefined;
+        }
+
+        const topSource = foundConnectionLine.sourceComponent.top;
+
+        const topBounding = this.selectionBoundingRectAtDown.top;
+        const topTarget =
+            this.objectPositionsAtDown[
+                this.selectedObjects.findIndex(
+                    selectedObject =>
+                        selectedObject.object ==
+                        foundConnectionLine.targetComponent
+                )
+            ].y;
+
+        const sourceOutputY =
+            foundConnectionLine.sourceComponent.geometry.outputs[
+                foundConnectionLine.output
+            ].position.y;
+
+        const targetInputY =
+            foundConnectionLine.targetComponent.geometry.inputs[
+                foundConnectionLine.input
+            ].position.y;
+
+        return (
+            topSource +
+            (topBounding - topTarget) -
+            (targetInputY - sourceOutputY)
+        );
+    }
+
     down(context: IFlowContext, event: IPointerEvent) {
         super.down(context, event);
 
@@ -403,13 +491,21 @@ export class DragMouseHandler extends MouseHandlerWithSnapLines {
             return;
         }
 
-        const { left, top } = this.snapLines.dragSnap(
+        let { left, top } = this.snapLines.dragSnap(
             this.left,
             this.top,
             this.selectionBoundingRectAtDown.width,
             this.selectionBoundingRectAtDown.height
         );
 
+        const connectionLineAlignedY = this.getConnectionLineAlignedY(
+            context,
+            event
+        );
+        if (connectionLineAlignedY) {
+            top = connectionLineAlignedY;
+        }
+
         const viewState = context.viewState;
 
         viewState.dxMouseDrag = left - this.selectionBoundingRectAtDown.left;