VYZN: (feature) hide/unhide and temporary isolate IFC elements

__mocks__/web-ifc-viewer.js

@@ -1,21 +1,25 @@
 import {Vector3} from 'three'
+import {makeTestTree} from '../src/utils/TreeUtils.test'
 
 
 jest.mock('../src/Infrastructure/IfcHighlighter')
 const ifcjsMock = jest.createMockFromModule('web-ifc-viewer')
 
 // Not sure why this is required, but otherwise these internal fields
-// are not present in the instantiated IfcViewerAPI.
+// are not present in the instantiated IfcViewerAPIExtended.
 const loadedModel = {
   ifcManager: {
-    getSpatialStructure: jest.fn(),
+    getSpatialStructure: jest.fn((eltId) => (makeTestTree())),
     getProperties: jest.fn((eltId) => ({})),
   },
   getIfcType: jest.fn(),
   geometry: {
     boundingBox: {
       getCenter: jest.fn(),
     },
+    attributes: {
+      expressID: 123,
+    },
   },
 }
 
@@ -47,7 +51,6 @@ const impl = {
         },
       },
     },
-    loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
     setWasmPath: jest.fn(),
     selector: {
       unpickIfcItems: jest.fn(),
@@ -65,6 +68,11 @@ const impl = {
       },
     },
   },
