fix: progressive render error. fix#4578

common/changes/@visactor/vchart/fix-process-render-bug_2026-05-12-06-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: prcoess render error. fix#4578",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/__tests__/unit/mark/area.test.ts

@@ -0,0 +1,46 @@
+import { markContext as ctx } from '../../util/context';
+import { AreaMark } from '../../../src/mark/area';
+
+describe('Area Mark', () => {
+  it('should not mutate existing progressive segments in place', () => {
+    const areaMark = new AreaMark('area1', ctx);
+    areaMark.created();
+
+    (areaMark as any).renderContext = {
+      progressive: {
+        currentIndex: 1
+      }
+    };
+    (areaMark as any)._keyGetter = (datum: any) => datum.x;
+
+    const existingSegments = [
+      {
+        points: [{ x: 0, y: 0, y1: 100 }]
+      }
+    ];
+    const graphic = {
+      attribute: {
+        segments: existingSegments
+      },
+      context: {
+        data: [
+          { x: 1, y: 10, y1: 100 },
+          { x: 2, y: 20, y1: 100 }
+        ]
+      }
+    };
+
+    const result = (areaMark as any)._runPointsEncoder(
+      {
+        x: (datum: any) => datum.x,
+        y: (datum: any) => datum.y,
+        y1: (datum: any) => datum.y1
+      },
+      graphic
+    );
+
+    expect(existingSegments).toHaveLength(1);
+    expect(result.segments).toHaveLength(2);
+    expect(result.segments).not.toBe(existingSegments);
+  });
+});

packages/vchart/__tests__/unit/mark/line.test.ts

@@ -53,6 +53,47 @@ describe('Line Mark', () => {
     expect((lineMark4 as any)._segmentStyleKeys.length).toBe(0);
   });
 
+  it('should not mutate existing progressive segments in place', () => {
+    const lineMark = new LineMark('line1', ctx);
+    lineMark.created();
+
+    (lineMark as any).renderContext = {
+      progressive: {
+        currentIndex: 1
+      }
+    };
+    (lineMark as any)._keyGetter = (datum: any) => datum.x;
+
+    const existingSegments = [
+      {
+        points: [{ x: 0, y: 0 }]
+      }
+    ];
+    const graphic = {
+      attribute: {
+        segments: existingSegments
+      },
+      context: {
+        data: [
+          { x: 1, y: 10 },
+          { x: 2, y: 20 }
+        ]
+      }
+    };
+
+    const result = (lineMark as any)._runPointsEncoder(
+      {
+        x: (datum: any) => datum.x,
+        y: (datum: any) => datum.y
+      },
+      graphic
+    );
+
+    expect(existingSegments).toHaveLength(1);
+    expect(result.segments).toHaveLength(2);
+    expect(result.segments).not.toBe(existingSegments);
+  });
+
   // FIXME: 'fill' does not exist in type 'IMarkSpec<ILineMarkSpec>'
   // it('ignoreAttributes', () => {
   //   const lineMark = new LineMark('line', ctx);

packages/vchart/src/mark/base/base-line.ts

@@ -171,7 +171,7 @@ export abstract class BaseLineMark<T extends ILineLikeMarkSpec = ILineLikeMarkSp
     });
 
     if (progressive) {
-      const segments = (g as any).attribute?.segments ?? [];
+      const segments = (g as any).attribute?.segments ? [...(g as any).attribute.segments] : [];
 
       segments.push({
         points