forked from goplus/builder
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:zorder update when sprite's add/remove
- Loading branch information
1 parent
01fba7f
commit fc192ab
Showing
4 changed files
with
57 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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. | ||
*/ | ||
|
||
|
@@ -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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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', () => { | ||
|
@@ -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 | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
*/ | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} | ||
}) |