update at 2026-02-07 14:54:45

frontend/src/components/SvgPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { useFontStore } from '../stores/fontStore'
 import { useUiStore } from '../stores/uiStore'
 import { generateSvg } from '../utils/svg-builder'
@@ -15,44 +15,112 @@ const previewFonts = computed(() => fontStore.previewFonts)
 const inputText = computed(() => uiStore.inputText)
 const fontSize = computed(() => uiStore.fontSize)
 const fillColor = computed(() => uiStore.textColor)
+const PREVIEW_DEBOUNCE_MS = 240
+const PREVIEW_CONCURRENCY = 4
+let previewGenerateTimer: ReturnType<typeof setTimeout> | null = null
+let previewGenerationToken = 0
+let hasTriggeredInitialGenerate = false
+
 const isAllPreviewSelected = computed(() => {
   return previewItems.value.length > 0 && previewItems.value.every(item => item.selected)
 })
 
+function isStaleGeneration(token: number): boolean {
+  return token !== previewGenerationToken
+}
+
+function scheduleGeneratePreviews(withDebounce = true) {
+  if (previewGenerateTimer !== null) {
+    clearTimeout(previewGenerateTimer)
+    previewGenerateTimer = null
+  }
+
+  if (!withDebounce) {
+    void generatePreviews()
+    return
+  }
+
+  previewGenerateTimer = setTimeout(() => {
+    previewGenerateTimer = null
+    void generatePreviews()
+  }, PREVIEW_DEBOUNCE_MS)
+}
+
 watch(
   [previewFonts, inputText, fontSize, fillColor],
-  async () => {
-    await generatePreviews()
+  () => {
+    scheduleGeneratePreviews(hasTriggeredInitialGenerate)
+    hasTriggeredInitialGenerate = true
   },
   { immediate: true }
 )
 
+onBeforeUnmount(() => {
+  if (previewGenerateTimer !== null) {
+    clearTimeout(previewGenerateTimer)
+    previewGenerateTimer = null
+  }
+  previewGenerationToken += 1
+})
+
 async function generatePreviews() {
+  const generationToken = ++previewGenerationToken
   const validPreviewFontIds = new Set(previewFonts.value.map(font => font.id))
   uiStore.retainExportItemsByFontIds(validPreviewFontIds)
 
   if (!inputText.value || inputText.value.trim() === '') {
-    previewItems.value = []
+    if (!isStaleGeneration(generationToken)) {
+      previewItems.value = []
+    }
     return
   }
 
   const fonts = previewFonts.value
   if (fonts.length === 0) {
-    previewItems.value = []
+    if (!isStaleGeneration(generationToken)) {
+      previewItems.value = []
+    }
     return
   }
 
   isGenerating.value = true
 
   try {
-    const items: PreviewItemType[] = []
+    const selectedFontIdSet = new Set(uiStore.selectedExportItems.map(item => item.fontInfo.id))
+    const items = new Array<PreviewItemType | null>(fonts.length).fill(null)
+    const workerCount = Math.min(PREVIEW_CONCURRENCY, fonts.length)
+    let nextIndex = 0
 
-    for (const fontInfo of fonts) {
-      if (!fontInfo.loaded) {
-        await fontStore.loadFont(fontInfo)
-      }
+    const worker = async () => {
+      while (true) {
+        if (isStaleGeneration(generationToken)) {
+          return
+        }
+
+        const currentIndex = nextIndex
+        nextIndex += 1
+        if (currentIndex >= fonts.length) {
+          return
+        }
+
+        const fontInfo = fonts[currentIndex]
+        if (!fontInfo) {
+          continue
+        }
+
+        if (!fontInfo.loaded) {
+          try {
+            await fontStore.loadFont(fontInfo)
+          } catch (error) {
+            console.error(`Failed to load font ${fontInfo.name}:`, error)
+            continue
+          }
+        }
+
+        if (isStaleGeneration(generationToken) || !fontInfo.font) {
+          continue
+        }
 
-      if (fontInfo.font) {
         try {
           const svgResult = await generateSvg({
             text: inputText.value,
@@ -61,22 +129,34 @@ async function generatePreviews() {
             fillColor: fillColor.value,
           })
 
-          items.push({
+          if (isStaleGeneration(generationToken)) {
+            return
+          }
+
+          items[currentIndex] = {
             fontInfo,
             svgResult,
-            selected: uiStore.selectedExportItems.some(item => item.fontInfo.id === fontInfo.id)
-          })
+            selected: selectedFontIdSet.has(fontInfo.id),
+          }
         } catch (error) {
           console.error(`Failed to generate SVG for ${fontInfo.name}:`, error)
         }
       }
     }
 
-    previewItems.value = items
+    await Promise.all(Array.from({ length: workerCount }, () => worker()))
+
+    if (isStaleGeneration(generationToken)) {
+      return
+    }
+
+    previewItems.value = items.filter((item): item is PreviewItemType => item !== null)
   } catch (error) {
     console.error('Failed to generate previews:', error)
   } finally {
-    isGenerating.value = false
+    if (!isStaleGeneration(generationToken)) {
+      isGenerating.value = false
+    }
   }
 }