@slidev/client 0.48.8 → 0.49.0-beta.1

package/builtin/ShikiMagicMove.vue

@@ -45,43 +45,45 @@ onMounted(() => {
       // Calculate the step and rangeStr based on the current click count
       const clickCount = clicks.current - start
       let step = steps.length - 1
-      let _currentClickSum = 0
+      let currentClickSum = 0
       let rangeStr = 'all'
       for (let i = 0; i < ranges.value.length; i++) {
         const current = ranges.value[i]
-        if (clickCount < _currentClickSum + current.length - 1) {
+        if (clickCount < currentClickSum + current.length - 1) {
           step = i
-          rangeStr = current[clickCount - _currentClickSum + 1]
+          rangeStr = current[clickCount - currentClickSum + 1]
           break
         }
-        _currentClickSum += current.length || 1
+        currentClickSum += current.length || 1
       }
       stepIndex.value = step
 
-      const pre = container.value?.querySelector('.shiki') as HTMLElement
-      if (!pre)
-        return
+      setTimeout(() => {
+        const pre = container.value?.querySelector('.shiki') as HTMLElement
+        if (!pre)
+          return
 
-      const children = (Array.from(pre.children) as HTMLElement[])
-        .slice(1) // Remove the first anchor
-        .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
+        const children = (Array.from(pre.children) as HTMLElement[])
+          .slice(1) // Remove the first anchor
+          .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
 
-      // Group to lines between `<br>`
-      const lines = children.reduce((acc, el) => {
-        if (el.tagName === 'BR')
-          acc.push([])
-        else
-          acc[acc.length - 1].push(el)
-        return acc
-      }, [[]] as HTMLElement[][])
+        // Group to lines between `<br>`
+        const lines = children.reduce((acc, el) => {
+          if (el.tagName === 'BR')
+            acc.push([])
+          else
+            acc[acc.length - 1].push(el)
+          return acc
+        }, [[]] as HTMLElement[][])
 
-      // Update highlight range
-      updateCodeHighlightRange(
-        rangeStr,
-        lines.length,
-        1,
-        no => lines[no],
-      )
+        // Update highlight range
+        updateCodeHighlightRange(
+          rangeStr,
+          lines.length,
+          1,
+          no => lines[no],
+        )
+      })
     },
     { immediate: true },
   )
@@ -104,3 +106,10 @@ onMounted(() => {
     />
   </div>
 </template>
+
+<style>
+.slidev-code-magic-move .shiki-magic-move-enter-from,
+.slidev-code-magic-move .shiki-magic-move-leave-to {
+  opacity: 0;
+}
+</style>

package/builtin/SlidevVideo.vue

@@ -1,86 +1,78 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { and } from '@vueuse/math'
 import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
-  autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
-  autoPause?: 'slide' | 'click'
-  autoReset?: 'slide' | 'click'
+  autoplay?: boolean | 'once'
+  autoreset?: 'slide' | 'click'
+  poster?: string
+  printPoster?: string
+  timestamp?: string | number
+  printTimestamp?: string | number | 'last'
+  controls?: boolean
 }>()
 
+const printPoster = computed(() => props.printPoster ?? props.poster)
+const printTimestamp = computed(() => props.printTimestamp ?? props.timestamp ?? 0)
+
 const {
   $slidev,
-  $clicksContext: clicks,
-  $renderContext: currentContext,
-  $route: route,
+  $clicksContext,
+  $renderContext,
+  $route,
 } = useSlideContext()
+const { isPrintMode } = useNav()
+
+const noPlay = computed(() => isPrintMode.value || !['slide', 'presenter'].includes($renderContext.value))
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)
-const ended = ref(false)
-
-const matchRoute = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return false
-  return route && route.no === $slidev?.nav.currentSlideNo
-})
-
-const matchClick = computed(() => {
-  if (!video.value || currentContext?.value !== 'slide' || !clicks)
-    return false
-  return clicks.map.get(video.value)?.isShown?.value ?? true
-})
-
-const matchRouteAndClick = computed(() => matchRoute.value && matchClick.value)
-
-watch(matchRouteAndClick, () => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-
-  if (matchRouteAndClick.value) {
-    if (props.autoReset === 'click')
-      video.value.currentTime = 0
-    if (props.autoPlay && (!played.value || props.autoPlay === 'resume' || (props.autoPlay === 'resumeOnce' && !ended.value)))
-      video.value.play()
-  }
-
-  if ((props.autoPause === 'click' && !matchRouteAndClick.value) || (props.autoPause === 'slide' && !matchRoute.value))
-    video.value.pause()
-})
 
