feat: two-way drawing

package.json

@@ -55,7 +55,7 @@
     "@types/resolve": "^1.20.1",
     "@types/semver": "^7.3.8",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@vueuse/core": "^5.3.0",
+    "@vueuse/core": "^6.0.0-beta.3",
     "bumpp": "^6.0.6",
     "cross-env": "^7.0.3",
     "cypress": "^7.7.0",
@@ -76,6 +76,6 @@
     "typescript": "^4.3.5",
     "vite": "^2.4.4",
     "vite-plugin-windicss": "^1.2.7",
-    "zx": "^2.0.0"
+    "zx": "^2.1.0"
   }
 }

packages/client/env.ts

@@ -3,11 +3,9 @@ import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
 // @ts-expect-error
 import _configs from '/@slidev/configs'
-// @ts-expect-error
-import _serverState from 'server-ref:nav'
-// @ts-expect-error
-import _serverDrawingState from 'server-ref:drawings'
-import type { ServerRef } from 'vite-plugin-vue-server-ref'
+import _serverState from 'server-reactive:nav'
+import _serverDrawingState from 'server-reactive:drawings?defer'
+import type { ServerReactive } from 'vite-plugin-vue-server-ref'
 
 export interface ServerState {
   page: number
@@ -18,8 +16,8 @@ export interface ServerState {
   }
 }
 
-export const serverState = _serverState as ServerRef<ServerState>
-export const serverDrawingState = _serverDrawingState as ServerRef<Record<number, string | undefined>>
+export const serverState = _serverState as ServerReactive<ServerState>
+export const serverDrawingState = _serverDrawingState as ServerReactive<Record<number, string | undefined>>
 export const configs = _configs as SlidevConfig
 
 export const slideAspect = configs.aspectRatio ?? (16 / 9)

packages/client/internals/DrawingLayer.vue

@@ -1,46 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, inject, onBeforeUnmount } from 'vue'
-import { ignorableWatch } from '@vueuse/core'
-import { drawingEnabled, drauu, drauuData } from '../logic/drawings'
+import { drawingEnabled, drauu, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
-import { currentPage } from '../logic/nav'
 
 const scale = inject(injectionSlideScale)!
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {
-  let skipNext = false
   drauu.mount(svg.value!)
   watch(scale, scale => drauu.options.coordinateScale = 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', () => {
-    if (skipNext) {
-      skipNext = false
-      return
-    }
-    ignoreUpdates(() => {
-      drauuData.value[currentPage.value] = drauu.dump()
-    })
-  })
-
-  watch(currentPage, (page) => {
-    skipNext = true
-    const data = drauuData.value[page]
-    if (data)
-      drauu.load(data)
-    else
-      drauu.clear()
-  })
+  loadCanvas()
 })
 
 onBeforeUnmount(() => {

packages/client/internals/Presenter.vue

@@ -71,7 +71,7 @@ onMounted(() => {
       return { x, y }
     },
     (pos) => {
-      serverState.value.cursor = pos
+      serverState.cursor = pos
     },
   )
 })

packages/client/logic/drawings.ts

@@ -1,7 +1,7 @@
 import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import { Brush, createDrauu, DrawingMode } from 'drauu'
