mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-29 06:29:42 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add connection actions

Browse source
This commit is contained in:
Mutasem 2021-10-13 16:01:59 +02:00
parent fb0502ecaa
commit a0ea038edf
2 changed files with 56 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -132,7 +132,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue';
import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays } from './helpers';
import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays, getIcon } from './helpers';
import mixins from 'vue-typed-mixins';
import { v4 as uuidv4} from 'uuid';
@ -1342,7 +1342,7 @@ export default mixins(
});
this.instance.bind('connection', (info: OnConnectionBindInfo) => {
info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: true}]);
info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: false}]);
addEndpointArrow(info.connection);
addOrRemoveMidpointArrow(info.connection);
@ -1368,14 +1368,24 @@ export default mixins(
if (timer !== undefined) {
clearTimeout(timer);
}
const overlay = info.connection.getOverlay('remove-connection');
const overlay = info.connection.getOverlay('connection-actions');
overlay.setVisible(true);
const arrow = info.connection.getOverlay('midpoint-arrow');
if (arrow) {
arrow.setVisible(false);
}
});
info.connection.bind('mouseout', (connection: IConnection) => {
timer = setTimeout(() => {
const overlay = info.connection.getOverlay('remove-connection');
const overlay = info.connection.getOverlay('connection-actions');
overlay.setVisible(false);
timer = undefined;
const arrow = info.connection.getOverlay('midpoint-arrow');
if (arrow) {
arrow.setVisible(true);
}
}, 500);
});
@ -1383,13 +1393,13 @@ export default mixins(
info.connection.addOverlay([
'Label',
{
id: 'remove-connection',
label: '<span class="delete-connection clickable" title="Delete Connection">x</span>',
cssClass: 'remove-connection-label',
visible: false,
id: 'connection-actions',
label: `<div>${getIcon('plus')}</div> <div>${getIcon('trash')}</div>`,
cssClass: 'connection-actions',
visible: true,
events: {
mousedown: () => {
this.__removeConnectionByConnectionInfo(info, true);
// this.__removeConnectionByConnectionInfo(info, true);
},
},
},
@ -2421,4 +2431,28 @@ export default mixins(
}
}
.connection-actions {
> div {
border: 2px solid var(--color-text-base);
background-color: var(--color-background-xlight);
font-size: var(--font-size-2xs);
border-radius: var(--border-radius-base);
height: var(--spacing-l);
width: var(--spacing-l);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:first-child {
margin-right: var(--spacing-xs);
}
&:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}
}
</style>

14
packages/editor-ui/src/views/helpers.ts
View file

@ -127,7 +127,7 @@ export const addEndpointArrow = (connection: Connection) => {
export const addOrRemoveMidpointArrow = (connection: Connection) => {
const sourceEndpoint = connection.endpoints[0];
const targetEndpoint = connection.endpoints[1];
const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= (targetEndpoint.anchor.lastReturnValue[0] - JSPLUMB_FLOWCHART_STUB);
const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0];
const hasArrow = !!connection.getOverlay('midpoint-arrow');
@ -154,3 +154,15 @@ export const addOrRemoveMidpointArrow = (connection: Connection) => {
},
]);
};
export const getIcon = (name: string): string => {
if (name === 'trash') {
return `<svg data-v-66d5c7e2="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash fa-w-14 Icon__medium_ctPPJ"><path data-v-66d5c7e2="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" class=""></path></svg>`;
}
if (name === 'plus') {
return `<svg data-v-301ed208="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-plus fa-w-14 Icon__medium_ctPPJ"><path data-v-301ed208="" fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" class=""></path></svg>`;
}
return '';
};