feat(frontend): adds extra query params + transparency fix

packages/frontend/src/main/components/common/SpeckleViewer.vue

@@ -19,6 +19,12 @@ import { useInjectedViewer } from '@/main/lib/viewer/core/composables/viewer'
 
 export default {
   name: 'SpeckleViewer',
+  props: {
+    noScroll: {
+      type: Boolean,
+      default: false
+    }
+  },
   setup() {
     const { viewer, container, isInitializedPromise } = useInjectedViewer()
     return {
@@ -50,7 +56,11 @@ export default {
     this.$refs.rendererparent.appendChild(this.domElement)
 
     await this.viewer.unloadAll()
-
+    console.log(this.viewer)
+    console.log(this.noScroll)
+    if (this.noScroll) {
+      this.viewer.cameraHandler.controls.mouseButtons.wheel = 0
+    }
     this.viewer.onWindowResize()
     this.viewer.cameraHandler.onWindowResize()
     this.setupEvents()

packages/frontend/src/main/components/viewer/embed/EmbeddedCommitObjectViewer.vue

@@ -5,21 +5,30 @@
       class="embed-viewer-core__top-bar top-left bottom-left pa-4 d-flex justify-space-between"
       style="right: 0px; position: fixed; z-index: 5; width: 100%"
     >
-      <v-btn fab small style="z-index=1000" @click="drawer = !drawer">
+      <v-btn
+        v-if="!hideSidebar"
+        fab
+        small
+        style="z-index=1000"
+        @click="drawer = !drawer"
+      >
         <v-icon>mdi-menu</v-icon>
       </v-btn>
-      <span v-show="!drawer" class="caption d-inline-flex align-center">
-        <img src="@/assets/logo.svg" height="18" />
-        <span style="margin-top: 2px" class="primary--text">
-          <a href="https://speckle.xyz" target="_blank" class="text-decoration-none">
-            <b>Powered by Speckle</b>
-          </a>
+      <v-fade-transition>
+        <span v-if="!drawer && !hideLogo" class="caption d-inline-flex align-center">
+          <img src="@/assets/logo.svg" height="18" />
+          <span style="margin-top: 2px" class="primary--text">
+            <a href="https://speckle.xyz" target="_blank" class="text-decoration-none">
+              <b>Powered by Speckle</b>
+            </a>
+          </span>
         </span>
-      </span>
+      </v-fade-transition>
     </div>
 
     <!-- Viewer filters panel / sidebar -->
     <v-navigation-drawer
+      v-show="!hideSidebar"
       ref="drawerRef"
       v-model="drawer"
       class="viewer-controls-drawer"
@@ -47,6 +56,9 @@
         :stream-id="streamId"
         :resource-id="resourceId"
         :is-embed="true"
+        :hide-controls="hideControls"
+        :hide-selection-info="hideSelectionInfo"
+        :no-scroll="noScroll"
         @models-loaded="onModelsLoaded"
       />
     </div>
@@ -97,7 +109,18 @@ export default defineComponent({
       drawerRef
     })
 
-    const { streamId, commitId, objectId, branchName } = useEmbedViewerQuery()
+    const {
+      streamId,
+      commitId,
+      objectId,
+      branchName,
+      hideControls,
+      hideSidebar,
+      hideSelectionInfo,
+      hideLogo,
+      noScroll
+    } = useEmbedViewerQuery()
+
     const goToServerUrl = computed(() => {
       const base = `${window.location.origin}/streams/${streamId.value}/`
 
@@ -107,6 +130,7 @@ export default defineComponent({
 
       return base
     })
+
     return {
       goToServerUrl,
       loadedModel,
@@ -114,6 +138,11 @@ export default defineComponent({
       // drawer ref must be returned, for it to be filled
       drawerRef,
       navWidth,
+      hideControls,
+      hideSidebar,
+      hideSelectionInfo,
+      noScroll,
+      hideLogo,
       onModelsLoaded: () => {
         loadedModel.value = true
         emit('models-loaded')

packages/frontend/src/main/layouts/TheBasic.vue

@@ -1,11 +1,9 @@
 <template>
-  <v-app id="speckle">
-    <v-main class="background">
-      <router-view></router-view>
-    </v-main>
+  <div>
+    <router-view></router-view>
     <global-toast />
     <global-loading />
-  </v-app>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'

packages/frontend/src/main/lib/viewer/commit-object-viewer/composables/embed.ts

@@ -11,6 +11,24 @@ export function useEmbedViewerQuery() {
   const commitId = computed(() => (route.query.commit as string) || null)
   const objectId = computed(() => (route.query.object as string) || null)
   const transparent = computed(() => route.query.transparent === 'true')
+  const autoload = computed(() => route.query.autoload === 'true')
+  const hideControls = computed(() => route.query.hidecontrols === 'true')
+  const noScroll = computed(() => route.query.noscroll === 'true')
+  const hideSidebar = computed(() => route.query.hidesidebar === 'true')
+  const hideSelectionInfo = computed(() => route.query.hideselectioninfo === 'true')
+  const hideLogo = computed(() => route.query.ilovespeckleanyway === 'true')
 
-  return { streamId, branchName, commitId, objectId, transparent }
+  return {
+    streamId,
+    branchName,
+    commitId,
+    objectId,
+    transparent,
+    autoload,
+    noScroll,
+    hideControls,
+    hideSidebar,
+    hideSelectionInfo,
+    hideLogo
+  }
 }

packages/frontend/src/main/pages/stream/CommitObjectViewer.vue

@@ -113,9 +113,15 @@
       </v-fade-transition>
 
       <div
+        id="renderParent"
+        ref="renderParent"
         :style="`height: 100vh; width: 100%; ${topOffsetStyle} left: 0px; position: absolute`"
       >
-        <speckle-viewer @load-progress="captureProgress" @selection="captureSelect" />
+        <speckle-viewer
+          :no-scroll="noScroll"
+          @load-progress="captureProgress"
+          @selection="captureSelect"
+        />
       </div>
 
       <div
@@ -129,7 +135,7 @@
           pointer-events: none;`"
       >
         <object-selection
-          v-show="selectionData.length !== 0"
+          v-show="selectionData.length !== 0 && !hideSelectionInfo"
           :key="'one'"
           :objects="selectionData"
           :stream-id="streamId"
@@ -144,7 +150,10 @@
         }; z-index: 20`"
         :class="`d-flex justify-center`"
       >
-        <viewer-controls @show-add-overlay="showAddOverlay = true" />
+        <viewer-controls
+          v-show="!hideControls"
+          @show-add-overlay="showAddOverlay = true"
+        />
       </div>
       <div
         :style="`
@@ -330,6 +339,18 @@ export default defineComponent({
     isEmbed: {
       type: Boolean,
       default: false
+    },
+    hideControls: {
+      type: Boolean,
+      default: false
+    },
+    hideSelectionInfo: {
+      type: Boolean,
+      default: false
+    },
+    noScroll: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -472,6 +493,9 @@ export default defineComponent({
     }
 
     setTimeout(() => {
+      if (this.noScroll) {
+        this.disableScroll()
+      }
       for (const resource of this.resources) {
         if (isErrorResource(resource)) continue
 
@@ -546,6 +570,9 @@ export default defineComponent({
     }, 300)
   },
   methods: {
+    disableScroll() {
+      // TODO
+    },
     resolveResourceType(resourceId: string): ResourceTypeValue {
       return resourceId.length === 10 ? 'commit' : 'object'
     },

packages/frontend/src/main/pages/stream/TheEmbed.vue

@@ -16,7 +16,7 @@
 
     <!-- Play button -->
     <div
-      v-if="!isModelLoaded && !error"
+      v-if="!isModelLoaded && !error && !autoload"
       class="viewer-play d-flex fullscreen align-center justify-center no-mouse"
     >
       <v-btn
@@ -104,7 +104,7 @@ export default defineComponent({
 
     const { height } = useWindowSize()
 
-    const { streamId, branchName, commitId, objectId, transparent } =
+    const { streamId, branchName, commitId, objectId, transparent, autoload } =
       useEmbedViewerQuery()
 
     const previewUrl = computed(() => {
@@ -205,8 +205,9 @@ export default defineComponent({
 
     const updateTransparency = () => {
       const classList = document.getElementById('app')!.classList
-
       if (transparent.value) {
+        document.body.style.background = 'none'
+        document.body.style.backgroundColor = 'none'
         classList.remove('theme--dark')
         classList.remove('theme--light')
       } else {
@@ -215,8 +216,21 @@ export default defineComponent({
       }
     }
 
+    const load = () => {
+      if (!isInitialized.value || shouldLoadHeavyDeps.value || isModelLoaded.value)
+        return
+
+      shouldLoadHeavyDeps.value = true
+      mixpanel.track('Embedded Model Load', {
+        type: 'action'
+      })
+    }
+
     watch(() => transparent, updateTransparency)
-    onMounted(() => updateTransparency())
+    onMounted(() => {
+      updateTransparency()
+      if (autoload.value) load()
+    })
 
     return {
       displayType,
@@ -233,21 +247,14 @@ export default defineComponent({
       transparent,
       previewUrl,
       showPlayLoader,
+      autoload,
       onError: (e: unknown) => {
         error.value = e instanceof Error ? e : new Error('Unexpected error')
       },
       onModelsLoaded: () => {
         isModelLoaded.value = true
       },
-      load: () => {
-        if (!isInitialized.value || shouldLoadHeavyDeps.value || isModelLoaded.value)
-          return
-
-        shouldLoadHeavyDeps.value = true
-        mixpanel.track('Embedded Model Load', {
-          type: 'action'
-        })
-      }
+      load
     }
   }
 })