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

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 type MessageType = 'success' | 'warning' | 'info' | 'error';
export interface INodeUi extends INode { export interface INodeUi extends INode {
position: XYPositon; position: XYPosition;
color?: string; color?: string;
notes?: string; notes?: string;
issues?: INodeIssues; issues?: INodeIssues;
@ -613,7 +613,7 @@ export interface IRootState {
lastSelectedNodeOutputIndex: number | null; lastSelectedNodeOutputIndex: number | null;
nodeIndex: Array<string | null>; nodeIndex: Array<string | null>;
nodeTypes: INodeTypeDescription[]; nodeTypes: INodeTypeDescription[];
nodeViewOffsetPosition: XYPositon; nodeViewOffsetPosition: XYPosition;
nodeViewMoveInProgress: boolean; nodeViewMoveInProgress: boolean;
selectedNodes: INodeUi[]; selectedNodes: INodeUi[];
sessionId: string; sessionId: string;
@ -679,5 +679,5 @@ export interface IRestApiContext {
export interface IZoomConfig { export interface IZoomConfig {
scale: number; 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'; import mixins from 'vue-typed-mixins';
@ -43,7 +43,7 @@ export const mouseSelect = mixins(
} }
return e.ctrlKey; return e.ctrlKey;
}, },
getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPositon { getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
const [x, y] = getMousePosition(event); const [x, y] = getMousePosition(event);
// @ts-ignore // @ts-ignore
return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition); 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'; 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 // 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 // some dirty DOM query to get the new positions till I have more time to
// create a proper solution // create a proper solution
let newNodePositon: XYPositon; let newNodePositon: XYPosition;
moveNodes.forEach((node: INodeUi) => { moveNodes.forEach((node: INodeUi) => {
const nodeElement = `node-${this.getNodeIndex(node.name)}`; const nodeElement = `node-${this.getNodeIndex(node.name)}`;
const element = document.getElementById(nodeElement); const element = document.getElementById(nodeElement);

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

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

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

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

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

@ -164,7 +164,7 @@ import {
INodeUi, INodeUi,
IUpdateInformation, IUpdateInformation,
IWorkflowDataUpdate, IWorkflowDataUpdate,
XYPositon, XYPosition,
IPushDataExecutionFinished, IPushDataExecutionFinished,
ITag, ITag,
IWorkflowTemplate, IWorkflowTemplate,
@ -188,7 +188,7 @@ const DEFAULT_START_NODE = {
position: [ position: [
DEFAULT_START_POSITION_X, DEFAULT_START_POSITION_X,
DEFAULT_START_POSITION_Y, DEFAULT_START_POSITION_Y,
] as XYPositon, ] as XYPosition,
parameters: {}, parameters: {},
}; };
@ -430,13 +430,13 @@ export default mixins(
createNodeActive: false, createNodeActive: false,
instance: jsPlumb.getInstance(), instance: jsPlumb.getInstance(),
lastSelectedConnection: null as null | Connection, lastSelectedConnection: null as null | Connection,
lastClickPosition: [450, 450] as XYPositon, lastClickPosition: [450, 450] as XYPosition,
nodeViewScale: 1, nodeViewScale: 1,
ctrlKeyPressed: false, ctrlKeyPressed: false,
stopExecutionInProgress: false, stopExecutionInProgress: false,
blankRedirect: false, blankRedirect: false,
credentialsUpdated: false, credentialsUpdated: false,
newNodeInsertPosition: null as null | XYPositon, newNodeInsertPosition: null as null | XYPosition,
}; };
}, },
beforeDestroy () { beforeDestroy () {
@ -1325,7 +1325,7 @@ export default mixins(
} }
if (this.newNodeInsertPosition) { 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; this.newNodeInsertPosition = null;
} }
else { else {
@ -1867,8 +1867,8 @@ export default mixins(
newNodeData.position = getNewNodePosition( newNodeData.position = getNewNodePosition(
this.nodes, this.nodes,
[node.position[0], node.position[1] + 150], [node.position[0], node.position[1] + 140],
[0, 150], [0, 140],
); );
if (newNodeData.webhookId) { 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"; import { Connection } from "jsplumb";
export const OVERLAY_DROP_NODE_ID = 'drop-add-node'; 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[0] - position2[0]) <= 100) {
if (Math.abs(position1[1] - position2[1]) <= 50) { if (Math.abs(position1[1] - position2[1]) <= 50) {
return false; return false;
@ -177,12 +177,14 @@ const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
return true; return true;
}; };
export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, movePosition?: XYPositon): XYPositon => { export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPosition, movePosition?: XYPosition): XYPosition => {
// @ts-ignore const targetPosition: XYPosition = [...newPosition];
newPosition = newPosition.slice();
targetPosition[0] = targetPosition[0] - (targetPosition[0] % 20);
targetPosition[1] = targetPosition[1] - (targetPosition[1] % 20);
if (!movePosition) { if (!movePosition) {
movePosition = [20, 20]; movePosition = [40, 40];
} }
let conflictFound = false; let conflictFound = false;
@ -191,22 +193,22 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, mov
conflictFound = false; conflictFound = false;
for (i = 0; i < nodes.length; i++) { for (i = 0; i < nodes.length; i++) {
node = nodes[i]; node = nodes[i];
if (!canUsePosition(node.position, newPosition!)) { if (!canUsePosition(node.position, targetPosition)) {
conflictFound = true; conflictFound = true;
break; break;
} }
} }
if (conflictFound === true) { if (conflictFound === true) {
newPosition![0] += movePosition[0]; targetPosition[0] += movePosition[0];
newPosition![1] += movePosition[1]; targetPosition[1] += movePosition[1];
} }
} while (conflictFound === true); } while (conflictFound === true);
return newPosition!; return targetPosition;
}; };
export const getMousePosition = (e: MouseEvent | TouchEvent): XYPositon => { export const getMousePosition = (e: MouseEvent | TouchEvent): XYPosition => {
// @ts-ignore // @ts-ignore
const x = e.pageX !== undefined ? e.pageX : (e.touches && e.touches[0] && e.touches[0].pageX ? e.touches[0].pageX : 0); const x = e.pageX !== undefined ? e.pageX : (e.touches && e.touches[0] && e.touches[0].pageX ? e.touches[0].pageX : 0);
// @ts-ignore // @ts-ignore
@ -215,7 +217,7 @@ export const getMousePosition = (e: MouseEvent | TouchEvent): XYPositon => {
return [x, y]; 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 [ return [
(x - offset[0]) / scale, (x - offset[0]) / scale,
(y - offset[1]) / scale, (y - offset[1]) / scale,