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

refactor positioning

Browse source
This commit is contained in:
Mutasem 2021-10-15 17:01:20 +02:00
parent 57dc5ca761
commit 80705f6bc8
3 changed files with 48 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,4 +63,4 @@ export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fB
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;
export const JSPLUMB_FLOWCHART_STUB = 50;

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

@ -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, addEndpointArrow, getDefaultOverlays, getIcon } from './helpers';
import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays, getIcon, getNewNodePosition } from './helpers';
import mixins from 'vue-typed-mixins';
import { v4 as uuidv4} from 'uuid';
@ -1050,7 +1050,7 @@ export default mixins(
// Fix the node position as it could be totally offscreen
// and the pasted nodes would so not be directly visible to
// the user
this.updateNodePositions(workflowData, this.getNewNodePosition());
this.updateNodePositions(workflowData, getNewNodePosition(this.nodes, this.lastClickPosition));
const data = await this.addNodesToWorkflow(workflowData);
@ -1097,50 +1097,6 @@ export default mixins(
this.$store.commit('setActiveNode', node.name);
}
},
canUsePosition (position1: XYPositon, position2: XYPositon) {
if (Math.abs(position1[0] - position2[0]) <= 100) {
if (Math.abs(position1[1] - position2[1]) <= 50) {
return false;
}
}
return true;
},
getNewNodePosition (newPosition?: XYPositon, movePosition?: XYPositon): XYPositon {
// TODO: Lates has to consider also the view position (that it creates the node where it is visible)
// Use the last click position as position for new node
if (newPosition === undefined) {
newPosition = this.lastClickPosition;
}
// @ts-ignore
newPosition = newPosition.slice();
if (!movePosition) {
movePosition = [50, 50];
}
let conflictFound = false;
let i, node;
do {
conflictFound = false;
for (i = 0; i < this.nodes.length; i++) {
node = this.nodes[i];
if (!this.canUsePosition(node.position, newPosition!)) {
conflictFound = true;
break;
}
}
if (conflictFound === true) {
newPosition![0] += movePosition[0];
newPosition![1] += movePosition[1];
}
} while (conflictFound === true);
return newPosition!;
},
getUniqueNodeName (originalName: string, additinalUsedNames?: string[]) {
// Check if node-name is unique else find one that is
additinalUsedNames = additinalUsedNames || [];
@ -1226,13 +1182,14 @@ export default mixins(
if (lastSelectedNode) {
// If a node is active then add the new node directly after the current one
// newNodeData.position = [activeNode.position[0], activeNode.position[1] + 60];
newNodeData.position = this.getNewNodePosition(
newNodeData.position = getNewNodePosition(
this.nodes,
[lastSelectedNode.position[0] + 200, lastSelectedNode.position[1]],
[100, 0],
);
} else {
// If no node is active find a free spot
newNodeData.position = this.getNewNodePosition();
newNodeData.position = getNewNodePosition(this.nodes, this.lastClickPosition);
}
// Check if node-name is unique else find one that is
@ -1710,7 +1667,8 @@ export default mixins(
// Check if node-name is unique else find one that is
newNodeData.name = this.getUniqueNodeName(newNodeData.name);
newNodeData.position = this.getNewNodePosition(
newNodeData.position = getNewNodePosition(
this.nodes,
[node.position[0], node.position[1] + 150],
[0, 150],
);

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

@ -1,5 +1,5 @@
import { JSPLUMB_FLOWCHART_STUB } from "@/constants";
import { INodeUi, IZoomConfig } from "@/Interface";
import { INodeUi, IZoomConfig, XYPositon } from "@/Interface";
import { Connection, OverlaySpec } from "jsplumb";
interface ICorners {
@ -166,3 +166,42 @@ export const getIcon = (name: string): string => {
return '';
};
const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
if (Math.abs(position1[0] - position2[0]) <= 100) {
if (Math.abs(position1[1] - position2[1]) <= 50) {
return false;
}
}
return true;
};
export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, movePosition?: XYPositon): XYPositon => {
// @ts-ignore
newPosition = newPosition.slice();
if (!movePosition) {
movePosition = [50, 50];
}
let conflictFound = false;
let i, node;
do {
conflictFound = false;
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (!canUsePosition(node.position, newPosition!)) {
conflictFound = true;
break;
}
}
if (conflictFound === true) {
newPosition![0] += movePosition[0];
newPosition![1] += movePosition[1];
}
} while (conflictFound === true);
return newPosition!;
};