Fix image size for svg (#1186)

Author: nighca

spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue

@@ -14,7 +14,7 @@ import type { Image, ImageConfig } from 'konva/lib/shapes/Image'
 import type { Action } from '@/models/project'
 import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading, type Sprite } from '@/models/sprite'
 import type { Size } from '@/models/common'
-import { nomalizeDegree, round } from '@/utils/utils'
+import { nomalizeDegree, round, useAsyncComputed } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import { getNodeId } from './node'
@@ -30,6 +30,7 @@ const editorCtx = useEditorCtx()
 const costume = computed(() => props.sprite.defaultCostume)
 const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const [image] = useFileImg(() => costume.value?.img)
+const rawSize = useAsyncComputed(async () => costume.value?.getRawSize() ?? null)
 
 const nodeId = computed(() => getNodeId(props.sprite))
 
@@ -71,6 +72,8 @@ const config = computed<ImageConfig>(() => {
   const config = {
     nodeId: nodeId.value,
     image: image.value ?? undefined,
+    width: rawSize.value?.width ?? 0,
+    height: rawSize.value?.height ?? 0,
     draggable: true,
     offsetX: 0,
     offsetY: 0,

spx-gui/src/models/common/file.ts

@@ -7,8 +7,9 @@
 import { markRaw } from 'vue'
 import { getMimeFromExt } from '@/utils/file'
 import { extname } from '@/utils/path'
-import type { Disposer } from '@/utils/disposable'
+import { Disposable, type Disposer } from '@/utils/disposable'
 import { Cancelled } from '@/utils/exception'
+import type { Size } from '.'
 
 export type Options = {
   /** MIME type of file */
@@ -121,6 +122,41 @@ export async function toConfig(file: File) {
   return JSON.parse(text) as unknown
 }
 
+async function getSVGImageSize(svgFile: File) {
+  const svgText = await toText(svgFile)
+  const parser = new DOMParser()
+  const svg = parser.parseFromString(svgText, 'image/svg+xml').documentElement
+  if (!(svg instanceof SVGSVGElement)) throw new Error(`invalid svg: ${svgFile.name}`)
+  // Keep consistent with spx, for details see https://github.com/goplus/spx/blob/15b2e572746f3aaea519c2d9c0027188b50b62c8/internal/svgr/svg.go#L39
+  const { width, height } = svg.viewBox.baseVal
+  return { width, height }
+}
+
+async function getBitmapImageSize(bitmapImgFile: File) {
+  const d = new Disposable()
+  const imgUrl = await bitmapImgFile.url((fn) => d.addDisposer(fn))
+  return new Promise<Size>((resolve, reject) => {
+    const img = new window.Image()
+    img.src = imgUrl
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height
+      })
+    }
+    img.onerror = (e) => {
+      reject(new Error(`load image failed: ${e.toString()}`))
+    }
+  }).finally(() => {
+    d.dispose()
+  })
+}
+
+export async function getImageSize(file: File) {
+  if (file.type === 'image/svg+xml') return getSVGImageSize(file)
+  return getBitmapImageSize(file)
+}
+
 export function listDirs(
   files: { [path: string]: unknown },
   /** path of parent dir to do list, with no tailing slash */

spx-gui/src/models/costume.ts

@@ -3,9 +3,7 @@ import { nanoid } from 'nanoid'
 
 import { extname, resolve } from '@/utils/path'
 import { adaptImg } from '@/utils/spx'
-import { Disposable } from '@/utils/disposable'
-import { File, type Files } from './common/file'
-import type { Size } from './common'
+import { File, type Files, getImageSize } from './common/file'
 import { getCostumeName, validateCostumeName } from './common/asset-name'
 import type { Sprite } from './sprite'
 import type { Animation } from './animation'
@@ -71,24 +69,8 @@ export class Costume {
     this.bitmapResolution = bitmapResolution
   }
 
-  private async getRawSize() {
-    const d = new Disposable()
-    const imgUrl = await this.img.url((fn) => d.addDisposer(fn))
-    return new Promise<Size>((resolve, reject) => {
-      const img = new window.Image()
-      img.src = imgUrl
-      img.onload = () => {
-        resolve({
-          width: img.width,
-          height: img.height
-        })
-      }
-      img.onerror = (e) => {
-        reject(new Error(`load image failed: ${e.toString()}`))
-      }
-    }).finally(() => {
-      d.dispose()
-    })
+  async getRawSize() {
+    return getImageSize(this.img)
   }
 
   async getSize() {