refactor(spx-gui): refine sprite/widget transformation logic and fix jittering

Author: Overu

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

@@ -44,13 +44,13 @@ function setupKeyboardMovement(stage: Konva.Stage, selectedNode: Node) {
   stage.container().tabIndex = 1
   stage.container().focus()
   stage.container().style.outline = 'none'
-  const keyboardMovementEnd = debounce(() => selectedNode.fire('transformend'), 500)
+  const keyboardMovementEnd = debounce(() => selectedNode.fire('nodeupdated', { evt: { op: 'move' } }), 500)
   const handler = (e: KeyboardEvent) => {
     const idx = keyboardMovementCodes.indexOf(e.code)
     if (idx === -1) return
     selectedNode.x(selectedNode.x() + keyboardMovementOffset[idx][0])
     selectedNode.y(selectedNode.y() + keyboardMovementOffset[idx][1])
-    selectedNode.fire('transform')
+    selectedNode.fire('nodeupdating', { evt: { op: 'move' } })
     e.preventDefault()
     keyboardMovementEnd()
   }

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

@@ -11,6 +11,7 @@ import { normalizeDegree, round, useAsyncComputedLegacy } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
 import { cancelBubble, getNodeId } from './common'
 import type { SpriteLocalConfig } from './quick-config/utils'
+import type { NodeUpdateEvent, TransformOp } from './custom-transformer'
 
 const props = defineProps<{
   sprite: Sprite
@@ -58,101 +59,112 @@ onMounted(() => {
   }
 })
 
-function updateLocalConfig({
-  oldX,
-  x,
-  oldY,
-  y,
-  oldSize,
-  size,
-  oldHeading,
-  heading
-}: {
-  oldX: number
-  x: number
-  oldY: number
-  y: number
-  oldSize: number
-  size: number
-  oldHeading: number
-  heading: number
-}) {
+function updateLocalConfig(
+  {
+    oldX,
+    x,
+    oldY,
+    y,
+    oldSize,
+    size,
+    oldHeading,
+    heading
+  }: {
+    oldX: number
+    x: number
+    oldY: number
+    y: number
+    oldSize: number
+    size: number
+    oldHeading: number
+    heading: number
+  },
+  op: TransformOp
+) {
   const spriteLocalConfig = props.localConfig
   if (spriteLocalConfig == null) return
   if (size !== oldSize) {
-    spriteLocalConfig.setSize(size)
-    return
+    spriteLocalConfig.setSize(size, op === 'scale')
   }
-  if (heading !== oldHeading && spriteLocalConfig.rotationStyle === RotationStyle.Normal) {
-    spriteLocalConfig.setHeading(heading)
-    return
+  if (heading !== oldHeading) {
+    spriteLocalConfig.setHeading(heading, op === 'rotate')
   }
   if (x !== oldX || y !== oldY) {
-    spriteLocalConfig.setX(x)
-    spriteLocalConfig.setY(y)
+    spriteLocalConfig.setX(x, op === 'move')
+    spriteLocalConfig.setY(y, op === 'move')
   }
 }
-function updateLocalConfigByShape(node: Shape | Stage) {
+function updateLocalConfigByShape(node: Shape | Stage, op: TransformOp) {
   if (!props.selected || props.localConfig == null) return
   const { x, y } = toPosition(node)
-  updateLocalConfig({
-    oldX: props.sprite.x,
-    x,
-    oldY: props.sprite.y,
-    y,
-    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,
+      oldSize: props.sprite.size,
+      size: toSize(node),
+      oldHeading: props.sprite.heading,
+      heading: toHeading(node)
+    },
+    op
+  )
 }
 
-function syncLocalConfig({ size, x, y, heading }: { size: number; x: number; y: number; heading: number }) {
+function syncLocalConfig(
+  { size, x, y, heading }: { size: number; x: number; y: number; heading: number },
+  op: TransformOp
+) {
   const spriteLocalConfig = props.localConfig
   if (spriteLocalConfig == null) return
+
   if (size != null && props.sprite.size !== size) {
-    spriteLocalConfig.setSize(size, false)
-    spriteLocalConfig.syncSize()
-    return
+    spriteLocalConfig.setSize(size, op === 'scale')
   }
   if (props.sprite.heading !== heading) {
-    spriteLocalConfig.setHeading(heading, false)
-    spriteLocalConfig.syncHeading()
-    return
+    spriteLocalConfig.setHeading(heading, op === 'rotate')
   }
   if (props.sprite.x !== x || props.sprite.y !== y) {
-    spriteLocalConfig.setX(x, false)
-    spriteLocalConfig.setX(x, false)
-    spriteLocalConfig.syncPos()
+    spriteLocalConfig.setX(x, op === 'move')
+    spriteLocalConfig.setY(y, op === 'move')
   }
+
+  spriteLocalConfig.syncAll()
 }
-function syncLocalConfigByShape(node: Shape | Stage) {
-  syncLocalConfig({
-    size: toSize(node),
-    x: toPosition(node).x,
-    y: toPosition(node).y,
-    heading: toHeading(node)
-  })
+function syncLocalConfigByShape(node: Shape | Stage, op: TransformOp) {
+  syncLocalConfig(
+    {
+      size: toSize(node),
+      x: toPosition(node).x,
+      y: toPosition(node).y,
+      heading: toHeading(node)
+    },
+    op
+  )
 }
 
 function handleDragMove(e: KonvaEventObject<unknown>) {
   cancelBubble(e)
-  updateLocalConfigByShape(e.target)
+  updateLocalConfigByShape(e.target, 'move')
   emit('dragMove', (delta) => {
     // Adjust position if camera scrolled during dragging to keep the sprite visually unmoved
     e.target.x(e.target.x() - delta.x)
     e.target.y(e.target.y() - delta.y)
   })
 }
 
-function handleDragEnd(e: KonvaEventObject<unknown>) {
+function handleDragEnd(e: KonvaEventObject<TransformOp>) {
   cancelBubble(e)
-  syncLocalConfigByShape(e.target)
+  syncLocalConfigByShape(e.target, 'move')
   emit('dragEnd')
 }
 
-function handleTransformed(e: KonvaEventObject<unknown>) {
-  syncLocalConfigByShape(e.target)
+function handleNodeUpdating(e: KonvaEventObject<NodeUpdateEvent>) {
+  updateLocalConfigByShape(e.target, e.evt.op)
+}
+function handleNodeUpdated(e: KonvaEventObject<NodeUpdateEvent>) {
+  syncLocalConfigByShape(e.target, e.evt.op)
 }
 
 const config = computed<ImageConfig>(() => {
@@ -214,8 +226,8 @@ function handleClick() {
     :config="config"
     @dragmove="handleDragMove"
     @dragend="handleDragEnd"
-    @transform="updateLocalConfigByShape($event.target)"
-    @transformend="handleTransformed"
+    @nodeupdating="handleNodeUpdating"
+    @nodeupdated="handleNodeUpdated"
     @click="handleClick"
   />
 </template>

spx-gui/src/components/editor/common/viewer/custom-transformer/index.ts

@@ -19,10 +19,34 @@ transformerFlipArrowDisabledImg.src = transformerFlipArrowDisabledPng
 const rotatorCircleImg = new Image()
 rotatorCircleImg.src = rotatorCirclePng
 
+export type TransformOp = 'rotate' | 'scale' | 'move' | 'flip'
+
+export type NodeUpdateEvent = {
+  op: TransformOp
+}
+
 export type CustomTransformerConfig = {
   rotationStyle?: 'none' | 'normal' | 'left-right'
 } & Pick<TransformerConfig, 'centeredScaling'>
 
+const scaleAnchors = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'middle-left',
+  'middle-right',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right'
+]
+function getTransformOp(transformer: Konva.Transformer): TransformOp | null {
+  const activeAnchor = transformer.getActiveAnchor()
+  if (activeAnchor == null) return null
+  if (scaleAnchors.includes(activeAnchor)) return 'scale'
+  if (activeAnchor === 'rotater') return 'rotate'
+  return null
+}
+
 class RotatorTag extends Konva.Group {
   text: Konva.Text
   constructor() {
@@ -200,7 +224,7 @@ export class CustomTransformer extends Konva.Transformer {
       // as it decides the flip based on the rotation only.
       node.scaleY(node.scaleY() * -1)
       node.rotation(node.rotation() - 180)
-      node._fire('transformend', { target: node })
+      node._fire('nodeupdated', { target: node, evt: { op: 'flip' } })
     })
 
     const right = new FlipButton('right')
@@ -237,10 +261,17 @@ export class CustomTransformer extends Konva.Transformer {
       // Konva.Transformer resets the pointer to '', and we need to override that.
       setCursor('grabbing')
     })
+    this.on('transform', () => {
+      const node = this._nodes[0]
+      node._fire('nodeupdating', { target: node, evt: { op: getTransformOp(this) } })
+    })
     this.on('transformend', () => {
       this.rotatorTag.visible(false)
       setCursor('')
       dragging = false
+
+      const node = this._nodes[0]
+      node._fire('nodeupdated', { target: node, evt: { op: getTransformOp(this) } })
     })
     this.on('rotationStyleChange', () => {
       this.update()

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

@@ -59,7 +59,7 @@ function moveZorder(action: MoveAction) {
 
 <style lang="scss" scoped>
 .item {
-  width: max-content;
+  width: 100%;
   white-space: nowrap;
 }
 </style>

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

@@ -39,17 +39,16 @@ const rotationStyleTips = {
 
 function handleRotationStyleUpdate(style: RotationStyle) {
   const localConfig = props.localConfig
-  localConfig.syncToSprite((sprite) => {
-    sprite.setRotationStyle(style)
-    if (style === RotationStyle.None) {
-      sprite.setHeading(90)
-    }
-    if (style === RotationStyle.LeftRight) {
-      // normalize heading to 90 / -90
-      const normalizedHeading = leftRightToHeading(headingToLeftRight(sprite.heading))
-      sprite.setHeading(normalizedHeading)
-    }
-  })
+  localConfig.setRotationStyle(style, false)
+  if (style === RotationStyle.None) {
+    localConfig.setHeading(90, false)
+  }
+  if (style === RotationStyle.LeftRight) {
+    // normalize heading to 90 / -90
+    const normalizedHeading = leftRightToHeading(headingToLeftRight(localConfig.heading))
+    localConfig.setHeading(normalizedHeading, false)
+  }
+  localConfig.syncAll()
 }
 
 async function moveZorder(direction: MoveAction) {

spx-gui/src/components/editor/common/viewer/quick-config/utils.ts

@@ -70,6 +70,12 @@ export class LocalConfig extends Disposable {
   }
 }
 
+// TODO: Temporary workaround: when rotating or scaling a Sprite/Widget, jittering may occur and cause position changes, which might trigger the 'pos' panel.
+// This fix has a limitation: if the current panel is 'rotate', it might not switch to the expected 'pos' panel after updating the Sprite/Widget.
+function shouldUpdatePosConfigType(configType: ConfigType | undefined) {
+  return configType != null && !['size', 'rotate'].includes(configType)
+}
+
 export class SpriteLocalConfig extends LocalConfig {
   constructor(
     private sprite: Sprite,
@@ -86,14 +92,14 @@ export class SpriteLocalConfig extends LocalConfig {
     this.addDisposer(
       watch(
         () => sprite.x,
-        (x, old) => this.setX(x, old != null),
+        (x, old) => this.setX(x, old != null && shouldUpdatePosConfigType(this.configTypes.at(-1))),
         { immediate: true }
       )
     )
     this.addDisposer(
       watch(
         () => sprite.y,
-        (y, old) => this.setY(y, old != null),
+        (y, old) => this.setY(y, old != null && shouldUpdatePosConfigType(this.configTypes.at(-1))),
         { immediate: true }
       )
     )
@@ -133,9 +139,13 @@ export class SpriteLocalConfig extends LocalConfig {
   }
   syncRotationStyle = this.doAction(() => this.sprite.setRotationStyle(this.rotationStyle))
 
-  syncToSprite(updater: (sprite: Sprite) => void) {
-    return this.doAction(() => updater(this.sprite), false)()
-  }
+  syncAll = this.doAction(() => {
+    this.sprite.setSize(this.size)
+    this.sprite.setX(this.x)
+    this.sprite.setY(this.y)
+    this.sprite.setHeading(this.heading)
+    this.sprite.setRotationStyle(this.rotationStyle)
+  })
 }
 
 export class WidgetLocalConfig extends LocalConfig {
@@ -148,14 +158,14 @@ export class WidgetLocalConfig extends LocalConfig {
     this.addDisposer(
       watch(
         () => widget.x,
-        (x, old) => this.setX(x, old != null),
+        (x, old) => this.setX(x, old != null && shouldUpdatePosConfigType(this.configTypes.at(-1))),
         { immediate: true }
       )
     )
     this.addDisposer(
       watch(
         () => widget.y,
-        (y, old) => this.setY(y, old != null),
+        (y, old) => this.setY(y, old != null && shouldUpdatePosConfigType(this.configTypes.at(-1))),
         { immediate: true }
       )
     )
@@ -167,4 +177,10 @@ export class WidgetLocalConfig extends LocalConfig {
       )
     )
   }
+
+  syncAll = this.doAction(() => {
+    this.widget.setSize(this.size)
+    this.widget.setX(this.x)
+    this.widget.setY(this.y)
+  })
 }