@slidev/client 0.49.0-beta.1 → 0.49.0-beta.2

package/builtin/CodeBlockWrapper.vue

@@ -63,10 +63,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/KaTexBlockWrapper.vue

@@ -58,10 +58,10 @@ onMounted(() => {
   if (!clicks || !props.ranges?.length)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
-  clicks.register(id, { max: end, delta })
+  const clicksInfo = clicks.calculateSince(props.at, props.ranges.length - 1)
+  clicks.register(id, clicksInfo)
 
-  const index = computed(() => Math.max(0, clicks.current - start + 1))
+  const index = computed(() => Math.max(0, clicks.current - clicksInfo.start + 1))
 
   const finallyRange = computed(() => {
     return props.finally === 'last' ? props.ranges.at(-1) : props.finally.toString()

package/builtin/Monaco.vue

@@ -16,6 +16,7 @@ import { debounce } from '@antfu/utils'
 import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
+import type { RawAtValue } from '@slidev/types'
 import { makeId } from '../logic/utils'
 import CodeRunner from '../internals/CodeRunner.vue'
 
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<{
   ata?: boolean
   runnable?: boolean
   autorun?: boolean | 'once'
+  showOutputAt?: RawAtValue
   outputHeight?: string
   highlightOutput?: boolean
   runnerOptions?: Record<string, unknown>
@@ -165,6 +167,7 @@ onMounted(async () => {
       v-model="code"
       :lang="lang"
       :autorun="props.autorun"
+      :show-output-at="props.showOutputAt"
       :height="props.outputHeight"
       :highlight-output="props.highlightOutput"
       :runner-options="props.runnerOptions"

package/builtin/ShikiMagicMove.vue

@@ -36,14 +36,14 @@ onMounted(() => {
     throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
 
   const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
-  const { start, end, delta } = clicks.resolve(props.at ?? '+1', clickCounts - 1)
-  clicks.register(id, { max: end, delta })
+  const clickInfo = clicks.calculateSince(props.at ?? '+1', clickCounts - 1)
+  clicks.register(id, clickInfo)
 
   watch(
     () => clicks.current,
     () => {
       // Calculate the step and rangeStr based on the current click count
-      const clickCount = clicks.current - start
+      const clickCount = clicks.current - clickInfo.start
       let step = steps.length - 1
       let currentClickSum = 0
       let rangeStr = 'all'

package/builtin/SlidevVideo.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { and } from '@vueuse/math'
 import { useSlideContext } from '../context'
+import { resolvedClickMap } from '../modules/v-click'
 import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
@@ -17,12 +18,7 @@ const props = defineProps<{
 const printPoster = computed(() => props.printPoster ?? props.poster)
 const printTimestamp = computed(() => props.printTimestamp ?? props.timestamp ?? 0)
 
-const {
-  $slidev,
-  $clicksContext,
-  $renderContext,
-  $route,
-} = useSlideContext()
+const { $slidev, $renderContext, $route } = useSlideContext()
 const { isPrintMode } = useNav()
 
 const noPlay = computed(() => isPrintMode.value || !['slide', 'presenter'].includes($renderContext.value))
@@ -38,7 +34,7 @@ onMounted(() => {
   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 matchClick = computed(() => !!video.value && (resolvedClickMap.get(video.value)?.isShown?.value ?? true))
   const matchRouteAndClick = and(matchRoute, matchClick)
 
   watch(matchRouteAndClick, () => {

package/builtin/VClicks.ts

@@ -7,7 +7,7 @@
 import { toArray } from '@antfu/utils'
 import type { VNode, VNodeArrayChildren } from 'vue'
 import { Comment, createVNode, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { normalizeAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
@@ -37,7 +37,12 @@ export default defineComponent({
   },
   render() {
     const every = +this.every
-    const [isRelative, at] = normalizeAtProp(this.at)
+    const at = normalizeAtValue(this.at)
+    const isRelative = typeof at === 'string'
+    if (typeof at !== 'string' && typeof at !== 'number') {
+      console.warn('[slidev] Invalid at prop for v-clicks component:', at)
+      return
+    }
 
     const click = resolveDirective('click')!
 

package/composables/useClicks.ts

@@ -1,67 +1,115 @@
 import { clamp, sum } from '@antfu/utils'
-import type { ClicksContext, SlideRoute } from '@slidev/types'
+import type { ClicksContext, NormalizedAtValue, RawAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
-import { ref, shallowReactive } from 'vue'
-import { normalizeAtProp } from '../logic/utils'
+import { computed, ref, shallowReactive } from 'vue'
 import { routeForceRefresh } from '../logic/route'
 
+export function normalizeAtValue(at: RawAtValue): NormalizedAtValue {
+  if (at === false || at === 'false')
+    return null
+  if (at == null || at === true || at === 'true')
+    return '+1'
+  if (Array.isArray(at))
+    return [+at[0], +at[1]]
+  if (typeof at === 'string' && '+-'.includes(at[0]))
+    return at
+  return +at
+}
+
 export function createClicksContextBase(
   current: Ref<number>,
   clicksStart = 0,
   clicksTotalOverrides?: number,
 ): ClicksContext {
-  const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
-  const map: ClicksContext['map'] = shallowReactive(new Map())
-
-  return {
+  const context: ClicksContext = {
     get current() {
       // Here we haven't know clicksTotal yet.
-      return clamp(+current.value, clicksStart, this.total)
+      return clamp(+current.value, clicksStart, context.total)
     },
     set current(value) {
-      current.value = clamp(+value, clicksStart, this.total)
+      current.value = clamp(+value, clicksStart, context.total)
     },
     clicksStart,
-    relativeOffsets,
-    map,
+    relativeOffsets: new Map(),
+    maxMap: shallowReactive(new Map()),
     onMounted() { },
-    resolve(at, size = 1) {
-      const [isRelative, value] = normalizeAtProp(at)
-      if (isRelative) {
-        const offset = this.currentOffset
-        return {
-          start: offset + value,
-          end: offset + value + size - 1,
-          delta: value + size - 1,
-        }
+    calculateSince(at, size = 1) {
+      let start: number, max: number, delta: number
+      if (typeof at === 'string') {
+        const offset = context.currentOffset
+        const value = +at
+        start = offset + value
+        max = offset + value + size - 1
+        delta = value + size - 1
       }
       else {
-        return {
-          start: value,
-          end: value + size - 1,
-          delta: 0,
-        }
+        start = at
+        max = at + size - 1
+        delta = 0
+      }
+      return {
+        start,
+        end: +Number.POSITIVE_INFINITY,
+        max,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => context.current >= start),
       }
     },
-    register(el, resolved) {
-      relativeOffsets.set(el, resolved.delta)
-      map.set(el, resolved)
+    calculateRange([a, b]) {
+      let start: number, end: number, delta: number
+      if (typeof a === 'string') {
+        const offset = context.currentOffset
+        start = offset + +a
+        delta = +a
+      }
+      else {
+        start = a
+        delta = 0
+      }
+      if (typeof b === 'string') {
+        end = start + +b
+        delta += +b
+      }
+      else {
+        end = b
+      }
+      return {
+        start,
+        end,
+        max: end,
+        delta,
+        isCurrent: computed(() => context.current === start),
+        isActive: computed(() => start <= context.current && context.current < end),
+      }
+    },
+    calculate(at) {
+      if (at == null)
+        return null
+      if (Array.isArray(at))
+        return context.calculateRange(at)
+      return context.calculateSince(at)
+    },
+    register(el, { delta, max }) {
+      context.relativeOffsets.set(el, delta)
+      context.maxMap.set(el, max)
     },
     unregister(el) {
-      relativeOffsets.delete(el)
-      map.delete(el)
+      context.relativeOffsets.delete(el)
+      context.maxMap.delete(el)
     },
     get currentOffset() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return sum(...relativeOffsets.values())
+      return sum(...context.relativeOffsets.values())
     },
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksTotalOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksTotalOverrides ?? Math.max(0, ...context.maxMap.values())
     },
   }
+  return context
 }
 
 export function createFixedClicks(

package/composables/useDragElements.ts

@@ -52,7 +52,9 @@ export function useDragElementsUpdater(no: number) {
         return
       frontmatter.dragPos[id] = posStr
       newPatch = {
-        frontmatter,
+        frontmatter: {
+          dragPos: frontmatter.dragPos,
+        },
       }
     }
     else {
@@ -267,8 +269,10 @@ export function useDragElement(directive: DirectiveBinding | null, posRaw?: stri
 
   watchStopHandles.push(
     onClickOutside(container, (ev) => {
-      if ((ev.target as HTMLElement | null)?.dataset?.dragId !== id)
-        state.stopDragging()
+      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)

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/constants.ts

@@ -14,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'
@@ -77,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>

package/internals/DragControl.vue

@@ -355,6 +355,7 @@ watchEffect(() => {
 <template>
   <div
     v-if="Number.isFinite(x0)"
+    id="drag-control-container"
     :data-drag-id="id"
     :style="{
       position: 'absolute',

package/internals/NavControls.vue

@@ -5,7 +5,6 @@ import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
-import { getSlidePath } from '../logic/slides'
 import { useDrawings } from '../composables/useDrawings'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
@@ -21,7 +20,6 @@ const props = defineProps({
 })
 
 const {
-  currentRoute,
   currentSlideNo,
   hasNext,
   hasPrev,
@@ -31,6 +29,8 @@ const {
   next,
   prev,
   total,
+  enterPresenter,
+  exitPresenter,
 } = useNav()
 const {
   brush,
@@ -40,11 +40,6 @@ const {
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
-const presenterPassword = computed(() => currentRoute.value.query.password)
-const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
-const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
-
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
   if (root.value && activeElement.value && root.value.contains(activeElement.value))
@@ -124,12 +119,12 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
 
       <template v-if="!isEmbedded">
-        <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
+        <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <carbon:presentation-file />
-        </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        </IconButton>
+        <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
           <carbon:user-speaker />
-        </RouterLink>
+        </IconButton>
 
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"

package/logic/contextMenu.ts

@@ -0,0 +1,34 @@
+import type { ContextMenuItem } from '@slidev/types'
+import type { ComputedRef } from 'vue'
+import { shallowRef } from 'vue'
+import setupContextMenu from '../setup/context-menu'
+import { configs, mode } from '../env'
+
+export const currentContextMenu = shallowRef<null | {
+  x: number
+  y: number
+  items: ComputedRef<ContextMenuItem[]>
+}>(null)
+
+export function openContextMenu(x: number, y: number) {
+  currentContextMenu.value = {
+    x,
+    y,
+    items: setupContextMenu(),
+  }
+}
+
+export function closeContextMenu() {
+  currentContextMenu.value = null
+}
+
+export function onContextMenu(ev: MouseEvent) {
+  if (configs.contextMenu !== true && configs.contextMenu !== undefined && configs.contextMenu !== mode)
+    return
+  if (ev.shiftKey || ev.defaultPrevented)
+    return
+
+  openContextMenu(ev.pageX, ev.pageY)
+  ev.preventDefault()
+  ev.stopPropagation()
+}

package/logic/utils.ts

@@ -32,24 +32,6 @@ export function makeId(length = 5) {
   return result.join('')
 }
 
-/**
- *   '+3' => '+3'
- *   '-3' => '-3'
- *    '3' => 3
- *      3 => 3
- */
-export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolean, value: number] {
-  let n = +at
-  if (Number.isNaN(n)) {
-    console.warn('[slidev] Invalid click position:', at)
-    n = 0
-  }
-  return [
-    typeof at === 'string' && '+-'.includes(at[0]),
-    n,
-  ]
-}
-
 export function updateCodeHighlightRange(
   rangeStr: string,
   linesCount: number,

package/modules/v-click.ts

@@ -1,6 +1,6 @@
-import type { ResolvedClicksInfo } from '@slidev/types'
 import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
+import type { ClicksElement, RawAtValue } from '@slidev/types'
 import {
   CLASS_VCLICK_CURRENT,
   CLASS_VCLICK_FADE,
@@ -8,32 +8,29 @@ import {
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
-  injectionClickVisibility,
   injectionClicksContext,
 } from '../constants'
-import { directiveInject, directiveProvide } from '../utils'
-
-export type VClickValue = undefined | string | number | [string | number, string | number] | boolean
+import { directiveInject } from '../utils'
+import { normalizeAtValue } from '../composables/useClicks'
 
 export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive<HTMLElement, VClickValue>('click', {
+      app.directive<HTMLElement, RawAtValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true)
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
           el.classList.toggle(CLASS_VCLICK_TARGET, true)
 
           // Expose the resolved clicks info to the element to make it easier to understand and debug
-          const clicks = Array.isArray(resolved.clicks) ? resolved.clicks : [resolved.clicks, undefined]
-          el.dataset.slidevClicksStart = String(clicks[0])
-          if (clicks[1] != null)
-            el.dataset.slidevClicksEnd = String(clicks[1])
+          el.dataset.slidevClicksStart = String(resolved.start)
+          if (Number.isFinite(resolved.end))
+            el.dataset.slidevClicksEnd = String(resolved.end)
 
           // @ts-expect-error extra prop
           el.watchStopHandle = watchEffect(() => {
@@ -56,12 +53,12 @@ export function createVClickDirectives() {
         unmounted,
       })
 
-      app.directive<HTMLElement, VClickValue>('after', {
+      app.directive<HTMLElement, RawAtValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true, true)
+          const resolved = resolveClick(el, dir, '+0')
           if (resolved == null)
             return
 
@@ -88,12 +85,12 @@ export function createVClickDirectives() {
         unmounted,
       })
 
-      app.directive<HTMLElement, VClickValue>('click-hide', {
+      app.directive<HTMLElement, RawAtValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
         mounted(el, dir) {
-          const resolved = resolveClick(el, dir, dir.value, true, false, true)
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -118,75 +115,42 @@ export function createVClickDirectives() {
   }
 }
 
-function isClickActive(thisClick: number | [number, number], clicks: number) {
-  return Array.isArray(thisClick)
-    ? thisClick[0] <= clicks && clicks < thisClick[1]
-    : thisClick <= clicks
-}
+export const resolvedClickMap = new Map<ClicksElement, ReturnType<typeof resolveClick>>()
 
-function isClickCurrent(thisClick: number | [number, number], clicks: number) {
-  return Array.isArray(thisClick)
-    ? thisClick[0] === clicks
-    : thisClick === clicks
-}
-
-export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: VClickValue, provideVisibility = false, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: RawAtValue, explicitHide = false) {
   const ctx = directiveInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx)
     return null
 
-  if (value === false || value === 'false')
-    return null
-
-  flagHide ||= dir.modifiers.hide !== false && dir.modifiers.hide != null
+  const flagHide = explicitHide || (dir.modifiers.hide !== false && dir.modifiers.hide != null)
   const flagFade = dir.modifiers.fade !== false && dir.modifiers.fade != null
 
-  if (clickAfter)
-    value = '+0'
-  else if (value == null || value === true || value === 'true')
-    value = '+1'
-
-  let delta: number
-  let thisClick: number | [number, number]
-  let maxClick: number
-  if (Array.isArray(value)) {
-    // range (absolute)
-    delta = 0
-    thisClick = [+value[0], +value[1]]
-    maxClick = +value[1]
-  }
-  else {
-    ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))
-  }
+  const at = normalizeAtValue(value)
+  const info = ctx.calculate(at)
+  if (!info)
+    return null
 
-  const isActive = computed(() => isClickActive(thisClick, ctx.current))
-  const isCurrent = computed(() => isClickCurrent(thisClick, ctx.current))
-  const isShown = computed(() => flagHide ? !isActive.value : isActive.value)
+  ctx.register(el, info)
 
-  const resolved: ResolvedClicksInfo = {
-    max: maxClick,
-    clicks: thisClick,
-    delta,
-    isActive,
-    isCurrent,
+  const isShown = computed(() => flagHide ? !info.isActive.value : info.isActive.value)
+  const visibilityState = computed(() => {
+    if (isShown.value)
+      return 'shown'
+    if (Number.isFinite(info.end))
+      return ctx.current < info.start ? 'before' : 'after'
+    else
+      return flagHide ? 'after' : 'before'
+  })
+
+  const resolved = {
+    ...info,
     isShown,
+    visibilityState,
     flagFade,
     flagHide,
   }
-  ctx.register(el, resolved)
-
-  if (provideVisibility) {
-    directiveProvide(dir, injectionClickVisibility, computed(() => {
-      if (isShown.value)
-        return true
-      if (Array.isArray(thisClick))
-        return ctx.current < thisClick[0] ? 'before' : 'after'
-      else
-        return flagHide ? 'after' : 'before'
-    }))
-  }
-
+  resolvedClickMap.set(el, resolved)
   return resolved
 }
 

package/modules/v-mark.ts

@@ -2,14 +2,14 @@ import type { RoughAnnotationConfig } from '@slidev/rough-notation'
 import { annotate } from '@slidev/rough-notation'
 import type { App } from 'vue'
 import { computed, watchEffect } from 'vue'
-import type { VClickValue } from './v-click'
+import type { RawAtValue } from '@slidev/types'
 import { resolveClick } from './v-click'
 
 export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
-  at: VClickValue
+  at: RawAtValue
 }
 
-export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+export type RoughDirectiveValue = RawAtValue | RoughDirectiveOptions
 
 function addClass(options: RoughDirectiveOptions, cls: string) {
   options.class = [options.class, cls].filter(Boolean).join(' ')

package/modules/v-motion.ts

@@ -1,18 +1,12 @@
 import type { App, ObjectDirective } from 'vue'
 import { watch } from 'vue'
 import { MotionDirective } from '@vueuse/motion'
-import type { ResolvedClicksInfo } from '@slidev/types'
-import { injectionClickVisibility, injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
+import type { ClicksInfo } from '@slidev/types'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext } from '../constants'
 import { useNav } from '../composables/useNav'
 import { makeId } from '../logic/utils'
 import { directiveInject } from '../utils'
-import type { VClickValue } from './v-click'
-import { resolveClick } from './v-click'
-
-export type MotionDirectiveValue = undefined | VClickValue | {
-  key?: string
-  at?: VClickValue
-}
+import { resolvedClickMap } from './v-click'
 
 export function createVMotionDirectives() {
   return {
@@ -22,6 +16,11 @@ export function createVMotionDirectives() {
         // @ts-expect-error extra prop
         name: 'v-motion',
         mounted(el, binding, node, prevNode) {
+          const clicksContext = directiveInject(binding, injectionClicksContext)
+          const thisPage = directiveInject(binding, injectionCurrentPage)
+          const renderContext = directiveInject(binding, injectionRenderContext)
+          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
+
           const props = node.props = { ...node.props }
 
           const variantInitial = { ...props.initial, ...props.variants?.['slidev-initial'] }
@@ -36,7 +35,7 @@ export function createVMotionDirectives() {
             id: string
             at: number | [number, number]
             variant: Record<string, unknown>
-            resolved: ResolvedClicksInfo | null
+            info: ClicksInfo | null | undefined
           }[] = []
 
           for (const k of Object.keys(props)) {
@@ -48,7 +47,7 @@ export function createVMotionDirectives() {
                 id,
                 at,
                 variant: { ...props[k] },
-                resolved: resolveClick(id, binding, at),
+                info: clicksContext?.value.calculate(at),
               })
               delete props[k]
             }
@@ -59,11 +58,6 @@ export function createVMotionDirectives() {
           original.created!(el, binding, node, prevNode)
           original.mounted!(el, binding, node, prevNode)
 
-          const thisPage = directiveInject(binding, injectionCurrentPage)
-          const renderContext = directiveInject(binding, injectionRenderContext)
-          const clickVisibility = directiveInject(binding, injectionClickVisibility)
-          const clicksContext = directiveInject(binding, injectionClicksContext)
-          const { currentPage, clicks: currentClicks, isPrintMode } = useNav()
           // @ts-expect-error extra prop
           const motion = el.motionInstance
           motion.clickIds = clicks.map(i => i.id)
@@ -71,7 +65,7 @@ export function createVMotionDirectives() {
           motion.watchStopHandle = watch(
             [thisPage, currentPage, currentClicks].filter(Boolean),
             () => {
-              const visibility = clickVisibility?.value ?? true
+              const visibility = resolvedClickMap.get(el)?.visibilityState.value ?? 'shown'
               if (!clicksContext?.value || !['slide', 'presenter'].includes(renderContext?.value ?? '')) {
                 const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
                 for (const { variant } of clicks)
@@ -80,10 +74,10 @@ export function createVMotionDirectives() {
                 motion.set(mixedVariant)
               }
               else if (isPrintMode.value || thisPage?.value === currentPage.value) {
-                if (visibility === true) {
+                if (visibility === 'shown') {
                   const mixedVariant: Record<string, unknown> = { ...variantInitial, ...variantEnter }
-                  for (const { variant, resolved: resolvedClick } of clicks) {
-                    if (!resolvedClick || resolvedClick.isActive.value)
+                  for (const { variant, info } of clicks) {
+                    if (!info || info.isActive.value)
                       Object.assign(mixedVariant, variant)
                   }
                   if (isPrintMode.value)
@@ -104,14 +98,9 @@ export function createVMotionDirectives() {
             },
           )
         },
-        unmounted(el, dir) {
-          if (!directiveInject(dir, injectionClicksContext)?.value)
-            return
-
-          const ctx = directiveInject(dir, injectionClicksContext)?.value
+        unmounted(el) {
           // @ts-expect-error extra prop
           const motion = el.motionInstance
-          motion.clickIds.map((id: string) => ctx?.unregister(id))
           motion.watchStopHandle()
         },
       })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.0-beta.1",
+  "version": "0.49.0-beta.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -36,8 +36,8 @@
     "@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.59.0",
+    "@unhead/vue": "^1.9.5",
+    "@unocss/reset": "^0.59.2",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
@@ -46,7 +46,6 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
@@ -55,13 +54,14 @@
     "recordrtc": "^5.6.2",
     "shiki": "^1.3.0",
     "shiki-magic-move": "^0.3.5",
-    "typescript": "^5.4.4",
-    "unocss": "^0.59.0",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.2",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.49.0-beta.1",
-    "@slidev/types": "0.49.0-beta.1"
+    "yaml": "^2.4.1",
+    "@slidev/parser": "0.49.0-beta.2",
+    "@slidev/types": "0.49.0-beta.2"
   },
   "devDependencies": {
     "vite": "^5.2.8"

package/pages/play.vue

@@ -9,6 +9,7 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 
@@ -22,9 +23,9 @@ function onClick(e: MouseEvent) {
   if (showEditor.value)
     return
 
-  if ((e.target as HTMLElement)?.id === 'slide-container') {
+  if (e.button === 0 && (e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previous
-    if ((e.screenX / window.innerWidth) > 0.6)
+    if ((e.pageX / window.innerWidth) > 0.6)
       next()
     else
       prev()
@@ -57,6 +58,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :scale="slideScale"
       :is-main="true"
       @pointerdown="onClick"
+      @contextmenu="onContextMenu"
     >
       <template #default>
         <SlidesShow render-context="slide" />

package/pages/presenter.vue

@@ -7,6 +7,7 @@ import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout,
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
+import { onContextMenu } from '../logic/contextMenu'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
@@ -21,6 +22,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
+import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 
@@ -112,6 +114,7 @@ onMounted(() => {
         <SlideContainer
           key="main"
           class="h-full w-full p-2 lg:p-4 flex-auto"
+          @contextmenu="onContextMenu"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
@@ -209,6 +212,7 @@ onMounted(() => {
   </div>
   <Goto />
   <QuickOverview v-model="showOverview" />
+  <ContextMenu />
 </template>
 
 <style scoped>

package/setup/code-runners.ts

@@ -26,9 +26,9 @@ export default createSingletonPromise(async () => {
   })
 
   const resolveId = async (specifier: string) => {
-    if (!/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
-      return specifier
-    const res = await fetch(`/@slidev/resolve-id/${specifier}`)
+    if (!'./'.includes(specifier[0]) && !/^(@[^\/:]+?\/)?[^\/:]+$/.test(specifier))
+      return specifier // this might be a url or something else
+    const res = await fetch(`/@slidev/resolve-id?specifier=${specifier}`)
     if (!res.ok)
       return null
     const id = await res.text()
@@ -85,7 +85,10 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
   replace.clear = () => allLogs.length = 0
   const vmConsole = Object.assign({}, console, replace)
   try {
-    const safeJS = `return async (console) => {${sanitizeJS(code)}}`
+    const safeJS = `return async (console) => {
+      window.console = console
+      ${sanitizeJS(code)}
+    }`
     // eslint-disable-next-line no-new-func
     await (new Function(safeJS)())(vmConsole)
   }

package/setup/context-menu.ts

@@ -0,0 +1,113 @@
+/// <reference types="unplugin-icons/types/vue3" />
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import type { ContextMenuItem } from '@slidev/types'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from '../composables/useDrawings'
+import { fullscreen, showEditor, toggleOverview } from '../state'
+import setups from '#slidev/setups/context-menu'
+
+import IconArrowLeft from '~icons/carbon/arrow-left'
+import IconArrowRight from '~icons/carbon/arrow-right'
+import IconArrowUp from '~icons/carbon/arrow-up'
+import IconArrowDown from '~icons/carbon/arrow-down'
+import IconPen from '~icons/carbon/pen'
+import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
+import IconApps from '~icons/carbon/apps'
+import IconPresentationFile from '~icons/carbon/presentation-file'
+import IconUserSpeaker from '~icons/carbon/user-speaker'
+import IconMaximize from '~icons/carbon/maximize'
+import IconMinimize from '~icons/carbon/minimize'
+
+let items: ComputedRef<ContextMenuItem[]> | undefined
+
+export default () => {
+  if (items)
+    return items
+
+  const {
+    next,
+    nextSlide,
+    prev,
+    prevSlide,
+    hasNext,
+    hasPrev,
+    currentPage,
+    total,
+    isPresenter,
+    enterPresenter,
+    exitPresenter,
+    isEmbedded,
+    isPresenterAvailable,
+  } = useNav()
+  const { drawingEnabled } = useDrawings()
+  const {
+    isFullscreen,
+    toggle: toggleFullscreen,
+  } = fullscreen
+
+  return items = setups.reduce(
+    (items, fn) => fn(items),
+    computed(() => [
+      {
+        small: true,
+        icon: IconArrowLeft,
+        label: 'Previous Click',
+        action: prev,
+        disabled: !hasPrev.value,
+      },
+      {
+        small: true,
+        icon: IconArrowRight,
+        label: 'Next Click',
+        action: next,
+        disabled: !hasNext.value,
+      },
+      {
+        small: true,
+        icon: IconArrowUp,
+        label: 'Previous Slide',
+        action: prevSlide,
+        disabled: currentPage.value <= 1,
+      },
+      {
+        small: true,
+        icon: IconArrowDown,
+        label: 'Next Slide',
+        action: nextSlide,
+        disabled: currentPage.value >= total.value,
+      },
+      'separator',
+      {
+        icon: IconTextNotationToggle,
+        label: showEditor.value ? 'Hide editor' : 'Show editor',
+        action: () => (showEditor.value = !showEditor.value),
+      },
+      {
+        icon: IconPen,
+        label: drawingEnabled.value ? 'Hide drawing toolbar' : 'Show drawing toolbar',
+        action: () => (drawingEnabled.value = !drawingEnabled.value),
+      },
+      {
+        icon: IconApps,
+        label: 'Show slide overview',
+        action: toggleOverview,
+      },
+      isPresenter.value && {
+        icon: IconPresentationFile,
+        label: 'Exit Presenter Mode',
+        action: exitPresenter,
+      },
+      __SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable.value && {
+        icon: IconUserSpeaker,
+        label: 'Enter Presenter Mode',
+        action: enterPresenter,
+      },
+      !isEmbedded.value && {
+        icon: isFullscreen.value ? IconMinimize : IconMaximize,
+        label: isFullscreen.value ? 'Close fullscreen' : 'Enter fullscreen',
+        action: toggleFullscreen,
+      },
+    ].filter(Boolean) as ContextMenuItem[]),
+  )
+}