fix:controller update correctly when size & heading change (goplus#202)

spx-gui/src/components/stage-viewer/Costume.vue

@@ -3,7 +3,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:19:57
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 20:01:39
+ * @LastEditTime: 2024-03-13 15:08:38
  * @FilePath: \spx-gui\src\components\stage-viewer\Costume.vue
  * @Description: 
 -->
@@ -20,9 +20,10 @@
       offsetX: currentCostume.x,
       offsetY: currentCostume.y,
       scaleX: props.spriteConfig.config.size,
-      scaleY: props.spriteConfig.config.size
+      scaleY: props.spriteConfig.config.size,
+      visible: props.spriteConfig.config.visible
     }"
-    @dragmove="onDragMove"
+    @dragmove="handleDragMove"
     @dragend="handleDragEnd"
   />
 </template>
@@ -31,11 +32,10 @@
 import { defineProps, ref, computed, watch } from 'vue'
 import type { ComputedRef } from 'vue'
 import type { MapConfig } from './common'
-import type { KonvaEventObject } from 'konva/lib/Node'
+import type { KonvaEventObject, Node } from 'konva/lib/Node'
 import type { Sprite as SpriteConfig } from '@/class/sprite'
-import type { SpriteDragMoveEvent } from './common'
+import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent } from './common'
 import type { Costume as CostumeConfig } from '@/interface/file'
