Sroberge/0 3 10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vim-webgl-component",
-  "version": "0.3.9",
+  "version": "0.3.11-dev.0",
   "description": "A demonstration app built on top of the vim-webgl-viewer",
   "files": [
     "dist"
@@ -62,7 +62,7 @@
     "react-tooltip": "^4.2.21",
     "stats-js": "^1.0.1",
     "tailwindcss-scoped-preflight": "^3.2.8",
-    "vim-webgl-viewer": "2.0.4-dev.0"
+    "vim-webgl-viewer": "2.0.5-dev.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/component.tsx

@@ -10,11 +10,12 @@ import 'vim-webgl-viewer/dist/style.css'
 
 import * as VIM from 'vim-webgl-viewer/'
 import { AxesPanelMemo } from './panels/axesPanel'
-import { ControlBar, RestOfScreen } from './controlbar/controlBar'
+import { ControlBar, ControlBarCustomization } from './controlbar/controlBar'
+import { RestOfScreen } from './controlbar/restOfScreen'
 import { LoadingBoxMemo, MsgInfo, ComponentLoader } from './panels/loading'
 import { OptionalBimPanel } from './bim/bimPanel'
 import {
-  contextMenuCustomization,
+  ContextMenuCustomization,
   showContextMenu,
   VimContextMenuMemo
 } from './panels/contextMenu'
@@ -38,11 +39,14 @@ import { LogoMemo } from './panels/logo'
 import { VimComponentRef } from './vimComponentRef'
 import { createBimInfoState } from './bim/bimInfoData'
 import { whenTrue } from './helpers/utils'
+import { DeferredPromise } from './helpers/deferredPromise'
 
 export * as VIM from 'vim-webgl-viewer/'
 export const THREE = VIM.THREE
 export * as ContextMenu from './panels/contextMenu'
 export * as BimInfo from './bim/bimInfoData'
+export * as ControlBar from './controlbar/controlBar'
+export * as Icons from './panels/icons'
 export * from './vimComponentRef'
 export { getLocalComponentSettings as getLocalSettings } from './settings/settingsStorage'
 export { type ComponentSettings as Settings, type PartialComponentSettings as PartialSettings, defaultSettings } from './settings/settings'
@@ -56,24 +60,39 @@ export * from './container'
  * @returns An object containing the resulting container, reactRoot, and viewer.
  */
 export function createVimComponent (
-  onMount: (component: VimComponentRef) => void,
   container?: VimComponentContainer,
   componentSettings: PartialComponentSettings = {},
   viewerSettings: VIM.PartialViewerSettings = {}
-) {
+) : Promise<VimComponentRef> {
+  const promise = new DeferredPromise<VimComponentRef>()
+
+  // Create the viewer and container
   const viewer = new VIM.Viewer(viewerSettings)
   container = container ?? createContainer()
   viewer.viewport.reparent(container.gfx)
+
+  // Create the React root
   const reactRoot = createRoot(container.ui)
+
+  // Patch the component to clean up after itself
+  const patchRef = (cmp : VimComponentRef) => {
+    cmp.dispose = () => {
+      viewer.dispose()
+      container.dispose()
+      reactRoot.unmount()
+    }
+    return cmp
+  }
+
   reactRoot.render(
     <VimComponent
-      container={{ root: container.root, gfx: container.gfx, ui: container.ui }}
-      onMount={onMount}
+      container = {container}
       viewer={viewer}
+      onMount = {(cmp : VimComponentRef) => promise.resolve(patchRef(cmp))}
       settings={componentSettings}
     />
   )
-  return { container, reactRoot, viewer }
+  return promise
 }
 
 /**
@@ -102,7 +121,8 @@ export function VimComponent (props: {
     isTrue(settings.value.ui.bimInfoPanel),
     Math.min(props.container.root.clientWidth * 0.25, 340)
   )
-  const [contextMenu, setcontextMenu] = useState<contextMenuCustomization>()
+  const [contextMenu, setcontextMenu] = useState<ContextMenuCustomization>()
+  const [controlBar, setControlBar] = useState<ControlBarCustomization>()
   const bimInfoRef = createBimInfoState()
 
   const help = useHelp()
@@ -144,11 +164,15 @@ export function VimComponent (props: {
       contextMenu: {
         customize: (v) => setcontextMenu(() => v)
       },
+      controlBar: {
+        customize: (v) => setControlBar(() => v)
+      },
       message: {
         show: (message: string, info: string) => setMsg({ message, info }),
         hide: () => setMsg(undefined)
       },
-      bimInfo: bimInfoRef
+      bimInfo: bimInfoRef,
+      dispose: () => {}
     })
 
     // Clean up
@@ -200,6 +224,7 @@ export function VimComponent (props: {
           isolation={isolation}
           cursor={cursor}
           settings={settings.value}
+          customization={controlBar}
         />
         <AxesPanelMemo
           viewer={props.viewer}

src/container.tsx

@@ -19,6 +19,8 @@ export type VimComponentContainer = {
    * Div to hold viewer canvases and ui
    */
   gfx: HTMLDivElement
+
+  dispose: () => void
 }
 
 /**
@@ -49,5 +51,17 @@ export function createContainer (element?: HTMLElement): VimComponentContainer {
   root.append(gfx)
   root.append(ui)
 
-  return { root, ui, gfx }
+  const dispose = () => {
+    if (element === undefined) {
+      // We own the element, so we remove it
+      root.remove()
+    } else {
+      root.classList.remove('vim-component')
+      // We don't own the element, so we just remove our children
+      gfx.remove()
+      ui.remove()
+    }
+  }
+
+  return { root, ui, gfx, dispose }
 }