refactor: graph add rendered flag, setState add stage param

packages/g6/src/runtime/element.ts

@@ -278,20 +278,17 @@ export class ElementController {
     const data = this.computeChangesAndDrawData(context);
     if (!data) return null;
 
+    const { type = 'draw', stage = type, animation, silence } = context;
     const { dataChanges, drawData } = data;
     this.markDestroyElement(drawData);
     // 计算样式 / Calculate style
-    this.computeStyle(context.stage);
+    this.computeStyle(stage);
     // 创建渲染任务 / Create render task
     const { add, update, remove } = drawData;
     this.destroyElements(remove, context);
     this.createElements(add, context);
     this.updateElements(update, context);
 
-    const { animation, silence } = context;
-
-    const { type = 'draw' } = context;
-
     return this.context.animation!.animate(
       animation,
       silence
@@ -299,7 +296,12 @@ export class ElementController {
         : {
             before: () =>
               this.emit(
-                new GraphLifeCycleEvent(GraphEvent.BEFORE_DRAW, { dataChanges, animation, render: type === 'render' }),
+                new GraphLifeCycleEvent(GraphEvent.BEFORE_DRAW, {
+                  dataChanges,
+                  animation,
+                  stage,
+                  render: type === 'render',
+                }),
                 context,
               ),
             beforeAnimate: (animation) =>
@@ -308,7 +310,13 @@ export class ElementController {
               this.emit(new AnimateEvent(GraphEvent.AFTER_ANIMATE, AnimationType.DRAW, animation, drawData), context),
             after: () =>
               this.emit(
-                new GraphLifeCycleEvent(GraphEvent.AFTER_DRAW, { dataChanges, animation, render: type === 'render' }),
+                new GraphLifeCycleEvent(GraphEvent.AFTER_DRAW, {
+                  dataChanges,
+                  animation,
+                  stage,
+                  render: type === 'render',
+                  firstRender: this.context.graph.rendered === false,
+                }),
                 context,
               ),
           },

packages/g6/src/runtime/graph.ts

@@ -73,6 +73,13 @@ export class Graph extends EventEmitter {
     zoomRange: [0.01, 10],
   };
 
+  /**
+   * <zh/> 当前图实例是否已经渲染
+   *
+   * <en/> Whether the current graph instance has been rendered
+   */
+  public rendered = false;
+
   /**
    * <zh/> 当前图实例是否已经被销毁
    *
@@ -1123,6 +1130,7 @@ export class Graph extends EventEmitter {
     const animation = this.context.element!.draw({ type: 'render' });
     await Promise.all([animation?.finished, this.context.layout!.layout()]);
     await this.autoFit();
+    this.rendered = true;
     emit(this, new GraphLifeCycleEvent(GraphEvent.AFTER_RENDER));
   }
 
@@ -1736,7 +1744,7 @@ export class Graph extends EventEmitter {
     });
     this.updateData(dataToUpdate);
 
-    await this.context.element!.draw({ animation })?.finished;
+    await this.context.element!.draw({ animation, stage: 'state' })?.finished;
   }
 
   /**