refactor(spx-gui): move quick-config panels and improve monitor node sync

Author: Overu

spx-gui/src/components/editor/common/viewer/SpriteNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import type { Stage } from 'konva/lib/Stage'
 import type { Shape } from 'konva/lib/Shape'
 import type { KonvaEventObject } from 'konva/lib/Node'
@@ -10,9 +10,11 @@ import type { Size } from '@/models/common'
 import { normalizeDegree, round, useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 import { cancelBubble, getNodeId } from './common'
+import type { SpriteLocalConfig } from './quick-config/utils'
 
 const props = defineProps<{
   sprite: Sprite
+  localConfig: SpriteLocalConfig | null
   selected: boolean
   project: Project
   mapSize: Size
@@ -28,12 +30,6 @@ const emit = defineEmits<{
   selected: []
   dragMove: [notifyCameraScroll: CameraScrollNotifyFn]
   dragEnd: []
-  updatePos: [{ x: number; y: number }]
-  updatePosEnd: [{ x: number; y: number }]
-  updateHeading: [{ heading: number; leftRight?: LeftRight }]
-  updateHeadingEnd: [{ heading: number; leftRight?: LeftRight }]
-  updateSize: [{ size: number }]
-  updateSizeEnd: [{ size: number }]
 }>()
 
 const nodeRef = ref<KonvaNodeInstance<Image>>()
@@ -62,75 +58,86 @@ onMounted(() => {
   }
 })
 
-function updateSprite({
-  oldSize,
-  size,
-  oldHeading,
-  heading,
+function updateLocalConfig({
   oldX,
   x,
   oldY,
   y,
-  isEnd = false
+  oldSize,
+  size,
+  oldHeading,
+  heading
 }: {
-  oldSize: number
-  size: number
-  oldHeading: number
-  heading: number
   oldX: number
   x: number
   oldY: number
   y: number
-  isEnd?: boolean
+  oldSize: number
+  size: number
+  oldHeading: number
+  heading: number
 }) {
-  if (oldSize !== size) {
-    if (isEnd) {
-      emit('updateSizeEnd', { size })
-    } else {
-      emit('updateSize', { size })
-    }
+  const spriteLocalConfig = props.localConfig
+  if (spriteLocalConfig == null) return
+  if (size !== oldSize) {
+    spriteLocalConfig.setSize(size)
     return
   }
-  if (oldHeading !== heading && props.sprite.rotationStyle !== RotationStyle.None) {
-    let leftRight: LeftRight | undefined = undefined
-    if (props.sprite.rotationStyle === RotationStyle.LeftRight) {
-      leftRight = headingToLeftRight(heading)
-    }
-    if (isEnd) {
-      emit('updateHeadingEnd', { heading, leftRight })
-    } else {
-      emit('updateHeading', { heading, leftRight })
-    }
+  if (heading !== oldHeading && spriteLocalConfig.rotationStyle === RotationStyle.Normal) {
+    spriteLocalConfig.setHeading(heading)
     return
   }
-  if (oldX !== x || oldY !== y) {
-    if (isEnd) {
-      emit('updatePosEnd', { x, y })
-    } else {
-      emit('updatePos', { x, y })
-    }
+  if (x !== oldX || y !== oldY) {
+    spriteLocalConfig.setX(x)
+    spriteLocalConfig.setY(y)
   }
 }
-
-const notifyUpdateSprite = (node: Shape | Stage, isEnd = false) => {
-  if (!props.selected) return
+function updateLocalConfigByShape(node: Shape | Stage) {
+  if (!props.selected || props.localConfig == null) return
   const { x, y } = toPosition(node)
-  updateSprite({
-    oldSize: props.sprite.size,
-    size: toSize(node),
-    oldHeading: props.sprite.heading,
-    heading: toHeading(node),
+  updateLocalConfig({
     oldX: props.sprite.x,
     x,
     oldY: props.sprite.y,
     y,
-    isEnd
+    oldSize: props.sprite.size,
+    size: toSize(node),
+    oldHeading: props.sprite.heading,
+    heading: toHeading(node)
+  })
+}
+
+function syncLocalConfig({ size, x, y, heading }: { size: number; x: number; y: number; heading: number }) {
+  const spriteLocalConfig = props.localConfig
+  if (spriteLocalConfig == null) return
+  if (size != null && props.sprite.size !== size) {
+    spriteLocalConfig.setSize(size, false)
+    spriteLocalConfig.syncSize()
+    return
+  }
+  if (props.sprite.heading !== heading) {
+    spriteLocalConfig.setHeading(heading, false)
+    spriteLocalConfig.syncHeading()
+    return
+  }
+  if (props.sprite.x !== x || props.sprite.y !== y) {
+    spriteLocalConfig.setX(x, false)
+    spriteLocalConfig.setX(x, false)
+    spriteLocalConfig.syncPos()
+  }
+}
+function syncLocalConfigByShape(node: Shape | Stage) {
+  syncLocalConfig({
+    size: toSize(node),
+    x: toPosition(node).x,
+    y: toPosition(node).y,
+    heading: toHeading(node)
   })
 }
 
 function handleDragMove(e: KonvaEventObject<unknown>) {
   cancelBubble(e)
-  notifyUpdateSprite(e.target)
+  updateLocalConfigByShape(e.target)
   emit('dragMove', (delta) => {
     // Adjust position if camera scrolled during dragging to keep the sprite visually unmoved
     e.target.x(e.target.x() - delta.x)
@@ -140,12 +147,12 @@ function handleDragMove(e: KonvaEventObject<unknown>) {
 
 function handleDragEnd(e: KonvaEventObject<unknown>) {
   cancelBubble(e)
-  notifyUpdateSprite(e.target, true)
+  syncLocalConfigByShape(e.target)
   emit('dragEnd')
 }
 
 function handleTransformed(e: KonvaEventObject<unknown>) {
-  notifyUpdateSprite(e.target, true)
+  syncLocalConfigByShape(e.target)
 }
 
 const config = computed<ImageConfig>(() => {
@@ -177,27 +184,6 @@ const config = computed<ImageConfig>(() => {
   return config
 })
 
-// After Sprite changes, updateXXX events also need to be triggered
-watch(config, () => {
-  const node = nodeRef.value?.getNode()
-  if (node != null) {
-    const { x, y, heading, size } = props.sprite
-    const { x: oldX, y: oldY } = toPosition(node)
-    const oldHeading = toHeading(node)
-    const oldSize = toSize(node)
-    updateSprite({
-      oldSize,
-      size,
-      oldHeading,
-      heading,
-      oldX,
-      x,
-      oldY,
-      y
-    })
-  }
-})
-
 function toPosition(node: Shape | Stage) {
   const { mapSize } = props
   const x = round(node.x() - mapSize.width / 2)
@@ -228,7 +214,7 @@ function handleClick() {
     :config="config"
     @dragmove="handleDragMove"
     @dragend="handleDragEnd"
-    @transform="notifyUpdateSprite($event.target)"
+    @transform="updateLocalConfigByShape($event.target)"
     @transformend="handleTransformed"
     @click="handleClick"
   />

spx-gui/src/components/editor/common/viewer/quick-config/SpriteQuickConfig.vue

@@ -2,36 +2,27 @@
 import { inject, watch } from 'vue'
 
 import DefaultConfigPanel from './sprite/DefaultConfigPanel.vue'
-import { RotationStyle, type Sprite } from '@/models/sprite'
+import { RotationStyle } from '@/models/sprite'
 import type { Project } from '@/models/project'
-import SizeConfigPanel from './sprite/SizeConfigPanel.vue'
+import SizeConfigPanel from './common/SizeConfigPanel.vue'
 import HeadingConfigPanel from './sprite/HeadingConfigPanel.vue'
-import PositionConfigPanel from './sprite/PositionConfigPanel.vue'
+import PositionConfigPanel from './common/PositionConfigPanel.vue'
 import { configTypeInjectionKey, updateConfigTypesInjectionKey } from './QuickConfigWrapper.vue'
+import type { SpriteLocalConfig } from './utils'
 
 const props = defineProps<{
-  sprite: Sprite
+  localConfig: SpriteLocalConfig
   project: Project
-  size?: number
-  heading?: number
-  x?: number
-  y?: number
-}>()
-
-defineEmits<{
-  'update:size': [{ size: number }]
-  'update:heading': [{ heading: number }]
-  'update:pos': [{ x: number; y: number }]
 }>()
 
 const configType = inject(configTypeInjectionKey)
 const update = inject(updateConfigTypesInjectionKey)
 
 watch(
-  () => props.sprite.rotationStyle,
+  () => props.localConfig.rotationStyle,
   () => {
     // If the selected sprite's rotationStyle is LeftRight, it needs to be restored to default immediately
-    if (props.sprite.rotationStyle === RotationStyle.LeftRight) {
+    if (props.localConfig.rotationStyle === RotationStyle.LeftRight) {
       update?.(['default'])
     }
   }
@@ -40,26 +31,10 @@ watch(
 
 <template>
   <template v-if="configType != null">
-    <SizeConfigPanel
-      v-if="configType === 'size' && size != null"
-      :sprite="sprite"
-      :size="size"
-      @update:size="$emit('update:size', $event)"
-    />
-    <HeadingConfigPanel
-      v-else-if="configType === 'rotate' && heading != null"
-      :sprite="sprite"
-      :heading="heading"
-      @update:heading="$emit('update:heading', $event)"
-    />
-    <PositionConfigPanel
-      v-else-if="configType === 'pos' && x != null && y != null"
-      :sprite="sprite"
-      :x="x"
-      :y="y"
-      @update:pos="$emit('update:pos', $event)"
-    />
-    <DefaultConfigPanel v-else-if="configType === 'default'" :sprite="sprite" :project="project" />
+    <SizeConfigPanel v-if="configType === 'size'" name="sprite" :local-config="localConfig" />
+    <HeadingConfigPanel v-else-if="configType === 'rotate'" :local-config="localConfig" />
+    <PositionConfigPanel v-else-if="configType === 'pos'" name="sprite" :local-config="localConfig" />
+    <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
   </template>
 </template>
 

spx-gui/src/components/editor/common/viewer/quick-config/WidgetQuickConfig.vue

@@ -3,43 +3,24 @@ import { inject } from 'vue'
 
 import type { Project } from '@/models/project'
 import { configTypeInjectionKey } from './QuickConfigWrapper.vue'
-import type { Widget } from '@/models/widget'
 import DefaultConfigPanel from './widget/DefaultConfigPanel.vue'
-import SizeConfigPanel from './widget/SizeConfigPanel.vue'
-import PositionConfigPanel from './widget/PositionConfigPanel.vue'
+import SizeConfigPanel from './common/SizeConfigPanel.vue'
+import PositionConfigPanel from './common/PositionConfigPanel.vue'
+import type { WidgetLocalConfig } from './utils'
 
 defineProps<{
-  widget: Widget
+  localConfig: WidgetLocalConfig
   project: Project
-  size?: number
-  x?: number
-  y?: number
-}>()
-
-defineEmits<{
-  'update:size': [{ size: number }]
-  'update:pos': [{ x: number; y: number }]
 }>()
 
 const configType = inject(configTypeInjectionKey)
 </script>
 
 <template>
   <template v-if="configType != null">
-    <SizeConfigPanel
-      v-if="configType === 'size' && size != null"
-      :widget="widget"
-      :size="size"
-      @update:size="$emit('update:size', $event)"
-    />
-    <PositionConfigPanel
-      v-else-if="configType === 'pos' && x != null && y != null"
-      :widget="widget"
-      :x="x"
-      :y="y"
-      @update:pos="$emit('update:pos', $event)"
-    />
-    <DefaultConfigPanel v-else-if="configType === 'default'" :widget="widget" :project="project" />
+    <SizeConfigPanel v-if="configType === 'size'" name="monitor" :local-config="localConfig" />
+    <PositionConfigPanel v-else-if="configType === 'pos'" name="monitor" :local-config="localConfig" />
+    <DefaultConfigPanel v-else-if="configType === 'default'" :local-config="localConfig" :project="project" />
   </template>
 </template>
 

spx-gui/src/components/editor/common/viewer/quick-config/common/PositionConfigPanel.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { UINumberInput } from '@/components/ui'
+import ConfigPanel from '../common/ConfigPanel.vue'
+import type { LocalConfig } from '../utils'
+
+const props = defineProps<{
+  name: 'sprite' | 'monitor'
+  localConfig: LocalConfig
+}>()
+
+function handleUpdateX(x: number) {
+  props.localConfig.setX(x)
+  props.localConfig.syncSize()
+}
+function handleUpdateY(y: number) {
+  props.localConfig.setY(y)
+  props.localConfig.syncSize()
+}
+</script>
+
+<template>
+  <ConfigPanel>
+    <div class="position-config-wrapper">
+      <UINumberInput
+        v-radar="{ name: 'X position input', desc: `Input to set ${name} X position` }"
+        :value="localConfig.x"
+        @update:value="handleUpdateX($event ?? 0)"
+      >
+        <template #prefix>X</template>
+      </UINumberInput>
+      <UINumberInput
+        v-radar="{ name: 'Y position input', desc: `Input to set ${name} Y position` }"
+        :value="localConfig.y"
+        @update:value="handleUpdateY($event ?? 0)"
+      >
+        <template #prefix>Y</template>
+      </UINumberInput>
+    </div>
+  </ConfigPanel>
+</template>
+
+<style lang="scss" scoped>
+.position-config-wrapper {
+  display: flex;
+  gap: 4px;
+  width: 158px;
+}
+</style>