Fix some todos

spx-gui/.eslintrc.cjs

@@ -19,6 +19,7 @@ module.exports = {
         shallowOnly: true
       }
     ],
-    'no-console': ['warn', { allow: ['warn', 'error'] }]
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-redeclare': 'off'
   }
 }

spx-gui/src/apis/common/client.ts

@@ -3,11 +3,14 @@
  */
 
 import { apiBaseUrl } from '@/utils/env'
+import { Exception } from '@/utils/exception'
 import { ApiException } from './exception'
 
 export type RequestOptions = {
   method: string
   headers?: Headers
+  /** Timeout duration in milisecond, from request-sent to server-response-got */
+  timeout?: number
 }
 
 /** Response body when exception encountered for API calling */
@@ -25,6 +28,17 @@ function isApiExceptionPayload(body: any): body is ApiExceptionPayload {
 /** AuthProvider provide value for header Authorization */
 export type AuthProvider = () => Promise<string | null>
 
+// milisecond
+const defaultTimeout = 10 * 1000
+
+class TimeoutException extends Exception {
+  name = 'TimeoutException'
+  userMessage = { en: 'request timeout', zh: '请求超时' }
+  constructor() {
+    super('request timeout')
+  }
+}
+
 export class Client {
   private getAuth: AuthProvider = async () => null
 
@@ -46,7 +60,6 @@ export class Client {
   }
 
   private async handleResponse(resp: Response): Promise<unknown> {
-    // TODO: timeout
     if (!resp.ok) {
       const body = await resp.json()
       if (!isApiExceptionPayload(body)) {
@@ -59,7 +72,15 @@ export class Client {
 
   private async request(url: string, payload: unknown, options?: RequestOptions) {
     const req = await this.prepareRequest(url, payload, options)
-    const resp = await fetch(req)
+    const timeout = options?.timeout ?? defaultTimeout
+    const ctrl = new AbortController()
+    const resp = await Promise.race([
+      fetch(req, { signal: ctrl.signal }),
+      new Promise<never>((_, reject) => setTimeout(() => reject(new TimeoutException()), timeout))
+    ]).catch((e) => {
+      if (e instanceof TimeoutException) ctrl.abort()
+      throw e
+    })
     return this.handleResponse(resp)
   }
 

spx-gui/src/components/editor/EditorContextProvider.vue

@@ -49,14 +49,12 @@ const props = defineProps<{
 
 const selectedRef = ref<Selected | null>(null)
 
-/* eslint-disable no-redeclare */ // TODO: there should be no need to configure this
 function select(selected: null): void
 function select(type: 'stage'): void
 function select(type: 'sprite' | 'sound', name: string): void
 function select(type: any, name?: string) {
   selectedRef.value = name == null ? { type } : { type, name }
 }
-/* eslint-enable no-redeclare */
 
 // When sprite name changed, we lose the selected state
 // TODO: consider moving selected to model Project, so we can deal with renaming easily

spx-gui/src/components/editor/EditorHomepage.vue

@@ -5,10 +5,20 @@
     </header>
     <main v-if="userStore.userInfo" class="editor-main">
       <template v-if="projectName">
-        <EditorContextProvider v-if="project" :project="project" :user-info="userStore.userInfo">
+        <div v-if="isLoading" class="loading-wrapper">
+          <NSpin size="large" />
+        </div>
+        <div v-else-if="error != null">
+          {{ _t(error.userMessage) }}
+        </div>
+        <EditorContextProvider
+          v-else-if="project != null"
+          :project="project"
+          :user-info="userStore.userInfo"
+        >
           <ProjectEditor />
         </EditorContextProvider>
-        <NSpin v-else size="large" />
+        <div v-else>TODO</div>
       </template>
       <template v-else>
         <ProjectList @selected="handleSelected" />
@@ -19,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref, watch } from 'vue'
+import { watchEffect, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { NButton, NSpin } from 'naive-ui'
 import type { ProjectData } from '@/apis/project'
@@ -28,10 +38,10 @@ import { Project } from '@/models/project'
 import TopNav from '@/components/top-nav/TopNav.vue'
 import ProjectList from '@/components/project/ProjectList.vue'
 import { useCreateProject } from '@/components/project'
-import ProjectEditor from './ProjectEditor.vue'
 import { getProjectEditorRoute } from '@/router'
-import { computed } from 'vue'
+import { useQuery } from '@/utils/exception'
 import EditorContextProvider from './EditorContextProvider.vue'
+import ProjectEditor from './ProjectEditor.vue'
 
 const localCacheKey = 'TODO_GOPLUS_BUILDER_CACHED_PROJECT'
 
@@ -46,26 +56,25 @@ watchEffect(() => {
 
 const router = useRouter()
 const createProject = useCreateProject()
-const project = ref<Project | null>(null)
 const projectName = computed(
   () => router.currentRoute.value.params.projectName as string | undefined
 )
 
-watch(
-  () => projectName.value,
-  async (projectName) => {
-    if (userStore.userInfo == null) return
-    if (projectName == null) {
-      project.value = null
-      return
-    }
+const {
+  data: project,
+  isFetching: isLoading,
+  error
+} = useQuery(
+  async () => {
+    if (userStore.userInfo == null) return null
+    if (projectName.value == null) return null
     // TODO: UI logic to handle conflicts when there are local cache
     const newProject = new Project()
-    await newProject.loadFromCloud(userStore.userInfo.name, projectName)
+    await newProject.loadFromCloud(userStore.userInfo.name, projectName.value)
     newProject.syncToLocalCache(localCacheKey)
-    project.value = newProject
+    return newProject
   },
-  { immediate: true }
+  { en: 'Load project failed', zh: '加载项目失败' }
 )
 
 watch(

spx-gui/src/components/editor/panels/sprite/SpriteItem.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, effect, computed } from 'vue'
+import { computed } from 'vue'
+import { useFileUrl } from '@/utils/file'
 import { Sprite } from '@/models/sprite'
 
 const props = defineProps<{
@@ -19,13 +20,7 @@ const emit = defineEmits<{
   remove: []
 }>()
 
-const imgSrc = ref<string | null>(null)
-
-effect(async () => {
-  const img = props.sprite.costume?.img
-  imgSrc.value = img != null ? await img.url() : null // TODO: race condition
-})
-
+const imgSrc = useFileUrl(() => props.sprite.costume?.img)
 const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSrc.value}")` })
 </script>
 

spx-gui/src/components/editor/panels/stage/StagePanel.vue

@@ -18,13 +18,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, effect } from 'vue'
+import { computed } from 'vue'
 import { NDropdown, NButton } from 'naive-ui'
 import { useAddAssetFromLibrary, useAddAssetToLibrary } from '@/components/library'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { AssetType } from '@/apis/asset'
-import { selectImg } from '@/utils/file'
+import { selectImg, useFileUrl } from '@/utils/file'
 import { fromNativeFile } from '@/models/common/file'
 import { Backdrop } from '@/models/backdrop'
 import { stripExt } from '@/utils/path'
@@ -40,15 +40,7 @@ function select() {
 }
 
 const backdrop = computed(() => editorCtx.project.stage.backdrop)
-
-// TODO: we may need a special img component for [File](src/models/common/file.ts)
-const imgSrc = ref<string | null>(null)
-
-effect(async () => {
-  const img = backdrop.value?.img
-  imgSrc.value = img != null ? await img.url() : null // TODO: race condition
-})
-
+const imgSrc = useFileUrl(() => backdrop.value?.img)
 const imgStyle = computed(() => imgSrc.value && { backgroundImage: `url("${imgSrc.value}")` })
 
 const handleUpload = useMessageHandle(

spx-gui/src/components/editor/panels/todo/AssetAddBtn.vue

@@ -259,7 +259,7 @@ const beforeUpload = async (
   if (uploadFile.file != null) {
     const file = await fromNativeFile(uploadFile.file)
     let fileName = uploadFile.name
-    let assetName = stripExt(fileName) // TODO: naming conflict
+    let assetName = stripExt(fileName)
 
     switch (fileType) {
       case 'backdrop': {

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

@@ -25,7 +25,8 @@
   </v-layer>
 </template>
 <script setup lang="ts">
-import { defineProps, watch, ref } from 'vue'
+import { defineProps } from 'vue'
+import { useImgFile } from '@/utils/file'
 import type { Stage } from '@/models/stage'
 import type { Size } from '@/models/common'
 
@@ -35,18 +36,5 @@ const props = defineProps<{
   stage: Stage
 }>()
 
-const image = ref<HTMLImageElement>()
-
-watch(
-  () => props.stage.backdrop?.img,
-  async (backdropImg) => {
-    image.value?.remove()
-    if (backdropImg != null) {
-      const _image = new window.Image()
-      _image.src = await backdropImg.url()
-      image.value = _image
-    }
-  },
-  { immediate: true }
-)
+const image = useImgFile(() => props.stage.backdrop?.img)
 </script>

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

@@ -35,6 +35,8 @@ import type { Sprite } from '@/models/sprite'
 import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent } from './common'
 import type { Rect } from 'konva/lib/shapes/Rect'
 import type { Size } from '@/models/common'
+import { useImgFile } from '@/utils/file'
+
 // ----------props & emit------------------------------------
 const props = defineProps<{
   sprite: Sprite
@@ -57,7 +59,7 @@ const displayScale = computed(
 )
 
 // ----------data related -----------------------------------
-const image = ref<HTMLImageElement>()
+const image = useImgFile(() => currentCostume.value?.img)
 const costume = ref()
 // ----------computed properties-----------------------------
 // Computed spx's sprite position to konva's relative position by about changing sprite postion
@@ -88,24 +90,6 @@ watch(
   }
 )
 
-watch(
-  () => currentCostume.value,
-  async (new_costume) => {
-    if (new_costume != null) {
-      const _image = new window.Image()
-      _image.src = await new_costume.img.url()
-      _image.onload = () => {
-        image.value = _image
-      }
-    } else {
-      image.value?.remove()
-    }
-  },
-  {
-    immediate: true
-  }
-)
-
 // ----------methods-----------------------------------------
 /**
  * @description: map spx's sprite position to konva's relative position

spx-gui/src/components/project/ProjectCreate.vue

@@ -72,7 +72,8 @@ async function validateName(name: string): Promise<ValidationResult> {
     }
 
   // check naming conflict
-  const username = userStore.userInfo!.name // TODO: remove `!` here
+  if (userStore.userInfo == null) throw new Error('login required')
+  const username = userStore.userInfo.name
   const existedProject = await getProject(username, name).catch((e) => {
     if (e instanceof ApiException && e.code === ApiExceptionCode.errorNotFound) return null
     throw e

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

@@ -31,12 +31,12 @@ function parseProjectData({ files: fileUrls, ...metadata }: ProjectData) {
 
 export async function uploadFiles(files: Files): Promise<FileCollection> {
   const fileUrls: FileCollection = {}
-  await Promise.all(
-    Object.keys(files).map(async (path) => {
-      // TODO: keep the files' order
-      fileUrls[path] = await uploadFile(files[path]!)
-    })
+  const entries = await Promise.all(
+    Object.keys(files).map(async (path) => [path, await uploadFile(files[path]!)] as const)
   )
+  for (const [path, fileUrl] of entries) {
+    fileUrls[path] = fileUrl
+  }
   return fileUrls
 }
 

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

@@ -5,7 +5,7 @@
 
 export type Disposer = () => void
 
-export abstract class Disposble {
+export class Disposble {
   _disposers: Disposer[] = []
 
   addDisposer(disposer: Disposer) {

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

@@ -5,6 +5,8 @@
 
 import { getMimeFromExt } from '@/utils/file'
 import { extname } from '@/utils/path'
+import type { Disposer } from './disposable'
+import { Cancelled } from '@/utils/exception'
 
 export type Options = {
   /** MIME type of file */
@@ -40,10 +42,16 @@ export class File {
     }))
   }
 
-  // TODO: remember to do URL.revokeObjectURL
-  async url() {
+  async url(onCleanup: (disposer: Disposer) => void) {
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
     const ab = await this.arrayBuffer()
-    return URL.createObjectURL(new Blob([ab]))
+    if (cancelled) throw new Cancelled()
+    const url = URL.createObjectURL(new Blob([ab], { type: this.type }))
+    onCleanup(() => URL.revokeObjectURL(url))
+    return url
   }
 }