fix: view transition in Presenter mode (#1363)

Co-authored-by: _Kerman <kermanx@qq.com>

Author: kamuiiiii

packages/client/composables/useViewTransition.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { getSlide } from '../logic/nav'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -11,13 +12,15 @@ export function useViewTransition() {
   const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
 
   router.beforeResolve((to, from) => {
-    const fromNo = from.meta.slide?.no
-    const toNo = to.meta.slide?.no
+    const fromMeta = getSlide(from.params.no as string)?.meta
+    const toMeta = getSlide(to.params.no as string)?.meta
+    const fromNo = fromMeta?.slide?.no
+    const toNo = toMeta?.slide?.no
     if (
       !(
         fromNo !== undefined && toNo !== undefined && (
-          (from.meta.transition === 'view-transition' && fromNo < toNo)
-          || (to.meta.transition === 'view-transition' && toNo < fromNo)
+          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
+          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
         )
       )
     ) {

packages/client/internals/PrintSlideClick.vue

@@ -5,7 +5,7 @@ import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../composables/useNav'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'

packages/client/internals/QuickOverview.vue

@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 

packages/client/internals/SlideWrapper.ts

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import SlideLoading from './SlideLoading.vue'
+
+const props = defineProps({
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+    required: true,
+  },
+  renderContext: {
+    type: String as PropType<RenderContext>,
+    default: 'slide',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  is: {
+    required: true,
+  },
+  route: {
+    type: Object as PropType<SlideRoute>,
+    required: true,
+  },
+})
+
+provideLocal(injectionRoute, props.route)
+provideLocal(injectionCurrentPage, ref(props.route.no))
+provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+provideLocal(injectionActive, toRef(props, 'active'))
+provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+const style = computed(() => {
+  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+  return zoom === 1
+    ? undefined
+    : {
+        width: `${100 / zoom}%`,
+        height: `${100 / zoom}%`,
+        transformOrigin: 'top left',
+        transform: `scale(${zoom})`,
+      }
+})
+
+const SlideComponent = defineAsyncComponent({
+  loader: (props.is as any),
+  delay: 300,
+  loadingComponent: SlideLoading,
+})
+</script>
+
+<template>
+  <component :is="SlideComponent" :style="style" :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }" />
+</template>
+
+<style scoped>
+.disable-view-transition:deep(*) {
+  view-transition-name: none !important;
+}
+</style>

packages/client/internals/SlideWrapper.vue

@@ -5,7 +5,7 @@ import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
 
 import GlobalTop from '#slidev/global-components/top'

packages/client/internals/SlidesShow.vue

@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'

packages/client/pages/overview.vue

@@ -12,7 +12,7 @@ import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
 import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import QuickOverview from '../internals/QuickOverview.vue'