mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-20 19:32:15 +00:00
b780436a6b
## Summary - Refactor usage of `setSuspendDrawing`, removing it from loops and only calling it after batch operations are done - Batch adding of nodes to improve copy/paste and workflow load performance - Cache i18n calls - Debounce connections dragging handler if there are more than 20 nodes ## Related tickets and issues > Include links to **Linear ticket** or Github issue or Community forum post. Important in order to close *automatically* and provide context to reviewers. - https://community.n8n.io/t/slow-ui-in-big-scenarios/33830/8 --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import { registerEndpointRenderer, svg } from '@jsplumb/browser-ui';
|
|
import { N8nAddInputEndpoint } from './N8nAddInputEndpointType';
|
|
|
|
export const register = () => {
|
|
registerEndpointRenderer<N8nAddInputEndpoint>(N8nAddInputEndpoint.type, {
|
|
makeNode: (endpointInstance: N8nAddInputEndpoint) => {
|
|
const xOffset = 1;
|
|
const lineYOffset = -2;
|
|
const width = endpointInstance.params.width;
|
|
const height = endpointInstance.params.height;
|
|
const unconnectedDiamondSize = width / 2;
|
|
const unconnectedDiamondWidth = unconnectedDiamondSize * Math.sqrt(2);
|
|
const unconnectedPlusStroke = 2;
|
|
const unconnectedPlusSize = width - 2 * unconnectedPlusStroke;
|
|
|
|
const sizeDifference = (unconnectedPlusSize - unconnectedDiamondWidth) / 2;
|
|
|
|
const container = svg.node('g', {
|
|
style: `--svg-color: var(--endpoint-svg-color, var(${endpointInstance.params.color}))`,
|
|
width,
|
|
height,
|
|
});
|
|
|
|
const unconnectedGroup = svg.node('g', { class: 'add-input-endpoint-unconnected' });
|
|
const unconnectedLine = svg.node('rect', {
|
|
x: xOffset / 2 + unconnectedDiamondWidth / 2 + sizeDifference,
|
|
y: unconnectedDiamondWidth + lineYOffset,
|
|
width: 2,
|
|
height: height - unconnectedDiamondWidth - unconnectedPlusSize,
|
|
'stroke-width': 0,
|
|
class: 'add-input-endpoint-line',
|
|
});
|
|
const unconnectedPlusGroup = svg.node('g', {
|
|
transform: `translate(${xOffset / 2}, ${height - unconnectedPlusSize + lineYOffset})`,
|
|
});
|
|
const plusRectangle = svg.node('rect', {
|
|
x: 1,
|
|
y: 1,
|
|
rx: 3,
|
|
'stroke-width': unconnectedPlusStroke,
|
|
fillOpacity: 0,
|
|
height: unconnectedPlusSize,
|
|
width: unconnectedPlusSize,
|
|
class: 'add-input-endpoint-plus-rectangle',
|
|
});
|
|
const plusIcon = svg.node('path', {
|
|
transform: `scale(${width / 24})`,
|
|
d: 'm15.40655,9.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z',
|
|
class: 'add-input-endpoint-plus-icon',
|
|
});
|
|
|
|
unconnectedPlusGroup.appendChild(plusRectangle);
|
|
unconnectedPlusGroup.appendChild(plusIcon);
|
|
unconnectedGroup.appendChild(unconnectedLine);
|
|
unconnectedGroup.appendChild(unconnectedPlusGroup);
|
|
|
|
const defaultGroup = svg.node('g', { class: 'add-input-endpoint-default' });
|
|
const defaultDiamond = svg.node('rect', {
|
|
x: xOffset + sizeDifference + unconnectedPlusStroke,
|
|
y: 0,
|
|
'stroke-width': 0,
|
|
width: unconnectedDiamondSize,
|
|
height: unconnectedDiamondSize,
|
|
transform: `translate(${unconnectedDiamondWidth / 2}, 0) rotate(45)`,
|
|
class: 'add-input-endpoint-diamond',
|
|
});
|
|
|
|
defaultGroup.appendChild(defaultDiamond);
|
|
|
|
container.appendChild(unconnectedGroup);
|
|
container.appendChild(defaultGroup);
|
|
|
|
endpointInstance.setVisible(false);
|
|
|
|
return container;
|
|
},
|
|
updateNode: (endpointInstance: N8nAddInputEndpoint) => {},
|
|
});
|
|
};
|