MINOR: feat: add highlightedId and selectedId models to meta-building…

… structure component
bimdata · May 31, 2024 · 44aabbd · 44aabbd
1 parent a451bad
commit 44aabbd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/src/BIMDataMetaBuildingStructure/BIMDataMetaBuildingStructure.vue b/src/BIMDataMetaBuildingStructure/BIMDataMetaBuildingStructure.vue
@@ -28,7 +28,7 @@ const props = defineProps({
   },
   selectable: {
     type: Boolean,
-    default: true,
+    default: false,
   },
 });
 
@@ -37,6 +37,9 @@ const emit = defineEmits([
   "storey-selected"
 ]);
 
+const highlightedId = defineModel("highlightedId", { default: null });
+const selectedId = defineModel("selectedId", { default: null });
+
 const loading = ref(false);
 const modelStoreys = ref([]);
 const modelZones = ref([]);
@@ -80,6 +83,8 @@ const state = {
   storey: readonly(selectedStorey),
   zones: computed(() => modelZones.value.filter(zone => zone.storey_uuid === selectedStorey.value?.uuid)),
   selectable: computed(() => props.selectable),
+  highlightedId,
+  selectedId,
   onStoreySelected: event => (selectedStorey.value = event, emit("storey-selected", event)),
   onSelectionChanged: event => emit("selection-changed", event),
 };

diff --git a/src/BIMDataMetaBuildingStructure/StructureView/StructureView.vue b/src/BIMDataMetaBuildingStructure/StructureView/StructureView.vue
@@ -15,7 +15,8 @@ defineOptions({
   }
 });
 
-const { storey, zones } = inject("BIMDataMetaBuildingStructure.state");
+const state = inject("BIMDataMetaBuildingStructure.state");
+const { storey, zones, highlightedId, selectedId } = state;
 
 const tree = computed(() => setupTree(buildStructureTree(storey.value, zones.value)));
 const nodes = computed(() => flattenTree(tree.value));
@@ -29,6 +30,26 @@ watch(searchText, value => {
     node.visibleRef.value = !text || node.text.toLowerCase().includes(text);
   });
 });
+
+watch(highlightedId, id => {
+  let parent = nodes.value.find(x => x.id === id)?.parent;
+  while (parent) {
+    parent.expandedRef.value = true;
+    parent = parent.parent;
+  } 
+});
+
+const onNodeHover = node => {
+  highlightedId.value = node?.id;
+};
+
+const onNodeClick = node => {
+  if (selectedId.value === node?.id) {
+    selectedId.value = null;
+  } else {
+    selectedId.value = node?.id;
+  }
+};
 </script>
 
 <template>
@@ -39,7 +60,13 @@ watch(searchText, value => {
       :placeholder="$t('MetaBuildingStructure.StructureView.search')"
       v-model="searchText"
     />
-    <BIMDataTree :data="tree">
+    <BIMDataTree
+      :data="tree"
+      :highlighted-id="highlightedId"
+      :selected-id="selectedId"
+      @hover="onNodeHover"
+      @click="onNodeClick"
+    >
       <template #node="{ node, depth }">
         <component
           :is="node.component"