n8n-io/n8n
1
1
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 12:35:46 +03:00
Code Issues Projects Releases Wiki Activity

✨ Add support for input labels

Browse Source
This commit is contained in:
Jan Oberhauser 2019-08-02 15:56:05 +02:00
parent f568122e3a
commit a0b7abed20
4 changed files with 95 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/editor-ui/src/components/mixins/nodeBase.ts
View File

@ -172,12 +172,33 @@ export const nodeBase = mixins(nodeIndex).extend({
},
};
if (nodeTypeData.inputNames) {
// Apply input names if they got set
newEndpointData.overlays = [
['Label',
{
id: 'input-name-label',
location: [-2, 0.5],
label: nodeTypeData.inputNames[index],
cssClass: 'node-input-endpoint-label',
visible: true,
},
],
];
}
this.instance.addEndpoint(this.nodeName, newEndpointData);
if (index === 0 && inputName === 'main') {
// Make the first main-input the default one to connect to when connection gets dropped on node
this.instance.makeTarget(this.nodeName, newEndpointData);
}
// TODO: Activate again if it makes sense. Currently makes problems when removing
// connection on which the input has a name. It does not get hidden because
// the endpoint to which it connects when letting it go over the node is
// different to the regular one (have different ids). So that seems to make
// problems when hiding the input-name.
// if (index === 0 && inputName === 'main') {
// // Make the first main-input the default one to connect to when connection gets dropped on node
// this.instance.makeTarget(this.nodeName, newEndpointData);
// }
});
// Add Outputs
@ -221,7 +242,7 @@ export const nodeBase = mixins(nodeIndex).extend({
id: 'output-name-label',
location: [1.75, 0.5],
label: nodeTypeData.outputNames[index],
cssClass: 'node-endpoint-label',
cssClass: 'node-output-endpoint-label',
visible: true,
},
],

85
packages/editor-ui/src/views/NodeView.vue
View File

