Files
speckle-server/packages/frontend-2/components/tour/content/OverlayModel.vue
T
andrewwallacespeckle ee352e8ddb FE2 - Web Onboarding Enhancements (#1859)
* Change expiration of hasDismissedChecklistForever to 2 years from session

* Register Panel WIP

* Register Page

* Checklist Responsiveness

* Updates to checklist and onboarding

* Fix for viewer comments

* Automation Dialog updates

* feat(fe2): quick fixes

---------

Co-authored-by: Dimitrie Stefanescu <didimitrie@gmail.com>
2023-11-08 11:37:59 +00:00

72 lines
2.0 KiB
Vue

<template>
<div>
<div v-show="!hasAddedOverlay">
<p class="text-sm">
Speckle allows you to load multiple models in the same viewer.
</p>
<p class="text-sm mt-2">
<span v-show="!hasAddedOverlay">
<FormButton
size="sm"
link
:icon-right="hasAddedOverlay ? CheckIcon : null"
:disabled="hasAddedOverlay"
@click="addOverlay()"
>
Click here
</FormButton>
to give it a try!
</span>
</p>
</div>
<div v-show="hasAddedOverlay">
<p class="text-sm">
Nice - you've just created a "federated" model. Ready for what's next?
<!-- <br />
<br />
Let's go to the next step. -->
</p>
<!-- <p class="text-sm">You can overlay as many models as you want.</p> -->
</div>
</div>
</template>
<script setup lang="ts">
import { CheckIcon } from '@heroicons/vue/24/solid'
import { SpeckleViewer } from '@speckle/shared'
import { useQuery } from '@vue/apollo-composable'
import { latestModelsQuery } from '~~/lib/projects/graphql/queries'
import {
useInjectedViewerRequestedResources,
useInjectedViewerLoadedResources
} from '~~/lib/viewer/composables/setup'
import { SECOND_MODEL_NAME } from '~~/lib/auth/composables/onboarding'
const { items } = useInjectedViewerRequestedResources()
const { project } = useInjectedViewerLoadedResources()
const id = project.value?.id as string
const { result } = useQuery(latestModelsQuery, () => ({ projectId: id }))
const hasAddedOverlay = ref(false)
async function addOverlay() {
const models = result.value?.project?.models.items
const otherModel = models?.find((m) => m.name === SECOND_MODEL_NAME)
if (otherModel)
await items.update([
...items.value,
...SpeckleViewer.ViewerRoute.resourceBuilder()
.addModel(otherModel?.id)
.toResources()
])
hasAddedOverlay.value = true
}
onBeforeUnmount(() => {
if (hasAddedOverlay.value) return
addOverlay()
})
</script>