BUG: 图形调用方法setPosition后，图形style中的x和y没有被同步更新

[zhe-he]

因为 #2064 的原因 ，我只能手写导出导出方法，我发现了调用setPosition的问题。示例代码如下：

import { DisplayObject } from "@antv/g";
DisplayObject.prototype.toJSON = function () {
    const { x, y } = this.style;
    console.log(x, y);
};
const rect = new Rect({
            style: {
                x: 10,
                y: 10,
                width: 300,
                height: 200,
                fill: "#1890FF",
                stroke: "#F04864",
                lineWidth: 4,
                radius: 8,
            }
 });
rect.style.x = 1;
rect.setPosition(111, 222);
rect.style.y = 3;
console.log(rect.style.x); // 应该打印 111，此处打印的是 1
console.log(rect.style.y); // 打印为 3，无错误
// rect.toJSON();

[github-actions]

Based on the provided bug report, here's the analysis:

Title: BUG: 图形调用方法setPosition后，图形style中的x和y没有被同步更新

Body:

• The issue is described as a problem with the setPosition method not updating the x and y properties of the style object.
• The expected behavior is that rect.style.x should be updated to 111 and rect.style.y should be updated to 222 after calling rect.setPosition(111, 222).
• The actual behavior is that rect.style.x is still 1 and rect.style.y is still 3.
• The report includes a code snippet demonstrating the issue.
• The report also mentions that the issue is related to a previous issue (图形如何导出和导入？ #2064), but this information is not directly relevant to the current bug report.

[github-actions]

@zhe-he Hello! Here is an automated response to your question:

---

👋 Thank you for your report

Issue Summary

You observed that after calling setPosition(x, y) on a graphic object (e.g., Rect), the style.x and style.y properties are not updated accordingly. For example:

rect.setPosition(111, 222);
console.log(rect.style.x); // Prints 1, expected 111
console.log(rect.style.y); // Prints 3, expected 222

Root Cause & Explanation

In G.js, setPosition(x, y) modifies the object's transform/position in the local/world coordinate system. However, it does not synchronize these values back to style.x and style.y. The style properties (x, y) are for initial geometry setup, while transformations (including position changes) are managed separately.

• style.x & style.y: Define the object's base geometry (e.g., for a Rect, the initial top-left corner).
• setPosition(x, y): Sets the object's position relative to its parent/container, independent of its style properties.

This separation is by design, similar to how SVG and DOM elements handle geometry vs. transformation.

How to Get the Correct Position

To reliably get the current position after transformations, use the API below:

const [x, y] = rect.getLocalPosition();
console.log(x, y); // Correctly reflects the result of setPosition

If you want to export the current position, use getLocalPosition() instead of relying on style.x and style.y.

Recommendations

• For serialization/export (e.g., in toJSON): Use getLocalPosition() for position instead of style.x and style.y.
• If you need geometry properties: Continue using style.
• If you need current position after transformations: Use transformation API (getLocalPosition, etc.).

Example

DisplayObject.prototype.toJSON = function () {
  const [x, y] = this.getLocalPosition();
  console.log(x, y); // Correct after setPosition
};

Note: This behavior is consistent with the AntV G design, as referenced in the official documentation.

---

If you have further questions or need an example for exporting full style + transform state, please let us know!

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.