-watch(matchRoute, () => {
-  if (!video.value || currentContext?.value !== 'slide')
+onMounted(() => {
+  if (noPlay.value)
     return
 
-  if (matchRoute.value && props.autoReset === 'slide')
-    video.value.currentTime = 0
+  const timestamp = +(props.timestamp ?? 0)
+  video.value!.currentTime = timestamp
+
+  const matchRoute = computed(() => !!$route && $route.no === $slidev?.nav.currentSlideNo)
+  const matchClick = computed(() => !!video.value && ($clicksContext.map.get(video.value)?.isShown?.value ?? true))
+  const matchRouteAndClick = and(matchRoute, matchClick)
+
+  watch(matchRouteAndClick, () => {
+    if (matchRouteAndClick.value) {
+      if (props.autoplay === true || (props.autoplay === 'once' && !played.value))
+        video.value!.play()
+    }
+    else {
+      video.value!.pause()
+      if (props.autoreset === 'click' || (props.autoreset === 'slide' && !matchRoute.value))
+        video.value!.currentTime = timestamp
+    }
+  }, { immediate: true })
 })
 
-function onPlay() {
-  played.value = true
-}
-
-function onEnded() {
-  ended.value = true
+function onLoadedMetadata(ev: Event) {
+  // The video may be loaded before component mounted
+  const element = ev.target as HTMLMediaElement
+  if (noPlay.value && (!printPoster.value || props.printTimestamp)) {
+    element.currentTime = printTimestamp.value === 'last'
+      ? element.duration
+      : +printTimestamp.value
+  }
 }
-
-onMounted(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-  video.value?.addEventListener('play', onPlay)
-  video.value?.addEventListener('ended', onEnded)
-})
-
-onUnmounted(() => {
-  if (!video.value || currentContext?.value !== 'slide')
-    return
-  video.value?.removeEventListener('play', onPlay)
-  video.value?.removeEventListener('ended', onEnded)
-})
 </script>
 
 <template>
-  <video ref="video">
+  <video
+    ref="video"
+    :poster="noPlay ? printPoster : props.poster"
+    :controls="!noPlay && props.controls"
+    @play="played = true"
+    @loadedmetadata="onLoadedMetadata"
+  >
     <slot />
   </video>
 </template>

package/builtin/VDrag.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import type { DragElementMarkdownSource } from '../composables/useDragElements'
+import { useDragElement } from '../composables/useDragElements'
+
+const props = defineProps<{
+  pos?: string
+  markdownSource?: DragElementMarkdownSource
+}>()
+
+const { id, container, containerStyle, mounted, unmounted, startDragging } = useDragElement(null, props.pos, props.markdownSource)
+
+onMounted(mounted)
+onUnmounted(unmounted)
+</script>
+
+<template>
+  <div
+    ref="container"
+    :data-drag-id="id"
+    :style="containerStyle"
+    class="p-1"
+    @dblclick="startDragging"
+  >
+    <slot />
+  </div>
+</template>

package/composables/useDragElements.ts

@@ -0,0 +1,282 @@
+import { debounce, ensureSuffix } from '@antfu/utils'
+import type { SlidePatch } from '@slidev/types'
+import { injectLocal, onClickOutside, useWindowFocus } from '@vueuse/core'
+import type { CSSProperties, DirectiveBinding, InjectionKey, WatchStopHandle } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionSlideElement, injectionSlideScale, injectionSlideZoom } from '../constants'
+import { makeId } from '../logic/utils'
+import { activeDragElement } from '../state'
+import { directiveInject } from '../utils'
+import { useSlideBounds } from './useSlideBounds'
+import { useDynamicSlideInfo } from './useSlideInfo'
+
+export type DragElementDataSource = 'frontmatter' | 'prop' | 'directive'
+/**
+ * Markdown source position, injected by markdown-it plugin
+ */
+export type DragElementMarkdownSource = [startLine: number, endLine: number, index: number]
+
+export type DragElementsUpdater = (id: string, posStr: string, type: DragElementDataSource, markdownSource?: DragElementMarkdownSource) => void
+
+const map: Record<number, DragElementsUpdater> = {}
+
+export function useDragElementsUpdater(no: number) {
+  if (!(__DEV__ && __SLIDEV_FEATURE_EDITOR__))
+    return () => {}
+
+  if (map[no])
+    return map[no]
+
+  const { info, update } = useDynamicSlideInfo(no)
+
+  let newPatch: SlidePatch | null = null
+  async function save() {
+    if (newPatch) {
+      await update({
+        ...newPatch,
+        skipHmr: true,
+      })
+      newPatch = null
+    }
+  }
+  const debouncedSave = debounce(500, save)
+
+  return map[no] = (id, posStr, type, markdownSource) => {
+    if (!info.value)
+      return
+
+    if (type === 'frontmatter') {
+      const frontmatter = info.value.frontmatter
+      frontmatter.dragPos ||= {}
+      if (frontmatter.dragPos[id] === posStr)
+        return
+      frontmatter.dragPos[id] = posStr
+      newPatch = {
+        frontmatter,
+      }
+    }
+    else {
+      if (!markdownSource)
+        throw new Error(`[Slidev] VDrag Element ${id} is missing markdown source`)
+
+      const [startLine, endLine, idx] = markdownSource
+      const lines = info.value.content.split(/\r?\n/g)
+
+      let section = lines.slice(startLine, endLine).join('\n')
+      let replaced = false
+
+      section = type === 'prop'
+        ? section.replace(/<(v-?drag)(.*?)>/ig, (full, tag, attrs, index) => {
+          if (index === idx) {
+            replaced = true
+            const posMatch = attrs.match(/pos=".*?"/)
+            if (!posMatch)
+              return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}">`
+            const start = posMatch.index
+            const end = start + posMatch[0].length
+            return `<${tag}${attrs.slice(0, start)}pos="${posStr}"${attrs.slice(end)}>`
+          }
+          return full
+        })
+        : section.replace(/(?<![</\w])v-drag(?:=".*?")?/ig, (full, index) => {
+          if (index === idx) {
+            replaced = true
+            return `v-drag="${posStr}"`
+          }
+          return full
+        })
+
+      if (!replaced)
+        throw new Error(`[Slidev] VDrag Element ${id} is not found in the markdown source`)
+
+      lines.splice(
+        startLine,
+        endLine - startLine,
+        section,
+      )
+
+      const newContent = lines.join('\n')
+      if (info.value.content === newContent)
+        return
+      newPatch = {
+        content: newContent,
+      }
+      info.value = {
+        ...info.value,
+        content: newContent,
+      }
+    }
+    debouncedSave()
+  }
+}
+
+export function useDragElement(directive: DirectiveBinding | null, posRaw?: string | number | number[], markdownSource?: DragElementMarkdownSource) {
+  function inject<T>(key: InjectionKey<T> | string): T | undefined {
+    return directive
+      ? directiveInject(directive, key)
+      : injectLocal(key)
+  }
+
+  const renderContext = inject(injectionRenderContext)!
+  const frontmatter = inject(injectionFrontmatter) ?? {}
+  const page = inject(injectionCurrentPage)!
+  const updater = computed(() => useDragElementsUpdater(page.value))
+  const scale = inject(injectionSlideScale) ?? ref(1)
+  const zoom = inject(injectionSlideZoom) ?? ref(1)
+  const { left: slideLeft, top: slideTop, stop: stopWatchBounds } = useSlideBounds(inject(injectionSlideElement) ?? ref())
+  const enabled = ['slide', 'presenter'].includes(renderContext.value)
+
+  let dataSource: DragElementDataSource = directive ? 'directive' : 'prop'
+  let id: string = makeId()
+  let pos: number[] | undefined
+  if (Array.isArray(posRaw)) {
+    pos = posRaw
+  }
+  else if (typeof posRaw === 'string' && posRaw.includes(',')) {
+    pos = posRaw.split(',').map(Number)
+  }
+  else if (posRaw != null) {
+    dataSource = 'frontmatter'
+    id = `${posRaw}`
+    posRaw = frontmatter?.dragPos?.[id]
+    pos = (posRaw as string)?.split(',').map(Number)
+  }
+
+  if (dataSource !== 'frontmatter' && !markdownSource)
+    throw new Error('[Slidev] Can not identify the source position of the v-drag element, please provide an explicit `id` prop.')
+
+  const watchStopHandles: WatchStopHandle[] = [stopWatchBounds]
+
+  const autoHeight = posRaw != null && !Number.isFinite(pos?.[3])
+  pos ??= [Number.NaN, Number.NaN, 0]
+  const width = ref(pos[2])
+  const x0 = ref(pos[0] + pos[2] / 2)
+
+  const rotate = ref(pos[4] ?? 0)
+  const rotateRad = computed(() => rotate.value * Math.PI / 180)
+  const rotateSin = computed(() => Math.sin(rotateRad.value))
+  const rotateCos = computed(() => Math.cos(rotateRad.value))
+
+  const container = ref<HTMLElement>()
+  const bounds = ref({ left: 0, top: 0, width: 0, height: 0 })
+  const actualHeight = ref(0)
+  function updateBounds() {
+    const rect = container.value!.getBoundingClientRect()
+    bounds.value = {
+      left: rect.left / zoom.value,
+      top: rect.top / zoom.value,
+      width: rect.width / zoom.value,
+      height: rect.height / zoom.value,
+    }
+    actualHeight.value = ((bounds.value.width + bounds.value.height) / scale.value / (Math.abs(rotateSin.value) + Math.abs(rotateCos.value)) - width.value)
+  }
+  watchStopHandles.push(watch(width, updateBounds, { flush: 'post' }))
+
+  const configuredHeight = ref(pos[3] ?? 0)
+  const height = computed({
+    get: () => (autoHeight ? actualHeight.value : configuredHeight.value) || 0,
+    set: v => !autoHeight && (configuredHeight.value = v),
+  })
+  const configuredY0 = ref(pos[1])
+  const y0 = computed({
+    get: () => configuredY0.value + height.value / 2,
+    set: v => configuredY0.value = v - height.value / 2,
+  })
+
+  const containerStyle = computed<CSSProperties>(() => {
+    return Number.isFinite(x0.value)
+      ? {
+          position: 'absolute',
+          zIndex: 100,
+          left: `${x0.value - width.value / 2}px`,
+          top: `${y0.value - height.value / 2}px`,
+          width: `${width.value}px`,
+          height: autoHeight ? undefined : `${height.value}px`,
+          transformOrigin: 'center center',
+          transform: `rotate(${rotate.value}deg)`,
+        }
+      : {
+          position: 'absolute',
+          zIndex: 100,
+        }
+  })
+
+  watchStopHandles.push(
+    watch(
+      [x0, y0, width, height, rotate],
+      ([x0, y0, w, h, r]) => {
+        let posStr = [x0 - w / 2, y0 - h / 2, w].map(Math.round).join()
+        if (autoHeight)
+          posStr += dataSource === 'directive' ? ',NaN' : ',_'
+        else
+          posStr += `,${Math.round(h)}`
+        if (Math.round(r) !== 0)
+          posStr += `,${Math.round(r)}`
+
+        if (dataSource === 'directive')
+          posStr = `[${posStr}]`
+
+        updater.value(id, posStr, dataSource, markdownSource)
+      },
+    ),
+  )
+
+  const state = {
+    id,
+    dataSource,
+    markdownSource,
+    zoom,
+    autoHeight,
+    x0,
+    y0,
+    width,
+    height,
+    rotate,
+    container,
+    containerStyle,
+    watchStopHandles,
+    dragging: computed((): boolean => activeDragElement.value === state),
+    mounted() {
+      if (!enabled)
+        return
+      updateBounds()
+      if (!posRaw) {
+        setTimeout(() => {
+          updateBounds()
+          x0.value = (bounds.value.left + bounds.value.width / 2 - slideLeft.value) / scale.value
+          y0.value = (bounds.value.top - slideTop.value) / scale.value
+          width.value = bounds.value.width / scale.value
+          height.value = bounds.value.height / scale.value
+        }, 100)
+      }
+    },
+    unmounted() {
+      if (!enabled)
+        return
+      state.stopDragging()
+    },
+    startDragging(): void {
+      updateBounds()
+      activeDragElement.value = state
+    },
+    stopDragging(): void {
+      if (activeDragElement.value === state)
+        activeDragElement.value = null
+    },
+  }
+
+  watchStopHandles.push(
+    onClickOutside(container, (ev) => {
+      if ((ev.target as HTMLElement | null)?.dataset?.dragId !== id)
+        state.stopDragging()
+    }),
+    watch(useWindowFocus(), (focused) => {
+      if (!focused)
+        state.stopDragging()
+    }),
+  )
+
+  return state
+}
+
+export type DragElementState = ReturnType<typeof useDragElement>

