fix cancelled warning in console

nighca · Jul 1, 2024 · f967f3e · f967f3e
1 parent 5a8d9b6
commit f967f3e
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 108 deletions.
diff --git a/spx-gui/src/components/editor/EditorHomepage.vue b/spx-gui/src/components/editor/EditorHomepage.vue
@@ -47,7 +47,7 @@ import TopNav from '@/components/top-nav/TopNav.vue'
 import ProjectList from '@/components/project/ProjectList.vue'
 import { useCreateProject } from '@/components/project'
 import { getProjectEditorRoute } from '@/router'
-import { useQuery } from '@/utils/exception'
+import { useMessageHandle, useQuery } from '@/utils/exception'
 import EditorContextProvider from './EditorContextProvider.vue'
 import ProjectEditor from './ProjectEditor.vue'
 import { clear } from '@/models/common/local'
@@ -258,10 +258,13 @@ function handleSelected(project: ProjectData) {
   openProject(project.name)
 }
 
-async function handleCreate() {
-  const newProject = await createProject()
-  openProject(newProject.name)
-}
+const handleCreate = useMessageHandle(
+  async () => {
+    const newProject = await createProject()
+    openProject(newProject.name)
+  },
+  { en: 'Failed to create project', zh: '创建项目失败' }
+).fn
 </script>
 
 <style scoped lang="scss">

diff --git a/spx-gui/src/components/editor/panels/sprite/SpriteBasicConfig.vue b/spx-gui/src/components/editor/panels/sprite/SpriteBasicConfig.vue
@@ -81,6 +81,7 @@ import {
   UIButtonGroup,
   UIButtonGroupItem
 } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
 import { debounce, round } from '@/utils/utils'
 import type { Sprite } from '@/models/sprite'
 import { type Project } from '@/models/project'
