update position handling

packages/editor-ui/src/components/mixins/mouseSelect.ts

@@ -1,9 +1,10 @@
-import { INodeUi } from '@/Interface';
+import { INodeUi, XYPositon } from '@/Interface';
 
 import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
+import { getMousePosition, getRelativePosition } from '@/views/canvasHelpers';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -42,23 +43,14 @@ export const mouseSelect = mixins(
 			}
 			return e.ctrlKey;
 		},
-		/**
+		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPositon {
-		 * Gets mouse position within the node view. Both node view offset and scale (zoom) are considered when
+			const [x, y] = getMousePosition(event);
-		 * calculating position.
-		 *
-		 * @param event - mouse event within node view
-		 */
-		getMousePositionWithinNodeView (event: MouseEvent) {
 			// @ts-ignore
-			const nodeViewScale = this.nodeViewScale;
+			return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
-			const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
-			return {
-				x: (event.pageX - offsetPosition[0]) / nodeViewScale,
-				y: (event.pageY - offsetPosition[1]) / nodeViewScale,
-			};
 		},
 		showSelectBox (event: MouseEvent) {
-			this.selectBox = Object.assign(this.selectBox, this.getMousePositionWithinNodeView(event));
+			const [x, y] = this.getMousePositionWithinNodeView(event);
+			this.selectBox = Object.assign(this.selectBox, {x, y});
 
 			// @ts-ignore
 			this.selectBox.style.left = this.selectBox.x + 'px';
@@ -90,7 +82,7 @@ export const mouseSelect = mixins(
 			this.selectActive = false;
 		},
 		getSelectionBox (event: MouseEvent) {
-			const {x, y} = this.getMousePositionWithinNodeView(event);
+			const [x, y] = this.getMousePositionWithinNodeView(event);
 			return {
 				// @ts-ignore
 				x: Math.min(x, this.selectBox.x),

packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts

@@ -3,6 +3,7 @@ import mixins from 'vue-typed-mixins';
 import normalizeWheel from 'normalize-wheel';
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
+import { getMousePosition } from '@/views/canvasHelpers';
 
 export const moveNodeWorkflow = mixins(
 	deviceSupportHelpers,
@@ -15,29 +16,18 @@ export const moveNodeWorkflow = mixins(
 	},
 
 	methods: {
-		getMousePosition(e: MouseEvent | TouchEvent) {
-			// @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
-			const y = e.pageY !== undefined ? e.pageY : (e.touches && e.touches[0] && e.touches[0].pageY ? e.touches[0].pageY : 0);
-
-			return {
-				x,
-				y,
-			};
-		},
 		moveWorkflow (e: MouseEvent) {
 			const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
 
-			const position = this.getMousePosition(e);
+			const [x, y] = getMousePosition(e);
 
-			const nodeViewOffsetPositionX = offsetPosition[0] + (position.x - this.moveLastPosition[0]);
+			const nodeViewOffsetPositionX = offsetPosition[0] + (x - this.moveLastPosition[0]);
-			const nodeViewOffsetPositionY = offsetPosition[1] + (position.y - this.moveLastPosition[1]);
+			const nodeViewOffsetPositionY = offsetPosition[1] + (y - this.moveLastPosition[1]);
 			this.$store.commit('setNodeViewOffsetPosition', {newOffset: [nodeViewOffsetPositionX, nodeViewOffsetPositionY]});
 
 			// Update the last position
-			this.moveLastPosition[0] = position.x;
+			this.moveLastPosition[0] = x;
-			this.moveLastPosition[1] = position.y;
+			this.moveLastPosition[1] = y;
 		},
 		mouseDownMoveWorkflow (e: MouseEvent) {
 			if (this.isCtrlKeyPressed(e) === false) {
@@ -53,10 +43,10 @@ export const moveNodeWorkflow = mixins(
 
 			this.$store.commit('setNodeViewMoveInProgress', true);
 
-			const position = this.getMousePosition(e);
+			const [x, y] = getMousePosition(e);
 
-			this.moveLastPosition[0] = position.x;
+			this.moveLastPosition[0] = x;
-			this.moveLastPosition[1] = position.y;
+			this.moveLastPosition[1] = y;
 
 			// @ts-ignore
 			this.$el.addEventListener('mousemove', this.mouseMoveNodeWorkflow);

packages/editor-ui/src/views/NodeView.vue

@@ -135,7 +135,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, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideOverlay, showOrHideItemsLabel, showOverlay, OVERLAY_ENDPOINT_ARROW_ID, OVERLAY_MIDPOINT_ARROW_ID, OVERLAY_DROP_NODE_ID, OVERLAY_RUN_ITEMS_ID, OVERLAY_CONNECTION_ACTIONS_ID, getConnectorLengths } from './canvasHelpers';
+import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideOverlay, showOrHideItemsLabel, showOverlay, OVERLAY_ENDPOINT_ARROW_ID, OVERLAY_MIDPOINT_ARROW_ID, OVERLAY_DROP_NODE_ID, OVERLAY_RUN_ITEMS_ID, OVERLAY_CONNECTION_ACTIONS_ID, getConnectorLengths, getRelativePosition, getMousePosition } from './canvasHelpers';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
@@ -625,10 +625,7 @@ export default mixins(
 			},
 			mouseDown (e: MouseEvent | TouchEvent) {
 				// Save the location of the mouse click
-				const position = this.getMousePosition(e);
+				this.lastClickPosition = this.getMousePositionWithinNodeView(e);
-				const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
-				this.lastClickPosition[0] = position.x - offsetPosition[0];
-				this.lastClickPosition[1] = position.y - offsetPosition[1];
 
 				this.mouseDownMouseSelect(e as MouseEvent);
 				this.mouseDownMoveWorkflow(e as MouseEvent);
@@ -1664,7 +1661,7 @@ export default mixins(
 					};
 
 					const onMouseUp = (e: MouseEvent) => {
-						this.newNodeInsertPosition = [e.pageX, e.pageY];
+						this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
 						window.removeEventListener('mousemove', onMouseMove);
 						window.removeEventListener('mouseup', onMouseUp);
 					};

packages/editor-ui/src/views/canvasHelpers.ts

@@ -205,3 +205,19 @@ export const getNewNodePosition = (nodes: INodeUi[], newPosition: XYPositon, mov
 
 	return newPosition!;
 };
+
+export const getMousePosition = (e: MouseEvent | TouchEvent): XYPositon => {
+	// @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
+	const y = e.pageY !== undefined ? e.pageY : (e.touches && e.touches[0] && e.touches[0].pageY ? e.touches[0].pageY : 0);
+
+	return [x, y];
+};
+
+export const getRelativePosition = (x: number, y: number, scale: number, offset: XYPositon): XYPositon => {
+	return [
+		(x - offset[0]) / scale,
+		(y - offset[1]) / scale,
+	];
+};