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