From 21f49756dc9232b42b90ba63b274d2f0c29d64e1 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 22 Apr 2023 22:59:28 -0500
Subject: [PATCH] Move selecting action logic inside the board component

---
 src/features/boards/Board.vue           | 10 ++++++++++
 src/features/boards/BoardNode.vue       |  2 ++
 src/features/boards/BoardNodeAction.vue | 13 +++++++------
 src/features/boards/board.ts            |  2 +-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/features/boards/Board.vue b/src/features/boards/Board.vue
index 2605aaa..7d50aa4 100644
--- a/src/features/boards/Board.vue
+++ b/src/features/boards/Board.vue
@@ -44,6 +44,7 @@
                             :selectedAction="unref(selectedAction)"
                             @mouseDown="mouseDown"
                             @endDragging="endDragging"
+                            @clickAction="actionId => clickAction(node, actionId)"
                         />
                     </g>
                 </transition-group>
@@ -240,6 +241,15 @@ function endDragging(nodeID: number | null) {
         props.state.value.selectedAction = null;
     }
 }
+
+function clickAction(node: BoardNode, actionId: string) {
+    if (props.state.value.selectedAction === actionId) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        unref(props.selectedAction)!.onClick(unref(props.selectedNode)!);
+    } else {
+        props.state.value = { ...props.state.value, selectedAction: actionId };
+    }
+}
 </script>
 
 <style>
diff --git a/src/features/boards/BoardNode.vue b/src/features/boards/BoardNode.vue
index 7adc9ca..df5c135 100644
--- a/src/features/boards/BoardNode.vue
+++ b/src/features/boards/BoardNode.vue
@@ -12,6 +12,7 @@
             :node="node"
             :node-type="nodeType"
             :selected-action="selectedAction"
+            @click-action="actionId => emit('clickAction', actionId)"
         />
 
         <g
@@ -165,6 +166,7 @@ const props = toRefs(_props);
 const emit = defineEmits<{
     (e: "mouseDown", event: MouseEvent | TouchEvent, node: number, isDraggable: boolean): void;
     (e: "endDragging", node: number): void;
+    (e: "clickAction", actionId: string): void;
 }>();
 
 const isSelected = computed(() => unref(props.selectedNode) === unref(props.node));
diff --git a/src/features/boards/BoardNodeAction.vue b/src/features/boards/BoardNodeAction.vue
index 3bf715f..95adeee 100644
--- a/src/features/boards/BoardNodeAction.vue
+++ b/src/features/boards/BoardNodeAction.vue
@@ -52,6 +52,10 @@ const _props = defineProps<{
 }>();
 const props = toRefs(_props);
 
+const emit = defineEmits<{
+    (e: "clickAction", actionId: string): void;
+}>();
+
 const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
 const outlineColor = computed(
     () =>
@@ -68,12 +72,9 @@ const actionDistance = computed(() =>
 );
 
 function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    // If the onClick function made this action selected,
-    // don't propagate the event (which will deselect everything)
-    if (action.onClick(unref(props.node)) || unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
+    emit("clickAction", action.id);
+    e.preventDefault();
+    e.stopPropagation();
 }
 
 function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts
index a86b5ae..c5f21b4 100644
--- a/src/features/boards/board.ts
+++ b/src/features/boards/board.ts
@@ -188,7 +188,7 @@ export interface BoardNodeActionOptions {
     /** An array of board node links associated with the action. They appear when the action is focused. */
     links?: NodeComputable<BoardNodeLink[]>;
     /** A function that is called when the action is clicked. */
-    onClick: (node: BoardNode) => boolean | undefined;
+    onClick: (node: BoardNode) => void;
 }
 
 /**