feat: showPresenterCursor toggle

packages/client/internals/NavControls.vue

@@ -2,7 +2,7 @@
 import { computed, ref, shallowRef } from 'vue'
 import { isDark, toggleDark, isColorSchemaConfigured } from '../logic/dark'
 import { hasNext, hasPrev, prev, next, total, isPresenter, currentPage, downloadPDF, isEmbedded } from '../logic/nav'
-import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement } from '../state'
+import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement, showPresenterCursor } from '../state'
 import { drauuEnabled, drauuBrush } from '../logic/drauu'
 import { configs } from '../env'
 import Settings from './Settings.vue'
@@ -67,8 +67,13 @@ if (__DEV__) {
         <VerticalDivider />
       </template>
 
+      <button v-if="isPresenter" class="icon-btn" title="Show presenter cursor" @click="showPresenterCursor = !showPresenterCursor">
+        <ph:cursor-fill v-if="showPresenterCursor" />
+        <ph:cursor-duotone v-else class="opacity-50" />
+      </button>
+
       <template v-if="DrauuControls">
-        <button class="icon-btn relative" @click="drauuEnabled = !drauuEnabled">
+        <button class="icon-btn relative" title="Drawing" @click="drauuEnabled = !drauuEnabled">
           <carbon:draw />
           <div
             v-if="drauuEnabled"

packages/client/internals/Presenter.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { ref, computed, reactive, watch, onMounted } from 'vue'
-import { useMouse, useTimestamp, useWindowFocus } from '@vueuse/core'
+import { useMouse, useWindowFocus } from '@vueuse/core'
 import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
-import { showOverview } from '../state'
+import { showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars, serverState } from '../env'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
+import { useTimer } from '../logic/utils'
+import { isDrawing } from '../logic/drauu'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
 import SlidesOverview from './SlidesOverview.vue'
@@ -25,20 +27,7 @@ useHead({
   title: `Presenter - ${slideTitle}`,
 })
 
-const tsStart = ref(Date.now())
-const now = useTimestamp({
-  interval: 1000,
-})
-const timer = computed(() => {
-  const passed = (now.value - tsStart.value) / 1000
-  const sec = Math.floor(passed % 60).toString().padStart(2, '0')
-  const min = Math.floor(passed / 60).toString().padStart(2, '0')
-  return `${min}:${sec}`
-})
-
-function resetTimer() {
-  tsStart.value = now.value
-}
+const { timer, resetTimer } = useTimer()
 
 const nextTabElements = ref([])
 const nextSlide = computed(() => {
@@ -68,21 +57,23 @@ onMounted(() => {
 
   watch(
     () => {
-      if (!focus.value)
+      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
         return undefined
 
       const rect = slidesContainer.getBoundingClientRect()
       const x = (mouse.x - rect.left) / rect.width * 100
       const y = (mouse.y - rect.top) / rect.height * 100
 
+      if (x < 0 || x > 100 || y < 0 || y > 100)
+        return undefined
+
       return { x, y }
     },
     (pos) => {
       serverState.value.cursor = pos
     },
   )
 })
-
 </script>
 
 <template>

packages/client/logic/utils.ts

@@ -0,0 +1,23 @@
+import { ref, computed } from 'vue'
+import { useTimestamp } from '@vueuse/core'
+
+export function useTimer() {
+  const tsStart = ref(Date.now())
+  const now = useTimestamp({
+    interval: 1000,
+  })
+  const timer = computed(() => {
+    const passed = (now.value - tsStart.value) / 1000
+    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
+    const min = Math.floor(passed / 60).toString().padStart(2, '0')
+    return `${min}:${sec}`
+  })
+  function resetTimer() {
+    tsStart.value = now.value
+  }
+
+  return {
+    timer,
+    resetTimer,
+  }
+}

packages/client/state/index.ts

@@ -22,6 +22,7 @@ export const currentCamera = useStorage<string>('slidev-camera', 'default')
 export const currentMic = useStorage<string>('slidev-mic', 'default')
 export const slideScale = useStorage<number>('slidev-scale', 0)
 
+export const showPresenterCursor = useStorage('slidev-presenter-cursor', true)
 export const showEditor = useStorage('slidev-show-editor', false)
 export const editorWidth = useStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)