@slidev/client 0.48.9 → 0.49.0-beta.1

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>
@@ -44,6 +45,7 @@ export const FRONTMATTER_FIELDS = [
   'title',
   'transition',
   'zoom',
+  'dragPos',
 ]
 
 export const HEADMATTER_FIELDS = [

package/internals/DragControl.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import { clamp } from '@antfu/utils'
+import type { Pausable } from '@vueuse/core'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, inject, ref, watchEffect } from 'vue'
+import type { DragElementState } from '../composables/useDragElements'
+import { useSlideBounds } from '../composables/useSlideBounds'
+import { injectionSlideScale } from '../constants'
+import { slideHeight, slideWidth } from '../env'
+import { magicKeys } from '../state'
+
+const { data } = defineProps<{ data: DragElementState }>()
+const { id, zoom, autoHeight, x0, y0, width, height, rotate } = data
+
+const slideScale = inject(injectionSlideScale, ref(1))
+const scale = computed(() => slideScale.value * zoom.value)
+const { left: slideLeft, top: slideTop } = useSlideBounds()
+
+const ctrlSize = 10
+const minSize = 40
+const minRemain = 10
+
+const rotateRad = computed(() => rotate.value * Math.PI / 180)
+const rotateSin = computed(() => Math.sin(rotateRad.value))
+const rotateCos = computed(() => Math.cos(rotateRad.value))
+
+const boundingWidth = computed(() => width.value * rotateCos.value + height.value * rotateSin.value)
+const boundingHeight = computed(() => width.value * rotateSin.value + height.value * rotateCos.value)
+
+const boundingLeft = computed(() => x0.value - boundingWidth.value / 2)
+const boundingTop = computed(() => y0.value - boundingHeight.value / 2)
+const boundingRight = computed(() => x0.value + boundingWidth.value / 2)
+const boundingBottom = computed(() => y0.value + boundingHeight.value / 2)
+
+let currentDrag: {
+  x0: number
+  y0: number
+  width: number
+  height: number
+  rotate: number
+  dx0: number
+  dy0: number
+  ltx: number
+  lty: number
+  rtx: number
+  rty: number
+  lbx: number
+  lby: number
+  rbx: number
+  rby: number
+} | null = null
+
+function onPointerdown(ev: PointerEvent) {
+  if (ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+  const el = ev.target as HTMLElement
+  const elBounds = el.getBoundingClientRect()
+
+  const cross1x = width.value * rotateCos.value - height.value * rotateSin.value
+  const cross1y = width.value * rotateSin.value + height.value * rotateCos.value
+  const cross2x = width.value * rotateCos.value + height.value * rotateSin.value
+  const cross2y = -width.value * rotateSin.value + height.value * rotateCos.value
+
+  currentDrag = {
+    x0: x0.value,
+    y0: y0.value,
+    width: width.value,
+    height: height.value,
+    rotate: rotate.value,
+    dx0: ev.clientX - (elBounds.left + elBounds.right) / 2,
+    dy0: ev.clientY - (elBounds.top + elBounds.bottom) / 2,
+    ltx: x0.value - cross1x / 2,
+    lty: y0.value - cross1y / 2,
+    rtx: x0.value + cross2x / 2,
+    rty: y0.value - cross2y / 2,
+    lbx: x0.value - cross2x / 2,
+    lby: y0.value + cross2y / 2,
+    rbx: x0.value + cross1x / 2,
+    rby: y0.value + cross1y / 2,
+  };
+
+  (ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId)
+}
+
+function onPointermove(ev: PointerEvent) {
+  if (!currentDrag || ev.buttons !== 1)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value
+  const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value
+
+  x0.value = clamp(x, -boundingWidth.value / 2 + minRemain, slideWidth.value + boundingWidth.value / 2 - minRemain)
+  y0.value = clamp(y, -boundingHeight.value / 2 + minRemain, slideHeight.value + boundingHeight.value / 2 - minRemain)
+}
+
+function onPointerup(ev: PointerEvent) {
+  if (!currentDrag)
+    return
+
+  ev.preventDefault()
+  ev.stopPropagation()
+
+  currentDrag = null
+}
+
+const ctrlClasses = `absolute border border-gray bg-gray dark:border-gray-500 dark:bg-gray-800 bg-opacity-30 `
+
+function getCornerProps(isLeft: boolean, isTop: boolean) {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      let x = (ev.clientX - slideLeft.value) / scale.value
+      let y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      const ratio = currentDrag.width / currentDrag.height
+      const wMin = Math.max(minSize, minSize * ratio)
+      function getSize(w1: number, h1: number) {
+        if (ev.shiftKey) {
+          const w = Math.max(w1, h1 * ratio, wMin)
+          const h = w / ratio
+          return { w, h }
+        }
+        else {
+          return { w: Math.max(w1, minSize), h: Math.max(h1, minSize) }
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          const w1 = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          const h1 = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rbx - w * rotateCos.value + h * rotateSin.value
+          y = rby - w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          const h1 = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = rtx - w * rotateCos.value - h * rotateSin.value
+          y = rty - w * rotateSin.value + h * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          const w1 = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          const h1 = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = lbx + w * rotateCos.value + h * rotateSin.value
+          y = lby + w * rotateSin.value - h * rotateCos.value
+        }
+        else {
+          const w1 = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          const h1 = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+          const { w, h } = getSize(w1, h1)
+          x = ltx + w * rotateCos.value - h * rotateSin.value
+          y = lty + w * rotateSin.value + h * rotateCos.value
+        }
+      }
+
+      if (isLeft) {
+        if (isTop) {
+          x0.value = (x + rbx) / 2
+          y0.value = (y + rby) / 2
+          width.value = (rbx - x) * rotateCos.value + (rby - y) * rotateSin.value
+          height.value = -(rbx - x) * rotateSin.value + (rby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + rtx) / 2
+          y0.value = (y + rty) / 2
+          width.value = (rtx - x) * rotateCos.value - (y - rty) * rotateSin.value
+          height.value = (rtx - x) * rotateSin.value + (y - rty) * rotateCos.value
+        }
+      }
+      else {
+        if (isTop) {
+          x0.value = (x + lbx) / 2
+          y0.value = (y + lby) / 2
+          width.value = (x - lbx) * rotateCos.value - (lby - y) * rotateSin.value
+          height.value = (x - lbx) * rotateSin.value + (lby - y) * rotateCos.value
+        }
+        else {
+          x0.value = (x + ltx) / 2
+          y0.value = (y + lty) / 2
+          width.value = (x - ltx) * rotateCos.value + (y - lty) * rotateSin.value
+          height.value = -(x - ltx) * rotateSin.value + (y - lty) * rotateCos.value
+        }
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: isLeft ? '0' : undefined,
+      right: isLeft ? undefined : '0',
+      top: isTop ? '0' : undefined,
+      bottom: isTop ? undefined : '0',
+      cursor: +isLeft + +isTop === 1 ? 'nesw-resize' : 'nwse-resize',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getBorderProps(dir: 'l' | 'r' | 't' | 'b') {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value) / scale.value
+      const y = (ev.clientY - slideTop.value) / scale.value
+
+      const { ltx, lty, rtx, rty, lbx, lby, rbx, rby } = currentDrag
+
+      if (dir === 'l') {
+        const rx = (rtx + rbx) / 2
+        const ry = (rty + rby) / 2
+        width.value = Math.max((rx - x) * rotateCos.value + (ry - y) * rotateSin.value, minSize)
+        x0.value = rx - width.value * rotateCos.value / 2
+        y0.value = ry - width.value * rotateSin.value / 2
+      }
+      else if (dir === 'r') {
+        const lx = (ltx + lbx) / 2
+        const ly = (lty + lby) / 2
+        width.value = Math.max((x - lx) * rotateCos.value + (y - ly) * rotateSin.value, minSize)
+        x0.value = lx + width.value * rotateCos.value / 2
+        y0.value = ly + width.value * rotateSin.value / 2
+      }
+      else if (dir === 't') {
+        const bx = (lbx + rbx) / 2
+        const by = (lby + rby) / 2
+        height.value = Math.max((by - y) * rotateCos.value - (bx - x) * rotateSin.value, minSize)
+        x0.value = bx + height.value * rotateSin.value / 2
+        y0.value = by - height.value * rotateCos.value / 2
+      }
+      else if (dir === 'b') {
+        const tx = (ltx + rtx) / 2
+        const ty = (lty + rty) / 2
+        height.value = Math.max((y - ty) * rotateCos.value - (x - tx) * rotateSin.value, minSize)
+        x0.value = tx - height.value * rotateSin.value / 2
+        y0.value = ty + height.value * rotateCos.value / 2
+      }
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: dir === 'l' ? '0' : dir === 'r' ? `100%` : `50%`,
+      top: dir === 't' ? '0' : dir === 'b' ? `100%` : `50%`,
+      cursor: 'lr'.includes(dir) ? 'ew-resize' : 'ns-resize',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+function getRotateProps() {
+  return {
+    onPointerdown,
+    onPointermove: (ev: PointerEvent) => {
+      if (!currentDrag || ev.buttons !== 1)
+        return
+
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      const x = (ev.clientX - slideLeft.value - currentDrag.dx0) / scale.value - ctrlSize / 4
+      const y = (ev.clientY - slideTop.value - currentDrag.dy0) / scale.value - ctrlSize / 4
+
+      let angle = Math.atan2(y - y0.value, x - x0.value) * 180 / Math.PI + 90
+
+      const commonAngles = [0, 90, 180, 270, 360]
+      for (const a of commonAngles) {
+        if (Math.abs(angle - a) < 5) {
+          angle = a % 360
+          break
+        }
+      }
+
+      rotate.value = angle
+    },
+    onPointerup,
+    style: {
+      width: `${ctrlSize}px`,
+      height: `${ctrlSize}px`,
+      margin: `-${ctrlSize / 2}px`,
+      left: '50%',
+      top: '-20px',
+      cursor: 'grab',
+      borderRadius: '50%',
+    },
+    class: ctrlClasses,
+  }
+}
+
+const moveInterval = 20
+const intervalFnOptions = {
+  immediate: false,
+  immediateCallback: false,
+}
+const moveLeft = useIntervalFn(() => {
+  if (boundingRight.value <= minRemain)
+    return
+  x0.value--
+}, moveInterval, intervalFnOptions)
+const moveRight = useIntervalFn(() => {
+  if (boundingLeft.value >= slideWidth.value - minRemain)
+    return
+  x0.value++
+}, moveInterval, intervalFnOptions)
+const moveUp = useIntervalFn(() => {
+  if (boundingBottom.value <= minRemain)
+    return
+  y0.value--
+}, moveInterval, intervalFnOptions)
+const moveDown = useIntervalFn(() => {
+  if (boundingTop.value >= slideHeight.value - minRemain)
+    return
+  y0.value++
+}, moveInterval, intervalFnOptions)
+
+watchEffect(() => {
+  function shortcut(key: string, fn: Pausable) {
+    if (magicKeys[key].value)
+      fn.resume()
+    else fn.pause()
+  }
+  shortcut('left', moveLeft)
+  shortcut('right', moveRight)
+  shortcut('up', moveUp)
+  shortcut('down', moveDown)
+})
+</script>
+
+<template>
+  <div
+    v-if="Number.isFinite(x0)"
+    :data-drag-id="id"
+    :style="{
+      position: 'absolute',
+      zIndex: 100,
+      left: `${zoom * (x0 - width / 2)}px`,
+      top: `${zoom * (y0 - height / 2)}px`,
+      width: `${zoom * width}px`,
+      height: `${zoom * height}px`,
+      transformOrigin: 'center center',
+      transform: `rotate(${rotate}deg)`,
+    }"
+    @pointerdown="onPointerdown"
+    @pointermove="onPointermove"
+    @pointerup="onPointerup"
+  >
+    <div class="absolute inset-0 z-100 b b-dark dark:b-gray-400">
+      <template v-if="!autoHeight">
+        <div v-bind="getCornerProps(true, true)" />
+        <div v-bind="getCornerProps(true, false)" />
+        <div v-bind="getCornerProps(false, true)" />
+        <div v-bind="getCornerProps(false, false)" />
+      </template>
+      <div v-bind="getBorderProps('l')" />
+      <div v-bind="getBorderProps('r')" />
+      <template v-if="!autoHeight">
+        <div v-bind="getBorderProps('t')" />
+        <div v-bind="getBorderProps('b')" />
+      </template>
+      <div v-bind="getRotateProps()" />
+      <div
+        class="absolute -top-15px w-0 b b-dashed b-dark dark:b-gray-400"
+        :style="{
+          left: 'calc(50% - 1px)',
+          height: autoHeight ? '14px' : '10px',
+        }"
+      />
+    </div>
+  </div>
+</template>

package/internals/SlideContainer.vue

@@ -2,7 +2,7 @@
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
-import { injectionSlideScale } from '../constants'
+import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { useNav } from '../composables/useNav'
 
 const props = defineProps({
@@ -23,11 +23,12 @@ const props = defineProps({
 
 const { clicksDirection, isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement>()
-const element = useElementSize(root)
+const root = ref<HTMLDivElement | null>(null)
+const rootSize = useElementSize(root)
+const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : element.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
+const width = computed(() => props.width ? props.width : rootSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
 
 if (props.width) {
   watchEffect(() => {
@@ -42,7 +43,7 @@ const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
   if (props.scale && !isPrintMode.value)
-    return props.scale
+    return +props.scale
   if (screenAspect.value < slideAspect.value)
     return width.value / slideWidth.value
   return height.value * slideAspect.value / slideWidth.value
@@ -69,12 +70,13 @@ if (props.isMain) {
   `))
 }
 
-provideLocal(injectionSlideScale, scale as any)
+provideLocal(injectionSlideScale, scale)
+provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
   <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
-    <div id="slide-content" class="slidev-slide-content" :style="style">
+    <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlideWrapper.vue

@@ -4,6 +4,7 @@ import type { PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { getSlideClass } from '../utils'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -67,16 +68,24 @@ const SlideComponent = defineAsyncComponent({
 </script>
 
 <template>
-  <component
-    :is="SlideComponent"
-    :style="style"
-    :data-slidev-no="props.route.no"
-    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
-  />
+  <div :class="getSlideClass(route)">
+    <component
+      :is="SlideComponent"
+      :style="style"
+      :data-slidev-no="props.route.no"
+      :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+    />
+  </div>
 </template>
 
 <style scoped>
 .disable-view-transition:deep(*) {
   view-transition-name: none !important;
 }
+
+.slidev-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
 </style>

package/internals/SlidesShow.vue

@@ -2,13 +2,14 @@
 import { TransitionGroup, computed, shallowRef, watch } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
 import { useNav } from '../composables/useNav'
-import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
 import { createFixedClicks } from '../composables/useClicks'
+import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
+import DragControl from './DragControl.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
@@ -65,21 +66,19 @@ function onAfterLeave() {
     tag="div"
     @after-leave="onAfterLeave"
   >
-    <div
+    <SlideWrapper
+      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
-    >
-      <SlideWrapper
-        :is="route.component!"
-        :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
-        :class="getSlideClass(route)"
-        :route="route"
-        :render-context="renderContext"
-      />
-    </div>
+      :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
+      :route="route"
+      :render-context="renderContext"
+    />
   </component>
 
+  <DragControl v-if="activeDragElement" :data="activeDragElement" />
+
   <div id="twoslash-container" />
 
   <!-- Global Top -->
@@ -95,10 +94,4 @@ function onAfterLeave() {
 #slideshow {
   height: 100%;
 }
-
-#slideshow > div {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
 </style>

package/modules/v-drag.ts

@@ -0,0 +1,44 @@
+import type { App } from 'vue'
+import { watch } from 'vue'
+import type { DragElementState } from '../composables/useDragElements'
+import { useDragElement } from '../composables/useDragElements'
+
+export function createVDragDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement & { draggingState: DragElementState }>('drag', {
+        // @ts-expect-error extra prop
+        name: 'v-drag',
+
+        created(el, binding, vnode) {
+          const state = useDragElement(binding, binding.value, vnode.props?.markdownSource)
+          if (vnode.props) {
+            vnode.props = { ...vnode.props }
+            delete vnode.props.markdownSource
+          }
+          state.container.value = el
+          el.draggingState = state
+          el.dataset.dragId = state.id
+          state.watchStopHandles.push(
+            watch(state.containerStyle, (style) => {
+              for (const [k, v] of Object.entries(style)) {
+                if (v)
+                  el.style[k as any] = v
+              }
+            }, { immediate: true }),
+          )
+          el.addEventListener('dblclick', state.startDragging)
+        },
+        mounted(el) {
+          el.draggingState.mounted()
+        },
+        unmounted(el) {
+          const state = el.draggingState
+          state.unmounted()
+          el.removeEventListener('dblclick', state.startDragging)
+          state.watchStopHandles.forEach(fn => fn())
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.9",
+  "version": "0.49.0-beta.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,14 +30,14 @@
   "dependencies": {
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.31",
-    "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/ph": "^1.1.12",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.2.3",
-    "@shikijs/vitepress-twoslash": "^1.2.3",
+    "@shikijs/monaco": "^1.3.0",
+    "@shikijs/vitepress-twoslash": "^1.3.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
     "@unhead/vue": "^1.9.4",
-    "@unocss/reset": "^0.58.9",
+    "@unocss/reset": "^0.59.0",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -53,17 +53,17 @@
     "monaco-editor": "^0.47.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.2.3",
+    "shiki": "^1.3.0",
     "shiki-magic-move": "^0.3.5",
-    "typescript": "^5.4.3",
-    "unocss": "^0.58.9",
+    "typescript": "^5.4.4",
+    "unocss": "^0.59.0",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.9",
-    "@slidev/types": "0.48.9"
+    "@slidev/parser": "0.49.0-beta.1",
+    "@slidev/types": "0.49.0-beta.1"
   },
   "devDependencies": {
-    "vite": "^5.2.7"
+    "vite": "^5.2.8"
   }
 }

package/setup/main.ts

@@ -7,6 +7,7 @@ import { createHead } from '@unhead/vue'
 import { routeForceRefresh } from '../logic/route'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVMarkDirective } from '../modules/v-mark'
+import { createVDragDirective } from '../modules/v-drag'
 import { createVMotionDirectives } from '../modules/v-motion'
 import { routes } from '../routes'
 import setups from '#slidev/setups/main'
@@ -34,6 +35,7 @@ export default async function setupMain(app: App) {
   app.use(createHead())
   app.use(createVClickDirectives())
   app.use(createVMarkDirective())
+  app.use(createVDragDirective())
   app.use(createVMotionDirectives())
   app.use(TwoSlashFloatingVue as any, { container: '#twoslash-container' })
 

package/setup/shortcuts.ts

@@ -2,7 +2,7 @@ import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
 import { downloadPDF } from '../utils'
 import { toggleDark } from '../logic/dark'
-import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
+import { activeDragElement, magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
@@ -29,15 +29,17 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
+  const navViaArrowKeys = and(not(showOverview), not(activeDragElement))
+
   let shortcuts: ShortcutOptions[] = [
     { name: 'next_space', key: and(space, not(shift)), fn: next, autoRepeat: true },
     { name: 'prev_space', key: and(space, shift), fn: prev, autoRepeat: true },
-    { name: 'next_right', key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
-    { name: 'prev_left', key: and(left, not(shift), not(showOverview)), fn: prev, autoRepeat: true },
+    { name: 'next_right', key: and(right, not(shift), navViaArrowKeys), fn: next, autoRepeat: true },
+    { name: 'prev_left', key: and(left, not(shift), navViaArrowKeys), fn: prev, autoRepeat: true },
     { name: 'next_page_key', key: 'pageDown', fn: next, autoRepeat: true },
     { name: 'prev_page_key', key: 'pageUp', fn: prev, autoRepeat: true },
-    { name: 'next_down', key: and(down, not(showOverview)), fn: nextSlide, autoRepeat: true },
-    { name: 'prev_up', key: and(up, not(showOverview)), fn: () => prevSlide(false), autoRepeat: true },
+    { name: 'next_down', key: and(down, navViaArrowKeys), fn: nextSlide, autoRepeat: true },
+    { name: 'prev_up', key: and(up, navViaArrowKeys), fn: () => prevSlide(false), autoRepeat: true },
     { name: 'next_shift', key: and(right, shift), fn: nextSlide, autoRepeat: true },
     { name: 'prev_shift', key: and(left, shift), fn: () => prevSlide(false), autoRepeat: true },
     { name: 'toggle_dark', key: and(d, not(drawingEnabled)), fn: toggleDark },

package/state/index.ts

@@ -1,6 +1,7 @@
 import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { slideAspect } from '../env'
+import type { DragElementState } from '../composables/useDragElements'
 
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
@@ -31,6 +32,8 @@ export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false,
 export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
 export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
 
+export const activeDragElement = shallowRef<DragElementState | null>(null)
+
 export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
 export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })