feat: sync drawing in presenter mode

packages/client/env.ts

@@ -5,6 +5,8 @@ import { objectMap } from '@antfu/utils'
 import _configs from '/@slidev/configs'
 // @ts-expect-error
 import _serverState from '/@server-ref/state'
+// @ts-expect-error
+import _serverDrauuState from '/@server-ref/drauu'
 
 export interface ServerState {
   page: number
@@ -15,7 +17,10 @@ export interface ServerState {
   }
 }
 
-export const serverState = _serverState as Ref<ServerState>
+export type ServerRef<T> = Ref<T> & { receive: boolean; send: boolean }
+
+export const serverState = _serverState as ServerRef<ServerState>
+export const serverDrauuState = _serverDrauuState as ServerRef<Record<number, string | undefined>>
 export const configs = _configs as SlidevConfig
 
 export const slideAspect = configs.aspectRatio ?? (16 / 9)

packages/client/internals/DrauuLayer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, inject, onBeforeUnmount } from 'vue'
+import { ignorableWatch } from '@vueuse/core'
 import { drauuEnabled, drauu, drauuData } from '../logic/drauu'
 import { injectionSlideScale } from '../constants'
 import { currentPage } from '../logic/nav'
@@ -8,15 +9,33 @@ const scale = inject(injectionSlideScale)!
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {
+  let skipNext = false
   drauu.mount(svg.value!)
   watch(scale, scale => drauu.options.corrdinateScale = 1 / scale, { immediate: true })
 
+  const { ignoreUpdates } = ignorableWatch(
+    drauuData,
+    () => {
+      const data = drauuData.value[currentPage.value]
+      if (data != null)
+        drauu.load(data)
+    },
+    { deep: true },
+  )
+
   drauu.on('changed', () => {
-    drauuData.set(currentPage.value, drauu.dump())
+    if (skipNext) {
+      skipNext = false
+      return
+    }
+    ignoreUpdates(() => {
+      drauuData.value[currentPage.value] = drauu.dump()
+    })
   })
 
   watch(currentPage, (page) => {
-    const data = drauuData.get(page)
+    skipNext = true
+    const data = drauuData.value[page]
     if (data)
       drauu.load(data)
     else

packages/client/internals/NavControls.vue

@@ -67,7 +67,7 @@ if (__DEV__) {
         <VerticalDivider />
       </template>
 
-      <template v-if="!isPresenter && DrauuControls">
+      <template v-if="DrauuControls">
         <button class="icon-btn relative" @click="drauuEnabled = !drauuEnabled">
           <carbon:draw />
           <div

packages/client/internals/Presenter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 import { ref, computed, reactive, watch, onMounted } from 'vue'
-import { useMouse, useTimestamp } from '@vueuse/core'
+import { useMouse, useTimestamp, useWindowFocus } from '@vueuse/core'
 import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
 import { showOverview } from '../state'
 import { configs, themeVars, serverState } from '../env'
@@ -64,9 +64,13 @@ const nextSlide = computed(() => {
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
   const mouse = reactive(useMouse())
+  const focus = useWindowFocus()
 
   watch(
     () => {
+      if (!focus.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

packages/client/internals/PresenterMouse.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { serverState } from '../env'
-
 </script>
 
 <template>
@@ -10,7 +9,7 @@ import { serverState } from '../env'
   >
     <ph:cursor-fill
       class="absolute"
-      :style="{left: serverState.cursor.x + '%',top: serverState.cursor.y + '%'}"
+      :style="{ left: `${serverState.cursor.x}%`, top: `${serverState.cursor.y}%` }"
     />
   </div>
 </template>

packages/client/logic/drauu.ts

@@ -1,6 +1,7 @@
-import { computed, markRaw, reactive, ref } from 'vue'
+import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import { Brush, createDrauu, DrawingMode } from 'drauu'
-import { currentPage } from './nav'
+import { serverDrauuState } from '../env'
+import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
   '#ff595e',
@@ -47,13 +48,22 @@ export const canRedo = ref(false)
 export const canClear = ref(false)
 export const isDrawing = ref(false)
 
-export const drauuData = new Map<number, string>()
+export const drauuData = serverDrauuState
+
+serverDrauuState.send = false
+
+nextTick(() => {
+  watch(isPresenter, (v) => {
+    serverDrauuState.send = v
+    serverDrauuState.receive = !v
+  }, { immediate: true })
+})
 
 export const drauu = markRaw(createDrauu(drauuOptions))
 
 export function clearDrauu() {
   drauu.clear()
-  drauuData.delete(currentPage.value)
+  drauuData.value[currentPage.value] = ''
 }
 
 if (__DEV__) {

packages/client/package.json

@@ -22,7 +22,7 @@
     "@vueuse/head": "^0.6.0",
     "@vueuse/motion": "^1.5.6",
     "codemirror": "^5.62.2",
-    "drauu": "^0.0.12",
+    "drauu": "^0.0.13",
     "file-saver": "^2.0.5",
     "js-base64": "^3.6.1",
     "js-yaml": "^4.1.0",

packages/slidev/node/plugins/preset.ts

@@ -126,6 +126,7 @@ export async function ViteSlidevPlugin(
           page: 0,
           clicks: 0,
         },
+        drauu: {},
       },
     }),
     createConfigPlugin(options),

packages/slidev/node/plugins/serverRef.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite'
+import type { Ref } from 'vue'
 import { getBodyJson } from './loaders'
 
 const PREFIX = '/@server-ref/'
@@ -7,9 +8,11 @@ export interface ServerRefOptions<T extends Record<string, unknown>> {
   dataMap?: T
   debounceMs?: number
   debug?: boolean
-  onChanged?: <K extends keyof T>(name: K, data: T[K], timestamp: number) => void
+  onChanged?: <K extends keyof T>(name: K, data: T[K], timestamp: number, isPatch?: boolean) => void
 }
 
+export type ServerRef<T> = Ref<T> & { receive: boolean; send: boolean }
+
 export function VitePluginServerRef(options: ServerRefOptions<any> = {}): Plugin {
   const {
     dataMap = {},
@@ -28,9 +31,7 @@ export function VitePluginServerRef(options: ServerRefOptions<any> = {}): Plugin
           return next()
 
         const name = req.url.slice(PREFIX.length)
-        const { data, timestamp } = await getBodyJson(req)
-
-        // TODO: handle conflicts
+        const { data, timestamp, isPatch } = await getBodyJson(req)
 
         const module = server.moduleGraph.getModuleById(PREFIX + name)
         if (module)
@@ -44,10 +45,11 @@ export function VitePluginServerRef(options: ServerRefOptions<any> = {}): Plugin
             name,
             data,
             timestamp,
+            isPatch,
           },
         })
 
-        options.onChanged?.(name, data, timestamp)
+        options.onChanged?.(name, data, timestamp, isPatch)
 
         res.write('')
         res.end()
@@ -62,20 +64,28 @@ import { ref, watch } from "vue"
 
 const data = ref(${JSON.stringify(dataMap[name] ?? null)})
 
+data.receive = true
+data.send = true
+data.paused = false
+
 if (import.meta.hot) {
   ${debug ? `console.log("[server-ref] [${name}] ref", data)` : ''}
   ${debug ? `console.log("[server-ref] [${name}] initial", data.value)` : ''}
 
   let skipNext = false
   let timer = null
-  import.meta.hot.on("server-ref", (payload) =>{
+  import.meta.hot.on("server-ref", (payload) => {
+    if (!data.receive || data.paused)
+      return
     if (payload.name !== "${name}")
       return
     skipNext = true
     data.value = payload.data
     ${debug ? `console.log("[server-ref] [${name}] incoming", payload.data)` : ''}
   })
   watch(data, (v) => {
+    if (!data.send || data.paused)
+      return
     if (skipNext) {
       skipNext = false
       return