Abstract project interface for reusable editor components

spx-gui/TODO.md

@@ -0,0 +1,4 @@
+* 处理 sprite gen 中对 editor ctx 的覆盖
+* 合并 editor ctx 与 editor state？
+* XxxHelpers 是否有更合适的名字
+* 对 resource model 的抽象

spx-gui/src/App.vue

@@ -26,6 +26,7 @@ import TutorialRoot from '@/components/tutorials/TutorialRoot.vue'
 import { SpotlightUI } from '@/utils/spotlight'
 import { useI18n } from '@/utils/i18n'
 import { useInstallRouteLoading } from '@/utils/route-loading'
+import { provideAppCtx } from './components/common/app-context'
 
 const { t } = useI18n()
 
@@ -44,6 +45,7 @@ const config = computed<Config>(() => ({
 }))
 
 useInstallRouteLoading()
+provideAppCtx()
 </script>
 
 <style lang="scss">

spx-gui/src/apis/aigc.ts

@@ -13,7 +13,8 @@ import {
   type UniversalUrl
 } from './common'
 import type { AssetExtraSettings, AssetType } from './asset'
-import type { State } from '@/models/sprite.ts'
+// TODO: avoid dep from apis to models
+import type { State } from '@/models/spx/sprite'
 
 export type ProjectSettings = {
   name: string

spx-gui/src/components/agent-copilot/CopilotProvider.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { InjectionKey } from 'vue'
 import { until } from '@/utils/utils'
+import { useAppCtx } from '@/components/common/app-context'
 
 export type McpConnectionStatus = {
   client: boolean
@@ -99,7 +100,7 @@ import { createProjectToolDescription, CreateProjectArgsSchema } from './mcp/def
 import { getProject, Visibility } from '@/apis/project'
 import { useRouter } from 'vue-router'
 import { getOwnProjectEditorRoute } from '@/router'
-import { Project } from '@/models/project'
+import { SpxProject } from '@/models/spx/project'
 import McpDebugger from './mcp/McpDebugger.vue'
 import { Client } from '@modelcontextprotocol/sdk/client/index.js'
 import { Server } from '@modelcontextprotocol/sdk/server/index.js'
@@ -175,6 +176,8 @@ const initBasicTools = async () => {
   )
 }
 
+const appCtx = useAppCtx()
+
 async function createProject(options: CreateProjectOptions) {
   const projectName = options.projectName
 
@@ -200,11 +203,11 @@ async function createProject(options: CreateProjectOptions) {
     // Handle error checking project existence
   }
 
-  const project = new Project(signedInUsername, projectName)
+  const project = new SpxProject(signedInUsername, projectName)
   project.setVisibility(Visibility.Private)
 
   try {
-    await project.saveToCloud()
+    await appCtx.cloudHelpers.save(project)
 
     const projectRoute = getOwnProjectEditorRoute(projectName)
 

spx-gui/src/components/asset/animation/GroupCostumesModal.vue

@@ -56,9 +56,9 @@
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
 import { UIButton, UICheckbox, UIEmpty, UIFormModal } from '@/components/ui'
-import type { Costume } from '@/models/costume'
-import type { Sprite } from '@/models/sprite'
-import { defaultFps } from '@/models/animation'
+import type { Costume } from '@/models/spx/costume'
+import type { Sprite } from '@/models/spx/sprite'
+import { defaultFps } from '@/models/spx/animation'
 import AnimationPlayer from '@/components/editor/sprite/animation/AnimationPlayer.vue'
 import CostumeItem from '@/components/editor/sprite/CheckableCostumeItem.vue'
 

spx-gui/src/components/asset/gen/animation/AnimationGenItem.vue

@@ -12,7 +12,7 @@ export function isAnimationsLoading(gens: AnimationGen[]) {
 import { computed, ref } from 'vue'
 
 import { UIBlockItemTitle, UIImg } from '@/components/ui'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import CornerMenu from '@/components/editor/common/CornerMenu.vue'
 import RenameMenuItem from '@/components/editor/common/corner-menu-item/RenameMenuItem.vue'
 import RemoveMenuItem from '@/components/editor/common/corner-menu-item/RemoveMenuItem.vue'

spx-gui/src/components/asset/gen/animation/AnimationGenPreview.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton, UIError } from '@/components/ui'
 import AnimationDetail from '@/components/editor/sprite/AnimationDetail.vue'
 import { useRenameAnimationGen } from '../..'

spx-gui/src/components/asset/gen/animation/AnimationSettingsInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
 import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'

spx-gui/src/components/asset/gen/animation/AnimationVideoPreview.vue

@@ -106,7 +106,7 @@ import { computed, onScopeDispose, ref, toValue, watch, type Ref, type WatchSour
 import { useFileUrl } from '@/utils/file'
 import { untilNotNull } from '@/utils/utils'
 import type { File } from '@/models/common/file'
-import type { FramesConfig } from '@/models/gen/animation-gen'
+import type { FramesConfig } from '@/models/spx/gen/animation-gen'
 import PlayControl from '@/components/editor/common/PlayControl.vue'
 import GenLoading from '../common/GenLoading.vue'
 

spx-gui/src/components/asset/gen/backdrop/BackdropGen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIButton } from '@/components/ui'
-import type { Backdrop } from '@/models/backdrop'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { Backdrop } from '@/models/spx/backdrop'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import { capture, useMessageHandle } from '@/utils/exception'
 import { humanizeRemaining } from '../common/remaining-time'
 import BackdropSettingInput from './BackdropSettingsInput.vue'

spx-gui/src/components/asset/gen/backdrop/BackdropGenItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { UIBlockItemTitle } from '@/components/ui'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import GenItem from '../common/GenItem.vue'
 import backdropSVG from '../common/backdrop.svg?raw'
 

spx-gui/src/components/asset/gen/backdrop/BackdropSettingsInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { BackdropGen } from '@/models/gen/backdrop-gen'
+import type { BackdropGen } from '@/models/spx/gen/backdrop-gen'
 import SettingsInput from '../common/SettingsInput.vue'
 import PerspectiveInput from '../common/PerspectiveInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'

spx-gui/src/components/asset/gen/common/GenStateFailed.vue

@@ -2,7 +2,7 @@
 import { ApiException, isQuotaExceededMeta } from '@/apis/common/exception'
 import QuotaExceededCountdown from '@/components/common/QuotaExceededCountdown.vue'
 import { UIError } from '@/components/ui'
-import type { PhaseState } from '@/models/gen/common'
+import type { PhaseState } from '@/models/spx/gen/common'
 import { computed } from 'vue'
 
 export type PhaseStateFailed<R> = Extract<PhaseState<R>, { status: 'failed' }>

spx-gui/src/components/asset/gen/common/ImageSelector.vue

@@ -23,7 +23,7 @@ export function useImageSelectorDisabled(): ComputedRef<boolean> {
 import { computed, provide, ref } from 'vue'
 import { useContentSize } from '@/utils/dom'
 import type { File } from '@/models/common/file'
-import type { PhaseState } from '@/models/gen/common'
+import type { PhaseState } from '@/models/spx/gen/common'
 
 const props = withDefaults(
   defineProps<{

spx-gui/src/components/asset/gen/common/ReferenceCostumeInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAsyncComputed } from '@/utils/utils'
-import type { Costume } from '@/models/costume'
+import type { Costume } from '@/models/spx/costume'
 import ParamSelector from './param-settings/ParamSelector.vue'
 import imgCostume from './param-settings/assets/costume.svg'
 

spx-gui/src/components/asset/gen/costume/CostumeGenItem.vue

@@ -11,7 +11,7 @@ export function isCostumesLoading(gens: CostumeGen[]) {
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { UIBlockItemTitle, UIImg } from '@/components/ui'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import CornerMenu from '@/components/editor/common/CornerMenu.vue'
 import RenameMenuItem from '@/components/editor/common/corner-menu-item/RenameMenuItem.vue'
 import RemoveMenuItem from '@/components/editor/common/corner-menu-item/RemoveMenuItem.vue'

spx-gui/src/components/asset/gen/costume/CostumeGenPreview.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
 import { useFileUrl } from '@/utils/file'
 import { humanizeRemaining } from '../common/remaining-time'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import { UIImg, UIButton, UIError } from '@/components/ui'
 import CostumeDetail from '@/components/editor/sprite/CostumeDetail.vue'
 import { useRenameCostumeGen } from '../..'

spx-gui/src/components/asset/gen/costume/CostumeSettingsInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { CostumeGen } from '@/models/gen/costume-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
 import { UIButton } from '@/components/ui'
 import SettingsInput from '../common/SettingsInput.vue'
 import ReferenceCostumeInput from '../common/ReferenceCostumeInput.vue'

spx-gui/src/components/asset/gen/sprite/SpriteGen.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computedShallowReactive } from '@/utils/utils'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
-import type { Sprite } from '@/models/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import type { Sprite } from '@/models/spx/sprite'
 import { provideLocalEditorCtx, useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import SpriteGenPhaseSettings from './SpriteGenPhaseSettings.vue'
 import SpriteGenPhaseContent from './SpriteGenPhaseContent.vue'
@@ -17,6 +17,7 @@ const emit = defineEmits<{
 }>()
 
 const editorCtx = useEditorCtx()
+// We should override the state now to avoid history operations
 const localEditorCtx = computedShallowReactive(() => ({
   project: props.gen.previewProject,
   state: editorCtx.state

spx-gui/src/components/asset/gen/sprite/SpriteGenItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { UIBlockItemTitle } from '@/components/ui'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { computed } from 'vue'
 import GenItem from '../common/GenItem.vue'
 import spriteSVG from '../common/sprite.svg?raw'

spx-gui/src/components/asset/gen/sprite/SpriteGenModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Sprite } from '@/models/sprite'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { Sprite } from '@/models/spx/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { UIFormModal } from '@/components/ui'
 import SpriteGenComp from './SpriteGen.vue'
 

spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseContent.vue

@@ -8,10 +8,10 @@
 import { computed, watch } from 'vue'
 import { useI18n, type LocaleMessage } from '@/utils/i18n'
 import { capture, useMessageHandle } from '@/utils/exception'
-import type { Sprite } from '@/models/sprite'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
-import type { CostumeGen } from '@/models/gen/costume-gen'
-import type { AnimationGen } from '@/models/gen/animation-gen'
+import type { Sprite } from '@/models/spx/sprite'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
+import type { CostumeGen } from '@/models/spx/gen/costume-gen'
+import type { AnimationGen } from '@/models/spx/gen/animation-gen'
 import { UIButton, UITooltip, useConfirmDialog, type ConfirmOptions } from '@/components/ui'
 import { useRenameAnimationGen, useRenameCostumeGen } from '../..'
 import CostumeSettingInput from '../costume/CostumeSettingsInput.vue'

spx-gui/src/components/asset/gen/sprite/SpriteGenPhaseSettings.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIButton } from '@/components/ui'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import { useMessageHandle } from '@/utils/exception'
 import { humanizeRemaining } from '../common/remaining-time'
 import LayoutWithPreview from '../common/LayoutWithPreview.vue'

spx-gui/src/components/asset/gen/sprite/SpriteSettingsInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMessageHandle } from '@/utils/exception'
-import type { SpriteGen } from '@/models/gen/sprite-gen'
+import type { SpriteGen } from '@/models/spx/gen/sprite-gen'
 import SettingsInput from '../common/SettingsInput.vue'
 import SpriteCategoryInput from './SpriteCategoryInput.vue'
 import ArtStyleInput from '../common/ArtStyleInput.vue'