mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-30 22:02:03 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

clean up impl

Browse source
This commit is contained in:
Mutasem 2021-10-13 13:02:11 +02:00
parent 97280329b2
commit 1461a50ee5
3 changed files with 50 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/constants.ts
View file

@ -62,3 +62,5 @@ export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fB
// General
export const INSTANCE_ID_HEADER = 'n8n-instance-id';
export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';
export const JSPLUMB_FLOWCHART_STUB = 60;

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

@ -111,7 +111,7 @@ import {
} from 'jsplumb';
import { MessageBoxInputData } from 'element-ui/types/message-box';
import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE } from '@/constants';
import { JSPLUMB_FLOWCHART_STUB, NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE } from '@/constants';
import { copyPaste } from '@/components/mixins/copyPaste';
import { externalHooks } from '@/components/mixins/externalHooks';
import { genericHelpers } from '@/components/mixins/genericHelpers';
@ -132,7 +132,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue';
import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow } from './helpers';
import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays } from './helpers';
import mixins from 'vue-typed-mixins';
import { v4 as uuidv4} from 'uuid';
@ -1312,27 +1312,7 @@ export default mixins(
}
},
initNodeView () {
const connectionOverlays: OverlaySpec[] = [
[
'Arrow',
{
id: 'endpoint-arrow',
location: 1,
width: 12,
foldback: 1,
length: 10,
},
],
[
'Label',
{
id: 'drop-add-node',
label: 'Drop connection<br />to create node',
cssClass: 'drop-add-node-label',
location: 0.5,
},
],
];
this.instance.importDefaults({
Connector: ['Bezier', { curviness: 150 }],
@ -1342,7 +1322,7 @@ export default mixins(
EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
ConnectionOverlays: connectionOverlays,
ConnectionOverlays: getDefaultOverlays(),
Container: '#node-view',
});
@ -1362,17 +1342,9 @@ export default mixins(
});
this.instance.bind('connection', (info: OnConnectionBindInfo) => {
info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: 60, gap: 5, alwaysRespectStubs: false}]);
info.connection.addOverlay([
'Arrow',
{
id: 'endpoint-arrow',
location: 1,
width: 12,
foldback: 1,
length: 10,
},
]);
info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: true}]);
addEndpointArrow(info.connection);
addOrRemoveMidpointArrow(info.connection);
// @ts-ignore

43
packages/editor-ui/src/views/helpers.ts
View file

@ -1,5 +1,6 @@
import { JSPLUMB_FLOWCHART_STUB } from "@/constants";
import { INodeUi, IZoomConfig } from "@/Interface";
import { Connection } from "jsplumb";
import { Connection, OverlaySpec } from "jsplumb";
interface ICorners {
minX: number;
@ -85,10 +86,48 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
return config;
};
export const getDefaultOverlays = (): OverlaySpec[] => ([
[
'Arrow',
{
id: 'endpoint-arrow',
location: 1,
width: 12,
foldback: 1,
length: 10,
},
],
[
'Label',
{
id: 'drop-add-node',
label: 'Drop connection<br />to create node',
cssClass: 'drop-add-node-label',
location: 0.5,
},
],
]);
export const addEndpointArrow = (connection: Connection) => {
const hasArrow = !!connection.getOverlay('midpoint-arrow');
if (!hasArrow) {
connection.addOverlay([
'Arrow',
{
id: 'endpoint-arrow',
location: 1,
width: 12,
foldback: 1,
length: 10,
},
]);
}
};
export const addOrRemoveMidpointArrow = (connection: Connection) => {
const sourceEndpoint = connection.endpoints[0];
const targetEndpoint = connection.endpoints[1];
const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0];
const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= (targetEndpoint.anchor.lastReturnValue[0] - JSPLUMB_FLOWCHART_STUB);
const hasArrow = !!connection.getOverlay('midpoint-arrow');