fix: improve drauu DX

packages/client/internals/DrauuControls.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { drauuMode, drauu, drauuBrush, brushColors, drauuEnabled, canUndo, canRedo, clearDrauu } from '../logic/drauu'
+import { drauuMode, drauu, drauuBrush, brushColors, drauuEnabled, canUndo, canRedo, canClear, clearDrauu } from '../logic/drauu'
 import VerticalDivider from './VerticalDivider.vue'
 
 function undo() {
   drauu.undo()
 }
-
 function redo() {
   drauu.redo()
 }
@@ -51,8 +50,8 @@ function redo() {
       <button class="icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
         <carbon:redo />
       </button>
-      <button class="icon-btn" @click="clearDrauu()">
-        <carbon:clean />
+      <button class="icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
+        <carbon:delete />
       </button>
 
       <template v-if="drauuEnabled">

packages/client/internals/Play.vue

@@ -2,6 +2,7 @@
 import { ref, computed, shallowRef } from 'vue'
 import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
 import { isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
+import { isDrawing } from '../logic/drauu'
 import { registerShortcuts } from '../logic/shortcuts'
 import { themeVars } from '../env'
 import Controls from './Controls.vue'
@@ -49,7 +50,10 @@ if (__DEV__)
       <template #controls>
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
-          :class="presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2'"
+          :class="[
+            presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2',
+            isDrawing ? 'pointer-events-none': ''
+          ]"
         >
           <NavControls
             class="m-auto"

packages/client/logic/drauu.ts

@@ -1,4 +1,4 @@
-import { markRaw, reactive, ref, watch } from 'vue'
+import { markRaw, reactive, ref } from 'vue'
 import { Brush, createDrauu, DrawingMode } from 'drauu'
 import { currentPage } from './nav'
 
@@ -14,31 +14,34 @@ export const brushColors = [
 
 export const drauuBrush = reactive<Brush>({ color: brushColors[0], size: 4 })
 export const drauuMode = ref<DrawingMode>('draw')
+export const drauuOptions = reactive({
+  mode: drauuMode,
+  brush: drauuBrush,
+})
 export const drauuEnabled = ref(false)
 export const canUndo = ref(false)
 export const canRedo = ref(false)
+export const canClear = ref(false)
+export const isDrawing = ref(false)
 
 export const drauuData = new Map<number, string>()
 
-export const drauu = markRaw(createDrauu({
-  brush: drauuBrush,
-  mode: drauuMode.value,
-}))
+export const drauu = markRaw(createDrauu(drauuOptions))
 
 export function clearDrauu() {
-  if (confirm('Clear the drawing?'))
-    drauu.clear()
-
+  drauu.clear()
   drauuData.delete(currentPage.value)
 }
 
 if (__DEV__) {
   drauu.on('changed', () => {
     canRedo.value = drauu.canRedo()
     canUndo.value = drauu.canUndo()
+    canClear.value = !!drauu.el?.children.length
   })
 
-  watch(drauuMode, mode => drauu.mode = mode)
+  drauu.on('start', () => isDrawing.value = true)
+  drauu.on('end', () => isDrawing.value = false)
 
   window.addEventListener('keydown', (e) => {
     if (!drauuEnabled.value)

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.7",
+    "drauu": "^0.0.8",
     "file-saver": "^2.0.5",
     "js-base64": "^3.6.1",
     "js-yaml": "^4.1.0",