-import { serverDrawingState } from '../env'
-import { currentPage, isPresenter } from './nav'
+import { serverDrawingState as drawingState } from '../env'
+import { currentPage } from './nav'
 
 export const brushColors = [
   '#ff595e',
@@ -20,6 +20,7 @@ export const brush = reactive<Brush>({
 })
 
 const _mode = ref<DrawingMode | 'arrow'>('stylus')
+let disableDump = false
 
 export const drawingMode = computed({
   get() {
@@ -44,31 +45,52 @@ export const canRedo = ref(false)
 export const canClear = ref(false)
 export const isDrawing = ref(false)
 
-export const drauuData = serverDrawingState
-
-serverDrawingState.syncUp = false
-
-nextTick(() => {
-  watch(isPresenter, (v) => {
-    serverDrawingState.syncUp = v
-    serverDrawingState.syncDown = !v
-  }, { immediate: true })
-})
-
 export const drauu = markRaw(createDrauu(reactive({
   brush,
 })))
 
 export function clearDrauu() {
   drauu.clear()
-  drauuData.value[currentPage.value] = ''
+  drawingState.$patch({ [currentPage.value]: '' })
+}
+
+export function updateState() {
+  canRedo.value = drauu.canRedo()
+  canUndo.value = drauu.canUndo()
+  canClear.value = !!drauu.el?.children.length
+}
+
+export function loadCanvas() {
+  disableDump = true
+  const data = drawingState[currentPage.value]
+  if (data != null)
+    drauu.load(data)
+  else
+    drauu.clear()
+  disableDump = false
 }
 
 if (__DEV__) {
   drauu.on('changed', () => {
-    canRedo.value = drauu.canRedo()
-    canUndo.value = drauu.canUndo()
-    canClear.value = !!drauu.el?.children.length
+    updateState()
+    if (!disableDump)
+      drawingState.$patch({ [currentPage.value]: drauu.dump() })
+  })
+
+  drawingState.$onPatch((patch) => {
+    disableDump = true
+    if (patch[currentPage.value] != null)
+      drauu.load(patch[currentPage.value] || '')
+    disableDump = false
+    updateState()
+  })
+
+  nextTick(() => {
+    watch(currentPage, () => {
+      if (!drauu.mounted)
+        return
+      loadCanvas()
+    }, { immediate: true })
   })
 
   drauu.on('start', () => isDrawing.value = true)
@@ -120,3 +142,5 @@ if (__DEV__) {
     }
   }, false)
 }
+
+export { drawingState }

packages/client/package.json

@@ -18,7 +18,7 @@
     "@antfu/utils": "^0.2.4",
     "@slidev/parser": "workspace:*",
     "@slidev/types": "workspace:*",
-    "@vueuse/core": "^5.3.0",
+    "@vueuse/core": "^6.0.0-beta.3",
     "@vueuse/head": "^0.6.0",
     "@vueuse/motion": "^1.5.6",
     "codemirror": "^5.62.2",

packages/client/setup/root.ts

@@ -19,20 +19,20 @@ export default function setupRoot() {
   function onServerStateChanged() {
     if (isPresenter.value)
       return
-    if (+serverState.value.page !== +currentPage.value || clicks.value !== serverState.value.clicks) {
+    if (+serverState.page !== +currentPage.value || clicks.value !== serverState.clicks) {
       router.replace({
-        path: getPath(serverState.value.page),
+        path: getPath(serverState.page),
         query: {
           ...router.currentRoute.value.query,
-          clicks: serverState.value.clicks || 0,
+          clicks: serverState.clicks || 0,
         },
       })
     }
   }
   function updateServerState() {
     if (isPresenter.value) {
-      serverState.value.page = +currentPage.value
-      serverState.value.clicks = clicks.value
+      serverState.page = +currentPage.value
+      serverState.clicks = clicks.value
     }
   }
 

packages/slidev/node/plugins/extendConfig.ts

@@ -44,6 +44,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
             'prettier/esm/parser-html',
             'prettier/esm/parser-typescript',
             'mermaid/dist/mermaid.min',
+            'vite-plugin-vue-server-ref/client',
           ],
           exclude: EXCLUDE,
         },

packages/slidev/node/plugins/preset.ts

@@ -123,6 +123,7 @@ export async function ViteSlidevPlugin(
       : null,
 
     ServerRef({
+      debug: true,
       state: {
         sync: false,
         nav: {

packages/slidev/package.json

@@ -85,7 +85,7 @@
     "vite-plugin-icons": "^0.6.5",
     "vite-plugin-md": "^0.10.0",
     "vite-plugin-remote-assets": "^0.2.2",
-    "vite-plugin-vue-server-ref": "^0.1.0",
+    "vite-plugin-vue-server-ref": "^0.1.7",
     "vite-plugin-windicss": "^1.2.7",
     "vue": "^3.2.1",
     "windicss": "^3.1.7",