fix: unselect entities without meta key pressed (#42)

Co-authored-by: Antamansid <[email protected]>

Author: Antamansid

src/components/canvas/anchors/index.ts

@@ -3,6 +3,7 @@ import { frameDebouncer } from "../../../services/optimizations/frameDebouncer";
 import { AnchorState, EAnchorType } from "../../../store/anchor/Anchor";
 import { TBlockId } from "../../../store/block/Block";
 import { selectBlockAnchor } from "../../../store/block/selectors";
+import { isMetaKeyEvent } from "../../../utils/functions";
 import { TPoint } from "../../../utils/types/shapes";
 import { GraphComponent } from "../GraphComponent";
 import { GraphLayer, TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
@@ -104,9 +105,22 @@ export class Anchor extends GraphComponent<TAnchorProps, TAnchorState> {
     event.stopPropagation();
 
     switch (event.type) {
-      case "click":
+      case "click": {
+        const { blocksList, connectionsList } = this.context.graph.rootStore;
+        const isAnyBlockSelected = blocksList.$selectedBlocks.value.length !== 0;
+        const isAnyConnectionSelected = connectionsList.$selectedConnections.value.size !== 0;
+
+        if (!isMetaKeyEvent(event) && isAnyBlockSelected) {
+          blocksList.resetSelection();
+        }
+
+        if (!isMetaKeyEvent(event) && isAnyConnectionSelected) {
+          connectionsList.resetSelection();
+        }
+
         this.toggleSelected();
         break;
+      }
       case "mouseenter": {
         this.setState({ raised: true });
         this.computeRenderSize(this.props.size, true);

src/components/canvas/blocks/controllers/BlockController.ts

@@ -19,6 +19,14 @@ export class BlockController {
     addEventListeners(block as EventTarget, {
       click(event: MouseEvent) {
         event.stopPropagation();
+
+        const { connectionsList } = block.context.graph.rootStore;
+        const isAnyConnectionSelected = connectionsList.$selectedConnections.value.size !== 0;
+
+        if (!isMetaKeyEvent(event) && isAnyConnectionSelected) {
+          connectionsList.resetSelection();
+        }
+
         block.context.graph.api.selectBlocks(
           [block.props.id],
           /**

src/components/canvas/connections/BlockConnection.ts

@@ -189,13 +189,27 @@ export class BlockConnection<T extends TConnection>
     super.handleEvent(event);
 
     switch (event.type) {
-      case "click":
+      case "click": {
+        const { blocksList } = this.context.graph.rootStore;
+        const isAnyBlockSelected = blocksList.$selectedBlocks.value.length !== 0;
+        const isAnyAnchorSelected = Boolean(blocksList.$selectedAnchor.value);
+
+        if (!isMetaKeyEvent(event) && isAnyBlockSelected) {
+          blocksList.resetSelection();
+        }
+
+        if (!isMetaKeyEvent(event) && isAnyAnchorSelected) {
+          blocksList.resetSelection();
+        }
+
         this.context.graph.api.selectConnections(
           [this.props.id],
           !isMetaKeyEvent(event) ? true : !this.state.selected,
           !isMetaKeyEvent(event) ? ESelectionStrategy.REPLACE : ESelectionStrategy.APPEND
         );
+
         break;
+      }
     }
   }