Introduction

This article will introduce the state management module of VTable, as well as the types of management maintained within the management module.

State Management Module

The status module StateManager is responsible for managing the states of various interactions in the table, including selected cells, hover highlight effects, menu display effects, etc.

StateManager not only maintains the values of various states, but also defines methods to update each state. When the corresponding event is triggered, it will update the corresponding state. When the state changes, it will update the scene tree and re-render the chart.

Let's focus on what states are maintained in StateManager and the application scenarios of different types of states.

Status Type Enumeration

About the enumeration of state types, located in packages\vtable\src\state\state.ts

### interactionState

interactionState: InteractionState; // 主交互状态
interactionStateBeforeScroll?: InteractionState; // 滚动前状态缓存

interactionState represents the current interaction state of the table, and there are currently three states.

default // Default idle state
grabing // Dragging \r
scrolling // 滚动中 \r

By distinguishing interactionState, conflicts in the interactive state of the table can be avoided.

select Cell Selection

select: {
  ranges: (CellRange & { skipBodyMerge?: boolean })[]; // 多选区范围
  highlightScope: HighlightScope; // 高亮模式（单格/整行/整列/十字）
  cellPos: CellPosition;          // 当前聚焦单元格
  disableHeader?: boolean;        // 禁用表头选中
  disableCtrlMultiSelect?: boolean; // 禁用Ctrl多选
  headerSelectMode?: 'inline' | 'cell' | 'body'; // 表头选择模式
  highlightInRange?: boolean;    // 范围内高亮
  selecting: boolean;             // 正在选择中标识
  customSelectRanges?: {          // 自定义样式选区
    range: CellRange;
    style: CustomSelectionStyle;
  }[];
}

select state maintains the position of the currently selected cell and the configuration of select interactions, including highlightInRange, disableHeader, headerSelectMode, etc.

fillHandle

fillHandle: {
  direction?: 'top' | 'bottom' | 'left' | 'right'; // 拖拽方向
  directionRow?: boolean;         // 是否以行方向填充
  isFilling: boolean;             // 正在填充标识
  startX: number;                 // 起始X坐标
  startY: number;                 // 起始Y坐标
  beforeFillMinCol?: number;      // 填充前选区最小列
  beforeFillMinRow?: number;      // 填充前选区最小行
  beforeFillMaxCol?: number;      // 填充前选区最大列
  beforeFillMaxRow?: number;      // 填充前选区最大行
}

fillHandle mainly maintains the state of the fill handle, used to identify the current fill direction and starting position, etc.

hover

hover: {
  highlightScope: HighlightScope; // 悬停高亮模式
  disableHeader?: boolean;        // 禁用表头悬停
  cellPos: CellPosition;          // 当前 hover 位置
  cellPosContainHeader?: CellPosition; *// 记录当前hover的位置(在disableHeader时启用，记录真实位置)*
}

hover maintains the current mouse hover cell position, as well as hover related configurations: highlightScope, disableHeader.

columnResize

columnResize: {
  col: number;        // 调整列索引
  x: number;          // 相对表格X坐标
  resizing: boolean;  // 调整列宽中的标记
  isRightFrozen?: boolean; // 是否右侧冻结列
}

columnResize maintains the state of dragging to adjust column width, the resizing field indicates whether it is currently in the state of dragging to adjust column width, and col records the index of the column currently being adjusted.

rowResize

rowResize: {
  row: number; // 调整行索引
  */** y坐标是相对table内坐标 */*
  y: number; // 相对表格y坐标
  resizing: boolean;  // 调整行高中的标记
  isBottomFrozen?: boolean; // 是否底部冻结列
};

Relatively, rowResize records the state of dragging to adjust the row height, row is the index of the current row, and y is the y-coordinate of the current drag position relative to the table.

columnMove

columnMove: {
  colSource: number;  // 原始列索引
  colTarget: number;  // 目标列索引
  rowSource: number;  // 原始行索引
  rowTarget: number;  // 目标行索引
  x: number;          // 当前X坐标
  y: number;          // 当前Y坐标
  moving: boolean;    // 移动进行中标识
}

The state of dragging and swapping columns is maintained in columnRemove, which internally records the current mouse coordinates, as well as the information of the starting row/column and the target row/column.

menu: {
  x: number;           // 菜单显示X坐标
  y: number;           // 菜单显示Y坐标
  isShow: boolean;     // 显示状态
  itemList: MenuListItem[]; // 菜单项列表
  bounds: Bounds;      // 菜单边界范围
  highlightIndex: number; // 高亮项索引
  dropDownMenuHighlight?: DropDownMenuHighlightInfo[]; // 子菜单高亮
}

menu is responsible for the information of the dropdown menu, maintaining information such as the menu display coordinates, display status, menu items, and highlighted submenu configuration.

sort

sort: Array<{         // 多列排序状态
  col: number;        // 排序列索引
  row: number;        // 排序列表头的行索引
  field?: string;     // 排序字段
  order: SortOrder;   // 排序方向
  icon?: Icon;        // 排序图标
}>;

The built-in sorting state of VTable is maintained by sort. Since VTable supports multi-column sorting, this configuration is an array. It is responsible for storing which columns are currently sorted, as well as saving information about the sorting icon and sorting direction.

frozen

frozen: {             // 冻结状态
  col: number;        // 冻结列截止索引
  icon?: Icon;        // 冻结操作图标
};

The information of frozen columns is maintained in frozen, and only the number of columns frozen by this configuration frozenColCount will be saved. When the number of columns changes, the scene tree will be updated.

scroll

scroll: {
  horizontalBarPos: number; // 水平滚动条滑块位置（像素）
  verticalBarPos: number;   // 垂直滚动条滑块位置（像素）
};

scroll is mainly responsible for the following two things:

Record the real-time position of the scrollbar \r
Link with virtual scrolling to calculate the visible area

drill

drill: {
  dimensionKey?: string;  // 当前钻取维度字段
  title?: string;         // 钻取路径显示标题
  drillDown?: boolean;    // 是否下钻状态
  drillUp?: boolean;      // 是否上钻状态
  col: number;            // 触发钻取的列坐标
  row: number;           // 触发钻取的行坐标
};

Pivot tables support roll-up and drill-down operations. Information about the current drill-down is mainly maintained in the drill field, including the dimension fields currently drilled and the title displayed for the drill-down.

sparkLine

sparkLine: {
  col: number; // 当前hover的迷你图列坐标
  row: number; // 当前hover的迷你图行坐标
};

sparkline stores the row and column values when hovering over the mini chart, making it easy to clear the highlight state of the Sparkline when the mouse moves to other cells.

Conclusion

The state module in VTable has multiple management types, such as the state of selected cells, hover state, etc.

By extracting all the states of the table and maintaining them in one place, the coupling between different modules can be reduced.

Break down the interaction into state modules, event modules, and rendering modules, establishing a process where events drive states and states drive rendering. This will also make it clearer to organize logic when maintaining and adding new features in the future. \r