@@ -98,12 +99,14 @@ const emit = defineEmits<{
 
 const renameSprite = useModal(SpriteRenameModal)
 
-function handleNameEdit() {
-  renameSprite({
-    sprite: props.sprite,
-    project: props.project
-  })
-}
+const handleNameEdit = useMessageHandle(
+  () =>
+    renameSprite({
+      sprite: props.sprite,
+      project: props.project
+    }),
+  { en: 'Failed to rename sprite', zh: '重命名精灵失败' }
+).fn
 
 const handleXUpdate = wrapUpdateHandler((x: number | null) => props.sprite.setX(x ?? 0))
 const handleYUpdate = wrapUpdateHandler((y: number | null) => props.sprite.setY(y ?? 0))

diff --git a/spx-gui/src/components/editor/sound/SoundEditor.vue b/spx-gui/src/components/editor/sound/SoundEditor.vue
@@ -82,12 +82,14 @@ const props = defineProps<{
 const editorCtx = useEditorCtx()
 const renameSound = useModal(SoundRenameModal)
 
-function handleNameEdit() {
-  renameSound({
-    sound: props.sound,
-    project: editorCtx.project
-  })
-}
+const handleNameEdit = useMessageHandle(
+  () =>
+    renameSound({
+      sound: props.sound,
+      project: editorCtx.project
+    }),
+  { en: 'Failed to rename sound', zh: '重命名声音失败' }
+).fn
 
 const waveformPlayerRef = ref<InstanceType<typeof WaveformPlayer> | null>(null)
 const gain = ref(1)

diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { UIImg, useModal } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
 import { useFileUrl } from '@/utils/file'
 import type { Costume } from '@/models/costume'
 import type { Sprite } from '@/models/sprite'
@@ -23,13 +24,15 @@ const props = defineProps<{
 const editorCtx = useEditorCtx()
 const renameCostume = useModal(CostumeRenameModal)
 
-function handleRename() {
-  renameCostume({
-    costume: props.costume,
-    sprite: props.sprite,
-    project: editorCtx.project
-  })
-}
+const handleRename = useMessageHandle(
+  () =>
+    renameCostume({
+      costume: props.costume,
+      sprite: props.sprite,
+      project: editorCtx.project
+    }),
+  { en: 'Failed to rename costume', zh: '重命名造型失败' }
+).fn
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 </script>

diff --git a/spx-gui/src/components/editor/stage/BackdropDetail.vue b/spx-gui/src/components/editor/stage/BackdropDetail.vue
@@ -9,6 +9,7 @@
 
 <script setup lang="ts">
 import { useModal, UILoading } from '@/components/ui'
+import { useMessageHandle } from '@/utils/exception'
 import { useFileUrl } from '@/utils/file'
 import type { Backdrop } from '@/models/backdrop'
 import { useEditorCtx } from '../EditorContextProvider.vue'
@@ -22,12 +23,14 @@ const props = defineProps<{
 const editorCtx = useEditorCtx()
 const renameBackdrop = useModal(BackdropRenameModal)
 
-function handleRename() {
-  renameBackdrop({
-    backdrop: props.backdrop,
-    project: editorCtx.project
-  })
-}
+const handleRename = useMessageHandle(
+  () =>
+    renameBackdrop({
+      backdrop: props.backdrop,
+      project: editorCtx.project
+    }),
+  { en: 'Failed to rename backdrop', zh: '重命名背景失败' }
+).fn
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.backdrop.img)
 </script>

diff --git a/spx-gui/src/components/project/ProjectCreateModal.vue b/spx-gui/src/components/project/ProjectCreateModal.vue
@@ -44,7 +44,7 @@ import {
   useForm,
   type FormValidationResult
 } from '@/components/ui'
-import { type ProjectData, getProject, addProject as apiAddProject, IsPublic } from '@/apis/project'
+import { type ProjectData, getProject, addProject, IsPublic } from '@/apis/project'
 import { useI18n } from '@/utils/i18n'
 import { useMessageHandle } from '@/utils/exception'
 import { useUserStore } from '@/stores/user'
@@ -75,12 +75,6 @@ const form = useForm({
   name: ['', validateName]
 })
 
-const addProject = useMessageHandle(
-  apiAddProject,
-  { en: 'Failed to create project', zh: '创建失败' },
-  (project) => ({ en: `Project ${project.name} created`, zh: `项目 ${project.name} 创建成功` })
-).fn
-
 function handleCancel() {
   emit('cancelled')
 }
@@ -113,8 +107,13 @@ const handleSubmit = useMessageHandle(
       files: fileCollection
     })
     emit('resolved', projectData)
+    return projectData
   },
-  { en: 'Failed to create project', zh: '项目创建失败' }
+  { en: 'Failed to create project', zh: '项目创建失败' },
+  (projectData) => ({
+    en: `Project ${projectData.name} created`,
+    zh: `项目 ${projectData.name} 创建成功`
+  })
 )
 
 async function validateName(name: string): Promise<FormValidationResult> {

diff --git a/spx-gui/src/components/project/index.ts b/spx-gui/src/components/project/index.ts
@@ -1,7 +1,6 @@
 import { useRouter } from 'vue-router'
-import { useModal, useConfirmDialog } from '@/components/ui'
+import { useModal, useConfirmDialog, useMessage } from '@/components/ui'
 import { IsPublic, deleteProject } from '@/apis/project'
-import { useMessageHandle } from '@/utils/exception'
 import ProjectCreateModal from './ProjectCreateModal.vue'
 import ProjectOpenModal from './ProjectOpenModal.vue'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
@@ -42,20 +41,17 @@ export function useRemoveProject() {
   }
 }
 
