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

refactor more

Browse source
This commit is contained in:
Mutasem 2021-11-04 17:03:42 +01:00
parent 4a5be0ade1
commit fd414a2c4e
1 changed files with 59 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -60,6 +60,45 @@ const anchorPositions: {
}, },
}; };
const INPUT_UUID_KEY = '-input';
const OUTPUT_UUID_KEY = '-output';
const getInputEndpointStyle = (nodeTypeData: INodeTypeDescription, color: string) => ({
width: 8,
height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20,
fill: getStyleTokenValue(color),
stroke: getStyleTokenValue(color),
lineWidth: 0,
});
const getInputNameOverlay = (label: string) => ([
'Label',
{
id: CanvasHelpers.OVERLAY_INPUT_NAME_LABEL,
location: CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION,
label: label,
cssClass: 'node-input-endpoint-label',
visible: true,
},
]);
const getOutputEndpointStyle = (nodeTypeData: INodeTypeDescription, color: string) => ({
radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
fill: getStyleTokenValue(color),
outlineStroke: 'none',
});
const getOutputNameOverlay = (label: string) => ([
'Label',
{
id: CanvasHelpers.OVERLAY_OUTPUT_NAME_LABEL,
location: [1.9, 0.5],
label: label,
cssClass: 'node-output-endpoint-label',
visible: true,
},
]);
export const nodeBase = mixins( export const nodeBase = mixins(
deviceSupportHelpers, deviceSupportHelpers,
nodeIndex, nodeIndex,
@ -92,34 +131,12 @@ export const nodeBase = mixins(
methods: { methods: {
__addInputEndpoints (node: INodeUi, nodeTypeData: INodeTypeDescription) { __addInputEndpoints (node: INodeUi, nodeTypeData: INodeTypeDescription) {
// Add Inputs // Add Inputs
let index, anchorPosition; let index;
let newEndpointData: IEndpointOptions;
const indexData: { const indexData: {
[key: string]: number; [key: string]: number;
} = {}; } = {};
nodeTypeData.inputs.forEach((inputName: string, i: number) => { nodeTypeData.inputs.forEach((inputName: string, i: number) => {
const inputData = {
uuid: '-input',
maxConnections: -1,
endpoint: 'Rectangle',
endpointStyle: {
width: 8,
height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20,
fill: getStyleTokenValue('--color-foreground-xdark'),
stroke: getStyleTokenValue('--color-foreground-xdark'),
lineWidth: 0,
},
endpointHoverStyle: {
width: 8,
height: nodeTypeData && nodeTypeData.outputs.length > 2 ? 18 : 20,
fill: getStyleTokenValue('--color-primary'),
stroke: getStyleTokenValue('--color-primary'),
lineWidth: 0,
},
dragAllowedWhenFull: true,
};
// Increment the index for inputs with current name // Increment the index for inputs with current name
if (indexData.hasOwnProperty(inputName)) { if (indexData.hasOwnProperty(inputName)) {
indexData[inputName]++; indexData[inputName]++;
@ -129,15 +146,15 @@ export const nodeBase = mixins(
index = indexData[inputName]; index = indexData[inputName];
// Get the position of the anchor depending on how many it has // Get the position of the anchor depending on how many it has
anchorPosition = anchorPositions.input[nodeTypeData.inputs.length][index]; const anchorPosition = anchorPositions.input[nodeTypeData.inputs.length][index];
newEndpointData = { const newEndpointData: IEndpointOptions = {
uuid: `${this.nodeIndex}` + inputData.uuid + index, uuid: `${this.nodeIndex}` + INPUT_UUID_KEY + index,
anchor: anchorPosition, anchor: anchorPosition,
maxConnections: inputData.maxConnections, maxConnections: -1,
endpoint: inputData.endpoint, endpoint: 'Rectangle',
endpointStyle: inputData.endpointStyle, endpointStyle: getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
endpointHoverStyle: inputData.endpointHoverStyle, endpointHoverStyle: getInputEndpointStyle(nodeTypeData, '--color-primary'),
isSource: false, isSource: false,
isTarget: !this.isReadOnly, isTarget: !this.isReadOnly,
parameters: { parameters: {
@ -145,7 +162,7 @@ export const nodeBase = mixins(
type: inputName, type: inputName,
index, index,
}, },
dragAllowedWhenFull: inputData.dragAllowedWhenFull, dragAllowedWhenFull: true,
dropOptions: { dropOptions: {
tolerance: 'touch', tolerance: 'touch',
hoverClass: 'dropHover', hoverClass: 'dropHover',
@ -155,15 +172,7 @@ export const nodeBase = mixins(
if (nodeTypeData.inputNames) { if (nodeTypeData.inputNames) {
// Apply input names if they got set // Apply input names if they got set
newEndpointData.overlays = [ newEndpointData.overlays = [
['Label', getInputNameOverlay(nodeTypeData.inputNames[index]),
{
id: CanvasHelpers.OVERLAY_INPUT_NAME_LABEL,
location: CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION,
label: nodeTypeData.inputNames[index],
cssClass: 'node-input-endpoint-label',
visible: true,
},
],
]; ];
} }
@ -186,30 +195,12 @@ export const nodeBase = mixins(
}); });
}, },
__addOutputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) { __addOutputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) {
let index, anchorPosition; let index;
let newEndpointData: IEndpointOptions;
const indexData: { const indexData: {
[key: string]: number; [key: string]: number;
} = {}; } = {};
nodeTypeData.outputs.forEach((inputName: string, i: number) => { nodeTypeData.outputs.forEach((inputName: string, i: number) => {
const inputData = {
uuid: '-output',
maxConnections: -1,
endpoint: 'Dot',
endpointStyle: {
radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
fill: getStyleTokenValue('--color-foreground-xdark'),
outlineStroke: 'none',
},
endpointHoverStyle: {
radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
fill: getStyleTokenValue('--color-primary'),
outlineStroke: 'none',
},
dragAllowedWhenFull: true,
};
// Increment the index for outputs with current name // Increment the index for outputs with current name
if (indexData.hasOwnProperty(inputName)) { if (indexData.hasOwnProperty(inputName)) {
indexData[inputName]++; indexData[inputName]++;
@ -219,15 +210,15 @@ export const nodeBase = mixins(
index = indexData[inputName]; index = indexData[inputName];
// Get the position of the anchor depending on how many it has // Get the position of the anchor depending on how many it has
anchorPosition = anchorPositions.output[nodeTypeData.outputs.length][index]; const anchorPosition = anchorPositions.output[nodeTypeData.outputs.length][index];
newEndpointData = { const newEndpointData: IEndpointOptions = {
uuid: `${this.nodeIndex}` + inputData.uuid + index, uuid: `${this.nodeIndex}` + OUTPUT_UUID_KEY + index,
anchor: anchorPosition, anchor: anchorPosition,
maxConnections: inputData.maxConnections, maxConnections: -1,
endpoint: inputData.endpoint, endpoint: 'Dot',
endpointStyle: inputData.endpointStyle, endpointStyle: getOutputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
endpointHoverStyle: inputData.endpointHoverStyle, endpointHoverStyle: getOutputEndpointStyle(nodeTypeData, '--color-primary'),
isSource: true, isSource: true,
isTarget: false, isTarget: false,
enabled: !this.isReadOnly, enabled: !this.isReadOnly,
@ -236,22 +227,14 @@ export const nodeBase = mixins(
type: inputName, type: inputName,
index, index,
}, },
dragAllowedWhenFull: inputData.dragAllowedWhenFull, dragAllowedWhenFull: false,
dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }], dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }],
}; };
if (nodeTypeData.outputNames) { if (nodeTypeData.outputNames) {
// Apply output names if they got set // Apply output names if they got set
newEndpointData.overlays = [ newEndpointData.overlays = [
['Label', getOutputNameOverlay(nodeTypeData.outputNames[index]),
{
id: CanvasHelpers.OVERLAY_OUTPUT_NAME_LABEL,
location: [1.9, 0.5],
label: nodeTypeData.outputNames[index],
cssClass: 'node-output-endpoint-label',
visible: true,
},
],
]; ];
} }