sv

spx-gui/src/components/editor/preview/EditorPreview.vue

@@ -64,7 +64,7 @@
       >
         {{ $t({ en: 'Rerun', zh: '重新运行' }) }}
       </UIButton>
-      <UIButton class="button" type="boring" :disabled="running.initializing" @click="handleStop">
+      <UIButton class="button" type="boring" @click="handleStop">
         {{ $t({ en: 'Stop', zh: '停止' }) }}
       </UIButton>
     </UICardHeader>

spx-gui/src/components/project/runner/ProjectRunner.vue

@@ -20,8 +20,8 @@ function handleConsole(type: 'log' | 'warn', args: unknown[]) {
 const version = useSpxVersion()
 
 defineExpose({
-  async run() {
-    return projectRunnerRef.value?.run()
+  async run(signal?: AbortSignal) {
+    return projectRunnerRef.value?.run(signal)
   },
   async stop() {
     return projectRunnerRef.value?.stop()

spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue

@@ -6,14 +6,37 @@
   </div>
 </template>
 
+<script lang="ts">
+const zipEntryCache = new WeakMap<File, Promise<Blob>>()
+
+function getZipEntry(file: File) {
+  if (zipEntryCache.has(file)) return zipEntryCache.get(file)!
+  const zipEntry = toNativeFile(file).then((nf) => {
+    // For svg files, we convert them to png before sending to spx (v1):
+    // 1. Compatibility: Many SVG features are not supported in spx v1
+    // 2. Improve performance: SVG rendering is slow in spx v1
+    if (nf.type === 'image/svg+xml') {
+      const startConvertAt = Date.now()
+      return toPng(nf).then(png => {
+        console.log(`Convert ${nf.name} to PNG in ${Date.now() - startConvertAt}ms`)
+        return png
+      })
+    }
+    return nf
+  })
+  zipEntryCache.set(file, zipEntry)
+  return zipEntry
+}
+</script>
+
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue'
 import JSZip from 'jszip'
 import { registerPlayer } from '@/utils/player-registry'
 import { until } from '@/utils/utils'
 import { useFileUrl } from '@/utils/file'
 import { toPng } from '@/utils/img'
-import { toNativeFile } from '@/models/common/file'
+import { File, toNativeFile } from '@/models/common/file'
 import { Project } from '@/models/project'
 import { UIImg, UILoading } from '@/components/ui'
 import IframeDisplay, { preload } from './IframeDisplay.vue'
@@ -47,30 +70,31 @@ onUnmounted(() => {
   registered.onStopped()
 })
 
-async function getProjectZipData() {
+async function getProjectZipData(signal?: AbortSignal) {
   const zip = new JSZip()
+  let lastAt = Date.now()
   const [, files] = await props.project.export()
+  signal?.throwIfAborted()
+
+  console.log(`Export project in ${Date.now() - lastAt}ms`)
+  lastAt = Date.now()
+
   Object.entries(files).forEach(([path, file]) => {
     if (file == null) return
-    zip.file(
-      path,
-      toNativeFile(file).then((nf) => {
-        // For svg files, we convert them to png before sending to spx (v1):
-        // 1. Compatibility: Many SVG features are not supported in spx v1
-        // 2. Improve performance: SVG rendering is slow in spx v1
-        if (nf.type === 'image/svg+xml') return toPng(nf)
-        return nf
-      })
-    )
+    zip.file(path, getZipEntry(file))
+  })
+  return zip.generateAsync({ type: 'arraybuffer' }).then(r => {
+    console.log(`Generate zip in ${Date.now() - lastAt}ms`)
+    return r
   })
-  return zip.generateAsync({ type: 'arraybuffer' })
 }
 
 defineExpose({
-  async run() {
+  async run(signal?: AbortSignal) {
     loading.value = true
     registered.onStart()
-    zipData.value = await getProjectZipData()
+    zipData.value = await getProjectZipData(signal)
+    signal?.throwIfAborted()
     await until(() => !loading.value)
   },
   stop() {

spx-gui/src/components/project/runner/v2/ProjectRunnerV2.vue

@@ -106,11 +106,13 @@ onMounted(() => {
 })
 
 defineExpose({
-  async run() {
+  async run(signal?: AbortSignal) {
     loading.value = true
     registered.onStart()
     const iframeWindow = await untilNotNull(iframeWindowRef)
+    signal?.throwIfAborted()
     const projectData = await getProjectData()
+    signal?.throwIfAborted()
     await withLog('startGame', iframeWindow.startGame(projectData, assetURLs))
     loading.value = false
   },

spx-gui/src/utils/img.ts

@@ -11,24 +11,16 @@ export function convertImg(
   return new Promise<Blob>((resolve, reject) => {
     const img = new Image()
     img.onload = async () => {
-      const canvas = document.createElement('canvas')
+      let size = { width: img.naturalWidth, height: img.naturalHeight }
       if (input.type === 'image/svg+xml') {
         const svgText = await input.text()
-        const { width, height } = await getSVGSize(svgText)
-        canvas.width = width
-        canvas.height = height
-      } else {
-        canvas.width = img.naturalWidth
-        canvas.height = img.naturalHeight
+        size = await getSVGSize(svgText)
       }
-      canvas.getContext('2d')?.drawImage(img, 0, 0, canvas.width, canvas.height)
-      canvas.toBlob((newBlob) => {
-        if (newBlob == null) {
-          reject(new Error('toBlob failed'))
-          return
-        }
-        resolve(newBlob)
-      }, type)
+      const canvas = new OffscreenCanvas(size.width, size.height)
+      const ctx = canvas.getContext('2d')!
+      ctx.drawImage(img, 0, 0, size.width, size.height)
+      const newBlob = await canvas.convertToBlob({ type })
+      resolve(newBlob)
     }
     img.onerror = (e) => reject(new Error(`load image failed: ${e.toString()}`))
     const url = URL.createObjectURL(input)

tools/spxls/client.ts

@@ -1,5 +1,8 @@
 import { type Files, type NotificationMessage, type RequestMessage, type ResponseMessage, type ResponseError as ResponseErrorObj, type Spxls } from '.'
 
+// eslint-disable-next-line no-console
+const debug = process.env.NODE_ENV === 'developments' ? console.debug : () => {}
+
 /**
  * Client wrapper for the spxls.
  */
@@ -75,9 +78,8 @@ export class Spxlc {
    */
   request<T>(method: string, params?: any): Promise<T> {
     const id = this.nextRequestId++
-    /* eslint-disable no-console */
     // TODO: remove debug logs
-    console.debug(`[${id}][${method}] params:`, params)
+    debug(`[${id}][${method}] params:`, params)
     const sendAt = Date.now()
     return new Promise<T>((resolve, reject) => {
       const message: RequestMessage = {
@@ -95,14 +97,14 @@ export class Spxlc {
     }).then(
       result => {
         const time = Date.now() - sendAt
-        console.debug(`[${id}][${method}] took ${time}ms`)
-        console.debug(`[${id}][${method}] result:`, result)
+        debug(`[${id}][${method}] took ${time}ms`)
+        debug(`[${id}][${method}] result:`, result)
         return result
       },
       err => {
         const time = Date.now() - sendAt
-        console.debug(`[${id}][${method}] took ${time}ms`)
-        console.debug(`[${id}][${method}] error:`, err)
+        debug(`[${id}][${method}] took ${time}ms`)
+        debug(`[${id}][${method}] error:`, err)
         throw err
       }
     )