Creating a separate highlighting functionality

__mocks__/web-ifc-viewer.js

@@ -101,6 +101,7 @@ const impl = {
   }),
   setSelection: jest.fn(),
   pickIfcItemsByID: jest.fn(),
+  preselectElementsByIds: jest.fn(),
 }
 const constructorMock = ifcjsMock.IfcViewerAPI
 constructorMock.mockImplementation(() => impl)

src/Containers/CadView.jsx

@@ -80,6 +80,7 @@ export default function CadView({
   const setSelectedElement = useStore((state) => state.setSelectedElement)
   const setSelectedElements = useStore((state) => state.setSelectedElements)
   const selectedElements = useStore((state) => state.selectedElements)
+  const preselectedElementIds = useStore((state) => state.preselectedElementIds)
   const setViewerStore = useStore((state) => state.setViewerStore)
   const snackMessage = useStore((state) => state.snackMessage)
   const accessToken = useStore((state) => state.accessToken)
@@ -145,6 +146,15 @@ export default function CadView({
   }, [selectedElements])
 
 
+  useEffect(() => {
+    (async () => {
+      if (Array.isArray(preselectedElementIds) && preselectedElementIds.length && viewer) {
+        await viewer.preselectElementsByIds(0, preselectedElementIds)
+      }
+    })()
+  }, [preselectedElementIds])
+
+
   // Watch for path changes within the model.
   // TODO(pablo): would be nice to have more consistent handling of path parsing.
   useEffect(() => {

src/Containers/CadView.test.jsx

@@ -276,6 +276,36 @@ describe('CadView', () => {
   })
 
 
+  it('can highlight some elements based on state change', async () => {
+    const highlightedIdsAsString = ['0', '1']
+    const modelId = 0
+    const elementCount = 2
+    const modelPath = {
+      filepath: `index.ifc`,
+      gitpath: undefined,
+    }
+    const {result} = renderHook(() => useStore((state) => state))
+    const {getByTitle} = render(
+        <ShareMock>
+          <CadView
+            installPrefix={'/'}
+            appPrefix={'/'}
+            pathPrefix={'/'}
+            modelPath={modelPath}
+          />
+        </ShareMock>)
+    await actAsyncFlush()
+    expect(getByTitle('Section')).toBeInTheDocument()
+    await act(() => {
+      result.current.setPreselectedElementIds(highlightedIdsAsString)
+    })
+    expect(result.current.preselectedElementIds).toHaveLength(elementCount)
+    expect(viewer.preselectElementsByIds).toHaveBeenLastCalledWith(modelId, highlightedIdsAsString)
+
+    await actAsyncFlush()
+  })
+
+
   // TODO(https://github.com/bldrs-ai/Share/issues/622): SceneLayer breaks postprocessing
   /*
   import {__getIfcViewerAPIMockSingleton} from '../../__mocks__/web-ifc-viewer'

src/Infrastructure/IfcHighlighter.js

@@ -42,6 +42,19 @@ export default class IfcHighlighter {
   setHighlighted(meshes) {
     this._selectionOutlineEffect.setSelection(meshes ?? [])
   }
+
+  /**
+   * Highlights and outlines meshes in scene
+   *
+   * @param {Mesh[]} geometry meshes
+   */
+  addToHighlighting(mesh) {
+    const currentSelection = this._selectionOutlineEffect.getSelection()
+    if (mesh && currentSelection.indexOf(mesh) === -1) {
+      currentSelection.add(mesh)
+      // NOTE: the added mesh will be automatically be removed from the scene when the prepick changes
+    }
+  }
 }
 
 

src/Infrastructure/IfcViewerAPIExtended.js

@@ -108,9 +108,33 @@ export class IfcViewerAPIExtended extends IfcViewerAPI {
     const id = this.getPickedItemId(found)
     if (this.isolator.canBePickedInScene(id)) {
       await this.IFC.selector.preselection.pick(found)
+      this.highlightPreselection()
     }
   }
 
+  /**
+   * applies Preselection effect on an Element by Id
+   *
+   * @param {number} modelID
+   * @param {number[]} expressIds express Ids of the elements
+   */
+  async preselectElementsByIds(modelId, expressIds) {
+    const filteredIds = expressIds.filter((id) => this.isolator.canBePickedInScene(id)).map((a) => parseInt(a))
+    if (filteredIds.length) {
+      await this.IFC.selector.preselection.pickByID(modelId, filteredIds, false, true)
+      this.highlightPreselection()
+    }
+  }
+
+  /**
+   * adds the highlighting (outline effect) to the currently preselected element in the viewer
+   */
+  highlightPreselection() {
+    // Deconstruct the preselection meshes set to get the first element in set
+    // The preselection set always contains only one element or none
+    const [targetMesh] = this.IFC.selector.preselection.meshes
+    this.highlighter.addToHighlighting(targetMesh)
+  }
 
   /**
    *

src/WidgetApi/ApiEventsRegistry.js

@@ -4,6 +4,8 @@ import UIComponentsVisibilityEventHandler from './event-handlers/UIComponentsVis
 import SuppressAboutDialogHandler from './event-handlers/SuppressAboutDialogHandler'
 import ElementSelectionChangedEventDispatcher from './event-dispatchers/ElementSelectionChangedEventDispatcher'
 import ModelLoadedEventDispatcher from './event-dispatchers/ModelLoadedEventDispatcher'
+import HighlightElementsEventHandler from './event-handlers/HighlightElementsEventHandler'
+
 
 /**
  * Api Events are defined here
@@ -37,6 +39,7 @@ class ApiEventsRegistry {
     const events = [
       new LoadModelEventHandler(this.apiConnection, this.navigation),
       new SelectElementsEventHandler(this.apiConnection, this.searchIndex),
+      new HighlightElementsEventHandler(this.apiConnection, this.searchIndex),
       new UIComponentsVisibilityEventHandler(this.apiConnection),
       new SuppressAboutDialogHandler(this.apiConnection),
     ]

src/WidgetApi/event-handlers/HighlightElementsEventHandler.js

@@ -0,0 +1,57 @@
+import useStore from '../../store/useStore'
+import ApiEventHandler from './ApiEventHandler'
+
+
+/**
+ * Select Elements API event handler
+ */
+class HighlightElementsEventHandler extends ApiEventHandler {
+  apiConnection = null
+  name = 'ai.bldrs-share.HighlightElements'
+
+
+  /**
+   * constructor
+   *
+   * @param {object} apiConnection AbstractApiConnection
+   * @param {object} searchIndex SearchIndex
+   */
+  constructor(apiConnection, searchIndex) {
+    super()
+    this.apiConnection = apiConnection
+    this.searchIndex = searchIndex
+  }
+
+  /**
+   * The handler for this event
+   *
+   * @param {object} data the event associated data
+   * @return {object} the response of the API call
+   */
+  handler(data) {
+    if (!('globalIds' in data)) {
+      return this.apiConnection.missingArgumentResponse('globalIds')
+    }
+
+    if (data.globalIds === null) {
+      return this.apiConnection.invalidOperationResponse('globalIds can\'t be null')
+    }
+
+    const expressIds = []
+
+    if (data.globalIds.length) {
+      for (const globalId of data.globalIds) {
+        const expressId = this.searchIndex.getExpressIdByGlobalId(globalId)
+        if (expressId) {
+          expressIds.push(expressId)
+        }
+      }
+    }
+
+    useStore.setState({preselectedElementIds: expressIds})
+
+    return this.apiConnection.successfulResponse({})
+  }
+}
+
+export default HighlightElementsEventHandler

src/store/IFCSlice.js

@@ -12,12 +12,14 @@ export default function createIFCSlice(set, get) {
     modelStore: null,
     selectedElement: null,
     selectedElements: [],
+    preselectedElementIds: null,
     cameraControls: null,
     setViewerStore: (viewer) => set(() => ({viewerStore: viewer})),
     setModelPath: (modelPath) => set(() => ({modelPath: modelPath})),
     setModelStore: (model) => set(() => ({modelStore: model})),
     setSelectedElement: (element) => set(() => ({selectedElement: element})),
     setSelectedElements: (elements) => set(() => ({selectedElements: elements})),
+    setPreselectedElementIds: (elementIds) => set(() => ({preselectedElementIds: elementIds})),
     setCameraControls: (cameraControls) => set(() => ({cameraControls: cameraControls})),
   }
 }