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

packages/editor-ui/src/components/CanvasControls.vue

@@ -62,13 +62,15 @@ import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCanvasStore } from '@/stores/canvas.store';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { useDeviceSupport } from 'n8n-design-system';
 
 const canvasStore = useCanvasStore();
 const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
 const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
+const deviceSupport = useDeviceSupport();
 
 const keyDown = (e: KeyboardEvent) => {
-	const isCtrlKeyPressed = e.metaKey || e.ctrlKey;
+	const isCtrlKeyPressed = deviceSupport.isCtrlKeyPressed(e);
 	if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
 		zoomIn();
 	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {

packages/editor-ui/src/components/Node.vue

@@ -14,7 +14,7 @@
 			:class="{
 				'node-default': true,
 				'touch-active': isTouchActive,
-				'is-touch-device': isTouchDevice,
+				'is-touch-device': deviceSupport.isTouchDevice,
 				'menu-open': isContextMenuOpen,
 				'disable-pointer-events': disablePointerEvents,
 			}"
@@ -187,6 +187,7 @@ import { type ContextMenuTarget, useContextMenu } from '@/composables/useContext
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { usePinnedData } from '@/composables/usePinnedData';
+import { useDeviceSupport } from 'n8n-design-system';
 import { useDebounce } from '@/composables/useDebounce';
 
 export default defineComponent({
@@ -218,9 +219,17 @@ export default defineComponent({
 		const nodeHelpers = useNodeHelpers();
 		const node = workflowsStore.getNodeByName(props.name);
 		const pinnedData = usePinnedData(node);
+		const deviceSupport = useDeviceSupport();
 		const { callDebounced } = useDebounce();
 
-		return { contextMenu, externalHooks, nodeHelpers, pinnedData, callDebounced };
+		return {
+			contextMenu,
+			externalHooks,
+			nodeHelpers,
+			pinnedData,
+			deviceSupport,
+			callDebounced,
+		};
 	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
@@ -698,7 +707,7 @@ export default defineComponent({
 			this.pinDataDiscoveryTooltipVisible = false;
 		},
 		touchStart() {
-			if (this.isTouchDevice === true && !this.isMacOs && !this.isTouchActive) {
+			if (this.deviceSupport.isTouchDevice && !this.deviceSupport.isMacOs && !this.isTouchActive) {
 				this.isTouchActive = true;
 				setTimeout(() => {
 					this.isTouchActive = false;

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -169,7 +169,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
+import { useDeviceSupport } from 'n8n-design-system';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useMessage } from '@/composables/useMessage';
 import { useExternalHooks } from '@/composables/useExternalHooks';

packages/editor-ui/src/components/Sticky.vue

@@ -11,7 +11,7 @@
 			:class="{
 				'sticky-default': true,
 				'touch-active': isTouchActive,
-				'is-touch-device': isTouchDevice,
+				'is-touch-device': deviceSupport.isTouchDevice,
 				'is-read-only': isReadOnly,
 			}"
 			:style="stickySize"
@@ -122,6 +122,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useContextMenu } from '@/composables/useContextMenu';
+import { useDeviceSupport } from 'n8n-design-system';
 
 export default defineComponent({
 	name: 'Sticky',
@@ -135,6 +136,7 @@ export default defineComponent({
 		},
 	},
 	setup() {
+		const deviceSupport = useDeviceSupport();
 		const colorPopoverTrigger = ref<HTMLDivElement>();
 		const forceActions = ref(false);
 		const setForceActions = (value: boolean) => {
@@ -147,7 +149,7 @@ export default defineComponent({
 			}
 		});
 
-		return { colorPopoverTrigger, contextMenu, forceActions, setForceActions };
+		return { deviceSupport, colorPopoverTrigger, contextMenu, forceActions, setForceActions };
 	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
@@ -318,7 +320,7 @@ export default defineComponent({
 			this.workflowsStore.updateNodeProperties(updateInformation);
 		},
 		touchStart() {
-			if (this.isTouchDevice === true && !this.isMacOs && !this.isTouchActive) {
+			if (this.deviceSupport.isTouchDevice === true && !this.isMacOs && !this.isTouchActive) {
 				this.isTouchActive = true;
 				setTimeout(() => {
 					this.isTouchActive = false;