diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts index 7ead1a0989..d1729c03e5 100644 --- a/packages/editor-ui/src/components/mixins/mouseSelect.ts +++ b/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; }, - /** - * Gets mouse position within the node view. Both node view offset and scale (zoom) are considered when - * calculating position. - * - * @param event - mouse event within node view - */ - getMousePositionWithinNodeView (event: MouseEvent) { + getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPositon { + const [x, y] = getMousePosition(event); // @ts-ignore - const nodeViewScale = this.nodeViewScale; - const offsetPosition = this.$store.getters.getNodeViewOffsetPosition; - return { - x: (event.pageX - offsetPosition[0]) / nodeViewScale, - y: (event.pageY - offsetPosition[1]) / nodeViewScale, - }; + return getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition); }, 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), diff --git a/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts index c5472ff882..544c0220c2 100644 --- a/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts +++ b/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 nodeViewOffsetPositionY = offsetPosition[1] + (position.y - this.moveLastPosition[1]); + const nodeViewOffsetPositionX = offsetPosition[0] + (x - this.moveLastPosition[0]); + 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[1] = position.y; + this.moveLastPosition[0] = x; + 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[1] = position.y; + this.moveLastPosition[0] = x; + this.moveLastPosition[1] = y; // @ts-ignore this.$el.addEventListener('mousemove', this.mouseMoveNodeWorkflow); diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index a85e3d2b32..e906e4d7dd 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/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); - const offsetPosition = this.$store.getters.getNodeViewOffsetPosition; - this.lastClickPosition[0] = position.x - offsetPosition[0]; - this.lastClickPosition[1] = position.y - offsetPosition[1]; + this.lastClickPosition = this.getMousePositionWithinNodeView(e); 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); }; diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts index 60f2a13056..b95ed1b157 100644 --- a/packages/editor-ui/src/views/canvasHelpers.ts +++ b/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, + ]; +};