🐛 Fix issue that mac users can not move workflow

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

@@ -8,9 +8,24 @@ export const moveNodeWorkflow = mixins(nodeIndex).extend({
 			moveLastPosition: [0, 0],
 		};
 	},
-	mounted () {
+	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;
+		},
 		moveWorkflow (e: MouseEvent) {
 			const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
 
@@ -23,7 +38,7 @@ export const moveNodeWorkflow = mixins(nodeIndex).extend({
 			this.moveLastPosition[1] = e.pageY;
 		},
 		mouseDownMoveWorkflow (e: MouseEvent) {
-			if (e.ctrlKey === false) {
+			if (this.isCtrlKeyPressed(e) === false) {
 				// 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/views/NodeView.vue

@@ -338,7 +338,7 @@ export default mixins(
 				this.mouseUpMoveWorkflow(e);
 			},
 			keyUp (e: KeyboardEvent) {
-				if (e.key === 'Control') {
+				if (e.key === this.controlKeyCode) {
 					this.ctrlKeyPressed = false;
 				}
 			},
@@ -368,7 +368,7 @@ export default mixins(
 					this.$store.commit('setActiveNode', null);
 				} else if (e.key === 'Tab') {
 					this.createNodeActive = !this.createNodeActive;
-				} else if (e.key === 'Control') {
+				} else if (e.key === this.controlKeyCode) {
 					this.ctrlKeyPressed = true;
 				} else if (e.key === 'F2') {
 					const lastSelectedNode = this.lastSelectedNode;
@@ -379,29 +379,29 @@ export default mixins(
 					this.callDebounced('setZoom', 300, 'in');
 				} else if (e.key === '-') {
 					this.callDebounced('setZoom', 300, 'out');
-				} else if ((e.key === '0') && (e.ctrlKey === true)) {
+				} else if ((e.key === '0') && (this.isCtrlKeyPressed(e) === true)) {
 					this.callDebounced('setZoom', 300, 'reset');
-				} else if ((e.key === 'a') && (e.ctrlKey === true)) {
+				} else if ((e.key === 'a') && (this.isCtrlKeyPressed(e) === true)) {
 					// Select all nodes
 					e.stopPropagation();
 					e.preventDefault();
 
 					this.callDebounced('selectAllNodes', 1000);
-				} else if ((e.key === 'c') && (e.ctrlKey === true)) {
+				} else if ((e.key === 'c') && (this.isCtrlKeyPressed(e) === true)) {
 					this.callDebounced('copySelectedNodes', 1000);
-				} else if ((e.key === 'x') && (e.ctrlKey === true)) {
+				} else if ((e.key === 'x') && (this.isCtrlKeyPressed(e) === true)) {
 					// Cut nodes
 					e.stopPropagation();
 					e.preventDefault();
 
 					this.callDebounced('cutSelectedNodes', 1000);
-				} else if (e.key === 'o' && e.ctrlKey === true) {
+				} else if (e.key === 'o' && this.isCtrlKeyPressed(e) === true) {
 					// Open workflow dialog
 					e.stopPropagation();
 					e.preventDefault();
 
 					this.$root.$emit('openWorkflowDialog');
-				} else if (e.key === 'n' && e.ctrlKey === true && e.altKey === true) {
+				} else if (e.key === 'n' && this.isCtrlKeyPressed(e) === true && e.altKey === true) {
 					// Create a new workflow
 					e.stopPropagation();
 					e.preventDefault();
@@ -413,7 +413,7 @@ export default mixins(
 						message: 'A new workflow got created!',
 						type: 'success',
 					});
-				} else if ((e.key === 's') && (e.ctrlKey === true)) {
+				} else if ((e.key === 's') && (this.isCtrlKeyPressed(e) === true)) {
 					// Save workflow
 					e.stopPropagation();
 					e.preventDefault();