feat(viewer/frontend): object(s) highlights from the model explorer

packages/frontend/src/main/components/viewer/ObjectPropertiesRow.vue

@@ -17,6 +17,8 @@
     @click.stop="
       prop.type === 'object' || prop.type === 'array' ? (expanded = !expanded) : null
     "
+    @mouseenter="toggleHighlight(true)"
+    @mouseleave="toggleHighlight(false)"
   >
     <v-col cols="1" class="text-center">
       <v-icon
@@ -132,6 +134,8 @@ import {
   showObjects2,
   isolateObjects2,
   unIsolateObjects2,
+  highlightObjects,
+  removeHighlights,
   getInitializedViewer
 } from '@/main/lib/viewer/commit-object-viewer/stateManager'
 
@@ -232,6 +236,25 @@ export default {
   },
   mounted() {},
   methods: {
+    toggleHighlight(hovered) {
+      if (this.prop.type === 'array') {
+        const targetIds = this.prop.value.map((o) => o.referencedId)
+        if (hovered) {
+          highlightObjects(targetIds)
+        } else {
+          removeHighlights()
+        }
+        return
+      }
+
+      if (!this.prop.value.referencedId) return
+
+      if (hovered) {
+        highlightObjects([this.prop.value.referencedId])
+      } else {
+        removeHighlights()
+      }
+    },
     toggleVisibility() {
       if (this.prop.type === 'object') {
         if (this.visible) {

packages/frontend/src/main/lib/viewer/commit-object-viewer/stateManager.ts

@@ -254,6 +254,15 @@ export function resetSelection() {
   getInitializedViewer().FilteringManager.resetSelection()
 }
 
+export function highlightObjects(objectIds: string[]) {
+  getInitializedViewer().FilteringManager.highlightObjects(objectIds)
+}
+
+export function removeHighlights() {
+  // TODO
+  getInitializedViewer().FilteringManager.resetHighlight()
+}
+
 // FILTERING NEW
 
 export function isolateObjects2(
@@ -281,6 +290,7 @@ export function unIsolateObjects2(
     includeDescendants
   )
   updateState({ currentFilterState: result })
+  console.log(result)
 }
 
 export function hideObjects2(
@@ -307,16 +317,16 @@ export function showObjects2(
     stateKey,
     includeDescendants
   )
-  console.log(result)
   const state = { ...commitObjectViewerState() }
   state.currentFilterState = result
   updateState(state)
+  console.log(result)
 }
 
 export function setColorFilter(property: PropertyInfo) {
   const result = getInitializedViewer().FilteringManager.setColorFilter(property)
-  console.log(result)
   updateState({ currentFilterState: result })
+  console.log(result)
 }
 
 // FILTERING OLD

packages/viewer/src/modules/filtering/FilteringManager.ts

@@ -43,7 +43,7 @@ export class FilteringManager {
   private ColorStringFilterState = null
   private ColorNumericFilterState = null
   private SelectionState = new GenericRvState()
-  private OverlayState = new GenericRvState()
+  private HighlightState = new GenericRvState()
 
   public constructor(renderer: SpeckleRenderer) {
     this.WTI = WorldTree.getInstance()
@@ -274,17 +274,18 @@ export class FilteringManager {
   public selectObjects(objectIds: string[]) {
     return this.populateGenericState(objectIds, this.SelectionState)
   }
-  public overlayObjects(objectIds: string[]) {
-    return this.populateGenericState(objectIds, this.OverlayState)
+  public highlightObjects(objectIds: string[]) {
+    return this.populateGenericState(objectIds, this.HighlightState)
   }
 
   private populateGenericState(objectIds, state) {
     const ids = [...objectIds, ...this.getDescendantIds(objectIds)]
     state.rvs = []
-
+    state.ids = ids
     if (ids.length !== 0) {
       WorldTree.getInstance().walk((node: TreeNode) => {
         if (!node.model.atomic) return true
+        if (!node.model.raw) return true
         if (ids.indexOf(node.model.raw.id) !== -1) {
           state.rvs.push(...WorldTree.getRenderTree().getRenderViewsForNode(node, node))
         }
@@ -299,8 +300,8 @@ export class FilteringManager {
     return this.setFilters()
   }
 
-  public resetOverlay() {
-    this.OverlayState = new GenericRvState()
+  public resetHighlight() {
+    this.HighlightState = new GenericRvState()
     return this.setFilters()
   }
 
@@ -310,7 +311,7 @@ export class FilteringManager {
     this.ColorStringFilterState = null
     this.ColorNumericFilterState = null
     this.SelectionState = new GenericRvState()
-    this.OverlayState = new GenericRvState()
+    this.HighlightState = new GenericRvState()
     this.StateKey = null
     return null
   }
@@ -383,8 +384,8 @@ export class FilteringManager {
       })
     }
 
-    if (this.OverlayState.rvs.length !== 0) {
-      this.Renderer.applyFilter(this.SelectionState.rvs, {
+    if (this.HighlightState.rvs.length !== 0) {
+      this.Renderer.applyFilter(this.HighlightState.rvs, {
         filterType: FilterMaterialType.OVERLAY
       })
     }