fix: set clearRect to avoid styling issues caused by canvas redraws

Author: codeacme17

example/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "1llest-waveform-vue": "^1.0.3",
+    "@vueuse/core": "^9.13.0",
     "nanoid": "^3.3.6",
     "sass": "^1.60.0",
     "vue": "^3.2.45"

example/pnpm-lock.yaml

@@ -1,50 +1,55 @@
 <script setup lang="ts">
-import { reactive } from "vue"
-import { nanoid } from "nanoid"
-import Demo from "./components/Demo.vue"
-import type { IllestWaveformProps } from "1llest-waveform-vue"
+import { reactive } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
+import { nanoid } from 'nanoid'
+import Demo from './components/Demo.vue'
+// import type { IllestWaveformProps } from '1llest-waveform-vue'
+import type { IllestWaveformProps } from '../../src/types/waveform'
 
 type Props = {
   id: string
 } & IllestWaveformProps
 
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
 const items = reactive<Props[]>([
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-1.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-1.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-2.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-2.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-3.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-3.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-4.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-4.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-5.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-5.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-6.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-6.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-7.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-7.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-8.mp3`
+    url: `${import.meta.env.BASE_URL}audios/loop-8.mp3`,
   },
   {
     id: nanoid(),
-    url:`${import.meta.env.BASE_URL}audios/loop-9.mp3`
-  }
+    url: `${import.meta.env.BASE_URL}audios/loop-9.mp3`,
+  },
 ])
 </script>
 
@@ -58,6 +63,10 @@ const items = reactive<Props[]>([
       </span>
     </h1>
 
+    <div>
+      <button @click="toggleDark()">theme</button>
+    </div>
+
     <Demo v-for="item in items" :key="item.id" :props="item" />
   </section>
 </template>

example/src/App.vue

@@ -1,20 +1,38 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, watchEffect, defineProps } from 'vue'
 import type { Ref } from 'vue'
-import { IllestWaveform } from '1llest-waveform-vue'
-// import IllestWaveform from '../../../src/components/IllestWaveform.vue'
-import type { IllestWaveformProps } from '1llest-waveform-vue'
+import { useDark } from '@vueuse/core'
+// import { IllestWaveform } from '1llest-waveform-vue'
+// import type { IllestWaveformProps } from '1llest-waveform-vue'
+import IllestWaveform from '../../../src/components/IllestWaveform.vue'
+import type { IllestWaveformProps } from '../../../src/types/waveform'
 import '1llest-waveform-vue/dist/style.css'
 import PlayIcon from './icons/Play.vue'
 import PauseIcon from './icons/Pause.vue'
 import ReplayIcon from './icons/Replay.vue'
 
 const { props } = defineProps(['props'])
 
+const darkMode = useDark()
+
 const waveOptions = reactive<IllestWaveformProps>({
   url: props.url,
 })
 
+watchEffect(() => {
+  if (darkMode.value) {
+    waveOptions.lineColor = '#5e5e5e'
+    waveOptions.maskColor = '#fff'
+    waveOptions.skeletonColor = '#232323'
+    waveOptions.cursorColor = '#fff'
+  } else {
+    waveOptions.lineColor = '#a1a1aa'
+    waveOptions.maskColor = '#000'
+    waveOptions.skeletonColor = '#f3f4f6'
+    waveOptions.cursorColor = '#000'
+  }
+})
+
 const waveformRef = ref<typeof IllestWaveform | null>(null)
 
 onMounted(() => {
@@ -121,7 +139,7 @@ const getDuration = () => {
 
 <style scoped lang="scss">
 .btn {
-  @apply flex items-center bg-neutral-700 px-5 py-1 rounded-sm;
+  @apply flex items-center bg-neutral-200 dark:bg-neutral-700 px-5 py-1 rounded-sm;
 
   & div {
     @apply ml-1 font-bold -mb-0.5;

example/src/components/Demo.vue

@@ -2,10 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --dark-main: #1e1e1e;
+}
+
 html {
-  color: rgb(213, 213, 213);
-  background-color: #1e1e1e;
+  @apply text-slate-900 bg-white;
   font-family: "JetBrains Mono";
+  transition: background-color,color ease-in 0.2s
+}
+
+.dark {
+  @apply text-white bg-[var(--dark-main)];
 }
 
 

example/src/style.css

@@ -1,7 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {},
   },

example/tailwind.config.cjs

@@ -18,9 +18,11 @@ export default class WaveMask extends Wave {
     this.canvas.width = this.waveCanvas.width
     this.canvas.height = this.waveCanvas.height
     this.canvas.style.opacity = '1'
+    this.canvasCtx.fillRect(0, 0, this.canvas.width, this.canvas.height)
   }
 
   public setCanvasStyle(): void {
+    this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     this.canvasCtx.lineWidth = this.props.lineWidth as number
     this.canvasCtx.lineCap = this.props.lineCap as CanvasLineCap
     this.canvasCtx.strokeStyle = this.props.maskColor as string

src/modules/wave/WaveMask.ts

@@ -36,6 +36,7 @@ export default class Wave {
     this.canvas.width = this.canvas.offsetWidth
     this.canvas.height = this.canvas.offsetHeight
     this.canvas.style.opacity = '1'
+    this.canvasCtx.fillRect(0, 0, this.canvas.width, this.canvas.height)
   }
 
   private translateCanvasCtx(): void {
@@ -62,6 +63,7 @@ export default class Wave {
   }
 
   public setCanvasStyle(): void {
+    this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     this.canvasCtx.lineWidth = this.props.lineWidth as number
     this.canvasCtx.lineCap = this.props.lineCap as CanvasLineCap
     this.canvasCtx.strokeStyle = this.props.lineColor as string