-
show in stage viewer
-
-
-
active in stage
@@ -27,7 +20,7 @@
:style="sprite.config.costumeIndex === costumeIndex ? { color: 'red' } : {}"
@click="() => sprite.config.costumeIndex = costumeIndex">{{ costume.name }}
-
@@ -84,7 +77,7 @@
@update:value="(val) => { currentSprite && currentSprite.setCy(val as number) }">
{ currentSprite && currentSprite.setVisible(val) }" />
-
@@ -92,7 +85,7 @@
import { NInputNumber, NSwitch } from "naive-ui";
import type { Sprite } from "@/class/sprite";
import StageViewer from "../stage-viewer";
-import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent } from "../stage-viewer"
+import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent, SelectedSpriteChangeEvent } from "../stage-viewer"
import { useProjectStore } from "@/store/modules/project";
import type { Project } from "@/class/project";
import { storeToRefs } from "pinia";
@@ -102,7 +95,7 @@ const projectStore = useProjectStore();
const { project } = storeToRefs(projectStore);
const currentSprite = ref
(null);
-const currentSpriteNames = ref([])
+const selectedSpriteNames = ref([])
// current sprite config
const x = computed(() => currentSprite.value ? currentSprite.value.config.x : 0)
@@ -128,20 +121,26 @@ const zorderList = computed(() => {
return project.value.backdrop.config.zorder
})
-watch(() => project.value.id, () => {
- currentSpriteNames.value = project.value.sprite.list.map(sprite => sprite.name)
-})
+// watch(() => project.value.id, () => {
+// currentSpriteNames.value = project.value.sprite.list.map(sprite => sprite.name)
+// })
// accept the new sprite position config when dragend from stage viewer
-const onDragEnd = (e: SpriteDragEndEvent) => {
- currentSprite.value = project.value.sprite.list.find(sprite => sprite.name === e.targets[0].sprite.name) as Sprite
- currentSprite.value?.setSx(e.targets[0].position.x)
- currentSprite.value?.setSy(e.targets[0].position.y)
-}
-
-// accept the new zorder configuration from stage viewer
-const onZorderChange = (e: ZorderChangeEvent) => {
- project.value.backdrop.config.zorder = e.zorder
+// const onDragEnd = (e: SpriteDragEndEvent) => {
+// currentSprite.value = project.value.sprite.list.find(sprite => sprite.name === e.targets[0].sprite.name) as Sprite
+// currentSprite.value?.setSx(e.targets[0].position.x)
+// currentSprite.value?.setSy(e.targets[0].position.y)
+// }
+
+// // accept the new zorder configuration from stage viewer
+// const onZorderChange = (e: ZorderChangeEvent) => {
+// project.value.backdrop.config.zorder = e.zorder
+// }
+
+const onSelectedSpriteChange = (e: SelectedSpriteChangeEvent) => {
+ selectedSpriteNames.value = e.names
+ console.log(e.names)
+ currentSprite.value = project.value.sprite.list.find(sprite => sprite.name === e.names[0]) as Sprite
}
// import file
@@ -157,13 +156,7 @@ const spriteToTop = (index: number) => {
zorderList.value.push(spriteToMove);
}
-// choose the sprite to show in stage
-const toggleShowInStage = (name: string) => {
- currentSpriteNames.value =
- currentSpriteNames.value.includes(name) ?
- currentSpriteNames.value.filter(_name => _name !== name)
- : [...currentSpriteNames.value, name]
-}
+
// choose the scene to show in stage
// in spx project the first scene will be shown in stage
diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
index e21730f25..72ffbe248 100644
--- a/spx-gui/src/components/stage-viewer/Costume.vue
+++ b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -2,43 +2,50 @@
* @Author: Zhang Zhi Yang
* @Date: 2024-01-25 14:19:57
* @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 14:17:43
- * @FilePath: /spx-gui/src/components/stage-viewer/Costume.vue
+ * @LastEditTime: 2024-02-21 17:26:41
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/Costume.vue
* @Description:
-->
diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
index 665d1cfe9..c6d4179e0 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,8 +2,8 @@
* @Author: Zhang Zhi Yang
* @Date: 2024-01-25 16:13:37
* @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 15:04:03
- * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
+ * @LastEditTime: 2024-02-21 17:41:06
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/SpriteLayer.vue
* @Description:
-->
@@ -12,9 +12,9 @@
x: props.offsetConfig.offsetX,
y: props.offsetConfig.offsetY
}">
-
-
+
+
@@ -22,22 +22,66 @@
// ----------Import required packages / components-----------
import type { StageSprite, MapConfig, SpriteDragEndTarget, SpriteDragEndEvent } from ".";
import Sprite from "./Sprite.vue"
+import type { Sprite as SpriteConfig } from "@/class/sprite"
import { computed } from "vue";
+import type { ComputedRef } from "vue"
const props = defineProps<{
offsetConfig: { offsetX: number, offsetY: number },
mapConfig: MapConfig
- sprites: StageSprite[]
- currentSpriteNames: string[]
+ spriteList: SpriteConfig[]
+ zorder: string[]
}>()
-const isVisibleInStage = (sprite: StageSprite) => {
- return props.currentSpriteNames.includes(sprite.name) && sprite.visible
-}
+const sortedSprites = computed(() => {
+ const spriteMap = new Map();
+ props.spriteList.forEach(sprite => {
+ spriteMap.set(sprite.name, sprite);
+ })
+ const list: SpriteConfig[] = []
+ props.zorder.forEach(name => {
+ if (spriteMap.has(name)) {
+ list.push(spriteMap.get(name) as SpriteConfig);
+ }
+ })
+ return list;
+})
+
+// get sprites for stage sort by zorder
+const sprites: ComputedRef = computed(() => {
+ const spriteMap = new Map();
+ props.spriteList.forEach(sprite => {
+ const stageSprite: StageSprite = {
+ name: sprite.name,
+ x: sprite.config.x,
+ y: sprite.config.y,
+ heading: sprite.config.heading,
+ size: sprite.config.size,
+ visible: sprite.config.visible,
+ costumes: sprite.config.costumes.map((costume, index) => {
+ return {
+ name: costume.name as string,
+ url: sprite.files[index].url as string,
+ x: costume.x,
+ y: costume.y,
+ };
+ }),
+ costumeIndex: sprite.config.costumeIndex,
+ };
+ spriteMap.set(sprite.name, stageSprite);
+ });
+ const list: StageSprite[] = []
+ props.zorder.forEach(name => {
+ if (spriteMap.has(name)) {
+ list.push(spriteMap.get(name) as StageSprite);
+ }
+ })
+ return list;
+})
// ----------methods-----------------------------------------
const emits = defineEmits<{
- (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
+ (e: 'onSpritesDragEnd', value: { spriteList: SpriteConfig[] }): void
}>()
/**
@@ -47,9 +91,9 @@ const emits = defineEmits<{
* @Author: Zhang Zhi Yang
* @Date: 2024-01-25 15:47:53
*/
-const onSpriteDragEnd = (e: SpriteDragEndTarget) => {
+const onSpriteDragEnd = (e: { sprite: SpriteConfig }) => {
emits('onSpritesDragEnd', {
- targets: [e]
+ spriteList: [e.sprite]
})
}
\ No newline at end of file
diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
index a174d4ab5..c81ba7fcc 100644
--- a/spx-gui/src/components/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/stage-viewer/StageViewer.vue
@@ -2,8 +2,8 @@
* @Author: Zhang Zhi Yang
* @Date: 2024-02-05 14:09:40
* @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 16:07:46
- * @FilePath: /spx-gui/src/components/stage-viewer/StageViewer.vue
+ * @LastEditTime: 2024-02-21 18:35:36
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/StageViewer.vue
* @Description:
-->
@@ -14,7 +14,7 @@
top
bottom
+ }" :spriteList="props.project.sprite.list" :zorder="props.project.backdrop.config.zorder"
+ :mapConfig="spxMapConfig" />
+