Trigger Update

Under what circumstances does the scene tree update occur? Generally, it is triggered in three situations: data change-driven, user interaction, and layout change.

• Data-driven: When the attributes of the table change, such as width, height, or element changes: trigger updateColWidth / updateRowHeight / updateCell respectively.

• User Interaction: Users interact with the table: trigger resize (drag column width) / updateSortIcon (sort icon)

• Layout Change: Changes in device size and display mode trigger changes in layout, which will also lead to table updates: dealWidthMode (adaptive layout)

Update Process

**1. Attribute Modification (Core Method:

Directly modify element attributes (such as position, size, style)

• Column Width Update: Modify the width attribute of the column container using setAttribute.

updateColWidth(col: number, deltaX: number) {
  const columnGroup = this.getColGroup(col);
  columnGroup.setAttribute('width', newWidth); *// 直接修改列宽（触发脏标记）*
  this.updateContainer(true);                  *// 触发布局更新*
}    

• Line Height Update: Adjust the \u0060height\u0060 attribute of the line container to synchronously update the vertical layout. \r

updateRowHeight(row: number, deltaY: number) {
  const rowGroup = this.getRowGroup(row);
  rowGroup.setAttribute('height', newHeight); *// 修改行高*
  this._updateContainerHeight(row, deltaY);    *// 联动容器高度*    

---

2. Layout Recalculation (Core Methods: **updateContainer**/

Recalculate container coordinates and dimensions based on attribute changes, specifically controlling the update process through the needUpdateContainer flag. This ensures that layout calculations (column width/coordinate adjustments), size synchronization (table/frozen area), component status (scroll bar), and other steps are executed sequentially only when updates are needed, followed by rendering submission (updateNextFrame). The rendering engine is triggered (rendering the next frame) through stage.renderNextFrame.

  updateContainer(async: boolean = false) {
    if (async) {
      if (!this._needUpdateContainer) {
        this._needUpdateContainer = true;
        setTimeout(() => {
          this.updateContainerSync();
        }, 0);
      }
    } else {
      this._needUpdateContainer = true;
      this.updateContainerSync();
    }
  }

 updateContainerSync() {
    if (!this._needUpdateContainer) {
      return;
    }
    this._needUpdateContainer = false;
    this.updateContainerAttrWidthAndX();
    this.updateTableSize();
    this.component.updateScrollBar();

    this.updateDomContainer();

    this.updateNextFrame();
  }
    

Adaptive Layout: Dynamically allocate remaining space, overriding manual adjustment results. My interpretation focuses on dealHeightMode and dealwitdhMode:

dealWidthMode() method is responsible for handling the adaptive layout and auto-fill logic of table column widths: When widthMode: 'adaptive' is enabled, it first clears the historical column width cache, calculates the fixed total width of the row header and the right frozen columns, and proportionally allocates the remaining canvas space to non-frozen columns. If autoFillWidth is enabled, it checks whether the total content width is less than the canvas width, and if insufficient, it proportionally enlarges the non-frozen columns. After completing the column width calculation, it traverses the sub-column elements of the body area (bodyGroup), column header area (colHeaderGroup), row header area (rowHeaderGroup), and corner header area (cornerHeaderGroup), accumulates the actual width of each column, and dynamically sets the total width of the container. Finally, it adjusts the coordinate positions of the column header and the body to ensure that the column header is closely aligned to the right of the corner header and the body area is closely aligned to the right of the row header, forming a complete horizontal layout flow. Ultimately, the container property update drives the rendering engine to synchronize the visual performance.

dealHeightMode The logic for handling height and width is highly similar and symmetrical. Both conform to the core idea of table adaptive layout;

---

3. Dirty Marking (VRender Internal Mechanism)

Mark the primitives that need to be redrawn to avoid full rendering. Dirty marking is a performance optimization technique used to identify data or objects that need updating, avoiding full computation or rendering, thereby improving efficiency. In graphics rendering, it tracks the changed parts and only processes the "dirty" areas instead of the entire scene. \r

---

4. Asynchronous Rendering Submission (Core Method: **renderNextFrame**)​

• Unified submission entry: All updates ultimately call stage.renderNextFrame().

updateNextFrame() {
  this.stage.renderNextFrame();
}    

This document was revised and organized by the following personnel

玄魂