@slidev/client 0.48.9 → 0.49.0-beta.2

package/composables/useDragElements.ts

@@ -0,0 +1,286 @@
+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: {
+          dragPos: frontmatter.dragPos,
+        },
+      }
+    }
+    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) => {
+      const container = document.querySelector('#drag-control-container')
+      if (container && ev.target && container.contains(ev.target as HTMLElement))
+        return
+      state.stopDragging()
+    }),
+    watch(useWindowFocus(), (focused) => {
+      if (!focused)
+        state.stopDragging()
+    }),
+  )
+
+  return state
+}
+
+export type DragElementState = ReturnType<typeof useDragElement>

package/composables/useNav.ts

@@ -60,6 +60,11 @@ export interface SlidevContextNav {
   goFirst: () => Promise<void>
   /** Go to the last slide */
   goLast: () => Promise<void>
+
+  /** Enter presenter mode */
+  enterPresenter: () => void
+  /** Exit presenter mode */
+  exitPresenter: () => void
 }
 
 export interface SlidevContextNavState {
@@ -194,6 +199,19 @@ export function useNavBase(
     }
   }
 
+  function enterPresenter() {
+    router?.push({
+      path: getSlidePath(currentSlideNo.value, true),
+      query: { ...router.currentRoute.value.query },
+    })
+  }
+  function exitPresenter() {
+    router?.push({
+      path: getSlidePath(currentSlideNo.value, false),
+      query: { ...router.currentRoute.value.query },
+    })
+  }
+
   return {
     slides,
     total,
@@ -222,6 +240,8 @@ export function useNavBase(
     goFirst,
     nextSlide,
     prevSlide,
+    enterPresenter,
+    exitPresenter,
   }
 }
 

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,7 +14,6 @@ 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'
@@ -44,6 +44,7 @@ export const FRONTMATTER_FIELDS = [
   'title',
   'transition',
   'zoom',
+  'dragPos',
 ]
 
 export const HEADMATTER_FIELDS = [
@@ -75,4 +76,5 @@ export const HEADMATTER_FIELDS = [
   'drawings',
   'htmlAttrs',
   'mdc',
+  'contextMenu',
 ]

package/env.ts

@@ -4,6 +4,8 @@ import configs from '#slidev/configs'
 
 export { configs }
 
+export const mode = __DEV__ ? 'dev' : 'build'
+
 export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
 export const slideWidth = ref(configs.canvasWidth ?? 980)
 

package/internals/CodeRunner.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { debounce, toArray } from '@antfu/utils'
 import { useVModel } from '@vueuse/core'
-import type { CodeRunnerOutput } from '@slidev/types'
-import { computed, ref, shallowRef, watch } from 'vue'
+import type { CodeRunnerOutput, RawAtValue } from '@slidev/types'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch, watchSyncEffect } from 'vue'
 import { useSlideContext } from '../context'
 import setupCodeRunners from '../setup/code-runners'
 import { useNav } from '../composables/useNav'
+import { makeId } from '../logic/utils'
+import { normalizeAtValue } from '../composables/useClicks'
 import IconButton from './IconButton.vue'
 import DomElement from './DomElement.vue'
 
@@ -14,6 +16,7 @@ const props = defineProps<{
   lang: string
   autorun: boolean | 'once'
   height?: string
+  showOutputAt?: RawAtValue
   highlightOutput: boolean
   runnerOptions?: Record<string, unknown>
 }>()
@@ -24,7 +27,7 @@ const { isPrintMode } = useNav()
 
 const code = useVModel(props, 'modelValue', emit)
 
-const { $renderContext } = useSlideContext()
+const { $renderContext, $clicksContext } = useSlideContext()
 const disabled = computed(() => !['slide', 'presenter'].includes($renderContext.value))
 
 const autorun = isPrintMode.value ? 'once' : props.autorun
@@ -33,6 +36,25 @@ const outputs = shallowRef<CodeRunnerOutput[]>()
 const runCount = ref(0)
 const highlightFn = ref<(code: string, lang: string) => string>()
 
