feat: support drawing with pen regradeless enabling

packages/client/internals/DrawingLayer.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, inject, onBeforeUnmount } from 'vue'
-import { drawingEnabled, drauu, loadCanvas } from '../logic/drawings'
+import { drauu, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 
 const scale = inject(injectionSlideScale)!
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {
-  drauu.mount(svg.value!)
+  drauu.mount(svg.value!, svg.value!.parentElement!)
   watch(scale, scale => drauu.options.coordinateScale = 1 / scale, { immediate: true })
   loadCanvas()
 })
@@ -20,7 +20,6 @@ onBeforeUnmount(() => {
 <template>
   <svg
     ref="svg"
-    class="w-full h-full absolute top-0"
-    :class="{ 'pointer-events-none': !drawingEnabled }"
+    class="w-full h-full absolute top-0 pointer-events-none"
   ></svg>
 </template>

packages/client/logic/drawings.ts

@@ -1,5 +1,5 @@
 import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
-import { Brush, createDrauu, DrawingMode } from 'drauu'
+import { Brush, createDrauu, DrawingMode, Options as DrauuOptions } from 'drauu'
 import { serverDrawingState as drawingState } from '../env'
 import { currentPage } from './nav'
 
@@ -45,9 +45,11 @@ export const canRedo = ref(false)
 export const canClear = ref(false)
 export const isDrawing = ref(false)
 
-export const drauu = markRaw(createDrauu(reactive({
+export const drauuOptions: DrauuOptions = reactive({
   brush,
-})))
+  acceptsInputTypes: computed(() => drawingEnabled.value ? undefined : ['pen' as const]),
+})
+export const drauu = markRaw(createDrauu(drauuOptions))
 
 export function clearDrauu() {
   drauu.clear()

packages/client/package.json

@@ -19,7 +19,7 @@
     "@vueuse/head": "^0.6.0",
     "@vueuse/motion": "^1.6.0",
     "codemirror": "^5.62.3",
-    "drauu": "^0.1.0-beta.5",
+    "drauu": "^0.1.0-beta.6",
     "file-saver": "^2.0.5",
     "js-base64": "^3.6.1",
     "js-yaml": "^4.1.0",