highlight selection in tree

src/components/TheAddressspace.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import type { UABaseNode } from '@/ua/UABaseNode';
+import { UABaseNode } from '@/ua/UABaseNode';
 import TreeItem from './TreeItem.vue'
 import {useStore} from '@/store'
 import TheContextMenu from './TheContextMenu.vue';
+import { ref } from 'vue';
 const store = useStore()
 
 function selectNode(node: UABaseNode) {
   store.selectedNode=node;
+  selNode.value=node;
 }
+const selNode=ref(UABaseNode.nullBaseNode);
 </script>
 
 <template>
@@ -18,7 +21,7 @@ function selectNode(node: UABaseNode) {
       <ul>
         <TheContextMenu>
           <TreeItem class="item" v-if="store.rootNode != null" :model="store.rootNode"
-            @select-node="(node) => selectNode(node)" :filter-func="(node: UABaseNode) => { return false }">
+            @select-node="(node) => selectNode(node)" :selected-node="selNode" :filter-func="(node: UABaseNode) => { return false }">
           </TreeItem>
         </TheContextMenu>
       </ul>

src/components/TreeItem.vue

@@ -4,7 +4,8 @@ import { ref, computed } from 'vue'
 
 const props = defineProps({
   model: UABaseNode,
-  filterFunc: Function
+  filterFunc: Function,
+  selectedNode: UABaseNode
 })
 
 const isOpen = ref(false)
@@ -23,7 +24,8 @@ function toggle() {
   <li>
     <div v-if="model && filterFunc"  :class="{ bold: isFolder }">
       <span v-if="isFolder" @click="toggle">[{{ isOpen ? '-' : '+' }}]</span>
-      <span @click.stop="$emit('selectNode', model)"  :class="{ disabled: filterFunc(model) }" >
+      <span @click.stop="$emit('selectNode', model)"  class="itemtext" :class="[(filterFunc(model)?'disabled':''), 
+          (selectedNode?.nodeId.toString()===model?.nodeId.toString())?'selected':'' ]">
         {{ model.displayName }}
       </span>
     </div>
@@ -34,7 +36,8 @@ function toggle() {
           @select-node="(node: UABaseNode) => $emit('selectNode', node)"
           v-for="child in model.getChildren()"
           v-bind:key="child.nodeId.toString()"
-          :model="child">
+          :model="child"
+          :selectedNode="selectedNode">
         </TreeItem>
     </ul>
   </li>
@@ -51,6 +54,13 @@ function toggle() {
     text-align: left;
     list-style-type: none;
   }
+  .itemtext:hover{
+    border: dashed 1px black;  
+  }
+
+  .selected{
+    background-color: lightgrey;
+  }
 
   .disabled {
     cursor: not-allowed;