How to move bone correctly?

[ziarmandhost]

My setup: vite + ts + pixi.js v7.4.2 + pixi-spine v4.0.4 I have this code:

import "pixi-spine"
import {Application, Assets, Graphics} from "pixi.js"
import { Spine } from "pixi-spine"
import "./style.css"

const app = new Application<HTMLCanvasElement>({
  resizeTo: document.body,
  eventMode: "static"
})
document.body.appendChild(app.view)

await Assets.load("spineboy-pro.atlas")
await Assets.load("spineboy-pro.png")
await Assets.load("spineboy-pro.json")

let spineboy: Spine
let currentAnimation = {name: "", loop: true}

function createSpineboy () {
  const spineboyAsset = Assets.get("spineboy-pro.json")
  spineboy = new Spine(spineboyAsset.spineData)
  spineboy.x = 500
  spineboy.y = 500

  const scale = 2.5
  spineboy.width = 470 / scale
  spineboy.height = 731 / scale

  app.stage.addChild(spineboy)

  setAnimation("aim")
}

function setAnimation(animationName: string, loop = true) {
  if (currentAnimation.name !== animationName) {
    currentAnimation.name = animationName
    currentAnimation.loop = loop
    spineboy.state.setAnimation(0, animationName, currentAnimation.loop)
  }
}

let obj2 = new Graphics()
obj2.beginFill(0xffff00);
obj2.drawRect(0, 0, 10, 10)
obj2.x = 500
obj2.y = 500
app.stage.addChild(obj2)

app.stage.addEventListener("globalpointermove", e => {
  const mouseWorldPosition = {
    x: e.x,
    y: e.y
  }

  obj2.x = mouseWorldPosition.x
  obj2.y = mouseWorldPosition.y

  const root = spineboy.skeleton.findBone("root")
  const bone = spineboy.skeleton.findBone("crosshair")
  root.worldToLocal(mouseWorldPosition)
  bone.x = mouseWorldPosition.x
  bone.y = mouseWorldPosition.y
})

createSpineboy()

As result spineboy aiming to wrong position:

[ziarmandhost]

Solved! It happens, because of scaling. If you want to scale Spine animation use spineboy.skeleton.scaleX = 1 / 2.5