Clear element path on unselect (#374)

* change url to root when an element is unselected

* put elements into the store

* clear selection

* clean up

* clean up

* reset cutplane

* turn the element test back on

src/Components/CutPlaneMenu.jsx

@@ -18,9 +18,8 @@ import {addHashParams, getHashParams, removeHashParams} from '../utils/location'
  * @param {Array} listOfOptions Title for the drawer
  * @return {object} ItemPropertiesDrawer react component
  */
-export default function CutPlaneMenu({listOfOptions, icon, title}) {
+export default function CutPlaneMenu() {
   const [anchorEl, setAnchorEl] = useState(null)
-  const [cutPlaneDirection, setCutPlaneDirection] = useState('')
   const open = Boolean(anchorEl)
   const model = useStore((state) => state.modelStore)
   const PLANE_PREFIX = 'p'
@@ -33,6 +32,8 @@ export default function CutPlaneMenu({listOfOptions, icon, title}) {
     setAnchorEl(null)
   }
   const viewer = useStore((state) => state.viewerStore)
+  const cutPlaneDirection = useStore((state) => state.cutPlaneDirection)
+  const setCutPlaneDirection = useStore((state) => state.setCutPlaneDirection)
   const location = useLocation()
 
   const createPlane = (normalDirection) => {

src/Components/NavPanel.jsx

@@ -1,39 +1,14 @@
 import React from 'react'
 import Paper from '@mui/material/Paper'
-import Tooltip from '@mui/material/Tooltip'
 import TreeView from '@mui/lab/TreeView'
-import IconButton from '@mui/material/IconButton'
 import {makeStyles} from '@mui/styles'
 import NavTree from './NavTree'
 import {assertDefined} from '../utils/assert'
 import NodeClosed from '../assets/2D_Icons/NodeClosed.svg'
 import NodeOpen from '../assets/2D_Icons/NodeOpened.svg'
-import Hamburger from '../assets/2D_Icons/Menu.svg'
+import useStore from '../store/useStore'
 
 
-/**
- * Navigation panel control is a button that toggles the visibility of nav panel
- *
- * @param {number} topOffset global offset defined in the cad view
- * @param {Function} onClickMenuCb callback passed from cad view
- * @return {object} The button react component
- */
-export function NavPanelControl({topOffset, onClickMenuCb}) {
-  const classes = useStyles({topOffset: topOffset})
-  return (
-    <div className={classes.toggleButton}>
-      <Tooltip title="Model Navigation" placement="bottom">
-        <IconButton onClick={() => {
-          onClickMenuCb()
-        }}
-        >
-          <Hamburger className={classes.treeIcon}/>
-        </IconButton>
-      </Tooltip>
-    </div>
-  )
-}
-
 /**
  * @param {object} model
  * @param {object} element
@@ -47,14 +22,14 @@ export function NavPanelControl({topOffset, onClickMenuCb}) {
 export default function NavPanel({
   model,
   element,
-  selectedElements,
   defaultExpandedElements,
   expandedElements,
   setExpandedElements,
   pathPrefix,
 }) {
   assertDefined(...arguments)
   const classes = useStyles()
+  const selectedElements = useStore((state) => state.selectedElements)
   // TODO(pablo): the defaultExpanded array can contain bogus IDs with
   // no error.  Not sure of a better way to pre-open the first few
   // nodes besides hardcoding.

src/Containers/CadView.jsx

@@ -56,7 +56,6 @@ export default function CadView({
   const [rootElement, setRootElement] = useState({})
   const [elementsById] = useState({})
   const [defaultExpandedElements, setDefaultExpandedElements] = useState([])
-  const [selectedElements, setSelectedElements] = useState([])
   const [expandedElements, setExpandedElements] = useState([])
 
   // UI elts
@@ -76,6 +75,8 @@ export default function CadView({
 
   const setViewerStore = useStore((state) => state.setViewerStore)
   const snackMessage = useStore((state) => state.snackMessage)
+  const setSelectedElements = useStore((state) => state.setSelectedElements)
+  const setCutPlaneDirection = useStore((state) => state.setCutPlaneDirection)
 
 
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -341,9 +342,13 @@ export default function CadView({
 
   /** Unpick active scene elts and remove clip planes. */
   function unSelectItems() {
-    setSelectedElement({})
+    setSelectedElement(null)
     viewer.IFC.unpickIfcItems()
     viewer.clipper.deleteAllPlanes()
+    setSelectedElements(null)
+    setCutPlaneDirection(null)
+    const repoFilePath = modelPath.gitpath ? modelPath.getRepoPath() : modelPath.filepath
+    navigate(`${pathPrefix}${repoFilePath}`)
   }
 
 
@@ -455,7 +460,6 @@ export default function CadView({
           <NavPanel
             model={model}
             element={rootElement}
-            selectedElements={selectedElements}
             defaultExpandedElements={defaultExpandedElements}
             expandedElements={expandedElements}
             setExpandedElements={setExpandedElements}

src/Containers/CadView.test.jsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
-import {render, renderHook, screen, waitFor} from '@testing-library/react'
+import {render, renderHook, act, fireEvent, screen, waitFor} from '@testing-library/react'
+import useStore from '../store/useStore'
 import CadView from './CadView'
 import ShareMock from '../ShareMock'
 import {actAsyncFlush} from '../utils/tests'
@@ -12,7 +13,6 @@ describe('CadView', () => {
     jest.clearAllMocks()
   })
 
-
   it('renders with mock IfcViewerAPI', async () => {
     const modelPath = {
       filepath: `index.ifc`,
@@ -66,5 +66,41 @@ describe('CadView', () => {
     expect(getPropsCalls[1][1]).toBe(targetEltId) // call 2, arg 2
     await actAsyncFlush()
   })
-})
 
+  it('clear elements and planes on unselect', async () => {
+    const testTree = makeTestTree()
+    const targetEltId = testTree.children[0].expressID
+    const modelPath = {
+      filepath: `index.ifc/${targetEltId}`,
+      gitpath: undefined,
+    }
+    const viewer = __getIfcViewerAPIMockSingleton()
+    viewer._loadedModel.ifcManager.getSpatialStructure.mockReturnValueOnce(testTree)
+    const {result} = renderHook(() => useStore((state) => state))
+    await act(() => {
+      result.current.setSelectedElement(targetEltId)
+      result.current.setSelectedElements([targetEltId])
+      result.current.setCutPlaneDirection('y')
+    })
+    const {getByTitle} = render(
+        <ShareMock>
+          <CadView
+            installPrefix={'/'}
+            appPrefix={'/'}
+            pathPrefix={'/'}
+            modelPath={modelPath}
+          />
+        </ShareMock>)
+    expect(getByTitle('Section')).toBeInTheDocument()
+    const clearSelection = getByTitle('Clear selection')
+    act(() => {
+      fireEvent.click(clearSelection)
+    })
+    const callDeletePlanes = viewer.clipper.deleteAllPlanes.mock.calls
+    expect(callDeletePlanes.length).toBe(1)
+    expect(result.current.selectedElements).toBe(null)
+    expect(result.current.selectedElement).toBe(null)
+    expect(result.current.cutPlaneDirection).toBe(null)
+    await actAsyncFlush()
+  })
+})

src/store/IFCSlice.js

@@ -11,11 +11,13 @@ export default function createIFCSlice(set, get) {
     modelPath: null,
     modelStore: null,
     selectedElement: null,
+    selectedElements: [],
     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})),
     setCameraControls: (cameraControls) => set(() => ({cameraControls: cameraControls})),
   }
 }

src/store/UISlice.js

@@ -11,12 +11,14 @@ export default function createUISlice(set, get) {
     isPropertiesOn: false,
     isCommentsOn: false,
     snackMessage: null,
+    cutPlaneDirection: null,
     openDrawer: () => set(() => ({isDrawerOpen: true})),
     closeDrawer: () => set(() => ({isDrawerOpen: false})),
     toggleIsPropertiesOn: () => set((state) => ({isPropertiesOn: !state.isPropertiesOn})),
     toggleIsCommentsOn: () => set((state) => ({isCommentsOn: !state.isCommentsOn})),
     turnCommentsOn: () => set(() => ({isCommentsOn: true})),
     turnCommentsOff: () => set(() => ({isCommentsOn: false})),
     setSnackMessage: (message) => set(() => ({snackMessage: message})),
+    setCutPlaneDirection: (direction) => set(() => ({cutPlaneDirection: direction})),
   }
 }