diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 3f806432c2..fd3ffb8a3d 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -26,6 +26,13 @@ +
+ +
+ +
+
+ @@ -106,11 +113,41 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext return workflowResultDataNode.length; }, + canvasOffsetPosition() { + return this.$store.getters.getNodeViewOffsetPosition; + }, + getTriggerNodeTooltip (): string | undefined { + if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) { + return this.nodeType.eventTriggerDescription; + } else { + return `Waiting for you to create an event in ${this.nodeType && this.nodeType.displayName.replace(/Trigger/, "")}`; + } + }, isExecuting (): boolean { return this.$store.getters.executingNode === this.data.name; }, + isSingleActiveTriggerNode (): boolean { + const nodes = this.$store.getters.workflowTriggerNodes.filter((node: INodeUi) => { + const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription | null; + return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled; + }); + + return nodes.length === 1; + }, + isTriggerNode (): boolean { + return !!(this.nodeType && this.nodeType.group.includes('trigger')); + }, + isTriggerNodeTooltipEmpty () : boolean { + return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false; + }, + isNodeDisabled (): boolean | undefined { + return this.node && this.node.disabled; + }, nodeType (): INodeTypeDescription | null { - return this.$store.getters.nodeType(this.data.type); + return this.data && this.$store.getters.nodeType(this.data.type); + }, + node (): INodeUi | undefined { // same as this.data but reactive.. + return this.$store.getters.nodesByName[this.name] as INodeUi | undefined; }, nodeClass (): object { return { @@ -136,9 +173,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext } }, position (): XYPosition { - const node = this.$store.getters.nodesByName[this.name] as INodeUi; // position responsive to store changes - - return node.position; + return this.node ? this.node.position : [0, 0]; }, showDisabledLinethrough(): boolean { return !!(this.data.disabled && this.nodeType && this.nodeType.inputs.length === 1 && this.nodeType.outputs.length === 1); @@ -207,13 +242,33 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext shiftOutputCount (): boolean { return !!(this.nodeType && this.nodeType.outputs.length > 2); }, - }, + shouldShowTriggerTooltip () : boolean { + return !!this.node && this.workflowRunning && this.isTriggerNode && this.isSingleActiveTriggerNode && !this.isTriggerNodeTooltipEmpty && !this.isNodeDisabled && !this.hasIssues && !this.dragging; + }, + }, watch: { isActive(newValue, oldValue) { if (!newValue && oldValue) { this.setSubtitle(); } }, + canvasOffsetPosition() { + if (this.showTriggerNodeTooltip) { + this.showTriggerNodeTooltip = false; + setTimeout(() => { + this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip; + }, 200); + } + }, + shouldShowTriggerTooltip(shouldShowTriggerTooltip) { + if (shouldShowTriggerTooltip) { + setTimeout(() => { + this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip; + }, 2500); + } else { + this.showTriggerNodeTooltip = false; + } + }, nodeRunData(newValue) { this.$emit('run', {name: this.data.name, data: newValue, waiting: !!this.waiting}); }, @@ -228,6 +283,8 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext return { isTouchActive: false, nodeSubtitle: '', + showTriggerNodeTooltip: false, + dragging: false, }; }, methods: { @@ -459,7 +516,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext border-color: var(--color-success-light); } } -