+const hidden = ref(props.showOutputAt)
+if (props.showOutputAt) {
+  const id = makeId()
+  onMounted(() => {
+    const at = normalizeAtValue(props.showOutputAt)
+    const info = $clicksContext.calculate(at)
+    if (info) {
+      $clicksContext.register(id, info)
+      watchSyncEffect(() => {
+        hidden.value = !info.isActive.value
+      })
+    }
+    else {
+      hidden.value = false
+    }
+  })
+  onUnmounted(() => $clicksContext.unregister(id))
+}
+
 const triggerRun = debounce(200, async () => {
   if (disabled.value)
     return
@@ -59,6 +81,7 @@ else if (autorun)
 
 <template>
   <div
+    v-show="!hidden"
     class="relative flex flex-col rounded-b border-t border-main"
     :style="{ height: props.height }"
     data-waitfor=".slidev-runner-output"

package/internals/ContextMenu.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { onClickOutside, useElementBounding, useEventListener, useWindowFocus } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { closeContextMenu, currentContextMenu } from '../logic/contextMenu'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { windowSize } from '../state'
+import { configs } from '../env'
+
+const container = ref<HTMLElement>()
+
+onClickOutside(container, closeContextMenu)
+useEventListener(document, 'mousedown', (ev) => {
+  if (ev.buttons & 2)
+    closeContextMenu()
+}, {
+  passive: true,
+  capture: true,
+})
+
+const isExplicitEnabled = computed(() => configs.contextMenu != null)
+
+const windowFocus = useWindowFocus()
+watch(windowFocus, (hasFocus) => {
+  if (!hasFocus)
+    closeContextMenu()
+})
+
+const firstSlide = useDynamicSlideInfo(1)
+function disableContextMenu() {
+  const info = firstSlide.info.value
+  if (!info)
+    return
+  firstSlide.update({
+    frontmatter: {
+      contextMenu: false,
+    },
+  })
+}
+
+const { width, height } = useElementBounding(container)
+const left = computed(() => {
+  const x = currentContextMenu.value?.x
+  if (!x)
+    return 0
+  if (x + width.value > windowSize.width.value)
+    return windowSize.width.value - width.value
+  return x
+})
+const top = computed(() => {
+  const y = currentContextMenu.value?.y
+  if (!y)
+    return 0
+  if (y + height.value > windowSize.height.value)
+    return windowSize.height.value - height.value
+  return y
+})
+</script>
+
+<template>
+  <div
+    v-if="currentContextMenu"
+    ref="container"
+    :style="`left:${left}px;top:${top}px`"
+    class="fixed z-100 w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 backdrop-blur bg-main bg-opacity-75! border border-main rounded-md shadow overflow-hidden select-none"
+    @contextmenu.prevent=""
+    @click="closeContextMenu"
+  >
+    <template v-for="item, index of currentContextMenu.items.value" :key="index">
+      <div v-if="item === 'separator'" :key="index" class="w-full my1 border-t border-main" />
+      <div
+        v-else-if="item.small"
+        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded"
+        :class="item.disabled ? `op40` : `hover:bg-active`"
+        :title="(item.label as string)"
+        @click="item.action"
+      >
+        <component :is="item.icon" />
+      </div>
+      <div
+        v-else
+        class="w-full grid grid-cols-[35px_1fr] p-2 pl-0 cursor-pointer rounded"
+        :class="item.disabled ? `op40` : `hover:bg-active`"
+        @click="item.action"
+      >
+        <div class="mx-auto">
+          <component :is="item.icon" />
+        </div>
+        <div v-if="typeof item.label === 'string'">
+          {{ item.label }}
+        </div>
+        <component :is="item.label" v-else />
+      </div>
+    </template>
+    <template v-if="!isExplicitEnabled">
+      <div class="w-full my1 border-t border-main" />
+      <div class="w-full text-xs p2">
+        <div class="text-main text-opacity-50!">
+          Hold <kbd class="border px1 py0.5 border-main rounded text-primary">Shift</kbd> and right click to open the native context menu
+          <button
+            v-if="__DEV__"
+            class="underline op50 hover:op100 mt1 block"
+            @click="disableContextMenu()"
+          >
+            Disable custom context menu
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/internals/Controls.vue

@@ -5,6 +5,7 @@ import { configs } from '../env'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
+import ContextMenu from './ContextMenu.vue'
 
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
@@ -20,4 +21,5 @@ if (__SLIDEV_FEATURE_RECORD__) {
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />
   <InfoDialog v-if="configs.info" v-model="showInfoDialog" />
+  <ContextMenu />
 </template>