fix: drawing in SPA build, close #377

slidevjs · Oct 19, 2021 · a35e4ff · a35e4ff
1 parent 1a1a5a6
commit a35e4ff
Showing 1 changed file with 70 additions and 66 deletions.
diff --git a/packages/client/logic/drawings.ts b/packages/client/logic/drawings.ts
@@ -74,85 +74,89 @@ export function loadCanvas() {
   disableDump = false
 }
 
-if (__DEV__) {
-  drauu.on('changed', () => {
-    updateState()
-    if (!disableDump) {
-      const dump = drauu.dump()
-      const key = currentPage.value
-      if ((drawingState[key] || '') !== dump)
+drauu.on('changed', () => {
+  updateState()
+  if (!disableDump) {
+    const dump = drauu.dump()
+    const key = currentPage.value
+    if ((drawingState[key] || '') !== dump) {
+      if (__DEV__)
         drawingState.$patch({ [key]: drauu.dump() })
+      else
+        drawingState[key] = drauu.dump()
     }
-  })
+  }
+})
 
+if (__DEV__) {
   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 })
-
-    watchEffect(() => {
-      drawingState.$syncUp = configs.drawings.syncAll || isPresenter.value
-    })
-  })
-
-  drauu.on('start', () => isDrawing.value = true)
-  drauu.on('end', () => isDrawing.value = false)
-
-  window.addEventListener('keydown', (e) => {
-    if (!drawingEnabled.value)
+nextTick(() => {
+  watch(currentPage, () => {
+    if (!drauu.mounted)
       return
+    loadCanvas()
+  }, { immediate: true })
 
-    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
-    }
+  watchEffect(() => {
+    drawingState.$syncUp = configs.drawings.syncAll || isPresenter.value
+  })
+})
 
-    if (handled) {
-      e.preventDefault()
-      e.stopPropagation()
-    }
-  }, false)
-}
+drauu.on('start', () => isDrawing.value = true)
+drauu.on('end', () => isDrawing.value = false)
+
+window.addEventListener('keydown', (e) => {
+  if (!drawingEnabled.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)
 
 export { drawingState }