Feat: Add embed option to disable title link (#4778)

packages/frontend-2/components/project/model-page/dialog/embed/Embed.vue

@@ -130,6 +130,7 @@ const mp = useMixpanel()
 const transparentBackground = ref(false)
 const hideViewerControls = ref(false)
 const hideSelectionInfo = ref(false)
+const disableModelLink = ref(false)
 const preventScrolling = ref(false)
 const manuallyLoadModel = ref(false)
 const projectVisibility = ref(props.project.visibility)
@@ -275,6 +276,11 @@ const embedDialogOptions = [
     label: 'Hide the selection info panel',
     value: hideSelectionInfo
   },
+  {
+    id: 'disableModelLink',
+    label: 'No link back to web viewer',
+    value: disableModelLink
+  },
   {
     id: 'noScroll',
     label: 'Prevent scrolling (zooming)',

packages/frontend-2/components/viewer/PreSetupWrapper.vue

@@ -103,6 +103,7 @@
       :date="lastUpdate"
       :url="route.path"
       :hide-speckle-branding="hideSpeckleBranding"
+      :disable-model-link="disableModelLink"
     />
     <Portal to="primary-actions">
       <HeaderNavShare
@@ -175,7 +176,8 @@ const {
   isEnabled: isEmbedEnabled,
   hideSelectionInfo,
   isTransparent,
-  showControls
+  showControls,
+  disableModelLink
 } = useEmbed()
 const mp = useMixpanel()
 

packages/frontend-2/components/viewer/embed/Footer.vue

@@ -15,17 +15,25 @@
         <div class="h-6 w-px bg-outline-3"></div>
       </template>
       <div class="flex flex-col">
-        <NuxtLink :to="url" target="_blank" class="leading-3">
+        <component
+          :is="disableModelLink ? 'div' : 'NuxtLink'"
+          :to="url"
+          target="_blank"
+          class="leading-3"
+          :class="disableModelLink ? 'cursor-default' : 'cursor-pointer'"
+        >
           <div class="flex items-center gap-1 w-full">
             <h2 class="text-heading-sm truncate text-foreground">
               {{ name }}
             </h2>
-            <ArrowTopRightOnSquareIcon class="h-3 w-3" />
+            <template v-if="!disableModelLink">
+              <ArrowTopRightOnSquareIcon class="h-3 w-3" />
+            </template>
           </div>
           <span v-if="date" class="text-body-2xs text-foreground-2">
             {{ date }}
           </span>
-        </NuxtLink>
+        </component>
       </div>
     </div>
   </ClientOnly>
@@ -34,12 +42,14 @@
 <script setup lang="ts">
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/20/solid'
 import { useEmbed } from '~/lib/viewer/composables/setup/embed'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
 
 defineProps<{
   date?: string
   name?: string
   url?: string
   hideSpeckleBranding?: boolean
+  disableModelLink?: MaybeNullOrUndefined<boolean>
 }>()
 
 const { isEmbedEnabled } = useEmbed()

packages/frontend-2/lib/viewer/composables/setup/embed.ts

@@ -9,6 +9,7 @@ export type EmbedOptions = {
   isTransparent?: boolean
   hideControls?: boolean
   hideSelectionInfo?: boolean
+  disableModelLink?: boolean
   noScroll?: boolean
   manualLoad?: boolean
 }
@@ -23,6 +24,7 @@ export function isEmbedOptions(obj: unknown): obj is EmbedOptions {
           'isTransparent',
           'hideControls',
           'hideSelectionInfo',
+          'disableModelLink',
           'noScroll',
           'manualLoad'
         ].includes(key) &&
@@ -98,7 +100,7 @@ export function useEmbed() {
 
     const isEnabled = createComputed('isEnabled')
     const isTransparent = createComputed('isTransparent')
-
+    const disableModelLink = createComputed('disableModelLink')
     const hideSelectionInfo = createComputed('hideSelectionInfo')
     const noScroll = createComputed('noScroll')
     const manualLoad = createComputed('manualLoad')
@@ -122,6 +124,7 @@ export function useEmbed() {
       isTransparent,
       showControls: showControlsNew,
       hideSelectionInfo,
+      disableModelLink,
       noScroll,
       manualLoad
     }

packages/frontend-2/middleware/002-redirects.global.ts

@@ -129,6 +129,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
       ...(to.query['transparent'] === 'true' ? { isTransparent: true } : {}),
       ...(to.query['hidecontrols'] === 'true' ? { hideControls: true } : {}),
       ...(to.query['hideselectioninfo'] === 'true' ? { hideSelectionInfo: true } : {}),
+      ...(to.query['disablemodellink'] === 'true' ? { disableModelLink: true } : {}),
       ...(to.query['noscroll'] === 'true' ? { noScroll: true } : {}),
       ...(to.query['autoload'] === 'true'
         ? { manualLoad: false }