fix: Shiki magic move with zoom option (#1454)

packages/client/builtin/ShikiMagicMove.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
-const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const { $clicksContext: clicks, $scale: scale, $zoom: zoom } = useSlideContext()
 const { isPrintMode } = useNav()
 const id = makeId()
 
@@ -96,7 +96,7 @@ onMounted(() => {
       :step="stepIndex"
       :animate="!isPrintMode"
       :options="{
-        globalScale: scale,
+        globalScale: scale * zoom,
         // TODO: make this configurable later
         duration: 800,
         stagger: 1,

packages/client/constants.ts

@@ -12,6 +12,7 @@ export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideR
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
+export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'

packages/client/context.ts

@@ -1,4 +1,4 @@
-import { ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
 import {
   FRONTMATTER_FIELDS,
@@ -9,6 +9,7 @@ import {
   injectionRenderContext,
   injectionRoute,
   injectionSlideScale,
+  injectionSlideZoom,
   injectionSlidevContext,
 } from './constants'
 
@@ -24,7 +25,8 @@ export function useSlideContext() {
   const $renderContext = injectLocal(injectionRenderContext)!
   const $frontmatter = injectLocal(injectionFrontmatter, {})
   const $route = injectLocal(injectionRoute, undefined)
-  const $scale = injectLocal(injectionSlideScale, ref(1))!
+  const $scale = injectLocal(injectionSlideScale, ref(1))
+  const $zoom = injectLocal(injectionSlideZoom, computed(() => 1))
 
   return {
     $slidev,
@@ -36,6 +38,7 @@ export function useSlideContext() {
     $renderContext,
     $frontmatter,
     $scale,
+    $zoom,
   }
 }
 

packages/client/internals/SlideWrapper.vue

@@ -3,7 +3,7 @@ import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toR
 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 { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -29,21 +29,23 @@ const props = defineProps({
   },
 })
 
+const zoom = computed(() => props.route.meta?.slide?.frontmatter.zoom ?? 1)
+
 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'))
+provideLocal(injectionSlideZoom, zoom)
 
 const style = computed(() => {
-  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-  return zoom === 1
+  return zoom.value === 1
     ? undefined
     : {
-        width: `${100 / zoom}%`,
-        height: `${100 / zoom}%`,
+        width: `${100 / zoom.value}%`,
+        height: `${100 / zoom.value}%`,
         transformOrigin: 'top left',
-        transform: `scale(${zoom})`,
+        transform: `scale(${zoom.value})`,
       }
 })