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

set endpoint styles

Browse source
This commit is contained in:
Mutasem 2021-10-22 12:28:38 +02:00
parent 8a3ff4cdd6
commit f646019e1e
3 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/editor-ui/src/Interface.ts
View file

@ -79,6 +79,7 @@ export interface IEndpointOptions {
dragProxy?: any; // tslint:disable-line:no-any dragProxy?: any; // tslint:disable-line:no-any
endpoint?: string; endpoint?: string;
endpointStyle?: object; endpointStyle?: object;
endpointHoverStyle?: object;
isSource?: boolean; isSource?: boolean;
isTarget?: boolean; isTarget?: boolean;
maxConnections?: number; maxConnections?: number;

15
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -5,6 +5,7 @@ import mixins from 'vue-typed-mixins';
import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers'; import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
import { nodeIndex } from '@/components/mixins/nodeIndex'; import { nodeIndex } from '@/components/mixins/nodeIndex';
import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE } from '@/constants'; import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE } from '@/constants';
import { getStyleTokenValue } from '../helpers';
export const nodeBase = mixins( export const nodeBase = mixins(
deviceSupportHelpers, deviceSupportHelpers,
@ -79,6 +80,13 @@ export const nodeBase = mixins(
stroke: '#777', stroke: '#777',
lineWidth: 0, lineWidth: 0,
}, },
endpointHoverStyle: {
width: nodeTypeData && nodeTypeData.outputs.length > 2 ? 9 : 10,
height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 24,
fill: getStyleTokenValue('--color-primary'),
stroke: getStyleTokenValue('--color-primary'),
lineWidth: 0,
},
dragAllowedWhenFull: true, dragAllowedWhenFull: true,
}, },
output: { output: {
@ -90,6 +98,11 @@ export const nodeBase = mixins(
fill: '#555', fill: '#555',
outlineStroke: 'none', outlineStroke: 'none',
}, },
endpointHoverStyle: {
radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 11,
fill: getStyleTokenValue('--color-primary'),
outlineStroke: 'none',
},
dragAllowedWhenFull: true, dragAllowedWhenFull: true,
}, },
}, },
@ -175,6 +188,7 @@ export const nodeBase = mixins(
maxConnections: inputData.maxConnections, maxConnections: inputData.maxConnections,
endpoint: inputData.endpoint, endpoint: inputData.endpoint,
endpointStyle: inputData.endpointStyle, endpointStyle: inputData.endpointStyle,
endpointHoverStyle: inputData.endpointHoverStyle,
isSource: false, isSource: false,
isTarget: !this.isReadOnly, isTarget: !this.isReadOnly,
parameters: { parameters: {
@ -240,6 +254,7 @@ export const nodeBase = mixins(
maxConnections: inputData.maxConnections, maxConnections: inputData.maxConnections,
endpoint: inputData.endpoint, endpoint: inputData.endpoint,
endpointStyle: inputData.endpointStyle, endpointStyle: inputData.endpointStyle,
endpointHoverStyle: inputData.endpointHoverStyle,
isSource: !this.isReadOnly, isSource: !this.isReadOnly,
isTarget: false, isTarget: false,
parameters: { parameters: {

2
packages/editor-ui/src/views/NodeView.vue
View file

@ -1440,9 +1440,7 @@ export default mixins(
Endpoint: ['Dot', { radius: 5 }], Endpoint: ['Dot', { radius: 5 }],
DragOptions: { cursor: 'pointer', zIndex: 5000 }, DragOptions: { cursor: 'pointer', zIndex: 5000 },
PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')}, PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')},
EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 }, HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS, ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
Container: '#node-view', Container: '#node-view',
}); });