From a7cd27d745ae5d7315eca41aac6996f5f0280439 Mon Sep 17 00:00:00 2001 From: Jan Oberhauser Date: Thu, 27 Jun 2019 11:27:02 +0200 Subject: [PATCH] Display output names on connections if there are any --- packages/editor-ui/src/Interface.ts | 5 ++ .../src/components/mixins/nodeBase.ts | 1 + .../editor-ui/src/n8n-theme-variables.scss | 2 + packages/editor-ui/src/n8n-theme.scss | 2 +- packages/editor-ui/src/views/NodeView.vue | 69 +++++++++++++++++-- 5 files changed, 72 insertions(+), 7 deletions(-) diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts index e43c39ac7..df9118d79 100644 --- a/packages/editor-ui/src/Interface.ts +++ b/packages/editor-ui/src/Interface.ts @@ -32,12 +32,17 @@ declare module 'jsplumb' { // bind(event: string, (connection: Connection): void;): void; // tslint:disable-line:no-any bind(event: string, callback: Function): void; // tslint:disable-line:no-any removeOverlay(name: string): void; + removeOverlays(): void; setParameter(name: string, value: any): void; // tslint:disable-line:no-any setPaintStyle(arg0: PaintStyle): void; addOverlay(arg0: any[]): void; // tslint:disable-line:no-any setConnector(arg0: any[]): void; // tslint:disable-line:no-any } + interface Endpoint { + getOverlay(name: string): any; // tslint:disable-line:no-any + } + interface Overlay { setVisible(visible: boolean): void; } diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts index 191af417e..28f280d18 100644 --- a/packages/editor-ui/src/components/mixins/nodeBase.ts +++ b/packages/editor-ui/src/components/mixins/nodeBase.ts @@ -207,6 +207,7 @@ export const nodeBase = mixins(nodeIndex).extend({ newEndpointData.overlays = [ ['Label', { + id: 'output-name-label', location: [0.5, 1.5], label: nodeTypeData.outputNames[index], cssClass: 'node-endpoint-label', diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss index 73aed5ead..f0520c5bf 100644 --- a/packages/editor-ui/src/n8n-theme-variables.scss +++ b/packages/editor-ui/src/n8n-theme-variables.scss @@ -23,6 +23,8 @@ $--custom-running-text : #eb9422; $--custom-success-background : #e3f0e4; $--custom-success-text : #40c351; +$--custom-node-view-background : #faf9fe; + // Table $--custom-table-background-main: $--custom-header-background ; $--custom-table-background-alternative: #f5f5f5; diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss index 67b0ba526..41b82ac96 100644 --- a/packages/editor-ui/src/n8n-theme.scss +++ b/packages/editor-ui/src/n8n-theme.scss @@ -12,7 +12,7 @@ body { font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #faf9fe; + background-color: $--custom-node-view-background; margin: 0; padding: 0; } diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index da779d108..a6b4de115 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -977,6 +977,16 @@ export default mixins( }); this.instance.bind('connection', (info: OnConnectionBindInfo) => { + // @ts-ignore + const sourceInfo = info.sourceEndpoint.getParameters(); + // @ts-ignore + const targetInfo = info.targetEndpoint.getParameters(); + + const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex); + const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex); + + const sourceNode = this.$store.getters.nodeByName(sourceNodeName); + // TODO: That should happen after each move (only the setConnector part) if (info.sourceEndpoint.anchor.lastReturnValue[1] >= info.targetEndpoint.anchor.lastReturnValue[1]) { // When the source is underneath the target it will make sure that @@ -1038,20 +1048,47 @@ export default mixins( }, ]); + // Display output names if they exist on connection + const sourceNodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(sourceNode.type); + if (sourceNodeTypeData.outputNames !== undefined) { + for (const output of sourceNodeTypeData.outputNames) { + const outputName = sourceNodeTypeData.outputNames[sourceInfo.index]; + + if (info.connection.getOverlay('output-name-label')) { + // Make sure that it does not get added multiple times + continue; + } + + // @ts-ignore + info.connection.addOverlay([ + 'Label', + { + id: 'output-name-label', + label: outputName, + cssClass: 'connection-output-name-label', + location: 0.3, + }, + ]); + } + } + + // When connection gets made the output name get displayed as overlay + // on the connection. So the one on the endpoint can be hidden. // @ts-ignore - const sourceInfo = info.sourceEndpoint.getParameters(); - // @ts-ignore - const targetInfo = info.targetEndpoint.getParameters(); + const outputNameOverlay = info.connection.endpoints[0].getOverlay('output-name-label'); + if (outputNameOverlay !== null) { + outputNameOverlay.setVisible(false); + } this.$store.commit('addConnection', { connection: [ { - node: this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex), + node: sourceNodeName, type: sourceInfo.type, index: sourceInfo.index, }, { - node: this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex), + node: targetNodeName, type: targetInfo.type, index: targetInfo.index, }, @@ -1086,9 +1123,22 @@ export default mixins( // Make sure to remove the overlay else after the second move // it visibly stays behind free floating without a connection. - info.connection.removeOverlay('remove-connection'); + info.connection.removeOverlays(); }); + 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 (outputNameOverlay !== null) { + outputNameOverlay.setVisible(true); + } + } + + info.connection.removeOverlays(); this.__removeConnectionByConnectionInfo(info, false); }); }, @@ -1807,6 +1857,12 @@ export default mixins(