make it configurable

This commit is contained in:
Mutasem 2021-10-19 10:16:52 +02:00
parent c124fb62d2
commit 82d1afcd73
2 changed files with 35 additions and 5 deletions

View file

@ -63,4 +63,9 @@ export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fB
export const INSTANCE_ID_HEADER = 'n8n-instance-id'; export const INSTANCE_ID_HEADER = 'n8n-instance-id';
export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z'; export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';
export const JSPLUMB_FLOWCHART_STUB = 50; if (!window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB')) {
window.localStorage.setItem('JSPLUMB_FLOWCHART_STUB', '50');
}
// @ts-ignore
const _JSPLUMB_FLOWCHART_STUB = parseInt(window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB'));
export const JSPLUMB_FLOWCHART_STUB = _JSPLUMB_FLOWCHART_STUB;

View file

@ -1295,11 +1295,35 @@ export default mixins(
} }
}, },
initNodeView () { initNodeView () {
if (!window.localStorage.getItem('CURVINESS')) {
window.localStorage.setItem('CURVINESS', '150');
}
// @ts-ignore
const _CURVINESS = parseInt(window.localStorage.getItem('CURVINESS'));
if (!window.localStorage.getItem('OUTLINE_STROKE_COLOR')) {
window.localStorage.setItem('OUTLINE_STROKE_COLOR', 'transparent');
}
// @ts-ignore
const _OUTLINE_STROKE_COLOR = window.localStorage.getItem('OUTLINE_STROKE_COLOR');
if (!window.localStorage.getItem('OUTLINE_STROKE_WIDTH')) {
window.localStorage.setItem('OUTLINE_STROKE_WIDTH', '12');
}
// @ts-ignore
const _OUTLINE_STROKE_WIDTH = parseInt(window.localStorage.getItem('OUTLINE_STROKE_WIDTH'));
if (!window.localStorage.getItem('ALWAYS_RESPECT_STUB')) {
window.localStorage.setItem('ALWAYS_RESPECT_STUB', 'false');
}
// @ts-ignore
const _ALWAYS_RESPECT_STUB = window.localStorage.getItem('ALWAYS_RESPECT_STUB') === 'true';
this.instance.importDefaults({ this.instance.importDefaults({
Connector: ['Bezier', { curviness: 150 }], Connector: ['Bezier', { curviness: _CURVINESS }],
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'), outlineStroke: "transparent", outlineWidth: 12}, PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark'), outlineStroke: _OUTLINE_STROKE_COLOR, outlineWidth: _OUTLINE_STROKE_WIDTH},
EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' }, EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 }, HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' }, EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
@ -1327,8 +1351,9 @@ export default mixins(
})); }));
this.instance.bind('connection', (info: OnConnectionBindInfo) => { this.instance.bind('connection', (info: OnConnectionBindInfo) => {
info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: false}]); info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: _ALWAYS_RESPECT_STUB}]);
info.connection.setPaintStyle({stroke: getStyleTokenValue('--color-foreground-dark'), strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 12}); // @ts-ignore
info.connection.setPaintStyle({stroke: getStyleTokenValue('--color-foreground-dark'), strokeWidth: 2, outlineStroke: _OUTLINE_STROKE_COLOR, outlineWidth: _OUTLINE_STROKE_WIDTH});
addEndpointArrow(info.connection); addEndpointArrow(info.connection);
showOrHideMidpointArrow(info.connection); showOrHideMidpointArrow(info.connection);