Merge pull request #66 from buildrs/click-nav

MERGE ME
bldrs-ai · Dec 3, 2021 · ae7b083 · ae7b083
2 parents 9b47275 + 1f7c4c2
commit ae7b083
Show file tree

Hide file tree

Showing 15 changed files with 1,782 additions and 508 deletions.
diff --git a/config/build.js b/config/build.js
@@ -1,4 +1,5 @@
 import esbuild from 'esbuild';
+import svgrPlugin from 'esbuild-plugin-svgr';
 import * as common from './common.js';
 
 esbuild

diff --git a/docs/404.html b/docs/404.html
@@ -1 +1 @@
-<html><head><meta http-equiv="refresh" content="0; URL=/Share/"></head><body></body></html>
+<html><head><meta http-equiv="refresh" content="0; URL=/"></head><body></body></html>
diff --git a/docs/CNAME b/docs/CNAME
diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.js.map b/docs/index.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "builders",
-  "version": "0.1.0-r162",
+  "version": "0.1.0-r172",
   "main": "src/index.jsx",
   "homepage": "https://buildrs.github.io/",
   "scripts": {

diff --git a/public/404.html b/public/404.html
@@ -1 +1 @@
-<html><head><meta http-equiv="refresh" content="0; URL=/Share/"></head><body></body></html>
+<html><head><meta http-equiv="refresh" content="0; URL=/"></head><body></body></html>
diff --git a/src/Components/ItemProperties.jsx b/src/Components/ItemProperties.jsx
@@ -121,7 +121,6 @@ const prettyProps = (viewer, element, key, props, serial) => {
 const ItemProperties = ({ viewer, element }) => {
   const props = element; //viewer.getProperties(0, element.expressID);
   let serial = 0;
-  console.log('element', element);
   return (
     <table
       style={{
@@ -131,9 +130,11 @@ const ItemProperties = ({ viewer, element }) => {
         marginTop: 40,
       }}
     >
-      {Object.keys(props).map((key) =>
-        prettyProps(viewer, element, key, props, serial++)
-      )}
+      <tbody>
+        {Object.keys(props).map((key) =>
+          prettyProps(viewer, element, key, props, serial++)
+        )}
+      </tbody>
     </table>
   );
 };

diff --git a/src/Components/LoginMenu.jsx b/src/Components/LoginMenu.jsx
@@ -47,9 +47,7 @@ const LoginMenu = () => {
         open={open}
         onClose={handleClose}
       >
-        {/*<MenuItem onClick={handleClose}>Profile</MenuItem>*/}
         <MenuItem onClick={handleClose}>Version: {PkgJson.version}</MenuItem>
-        <Link to='/Share/about'>About</Link>
       </Menu>
     </div>
   );

diff --git a/src/Components/NavPanel.jsx b/src/Components/NavPanel.jsx
@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+
 const NavPanel = ({
   viewer,
   element,
@@ -46,12 +47,10 @@ const NavPanel = ({
   }
 
   React.useEffect(() => {
-    let eltPath = location.pathname.split(/nav\//);
-    if (eltPath.length == 1) {
+    if (location.pathname.length <= 0) {
       return;
     }
-    eltPath = eltPath[1];
-    const parts = eltPath.split(/\//);
+    const parts = location.pathname.split(/\//);
     if (parts.length > 0) {
       const targetId = parseInt(parts[parts.length - 1]);
       if (isFinite(targetId)) {
@@ -95,7 +94,7 @@ const NavPanel = ({
             <NavTree
               viewer={viewer}
               element={element}
-              pathPrefix={'/Share/nav'}
+              pathPrefix={''}
               onElementSelect={onElementSelect}
               setExpandedElements={setExpandedElements}
             />

diff --git a/src/Components/NavTree.jsx b/src/Components/NavTree.jsx
@@ -108,7 +108,6 @@ const NavTree = ({
               computeElementPath(element, (elt) => elt.expressID.toString())
             }
             style={{
-              color: 'black',
               textDecoration: 'none',
               fontFamily: 'helvetica',
               fontWeight: 600,

diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { IfcViewerAPI } from 'web-ifc-viewer';
 import { makeStyles } from '@mui/styles';
 import SearchIndex from './SearchIndex.js';
@@ -11,7 +10,7 @@ import SearchBar from '../Components/SearchBar';
 import ToolBar from '../Components/ToolBar';
 import gtag from '../utils/gtag.js';
 import SnackBarMessage from '../Components/SnackbarMessage';
-import { setupParentLinks } from '../utils/TreeUtils';
+import { computeElementPath, setupLookupAndParentLinks } from '../utils/TreeUtils';
 import { Color } from 'three';
 
 const debug = 0;
@@ -175,7 +174,7 @@ const CadView = () => {
 
   const onModelLoad = (rootElt, viewer) => {
     setRootElement(rootElt);
-    setupParentLinks(rootElt);
+    setupLookupAndParentLinks(rootElt, elementsById);
     if (debug >= 2) {
       console.log(
         `CadView#fileOpen: json: '${JSON.stringify(rootElt, null, '  ')}'`
@@ -190,7 +189,7 @@ const CadView = () => {
       }
     }
     setDefaultExpandedElements(expanded);
-    setShowNavPanel(false);
+    setShowNavPanel(true);
     searchIndex.clearIndex();
     const index = new SearchIndex(rootElt, viewer);
     index.indexElement(rootElt);
@@ -201,13 +200,14 @@ const CadView = () => {
     setSearchIndex(index);
     setShowSearchBar(true);
   };
+  const navigate = useNavigate();
 
   // Similar to componentDidMount and componentDidUpdate:
   useEffect(() => {
     const container = document.getElementById('viewer-container');
     const viewer = new IfcViewerAPI({
       container,
-      backgroundColor: new Color('#808080'),
+      backgroundColor: new Color('#e0e0e0'),
     });
     setViewer(viewer);
     if (debug) {
@@ -243,41 +243,39 @@ const CadView = () => {
     window.ondblclick = async () => {
       const item = await viewer.IFC.pickIfcItem(true);
       if (item.modelID === undefined || item.id === undefined) return;
+      const path = computeElementPath(elementsById[item.id], elt => elt.expressID);
+      navigate(path);
+      setSelectedElement(item);
     };
 
     // Expanded version of viewer.loadIfcUrl('/index.ifc').  Using
     // this to get access to progress and error.
-    if (true) {
-      const parts = window.location.pathname.split(/[-\w\d]+.ifc/);
-      //console.log('Parts: ', parts);
-      //const filePath = './' + window.location.hash.substring(1);
-      //if (true) return;
-      const filePath = './haus.ifc';
-      if (debug) {
-        console.log('CadView#useEffect: load from server and hash: ', filePath);
-      }
-      viewer.IFC.loader.load(
-        filePath,
-        (model) => {
-          if (debug) {
-            console.log('CadView#useEffect$onLoad, model: ', model, viewer);
-          }
-          viewer.IFC.addIfcModel(model);
-          const rootEltPromise = model.ifcManager.getSpatialStructure(0, true);
-          rootEltPromise.then((rootElt) => {
-            onModelLoad(rootElt, viewer);
-          });
-        },
-        (progressEvent) => {
-          if (debug) {
-            console.log('CadView#useEffect$onProgress', progressEvent);
-          }
-        },
-        (error) => {
-          console.error('CadView#useEffect$onError', error);
-        }
-      );
+    const parts = window.location.pathname.split(/[-\w\d]+.ifc/);
+    const filePath = './haus.ifc';
+    if (debug) {
+      console.log('CadView#useEffect: load from server and hash: ', filePath);
     }
+    viewer.IFC.loader.load(
+      filePath,
+      (model) => {
+        if (debug) {
+          console.log('CadView#useEffect$onLoad, model: ', model, viewer);
+        }
+        viewer.IFC.addIfcModel(model);
+        const rootEltPromise = model.ifcManager.getSpatialStructure(0, true);
+        rootEltPromise.then((rootElt) => {
+          onModelLoad(rootElt, viewer);
+        });
+      },
+      (progressEvent) => {
+        if (debug) {
+          console.log('CadView#useEffect$onProgress', progressEvent);
+        }
+      },
+      (error) => {
+        console.error('CadView#useEffect$onError', error);
+      }
+    );
   }, []);
 
   const loadIfc = async (file) => {

diff --git a/src/index.jsx b/src/index.jsx
@@ -9,14 +9,14 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
 
 
 function Routed() {
-  const nav = useNavigate();
+  const navigate = useNavigate();
 
   React.useEffect(() => {
     const referrer = document.referrer;
     if (referrer) {
       const path = new URL(document.referrer).pathname;
       if (path.length > 1) {
-        nav(path);
+        navigate(path);
       }
     }
   }, []);

diff --git a/src/utils/TreeUtils.js b/src/utils/TreeUtils.js
@@ -1,22 +1,38 @@
-/**
- * Visits an element tree and sets parent links for each element.
- */
-function setupParentLinks(elt) {
+function visitTree(elt, observeCb) {
   if (elt && elt.children) {
     for (const child of elt.children) {
-      child.parent = elt;
-      setupParentLinks(child);
+      observeCb(child, elt);
+      visitTree(child, observeCb);
     }
   }
 }
 
 
+/**
+ * Visits an element tree and sets parent links for each element.
+ */
+function setupLookupAndParentLinks(rootElt, elementsById) {
+  if (elementsById === undefined || elementsById == null) {
+    throw new Error('Illegal argument: elementsById undefined');
+  }
+  visitTree(rootElt, (elt, parent) => {
+    elementsById[parent.expressID] = parent;
+    elementsById[elt.expressID] = elt;
+    elt.parent = parent;
+  });
+}
+
+
 function computeElementPath(elt, getNameCb) {
+  if (getNameCb === undefined || getNameCb == null) {
+    throw new Error('Illegal argument: getNameCb undefined');
+  }
   return (elt.parent ? computeElementPath(elt.parent, getNameCb) : '' ) + '/' + getNameCb(elt);
 }
 
 
 export {
   computeElementPath,
-  setupParentLinks
+  setupLookupAndParentLinks,
+  visitTree
 }
diff --git a/src/utils/TreeUtils.test.js b/src/utils/TreeUtils.test.js
@@ -1,8 +1,8 @@
 import Testing from '@pablo-mayrgundter/testing.js/testing.js';
 import {
   computeElementPath,
-  setupParentLinks
-} from './TreeUtils';
+  setupLookupAndParentLinks
+} from './TreeUtils.js';
 
 
 const tests = new Testing();
@@ -11,26 +11,33 @@ const tests = new Testing();
 function makeTestTree() {
   return {
     name: 'a',
+    expressID: 0,
     children: [{
       name: 'b',
+      expressID: 1,
       children: [{
         name: 'c',
+        expressID: 2,
         children: []
       }]
     }]
   };
 }
 
 
-tests.add('Test setupParentLinks', () => {
+tests.add('Test setupLookupAndParentLinks', () => {
   const tree = makeTestTree();
-  setupParentLinks(tree);
+  const eltsById = {};
+  setupLookupAndParentLinks(tree, eltsById);
   const a = tree;
   const b = tree.children[0];
   const c = tree.children[0].children[0];
   tests.assertEquals(b, c.parent);
   tests.assertEquals(a, b.parent);
   tests.assertEquals(undefined, a.parent);
+  tests.assertEquals(a, eltsById[0]);
+  tests.assertEquals(b, eltsById[1]);
+  tests.assertEquals(c, eltsById[2]);
 })
 
 tests.add('Test computeElementPath', () => {
@@ -42,7 +49,8 @@ tests.add('Test computeElementPath', () => {
   tests.assertEquals('/a', computeElementPath(a, getNameCb));
   tests.assertEquals('/b', computeElementPath(b, getNameCb));
   tests.assertEquals('/c', computeElementPath(c, getNameCb));
-  setupParentLinks(tree);
+  const eltsById = {};
+  setupLookupAndParentLinks(tree, eltsById);
   tests.assertEquals('/a', computeElementPath(a, getNameCb));
   tests.assertEquals('/a/b', computeElementPath(b, getNameCb));
   tests.assertEquals('/a/b/c', computeElementPath(c, getNameCb));