Split viewer setup and actions

src/components/ControlPanel.vue

@@ -14,7 +14,9 @@
       <div class="flex items-center py-3 px-4 border-b border-outline-2">
         <h2 class="text-sm font-medium text-gray-800">Control Panel</h2>
       </div>
-      <div class="py-3 px-4"></div>
+      <div class="py-3 px-4">
+        <button @click="getProperties">Get materials</button>
+      </div>
     </div>
   </div>
 </template>
@@ -22,6 +24,14 @@
 <script setup lang="ts">
 import IconCog from './icon/IconCog.vue'
 import { ref } from 'vue'
+import useViewer from '@/composables/viewer/actions'
+
+const { getObjectProperties } = useViewer()
 
 const isOpen = ref(false)
+
+const getProperties = async () => {
+  const properties = await getObjectProperties()
+  console.log('properties', properties)
+}
 </script>

src/components/SpeckleViewer.vue

@@ -6,16 +6,16 @@
 
 <script lang="ts" setup>
 import { onMounted, useTemplateRef } from 'vue'
-import useViewer from '@/composables/viewer'
+import useViewer from '@/composables/viewer/viewer'
 
 const canvas = useTemplateRef('canvas')
-const { init: initViewer, viewer, loadModelFromUrl } = useViewer()
+const { init: initViewer, addExtensions,loadModelFromUrl } = useViewer()
 
 onMounted(async () => {
-  if (!canvas.value) return
-  await initViewer(canvas.value)
-  await loadModelFromUrl(
-    'https://app.speckle.systems/projects/24c98619ac/models/38639656b8',
-  )
+    await initViewer(canvas.value)
+    addExtensions()
+    await loadModelFromUrl(
+      'https://app.speckle.systems/projects/24c98619ac/models/38639656b8'
+    )
 })
 </script>

src/composables/viewer.ts

@@ -1,53 +0,0 @@
-import { ref } from 'vue'
-import {
-  CameraController,
-  DefaultViewerParams,
-  SelectionExtension,
-  SpeckleLoader,
-  UrlHelper,
-  Viewer,
-} from '@speckle/viewer'
-
-let viewer: Viewer | null = null
-
-export default function useViewer() {
-  /**
-   * Initialize the viewer
-   * @param element - HTMLDivElement to initialize the viewer on
-   */
-  async function init(element: HTMLDivElement) {
-    // Set the default viewer parameters
-    const params = DefaultViewerParams
-    params.showStats = false
-    params.verbose = true
-
-    // Create the viewer instance on the element
-    viewer = new Viewer(element, params)
-
-    await viewer.init()
-
-    // Add the stock camera controller and selection extensions
-    viewer.createExtension(CameraController)
-    viewer.createExtension(SelectionExtension)
-  }
-
-  /**
-   * Load a model from a Speckle URL
-   * @param url - The URL of the Speckle model
-   */
-  const loadModelFromUrl = async (url: string) => {
-    if (!viewer) return
-
-    const urls = await UrlHelper.getResourceUrls(url)
-    urls.forEach(async url => {
-      const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
-      await viewer.loadObject(loader, true)
-    })
-  }
-
-  return {
-    init,
-    viewer,
-    loadModelFromUrl,
-  }
-}

src/composables/viewer/actions.ts

@@ -0,0 +1,14 @@
+import useViewer from '@/composables/viewer/viewer'
+
+export default function useViewerActions() {
+  const { viewer } = useViewer()
+
+  const getObjectProperties = async () => {
+    if (!viewer) return
+    return await viewer.getObjectProperties()
+  }
+
+  return {
+    getObjectProperties
+  }
+}

src/composables/viewer/viewer.ts

@@ -0,0 +1,63 @@
+import {
+  CameraController,
+  DefaultViewerParams,
+  SelectionExtension,
+  FilteringExtension,
+  SpeckleLoader,
+  UrlHelper,
+  Viewer
+} from '@speckle/viewer'
+import { Catalogue } from '@/extensions/Catalogue'
+
+let viewer: Viewer | undefined = undefined
+
+export default function useViewer() {
+  /**
+   * Initialize the viewer
+   * @param element - DOM element to initialize the viewer on
+   */
+  async function init(element: HTMLDivElement) {
+    const params = {
+      ...DefaultViewerParams,
+      showStats: false,
+      verbose: true
+    }
+
+    viewer = new Viewer(element, params)
+    await viewer.init()
+  }
+
+  /**
+   * The viewer can be extended with additional functionality by adding extensions
+   * You can use extensions provided by the viewer, or create your own
+   */
+  function addExtensions() {
+    if (!viewer) return
+    viewer.createExtension(CameraController)
+    viewer.createExtension(SelectionExtension)
+    viewer.createExtension(FilteringExtension)
+    // Example of a custom extension
+    viewer.createExtension(Catalogue)
+  }
+
+  /**
+   * Load a model from a Speckle URL
+   * @param url - The URL of the Speckle model
+   * @param authToken - This is required if the model is private
+   */
+  const loadModelFromUrl = async (url: string, authToken?: string) => {
+    const urls = await UrlHelper.getResourceUrls(url, authToken)
+    urls.forEach(async (url) => {
+      if (!viewer) return
+      const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
+      await viewer.loadObject(loader, true)
+    })
+  }
+
+  return {
+    init,
+    viewer,
+    loadModelFromUrl,
+    addExtensions
+  }
+}