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

fix drop position

Browse source
This commit is contained in:
Mutasem 2021-11-01 11:18:49 +01:00
parent ff3a6a832a
commit 3eb38c8178
7 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/editor-ui/src/Interface.ts
View file

@ -109,12 +109,12 @@ export interface INodeUpdatePropertiesInformation {
};
}
export type XYPositon = [number, number];
export type XYPosition = [number, number];
export type MessageType = 'success' | 'warning' | 'info' | 'error';
export interface INodeUi extends INode {
position: XYPositon;
position: XYPosition;
color?: string;
notes?: string;
issues?: INodeIssues;
@ -613,7 +613,7 @@ export interface IRootState {
lastSelectedNodeOutputIndex: number | null;
nodeIndex: Array<string | null>;
nodeTypes: INodeTypeDescription[];
nodeViewOffsetPosition: XYPositon;
nodeViewOffsetPosition: XYPosition;
nodeViewMoveInProgress: boolean;
selectedNodes: INodeUi[];
sessionId: string;
@ -679,5 +679,5 @@ export interface IRestApiContext {
export interface IZoomConfig {
scale: number;
offset: XYPositon;
offset: XYPosition;
}

4
packages/editor-ui/src/components/mixins/mouseSelect.ts
View file

@ -1,4 +1,4 @@
import { INodeUi, XYPositon } from '@/Interface';
import { INodeUi, XYPosition } from '@/Interface';
import mixins from 'vue-typed-mixins';
@ -43,7 +43,7 @@ export const mouseSelect = mixins(
}
return e.ctrlKey;
},
getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPositon {
getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
const [x, y] = getMousePosition(event);
// @ts-ignore
return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);

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

@ -1,4 +1,4 @@
import { IConnectionsUi, IEndpointOptions, INodeUi, XYPositon } from '@/Interface';
import { IConnectionsUi, IEndpointOptions, INodeUi, XYPosition } from '@/Interface';
import mixins from 'vue-typed-mixins';
@ -312,7 +312,7 @@ export const nodeBase = mixins(
// even though "start" and "drag" gets called for all. So lets do for now
// some dirty DOM query to get the new positions till I have more time to
// create a proper solution
let newNodePositon: XYPositon;
let newNodePositon: XYPosition;
moveNodes.forEach((node: INodeUi) => {
const nodeElement = `node-${this.getNodeIndex(node.name)}`;
const element = document.getElementById(nodeElement);

4
packages/editor-ui/src/components/mixins/workflowHelpers.ts
View file

@ -36,7 +36,7 @@ import {
IWorkflowData,
IWorkflowDb,
IWorkflowDataUpdate,
XYPositon,
XYPosition,
ITag,
IUpdateInformation,
} from '../../Interface';
@ -568,7 +568,7 @@ export const workflowHelpers = mixins(
// Updates the position of all the nodes that the top-left node
// is at the given position
updateNodePositions (workflowData: IWorkflowData | IWorkflowDataUpdate, position: XYPositon): void {
updateNodePositions (workflowData: IWorkflowData | IWorkflowDataUpdate, position: XYPosition): void {
if (workflowData.nodes === undefined) {
return;
}

4
packages/editor-ui/src/store.ts
View file

@ -28,7 +28,7 @@ import {
IPushDataNodeExecuteAfter,
IUpdateInformation,
IWorkflowDb,
XYPositon,
XYPosition,
IRestApiContext,
} from './Interface';
@ -739,7 +739,7 @@ export const store = new Vuex.Store({
return state.nodeIndex[index];
},
getNodeViewOffsetPosition: (state): XYPositon => {
getNodeViewOffsetPosition: (state): XYPosition => {
return state.nodeViewOffsetPosition;
},
isNodeViewMoveInProgress: (state): boolean => {

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

@ -164,7 +164,7 @@ import {
INodeUi,
IUpdateInformation,
IWorkflowDataUpdate,
XYPositon,
XYPosition,
IPushDataExecutionFinished,
ITag,
IWorkflowTemplate,
@ -188,7 +188,7 @@ const DEFAULT_START_NODE = {
position: [
DEFAULT_START_POSITION_X,
DEFAULT_START_POSITION_Y,
] as XYPositon,
] as XYPosition,
parameters: {},
};
@ -430,13 +430,13 @@ export default mixins(
createNodeActive: false,
instance: jsPlumb.getInstance(),
lastSelectedConnection: null as null | Connection,
lastClickPosition: [450, 450] as XYPositon,
lastClickPosition: [450, 450] as XYPosition,
nodeViewScale: 1,
ctrlKeyPressed: false,
stopExecutionInProgress: false,
blankRedirect: false,
credentialsUpdated: false,
newNodeInsertPosition: null as null | XYPositon,
newNodeInsertPosition: null as null | XYPosition,
};
},
beforeDestroy () {
@ -1325,7 +1325,7 @@ export default mixins(
}
if (this.newNodeInsertPosition) {
newNodeData.position = [this.newNodeInsertPosition[0], this.newNodeInsertPosition[1] - NODE_SIZE / 2];
newNodeData.position = getNewNodePosition(this.nodes, [this.newNodeInsertPosition[0], this.newNodeInsertPosition[1] - NODE_SIZE / 2]);
this.newNodeInsertPosition = null;
}
else {
@ -1867,8 +1867,8 @@ export default mixins(
newNodeData.position = getNewNodePosition(
this.nodes,
[node.position[0], node.position[1] + 150],
[0, 150],
[node.position[0], node.position[1] + 140],
[0, 140],
);
if (newNodeData.webhookId) {

26
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -1,4 +1,4 @@
import { INodeUi, IZoomConfig, XYPositon } from "@/Interface";
import { INodeUi, IZoomConfig, XYPosition } from "@/Interface";
import { Connection } from "jsplumb";
export const OVERLAY_DROP_NODE_ID = 'drop-add-node';
@ -167,7 +167,7 @@ export const getIcon = (name: string): string => {
};
const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
const canUsePosition = (position1: XYPosition, position2: XYPosition) => {
if (Math.abs(position1[0] - position2[0]) <= 100) {
if (Math.abs(position1[1] - position2[1]) <= 50) {
return false;
@ -177,12 +177,14 @@ const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
return true;
};
export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, movePosition?: XYPositon): XYPositon => {
// @ts-ignore
newPosition = newPosition.slice();
export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, movePosition?: XYPosition): XYPosition => {
const targetPosition: XYPosition = [...newPosition];
targetPosition[0] = targetPosition[0] - (targetPosition[0] % 20);
targetPosition[1] = targetPosition[1] - (targetPosition[1] % 20);
if (!movePosition) {
movePosition = [20, 20];
movePosition = [40, 40];
}
let conflictFound = false;
@ -191,22 +193,22 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, mov
conflictFound = false;
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (!canUsePosition(node.position, newPosition!)) {
if (!canUsePosition(node.position, targetPosition)) {
conflictFound = true;
break;
}
}
if (conflictFound === true) {
newPosition![0] += movePosition[0];
newPosition![1] += movePosition[1];
targetPosition[0] += movePosition[0];
targetPosition[1] += movePosition[1];
}
} while (conflictFound === true);
return newPosition!;
return targetPosition;
};
export const getMousePosition = (e: MouseEvent | TouchEvent): XYPositon => {
export const getMousePosition = (e: MouseEvent | TouchEvent): XYPosition => {
// @ts-ignore
const x = e.pageX !== undefined ? e.pageX : (e.touches && e.touches[0] && e.touches[0].pageX ? e.touches[0].pageX : 0);
// @ts-ignore
@ -215,7 +217,7 @@ export const getMousePosition = (e: MouseEvent | TouchEvent): XYPositon => {
return [x, y];
};
export const getRelativePosition = (x: number, y: number, scale: number, offset: XYPositon): XYPositon => {
export const getRelativePosition = (x: number, y: number, scale: number, offset: XYPosition): XYPosition => {
return [
(x - offset[0]) / scale,
(y - offset[1]) / scale,