package/composables/useSlideBounds.ts

@@ -0,0 +1,30 @@
+import { useElementBounding } from '@vueuse/core'
+import { inject, ref, watch } from 'vue'
+import { injectionSlideElement } from '../constants'
+import { editorHeight, editorWidth, isEditorVertical, showEditor, slideScale, windowSize } from '../state'
+
+export function useSlideBounds(slideElement = inject(injectionSlideElement, ref())) {
+  const bounding = useElementBounding(slideElement)
+  const stop = watch(
+    [
+      showEditor,
+      isEditorVertical,
+      editorWidth,
+      editorHeight,
+      slideScale,
+      windowSize.width,
+      windowSize.height,
+    ],
+    () => {
+      setTimeout(bounding.update, 300)
+    },
+    {
+      flush: 'post',
+      immediate: true,
+    },
+  )
+  return {
+    ...bounding,
+    stop,
+  }
+}

package/composables/useSlideInfo.ts

@@ -6,19 +6,19 @@ import type { SlideInfo, SlidePatch } from '@slidev/types'
 import { getSlide } from '../logic/slides'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfo | undefined>
+  info: Ref<SlideInfo | null>
   update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(no: number): UseSlideInfo {
   if (!__SLIDEV_HAS_SERVER__) {
     return {
-      info: ref(getSlide(no)?.meta.slide) as Ref<SlideInfo | undefined>,
+      info: ref(getSlide(no)?.meta.slide ?? null) as Ref<SlideInfo | null>,
       update: async () => {},
     }
   }
   const url = `/@slidev/slide/${no}.json`
-  const { data: info, execute } = useFetch(url).json().get()
+  const { data: info, execute } = useFetch(url).json<SlideInfo>().get()
 
   execute()
 
@@ -42,7 +42,7 @@ export function useSlideInfo(no: number): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev:update-note', (payload) => {
-      if (payload.no === no && info.value.note?.trim() !== payload.note?.trim())
+      if (payload.no === no && info.value && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -61,7 +61,14 @@ export function useDynamicSlideInfo(no: MaybeRef<number>) {
   }
 
   return {
-    info: computed(() => get(unref(no)).info.value),
+    info: computed({
+      get() {
+        return get(unref(no)).info.value
+      },
+      set(newInfo) {
+        get(unref(no)).info.value = newInfo
+      },
+    }),
     update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(no))
       const newData = await info.update(data)

package/constants.ts

@@ -6,6 +6,7 @@ import type { SlidevContext } from './modules/context'
 // The value of the injections keys are implementation details, you should always use them with the reference to the constant instead of the value
 export const injectionClicksContext = '$$slidev-clicks-context' as unknown as InjectionKey<Ref<ClicksContext>>
 export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
+export const injectionSlideElement = '$$slidev-slide-element' as unknown as InjectionKey<Ref<HTMLElement | null>>
 export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
 export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
@@ -13,6 +14,7 @@ export const injectionRenderContext = '$$slidev-render-context' as unknown as In
 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 injectionClickVisibility = '$$slidev-click-visibility' as unknown as InjectionKey<ComputedRef<true | 'before' | 'after'>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -43,6 +45,7 @@ export const FRONTMATTER_FIELDS = [
   'title',
   'transition',
   'zoom',
+  'dragPos',
 ]
 
 export const HEADMATTER_FIELDS = [