@ -1070,6 +1070,7 @@ export default mixins(
const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex);
const sourceNode = this.$store.getters.nodeByName(sourceNodeName);
const targetNode = this.$store.getters.nodeByName(targetNodeName);
// TODO: That should happen after each move (only the setConnector part)
if (info.sourceEndpoint.anchor.lastReturnValue[0] >= info.targetEndpoint.anchor.lastReturnValue[0]) {
@ -1132,6 +1133,31 @@ export default mixins(
},
]);
// Display input names if they exist on connection
const targetNodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(targetNode.type);
if (targetNodeTypeData.inputNames !== undefined) {
for (const input of targetNodeTypeData.inputNames) {
const inputName = targetNodeTypeData.inputNames[targetInfo.index];
if (info.connection.getOverlay('input-name-label')) {
// Make sure that it does not get added multiple times
// continue;
info.connection.removeOverlay('input-name-label');
}
// @ts-ignore
info.connection.addOverlay([
'Label',
{
id: 'input-name-label',
label: inputName,
cssClass: 'connection-input-name-label',
location: 0.8,
},
]);
}
}
// Display output names if they exist on connection
const sourceNodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(sourceNode.type);
if (sourceNodeTypeData.outputNames !== undefined) {
@ -1140,7 +1166,7 @@ export default mixins(
if (info.connection.getOverlay('output-name-label')) {
// Make sure that it does not get added multiple times
continue;
info.connection.removeOverlay('output-name-label');
}
// @ts-ignore
@ -1150,20 +1176,25 @@ export default mixins(
id: 'output-name-label',
label: outputName,
cssClass: 'connection-output-name-label',
location: 0.3,
location: 0.2,
},
]);
}
}
// When connection gets made the output name get displayed as overlay
// on the connection. So the one on the endpoint can be hidden.
// When connection gets made the output and input name get displayed
// as overlay on the connection. So the ones on the endpoint can be hidden.
// @ts-ignore
const outputNameOverlay = info.connection.endpoints[0].getOverlay('output-name-label');
if (![null, undefined].includes(outputNameOverlay)) {
outputNameOverlay.setVisible(false);
}
const inputNameOverlay = info.targetEndpoint.getOverlay('input-name-label');
if (![null, undefined].includes(inputNameOverlay)) {
inputNameOverlay.setVisible(false);
}
this.$store.commit('addConnection', {
connection: [
{
@ -1180,11 +1211,30 @@ export default mixins(
});
});
const updateConnectionDetach = (sourceEndpoint, targetEndpoint, maxConnections) => {
// If the source endpoint is not connected to anything else anymore
// display the output-name overlays on the endpoint if any exist
if (sourceEndpoint !== undefined && sourceEndpoint.connections!.length === maxConnections) {
const outputNameOverlay = sourceEndpoint.getOverlay('output-name-label');
if (![null, undefined].includes(outputNameOverlay)) {
outputNameOverlay.setVisible(true);
}
}
if (targetEndpoint !== undefined && targetEndpoint.connections!.length === maxConnections) {
const inputNameOverlay = targetEndpoint.getOverlay('input-name-label');
if (![null, undefined].includes(inputNameOverlay)) {
inputNameOverlay.setVisible(true);
}
}
}
this.instance.bind('connectionMoved', (info) => {
// When a connection gets moved from one node to another it for some reason
// calls the "connection" event but not the "connectionDetached" one. So we listen
// additionally to the "connectionMoved" event and then only delete the existing connection.
updateConnectionDetach(info.originalSourceEndpoint, info.originalTargetEndpoint, 0);
// @ts-ignore
const sourceInfo = info.originalSourceEndpoint.getParameters();
// @ts-ignore
@ -1211,17 +1261,7 @@ export default mixins(
});
this.instance.bind('connectionDetached', (info) => {
const sourceEndpoint = info.connection.endpoints[0];
// If the source endpoint is not connected to anything else anymore
// display the output-name overlays on the endpoint if any exist
if (sourceEndpoint !== undefined && sourceEndpoint.connections!.length === 1) {
const outputNameOverlay = sourceEndpoint.getOverlay('output-name-label');
if (![null, undefined].includes(outputNameOverlay)) {
outputNameOverlay.setVisible(true);
}
}
updateConnectionDetach(info.sourceEndpoint, info.targetEndpoint, 1);
info.connection.removeOverlays();
this.__removeConnectionByConnectionInfo(info, false);
});
@ -1959,10 +1999,12 @@ export default mixins(
<style lang="scss">
.connection-input-name-label,
.connection-output-name-label {
background-color: $--custom-node-view-background;
background-color: rgba( $--custom-node-view-background, 0.9 );
line-height: 1.3em;
font-size: 0.8em;
font-size: 0.7em;
padding: 3px;
}
.delete-connection {
@ -1998,11 +2040,16 @@ export default mixins(
background-color: #ffffff55;
}
.node-endpoint-label {
font-size: 10px;
.node-input-endpoint-label,
.node-output-endpoint-label {
font-size: 0.7em;
background-color: $--custom-node-view-background;
}
.node-input-endpoint-label {
text-align: right;
}
.button-white {
border: none;
padding: 0.3em;

3
packages/nodes-base/nodes/Merge.node.ts
View File

@ -22,6 +22,7 @@ export class Merge implements INodeType {
},
inputs: ['main', 'main'],
outputs: ['main'],
inputNames: ['Input 1', 'Input 2'],
properties: [
{
displayName: 'Mode',
@ -51,7 +52,7 @@ export class Merge implements INodeType {
{
name: 'Wait',
value: 'wait',
description: 'Waits till data of both inputs is available and will then output a single empty item.',
description: 'Waits till data of both inputs is available and will then output a single empty item. If supposed to wait for multiple nodes they have to get attached to input 2. Node will not output any data.',
},
],
default: 'append',

1
packages/workflow/src/Interfaces.ts
View File

@ -403,6 +403,7 @@ export interface INodeTypeDescription {
description: string;
defaults: INodeParameters;
inputs: string[];
inputNames?: string[];
outputs: string[];
outputNames?: string[];
properties: INodeProperties[];