Fix/fix bug of symbol&auto refresh

packages/vrender-components/src/label/base.ts

@@ -862,7 +862,8 @@ export class LabelBase<T extends BaseLabelAttrs> extends AnimateComponent<T> {
     const relatedGraphic = this.getRelatedGraphic(text.attribute);
     const { enter } = this._animationConfig;
 
-    [text, labelLine].filter(Boolean).forEach(item =>
+    [text, labelLine].filter(Boolean).forEach(item => {
+      item.setFinalAttributes?.(item.attribute);
       item.applyAnimationState(
         ['enter'],
         [
@@ -884,8 +885,8 @@ export class LabelBase<T extends BaseLabelAttrs> extends AnimateComponent<T> {
             }
           }
         ]
-      )
-    );
+      );
+    });
   }
 
   protected _runUpdateAnimation(prevLabel: LabelContent, currentLabel: LabelContent) {

packages/vrender-core/src/core/stage.ts

@@ -590,7 +590,7 @@ export class Stage extends Group implements IStage {
     });
   }
   enableAutoRefresh() {
-    if (this.autoRefresh) {
+    if (this.autoRefresh || this.global.env === 'node') {
       return;
     }
     this.autoRefresh = true;

packages/vrender-core/src/graphic/symbol.ts

@@ -122,6 +122,9 @@ export class Symbol extends Graphic<ISymbolGraphicAttribute> implements ISymbol
     const { size = symbolTheme.size } = attribute;
 
     const symbolClass = this.getParsedPath();
+    if (!symbolClass) {
+      return aabbBounds;
+    }
     symbolClass.bounds(size, aabbBounds);
 
     return aabbBounds;
@@ -136,6 +139,9 @@ export class Symbol extends Graphic<ISymbolGraphicAttribute> implements ISymbol
 
   toCustomPath() {
     const symbolInstance = this.getParsedPath();
+    if (!symbolInstance) {
+      return null;
+    }
     const size = this.attribute.size;
     const x = 0;
     const y = 0;

packages/vrender/__tests__/node/export-image/utils.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+
+/**
+ * 创建导出目录（若不存在则递归创建）
+ * @param {string} dir 目标目录路径
+ */
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+/**
+ * 将 Stage 渲染并导出为 PNG 文件
+ * @param {import('../../cjs/index.js').Stage} stage VRender Stage
+ * @param {string} filePath 输出文件完整路径
+ */
+function renderAndExportPNG(stage, filePath) {
+  stage.render();
+  const buffer = stage.window.getImageBuffer('image/png');
+  fs.writeFileSync(filePath, buffer);
+  stage.release();
+}
+
+module.exports = { ensureDir, renderAndExportPNG };

packages/vrender/__tests__/node/graphic/arc.js

@@ -0,0 +1,27 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createArc } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    { x: 100, y: 100, innerRadius: 20, outerRadius: 40, startAngle: 0, endAngle: Math.PI, fill: '#4a90e2' },
+    { x: 240, y: 100, innerRadius: 10, outerRadius: 50, startAngle: Math.PI / 4, endAngle: (3 * Math.PI) / 2, fill: '#50e3c2' },
+    { x: 380, y: 100, innerRadius: 30, outerRadius: 60, startAngle: 0, endAngle: Math.PI * 2, stroke: '#333', lineWidth: 4 },
+    { x: 100, y: 220, innerRadius: 30, outerRadius: 80, startAngle: 0, endAngle: Math.PI * 2, fill: '#f5a623' },
+    { x: 260, y: 220, innerRadius: 40, outerRadius: 70, startAngle: 0, endAngle: Math.PI, stroke: '#d0021b', lineWidth: 6 },
+    { x: 420, y: 220, innerRadius: 20, outerRadius: 80, startAngle: Math.PI / 2, endAngle: Math.PI * 2, fill: '#7ed321', stroke: '#000', lineWidth: 2 }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createArc(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/arc.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/arc3d.js

@@ -0,0 +1,23 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createArc3d } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    { x: 120, y: 140, innerRadius: 20, outerRadius: 60, startAngle: 0, endAngle: Math.PI, height: 20, fill: '#4a90e2' },
+    { x: 320, y: 140, innerRadius: 10, outerRadius: 50, startAngle: Math.PI / 4, endAngle: (3 * Math.PI) / 2, height: 30, fill: '#50e3c2' }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createArc3d(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/arc3d.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/area.js

@@ -0,0 +1,39 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createArea } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    {
+      points: [
+        { x: 40, y: 100, x1: 40, y1: 180 },
+        { x: 120, y: 80, x1: 120, y1: 180 },
+        { x: 180, y: 140, x1: 180, y1: 180 }
+      ],
+      fill: '#4a90e2'
+    },
+    {
+      points: [
+        { x: 260, y: 120, x1: 260, y1: 220 },
+        { x: 320, y: 60, x1: 320, y1: 220 },
+        { x: 380, y: 160, x1: 380, y1: 220 }
+      ],
+      fill: '#50e3c2',
+      stroke: '#333',
+      lineWidth: 2
+    }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createArea(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/area.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/circle.js

@@ -0,0 +1,27 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createCircle } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    { x: 80, y: 80, radius: 40, startAngle: 0, endAngle: Math.PI * 2, fill: '#4a90e2' },
+    { x: 200, y: 80, radius: 40, startAngle: 0, endAngle: Math.PI, fill: '#50e3c2' },
+    { x: 320, y: 80, radius: 40, startAngle: Math.PI / 4, endAngle: (3 * Math.PI) / 2, stroke: '#333', lineWidth: 4 },
+    { x: 80, y: 200, radius: 60, startAngle: 0, endAngle: Math.PI * 2, fill: '#f5a623' },
+    { x: 220, y: 220, radius: 30, startAngle: 0, endAngle: Math.PI * 2, stroke: '#d0021b', lineWidth: 6 },
+    { x: 340, y: 220, radius: 50, startAngle: 0, endAngle: Math.PI * 2, fill: '#7ed321', stroke: '#000', lineWidth: 2 }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createCircle(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/circle.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/glyph.js

@@ -0,0 +1,24 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createGlyph, createRect, createCircle, createText } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const glyph = createGlyph({ x: 100, y: 100 });
+  const rect = createRect({ x: 0, y: 0, width: 120, height: 80, fill: '#4a90e2' });
+  const circle = createCircle({ x: 60, y: 40, radius: 20, startAngle: 0, endAngle: Math.PI * 2, fill: '#f5a623' });
+  const label = createText({ x: 60, y: 70, text: 'Glyph', textAlign: 'center', textBaseline: 'top', fontSize: 14, fill: '#fff' });
+  glyph.setSubGraphic([rect, circle, label]);
+
+  stage.defaultLayer.add(glyph);
+
+  renderAndExportPNG(stage, outDir + '/glyph.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/group.js

@@ -0,0 +1,27 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createGroup, createRect, createCircle, createText } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const group = createGroup({ x: 60, y: 60, width: 240, height: 180, stroke: '#333', lineWidth: 2 });
+  const rect = createRect({ x: 20, y: 20, width: 100, height: 60, fill: '#4a90e2' });
+  const circle = createCircle({ x: 160, y: 50, radius: 30, startAngle: 0, endAngle: Math.PI * 2, fill: '#f5a623' });
+  const label = createText({ x: 120, y: 150, text: 'Group', textAlign: 'center', textBaseline: 'middle', fontSize: 16, fill: '#333' });
+
+  group.add(rect);
+  group.add(circle);
+  group.add(label);
+
+  stage.defaultLayer.add(group);
+
+  renderAndExportPNG(stage, outDir + '/group.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/image.js

@@ -0,0 +1,32 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createImage } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const localImgPath = path.resolve(__dirname, '../../browser/src/node/image.png');
+
+  const img = createImage({
+    x: 60,
+    y: 60,
+    width: 200,
+    height: 200,
+    image: localImgPath
+  });
+
+  img.successCallback = () => {
+    stage.render();
+    renderAndExportPNG(stage, outDir + '/image.png');
+  };
+
+  stage.defaultLayer.add(img);
+  stage.render();
+}
+
+main();

packages/vrender/__tests__/node/graphic/line.js

@@ -0,0 +1,48 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createLine } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    {
+      points: [
+        { x: 40, y: 60 },
+        { x: 120, y: 40 },
+        { x: 180, y: 100 }
+      ],
+      stroke: '#4a90e2',
+      lineWidth: 3
+    },
+    {
+      points: [
+        { x: 220, y: 60 },
+        { x: 300, y: 40 },
+        { x: 360, y: 100 },
+        { x: 420, y: 60 }
+      ],
+      stroke: '#50e3c2',
+      lineWidth: 2
+    },
+    {
+      segments: [
+        { points: [ { x: 40, y: 200 }, { x: 120, y: 220 }, { x: 180, y: 260 } ] },
+        { points: [ { x: 40, y: 280 }, { x: 120, y: 300 }, { x: 180, y: 340 } ] }
+      ],
+      stroke: '#d0021b',
+      lineWidth: 4
+    }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createLine(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/line.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/path.js

@@ -0,0 +1,24 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createPath } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    { x: 60, y: 60, path: 'M0,0 L100,0 L100,100 L0,100 Z', fill: '#4a90e2' },
+    { x: 220, y: 60, path: 'M0,50 C40,-20 60,120 100,50', stroke: '#d0021b', lineWidth: 3 },
+    { x: 380, y: 60, path: 'M0,0 A50,50 0 1,1 0,100 A50,50 0 1,1 0,0', fill: '#50e3c2', lineWidth: 2 }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createPath(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/path.png');
+}
+
+main();

packages/vrender/__tests__/node/graphic/polygon.js

@@ -0,0 +1,31 @@
+const CanvasPkg = require('canvas');
+const path = require('path');
+const { vglobal, createStage, createPolygon } = require('../../../cjs/index.js');
+const { ensureDir, renderAndExportPNG } = require('../export-image/utils');
+
+function main() {
+  vglobal.setEnv('node', CanvasPkg);
+  const outDir = path.resolve(__dirname, '../export-image');
+  ensureDir(outDir);
+
+  const stage = createStage({ width: 600, height: 400, autoRender: false });
+
+  const samples = [
+    {
+      points: [ { x: 40, y: 40 }, { x: 140, y: 40 }, { x: 90, y: 120 } ],
+      fill: '#4a90e2'
+    },
+    {
+      points: [ { x: 220, y: 60 }, { x: 300, y: 40 }, { x: 360, y: 100 }, { x: 280, y: 140 } ],
+      fill: '#50e3c2',
+      stroke: '#333',
+      lineWidth: 2
+    }
+  ];
+
+  samples.forEach(attrs => stage.defaultLayer.add(createPolygon(attrs)));
+
+  renderAndExportPNG(stage, outDir + '/polygon.png');
+}
+
+main();