双击组合元素改变组内元素的位置，退出后，操作组合的坐标，渲染发生错乱

[nianxi]

• 问题： 双击组合元素改变组内元素的位置，退出后，操作组合的坐标，渲染发生错乱。

• 截图： 如下所示，双击组合，对组合内的元素做拖动产生位置变化，再用程序对整个组合做左对齐画布的功能，组合的x、y的渲染就发生了错乱，x的值是0，但实际渲染却异常了

[leaferjs]

复现不了，可以提供一个能直接运行、复现的最小示例代码，这种情况一般是给元素的属性设置了一个NaN值造成的，可以监听打印所有元素的属性变化，看看是哪个属性被设置了无效的值。

[nianxi]

@leaferjs 非常感谢您的积极响应与答复，以下是复现截图和具体的demo

一、操作步骤：

1. 框选两个元素，点击"编组"按钮；
2. 对编组后的group元素用鼠标左键双击，进入编辑模式，用鼠标拖动其中一个子元素，然后退出编辑；
3. 点击"与画布左对齐"按钮，group元素错位；

二、复现代码：

<template>
  <div class="btns">
    <button @click="toGroup">编组</button>
    <button @click="alignLeft">与画布左对齐</button>
  </div>
</template>

<script setup lang="ts">
import { App, Frame, Rect, Group } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/viewport'
const app = new App({
  view: window,
  fill: '#333',
  editor: {},
})
const frame = Frame.one({
  x: 80,
  y: 80,
  width: 200,
  height: 200,
  fill: '#333',
  shadow: {
    x: 0,
    y: 0,
    blur: 8,
    color: '#0009',
    scaleFixed: 'zoom-in',
  },
})
const rect1 = new Rect({ editable: true, fill: '#f00', x: 20, y: 20, width: 60, height: 60 })
const rect2 = new Rect({ editable: true, fill: '#0ff', x: 100, y: 100, width: 60, height: 60 })
frame.add(rect1)
frame.add(rect2)
app.tree.add(frame)

//编组
const toGroup = () => {
  const group = new Group({ id: 'my-group', editable: true })
  app.editor.group(group)
}

// 与画布左对齐
const alignLeft = () => {
  const group = frame.children.find((o) => o.id === 'my-group')
  if (!group) return
  group.set({ x: 0 })
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.body {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.btns {
  position: absolute;
  z-index: 1000;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;

  button {
    width: 100px;
    height: 30px;
  }
}
</style>

[leaferjs]

当你操作内部元素移动后，group的内容不再是从x:0开始的，正确的做法：

1. 获取group的内容包围盒 const bounds = group.getBounds('box', 'local')
2. 再将group的x轴内容移动到0, group.move(-bounds.x)

建议阅读一下快速入门的进阶教程，了解一下坐标体系和包围盒知识