feat(editor): Migrate deviceSupportHelpers mixin to useDeviceSupport composable (no-changelog) (#8289)

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

@@ -1,31 +0,0 @@
-import { defineComponent } from 'vue';
-
-export const deviceSupportHelpers = defineComponent({
-	data() {
-		return {
-			// @ts-ignore msMaxTouchPoints is deprecated but must fix tablet bugs before fixing this.. otherwise breaks touchscreen computers
-			isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
-			isMacOs: /(ipad|iphone|ipod|mac)/i.test(navigator.platform), // TODO: `platform` deprecated
-		};
-	},
-	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 && e instanceof MouseEvent) {
-				return true;
-			}
-			if (this.isMacOs) {
-				return e.metaKey;
-			}
-			return e.ctrlKey;
-		},
-	},
-});

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

@@ -1,12 +1,11 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 
-import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import { getMousePosition } from '@/utils/nodeViewUtils';
 import { useUIStore } from '@/stores/ui.store';
+import { useDeviceSupport } from 'n8n-design-system';
 
 export const moveNodeWorkflow = defineComponent({
-	mixins: [deviceSupportHelpers],
 	data() {
 		return {
 			moveLastPosition: [0, 0],
@@ -30,7 +29,9 @@ export const moveNodeWorkflow = defineComponent({
 			this.moveLastPosition[1] = y;
 		},
 		mouseDownMoveWorkflow(e: MouseEvent, moveButtonPressed: boolean) {
-			if (!this.isCtrlKeyPressed(e) && !moveButtonPressed) {
+			const deviceSupport = useDeviceSupport();
+
+			if (!deviceSupport.isCtrlKeyPressed(e) && !moveButtonPressed) {
 				// We only care about it when the ctrl key is pressed at the same time.
 				// So we exit when it is not pressed.
 				return;

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

@@ -3,7 +3,6 @@ import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 
 import type { INodeUi } from '@/Interface';
-import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
 import {
 	NO_OP_NODE_TYPE,
 	NODE_CONNECTION_TYPE_ALLOW_MULTIPLE,
@@ -28,6 +27,7 @@ import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import { useHistoryStore } from '@/stores/history.store';
 import { useCanvasStore } from '@/stores/canvas.store';
 import type { EndpointSpec } from '@jsplumb/common';
+import { useDeviceSupport } from 'n8n-design-system';
 
 const createAddInputEndpointSpec = (
 	connectionName: NodeConnectionType,
@@ -56,7 +56,6 @@ const createDiamondOutputEndpointSpec = (): EndpointSpec => ({
 });
 
 export const nodeBase = defineComponent({
-	mixins: [deviceSupportHelpers],
 	data() {
 		return {
 			inputs: [] as Array<ConnectionTypes | INodeInputConfiguration>,
@@ -615,13 +614,16 @@ export const nodeBase = defineComponent({
 			return createSupplementalConnectionType(connectionType);
 		},
 		touchEnd(e: MouseEvent) {
-			if (this.isTouchDevice) {
+			const deviceSupport = useDeviceSupport();
+			if (deviceSupport.isTouchDevice) {
 				if (this.uiStore.isActionActive('dragActive')) {
 					this.uiStore.removeActiveAction('dragActive');
 				}
 			}
 		},
 		mouseLeftClick(e: MouseEvent) {
+			const deviceSupport = useDeviceSupport();
+
 			// @ts-ignore
 			const path = e.path || (e.composedPath && e.composedPath());
 			for (let index = 0; index < path.length; index++) {
@@ -634,11 +636,11 @@ export const nodeBase = defineComponent({
 				}
 			}
 
-			if (!this.isTouchDevice) {
+			if (!deviceSupport.isTouchDevice) {
 				if (this.uiStore.isActionActive('dragActive')) {
 					this.uiStore.removeActiveAction('dragActive');
 				} else {
-					if (!this.isCtrlKeyPressed(e)) {
+					if (!deviceSupport.isCtrlKeyPressed(e)) {
 						this.$emit('deselectAllNodes');
 					}