mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
✨ Add support for input labels
This commit is contained in:
parent
f568122e3a
commit
a0b7abed20
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -403,6 +403,7 @@ export interface INodeTypeDescription {
|
|||
description: string;
|
||||
defaults: INodeParameters;
|
||||
inputs: string[];
|
||||
inputNames?: string[];
|
||||
outputs: string[];
|
||||
outputNames?: string[];
|
||||
properties: INodeProperties[];
|
||||
|
|
Loading…
Reference in a new issue