feat: support adding blank frames in split previews

systemchester · systemchester · commit cbba7e01fe54 · 2026-04-11T17:48:51.000+08:00
diff --git a/frontend/src/components/GifFrameConverter.tsx b/frontend/src/components/GifFrameConverter.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Button, InputNumber, message, Radio, Slider, Space, Tabs, Tooltip, Typography, Upload } from 'antd'
-import { CaretLeftOutlined, CaretRightOutlined, DeleteOutlined, DownloadOutlined, DragOutlined, FileImageOutlined, LayoutOutlined, PictureOutlined, MergeCellsOutlined } from '@ant-design/icons'
+import { CaretLeftOutlined, CaretRightOutlined, DeleteOutlined, DownloadOutlined, DragOutlined, FileImageOutlined, LayoutOutlined, PictureOutlined, MergeCellsOutlined, PlusOutlined } from '@ant-design/icons'
 import type { UploadFile } from 'antd'
 import { parseGIF, decompressFrames } from 'gifuct-js'
 // @ts-expect-error gifenc has no types
@@ -62,6 +62,26 @@ function compositeFrame(
   return buf
 }
 
+function loadImageElement(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(new Error('load'))
+    img.src = src
+  })
+}
+
+function createTransparentPngBlob(width: number, height: number): Promise<Blob> {
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.max(1, Math.floor(width))
+  canvas.height = Math.max(1, Math.floor(height))
+  const ctx = canvas.getContext('2d')
+  ctx?.clearRect(0, 0, canvas.width, canvas.height)
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('canvas'))), 'image/png')
+  })
+}
+
 export default function GifFrameConverter() {
   const { t } = useLanguage()
   const [activeTab, setActiveTab] = useState<'gif2frames' | 'frames2gif' | 'images2single' | 'simpleStitch'>('images2single')
@@ -108,6 +128,7 @@ export default function GifFrameConverter() {
   const [cropRight, setCropRight] = useState(0)
   const [cropPreviewIndex, setCropPreviewIndex] = useState(0)
   const [firstImageSize, setFirstImageSize] = useState<{ w: number; h: number } | null>(null)
+  const [addingBlankFrame, setAddingBlankFrame] = useState(false)
 
   const [stitchFiles, setStitchFiles] = useState<File[]>([])
   const [stitchInputUrls, setStitchInputUrls] = useState<string[]>([])
@@ -323,6 +344,32 @@ export default function GifFrameConverter() {
     }
   }
 
+  const addBlankCombineFrame = async () => {
+    if (combineFiles.length === 0) return
+    setAddingBlankFrame(true)
+    try {
+      const refSize =
+        firstImageSize ??
+        (await (async () => {
+          const url = URL.createObjectURL(combineFiles[0]!)
+          try {
+            const img = await loadImageElement(url)
+            return { w: img.naturalWidth, h: img.naturalHeight }
+          } finally {
+            URL.revokeObjectURL(url)
+          }
+        })())
+      const blob = await createTransparentPngBlob(refSize.w, refSize.h)
+      const nextIndex = combineFiles.length + 1
+      const blankFile = new File([blob], `blank_${String(nextIndex).padStart(3, '0')}.png`, { type: 'image/png' })
+      setCombineFiles((prev) => [...prev, blankFile])
+    } catch (e) {
+      message.error(t('imagesToSingleAddBlankFailed') + ': ' + String(e))
+    } finally {
+      setAddingBlankFrame(false)
+    }
+  }
+
   const downloadCombined = () => {
     if (!combinedUrl) return
     const a = document.createElement('a')
@@ -926,6 +973,14 @@ export default function GifFrameConverter() {
                 <Space wrap align="center" style={{ marginBottom: 12 }}>
                   <Text type="secondary">{t('imagesToSingleCols')}:</Text>
                   <InputNumber min={1} max={64} value={combineCols} onChange={(v) => setCombineCols(v ?? 4)} style={{ width: 72 }} />
+                  <Button
+                    icon={<PlusOutlined />}
+                    onClick={addBlankCombineFrame}
+                    disabled={combineFiles.length === 0}
+                    loading={addingBlankFrame}
+                  >
+                    {t('imagesToSingleAddBlank')}
+                  </Button>
                 </Space>
                 <Space wrap align="center" style={{ marginBottom: 12 }}>
                   <Text type="secondary">{t('imagesToSingleInputMode')}:</Text>
diff --git a/frontend/src/components/SpriteSheetAdjust.tsx b/frontend/src/components/SpriteSheetAdjust.tsx
@@ -240,6 +240,20 @@ function loadImageElement(src: string): Promise<HTMLImageElement> {
   })
 }
 
+function createTransparentFrameUrl(width: number, height: number): Promise<string> {
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.max(1, Math.floor(width))
+  canvas.height = Math.max(1, Math.floor(height))
+  const ctx = canvas.getContext('2d')
+  ctx?.clearRect(0, 0, canvas.width, canvas.height)
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(URL.createObjectURL(blob))
+      else reject(new Error('canvas'))
+    }, 'image/png')
+  })
+}
+
 /** RoninPro：单图网格拆分与整图均分功能重叠且易混淆；暂隐藏第三项，改为 true 恢复 */
 const SHEET_PRO_GRID_SPLIT_VISIBLE = false
 
