Move selecting action logic inside the board component

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>

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));

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,
+    emit("clickAction", action.id);
-    // don't propagate the event (which will deselect everything)
+    e.preventDefault();
-    if (action.onClick(unref(props.node)) || unref(props.selectedAction)?.id === action.id) {
+    e.stopPropagation();
-        e.preventDefault();
-        e.stopPropagation();
-    }
 }
 
 function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {

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;
 }
 
 /**