fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vim-webgl-component",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "A demonstration app built on top of the vim-webgl-viewer",
   "files": [
     "dist"

src/bim/bimPanel.tsx

@@ -13,10 +13,13 @@ import { Grouping, toTreeData } from './bimTreeData'
 import { ViewerState } from '../viewerState'
 import { AugmentedElement } from '../helpers/element'
 import { ComponentSettings, isFalse } from '../settings/settings'
-import { whenAllTrue, whenTrue } from '../helpers/utils'
+import { whenAllTrue, whenSomeTrue, whenTrue } from '../helpers/utils'
 import { BimInfoPanel } from './bimInfoPanel'
 import { BimInfoPanelRef } from './bimInfoData'
 
+// Not sure why I need this,
+// when I inline this method in component.tsx it causes an error.
+// The error appears only in JSFiddle when the module is directly imported in a script tag.
 export function OptionalBimPanel (props: {
   viewer: VIM.Viewer
   camera: ComponentCamera
@@ -27,13 +30,10 @@ export function OptionalBimPanel (props: {
   treeRef: React.MutableRefObject<TreeActionRef>
   bimInfoRef: BimInfoPanelRef
 }) {
-  if (
-    (isFalse(props.settings.ui.bimTreePanel) &&
-     isFalse(props.settings.ui.bimInfoPanel))
-  ) {
-    return null
-  }
-  return React.createElement(BimPanel, props)
+  return whenSomeTrue([
+    props.settings.ui.bimTreePanel,
+    props.settings.ui.bimInfoPanel],
+  React.createElement(BimPanel, props))
 }
 
 /**
@@ -105,13 +105,15 @@ export function BimPanel (props: {
 
   const last =
     props.viewerState.selection[props.viewerState.selection.length - 1]
-  const full = isFalse(props.settings.ui.bimInfoPanel)
+  const fullTree = isFalse(props.settings.ui.bimInfoPanel)
+  const fullInfo = isFalse(props.settings.ui.bimTreePanel)
+
   return (
-    <div className={`vim-bim-panel vc-inset-0 vc-absolute vc-h-full vc-w-full ${full ? 'full-tree' : ''} ${props.visible ? '' : 'vc-hidden'}`}>
+    <div className={`vim-bim-panel vc-inset-0 vc-absolute vc-h-full vc-w-full ${fullTree ? 'full-tree' : ''} ${props.visible ? '' : 'vc-hidden'}`}>
       {isFalse(props.settings.ui.bimTreePanel)
         ? null
         : (
-        <div className={`vim-bim-upper vc-flex vc-flex-col vc-absolute vc-w-full ${full ? 'vc-h-full' : 'vc-h-[49%]'} ${props.viewerState.elements.length > 0 ? '' : 'vc-hidden'}`}>
+        <div className={`vim-bim-upper vc-flex vc-flex-col vc-absolute vc-w-full ${fullTree ? 'vc-h-full' : 'vc-h-[49%]'} ${props.viewerState.elements.length > 0 ? '' : 'vc-hidden'}`}>
           <h2
             className="vim-bim-upper-title vc-title vc-text-xs vc-font-bold vc-uppercase">
             Project Inspector
@@ -141,17 +143,16 @@ export function BimPanel (props: {
         ],
         divider())
       }
-
       {whenTrue(props.settings.ui.bimInfoPanel,
-        <div className='vim-bim-lower-container vc-absolute vc-top-[50%] vc-bottom-0 vc-bottom vc-left-0 vc-right-0'>
-            <BimInfoPanel
-              object={last}
-              vim={props.viewerState.vim}
-              elements={filteredElements}
-              full={isFalse(props.settings.ui.bimTreePanel)}
-              bimInfoRef={props.bimInfoRef}
-            />
-          </div>)}
+        <div className={`vim-bim-lower-container vc-absolute ${fullInfo ? 'vc-top-0' : 'vc-top-[50%]'} vc-bottom-0 vc-bottom vc-left-0 vc-right-0`}>
+          <BimInfoPanel
+            object={last}
+            vim={props.viewerState.vim}
+            elements={filteredElements}
+            full={isFalse(props.settings.ui.bimTreePanel)}
+            bimInfoRef={props.bimInfoRef}
+          />
+        </div>)}
     </div>
   )
 }

src/bim/bimTree.tsx

@@ -89,7 +89,7 @@ export function BimTree (props: {
 
   // Scroll view so that element is visible, if needed.
   useEffect(() => {
-    if (props.treeData && objects.length === 1) {
+    if (props.treeData && objects.length === 1 && div.current) {
       scrollToSelection(div.current)
       const [first] = props.viewer.selection.objects
       focus.current = props.treeData.getNodeFromElement(first.element)
@@ -143,7 +143,7 @@ export function BimTree (props: {
       onBlur={() => (props.viewer.inputs.keyboard.arrowsEnabled = true)}
     >
       <ControlledTreeEnvironment
-        renderDepthOffset={Math.min(div.current.clientWidth * 0.04, 10)}
+        renderDepthOffset={div.current ? Math.min(div.current.clientWidth * 0.04, 10) : 10 }
         items={props.treeData.nodes}
 
         getItemTitle={(item) => (item as VimTreeNode).title}

src/component.tsx

@@ -160,7 +160,7 @@ export function VimComponent (props: {
 
   const sidePanel = () => (
     <>
-      <OptionalBimPanel
+      {<OptionalBimPanel
         viewer={props.viewer}
         camera={camera}
         viewerState={viewerState}
@@ -169,7 +169,7 @@ export function VimComponent (props: {
         treeRef={treeRef}
         settings={settings.value}
         bimInfoRef={bimInfoRef}
-      />
+      />}
       <MenuSettings
         visible={side.getContent() === 'settings'}
         viewer={props.viewer}

src/helpers/utils.ts

@@ -13,5 +13,13 @@ export function whenAllTrue (value: (UserBoolean| boolean)[], element: JSX.Eleme
 }
 
 export function whenAllFalse (value: (UserBoolean| boolean)[], element: JSX.Element) {
-  return value.every(isTrue) ? element : null
+  return value.every(isFalse) ? element : null
+}
+
+export function whenSomeTrue (value: (UserBoolean| boolean)[], element: JSX.Element) {
+  return value.some(isTrue) ? element : null
+}
+
+export function whenSomeFalse (value: (UserBoolean| boolean)[], element: JSX.Element) {
+  return value.some(isFalse) ? element : null
 }

src/panels/icons.tsx

@@ -20,9 +20,9 @@ export type IconOptions = {
 }
 
 // Common
-export function settings ({ height, width, fill }: IconOptions) {
+export function settings ({ height, width, fill, className }: IconOptions) {
   return (
-    <svg height={height} width={width} viewBox="0 0 256 256">
+    <svg className={className} height={height} width={width} viewBox="0 0 256 256">
       <path
         fill={fill}
         d="M110.325,241.773c-2.567,7.495-10.811,11.566-18.271,9.145l-7.218-2.346c-7.522-2.44-11.739-10.548-9.41-18.133l.849-2.764c1.939-6.314-.798-14.567-6.152-18.465l-1.461-1.066c-5.339-3.882-14.046-3.953-19.452-.162l-2.369,1.662c-6.48,4.553-15.542,3.001-20.158-3.341l-4.466-6.136c-4.652-6.397-3.246-15.472,3.037-20.195l2.314-1.741c5.28-3.965,7.913-12.249,5.864-18.552l-.557-1.722c-2.038-6.279-9.043-11.455-15.646-11.563l-2.894-.047c-7.913-.13-14.334-6.709-14.334-14.552v-7.593c0-7.909,6.476-14.425,14.334-14.552l2.894-.047c6.602-.107,13.6-5.264,15.646-11.566l.557-1.718c2.041-6.279-.584-14.587-5.864-18.555l-2.314-1.738c-6.33-4.758-7.649-13.852-3.037-20.195l4.466-6.14c4.656-6.393,13.73-7.854,20.158-3.341l2.369,1.662c5.406,3.795,14.093,3.736,19.452-.162l1.461-1.062c5.335-3.882,8.091-12.151,6.152-18.465l-.849-2.768c-2.326-7.57,1.951-15.708,9.41-18.129l7.218-2.346c7.522-2.444,15.7,1.639,18.271,9.142l.94,2.74c2.144,6.247,9.209,11.313,15.835,11.313h1.805c6.602,0,13.69-5.066,15.831-11.313l.94-2.74c2.571-7.491,10.816-11.563,18.275-9.141l7.218,2.346c7.522,2.44,11.739,10.544,9.41,18.129l-.849,2.768c-1.939,6.314,.798,14.567,6.152,18.465l1.461,1.062c5.339,3.886,14.046,3.957,19.448,.162l2.369-1.662c6.48-4.549,15.546-2.997,20.158,3.341l4.47,6.14c4.652,6.397,3.246,15.472-3.037,20.195l-2.314,1.738c-5.28,3.969-7.913,12.253-5.868,18.555l.561,1.718c2.038,6.282,9.043,11.459,15.646,11.566l2.891,.047c7.917,.126,14.334,6.709,14.334,14.552v7.593c0,7.905-6.476,14.425-14.334,14.552l-2.891,.047c-6.602,.107-13.6,5.26-15.646,11.563l-.561,1.722c-2.038,6.279,.588,14.587,5.868,18.552l2.314,1.741c6.33,4.758,7.649,13.852,3.037,20.195l-4.47,6.136c-4.652,6.397-13.726,7.858-20.158,3.341l-2.369-1.662c-5.402-3.791-14.09-3.736-19.448,.162l-1.461,1.066c-5.335,3.882-8.091,12.151-6.152,18.465l.849,2.764c2.326,7.574-1.951,15.712-9.41,18.133l-7.218,2.346c-7.522,2.44-15.7-1.639-18.275-9.145l-.94-2.736c-2.14-6.247-9.205-11.313-15.831-11.313h-1.805c-6.602,0-13.69,5.066-15.835,11.313l-.94,2.736Zm17.674-45.77c37.559,0,68.002-30.443,68.002-68.002s-30.443-67.998-68.002-67.998-67.998,30.443-67.998,67.998,30.443,68.002,67.998,68.002Z"