Skip to content

Commit

Permalink
feat:zorder update when sprite's add/remove
Browse files Browse the repository at this point in the history
  • Loading branch information
luoliwoshang committed Feb 28, 2024
1 parent 01fba7f commit fc192ab
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 54 deletions.
12 changes: 8 additions & 4 deletions spx-gui/src/interface/file.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* @Author: TuGitee [email protected]
* @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.
*/

Expand Down Expand Up @@ -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<string|Object>;

/**
* The costume of the backdrop
Expand Down
22 changes: 5 additions & 17 deletions spx-gui/src/store/modules/backdrop/index.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
/*
* @Author: Xu Ning
* @Date: 2024-02-05 17:08:23
* @LastEditors: xuning [email protected]
* @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', () => {
Expand All @@ -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<string | Object>) {
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
}
})
6 changes: 3 additions & 3 deletions spx-gui/src/store/modules/project/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*
* @Author: TuGitee [email protected]
* @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.
*/

Expand Down
71 changes: 41 additions & 30 deletions spx-gui/src/store/modules/sprite/index.ts
Original file line number Diff line number Diff line change
@@ -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<Sprite | null> = ref(null)
const current: Ref<Sprite | null> = ref(null)

const list: ComputedRef<Sprite[]> = computed(() => {
return project.value.sprite.list as Sprite[]
})
const list: ComputedRef<Sprite[]> = 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
}
})
return {
list,
current,
addItem,
setCurrentByName,
removeItemByName
}
})

0 comments on commit fc192ab

Please sign in to comment.