mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add line through disabled nodes

Browse source
This commit is contained in:
Mutasem 2021-11-10 14:29:01 +01:00
parent 0701642c52
commit 085d178c22
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/editor-ui/src/components/Node.vue
View file

@ -44,12 +44,13 @@
</div> </div>
<div class="node-description"> <div class="node-description">
<div class="node-name" :title="data.name"> <div class="node-name" :title="data.name">
<p>{{data.name}}</p> <p>{{ nodeTitle }}</p>
</div> </div>
<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle"> <div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
{{nodeSubtitle}} {{nodeSubtitle}}
</div> </div>
</div> </div>
<div class="disabled-linethrough" v-if="showDisabledLinethrough"></div>
</div> </div>
</template> </template>
@ -155,6 +156,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return node.position; return node.position;
}, },
showDisabledLinethrough(): boolean {
return !!(this.data.disabled && this.nodeType && this.nodeType.inputs.length === 1 && this.nodeType.outputs.length === 1);
},
nodePosition (): object { nodePosition (): object {
const returnStyles: { const returnStyles: {
[key: string]: string; [key: string]: string;
@ -165,6 +169,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return returnStyles; return returnStyles;
}, },
nodeTitle (): string {
return this.data.disabled ? `${this.data.name} (Disabled)` : this.data.name;
},
waiting (): string | undefined { waiting (): string | undefined {
const workflowExecution = this.$store.getters.getWorkflowExecution; const workflowExecution = this.$store.getters.getWorkflowExecution;
@ -450,14 +457,22 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
width: 116px !important; width: 116px !important;
} }
.disabled-linethrough {
border: 1px solid var(--color-foreground-dark);
position: absolute;
top: 49px;
left: -3px;
width: 111px;
}
</style> </style>
<style lang="scss"> <style lang="scss">
/** node */ /** node */
.node-wrapper { .node-wrapper > * {
z-index: 1; z-index: 1;
&.selected { &.selected > * {
z-index: 2; z-index: 2;
} }
} }
@ -484,6 +499,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
z-index: 6; z-index: 6;
} }
.disabled-linethrough {
z-index: 6;
}
.jtk-endpoint.jtk-hover { .jtk-endpoint.jtk-hover {
z-index: 7; z-index: 7;
} }

2
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -45,7 +45,7 @@ export const DEFAULT_START_NODE = {
export const CONNECTOR_FLOWCHART_TYPE = ['N8nFlowchart', { export const CONNECTOR_FLOWCHART_TYPE = ['N8nFlowchart', {
cornerRadius: 4, cornerRadius: 4,
stub: JSPLUMB_FLOWCHART_STUB + 10, stub: JSPLUMB_FLOWCHART_STUB + 10,
gap: 5, gap: 4,
alwaysRespectStubs: false, alwaysRespectStubs: false,
loopbackVerticalLength: NODE_SIZE, // length of vertical segment when looping loopbackVerticalLength: NODE_SIZE, // length of vertical segment when looping
loopbackMinimum: 140, // minimum length before flowchart loops around loopbackMinimum: 140, // minimum length before flowchart loops around