@slidev/client 0.48.0-beta.23 → 0.48.0-beta.25

package/builtin/Link.vue

@@ -8,12 +8,14 @@ Usage:
 <Link :to="5" title="Go to slide 5" />
 -->
 <script setup lang="ts">
-import { isPrintMode } from '../logic/nav'
+import { useNav } from '../composables/useNav'
 
 defineProps<{
   to: number | string
   title?: string
 }>()
+
+const { isPrintMode } = useNav()
 </script>
 
 <template>

package/builtin/TocList.vue

@@ -10,7 +10,7 @@ Usage:
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
-import Titles from '#slidev/titles.md'
+import TitleRenderer from '#slidev/title-renderer'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -48,7 +48,7 @@ const styles = computed(() => {
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
       <Link :to="item.path">
-        <Titles :no="item.no" />
+        <TitleRenderer :no="item.no" />
       </Link>
       <TocList
         v-if="item.children.length > 0"

package/composables/useClicks.ts

@@ -1,19 +1,21 @@
 import { sum } from '@antfu/utils'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
-import { computed, ref, shallowReactive } from 'vue'
-import { currentSlideNo, isPrintMode, isPrintWithClicks } from '../logic/nav'
+import { ref, shallowReactive } from 'vue'
 import { normalizeAtProp } from '../logic/utils'
-import { CLICKS_MAX } from '../constants'
-import { routeForceRefresh, useRouteQuery } from '../logic/route'
+import { routeForceRefresh } from '../logic/route'
 
-function useClicksContextBase(current: Ref<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 current.value
@@ -63,48 +65,9 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
   }
 }
 
-const queryClicksRaw = useRouteQuery('clicks', '0')
-
-export function usePrimaryClicks(route: SlideRoute): ClicksContext {
-  if (route?.meta?.__clicksContext)
-    return route.meta.__clicksContext
-
-  const thisNo = route.no
-  const current = computed({
-    get() {
-      // eslint-disable-next-line ts/no-use-before-define
-      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) {
-        // eslint-disable-next-line ts/no-use-before-define
-        queryClicksRaw.value = Math.min(v, context.total).toString()
-      }
-    },
-  })
-  const context = useClicksContextBase(
-    current,
-    route?.meta?.clicks,
-  )
-
-  // 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)
-  }
-
-  if (route?.meta)
-    route.meta.__clicksContext = context
-  return context
-}
-
-export function useFixedClicks(route?: SlideRoute | undefined, currentInit = 0): ClicksContext {
-  return useClicksContextBase(ref(currentInit), route?.meta?.clicks)
+export function createFixedClicks(
+  route?: SlideRoute | undefined,
+  currentInit = 0,
+): ClicksContext {
+  return createClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

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,12 +1,18 @@
 import type { ClicksContext, SlideRoute, TocItem } from '@slidev/types'
-import type { ComputedRef, Ref, TransitionGroupProps } from 'vue'
+import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from 'vue'
 import { computed, ref, watch } from 'vue'
-import type { Router } from 'vue-router'
+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 { skipTransition } from './hmr'
+import { createClicksContextBase } from './useClicks'
 import { slides } from '#slidev/slides'
 
 export interface SlidevContextNav {
@@ -54,10 +60,32 @@ export interface SlidevContextNav {
   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)
@@ -65,7 +93,7 @@ export function useNavBase(
   const navDirection = ref(0)
   const clicksDirection = ref(0)
 
-  const currentPath = computed(() => getSlidePath(currentSlideRoute.value))
+  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'))
 
@@ -95,7 +123,11 @@ export function useNavBase(
     return true
   }
 
-  const tocTree = useTocTree(slides)
+  const tocTree = useTocTree(
+    slides,
+    currentSlideNo,
+    currentSlideRoute,
+  )
 
   async function next() {
     clicksDirection.value = 1
@@ -141,7 +173,7 @@ export function useNavBase(
   async function go(page: number | string, clicks?: number) {
     skipTransition.value = false
     await router?.push({
-      path: getSlidePath(page),
+      path: getSlidePath(page, isPresenter.value),
       query: {
         ...router.currentRoute.value.query,
         clicks: clicks || undefined,
@@ -185,7 +217,12 @@ export function useFixedNav(
 ): SlidevContextNav {
   const noop = async () => { }
   return {
-    ...useNavBase(computed(() => currentSlideRoute), computed(() => clicksContext)),
+    ...useNavBase(
+      computed(() => currentSlideRoute),
+      computed(() => clicksContext),
+      ref(CLICKS_MAX),
+      ref(false),
+    ),
     next: noop,
     prev: noop,
     nextSlide: noop,
@@ -195,3 +232,126 @@ export function useFixedNav(
     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,
+  }
+})

package/composables/useSwipeControls.ts

@@ -1,10 +1,13 @@
 import type { Ref } from 'vue'
 import { ref } from 'vue'
 import { timestamp, usePointerSwipe } from '@vueuse/core'
-import { isDrawing } from '../logic/drawings'
-import { next, nextSlide, prev, prevSlide } from '../logic/nav'
+import { useNav } from '../composables/useNav'
+import { useDrawings } from './useDrawings'
 
 export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
+  const { next, nextSlide, prev, prevSlide } = useNav()
+  const { isDrawing } = useDrawings()
+
   const swipeBegin = ref(0)
   const { direction, distanceX, distanceY } = usePointerSwipe(root, {
     pointerTypes: ['touch'],

package/composables/useTocTree.ts

@@ -1,7 +1,7 @@
 import type { SlideRoute, TocItem } from '@slidev/types'
 import type { ComputedRef, Ref } from 'vue'
 import { computed } from 'vue'
-import { currentSlideNo, currentSlideRoute, getSlidePath } from '../logic/nav'
+import { getSlidePath } from '../logic/slides'
 
 function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
   const titleLevel = route.meta?.slide?.level
@@ -13,7 +13,7 @@ function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
       no: route.no,
       children: [],
       level,
-      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no),
+      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no, false),
       hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
       title: route.meta?.slide?.title,
     })
@@ -25,15 +25,23 @@ function getTreeWithActiveStatuses(
   currentRoute?: SlideRoute,
   hasActiveParent = false,
   parent?: TocItem,
+  currentSlideNo?: Ref<number>,
 ): TocItem[] {
   return tree.map((item: TocItem) => {
     const clone = {
       ...item,
-      active: item.no === currentSlideNo.value,
+      active: item.no === currentSlideNo?.value,
       hasActiveParent,
     }
-    if (clone.children.length > 0)
-      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
+    if (clone.children.length > 0) {
+      clone.children = getTreeWithActiveStatuses(
+        clone.children,
+        currentRoute,
+        clone.active || clone.hasActiveParent,
+        clone,
+        currentSlideNo,
+      )
+    }
     if (parent && (clone.active || clone.activeParent))
       parent.activeParent = true
     return clone
@@ -49,7 +57,11 @@ function filterTree(tree: TocItem[], level = 1): TocItem[] {
     }))
 }
 
-export function useTocTree(slides: Ref<SlideRoute[]>): ComputedRef<TocItem[]> {
+export function useTocTree(
+  slides: Ref<SlideRoute[]>,
+  currentSlideNo: Ref<number>,
+  currentSlideRoute: Ref<SlideRoute>,
+): ComputedRef<TocItem[]> {
   const rawTree = computed(() => slides.value
     .filter((route: SlideRoute) => route.meta?.slide?.title)
     .reduce((acc: TocItem[], route: SlideRoute) => {
@@ -57,7 +69,13 @@ export function useTocTree(slides: Ref<SlideRoute[]>): ComputedRef<TocItem[]> {
       return acc
     }, []))
 
-  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentSlideRoute.value))
+  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(
+    rawTree.value,
+    currentSlideRoute.value,
+    undefined,
+    undefined,
+    currentSlideNo,
+  ))
 
   return computed(() => filterTree(treeWithActiveStatuses.value))
 }

package/composables/useViewTransition.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { getSlide } from '../logic/nav'
+import { getSlide } from '../logic/slides'
 
 export function useViewTransition() {
   const router = useRouter()

package/internals/CodeRunner.vue

@@ -3,9 +3,9 @@ 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 { isPrintMode } from '../logic/nav'
 import { useSlideContext } from '../context'
 import setupCodeRunners from '../setup/code-runners'
+import { useNav } from '../composables/useNav'
 import IconButton from './IconButton.vue'
 import DomElement from './DomElement.vue'
 
@@ -19,6 +19,9 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:modelValue'])
+
+const { isPrintMode } = useNav()
+
 const code = useVModel(props, 'modelValue', emit)
 
 const { $renderContext } = useSlideContext()

package/internals/DrawingControls.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { Menu } from 'floating-vue'
-import 'floating-vue/dist/style.css'
-import {
+import { useDrawings } from '../composables/useDrawings'
+import VerticalDivider from './VerticalDivider.vue'
+import Draggable from './Draggable.vue'
+import IconButton from './IconButton.vue'
+
+const {
   brush,
-  brushColors,
   canClear,
   canRedo,
   canUndo,
-  clearDrauu,
+  clear,
   drauu,
   drawingEnabled,
   drawingMode,
   drawingPinned,
-} from '../logic/drawings'
-import VerticalDivider from './VerticalDivider.vue'
-import Draggable from './Draggable.vue'
-import IconButton from './IconButton.vue'
+  brushColors,
+} = useDrawings()
 
 function undo() {
   drauu.undo()
@@ -110,7 +111,7 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
     </IconButton>
-    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
       <carbon:trash-can />
     </IconButton>
 
@@ -135,4 +136,4 @@ function setBrushColor(color: typeof brush.color) {
 .v-popper--theme-menu .v-popper__arrow-inner {
   --uno: border-main;
 }
-</style>
+</style>../composables/drawings