diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index a66527c67d..496519d458 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -434,10 +434,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext z-index: 8; } -.jtk-endpoint.dropHover { - border: 2px solid #ff2244; -} - .jtk-drag-selected .node-default { /* https://www.cssmatic.com/box-shadow */ -webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37); diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index e906e4d7dd..698904c288 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -238,7 +238,7 @@ const CONNECTOR_PAINT_STYLE_SUCCESS = { }; const CONNECTOR_TYPE_BEZIER = ['Bezier', { curviness: _CURVINESS }]; -const CONNECTOR_TYPE_FLOWCHART = ['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: _ALWAYS_RESPECT_STUB}]; +const CONNECTOR_TYPE_FLOWCHART = ['Flowchart', { cornerRadius: 4, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: _ALWAYS_RESPECT_STUB}]; const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [ [ @@ -1503,8 +1503,10 @@ export default mixins( } showOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID); - hideOverlay(info.connection, OVERLAY_MIDPOINT_ARROW_ID); hideOverlay(info.connection, OVERLAY_RUN_ITEMS_ID); + if (!info.connection.getOverlay(OVERLAY_RUN_ITEMS_ID)) { + hideOverlay(info.connection, OVERLAY_MIDPOINT_ARROW_ID); + } }); info.connection.bind('mouseout', (connection: IConnection) => { @@ -1953,6 +1955,7 @@ export default mixins( if (!output || !output.total) { conn.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT); conn.removeOverlay(OVERLAY_RUN_ITEMS_ID); + showOrHideMidpointArrow(conn); return; } @@ -1977,6 +1980,7 @@ export default mixins( ]); showOrHideItemsLabel(conn); + showOrHideMidpointArrow(conn); }); }); }); diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts index b95ed1b157..8758c636cc 100644 --- a/packages/editor-ui/src/views/canvasHelpers.ts +++ b/packages/editor-ui/src/views/canvasHelpers.ts @@ -119,13 +119,22 @@ export const hideOverlay = (connection: Connection, overlayId: string) => { }; export const showOrHideMidpointArrow = (connection: Connection) => { + const hasItemsLabel = !!connection.getOverlay(OVERLAY_RUN_ITEMS_ID); + const sourceEndpoint = connection.endpoints[0]; const targetEndpoint = connection.endpoints[1]; - const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0]; + + const sourcePosition = sourceEndpoint.anchor.lastReturnValue[0]; + const targetPosition = targetEndpoint.anchor.lastReturnValue[0]; + + const minimum = hasItemsLabel ? 150 : 0; + const isBackwards = sourcePosition >= targetPosition; + const isTooLong = Math.abs(sourcePosition - targetPosition) >= minimum; const arrow = connection.getOverlay(OVERLAY_MIDPOINT_ARROW_ID); if (arrow) { - arrow.setVisible(requiresArrow); + arrow.setVisible(isBackwards && isTooLong); + arrow.setLocation(hasItemsLabel ? .6: .5); } };