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

package.json

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

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,
@@ -19,16 +20,19 @@ import {roundCoord} from '../utils/math'
  * URL hash and sets the camera position, as well as adds a hash
  * listener to do the same whenever the hash changes.
  *
- * @param {Object} viewer The IFC viewer, which contains the
+ * @param {Object} v The IFC viewer, which contains the
  *   cameraControls
  * @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,45 @@ 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) {
-    return
-  }
+  setCameraFromEncodedPosition(encodedParams, cameraControls)
+}
+
+
+/**
+ * Set the camera position
+ * @param {String} encodedPosition camera position
+ * @param {Object} cameraControls obtained from the viewer
+ */
+export function setCameraFromEncodedPosition(encodedPosition, cameraControls) {
+  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)
 }
 
 
@@ -116,7 +127,7 @@ export function parseHashParams(encodedParams) {
 }
 
 
-/** @return {boolean} True iff the camera hash params are present. */
+/** @return {boolean} True if the camera hash params are present. */
 export function hasValidUrlParams() {
   const encoded = getHashParams(window.location, CAMERA_PREFIX)
   if (encoded && parseHashParams(encoded)) {
@@ -128,13 +139,15 @@ 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) {
+  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