Viewer: CutPlane: Created cut plane form normal and point

__mocks__/web-ifc-viewer.js

@@ -26,6 +26,12 @@ const impl = {
   },
   clipper: {
     active: false,
+    deleteAllPlanes: jest.fn(() => {
+      return 'cutPlane'
+    }),
+    createFromNormalAndCoplanarPoint: jest.fn(() => {
+      return 'createFromNormalAndCoplanarPoint'
+    }),
   },
   container: {
     style: {},

package.json

@@ -34,6 +34,7 @@
     "@mui/styles": "^5.9.2",
     "@octokit/rest": "^19.0.3",
     "clsx": "^1.2.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/Components/CutPlaneMenu.jsx

@@ -0,0 +1,117 @@
+import React, {useState, useEffect} from 'react'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import {makeStyles} from '@mui/styles'
+import {Vector3} from 'three'
+import {useLocation} from 'react-router-dom'
+import CutPlaneIcon from '../assets/2D_Icons/CutPlane.svg'
+import useStore from '../store/useStore'
+import {TooltipIconButton} from './Buttons'
+import {getModelCenter} from '../utils/cutPlane'
+import {addHashParams, getHashParams, removeHashParams} from '../utils/location'
+
+
+/**
+ * BasicMenu used when there are several option behind UI button
+ * show/hide from the right of the screen.
+ *
+ * @param {Array} listOfOptions Title for the drawer
+ * @return {object} ItemPropertiesDrawer react component
+ */
+export default function CutPlaneMenu({listOfOptions, icon, title}) {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [cutPlaneDirection, setCutPlaneDirection] = useState('')
+  const open = Boolean(anchorEl)
+  const model = useStore((state) => state.modelStore)
+  const PLANE_PREFIX = 'p'
+  const classes = useStyles()
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+  const viewer = useStore((state) => state.viewerStore)
+  const location = useLocation()
+
+  const createPlane = (normalDirection) => {
+    viewer.clipper.deleteAllPlanes()
+    const modelCenter = getModelCenter(model)
+    const planeHash = getHashParams(location, 'p')
+    if (normalDirection === cutPlaneDirection) {
+      viewer.clipper.deleteAllPlanes()
+      removeHashParams(window.location, PLANE_PREFIX)
+      setCutPlaneDirection('')
+      return
+    }
+    let normal
+    switch (normalDirection) {
+      case 'x':
+        normal = new Vector3(-1, 0, 0)
+        break
+      case 'y':
+        normal = new Vector3(0, -1, 0)
+        break
+      case 'z':
+        normal = new Vector3(0, 0, -1)
+        break
+      default:
+        normal = new Vector3(0, 1, 0)
+        break
+    }
+    if (!planeHash || planeHash !== normalDirection ) {
+      addHashParams(window.location, PLANE_PREFIX, {planeAxis: normalDirection})
+    }
+    setCutPlaneDirection(normalDirection)
+    return viewer.clipper.createFromNormalAndCoplanarPoint(normal, modelCenter)
+  }
+
+  useEffect(() => {
+    const planeHash = getHashParams(location, 'p')
+    if (planeHash && model && viewer) {
+      const planeDirection = planeHash.split(':')[1]
+      createPlane(planeDirection)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [model])
+
+  return (
+    <div>
+      <TooltipIconButton
+        title={'Section'}
+        icon={<CutPlaneIcon/>}
+        onClick={handleClick}
+      />
+      <Menu
+        elevation={1}
+        id='basic-menu'
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        className={classes.root}
+        anchorOrigin={{vertical: 'top', horizontal: 'center'}}
+        transformOrigin={{vertical: 'top', horizontal: 'center'}}
+        PaperProps={{
+          style: {
+            left: '300px',
+            transform: 'translateX(-40px) translateY(-40px)',
+          },
+        }}
+      >
+        <MenuItem onClick={() => createPlane('x')} selected={cutPlaneDirection === 'x'}> X</MenuItem>
+        <MenuItem onClick={() => createPlane('y')} selected={cutPlaneDirection === 'y'}>Y</MenuItem>
+        <MenuItem onClick={() => createPlane('z')} selected={cutPlaneDirection === 'z'}>Z</MenuItem>
+      </Menu>
+    </div>
+  )
+}
+
+
+const useStyles = makeStyles({
+  root: {
+    '& .Mui-selected': {
+      border: '1px solid lightGray',
+    },
+  },
+})

src/Components/CutPlaneMenu.test.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {act, fireEvent, render, renderHook} from '@testing-library/react'
+import CutPlaneMenu from './CutPlaneMenu'
+import ShareMock from '../ShareMock'
+import useStore from '../store/useStore'
+import {__getIfcViewerAPIMockSingleton} from 'web-ifc-viewer'
+
+
+describe('CutPlane', () => {
+  it('Section Button', () => {
+    const {getByTitle} = render(<ShareMock><CutPlaneMenu/></ShareMock>)
+    expect(getByTitle('Section')).toBeInTheDocument()
+  })
+
+  it('Section Menu', () => {
+    const {getByTitle, getByText} = render(<ShareMock><CutPlaneMenu/></ShareMock>)
+    const sectionButton = getByTitle('Section')
+    fireEvent.click(sectionButton)
+    expect(getByText('X')).toBeInTheDocument()
+    expect(getByText('Y')).toBeInTheDocument()
+    expect(getByText('Z')).toBeInTheDocument()
+  })
+
+  it('X Section', async () => {
+    const {getByTitle, getByText} = render(<ShareMock><CutPlaneMenu/></ShareMock>)
+    const sectionButton = getByTitle('Section')
+    const {result} = renderHook(() => useStore((state) => state))
+    const viewer = __getIfcViewerAPIMockSingleton()
+    await act(() => {
+      result.current.setViewerStore(viewer)
+    })
+    fireEvent.click(sectionButton)
+    const xDirection = getByText('X')
+    fireEvent.click(xDirection)
+    const callDeletePlanes = viewer.clipper.deleteAllPlanes.mock.calls
+    const callCreatePlanes = viewer.clipper.deleteAllPlanes.mock.calls
+    expect(callDeletePlanes.length).toBe(1)
+    expect(callCreatePlanes.length).toBe(1)
+  })
+
+  it('X Section in URL', async () => {
+    render(
+        <ShareMock
+          initialEntries={['/v/p/index.ifc#p:x']}
+        >
+          <CutPlaneMenu/>
+        </ShareMock>)
+    const {result} = renderHook(() => useStore((state) => state))
+    const viewer = __getIfcViewerAPIMockSingleton()
+    await act(() => {
+      result.current.setViewerStore(viewer)
+    })
+    const callDeletePlanes = viewer.clipper.deleteAllPlanes.mock.calls
+    const callCreatePlanes = viewer.clipper.deleteAllPlanes.mock.calls
+    expect(callDeletePlanes.length).toBe(1)
+    expect(callCreatePlanes.length).toBe(1)
+  })
+})
+

src/Components/ItemProperties.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {act, render, renderHook, screen, waitFor} from '@testing-library/react'
+import {act, render, screen, waitFor, renderHook} from '@testing-library/react'
 import ShareMock from '../ShareMock'
 import {MockModel} from '../utils/IfcMock.test'
 import useStore from '../store/useStore'

src/Components/OperationsGroup.jsx

@@ -1,15 +1,14 @@
 import React from 'react'
 import {makeStyles} from '@mui/styles'
+import useStore from '../store/useStore'
 import CameraControl from './CameraControl'
+import CutPlaneMenu from './CutPlaneMenu'
 import ShareControl from './ShareControl'
 import ShortcutsControl from './ShortcutsControl'
 import {TooltipIconButton} from './Buttons'
-import CutPlaneIcon from '../assets/2D_Icons/CutPlane.svg'
 import ClearIcon from '../assets/2D_Icons/Clear.svg'
 import MarkupIcon from '../assets/2D_Icons/Markup.svg'
 import ListIcon from '../assets/2D_Icons/List.svg'
-import {useIsMobile} from './Hooks'
-import useStore from '../store/useStore'
 
 
 /**
@@ -20,14 +19,15 @@ import useStore from '../store/useStore'
  * @param {Function} unSelectItem deselects currently selected element
  * @return {React.Component}
  */
-export default function OperationsGroup({viewer, unSelectItem}) {
+export default function OperationsGroup({unSelectItem}) {
   const turnCommentsOn = useStore((state) => state.turnCommentsOn)
   const toggleIsPropertiesOn = useStore((state) => state.toggleIsPropertiesOn)
   const openDrawer = useStore((state) => state.openDrawer)
   const selectedElement = useStore((state) => state.selectedElement)
   const isCommentsOn = useStore((state) => state.isCommentsOn)
-  const classes = useStyles({isCommentsOn: isCommentsOn})
+  const viewer = useStore((state) => state.viewerStore)
 
+  const classes = useStyles({isCommentsOn: isCommentsOn})
   const toggle = (panel) => {
     openDrawer()
     if (panel === 'Properties') {
@@ -38,6 +38,7 @@ export default function OperationsGroup({viewer, unSelectItem}) {
     }
   }
 
+
   return (
     <div className={classes.container}>
       <div className={classes.topGroup}>
@@ -58,18 +59,10 @@ export default function OperationsGroup({viewer, unSelectItem}) {
           /> :
           null
         }
-        {useIsMobile() ?
-          <TooltipIconButton
-            title="Section plane"
-            onClick={() => viewer.clipper.createPlane()}
-            icon={<CutPlaneIcon/>}
-          /> :
-          null
-        }
+        <CutPlaneMenu/>
         <TooltipIconButton title="Clear selection" onClick={unSelectItem} icon={<ClearIcon/>}/>
         <ShortcutsControl/>
       </div>
-      {/* Invisible */}
       <CameraControl viewer={viewer}/>
     </div>
   )

src/utils/cutPlane.js

@@ -0,0 +1,78 @@
+import {Box3, BufferAttribute, BufferGeometry, Mesh, Vector3} from 'three'
+
+
+/* eslint-disable no-magic-numbers */
+/**
+ * getSelectionAxisFromBoundingBox is the helper method for the cutplane logic
+ *
+ * @param {object} boundingBox bouding box
+ * @return {object}
+ */
+export function getSelectionAxisFromBoundingBox(boundingBox) {
+  return {
+    x: {
+      size: Math.abs( boundingBox.max.x - boundingBox.min.x),
+      center: (boundingBox.max.x + boundingBox.min.x) / 2,
+    },
+    y: {
+      size: Math.abs( boundingBox.max.y - boundingBox.min.y),
+      center: (boundingBox.max.y + boundingBox.min.y) / 2,
+    },
+    z: {
+      size: Math.abs(boundingBox.max.z - boundingBox.min.z ),
+      center: (boundingBox.max.z + boundingBox.min.z) / 2,
+    },
+  }
+}
+
+
+/**
+ * getModelCenter return the center of the model based on bounding box
+ *
+ * @param {object} ifcModel bouding box
+ * @return {object} centerCoordinates
+ */
+export function getModelCenter(ifcModel) {
+  return new Vector3(
+      (ifcModel?.geometry.boundingBox.max.x +
+        ifcModel?.geometry.boundingBox.min.x) /
+      2,
+      (ifcModel?.geometry.boundingBox.max.y +
+        ifcModel?.geometry.boundingBox.min.y) /
+      2,
+      (ifcModel?.geometry.boundingBox.max.z +
+        ifcModel?.geometry.boundingBox.min.z) /
+      2,
+  )
+}
+
+
+/**
+ * getElementBoundingBox creates a bounding box around the model
+ *
+ * @param {object} selection seclected meshes
+ * @return {object} boudingBox geometry
+ */
+export function getElementBoundingBox(selection) {
+  const geometry = new BufferGeometry()
+  const coordinates = []
+  const alreadySaved = new Set()
+  const position = selection.geometry.attributes['position']
+  const vertices = Float32Array.from(coordinates)
+  const mesh = new Mesh(geometry)
+  const boundingBox = new Box3()
+  geometry.setAttribute('position', new BufferAttribute(vertices, selection.geometry.index.count))
+  boundingBox.setFromObject(mesh)
+
+  for (let i = 0; i < selection.geometry.index.array.length; i++) {
+    if (!alreadySaved.has(selection.geometry.index.array[i])) {
+      coordinates.push(position.getX(selection.geometry.index.array[i]))
+      coordinates.push(position.getY(selection.geometry.index.array[i]))
+      coordinates.push(position.getZ(selection.geometry.index.array[i]))
+      alreadySaved.add(selection.geometry.index.array[i])
+    }
+  }
+
+  return boundingBox
+}
+