⚡ Improve support for touch-devices #1070

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

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+export const deviceSupportHelpers = Vue.extend({
+	data() {
+		return {
+			isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
+			isMacOs: /(ipad|iphone|ipod|mac)/i.test(navigator.platform),
+		};
+	},
+	computed: {
+		// TODO: Check if used anywhere
+		controlKeyCode(): string {
+			if (this.isMacOs) {
+				return 'Meta';
+			}
+			return 'Control';
+		},
+	},
+	methods: {
+		isCtrlKeyPressed(e: MouseEvent | KeyboardEvent): boolean {
+			if (this.isTouchDevice === true) {
+				return true;
+			}
+			if (this.isMacOs) {
+				return e.metaKey;
+			}
+			return e.ctrlKey;
+		},
+	},
+});

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

@@ -2,20 +2,19 @@ import { INodeUi } from '@/Interface';
 
 import mixins from 'vue-typed-mixins';
 
+import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
 
-export const mouseSelect = mixins(nodeIndex).extend({
+export const mouseSelect = mixins(
+	deviceSupportHelpers,
+	nodeIndex,
+).extend({
 	data () {
 		return {
 			selectActive: false,
 			selectBox: document.createElement('span'),
 		};
 	},
-	computed: {
-		isMacOs (): boolean {
-			return /(ipad|iphone|ipod|mac)/i.test(navigator.platform);
-		},
-	},
 	mounted () {
 		this.createSelectBox();
 	},
@@ -34,6 +33,9 @@ export const mouseSelect = mixins(nodeIndex).extend({
 			this.$el.appendChild(this.selectBox);
 		},
 		isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {
+			if (this.isTouchDevice === true) {
+				return true;
+			}
 			if (this.isMacOs) {
 				return e.metaKey;
 			}
@@ -125,6 +127,13 @@ export const mouseSelect = mixins(nodeIndex).extend({
 		},
 		mouseUpMouseSelect (e: MouseEvent) {
 			if (this.selectActive === false) {
+				if (this.isTouchDevice === true) {
+					// @ts-ignore
+					if (e.target && e.target.id.includes('node-view')) {
+						// Deselect all nodes
+						this.deselectAllNodes();
+					}
+				}
 				// If it is not active return direcly.
 				// Else normal node dragging will not work.
 				return;

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

@@ -1,41 +1,42 @@
 import mixins from 'vue-typed-mixins';
 
+import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
 
-export const moveNodeWorkflow = mixins(nodeIndex).extend({
+export const moveNodeWorkflow = mixins(
+	deviceSupportHelpers,
+	nodeIndex,
+).extend({
 	data () {
 		return {
 			moveLastPosition: [0, 0],
 		};
 	},
-	computed: {
-		controlKeyCode (): string {
-			if (this.isMacOs) {
-				return 'Meta';
-			}
-			return 'Control';
-		},
-		isMacOs (): boolean {
-			return /(ipad|iphone|ipod|mac)/i.test(navigator.platform);
-		},
-	},
+
 	methods: {
-		isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {
-			if (this.isMacOs) {
-				return e.metaKey;
-			}
-			return e.ctrlKey;
+		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 nodeViewOffsetPositionX = offsetPosition[0] + (e.pageX - this.moveLastPosition[0]);
-			const nodeViewOffsetPositionY = offsetPosition[1] + (e.pageY - this.moveLastPosition[1]);
+			const position = this.getMousePosition(e);
+
+			const nodeViewOffsetPositionX = offsetPosition[0] + (position.x - this.moveLastPosition[0]);
+			const nodeViewOffsetPositionY = offsetPosition[1] + (position.y - this.moveLastPosition[1]);
 			this.$store.commit('setNodeViewOffsetPosition', [nodeViewOffsetPositionX, nodeViewOffsetPositionY]);
 
 			// Update the last position
-			this.moveLastPosition[0] = e.pageX;
-			this.moveLastPosition[1] = e.pageY;
+			this.moveLastPosition[0] = position.x;
+			this.moveLastPosition[1] = position.y;
 		},
 		mouseDownMoveWorkflow (e: MouseEvent) {
 			if (this.isCtrlKeyPressed(e) === false) {
@@ -51,8 +52,10 @@ export const moveNodeWorkflow = mixins(nodeIndex).extend({
 
 			this.$store.commit('setNodeViewMoveInProgress', true);
 
-			this.moveLastPosition[0] = e.pageX;
-			this.moveLastPosition[1] = e.pageY;
+			const position = this.getMousePosition(e);
+
+			this.moveLastPosition[0] = position.x;
+			this.moveLastPosition[1] = position.y;
 
 			// @ts-ignore
 			this.$el.addEventListener('mousemove', this.mouseMoveNodeWorkflow);
@@ -72,6 +75,15 @@ export const moveNodeWorkflow = mixins(nodeIndex).extend({
 			// Nothing else to do. Simply leave the node view at the current offset
 		},
 		mouseMoveNodeWorkflow (e: MouseEvent) {
+			// @ts-ignore
+			if (e.target && !e.target.id.includes('node-view')) {
+				return;
+			}
+
+			if (this.$store.getters.isActionActive('dragActive')) {
+				return;
+			}
+
 			if (e.buttons === 0) {
 				// Mouse button is not pressed anymore so stop selection mode
 				// Happens normally when mouse leave the view pressed and then

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

@@ -2,20 +2,20 @@ import { IConnectionsUi, IEndpointOptions, INodeUi, XYPositon } from '@/Interfac
 
 import mixins from 'vue-typed-mixins';
 
+import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
 import { NODE_NAME_PREFIX } from '@/constants';
 
-export const nodeBase = mixins(nodeIndex).extend({
+export const nodeBase = mixins(
+	deviceSupportHelpers,
+	nodeIndex,
+).extend({
 	mounted () {
 		// Initialize the node
 		if (this.data !== null) {
 			this.__addNode(this.data);
 		}
 	},
-	data () {
-		return {
-		};
-	},
 	computed: {
 		data (): INodeUi {
 			return this.$store.getters.nodeByName(this.name);
@@ -26,9 +26,6 @@ export const nodeBase = mixins(nodeIndex).extend({
 			}
 			return false;
 		},
-		isMacOs (): boolean {
-			return /(ipad|iphone|ipod|mac)/i.test(navigator.platform);
-		},
 		nodeName (): string {
 			return NODE_NAME_PREFIX + this.nodeIndex;
 		},
@@ -337,13 +334,6 @@ export const nodeBase = mixins(nodeIndex).extend({
 
 		},
 
-		isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {
-			if (this.isMacOs) {
-				return e.metaKey;
-			}
-			return e.ctrlKey;
-		},
-
 		mouseLeftClick (e: MouseEvent) {
 			if (this.$store.getters.isActionActive('dragActive')) {
 				this.$store.commit('removeActiveAction', 'dragActive');