@@ -330,6 +344,7 @@ export default function SpriteSheetAdjust({ integratedSplit = false }: SpriteShe
   const [recombinedParams, setRecombinedParams] = useState<{ cellW: number; cellH: number } | null>(null)
   const [recombining, setRecombining] = useState(false)
   const [applyProgress, setApplyProgress] = useState<number | null>(null)
+  const [addingBlankFrame, setAddingBlankFrame] = useState(false)
 
   const gridCols = integratedSplit ? layoutCols : cols
   const gridRows = integratedSplit ? layoutRows : rows
@@ -1358,6 +1373,32 @@ export default function SpriteSheetAdjust({ integratedSplit = false }: SpriteShe
     [frameUrls.length, sheetInputMode],
   )
 
+  const addIntegratedBlankFrame = useCallback(async () => {
+    if (!integratedSplit || frameUrls.length === 0) return
+    setAddingBlankFrame(true)
+    try {
+      const refSize =
+        naturalSizes[0] ??
+        (await (async () => {
+          const img = await loadImageElement(frameUrls[0]!)
+          return { w: img.naturalWidth, h: img.naturalHeight }
+        })())
+      const blankUrl = await createTransparentFrameUrl(refSize.w, refSize.h)
+      pendingIntrinsicSizesRef.current =
+        naturalSizes.length === frameUrls.length ? [...naturalSizes, refSize] : null
+      setFrameUrls((prev) => [...prev, blankUrl])
+      setFrameOffsets((prev) => [...prev, { dx: 0, dy: 0 }])
+      setFrameCrops((prev) => [...prev, emptyCrop()])
+      setSelected((prev) => [...prev, true])
+      setFramePressCounts((prev) => [...prev, { up: 0, down: 0, left: 0, right: 0 }])
+      setNaturalSizes((prev) => (prev.length === frameUrls.length ? [...prev, refSize] : prev))
+    } catch (e) {
+      message.error(t('imagesToSingleAddBlankFailed') + ': ' + String(e))
+    } finally {
+      setAddingBlankFrame(false)
+    }
+  }, [integratedSplit, frameUrls, naturalSizes, t])
+
   return (
     <div className="sprite-adjust-module">
     <Space direction="vertical" size="large" style={{ width: '100%' }}>
@@ -1627,6 +1668,13 @@ export default function SpriteSheetAdjust({ integratedSplit = false }: SpriteShe
                       onChange={(v) => onIntegratedPreviewColsChange(v ?? layoutCols)}
                       style={{ width: 72 }}
                     />
+                    <Button
+                      icon={<PlusOutlined />}
+                      onClick={addIntegratedBlankFrame}
+                      loading={addingBlankFrame}
+                    >
+                      {t('imagesToSingleAddBlank')}
+                    </Button>
                     <Text type="secondary">{t('sheetProRowsAuto', { rows: layoutRows, n: frameUrls.length })}</Text>
                   </Space>
                   <Text type="secondary" style={{ fontSize: 12 }}>{t('sheetProSplitPreviewManageHint')}</Text>
diff --git a/frontend/src/i18n/locales.ts b/frontend/src/i18n/locales.ts
@@ -1055,6 +1055,8 @@ export const locales: Record<Lang, Record<string, string>> = {
     imagesToSingleCropPreviewN: '图 {current} / {total}',
     imagesToSingleCropNegativeHint: '负数为该边缘增加透明像素',
     imagesToSingleDeleteRow: '删除整行',
+    imagesToSingleAddBlank: '添加空白帧',
+    imagesToSingleAddBlankFailed: '添加空白帧失败',
     simpleStitch: '简易拼接',
     simpleStitchHint: '上传多张图片，按上下、左右或合成重叠拼接成一张',
     simpleStitchDirection: '拼接方向',
@@ -2216,6 +2218,8 @@ export const locales: Record<Lang, Record<string, string>> = {
     imagesToSingleCropPreviewN: 'Image {current} / {total}',
     imagesToSingleCropNegativeHint: 'Negative values add transparent pixels at that edge',
     imagesToSingleDeleteRow: 'Delete row',
+    imagesToSingleAddBlank: 'Add blank frame',
+    imagesToSingleAddBlankFailed: 'Failed to add blank frame',
     simpleStitch: 'Simple Stitch',
     simpleStitchHint: 'Upload multiple images, stitch vertically, horizontally, or overlay',
     simpleStitchDirection: 'Direction',
@@ -3378,6 +3382,8 @@ export const locales: Record<Lang, Record<string, string>> = {
     imagesToSingleCropPreviewN: '画像 {current} / {total}',
     imagesToSingleCropNegativeHint: '負の値はその端に透明ピクセルを追加',
     imagesToSingleDeleteRow: '行を削除',
+    imagesToSingleAddBlank: '空白フレームを追加',
+    imagesToSingleAddBlankFailed: '空白フレームの追加に失敗しました',
     simpleStitch: '簡易連結',
     simpleStitchHint: '複数画像をアップロードし、上下・左右・重ね合成で連結',
     simpleStitchDirection: '方向',
