mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 23:47:28 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

show arrow along with label

Browse source
This commit is contained in:
Mutasem 2021-10-21 18:42:50 +02:00
parent 2e7425f79b
commit efad3e32ca
3 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor-ui/src/components/Node.vue
View file

@ -434,10 +434,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
z-index: 8; z-index: 8;
} }
.jtk-endpoint.dropHover {
border: 2px solid #ff2244;
}
.jtk-drag-selected .node-default { .jtk-drag-selected .node-default {
/* https://www.cssmatic.com/box-shadow */ /* https://www.cssmatic.com/box-shadow */
-webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37); -webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);

8
packages/editor-ui/src/views/NodeView.vue
View file

@ -238,7 +238,7 @@ const CONNECTOR_PAINT_STYLE_SUCCESS = {
}; };
const CONNECTOR_TYPE_BEZIER = ['Bezier', { curviness: _CURVINESS }]; 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[] = [ const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
[ [
@ -1503,8 +1503,10 @@ export default mixins(
} }
showOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID); showOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID);
hideOverlay(info.connection, OVERLAY_MIDPOINT_ARROW_ID);
hideOverlay(info.connection, OVERLAY_RUN_ITEMS_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) => { info.connection.bind('mouseout', (connection: IConnection) => {
@ -1953,6 +1955,7 @@ export default mixins(
if (!output || !output.total) { if (!output || !output.total) {
conn.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT); conn.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
conn.removeOverlay(OVERLAY_RUN_ITEMS_ID); conn.removeOverlay(OVERLAY_RUN_ITEMS_ID);
showOrHideMidpointArrow(conn);
return; return;
} }
@ -1977,6 +1980,7 @@ export default mixins(
]); ]);
showOrHideItemsLabel(conn); showOrHideItemsLabel(conn);
showOrHideMidpointArrow(conn);
}); });
}); });
}); });

13
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -119,13 +119,22 @@ export const hideOverlay = (connection: Connection, overlayId: string) => {
}; };
export const showOrHideMidpointArrow = (connection: Connection) => { export const showOrHideMidpointArrow = (connection: Connection) => {
const hasItemsLabel = !!connection.getOverlay(OVERLAY_RUN_ITEMS_ID);
const sourceEndpoint = connection.endpoints[0]; const sourceEndpoint = connection.endpoints[0];
const targetEndpoint = connection.endpoints[1]; 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); const arrow = connection.getOverlay(OVERLAY_MIDPOINT_ARROW_ID);
if (arrow) { if (arrow) {
arrow.setVisible(requiresArrow); arrow.setVisible(isBackwards && isTooLong);
arrow.setLocation(hasItemsLabel ? .6: .5);
} }
}; };