29 lines
733 B
Vue
29 lines
733 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||
|
|
import { useDrawings } from '../composables/useDrawings'
|
||
|
|
import { useSlideContext } from '../context'
|
||
|
|
|
||
|
|
const { drauu, drawingEnabled, loadCanvas } = useDrawings()
|
||
|
|
|
||
|
|
const scale = useSlideContext().$scale
|
||
|
|
const svg = ref<SVGSVGElement>()
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
drauu.mount(svg.value!, svg.value!.parentElement!)
|
||
|
|
watch(scale, scale => drauu.options.coordinateScale = 1 / scale, { immediate: true })
|
||
|
|
loadCanvas()
|
||
|
|
})
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
drauu.unmount()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<svg
|
||
|
|
ref="svg"
|
||
|
|
class="w-full h-full absolute top-0"
|
||
|
|
:class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
|
||
|
|
/>
|
||
|
|
</template>
|