mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
✨ Workflow canvas revamp (#2388)
* bring back overrides * fix input output label positions * simply update label positions * refactor a bunch * update min x to show items * hide overlay on connection * only delete target connection, add maximum to push nodes out * rename const * rename const * set new insert position * fix insert behavior * update position handling * show arrow along with label * update connector * set endpoint styles * update pattern * push nodes up / down in case of if node * set position in switch * only one action at a time * add custom flow chart type * select start node by default when opening new workflow * add enter delay * fix delete bug * change connection type * add offset for if/switch/merge * fix gap * fix drag issue * implement new states * update disabled state * add selected state * make selects faster * update positioning * truncate when selected * remove offset for actions * fix icon scaling * refactor js plumb * fix looping behavior at close distance * lock version * change background to dots * update endpoints styling * increase spacing * udpate node z-index * fix output label positions * fix output label positions * reset location * add label offset * update border radius * fix height issue * fix parallaxing issue * fix zoomout issue * add success z-index * clean up js file * add package lock * fix z-index bug * update dot grid * update zoom level * set values, increase grid size * fix drop position * prevent duplicate connections * fix stub * use localstorage overrides for colors * add colors to system * revert no longer needed changes * revert no longer needed changes * add canvas colors * add canvas colors * use variable for id * force type * refactor helpers * add label constants * refactor func * refactor * fix * refactor * clean up css * refactor setzoom level * refactor * refactor * refactor func * remove scope * remove localstorage caching * clean up imports * update zero case * add delete connection * update selected state * add base type, remove straight line * add stub offset back * rename param * add label offset * update font size of items * move up label * fix error state while executing * disrespect stubs * check for errors * refactor position * clean up extra space * make entire node connectable * Revert "make entire node connectable" e304f7c5b8ff1b41268450c60ca4bc3b2ada5d4a * always show border * add border to zoom buttons * update spacing * update colors * allow connecting to entire node * fix pull conn active * two line names * apply select to all lines * increase input margin * override target pos * reset conn after pull * fix types * update orientation * fix up connectors snapping * hide arrow on pull * update overrides for connectors * change text * update pull colors * set to 1 line when selected * fix executions bug * build * refactor node component * remove comment * refactor more * remove prop * fix build issue * fix input drag bug in executions * reset offset * update select background * handle issue when endpoints are not set * fix connection aborted issue * add try catch to help show errors * wrap bind with try/catch * set default styles * reset pos despite zoom * add more checks * clean up impl * update icon * handle unknown types * hide items on init * fix importing unknown types with credentials * change opacity * push up item label * update color * update label class and colors * add to drop distance * fix z-index to match node * disable eslint * fix lasso tool selection * update background color * update waiting state * update tooltip positions * update wait node border * fix selection bug mostly * if selected, move above other nodes * add line through disabled nodes * remove node color option * move label above connection * success color for line through * update options index * hide waiting icon when disabled * fix gmail icon * refactor icons * clear execution data on disable/delete * fix selected node * fix executing behavior * optional __meta * set grid size * remove default color * remove node color * add comments * comments * add comments * remove empty space * update comment * refactor uuids * fix type issue * Revert "fix type issue" 9523b34f9604f75253ae0631f29fc27267a99d78 * Revert "fix type issue" 9523b34f9604f75253ae0631f29fc27267a99d78 * Revert "refactor uuids" 07f6848065cb9a98475fddb8330846106f9e70ad * fix build issues * refactor * update uuid * child nodes * skip nodes behind when pushing in loop * shift output icon for switch node * don't show output if waiting * waiting on init * build * change to bezier * revert connector change * add bezier type * fix snapping * clean up impl * refactor func * make const * rename type * refactor to simplify * Revert "refactor to simplify" 2db0ed504c752c33de975370d86a83a04ffcda14 * enable flowchart mode * clean up flowchart type * refactor type * merge types * configure curviness * set in localstorage * fix straight line arrow bug * show arrow when pulling * refactor / simplify * fix target gap in bezier * refactor target gap * add comments * add comment * fix dragging connections * fix bug when moving connection * update comment * rename file * update values * update minor * update straight line box * clean up conn types * clean up z-indexes * move color filters to node icon * update background color * update to use grid size value * fix endpoint offsets * set yspan range lower * remove overlays when moving conn * prevent unwanted connections * fix messed up connections * remove console log * clear execution issues on workflow run * update corner radius * fix drag/delete bug * increase offset * update disabled state * address comments * refactor * refactor func * ⚡ Add full license text to N8nCustomConnectorType.js Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="node-icon-wrapper" :style="iconStyleData" :class="{shrink: isSvgIcon && shrink, full: !shrink}">
|
||||
<div class="node-icon-wrapper" :style="iconStyleData">
|
||||
<div v-if="nodeIconData !== null" class="icon">
|
||||
<img v-if="nodeIconData.type === 'file'" :src="nodeIconData.fileBuffer || nodeIconData.path" style="max-width: 100%; max-height: 100%;" />
|
||||
<font-awesome-icon v-else :icon="nodeIconData.icon || nodeIconData.path" />
|
||||
<img v-if="nodeIconData.type === 'file'" :src="nodeIconData.fileBuffer || nodeIconData.path" :style="imageStyleData" />
|
||||
<font-awesome-icon v-else :icon="nodeIconData.icon || nodeIconData.path" :style="fontStyleData" />
|
||||
</div>
|
||||
<div v-else class="node-icon-placeholder">
|
||||
{{nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
|
||||
@@ -12,39 +12,65 @@
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { IVersionNode } from '@/Interface';
|
||||
import { INodeTypeDescription } from 'n8n-workflow';
|
||||
import Vue from 'vue';
|
||||
|
||||
interface NodeIconData {
|
||||
type: string;
|
||||
path: string;
|
||||
path?: string;
|
||||
fileExtension?: string;
|
||||
fileBuffer?: string;
|
||||
}
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'NodeIcon',
|
||||
props: [
|
||||
'nodeType',
|
||||
'size',
|
||||
'shrink',
|
||||
'disabled',
|
||||
'circle',
|
||||
],
|
||||
props: {
|
||||
nodeType: {},
|
||||
size: {
|
||||
type: Number,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
iconStyleData (): object {
|
||||
const color = this.disabled ? '#ccc' : this.nodeType.defaults && this.nodeType.defaults.color;
|
||||
const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
|
||||
const color = nodeType ? nodeType.defaults && nodeType!.defaults.color : '';
|
||||
if (!this.size) {
|
||||
return {color};
|
||||
}
|
||||
|
||||
const size = parseInt(this.size, 10);
|
||||
|
||||
return {
|
||||
color,
|
||||
width: size + 'px',
|
||||
height: size + 'px',
|
||||
'font-size': Math.floor(parseInt(this.size, 10) * 0.6) + 'px',
|
||||
'line-height': size + 'px',
|
||||
'border-radius': this.circle ? '50%': '4px',
|
||||
width: this.size + 'px',
|
||||
height: this.size + 'px',
|
||||
'font-size': this.size + 'px',
|
||||
'line-height': this.size + 'px',
|
||||
'border-radius': this.circle ? '50%': '2px',
|
||||
...(this.disabled && {
|
||||
color: '#ccc',
|
||||
'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
|
||||
'filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
|
||||
}),
|
||||
};
|
||||
},
|
||||
fontStyleData (): object {
|
||||
return {
|
||||
'max-width': this.size + 'px',
|
||||
};
|
||||
},
|
||||
imageStyleData (): object {
|
||||
return {
|
||||
width: '100%',
|
||||
'max-width': '100%',
|
||||
'max-height': '100%',
|
||||
};
|
||||
},
|
||||
isSvgIcon (): boolean {
|
||||
@@ -54,26 +80,27 @@ export default Vue.extend({
|
||||
return false;
|
||||
},
|
||||
nodeIconData (): null | NodeIconData {
|
||||
if (this.nodeType === null) {
|
||||
const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
|
||||
if (nodeType === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (this.nodeType.iconData) {
|
||||
return this.nodeType.iconData;
|
||||
if ((nodeType as IVersionNode).iconData) {
|
||||
return (nodeType as IVersionNode).iconData;
|
||||
}
|
||||
|
||||
const restUrl = this.$store.getters.getRestUrl;
|
||||
|
||||
if (this.nodeType.icon) {
|
||||
if (nodeType.icon) {
|
||||
let type, path;
|
||||
[type, path] = this.nodeType.icon.split(':');
|
||||
[type, path] = nodeType.icon.split(':');
|
||||
const returnData: NodeIconData = {
|
||||
type,
|
||||
path,
|
||||
};
|
||||
|
||||
if (type === 'file') {
|
||||
returnData.path = restUrl + '/node-icon/' + this.nodeType.name;
|
||||
returnData.path = restUrl + '/node-icon/' + nodeType.name;
|
||||
returnData.fileExtension = path.split('.').slice(-1).join();
|
||||
}
|
||||
|
||||
@@ -90,7 +117,7 @@ export default Vue.extend({
|
||||
.node-icon-wrapper {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
color: #444;
|
||||
line-height: 26px;
|
||||
font-size: 1.1em;
|
||||
@@ -99,7 +126,7 @@ export default Vue.extend({
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
&.full .icon {
|
||||
.icon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -108,10 +135,6 @@ export default Vue.extend({
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.shrink .icon {
|
||||
margin: 0.24em;
|
||||
}
|
||||
|
||||
.node-icon-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user