-import { Image } from 'konva/lib/shapes/Image'
 import type { Rect } from 'konva/lib/shapes/Rect'
 // ----------props & emit------------------------------------
 const props = defineProps<{
@@ -47,6 +47,7 @@ const props = defineProps<{
 const emits = defineEmits<{
   // when ths costume dragend,emit the sprite position
   (e: 'onDragMove', event: SpriteDragMoveEvent): void
+  (e: 'onApperanceChange', event: SpriteApperanceChangeEvent): void
 }>()
 
 // ----------computed properties-----------------------------
@@ -57,7 +58,7 @@ const currentCostume: ComputedRef<CostumeConfig> = computed(() => {
 
 // ----------data related -----------------------------------
 const image = ref<HTMLImageElement>()
-const costume = ref<Image>()
+const costume = ref()
 // ----------computed properties-----------------------------
 // Computed spx's sprite position to konva's relative position by about changing sprite postion
 const spritePosition = computed(() => {
@@ -69,10 +70,24 @@ const spriteRotation = computed(() => {
   return getRotation(props.spriteConfig.config.heading)
 })
 
+// When the config update,emits the apperance change event
+// TODO: Move to stageviewer to listen for config changes
+watch(
+  () => props.spriteConfig.config,
+  () => {
+    emits('onApperanceChange', {
+      sprite: props.spriteConfig,
+      node: costume.value.getNode() as Node
+    })
+  },
+  {
+    deep: true
+  }
+)
+
 watch(
   () => currentCostume.value,
-  (new_costume, old_costume) => {
-    console.log(new_costume, old_costume)
+  (new_costume) => {
     if (new_costume != null) {
       const _image = new window.Image()
       _image.src = props.spriteConfig.files[props.spriteConfig.config.costumeIndex].url as string
@@ -130,7 +145,9 @@ const getSpxPostion = (x: number, y: number): { x: number; y: number } => {
 }
 const controller = ref<Rect | null>()
 
-const onDragMove = (event: KonvaEventObject<MouseEvent>) => {
+// This function is only used to design communication, 
+// and the actual work of modifying the doms value is placed in the dragend event
+const handleDragMove = (event: KonvaEventObject<MouseEvent>) => {
   emits('onDragMove', {
     event,
     sprite: props.spriteConfig
@@ -150,4 +167,6 @@ const handleDragEnd = (event: { target: { attrs: { x: number; y: number } } }) =
   props.spriteConfig.config.y = position.y
   controller.value = null
 }
+
+
 </script>

spx-gui/src/components/stage-viewer/Sprite.vue

@@ -3,25 +3,29 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-24 15:48:38
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 16:08:46
+ * @LastEditTime: 2024-03-13 14:31:03
  * @FilePath: \spx-gui\src\components\stage-viewer\Sprite.vue
  * @Description: 
 -->
 <template>
   <Costume
+    ref="costume"
     :sprite-config="props.spriteConfig"
     :selected="props.selected"
     :map-config="props.mapConfig"
     @on-drag-move="onDragMove"
+    @on-apperance-change="onApperanceChange"
   >
   </Costume>
 </template>
 <script lang="ts" setup>
 import Costume from './Costume.vue'
-import { defineProps, defineEmits } from 'vue'
+import { defineProps, defineEmits, ref } from 'vue'
 import type { Sprite as SpriteConfig } from '@/class/sprite'
-import type { SpriteDragMoveEvent, MapConfig } from './common'
+import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent, MapConfig } from './common'
 // ----------props & emit------------------------------------
+const costume = ref()
+
 const props = defineProps<{
   spriteConfig: SpriteConfig
   mapConfig: MapConfig
@@ -31,9 +35,14 @@ const props = defineProps<{
 const emits = defineEmits<{
   // when ths costume dragmove,emit the sprite position
   (e: 'onDragMove', event: SpriteDragMoveEvent): void
+  (e: 'onSpriteApperanceChange', event: SpriteApperanceChangeEvent): void
 }>()
 
 const onDragMove = (e: SpriteDragMoveEvent): void => {
   emits('onDragMove', e)
 }
+
+const onApperanceChange = (e: SpriteApperanceChangeEvent): void => {
+  emits('onSpriteApperanceChange', e)
+}
 </script>

spx-gui/src/components/stage-viewer/SpriteLayer.vue

@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-28 15:27:06
+ * @LastEditTime: 2024-03-13 14:32:19
  * @FilePath: \spx-gui\src\components\stage-viewer\SpriteLayer.vue
  * @Description: 
 -->
@@ -16,12 +16,13 @@
     }"
   >
     <template v-for="sprite in sortedSprites" :key="sprite.name">
+      <!-- v-if="sprite.config.visible" -->
       <Sprite
-        v-if="sprite.config.visible"
         :sprite-config="sprite"
         :map-config="props.mapConfig"
         :selected="selectedSpriteNames.includes(sprite.name)"
         @on-drag-move="onSpriteDragMove"
+        @on-sprite-apperance-change="onSpriteApperanceChange"
       >
       </Sprite>
     </template>
@@ -31,7 +32,7 @@
 // ----------Import required packages / components-----------
 import Sprite from './Sprite.vue'
 import { computed } from 'vue'
-import type { SpriteDragMoveEvent, MapConfig } from './common'
+import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent, MapConfig } from './common'
 import type { Sprite as SpriteConfig } from '@/class/sprite'
 
 const props = defineProps<{
@@ -43,6 +44,7 @@ const props = defineProps<{
 }>()
 const emits = defineEmits<{
   (e: 'onSpriteDragMove', event: SpriteDragMoveEvent): void
+  (e: 'onSpriteApperanceChange', event: SpriteApperanceChangeEvent): void
 }>()
 
 // spritelist sort by zorder config
@@ -65,4 +67,8 @@ const sortedSprites = computed(() => {
 const onSpriteDragMove = (e: SpriteDragMoveEvent) => {
   emits('onSpriteDragMove', e)
 }
+
+const onSpriteApperanceChange = (e: SpriteApperanceChangeEvent): void => {
+  emits('onSpriteApperanceChange', e)
+}
 </script>

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-03-04 14:28:08
- * @FilePath: \builder\spx-gui\src\components\stage-viewer\StageViewer.vue
+ * @LastEditTime: 2024-03-13 15:09:57
+ * @FilePath: \spx-gui\src\components\stage-viewer\StageViewer.vue
  * @Description: 
 -->
 <template>
@@ -44,6 +44,7 @@
         :selected-sprite-names="stageSelectSpritesName"
         :map-config="spxMapConfig"
         @on-sprite-drag-move="onSpriteDragMove"
+        @on-sprite-apperance-change="onSpriteApperanceChange"
       />
       <v-layer
         :config="{
@@ -95,7 +96,7 @@ import type { KonvaEventObject, Node } from 'konva/lib/Node'
 import type { Stage } from 'konva/lib/Stage'
 import type { RectConfig } from 'konva/lib/shapes/Rect.js'
 import type { Layer } from 'konva/lib/Layer'
-import type { SpriteDragMoveEvent, MapConfig } from './common'
+import type { SpriteDragMoveEvent, SpriteApperanceChangeEvent, MapConfig } from './common'
 
 // the controller which is top layer,store the corresponding node information and the information of its control node
 interface Controller {
@@ -343,12 +344,28 @@ const showSelectedTranformer = () => {
   }
 }
 
-// update the controller position
 const onSpriteDragMove = (e: SpriteDragMoveEvent) => {
   const controller = selectedControllerMap.value.get(e.sprite.name)
-  if (!controller) return
-  controller.rect.x = e.event.target.attrs.x
-  controller.rect.y = e.event.target.attrs.y
+  if (controller) {
+    updateController(controller as Controller, e.event.target.attrs)
+  }
+}
+
+const onSpriteApperanceChange = (e: SpriteApperanceChangeEvent) => {
+  const controller = selectedControllerMap.value.get(e.sprite.name)
+  if (controller) {
+    updateController(controller as Controller, e.node.attrs)
+  }
+}
+
+const updateController = (controller: Controller, attrs: any) => {
+  controller.rect.x = attrs.x
+  controller.rect.y = attrs.y
+  controller.rect.scaleX = attrs.scaleX
+  controller.rect.scaleY = attrs.scaleY
+  controller.rect.rotation = attrs.rotation
+  controller.rect.offsetX = attrs.offsetX
+  controller.rect.offsetY = attrs.offsetY
 }
 </script>
 <style scoped>

spx-gui/src/components/stage-viewer/common.ts

@@ -1,42 +1,56 @@
-import type { KonvaEventObject } from "konva/lib/Node";
-import type { Sprite } from "@/class/sprite";
-
+/*
+ * @Author: Zhang Zhi Yang
+ * @Date: 2024-03-08 22:15:52
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-03-13 14:04:58
+ * @FilePath: \builder\spx-gui\src\components\stage-viewer\common.ts
+ * @Description:
+ */
+import type { KonvaEventObject, Node } from 'konva/lib/Node'
+import type { Sprite } from '@/class/sprite'
 
 /**
- * @description: Costume 
+ * @description: Costume
  */
 export interface StageCostume {
-    name: string
-    x: number
-    y: number
-    url: string
+  name: string
+  x: number
+  y: number
+  url: string
 }
 
 /**
  * @description: Scene of Backdrop
  */
 export interface StageScene {
-    name: string
-    url: string
+  name: string
+  url: string
 }
 /**
- * @description: Backdrop 
+ * @description: Backdrop
  */
 export interface StageBackdrop {
-    scenes: StageScene[]
-    costumes: StageCostume[]
-    currentCostumeIndex: number
+  scenes: StageScene[]
+  costumes: StageCostume[]
+  currentCostumeIndex: number
 }
 /**
  * @description: Map Config,some spx project havent this config,the stage size will depend on the SceneSize
  */
 export interface MapConfig {
-    width: number
-    height: number
+  width: number
+  height: number
+}
+
+export interface SpriteEvent {
+  sprite: Sprite
 }
 
+export interface SpriteApperanceChangeEvent extends SpriteEvent {
+  sprite: Sprite
+  node: Node
+}
 
-export interface SpriteDragMoveEvent {
-    event: KonvaEventObject<MouseEvent>
-    sprite: Sprite
-}
+export interface SpriteDragMoveEvent extends SpriteEvent {
+  event: KonvaEventObject<MouseEvent>
+}