-async function copySharingLink(project: Project) {
-  const { owner, name } = project
-  // TODO: the check should be unnecessary
-  if (owner == null || name == null) throw new Error(`owner (${owner}), name (${name}) required`)
-  await navigator.clipboard.writeText(`${location.origin}${getProjectShareRoute(owner, name)}`)
-}
-
 /** Copy sharing link for given project */
 export function useShareProject() {
-  return useMessageHandle(
-    copySharingLink,
-    { en: 'Failed to get link for sharing', zh: '获取分享链接失败' },
-    { en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }
-  ).fn
+  const m = useMessage()
+  const { t } = useI18n()
+  return async function shareProject(project: Project) {
+    const { owner, name } = project
+    // TODO: the check should be unnecessary
+    if (owner == null || name == null) throw new Error(`owner (${owner}), name (${name}) required`)
+    await navigator.clipboard.writeText(`${location.origin}${getProjectShareRoute(owner, name)}`)
+    m.success(t({ en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }))
+  }
 }
 
 /**
@@ -65,67 +61,54 @@ export function useShareProject() {
  * - copy sharing link
  */
 export function useSaveAndShareProject() {
-  const withConfirm = useConfirmDialog()
   const { t } = useI18n()
+  const withConfirm = useConfirmDialog()
+  const shareProject = useShareProject()
 
-  const saveAndShare = useMessageHandle(
-    async (project: Project) => {
-      if (project.isPublic !== IsPublic.public) project.setPublic(IsPublic.public)
-      if (project.hasUnsyncedChanges) await project.saveToCloud()
-      await copySharingLink(project)
-    },
-    { en: 'Failed to get link for sharing', zh: '获取分享链接失败' },
-    { en: 'Link copied to clipboard', zh: '分享链接已复制到剪贴板' }
-  ).fn
+  async function saveAndShare(project: Project) {
+    if (project.isPublic !== IsPublic.public) project.setPublic(IsPublic.public)
+    if (project.hasUnsyncedChanges) await project.saveToCloud()
+    await shareProject(project)
+  }
+
+  async function saveAndShareWithConfirm(project: Project, confirmMessage: LocaleMessage) {
+    await withConfirm({
+      title: t({ en: 'Share project', zh: '分享项目' }),
+      content: t(confirmMessage),
+      confirmHandler: () => saveAndShare(project)
+    })
+  }
 
   return async function saveAndShareProject(project: Project) {
     const { isPublic, hasUnsyncedChanges } = project
     if (isPublic == null) throw new Error('isPublic required')
 
     if (isPublic === IsPublic.public) {
-      if (!hasUnsyncedChanges) return shareWithConfirm(null)
+      if (!hasUnsyncedChanges) return saveAndShare(project)
       else
-        return shareWithConfirm({
+        return saveAndShareWithConfirm(project, {
           en: "To share the project, we will save the project's current state to cloud",
           zh: '分享操作会将当前项目状态保存到云端'
         })
     } else {
       if (!hasUnsyncedChanges)
-        return shareWithConfirm({
+        return saveAndShareWithConfirm(project, {
           en: 'To share the project, we will make the project public',
           zh: '分享操作会将当前项目设置为公开'
         })
       else
-        return shareWithConfirm({
+        return saveAndShareWithConfirm(project, {
           en: "To share the project, we will save the project's current state to cloud & make it public",
           zh: '分享操作会将当前项目状态保存到云端，并将项目设置为公开'
         })
     }
-
-    async function shareWithConfirm(confirmMessage: LocaleMessage | null) {
-      if (confirmMessage == null) return saveAndShare(project)
-      await withConfirm({
-        title: t({ en: 'Share project', zh: '分享项目' }),
-        content: t(confirmMessage),
-        confirmHandler: () => saveAndShare(project)
-      })
-    }
   }
 }
 
 export function useStopSharingProject() {
   const withConfirm = useConfirmDialog()
   const { t } = useI18n()
 
-  const doStopSharingProject = useMessageHandle(
-    async (project: Project) => {
-      project.setPublic(IsPublic.personal)
-      await project.saveToCloud()
-    },
-    { en: 'Failed to stop sharing project', zh: '未成功停止分享项目' },
-    { en: 'Project sharing is now stopped', zh: '项目已停止分享' }
-  ).fn
-
   return async function stopSharingProject(project: Project) {
     let confirmMessage = {
       en: 'If sharing stopped, others will no longer have permission to access the project, and all project-sharing links will expire',
@@ -140,7 +123,10 @@ export function useStopSharingProject() {
     return withConfirm({
       title: t({ en: 'Stop sharing project', zh: '停止分享项目' }),
       content: t(confirmMessage),
-      confirmHandler: () => doStopSharingProject(project)
+      confirmHandler: async () => {
+        project.setPublic(IsPublic.personal)
+        await project.saveToCloud()
+      }
     })
   }
 }
diff --git a/spx-gui/src/components/top-nav/TopNav.vue b/spx-gui/src/components/top-nav/TopNav.vue
@@ -17,7 +17,7 @@
               <template #icon><img :src="newSvg" /></template>
               {{ $t({ en: 'New project', zh: '新建项目' }) }}
             </UIMenuItem>
-            <UIMenuItem @click="openProject">
+            <UIMenuItem @click="handleOpenProject">
               <template #icon><img :src="openSvg" /></template>
               {{ $t({ en: 'Open project...', zh: '打开项目...' }) }}
             </UIMenuItem>
@@ -39,13 +39,13 @@
             </UIMenuItem>
           </UIMenuGroup>
           <UIMenuGroup :disabled="project == null || !isOnline">
-            <UIMenuItem @click="shareProject(project!)">
+            <UIMenuItem @click="handleShareProject">
               <template #icon><img :src="shareSvg" /></template>
               {{ $t({ en: 'Share project', zh: '分享项目' }) }}
             </UIMenuItem>
             <UIMenuItem
               v-if="project?.isPublic === IsPublic.public"
-              @click="stopSharingProject(project!)"
+              @click="handleStopSharingProject"
             >
               <template #icon><img :src="stopSharingSvg" /></template>
               {{ $t({ en: 'Stop sharing', zh: '停止分享' }) }}
@@ -185,16 +185,19 @@ const { isOnline } = useNetwork()
 const router = useRouter()
 
 const createProject = useCreateProject()
-const openProject = useOpenProject()
-const removeProject = useRemoveProject()
-const shareProject = useSaveAndShareProject()
-const stopSharingProject = useStopSharingProject()
-const loadFromScratchModal = useLoadFromScratchModal()
+const handleNewProject = useMessageHandle(
+  async () => {
+    const { name } = await createProject()
+    router.push(getProjectEditorRoute(name))
+  },
+  { en: 'Failed to create new project', zh: '新建项目失败' }
+).fn
 
-async function handleNewProject() {
-  const { name } = await createProject()
-  router.push(getProjectEditorRoute(name))
-}
+const openProject = useOpenProject()
+const handleOpenProject = useMessageHandle(openProject, {
+  en: 'Failed to open project',
+  zh: '打开项目失败'
+}).fn
 
 const confirm = useConfirmDialog()
 
@@ -225,11 +228,26 @@ const handleExportProjectFile = useMessageHandle(
   { en: 'Failed to export project file', zh: '导出项目文件失败' }
 ).fn
 
+const loadFromScratchModal = useLoadFromScratchModal()
 const handleImportFromScratch = useMessageHandle(() => loadFromScratchModal(props.project!), {
   en: 'Failed to import from Scratch file',
   zh: '从 Scratch 项目文件导入失败'
 }).fn
 
+const shareProject = useSaveAndShareProject()
+const handleShareProject = useMessageHandle(() => shareProject(props.project!), {
+  en: 'Failed to share project',
+  zh: '分享项目失败'
+}).fn
+
+const stopSharingProject = useStopSharingProject()
+const handleStopSharingProject = useMessageHandle(
+  () => stopSharingProject(props.project!),
+  { en: 'Failed to stop sharing project', zh: '停止分享项目失败' },
+  { en: 'Project sharing is now stopped', zh: '项目已停止分享' }
+).fn
+
+const removeProject = useRemoveProject()
 const handleRemoveProject = useMessageHandle(
   async () => {
     await removeProject(props.project!.owner!, props.project!.name!)