From fc192ab804d22696cd422d72a3a4e986ac74240b Mon Sep 17 00:00:00 2001 From: luoliwoshang <2643523683@qq.com> Date: Wed, 28 Feb 2024 14:06:36 +0800 Subject: [PATCH] feat:zorder update when sprite's add/remove --- spx-gui/src/interface/file.ts | 12 ++-- spx-gui/src/store/modules/backdrop/index.ts | 22 ++----- spx-gui/src/store/modules/project/index.ts | 6 +- spx-gui/src/store/modules/sprite/index.ts | 71 ++++++++++++--------- 4 files changed, 57 insertions(+), 54 deletions(-) diff --git a/spx-gui/src/interface/file.ts b/spx-gui/src/interface/file.ts index 72c86ad24..a373b5214 100644 --- a/spx-gui/src/interface/file.ts +++ b/spx-gui/src/interface/file.ts @@ -2,8 +2,8 @@ * @Author: TuGitee tgb@std.uestc.edu.cn * @Date: 2024-01-24 21:42:28 * @LastEditors: Zhang Zhi Yang - * @LastEditTime: 2024-02-19 09:05:07 - * @FilePath: /spx-gui/src/interface/file.ts + * @LastEditTime: 2024-02-28 14:40:11 + * @FilePath: \spx-gui\src\interface\file.ts * @Description: The interface of file. */ @@ -167,9 +167,13 @@ export interface BackdropConfig extends Config { scenes?: Scene[]; /** - * The sprite zorder in the stage, the later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite. + * This configuration specifies the order in which the specified objects are rendered on the stage + * The later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite. + * The string item specifies the corresponding Sprite name + * The Object item specifies the coresponding like 'stageMonitor' + * TODO: add the type of the like 'stageMonitor' */ - zorder: string[]; + zorder: Array; /** * The costume of the backdrop diff --git a/spx-gui/src/store/modules/backdrop/index.ts b/spx-gui/src/store/modules/backdrop/index.ts index 8ef230a0c..6b259c36e 100644 --- a/spx-gui/src/store/modules/backdrop/index.ts +++ b/spx-gui/src/store/modules/backdrop/index.ts @@ -1,14 +1,13 @@ /* * @Author: Xu Ning * @Date: 2024-02-05 17:08:23 - * @LastEditors: xuning 453594138@qq.com - * @LastEditTime: 2024-02-06 12:34:43 - * @FilePath: /spx-gui/src/store/modules/backdrop/index.ts + * @LastEditors: Zhang Zhi Yang + * @LastEditTime: 2024-02-28 14:41:33 + * @FilePath: \spx-gui\src\store\modules\backdrop\index.ts * @Description: */ import { defineStore, storeToRefs } from 'pinia' import { computed } from 'vue' -import { useSpriteStore } from '../sprite' import { Backdrop } from '@/class/backdrop' import { useProjectStore } from '../index' export const useBackdropStore = defineStore('backdrop', () => { @@ -31,24 +30,13 @@ export const useBackdropStore = defineStore('backdrop', () => { * Set the zorder of the backdrop. * @param zOrder */ - function setZOrder(zOrder: string[] = genZOrder()) { + function setZOrder(zOrder: Array) { backdrop.value.config.zorder = zOrder } - /** - * Generate the zorder of the Sprite in the stage. - * The later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite. - */ - function genZOrder() { - const spriteStore = useSpriteStore() - const { list: sprites } = spriteStore - return sprites.map((sprite) => sprite.name) - } - return { backdrop, setItem, - setZOrder, - genZOrder + setZOrder } }) diff --git a/spx-gui/src/store/modules/project/index.ts b/spx-gui/src/store/modules/project/index.ts index ef34c086b..cccc934b8 100644 --- a/spx-gui/src/store/modules/project/index.ts +++ b/spx-gui/src/store/modules/project/index.ts @@ -1,9 +1,9 @@ /* * @Author: TuGitee tgb@std.uestc.edu.cn * @Date: 2024-01-22 11:26:18 - * @LastEditors: Xu Ning - * @LastEditTime: 2024-02-05 17:32:55 - * @FilePath: /spx-gui/src/store/modules/project/index.ts + * @LastEditors: Zhang Zhi Yang + * @LastEditTime: 2024-02-28 13:54:41 + * @FilePath: \spx-gui\src\store\modules\project\index.ts * @Description: The store of project. */ diff --git a/spx-gui/src/store/modules/sprite/index.ts b/spx-gui/src/store/modules/sprite/index.ts index 78d054884..fff37845a 100644 --- a/spx-gui/src/store/modules/sprite/index.ts +++ b/spx-gui/src/store/modules/sprite/index.ts @@ -1,44 +1,55 @@ +/* + * @Author: Zhang Zhi Yang + * @Date: 2024-02-07 21:43:44 + * @LastEditors: Zhang Zhi Yang + * @LastEditTime: 2024-02-28 14:51:13 + * @FilePath: \spx-gui\src\store\modules\sprite\index.ts + * @Description: + */ import { defineStore, storeToRefs } from 'pinia' import { Sprite } from '@/class/sprite' import { computed, ref } from 'vue' import type { ComputedRef, Ref } from 'vue' import { useProjectStore } from '../index' -export const useSpriteStore = defineStore("sprite", () => { - const projectStore = useProjectStore(); - const { project } = storeToRefs(projectStore); +export const useSpriteStore = defineStore('sprite', () => { + const projectStore = useProjectStore() + const { project } = storeToRefs(projectStore) - const current: Ref = ref(null) + const current: Ref = ref(null) - const list: ComputedRef = computed(() => { - return project.value.sprite.list as Sprite[] - }) + const list: ComputedRef = computed(() => { + return project.value.sprite.list as Sprite[] + }) - const map = computed(() => new Map(list.value.map(item => [item.name, item]))) + const map = computed(() => new Map(list.value.map((item) => [item.name, item]))) - function addItem(item: Sprite){ - project.value.sprite.add(item) - } + function addItem(item: Sprite) { + project.value.sprite.add(item) + project.value.backdrop.config.zorder.push(item.name) + } - function setCurrentByName(name: string) { - if (map.value.has(name)) { - current.value = map.value.get(name) || null - } + function setCurrentByName(name: string) { + if (map.value.has(name)) { + current.value = map.value.get(name) || null } + } - function removeItemByName(name: string) { - const sprite = map.value.get(name) - if (sprite) { - if (current.value === sprite) { - current.value = list.value[0] || null - } - project.value.sprite.remove(sprite) - } + function removeItemByName(name: string) { + const sprite = map.value.get(name) + if (sprite) { + if (current.value === sprite) { + current.value = list.value[0] || null + } + project.value.sprite.remove(sprite) + project.value.backdrop.config.zorder.splice(project.value.backdrop.config.zorder.indexOf(sprite.name), 1) } + } - return { - list, current, - addItem, - setCurrentByName, - removeItemByName - } -}) \ No newline at end of file + return { + list, + current, + addItem, + setCurrentByName, + removeItemByName + } +})