@slidev/client 0.48.0-beta.9 → 0.48.0

package/builtin/VClick.ts

@@ -6,6 +6,7 @@
 
 import type { PropType, VNode } from 'vue'
 import { Text, defineComponent, h } from 'vue'
+import { CLICKS_MAX } from '../constants'
 import VClicks from './VClicks'
 
 export default defineComponent({
@@ -31,7 +32,7 @@ export default defineComponent({
     return h(
       VClicks,
       {
-        every: 99999,
+        every: CLICKS_MAX,
         at: this.at,
         hide: this.hide,
         fade: this.fade,

package/composables/useClicks.ts

@@ -1,24 +1,31 @@
 import { sum } from '@antfu/utils'
-import type { ClicksContext } from '@slidev/types'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
 import { ref, shallowReactive } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
+import { routeForceRefresh } from '../logic/route'
 
-function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
+export function createClicksContextBase(
+  current: Ref<number>,
+  clicksOverrides?: number,
+  isDisabled?: () => boolean,
+): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
   return {
     get disabled() {
-      return isPrintMode.value && !isPrintWithClicks.value
+      return isDisabled ? isDisabled() : false
     },
     get current() {
-      return getCurrent()
+      return current.value
+    },
+    set current(value) {
+      current.value = value
     },
     relativeOffsets,
     map,
+    onMounted() {},
     resolve(at, size = 1) {
       const [isRelative, value] = normalizeAtProp(at)
       if (isRelative) {
@@ -53,34 +60,14 @@ function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksOverrides
-        ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
 }
 
-export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
-  if (route?.meta?.__clicksContext)
-    return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? 99999)
-  const context = useClicksContextBase(
-    () => {
-      const currentPath = +(currentRoute.value?.path ?? 99999)
-      if (currentPath === thisPath)
-        return queryClicks.value
-      else if (currentPath > thisPath)
-        return 99999
-      else
-        return 0
-    },
-    route?.meta?.clicks,
-  )
-  if (route?.meta)
-    route.meta.__clicksContext = context
-  return context
-}
-
-export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
-  const current = ref(currentInit)
-  return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)]
+export function createFixedClicks(
+  route?: SlideRoute | undefined,
+  currentInit = 0,
+): ClicksContext {
+  return createClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/composables/useDarkMode.ts

@@ -0,0 +1,9 @@
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+
+export function useDarkMode() {
+  return {
+    isColorSchemaConfigured,
+    isDark,
+    toggleDark,
+  }
+}

package/composables/useDrawings.ts

@@ -0,0 +1,181 @@
+import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
+import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
+import { createDrauu } from 'drauu'
+import { createSharedComposable, toReactive, useLocalStorage } from '@vueuse/core'
+import { drawingState, onPatch, patch } from '../state/drawings'
+import { configs } from '../env'
+import { isInputting } from '../state'
+import { useNav } from './useNav'
+
+export const useDrawings = createSharedComposable(() => {
+  const { currentSlideNo, isPresenter } = useNav()
+
+  const brushColors = [
+    '#ff595e',
+    '#ffca3a',
+    '#8ac926',
+    '#1982c4',
+    '#6a4c93',
+    '#ffffff',
+    '#000000',
+  ]
+
+  const drawingEnabled = useLocalStorage('slidev-drawing-enabled', false)
+  const drawingPinned = useLocalStorage('slidev-drawing-pinned', false)
+  const brush = toReactive(useLocalStorage<Brush>('slidev-drawing-brush', {
+    color: brushColors[0],
+    size: 4,
+    mode: 'stylus',
+  }))
+
+  const isDrawing = ref(false)
+  const canUndo = ref(false)
+  const canRedo = ref(false)
+  const canClear = ref(false)
+
+  const _mode = ref<DrawingMode | 'arrow'>('stylus')
+  const syncUp = computed(() => configs.drawings.syncAll || isPresenter.value)
+  let disableDump = false
+
+  const drawingMode = computed({
+    get() {
+      return _mode.value
+    },
+    set(v: DrawingMode | 'arrow') {
+      _mode.value = v
+      if (v === 'arrow') {
+        // eslint-disable-next-line ts/no-use-before-define
+        drauu.mode = 'line'
+        brush.arrowEnd = true
+      }
+      else {
+        // eslint-disable-next-line ts/no-use-before-define
+        drauu.mode = v
+        brush.arrowEnd = false
+      }
+    },
+  })
+
+  const drauuOptions: DrauuOptions = reactive({
+    brush,
+    acceptsInputTypes: computed(() => (drawingEnabled.value && (!configs.drawings.presenterOnly || isPresenter.value)) ? undefined : ['pen' as const]),
+    coordinateTransform: false,
+  })
+
+  const drauu = markRaw(createDrauu(drauuOptions))
+
+  function clearDrauu() {
+    drauu.clear()
+    if (syncUp.value)
+      patch(currentSlideNo.value, '')
+  }
+
+  function updateState() {
+    canRedo.value = drauu.canRedo()
+    canUndo.value = drauu.canUndo()
+    canClear.value = !!drauu.el?.children.length
+  }
+
+  function loadCanvas(page?: number) {
+    disableDump = true
+    const data = drawingState[page || currentSlideNo.value]
+    if (data != null)
+      drauu.load(data)
+    else
+      drauu.clear()
+    updateState()
+    disableDump = false
+  }
+
+  drauu.on('changed', () => {
+    updateState()
+    if (!disableDump) {
+      const dump = drauu.dump()
+      const key = currentSlideNo.value
+      if ((drawingState[key] || '') !== dump && syncUp.value)
+        patch(key, drauu.dump())
+    }
+  })
+
+  onPatch((state) => {
+    disableDump = true
+    if (state[currentSlideNo.value] != null)
+      drauu.load(state[currentSlideNo.value] || '')
+    disableDump = false
+    updateState()
+  })
+
+  nextTick(() => {
+    watch(currentSlideNo, () => {
+      if (!drauu.mounted)
+        return
+      loadCanvas()
+    }, { immediate: true })
+  })
+
+  drauu.on('start', () => isDrawing.value = true)
+  drauu.on('end', () => isDrawing.value = false)
+
+  window.addEventListener('keydown', (e) => {
+    if (!drawingEnabled.value || isInputting.value)
+      return
+
+    const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey
+    let handled = true
+    if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
+      if (e.shiftKey)
+        drauu.redo()
+      else
+        drauu.undo()
+    }
+    else if (e.code === 'Escape') {
+      drawingEnabled.value = false
+    }
+    else if (e.code === 'KeyL' && noModifier) {
+      drawingMode.value = 'line'
+    }
+    else if (e.code === 'KeyA' && noModifier) {
+      drawingMode.value = 'arrow'
+    }
+    else if (e.code === 'KeyS' && noModifier) {
+      drawingMode.value = 'stylus'
+    }
+    else if (e.code === 'KeyR' && noModifier) {
+      drawingMode.value = 'rectangle'
+    }
+    else if (e.code === 'KeyE' && noModifier) {
+      drawingMode.value = 'ellipse'
+    }
+    else if (e.code === 'KeyC' && noModifier) {
+      clearDrauu()
+    }
+    else if (e.code.startsWith('Digit') && noModifier && +e.code[5] <= brushColors.length) {
+      brush.color = brushColors[+e.code[5] - 1]
+    }
+    else {
+      handled = false
+    }
+
+    if (handled) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }, false)
+
+  return {
+    brush,
+    brushColors,
+    canClear,
+    canRedo,
+    canUndo,
+    clear: clearDrauu,
+    drauu,
+    drauuOptions,
+    drawingEnabled,
+    drawingMode,
+    drawingPinned,
+    drawingState,
+    isDrawing,
+    loadCanvas,
+  }
+})

package/composables/useNav.ts

@@ -1,55 +1,357 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import type { TocItem } from '@slidev/types'
-import type { SlidevContextNav } from '../modules/context'
-import { addToTree, clicks, clicksContext, clicksTotal, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, go, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
-import { rawRoutes } from '../routes'
-
-export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>): SlidevContextNav {
-  const path = computed(() => route.value.path)
-  const total = computed(() => rawRoutes.length)
-
-  const currentPage = computed(() => Number.parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
-  const currentPath = computed(() => getPath(currentPage.value))
-  const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`) ?? rawRoutes.at(-1) ?? rawRoutes[0])
-  const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
-  const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
-
-  const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
-
-  const rawTree = computed(() => rawRoutes
-    .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
-    .reduce((acc: TocItem[], route: RouteRecordRaw) => {
-      addToTree(acc, route)
-      return acc
-    }, []))
-  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
-  const tree = computed(() => filterTree(treeWithActiveStatuses.value))
+import type { ClicksContext, SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalized, Router } from 'vue-router'
+import { createSharedComposable } from '@vueuse/core'
+import { logicOr } from '@vueuse/math'
+import { getCurrentTransition } from '../logic/transition'
+import { getSlide, getSlidePath } from '../logic/slides'
+import { CLICKS_MAX } from '../constants'
+import { skipTransition } from '../logic/hmr'
+import { configs } from '../env'
+import { useRouteQuery } from '../logic/route'
+import { useTocTree } from './useTocTree'
+import { createClicksContextBase } from './useClicks'
+import { slides } from '#slidev/slides'
+
+export interface SlidevContextNav {
+  slides: Ref<SlideRoute[]>
+  total: ComputedRef<number>
+
+  currentPath: ComputedRef<string>
+  currentPage: ComputedRef<number>
+  currentSlideNo: ComputedRef<number>
+  currentSlideRoute: ComputedRef<SlideRoute>
+  currentTransition: ComputedRef<TransitionGroupProps | undefined>
+  currentLayout: ComputedRef<string>
+
+  nextRoute: ComputedRef<SlideRoute>
+  prevRoute: ComputedRef<SlideRoute>
+  hasNext: ComputedRef<boolean>
+  hasPrev: ComputedRef<boolean>
+
+  clicksContext: ComputedRef<ClicksContext>
+  clicks: ComputedRef<number>
+  clicksTotal: ComputedRef<number>
+
+  /** The table of content tree */
+  tocTree: ComputedRef<TocItem[]>
+  /** The direction of the navigation, 1 for forward, -1 for backward */
+  navDirection: Ref<number>
+  /** The direction of the clicks, 1 for forward, -1 for backward */
+  clicksDirection: Ref<number>
+  /** Utility function for open file in editor, only avaible in dev mode  */
+  openInEditor: (url?: string) => Promise<boolean>
+
+  /** Go to next click */
+  next: () => Promise<void>
+  /** Go to previous click */
+  prev: () => Promise<void>
+  /** Go to next slide */
+  nextSlide: () => Promise<void>
+  /** Go to previous slide */
+  prevSlide: (lastClicks?: boolean) => Promise<void>
+  /** Go to slide */
+  go: (page: number | string, clicks?: number) => Promise<void>
+  /** Go to the first slide */
+  goFirst: () => Promise<void>
+  /** Go to the last slide */
+  goLast: () => Promise<void>
+}
+
+export interface SlidevContextNavState {
+  router: Router
+  currentRoute: ComputedRef<RouteLocationNormalized>
+  isPrintMode: ComputedRef<boolean>
+  isPrintWithClicks: ComputedRef<boolean>
+  isEmbedded: ComputedRef<boolean>
+  isPlaying: ComputedRef<boolean>
+  isPresenter: ComputedRef<boolean>
+  isNotesViewer: ComputedRef<boolean>
+  isPresenterAvailable: ComputedRef<boolean>
+  hasPrimarySlide: ComputedRef<boolean>
+  currentSlideNo: ComputedRef<number>
+  currentSlideRoute: ComputedRef<SlideRoute>
+  clicksContext: ComputedRef<ClicksContext>
+  queryClicksRaw: Ref<string>
+  queryClicks: WritableComputedRef<number>
+  getPrimaryClicks: (route: SlideRoute) => ClicksContext
+}
+
+export interface SlidevContextNavFull extends SlidevContextNav, SlidevContextNavState {}
+
+export function useNavBase(
+  currentSlideRoute: ComputedRef<SlideRoute>,
+  clicksContext: ComputedRef<ClicksContext>,
+  queryClicks: Ref<number> = ref(0),
+  isPresenter: Ref<boolean>,
+  router?: Router,
+): SlidevContextNav {
+  const total = computed(() => slides.value.length)
+
+  const navDirection = ref(0)
+  const clicksDirection = ref(0)
+
+  const currentPath = computed(() => getSlidePath(currentSlideRoute.value, isPresenter.value))
+  const currentSlideNo = computed(() => currentSlideRoute.value.no)
+  const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
+
+  const clicks = computed(() => clicksContext.value.current)
+  const clicksTotal = computed(() => clicksContext.value.total)
+  const nextRoute = computed(() => slides.value[Math.min(slides.value.length, currentSlideNo.value + 1) - 1])
+  const prevRoute = computed(() => slides.value[Math.max(1, currentSlideNo.value - 1) - 1])
+  const hasNext = computed(() => currentSlideNo.value < slides.value.length || clicks.value < clicksTotal.value)
+  const hasPrev = computed(() => currentSlideNo.value > 1 || clicks.value > 0)
+
+  const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
+
+  watch(currentSlideRoute, (next, prev) => {
+    navDirection.value = next.no - prev.no
+  })
+
+  async function openInEditor(url?: string) {
+    if (!__DEV__)
+      return false
+    if (url == null) {
+      const slide = currentSlideRoute.value?.meta?.slide
+      if (!slide)
+        return false
+      url = `${slide.filepath}:${slide.start}`
+    }
+    await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
+    return true
+  }
+
+  const tocTree = useTocTree(
+    slides,
+    currentSlideNo,
+    currentSlideRoute,
+  )
+
+  async function next() {
+    clicksDirection.value = 1
+    if (clicksTotal.value <= queryClicks.value)
+      await nextSlide()
+    else
+      queryClicks.value += 1
+  }
+
+  async function prev() {
+    clicksDirection.value = -1
+    if (queryClicks.value <= 0)
+      await prevSlide()
+    else
+      queryClicks.value -= 1
+  }
+
+  async function nextSlide() {
+    clicksDirection.value = 1
+    if (currentSlideNo.value < slides.value.length)
+      await go(currentSlideNo.value + 1)
+  }
+
+  async function prevSlide(lastClicks = true) {
+    clicksDirection.value = -1
+    const next = Math.max(1, currentSlideNo.value - 1)
+    await go(
+      next,
+      lastClicks
+        ? getSlide(next)?.meta.__clicksContext?.total ?? CLICKS_MAX
+        : undefined,
+    )
+  }
+
+  function goFirst() {
+    return go(1)
+  }
+
+  function goLast() {
+    return go(total.value)
+  }
+
+  async function go(page: number | string, clicks?: number) {
+    skipTransition.value = false
+    await router?.push({
+      path: getSlidePath(page, isPresenter.value),
+      query: {
+        ...router.currentRoute.value.query,
+        clicks: clicks || undefined,
+      },
+    })
+  }
 
   return {
-    rawRoutes,
-    route,
-    path,
+    slides,
     total,
-    clicksContext,
-    clicks,
-    clicksTotal,
-    currentPage,
     currentPath,
-    currentRoute,
-    currentSlideId,
+    currentSlideNo,
+    currentPage: currentSlideNo,
+    currentSlideRoute,
     currentLayout,
+    currentTransition,
+    clicksDirection,
     nextRoute,
-    rawTree,
-    treeWithActiveStatuses,
-    tree,
-    go,
-    downloadPDF,
-    next,
-    nextSlide,
+    prevRoute,
+    clicksContext,
+    clicks,
+    clicksTotal,
+    hasNext,
+    hasPrev,
+    tocTree,
+    navDirection,
     openInEditor,
+    next,
     prev,
+    go,
+    goLast,
+    goFirst,
+    nextSlide,
     prevSlide,
   }
 }
+
+export function useFixedNav(
+  currentSlideRoute: SlideRoute,
+  clicksContext: ClicksContext,
+): SlidevContextNav {
+  const noop = async () => { }
+  return {
+    ...useNavBase(
+      computed(() => currentSlideRoute),
+      computed(() => clicksContext),
+      ref(CLICKS_MAX),
+      ref(false),
+    ),
+    next: noop,
+    prev: noop,
+    nextSlide: noop,
+    prevSlide: noop,
+    goFirst: noop,
+    goLast: noop,
+    go: noop,
+  }
+}
+
+const useNavState = createSharedComposable((): SlidevContextNavState => {
+  const router = useRouter()
+
+  const currentRoute = computed(() => router.currentRoute.value)
+  const isPrintMode = computed(() => currentRoute.value.query.print !== undefined)
+  const isPrintWithClicks = computed(() => currentRoute.value.query.print === 'clicks')
+  const isEmbedded = computed(() => currentRoute.value.query.embedded !== undefined)
+  const isPlaying = computed(() => currentRoute.value.name === 'play')
+  const isPresenter = computed(() => currentRoute.value.name === 'presenter')
+  const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
+  const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || currentRoute.value.query.password === configs.remote))
+  const hasPrimarySlide = logicOr(isPlaying, isPresenter)
+
+  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+  const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])
+
+  const queryClicksRaw = useRouteQuery<string>('clicks', '0')
+
+  const clicksContext = computed(() => getPrimaryClicks(currentSlideRoute.value))
+
+  const queryClicks = computed({
+    get() {
+      if (clicksContext.value.disabled)
+        return CLICKS_MAX
+      let v = +(queryClicksRaw.value || 0)
+      if (Number.isNaN(v))
+        v = 0
+      return v
+    },
+    set(v) {
+      queryClicksRaw.value = v.toString()
+    },
+  })
+
+  function getPrimaryClicks(
+    route: SlideRoute,
+  ): ClicksContext {
+    if (route?.meta?.__clicksContext)
+      return route.meta.__clicksContext
+
+    const thisNo = route.no
+    const context = createClicksContextBase(
+      computed({
+        get() {
+          if (context.disabled)
+            return CLICKS_MAX
+          if (currentSlideNo.value === thisNo)
+            return +(queryClicksRaw.value || 0) || 0
+          else if (currentSlideNo.value > thisNo)
+            return CLICKS_MAX
+          else
+            return 0
+        },
+        set(v) {
+          if (currentSlideNo.value === thisNo)
+            queryClicksRaw.value = Math.min(v, context.total).toString()
+        },
+      }),
+      route?.meta?.clicks,
+      () => isPrintMode.value && !isPrintWithClicks.value,
+    )
+
+    // On slide mounted, make sure the query is not greater than the total
+    context.onMounted = () => {
+      if (queryClicksRaw.value)
+        queryClicksRaw.value = Math.min(+queryClicksRaw.value, context.total).toString()
+    }
+
+    if (route?.meta)
+      route.meta.__clicksContext = context
+
+    return context
+  }
+
+  return {
+    router,
+    currentRoute,
+    isPrintMode,
+    isPrintWithClicks,
+    isEmbedded,
+    isPlaying,
+    isPresenter,
+    isNotesViewer,
+    isPresenterAvailable,
+    hasPrimarySlide,
+    currentSlideNo,
+    currentSlideRoute,
+    clicksContext,
+    queryClicksRaw,
+    queryClicks,
+    getPrimaryClicks,
+  }
+})
+
+export const useNav = createSharedComposable((): SlidevContextNavFull => {
+  const state = useNavState()
+  const router = useRouter()
+
+  const nav = useNavBase(
+    state.currentSlideRoute,
+    state.clicksContext,
+    state.queryClicks,
+    state.isPresenter,
+    router,
+  )
+
+  watch(
+    [nav.total, state.currentRoute],
+    async () => {
+      if (state.hasPrimarySlide.value && !getSlide(state.currentRoute.value.params.no as string)) {
+        // The current slide may has been removed. Redirect to the last slide.
+        await nav.goLast()
+      }
+    },
+    { flush: 'pre', immediate: true },
+  )
+
+  return {
+    ...nav,
+    ...state,
+  }
+})