Add Issues/Notes (#235)

* add ui slice

add ifc slice to the store

add ifc slice state properties to cadview

add select IFC element test

add viewer test

add viewer test

new build

add ifc slice

clean up

clean up

add side drawer

new build

Add sideDrawer to cadView

clean up

add properties panel to the side drawer

add hightlight color to the theme

delete item panel drawer

add item properties test

clean up

clean up

clean up

fix mobile drawer

clean up

styles

refactor title out of the side drawer panel

resolve comments

add issue card + rewire issue control

add camera control

rewire operations group

rewire operations group

add Issue Slice to the store and connect it to operations group

add issue panel

style side Drawer

testing drawer on the top

show small image on mobile

new build

drawer style on mobile

drawer styles

style

mobile drawer

reset element state on model

style

style

fix camera

clean up

add camera controls

new build

addressed comments

new build

resolve comments

fixes

* fix lint spacing

* add tests

* clean up issue card test

* add issue control test

* fix issue control test

* testgin the issue control

* add test cases for issues and comments

* refactor issues test

* refactor state names

* refactor state names

* adjust left corner

* testing github call

* fix the tests

* clean up

* clean up

* fix spaces

* issue formating

* use Effect

* sort out run locally fetch logic

* reduce border radius

* fix open issue locally

* left corner

* theme

* theme

* working on the sidebar

* resolve the get comments test

* snackbar message share test

* fixing is running locally for issue control

* clean up

* place url code into sidedrawer

* side drawer wrapper

* add side drawer

* move the url use effect into the wrapper

* debugging the side drawer

* testing side drawer

* sort out the test

* fix mobile drawer

* Looks like you got a temp file in here

* addressed the comments

* sorting out the url test

* fixed bad merge

Co-authored-by: Pablo Mayrgundter <pablo.mayrgundter@gmail.com>

.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
     'semi': ['error', 'never'],
     'arrow-spacing': ['error', {before: true, after: true}],
     'space-infix-ops': ['error'],
+    'react/jsx-equals-spacing': [2, 'never'],
   },
   settings: {
     react: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r320",
+  "version": "1.0.0-r365",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {

src/Components/AboutControl.jsx

@@ -118,7 +118,7 @@ function AboutContent({installPrefix}) {
         <li><ShareIcon/> Share IFC models</li>
       </ul>
       <Typography variant='h5' color='info'>Highlighted Projects:</Typography>
-      <div className = {classes.demoContainer}>
+      <div className={classes.demoContainer}>
         <a href={`${installPrefix}/share/v/gh/Swiss-Property-AG/Portfolio/main/KNIK.ifc#c:-12.84,3.53,9.64,-5.33,2.61,1.71`}>
           <img alt="Tinyhouse" src={`${installPrefix}/Tinyhouse.png`} className={classes.demo}/>
         </a>

src/Components/BaseGroup.jsx

@@ -16,7 +16,7 @@ export default function BaseGroup({installPrefix, fileOpen}) {
   const classes = useStyles()
   return (
     <div className={classes.root}>
-      <OpenModelControl installPrefix={installPrefix} fileOpen = {fileOpen}/>
+      <OpenModelControl installPrefix={installPrefix} fileOpen={fileOpen}/>
       <SampleModelsControl/>
       <AboutControl installPrefix={installPrefix}/>
     </div>

src/Components/Buttons.jsx

@@ -29,7 +29,7 @@ export const TooltipIconButton = ({
   return (
     <Tooltip classes={{tooltip: classes.root}} title={title} describeChild placement={placement}
       data-testid={dataTestId}>
-      <IconButton className = {classes.root} onClick={onClick} size={size}>
+      <IconButton className={classes.root} onClick={onClick} size={size}>
         {icon}
       </IconButton>
     </Tooltip>

src/Components/CameraControl.jsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react'
 import {useLocation} from 'react-router'
+import useStore from '../store/useStore'
 import debug from '../utils/debug'
 import {
   addHashListener,
@@ -24,11 +25,14 @@ import {roundCoord} from '../utils/math'
  * @return {Object} React component
  */
 export default function CameraControl({viewer}) {
-  const camera = viewer.IFC.context.ifcCamera.cameraControls
+  const setCameraControls = useStore((state) => state.setCameraControls)
+  const cameraControls = viewer.IFC.context.ifcCamera.cameraControls
+  setCameraControls(cameraControls)
   const location = useLocation()
   useEffect(() => {
-    onLoad(camera, location)
-  }, [camera, location])
+    onHash(location, cameraControls)
+    onLoad(location, cameraControls)
+  }, [location, cameraControls])
   // NOTE: NOT DISPLAYED
   return (
     <div style={{display: 'none'}}>Camera</div>
@@ -43,38 +47,49 @@ export const CAMERA_PREFIX = 'c'
 /**
  * Set camera position from window location hash and add listener for
  * hash change.
- * @param {Object} camera The IFCjs camera
  * @param {Object} location Either window.location or react-router location
+ * @param {Object} cameraControls obtained from the viewer
  */
-function onLoad(camera, location) {
+function onLoad(location, cameraControls) {
   debug().log('CameraControl#onLoad')
-  onHash(camera, location)
-  addHashListener('camera', () => onHash(camera, location))
+  addHashListener('camera', () => onHash(location, cameraControls))
 }
 
 
 // exported for testing only
 /**
  * Sets the camera position to the coordinate encoded in the URL
  * hash if it is present
- * @param {Object} camera The IFCjs camera
  * @param {Object} location window.location
+ * @param {Object} cameraControls obtained from the viewer
  */
-export function onHash(camera, location) {
+export function onHash(location, cameraControls) {
   const encodedParams = getHashParams(location, CAMERA_PREFIX)
   if (encodedParams == undefined) {
     return
   }
-  const coords = parseHashParams(encodedParams)
-  if (coords == undefined) {
+  setCameraFromEncodedPosition(encodedParams, cameraControls)
+}
+
+
+/**
+ * Set the camera position
+ * @param {String} encodedPosition camera position
+ * @param {Object} cameraControls obtained from the viewer
+ */
+export function setCameraFromEncodedPosition(encodedPosition, cameraControls) {
+  // addCameraUrlParams is accessed from the issue card and it is undefined on the first render
+  if (!cameraControls) {
     return
   }
+  const coords = parseHashParams(encodedPosition)
   if (coords) {
-    camera.setPosition(coords[0], coords[1], coords[2], true)
+    cameraControls.setPosition(coords[0], coords[1], coords[2], true)
     if (coords.length == 6) {
-      camera.setTarget(coords[3], coords[4], coords[5], true)
+      cameraControls.setTarget(coords[3], coords[4], coords[5], true)
     }
   }
+  addCameraUrlParams(cameraControls)
 }
 
 
@@ -128,13 +143,16 @@ export function hasValidUrlParams() {
 
 /**
  * Adds camera coords to url.
- * @param {Object} viewer IFCjs viewer that contains a camera.
+ * @param {Object} cameraControls obtained from the viewer
  */
-export function addCameraUrlParams(viewer) {
-  const camera = viewer.IFC.context.ifcCamera
-  const position = camera.cameraControls.getPosition()
+export function addCameraUrlParams(cameraControls) {
+  // addCameraUrlParams is accessed from the issue card and it is undefined on the first render
+  if (!cameraControls) {
+    return
+  }
+  const position = cameraControls.getPosition()
   let camArr = roundCoord(...position, 2)
-  const target = camera.cameraControls.getTarget()
+  const target = cameraControls.getTarget()
   if (target.x == 0 && target.y == 0 && target.z == 0) {
     camArr = camArr.concat(0)
   } else {

src/Components/CameraControl.test.jsx

@@ -27,7 +27,7 @@ test('CameraControl', () => {
 test('onHash, position', () => {
   const cam = new MockCamera()
   const location = {hash: '#c:1,2,3'}
-  onHash(cam, location)
+  onHash(location, cam)
   const expectCam = new MockCamera(1, 2, 3)
   expectCam.setDoTween(true)
   expect(cam).toStrictEqual(expectCam)
@@ -37,7 +37,7 @@ test('onHash, position', () => {
 test('onHash, target', () => {
   const cam = new MockCamera()
   const location = {hash: '#c:1,2,3,4,5,6'}
-  onHash(cam, location)
+  onHash(location, cam)
   const expectCam = new MockCamera(1, 2, 3, 4, 5, 6)
   expectCam.setDoTween(true)
   expect(cam).toStrictEqual(expectCam)
@@ -80,6 +80,22 @@ class MockCamera {
   }
 
 
+  /**
+   * @return {Array} camera position
+   */
+  getPosition() {
+    return [this.x, this.y, this.z]
+  }
+
+
+  /**
+   * @return {Array} camera target
+   */
+  getTarget() {
+    return [this.x, this.y, this.z]
+  }
+
+
   /**
    * @param {Number} tx
    * @param {Number} ty

src/Components/GuideControl.jsx

@@ -18,7 +18,7 @@ export default function GuidePanelControl({offsetTop}) {
     <IconButton onClick={() => {
       setOpen(!open)
     }}>
-      <Question className = {classes.icon}/> {open && <GuidePanel openToggle={() => {
+      <Question className={classes.icon}/> {open && <GuidePanel openToggle={() => {
         setOpen(!open)
       }} offsetTop={offsetTop}/>}
     </IconButton>)
@@ -34,9 +34,9 @@ export default function GuidePanelControl({offsetTop}) {
 function GuidePanel({openToggle, offsetTop}) {
   const classes = useStyles({offsetTop: offsetTop})
   return (
-    <div className = {classes.container}>
+    <div className={classes.container}>
       <Paper elevation={3} className={classes.panel}>
-        <div className = {classes.closeButton}><Close onClick = {openToggle}/></div>
+        <div className={classes.closeButton}><Close onClick={openToggle}/></div>
         <h1>Guide</h1>
         <p>To select an element:</p>
         <ul>