fix(component): crashed when useImage is toggled

ForkKILLET · Jan 14, 2023 · 3d16745 · 3d16745
1 parent e389a36
commit 3d16745
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/component/lib/components/Cuiping.vue b/component/lib/components/Cuiping.vue
@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { render, SvgRendererOption } from 'cuiping'
 import { Canvg } from 'canvg'
+import SvgWrapper from './SvgWrapper.vue'
 
 const props = withDefaults(defineProps<{
     molecule?: string,
@@ -88,7 +89,7 @@ const redraw = () => {
     redrawCounter.value ++
 }
 
-watch([ canvas, props, redrawCounter ], async () => {
+watch([ canvas, props, redrawCounter ], () => {
     if (canvas.value && props.useImage && props.molecule && res.value.state === 'ok') {
         const svg = res.value.data.svg
             .replace(/width="([\d.]+)"/, (_, w) => `width="${w * props.imageScale}"`)
@@ -129,7 +130,7 @@ defineExpose({
                 <canvas ref="canvas"></canvas>
                 <img :src="canvasDataUrl" />
             </div>
-            <div v-else v-html="res.data.svg" :key="redrawCounter"></div>
+            <SvgWrapper v-else :svg="res.data.svg" :key="redrawCounter"></SvgWrapper>
         </div>
         <p v-else-if="res.state === 'error'">{{ res.errMsg }}</p>
         <p v-else>...</p>

diff --git a/component/lib/components/SvgWrapper.vue b/component/lib/components/SvgWrapper.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+    svg: string
+}>()
+</script>
+
+<template>
+    <div v-html="svg"></div>
+</template>