From a0b7abed206e5290d812e9e6181d9512cb143345 Mon Sep 17 00:00:00 2001 From: Jan Oberhauser Date: Fri, 2 Aug 2019 15:56:05 +0200 Subject: [PATCH] :sparkles: Add support for input labels --- .../src/components/mixins/nodeBase.ts | 31 +++++-- packages/editor-ui/src/views/NodeView.vue | 85 ++++++++++++++----- packages/nodes-base/nodes/Merge.node.ts | 3 +- packages/workflow/src/Interfaces.ts | 1 + 4 files changed, 95 insertions(+), 25 deletions(-) diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts index e969d6dfb9..9effd9e6b7 100644 --- a/packages/editor-ui/src/components/mixins/nodeBase.ts +++ b/packages/editor-ui/src/components/mixins/nodeBase.ts @@ -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, }, ], diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 0aaa9d7368..4116f9784d 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -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(