add line through disabled nodes

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

View file

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

View file

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