⚡ Implement that nodes can also be deselected with ctrl+click

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

@@ -156,6 +156,13 @@ export const mouseSelect = mixins(nodeIndex).extend({
 			this.updateSelectBox(e);
 		},
 
+		nodeDeselected (node: INodeUi) {
+			this.$store.commit('removeNodeFromSelection', node);
+			const nodeElement = `node-${this.getNodeIndex(node.name)}`;
+			// @ts-ignore
+			this.instance.removeFromDragSelection(nodeElement);
+
+		},
 		nodeSelected (node: INodeUi) {
 			this.$store.commit('addSelectedNode', node);
 			const nodeElement = `node-${this.getNodeIndex(node.name)}`;

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

@@ -26,6 +26,9 @@ export const nodeBase = mixins(nodeIndex).extend({
 			}
 			return false;
 		},
+		isMacOs(): boolean {
+			return /(ipad|iphone|ipod|mac)/i.test(navigator.platform);
+		},
 		isReadOnly (): boolean {
 			if (['NodeViewExisting', 'NodeViewNew'].includes(this.$route.name as string)) {
 				return false;
@@ -271,23 +274,32 @@ export const nodeBase = mixins(nodeIndex).extend({
 
 							this.$store.commit('updateNodeProperties', updateInformation);
 						});
-
-						this.$store.commit('removeActiveAction', 'dragActive');
 					}
 				},
 				filter: '.action-button',
 			});
 		},
 
+		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');
 			} else {
-				if (!e.ctrlKey) {
+				if (this.isCtrlKeyPressed(e) === false) {
 					this.$emit('deselectAllNodes');
 				}
 
-				this.$emit('nodeSelected', this.name);
+				if (this.$store.getters.isNodeSelected(this.data.name)) {
+					this.$emit('deselectNode', this.name);
+				} else {
+					this.$emit('nodeSelected', this.name);
+				}
 			}
 		},
 	},

packages/editor-ui/src/views/NodeView.vue

@@ -12,6 +12,7 @@
 				v-for="nodeData in nodes"
 				@duplicateNode="duplicateNode"
 				@deselectAllNodes="deselectAllNodes"
+				@deselectNode="nodeDeselectedByName"
 				@nodeSelected="nodeSelectedByName"
 				@removeNode="removeNode"
 				@runWorkflow="runWorkflow"
@@ -781,6 +782,13 @@ export default mixins(
 				this.createNodeActive = false;
 			},
 
+			nodeDeselectedByName (nodeName: string) {
+				const node = this.$store.getters.nodeByName(nodeName);
+				if (node) {
+					this.nodeDeselected(node);
+				}
+			},
+
 			nodeSelectedByName (nodeName: string, setActive = false, deselectAllOthers?: boolean) {
 				if (deselectAllOthers === true) {
 					this.deselectAllNodes();