From 4312b7ac759ba6506e036c2c29187a4cbb1cb604 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 24 Aug 2021 01:23:25 -0500
Subject: [PATCH] Fixed various node and action selection issues

---
 src/components/board/Board.vue     | 14 ++++++++------
 src/components/board/BoardNode.vue | 13 ++++++++++---
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 1b2eb99..608dd27 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -7,8 +7,8 @@
         @init="onInit"
         @mousemove="drag"
         @touchmove="drag"
-        @mousedown="mouseDown"
-        @touchstart="mouseDown"
+        @mousedown="e => mouseDown(e)"
+        @touchstart="e => mouseDown(e)"
         @mouseup="() => endDragging(dragging)"
         @touchend="() => endDragging(dragging)"
         @mouseleave="() => endDragging(dragging)"
@@ -56,7 +56,7 @@ export default defineComponent({
         } as {
             lastMousePosition: { x: number; y: number };
             dragged: { x: number; y: number };
-            dragging: string | null;
+            dragging: number | null;
             hasDragged: boolean;
         };
     },
@@ -81,7 +81,9 @@ export default defineComponent({
             ];
         },
         draggingNode() {
-            return this.dragging ? this.board.nodes.find(node => node.id === this.dragging) : null;
+            return this.dragging == null
+                ? null
+                : this.board.nodes.find(node => node.id === this.dragging);
         },
         nodes() {
             const nodes = this.board.nodes.slice();
@@ -135,7 +137,7 @@ export default defineComponent({
         onInit(panzoomInstance: any) {
             panzoomInstance.setTransformOrigin(null);
         },
-        mouseDown(e: MouseEvent, nodeID: string | null = null, draggable = false) {
+        mouseDown(e: MouseEvent, nodeID: number | null = null, draggable = false) {
             if (this.dragging == null) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -176,7 +178,7 @@ export default defineComponent({
                 e.stopPropagation();
             }
         },
-        endDragging(nodeID: string | null) {
+        endDragging(nodeID: number | null) {
             if (this.dragging != null && this.dragging === nodeID) {
                 const draggingNode = this.draggingNode!;
                 const receivingNode = this.receivingNode;
diff --git a/src/components/board/BoardNode.vue b/src/components/board/BoardNode.vue
index 0a370da..4dd2ed8 100644
--- a/src/components/board/BoardNode.vue
+++ b/src/components/board/BoardNode.vue
@@ -22,6 +22,8 @@
                     "
                     @mousedown="e => performAction(e, action)"
                     @touchstart="e => performAction(e, action)"
+                    @mouseup="e => actionMouseUp(e, action)"
+                    @touchend.stop="e => actionMouseUp(e, action)"
                 >
                     <circle
                         :fill="
@@ -175,7 +177,6 @@ export default defineComponent({
         return {
             ProgressDisplay,
             Shape,
-            lastMousePosition: { x: 0, y: 0 },
             hovering: false,
             sqrtTwo: Math.sqrt(2)
         };
@@ -211,7 +212,7 @@ export default defineComponent({
             return layers[this.nodeType.layer].boards!.data[this.nodeType.id];
         },
         selected() {
-            return this.board.selectedNode?.id === this.node.id;
+            return this.board.selectedNode === this.node;
         },
         selectedAction() {
             return this.board.selectedAction;
@@ -316,11 +317,17 @@ export default defineComponent({
                 e.preventDefault();
                 e.stopPropagation();
             }
+        },
+        actionMouseUp(e: MouseEvent, action: BoardNodeAction) {
+            if (this.board.selectedAction === action) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
         }
     },
     watch: {
         onDraggableChanged() {
-            if (this.dragging?.id === this.node.id && !this.draggable) {
+            if (this.dragging === this.node && !this.draggable) {
                 this.$emit("endDragging", this.node.id);
             }
         }