+  isolator: {
+    canBeHidden: jest.fn(() => {
+      return true
+    }),
+  },
   clipper: {
     active: false,
     deleteAllPlanes: jest.fn(() => {
@@ -88,13 +96,16 @@ const impl = {
     getRenderer: jest.fn(),
     getScene: jest.fn(),
     getCamera: jest.fn(),
+    getClippingPlanes: jest.fn(() => {
+      return []
+    }),
   },
+  loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
   getProperties: jest.fn((modelId, eltId) => {
     return loadedModel.ifcManager.getProperties(eltId)
   }),
   setSelection: jest.fn(),
   pickIfcItemsByID: jest.fn(),
-  loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
 }
 const constructorMock = ifcjsMock.IfcViewerAPI
 constructorMock.mockImplementation(() => impl)
@@ -103,13 +114,13 @@ constructorMock.mockImplementation(() => impl)
 /**
  * @return {object} The single mock instance of IfcViewerAPI.
  */
-function __getIfcViewerAPIMockSingleton() {
+function __getIfcViewerAPIExtendedMockSingleton() {
   return impl
 }
 
 
 export {
   ifcjsMock as default,
   constructorMock as IfcViewerAPI,
-  __getIfcViewerAPIMockSingleton,
+  __getIfcViewerAPIExtendedMockSingleton as __getIfcViewerAPIExtendedMockSingleton,
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r622",
+  "version": "1.0.0-r648",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
@@ -32,6 +32,9 @@
     "@bldrs-ai/ifclib": "^5.3.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@iconscout/react-unicons": "^1.1.6",
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.8.4",

src/Components/CameraControl.test.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {act, render, screen, renderHook} from '@testing-library/react'
 import useStore from '../store/useStore'
 import ShareMock from '../ShareMock'
-import {__getIfcViewerAPIMockSingleton} from 'web-ifc-viewer'
+import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
 import CameraControl, {
   onHash,
   parseHashParams,
@@ -22,7 +22,7 @@ describe('CameraControl', () => {
 
   it('CameraControl', async () => {
     const {result} = renderHook(() => useStore((state) => state))
-    const viewer = __getIfcViewerAPIMockSingleton()
+    const viewer = __getIfcViewerAPIExtendedMockSingleton()
     await act(() => {
       result.current.setViewerStore(viewer)
     })

src/Components/CutPlaneMenu.test.jsx

@@ -5,7 +5,7 @@ import ShareControl from './ShareControl'
 import ShareMock from '../ShareMock'
 import useStore from '../store/useStore'
 import model from '../__mocks__/MockModel.js'
-import {__getIfcViewerAPIMockSingleton} from 'web-ifc-viewer'
+import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
 
 
 describe('CutPlaneMenu', () => {
@@ -29,7 +29,7 @@ describe('CutPlaneMenu', () => {
     const {getByTitle, getByText} = render(<ShareMock><CutPlaneMenu/></ShareMock>)
     const sectionButton = getByTitle('Section')
     const {result} = renderHook(() => useStore((state) => state))
-    const viewer = __getIfcViewerAPIMockSingleton()
+    const viewer = __getIfcViewerAPIExtendedMockSingleton()
     await act(() => {
       result.current.setViewerStore(viewer)
     })
@@ -52,7 +52,7 @@ describe('CutPlaneMenu', () => {
           <CutPlaneMenu/>
         </ShareMock>)
     const {result} = renderHook(() => useStore((state) => state))
-    const viewer = __getIfcViewerAPIMockSingleton()
+    const viewer = __getIfcViewerAPIExtendedMockSingleton()
     await act(() => {
       result.current.setViewerStore(viewer)
     })
@@ -68,7 +68,7 @@ describe('CutPlaneMenu', () => {
         </ShareMock>)
     const {result} = renderHook(() => useStore((state) => state))
     // mock contains one plane
-    const viewer = __getIfcViewerAPIMockSingleton()
+    const viewer = __getIfcViewerAPIExtendedMockSingleton()
     await act(() => {
       result.current.setViewerStore(viewer)
     })
@@ -80,7 +80,7 @@ describe('CutPlaneMenu', () => {
 
   it('Plane Offset is correct', async () => {
     const {result} = renderHook(() => useStore((state) => state))
-    const viewer = __getIfcViewerAPIMockSingleton()
+    const viewer = __getIfcViewerAPIExtendedMockSingleton()
     await act(() => {
       result.current.setViewerStore(viewer)
       result.current.setModelStore(model)

src/Components/NavTree.jsx

@@ -1,4 +1,6 @@
 import React, {useEffect, useState} from 'react'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {faEye, faEyeSlash, faGlasses} from '@fortawesome/free-solid-svg-icons'
 import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import {useNavigate} from 'react-router-dom'
@@ -8,6 +10,8 @@ import Typography from '@mui/material/Typography'
 import TreeItem, {useTreeItem} from '@mui/lab/TreeItem'
 import {computeElementPathIds} from '../utils/TreeUtils'
 import {handleBeforeUnload} from '../utils/event'
+import useStore from '../store/useStore'
+import IfcIsolator from '../Infrastructure/IfcIsolator'
 
 
 const NavTreePropTypes = {
@@ -39,8 +43,39 @@ const NavTreePropTypes = {
    * The id of the node.
    */
   nodeId: PropTypes.string.isRequired,
+  /**
+   * Determines if the tree node has a hide icon.
+   */
+  hasHideIcon: PropTypes.bool.isRequired,
 }
 
+/**
+ * @param {IfcIsolator} The IFC isoaltor
+ * @param {number} IFC element id
+ * @return {object} React component
+ */
+function HideIcon({elementId}) {
+  const isHidden = useStore((state) => state.hiddenElements[elementId])
+  const isIsolated = useStore((state) => state.isolatedElements[elementId])
+  const isTempIsolationModeOn = useStore((state) => state.isTempIsolationModeOn)
+  const viewer = useStore((state) => state.viewer)
+
+  const toggleHide = () => {
+    const toBeHidden = viewer.isolator.flattenChildren(elementId)
+    if (!isHidden) {
+      viewer.isolator.hideElementsById(toBeHidden)
+    } else {
+      viewer.isolator.unHideElementsById(toBeHidden)
+    }
+  }
+
+  const iconStyle = {float: 'right', margin: '4px'}
+  if (isTempIsolationModeOn && !isIsolated) {
+    iconStyle.opacity = 0.3
+  }
+  const icon = isIsolated ? faGlasses : (!isHidden ? faEye : faEyeSlash)
+  return <FontAwesomeIcon disabled={isTempIsolationModeOn} style={iconStyle} onClick={toggleHide} icon={icon}/>
+}
 
 /**
  * @param {object} model IFC model
@@ -63,6 +98,7 @@ export default function NavTree({
       icon: iconProp,
       expansionIcon,
       displayIcon,
+      hasHideIcon,
     } = props
 
     const {
@@ -83,6 +119,8 @@ export default function NavTree({
 
     const [selectedElement, setSelectedElement] = useState(null)
 
+    const hiddenElements = useStore((state) => state.hiddenElements)
+
     const handleSelectionClick = (event) => {
       handleSelection(event)
       setSelectedElement(element)
@@ -92,12 +130,15 @@ export default function NavTree({
 
     useEffect(() => {
       if (selectedElement) {
+        if (hiddenElements[selectedElement.expressID]) {
+          return
+        }
         const newPath =
               `${pathPrefix}/${computeElementPathIds(element, (elt) => elt.expressID).join('/')}`
         window.removeEventListener('beforeunload', handleBeforeUnload)
         navigate(newPath)
       }
-    }, [selectedElement, navigate])
+    }, [selectedElement, navigate, hiddenElements])
 
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -117,34 +158,43 @@ export default function NavTree({
         >
           {icon}
         </Box>
-        <Typography
-          variant='tree'
-          onClick={handleSelectionClick}
-        >
-          {label}
-        </Typography>
+        <div style={{width: '80%'}}>
+          <Typography
+            variant='tree'
+            onClick={handleSelectionClick}
+          >
+            {label}
+          </Typography>
+          {hasHideIcon &&
+            <div style={{display: 'contents'}}>
+              <HideIcon elementId={element.expressID}/>
+            </div>
+          }
+        </div>
       </div>
     )
   })
 
-
   CustomContent.propTypes = NavTreePropTypes
 
-
   const CustomTreeItem = (props) => {
     return <TreeItem ContentComponent={CustomContent} {...props}/>
   }
 
+  const viewer = useStore((state) => state.viewerStore)
 
-  let i = 0
-
+  const hasHideIcon = viewer.isolator.canBeHidden(element.expressID)
 
+  let i = 0
   // TODO(pablo): Had to add this React.Fragment wrapper to get rid of
   // warning about missing a unique key foreach item.  Don't really understand it.
   return (
     <CustomTreeItem
       nodeId={element.expressID.toString()}
       label={reifyName({properties: model}, element)}
+      ContentProps={{
+        hasHideIcon: hasHideIcon,
+      }}
     >
       {element.children && element.children.length > 0 ?
         element.children.map((child) => {

src/Components/NavTree.test.jsx

@@ -1,18 +1,32 @@
 import React from 'react'
-import {render} from '@testing-library/react'
+import {act, render, renderHook} from '@testing-library/react'
+import useStore from '../store/useStore'
 import ShareMock from '../ShareMock'
-import {MockViewer, newMockStringValueElt} from '../utils/IfcMock.test'
+import {newMockStringValueElt} from '../utils/IfcMock.test'
 import NavTree from './NavTree'
+import {IfcViewerAPIExtended} from '../Infrastructure/IfcViewerAPIExtended'
+import {actAsyncFlush} from '../utils/tests'
 
 
-test('NavTree for single element', () => {
-  const testLabel = 'Test node label'
-  const {getByText} = render(
-      <ShareMock>
-        <NavTree
-          viewer={new MockViewer}
-          element={newMockStringValueElt(testLabel)}
-        />
-      </ShareMock>)
-  expect(getByText(testLabel)).toBeInTheDocument()
+describe('CadView', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('NavTree for single element', async () => {
+    const testLabel = 'Test node label'
+    const {result} = renderHook(() => useStore((state) => state))
+    const viewer = new IfcViewerAPIExtended()
+    await act(() => {
+      result.current.setViewerStore(viewer)
+    })
+    const {getByText} = render(
+        <ShareMock>
+          <NavTree
+            element={newMockStringValueElt(testLabel)}
+          />
+        </ShareMock>)
+    await actAsyncFlush()
+    expect(getByText(testLabel)).toBeInTheDocument()
+  })
 })