Highlight the selected branch

Highlight the selected branch with the same color as the selected node, but more translucent. This should make it more clear to see which branch is selected in large truth trees.

public/css/colors.css

@@ -32,6 +32,7 @@
     --premise-label: #808080;
     --tt-chevron: #000000;
     --selected: rgba(51, 153, 255, 0.5);
+    --selected-branch: rgba(51, 153, 255, 0.15);
     --antecedent: rgba(128, 192, 128, 0.5);
     --decomposition: rgba(192, 128, 128, 0.5);
 

public/css/index.css

@@ -92,6 +92,10 @@
   color: var(--tt-chevron);
 }
 
+.selected-branch {
+  background-color: var(--selected-branch);
+}
+
 .selected {
   background-color: var(--selected);
 }

public/css/themes/dark.css

@@ -26,6 +26,7 @@
     --premise-label: #ffffff;
     --tt-chevron: #ffffff;
     --selected: rgba(34, 82, 130, 0.5);
+    --selected-branch: rgba(34, 82, 130, 0.15);
     --antecedent: rgba(81, 130, 81, 0.5);
     --decomposition: rgba(192, 128, 128, 0.5);
 

src/client/component/truth-tree-branch.ts

@@ -44,6 +44,9 @@ export const TruthTreeBranchComponent = defineComponent({
 		selectedNode(): TruthTreeNode | null {
 			return this.$store.getters.selectedNode;
 		},
+		selectedBranch(): Set<number> {
+			return this.$store.getters.selectedBranch;
+		},
 		/**
 		 * Returns the node at the head of this branch.
 		 * @returns the head node of this branch
@@ -215,6 +218,7 @@ export const TruthTreeBranchComponent = defineComponent({
 						@click="$store.commit('select', {id: id})"
 						:class="{
 							selected: selected === id,
+							'selected-branch': selectedBranch.has(id),
 							antecedent:
 								selectedNode !== null &&
 								selectedNode.antecedent === id,

src/client/index.ts

@@ -439,6 +439,15 @@ export const instance = vue
 				selectedNode(state) {
 					return state.tree.getNode(state.selected);
 				},
+				selectedBranch(state, getters) {
+					const selectedBranch: Set<number> = new Set();
+					let node: TruthTreeNode | null = getters.selectedNode;
+					while (node !== null) {
+						selectedBranch.add(node.id);
+						node = state.tree.getNode(node.parent);
+					}
+					return selectedBranch;
+				}
 			},
 			mutations: {
 				toggleDeveloperMode(state: StoreState) {