fix: overview clicks preview slider

Author: antfu

packages/client/composables/useClicks.ts

@@ -1,7 +1,7 @@
 import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 import { clamp, sum } from '@antfu/utils'
-import { computed, isReadonly, onMounted, onUnmounted, ref, shallowReactive, toValue } from 'vue'
+import { computed, isReadonly, onMounted, onUnmounted, ref, shallowReactive, toValue, watch } from 'vue'
 
 export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {
   if (at === false || at === 'false')
@@ -164,8 +164,12 @@ export function createFixedClicks(
   currentInit: MaybeRefOrGetter<number> = 0,
 ): ClicksContext {
   const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
+  const clicks = ref(Math.max(toValue(currentInit), clicksStart))
+  watch(() => toValue(currentInit), (v) => {
+    clicks.value = Math.max(v, clicksStart)
+  })
   return createClicksContextBase(
-    computed(() => Math.max(toValue(currentInit), clicksStart)),
+    clicks,
     clicksStart,
     route?.meta?.clicks,
   )

packages/client/internals/NoteDisplay.vue

@@ -23,12 +23,12 @@ const emit = defineEmits<{
   (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-const withClicks = computed(() => props.clicksContext != null && props.noteHtml?.includes('slidev-note-click-mark'))
-const noteDisplay = ref<HTMLElement | null>(null)
-
 const CLASS_FADE = 'slidev-note-fade'
 const CLASS_MARKER = 'slidev-note-click-mark'
 
+const withClicks = computed(() => props.clicksContext != null && props.noteHtml?.includes(CLASS_MARKER))
+const noteDisplay = ref<HTMLElement | null>(null)
+
 function processNote() {
   if (!noteDisplay.value || !withClicks.value)
     return
@@ -100,21 +100,21 @@ function processNote() {
       marker.classList.toggle(`${CLASS_MARKER}-active`, enabled && clicks === current)
       marker.classList.toggle(`${CLASS_MARKER}-next`, enabled && clicks === current + 1)
       marker.classList.toggle(`${CLASS_MARKER}-future`, enabled && clicks > current + 1)
-      marker.ondblclick = enabled
-        ? (e) => {
-            emit('markerDblclick', e, clicks)
-            if (e.defaultPrevented)
-              return
-            props.clicksContext!.current = clicks
-            e.stopPropagation()
-            e.stopImmediatePropagation()
-          }
-        : null
-      marker.onclick = enabled
-        ? (e) => {
-            emit('markerClick', e, clicks)
-          }
-        : null
+      marker.ondblclick = (e) => {
+        if (!enabled)
+          return
+        emit('markerDblclick', e, clicks)
+        if (e.defaultPrevented)
+          return
+        props.clicksContext!.current = clicks
+        e.stopPropagation()
+        e.stopImmediatePropagation()
+      }
+      marker.onclick = (e) => {
+        if (enabled) {
+          emit('markerClick', e, clicks)
+        }
+      }
 
       if (enabled && props.autoScroll && clicks === current)
         marker.scrollIntoView({ block: 'center', behavior: 'smooth' })