@visactor/vtable 0.9.0-alpha.0-alpha.0

package/cjs/scenegraph/component/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scenegraph/component/menu.ts"],"names":[],"mappings":"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","file":"menu.js","sourcesContent":["import type { FederatedEvent, IGroup } from '@visactor/vrender';\nimport { createRect, Text } from '@visactor/vrender';\nimport { TABLE_EVENT_TYPE } from '../../core/TABLE_EVENT_TYPE';\nimport type { MenuListItem } from '../../ts-types';\nimport { Group } from '../graphic/group';\nimport { Icon } from '../graphic/icon';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\n\n/**\n * 菜单类型\n * dropDown 下拉菜单\n * contextmenu 右键菜单\n * custom 自定义菜单\n */\nexport enum MenuType {\n  'dropDown' = 'dropDown',\n  'contextmenu' = 'contextmenu',\n  'custom' = 'custom'\n}\n\ntype MenuInfo = MenuListItem[];\n\nconst menuStyle = {\n  fontSize: 12,\n  color: '#000',\n  highlightColor: '#2E68CF',\n  hoverBgColor: '#EEE',\n  lineHeight: 12 + 9 + 9,\n  bgColor: '#FFF',\n  borderRadius: 4,\n  borderWidth: 0.5,\n  borderColor: '#CCC',\n  menuPadding: 6,\n  menuItemPadding: 9,\n  maxLineWidth: 200\n};\n\nexport class MenuHandler {\n  private _table: BaseTableAPI;\n  private _menuInstance: IGroup;\n  private _menuInfo: {\n    x: number;\n    y: number;\n    col: number;\n    row: number;\n    type: MenuType;\n    menuInfo: MenuListItem[];\n    highlightIndex: number;\n  };\n  // private _attachInfo?: AttachInfo | null;\n\n  constructor(table: BaseTableAPI) {\n    this._table = table;\n    this._menuInstance = new Group({\n      x: 0,\n      y: 0,\n      // visible: false,\n      fill: true,\n      fillColor: menuStyle.bgColor,\n      stroke: true,\n      strokeColor: menuStyle.borderColor,\n      borderRadius: menuStyle.borderRadius,\n      lineWidth: menuStyle.borderWidth\n    });\n    this._menuInfo = {\n      x: -1,\n      y: -1,\n      col: -1,\n      row: -1,\n      type: MenuType.dropDown,\n      menuInfo: [],\n      highlightIndex: -1\n    };\n\n    // this._menuInstance.setTheme({\n    //   rect: {\n    //     width: 100,\n    //   },\n    // });\n\n    // 绑定事件\n    // this._bindTableEvent(table);\n  }\n\n  bindTableComponent(componentGroup: Group) {\n    componentGroup.appendChild(this._menuInstance);\n\n    this.bindEvent();\n  }\n\n  dispose() {\n    // do nothing\n  }\n\n  attach(x: number, y: number, col: number, row: number, type: MenuType, menuInfo?: MenuInfo) {\n    if (type === MenuType.dropDown && this.checkDropDownMenuChange(col, row)) {\n      // 菜单内容变化，更新菜单Group\n      const tableMenuInfo = this.getMenuInfo(col, row, type);\n      if (!tableMenuInfo) {\n        return;\n      }\n      const { menuInfo, highlightIndex } = tableMenuInfo;\n      this.updateMenuInfo(col, row, type, menuInfo, highlightIndex);\n      this.updateMenuInstance(menuInfo, highlightIndex);\n      // this.updatePosition(x - this._table.scenegraph.x, y - this._table.scenegraph.y);\n    } else if (type === MenuType.contextmenu) {\n      if (this.checkContextMenuChange(x, y)) {\n        const tableMenuInfo = this.getMenuInfo(col, row, type);\n        if (!tableMenuInfo) {\n          return;\n        }\n        const { menuInfo, highlightIndex } = tableMenuInfo;\n        this.updateMenuInfo(col, row, type, menuInfo, highlightIndex);\n        this.updateMenuInstance(menuInfo, highlightIndex);\n      }\n    }\n    this.updatePosition(x - this._table.scenegraph.x, y - this._table.scenegraph.y);\n\n    this.addToScene();\n  }\n\n  updateMenuInfo(col: number, row: number, type: MenuType, menuInfo: MenuListItem[], highlightIndex: number) {\n    this._menuInfo.col = col;\n    this._menuInfo.row = row;\n    this._menuInfo.type = type;\n    this._menuInfo.menuInfo = menuInfo;\n    this._menuInfo.highlightIndex = highlightIndex;\n  }\n\n  checkDropDownMenuChange(col: number, row: number) {\n    const { type, col: curCol, row: curRow } = this._menuInfo;\n    if (type === MenuType.dropDown && col === curCol && row === curRow) {\n      return false;\n    }\n    return true;\n  }\n\n  checkContextMenuChange(x: number, y: number) {\n    const { type, menuInfo } = this._menuInfo;\n    if (type === MenuType.contextmenu && menuInfo === this._table.internalProps.menu?.contextMenuItems) {\n      return false;\n    }\n    return true;\n  }\n\n  updateMenuInstance(menuInfo: MenuInfo, highlightIndex: number) {\n    // 清空Mark\n    this._menuInstance.removeAllChild();\n\n    // menu padding\n    let y = menuStyle.menuPadding;\n    const x = menuStyle.menuPadding;\n    let maxWidth = 0;\n    menuInfo.forEach((item, index) => {\n      const isisHighlight = highlightIndex === index;\n      let icon;\n      let text;\n      if (typeof item === 'string') {\n        text = item;\n      } else if (typeof item === 'object') {\n        text = item.text;\n        if (isisHighlight) {\n          icon = item.selectedIcon;\n        } else {\n          icon = item.icon;\n        }\n      }\n\n      const group = new Group({\n        y,\n        x,\n        // childrenPickable: false,\n        height: menuStyle.lineHeight,\n        fill: true,\n        fillColor: menuStyle.bgColor\n      });\n      group.role = 'menu-item';\n      this._menuInstance.appendChild(group);\n\n      // 处理背景hover效果\n      group.stateProxy = (stateName: string) => {\n        if (stateName === 'hover') {\n          return {\n            fillColor: menuStyle.hoverBgColor\n          };\n        }\n        return {\n          fillColor: menuStyle.bgColor\n        };\n      };\n      group.addEventListener('pointerenter', (e: FederatedEvent) => {\n        group.addState('hover', true, false);\n        this._table.scenegraph.updateNextFrame();\n      });\n      group.addEventListener('pointerleave', (e: FederatedEvent) => {\n        group.removeState('hover', false);\n        this._table.scenegraph.updateNextFrame();\n      });\n\n      const textMark = new Text({\n        x: menuStyle.menuItemPadding,\n        y: menuStyle.menuItemPadding,\n        fill: true,\n        fillColor: isisHighlight ? menuStyle.highlightColor : menuStyle.color,\n        text,\n        textBaseline: 'top',\n        fontSize: menuStyle.fontSize,\n        pickable: false,\n        maxLineWidth: menuStyle.maxLineWidth,\n        ellipsis: '…'\n        // lineHeight: menuStyle.lineHeight,\n      });\n      group.addChild(textMark);\n\n      if (icon) {\n        const textHeight = textMark.AABBBounds.height();\n        const iconWidth = icon.width ?? 16;\n        const iconHeight = icon.height ?? 16;\n        const iconMark = new Icon({\n          x: menuStyle.menuItemPadding,\n          y: (menuStyle.lineHeight - iconHeight) / 2,\n          width: iconWidth,\n          height: iconHeight,\n          image: icon.svg,\n          pickable: false\n        });\n        iconMark.role = 'menu-icon';\n        group.insertBefore(iconMark, textMark);\n        textMark.setAttribute('x', iconWidth + menuStyle.menuItemPadding);\n      }\n\n      // const textWidth = textMark.AABBBounds.width();\n      maxWidth = Math.max(group.AABBBounds.width(), maxWidth);\n\n      y += menuStyle.lineHeight;\n    });\n\n    this._menuInstance.setAttributes({\n      width: maxWidth + menuStyle.menuItemPadding * 2 + menuStyle.menuPadding * 2,\n      height: y + menuStyle.menuPadding\n    });\n    this._menuInstance.forEachChildren((itemGroup: Group) => {\n      itemGroup.setAttribute('width', maxWidth + menuStyle.menuItemPadding * 2);\n    });\n  }\n\n  updatePosition(x: number, y: number) {\n    // to do: 位置躲避\n    this._menuInstance.setAttributes({\n      x: this._menuInfo.type === MenuType.dropDown ? x - this._menuInstance.attribute.width : x,\n      y\n    });\n    this._menuInfo.x = MenuType.dropDown ? x - this._menuInstance.attribute.width : x;\n    this._menuInfo.y = y;\n  }\n\n  addToScene() {\n    this._table.scenegraph.updateNextFrame();\n  }\n\n  detach() {\n    this._menuInstance.setAttributes({\n      // visible: false,\n      x: -1000,\n      y: -1000\n    });\n    // this._menuInstance.hideAll();\n    this._table.scenegraph.updateNextFrame();\n  }\n\n  /**\n   * @description: 获取对应单元格的菜单内容\n   * @param {number} col\n   * @param {number} row\n   * @param {MenuType} type\n   * @return {*}\n   */\n  getMenuInfo(col: number, row: number, type: MenuType) {\n    if (type === MenuType.dropDown) {\n      const { dropDownMenu = this._table.globalDropDownMenu, pivotInfo } = this._table._getHeaderLayoutMap(col, row);\n      let highlightIndex = -1;\n      if (Array.isArray(dropDownMenu)) {\n        for (let i = 0; i < dropDownMenu.length; i++) {\n          if (this._table._dropDownMenuIsHighlight(col, row, i)) {\n            highlightIndex = i;\n            break;\n          }\n        }\n      }\n      return {\n        menuInfo: dropDownMenu,\n        highlightIndex\n      };\n    } else if (type === MenuType.contextmenu) {\n      const contextmenu = this._table.internalProps.menu?.contextMenuItems;\n      let menuInfo;\n      if (Array.isArray(contextmenu)) {\n        menuInfo = contextmenu;\n      } else if (typeof contextmenu === 'function') {\n        const { field } = this._table.isHeader(col, row)\n          ? this._table.getHeaderDefine(col, row)\n          : this._table.getBodyColumnDefine(col, row);\n        menuInfo = contextmenu(field, row);\n      }\n      return {\n        menuInfo,\n        highlightIndex: -1\n      };\n    }\n    return undefined;\n  }\n\n  bindEvent() {\n    // // 监听showMenu自定义事件\n    // this._table.listen(DG_EVENT_TYPE.SHOW_MENU, (e) => {\n    //   const { x, y, col, row, type } = e;\n    //   this.attach(x, y, col, row, type);\n    // });\n    // // 监听hideMenu自定义事件\n    // this._table.listen(DG_EVENT_TYPE.HIDE_MENU, () => {\n    //   this.detach();\n    // });\n\n    // 监听菜单内容click\n    this._menuInstance.addEventListener('click', (e: FederatedEvent) => {\n      const { target } = e;\n      if (target && (target as unknown as Group).role === 'menu-item') {\n        // 成功点击menu-item，触发自定义事件\n        const resultMenuInfo = this.getEventInfo(target as unknown as Group);\n        const resultTableInfo = this._table.getMenuInfo(this._menuInfo.col, this._menuInfo.row, this._menuInfo.type);\n        const result = Object.assign(resultMenuInfo, resultTableInfo);\n        this._table.fireListeners(TABLE_EVENT_TYPE.DROPDOWNMENU_CLICK, result);\n\n        // 由DROPDOWNMENU_CLICK事件清空菜单\n        // this.detach();\n      }\n    });\n  }\n\n  getEventInfo(target: IGroup): {\n    col: number;\n    row: number;\n    menuKey: string;\n    dropDownIndex: number;\n    text: string;\n    highlight: boolean;\n  } {\n    const parent = target.parent as IGroup;\n    let index = 0;\n    parent.forEachChildren((child: IGroup, i: number) => {\n      if (child === target) {\n        index = i - 1; // index 0为背景rect\n        return true;\n      }\n      return false;\n    });\n\n    const text =\n      typeof this._menuInfo.menuInfo[index] === 'string'\n        ? this._menuInfo.menuInfo[index]\n        : (this._menuInfo.menuInfo[index] as any).text;\n    const menuKey =\n      typeof this._menuInfo.menuInfo[index] === 'string'\n        ? text\n        : (this._menuInfo.menuInfo[index] as any).menuKey || text;\n\n    return {\n      col: this._menuInfo.col,\n      row: this._menuInfo.row,\n      dropDownIndex: index,\n      highlight: index === this._menuInfo.highlightIndex,\n      text,\n      menuKey\n    };\n  }\n\n  get bounds() {\n    return this._menuInstance.globalAABBBounds;\n  }\n}\n\n// class MenuContainer {}\n\n// class MenuElement {}\n"]}

package/cjs/scenegraph/component/table-component.d.ts

@@ -0,0 +1,37 @@
+import type { ILine, IRect, IGroup } from '@visactor/vrender';
+import { ScrollBar } from '@visactor/vrender-components';
+import type { Group } from '../graphic/group';
+import { MenuHandler } from './menu';
+import { DrillIcon } from './drill-icon';
+import { CellMover } from './cell-mover';
+import type { BaseTableAPI } from '../../ts-types/base-table';
+export declare class TableComponent {
+    table: BaseTableAPI;
+    border: IRect;
+    columnResizerLine: ILine;
+    columnResizerBgLine: ILine;
+    columnResizerLabel: IGroup;
+    menu: MenuHandler;
+    vScrollBar: ScrollBar;
+    hScrollBar: ScrollBar;
+    frozenShadowLine: IRect;
+    drillIcon: DrillIcon;
+    cellMover: CellMover;
+    constructor(table: BaseTableAPI);
+    addToGroup(componentGroup: Group): void;
+    createScrollBar(): void;
+    updateScrollBar(): void;
+    hideResizeCol(): void;
+    showResizeCol(col: number, y: number): void;
+    updateResizeCol(col: number, y: number): void;
+    hideMoveCol(): void;
+    showMoveCol(col: number, row: number, delta: number): void;
+    updateMoveCol(backX: number, lineX: number, backY: number, lineY: number): void;
+    setFrozenColumnShadow(col: number): void;
+    hideVerticalScrollBar(): void;
+    showVerticalScrollBar(): void;
+    hideHorizontalScrollBar(): void;
+    showHorizontalScrollBar(): void;
+    updateVerticalScrollBarPos(topRatio: number): void;
+    updateHorizontalScrollBarPos(leftRatio: number): void;
+}

package/cjs/scenegraph/component/table-component.js

@@ -0,0 +1,302 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.TableComponent = void 0;
+
+const vrender_1 = require("@visactor/vrender"), vrender_components_1 = require("@visactor/vrender-components"), menu_1 = require("./menu"), drill_icon_1 = require("./drill-icon"), cell_mover_1 = require("./cell-mover"), util_1 = require("./util");
+
+class TableComponent {
+    constructor(table) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        this.table = table;
+        const theme = this.table.theme;
+        this.createScrollBar();
+        const columnResizerColor = null === (_a = theme.columnResize) || void 0 === _a ? void 0 : _a.lineColor, columnResizerWidth = null === (_b = theme.columnResize) || void 0 === _b ? void 0 : _b.lineWidth, columnResizerBgColor = null === (_c = theme.columnResize) || void 0 === _c ? void 0 : _c.bgColor, columnResizerBgWidth = null === (_d = theme.columnResize) || void 0 === _d ? void 0 : _d.width;
+        this.columnResizerLine = (0, vrender_1.createLine)({
+            visible: !1,
+            pickable: !1,
+            stroke: !0,
+            strokeColor: columnResizerColor,
+            lineWidth: columnResizerWidth,
+            x: 0,
+            y: 0,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: 0
+            } ]
+        }), this.columnResizerBgLine = (0, vrender_1.createLine)({
+            visible: !1,
+            pickable: !1,
+            stroke: !0,
+            strokeColor: columnResizerBgColor,
+            lineWidth: columnResizerBgWidth,
+            x: 0,
+            y: 0,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: 0
+            } ]
+        });
+        const columnResizerLabelText = (0, vrender_1.createText)({
+            visible: !1,
+            pickable: !1,
+            x: 0,
+            y: 0,
+            fontSize: 10,
+            fillColor: "#FFF",
+            text: "",
+            textBaseline: "top",
+            dx: 16,
+            dy: -6
+        }), columnResizerLabelBack = (0, vrender_1.createRect)({
+            visible: !1,
+            pickable: !1,
+            fill: !0,
+            fillColor: "#3073F2",
+            x: 0,
+            y: 0,
+            width: 38,
+            height: 16,
+            borderRadius: 5,
+            dx: 12,
+            dy: -8
+        });
+        this.columnResizerLabel = (0, vrender_1.createGroup)({
+            visible: !1,
+            pickable: !1,
+            x: 0,
+            y: 0
+        }), this.columnResizerLabel.appendChild(columnResizerLabelBack), this.columnResizerLabel.appendChild(columnResizerLabelText), 
+        this.cellMover = new cell_mover_1.CellMover(this.table);
+        const shadowWidth = null === (_f = null === (_e = theme.frozenColumnLine) || void 0 === _e ? void 0 : _e.shadow) || void 0 === _f ? void 0 : _f.width, shadowStartColor = null === (_h = null === (_g = theme.frozenColumnLine) || void 0 === _g ? void 0 : _g.shadow) || void 0 === _h ? void 0 : _h.startColor, shadowEndColor = null === (_k = null === (_j = theme.frozenColumnLine) || void 0 === _j ? void 0 : _j.shadow) || void 0 === _k ? void 0 : _k.endColor;
+        this.frozenShadowLine = (0, vrender_1.createRect)({
+            visible: !0,
+            pickable: !1,
+            x: 0,
+            y: 0,
+            width: shadowWidth,
+            height: 0,
+            fillColor: {
+                gradient: "linear",
+                x0: 0,
+                y0: 0,
+                x1: 1,
+                y1: 0,
+                stops: [ {
+                    color: shadowStartColor,
+                    offset: 0
+                }, {
+                    color: shadowEndColor,
+                    offset: 1
+                } ]
+            }
+        }), this.menu = new menu_1.MenuHandler(this.table), this.drillIcon = new drill_icon_1.DrillIcon;
+    }
+    addToGroup(componentGroup) {
+        componentGroup.addChild(this.frozenShadowLine), componentGroup.addChild(this.columnResizerBgLine), 
+        componentGroup.addChild(this.columnResizerLine), componentGroup.addChild(this.columnResizerLabel), 
+        componentGroup.addChild(this.hScrollBar), componentGroup.addChild(this.vScrollBar), 
+        this.menu.bindTableComponent(componentGroup), this.drillIcon.appand(componentGroup), 
+        this.cellMover.appand(componentGroup);
+    }
+    createScrollBar() {
+        var _a, _b, _c;
+        const theme = this.table.theme, scrollRailColor = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.scrollRailColor, scrollSliderColor = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.scrollSliderColor, width = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.width;
+        this.hScrollBar = new vrender_components_1.ScrollBar({
+            direction: "horizontal",
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: this.table.tableNoFrameWidth,
+            height: width,
+            padding: 0,
+            railStyle: {
+                fill: !!scrollRailColor,
+                fillColor: scrollRailColor
+            },
+            sliderStyle: {
+                fill: !0,
+                fillColor: scrollSliderColor
+            },
+            range: [ 0, .1 ],
+            visible: !1
+        }), this.hScrollBar.render(), this.hScrollBar.hideAll(), this.vScrollBar = new vrender_components_1.ScrollBar({
+            direction: "vertical",
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: width,
+            height: this.table.tableNoFrameHeight - this.table.getFrozenRowsHeight(),
+            padding: 0,
+            railStyle: {
+                fill: !!scrollRailColor,
+                fillColor: scrollRailColor
+            },
+            sliderStyle: {
+                fill: !0,
+                fillColor: scrollSliderColor
+            },
+            range: [ 0, .1 ],
+            visible: !1
+        }), this.vScrollBar.render(), this.vScrollBar.hideAll();
+    }
+    updateScrollBar() {
+        var _a, _b;
+        const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos, oldVerticalBarPos = this.table.stateManeger.scroll.verticalBarPos, theme = this.table.theme, width = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.width, visible = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.visible, tableWidth = Math.ceil(this.table.scenegraph.tableGroup.attribute.width), tableHeight = Math.ceil(this.table.scenegraph.tableGroup.attribute.height), totalHeight = this.table.getAllRowsHeight(), totalWidth = this.table.getAllColsWidth(), frozenRowsHeight = this.table.getFrozenRowsHeight(), frozenColsWidth = this.table.getFrozenColsWidth();
+        if (totalWidth > tableWidth) {
+            const y = Math.min(tableHeight, totalHeight), rangeEnd = Math.max(.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
+            this.hScrollBar.setAttributes({
+                x: frozenColsWidth,
+                y: y - width,
+                width: tableWidth - frozenColsWidth,
+                range: [ 0, rangeEnd ],
+                visible: "always" === visible
+            });
+            const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
+            this.hScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            }, "always" === visible && this.hScrollBar.showAll();
+        }
+        if (totalHeight > tableHeight) {
+            const x = Math.min(tableWidth, totalWidth), rangeEnd = Math.max(.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
+            this.vScrollBar.setAttributes({
+                x: x - width,
+                y: frozenRowsHeight,
+                height: tableHeight - frozenRowsHeight,
+                range: [ 0, rangeEnd ],
+                visible: "always" === visible
+            });
+            const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
+            this.vScrollBar._viewPosition = {
+                x: bounds.x1,
+                y: bounds.y1
+            }, "always" === visible && this.vScrollBar.showAll();
+        }
+        this.table.stateManeger.setScrollLeft(oldHorizontalBarPos), this.table.stateManeger.setScrollTop(oldVerticalBarPos);
+    }
+    hideResizeCol() {
+        this.columnResizerLine.setAttribute("visible", !1), this.columnResizerBgLine.setAttribute("visible", !1), 
+        this.columnResizerLabel.setAttribute("visible", !1), this.columnResizerLabel.hideAll();
+    }
+    showResizeCol(col, y) {
+        const colX = (0, util_1.getColX)(col, this.table);
+        this.columnResizerLine.setAttributes({
+            visible: !0,
+            x: colX,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: this.table.getRowsHeight(0, this.table.rowCount - 1)
+            } ]
+        }), this.columnResizerBgLine.setAttributes({
+            visible: !0,
+            x: colX,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: this.table.getRowsHeight(0, this.table.rowCount - 1)
+            } ]
+        }), this.columnResizerLabel.showAll(), this.columnResizerLabel.setAttributes({
+            visible: !0,
+            x: colX,
+            y: y
+        }), this.columnResizerLabel.lastChild.setAttribute("text", `${this.table.getColWidth(col)}px`);
+    }
+    updateResizeCol(col, y) {
+        const colX = (0, util_1.getColX)(col, this.table);
+        this.columnResizerLine.setAttributes({
+            x: colX,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: this.table.getRowsHeight(0, this.table.rowCount - 1)
+            } ]
+        }), this.columnResizerBgLine.setAttributes({
+            x: colX,
+            points: [ {
+                x: 0,
+                y: 0
+            }, {
+                x: 0,
+                y: this.table.getRowsHeight(0, this.table.rowCount - 1)
+            } ]
+        }), this.columnResizerLabel.setAttributes({
+            x: colX,
+            y: y
+        }), this.columnResizerLabel.lastChild.setAttribute("text", `${Math.floor(this.table.getColWidth(col))}px`);
+    }
+    hideMoveCol() {
+        this.cellMover.hide();
+    }
+    showMoveCol(col, row, delta) {
+        this.cellMover.show(col, row, delta);
+    }
+    updateMoveCol(backX, lineX, backY, lineY) {
+        this.cellMover.update(backX, lineX, backY, lineY);
+    }
+    setFrozenColumnShadow(col) {
+        if (col < 0) this.frozenShadowLine.setAttributes({
+            visible: !1
+        }); else {
+            const colX = this.table.getColsWidth(0, col);
+            this.frozenShadowLine.setAttributes({
+                visible: !0,
+                x: colX,
+                height: this.table.getRowsHeight(0, this.table.rowCount - 1)
+            });
+        }
+    }
+    hideVerticalScrollBar() {
+        const visable = this.table.theme.scrollStyle.visible;
+        "focus" !== visable && "scrolling" !== visable || (this.vScrollBar.setAttribute("visible", !1), 
+        this.vScrollBar.hideAll(), this.table.scenegraph.updateNextFrame());
+    }
+    showVerticalScrollBar() {
+        const visable = this.table.theme.scrollStyle.visible;
+        "focus" !== visable && "scrolling" !== visable || (this.vScrollBar.setAttribute("visible", !0), 
+        this.vScrollBar.showAll(), this.table.scenegraph.updateNextFrame());
+    }
+    hideHorizontalScrollBar() {
+        const visable = this.table.theme.scrollStyle.visible;
+        "focus" !== visable && "scrolling" !== visable || (this.hScrollBar.setAttribute("visible", !1), 
+        this.hScrollBar.hideAll(), this.table.scenegraph.updateNextFrame());
+    }
+    showHorizontalScrollBar() {
+        const visable = this.table.theme.scrollStyle.visible;
+        "focus" !== visable && "scrolling" !== visable || (this.hScrollBar.setAttribute("visible", !0), 
+        this.hScrollBar.showAll(), this.table.scenegraph.updateNextFrame());
+    }
+    updateVerticalScrollBarPos(topRatio) {
+        const range = this.vScrollBar.attribute.range, size = range[1] - range[0], range0 = topRatio * (1 - size);
+        this.vScrollBar.setAttribute("range", [ range0, range0 + size ]);
+        const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
+        this.vScrollBar._viewPosition = {
+            x: bounds.x1,
+            y: bounds.y1
+        };
+    }
+    updateHorizontalScrollBarPos(leftRatio) {
+        const range = this.hScrollBar.attribute.range, size = range[1] - range[0];
+        this.hScrollBar.setAttribute("range", [ leftRatio, leftRatio + size ]);
+        const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
+        this.hScrollBar._viewPosition = {
+            x: bounds.x1,
+            y: bounds.y1
+        };
+    }
+}
+
+exports.TableComponent = TableComponent;
+//# sourceMappingURL=table-component.js.map

package/cjs/scenegraph/component/table-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scenegraph/component/table-component.ts"],"names":[],"mappings":"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","file":"table-component.js","sourcesContent":["import type { ILine, IRect, IGroup } from '@visactor/vrender';\nimport { createRect, createLine, createText, createGroup, createSymbol } from '@visactor/vrender';\nimport { ScrollBar } from '@visactor/vrender-components';\nimport type { Group } from '../graphic/group';\nimport type { WrapText } from '../graphic/text';\nimport { MenuHandler } from './menu';\nimport { DrillIcon } from './drill-icon';\nimport { CellMover } from './cell-mover';\nimport { getColX } from './util';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\n\n/**\n * @description: 表格内容外组件\n * @return {*}\n */\nexport class TableComponent {\n  table: BaseTableAPI;\n\n  border: IRect; // 表格外边框\n  // selectBorder: IRect; // 表格选择区域边框\n  columnResizerLine: ILine; // 表格列宽调整基准线\n  columnResizerBgLine: ILine; // 表格列宽调整基准线背景\n  columnResizerLabel: IGroup; // 表格列宽调整标记\n  menu: MenuHandler; // 表格菜单\n  vScrollBar: ScrollBar; // 表格横向滚动条\n  hScrollBar: ScrollBar; // 表格纵向滚动条\n  frozenShadowLine: IRect; // 表格冻结列右侧阴影块\n  drillIcon: DrillIcon; // drill icon\n  cellMover: CellMover; // 表格列顺序调整标记\n\n  constructor(table: BaseTableAPI) {\n    this.table = table;\n    const theme = this.table.theme;\n\n    // 滚动条\n    this.createScrollBar();\n\n    // // 框选外边框\n    // const bodyClickBorderColor = theme.bodyStyle?.click?.cellBorderColor;\n    // const bodyClickLineWidth = theme.bodyStyle?.click?.cellBorderLineWidth;\n\n    // this.selectBorder = createRect({\n    //   visible: false,\n    //   pickable: false,\n    //   fill: false,\n    //   stroke: true,\n    //   strokeColor: bodyClickBorderColor as string,\n    //   lineWidth: bodyClickLineWidth as number,\n    //   x: 0,\n    //   y: 0,\n    //   width: 0,\n    //   height: 0,\n    // });\n\n    // 列宽调整基准线\n    const columnResizerColor = theme.columnResize?.lineColor;\n    const columnResizerWidth = theme.columnResize?.lineWidth;\n    const columnResizerBgColor = theme.columnResize?.bgColor;\n    const columnResizerBgWidth = theme.columnResize?.width;\n    this.columnResizerLine = createLine({\n      visible: false,\n      pickable: false,\n      stroke: true,\n      strokeColor: columnResizerColor as string,\n      lineWidth: columnResizerWidth as number,\n      x: 0,\n      y: 0,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: 0 }\n      ]\n    });\n    this.columnResizerBgLine = createLine({\n      visible: false,\n      pickable: false,\n      stroke: true,\n      strokeColor: columnResizerBgColor as string,\n      lineWidth: columnResizerBgWidth as number,\n      x: 0,\n      y: 0,\n      // dx: -(columnResizerBgWidth - columnResizerWidth) / 2,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: 0 }\n      ]\n    });\n\n    // 列宽调整文字标签\n    const columnResizerLabelText = createText({\n      visible: false,\n      pickable: false,\n      x: 0,\n      y: 0,\n      fontSize: 10,\n      fillColor: '#FFF',\n      text: '',\n      textBaseline: 'top',\n      dx: 12 + 4,\n      dy: -8 + 2\n    });\n    const columnResizerLabelBack = createRect({\n      visible: false,\n      pickable: false,\n      fill: true,\n      fillColor: '#3073F2',\n      x: 0,\n      y: 0,\n      width: 38,\n      height: 16,\n      borderRadius: 5,\n      dx: 12,\n      dy: -8\n    });\n    this.columnResizerLabel = createGroup({\n      visible: false,\n      pickable: false,\n      x: 0,\n      y: 0\n    });\n    this.columnResizerLabel.appendChild(columnResizerLabelBack);\n    this.columnResizerLabel.appendChild(columnResizerLabelText);\n\n    // 列顺序调整基准线\n    this.cellMover = new CellMover(this.table);\n\n    // 冻结列阴影\n    const shadowWidth = theme.frozenColumnLine?.shadow?.width;\n    const shadowStartColor = theme.frozenColumnLine?.shadow?.startColor;\n    const shadowEndColor = theme.frozenColumnLine?.shadow?.endColor;\n    this.frozenShadowLine = createRect({\n      visible: true,\n      pickable: false,\n      x: 0,\n      y: 0,\n      width: shadowWidth,\n      height: 0,\n      fillColor: {\n        gradient: 'linear',\n        x0: 0,\n        y0: 0,\n        x1: 1,\n        y1: 0,\n        stops: [\n          { color: shadowStartColor, offset: 0 },\n          { color: shadowEndColor, offset: 1 }\n        ]\n      }\n    });\n\n    // TO BE DONE 冻结列border(theme.frozenColumnLine?.border)\n\n    // 弹出窗口\n    // this.menu = createGroup({\n    //   visible: false,\n    //   pickable: false,\n    //   x: 0,\n    //   y: 0,\n    // });\n    this.menu = new MenuHandler(this.table);\n\n    this.drillIcon = new DrillIcon();\n  }\n\n  /**\n   * @description: 组件mark加入到容器Group中\n   * @param {Group} componentGroup\n   * @return {*}\n   */\n  addToGroup(componentGroup: Group) {\n    componentGroup.addChild(this.frozenShadowLine);\n    // componentGroup.addChild(this.selectBorder);\n    componentGroup.addChild(this.columnResizerBgLine);\n    componentGroup.addChild(this.columnResizerLine);\n    componentGroup.addChild(this.columnResizerLabel);\n    componentGroup.addChild(this.hScrollBar);\n    componentGroup.addChild(this.vScrollBar);\n    this.menu.bindTableComponent(componentGroup);\n    this.drillIcon.appand(componentGroup);\n    this.cellMover.appand(componentGroup);\n  }\n\n  /**\n   * @description: 创建滚动条组件\n   * @return {*}\n   */\n  createScrollBar() {\n    const theme = this.table.theme;\n    const scrollRailColor = theme.scrollStyle?.scrollRailColor as string;\n    const scrollSliderColor = theme.scrollStyle?.scrollSliderColor as string;\n    const width = theme.scrollStyle?.width as number;\n    // const visible = theme.scrollStyle?.visible as string;\n    // const hoverOn = theme.scrollStyle?.hoverOn as boolean;\n\n    this.hScrollBar = new ScrollBar({\n      direction: 'horizontal',\n      x: -this.table.tableNoFrameWidth * 2,\n      y: -this.table.tableNoFrameHeight * 2,\n      width: this.table.tableNoFrameWidth,\n      height: width,\n      padding: 0,\n      railStyle: {\n        fill: !!scrollRailColor,\n        fillColor: scrollRailColor\n      },\n      sliderStyle: {\n        fill: true,\n        fillColor: scrollSliderColor\n      },\n      range: [0, 0.1],\n      // scrollRange: [0.4, 0.8]\n      visible: false\n    });\n    // hack方案实现初始化隐藏滚动条，也可以add到stage之后执行hideAll\n    (this.hScrollBar as any).render();\n    this.hScrollBar.hideAll();\n\n    this.vScrollBar = new ScrollBar({\n      direction: 'vertical',\n      x: -this.table.tableNoFrameWidth * 2,\n      y: -this.table.tableNoFrameHeight * 2,\n      width,\n      height: this.table.tableNoFrameHeight - this.table.getFrozenRowsHeight(),\n      padding: 0,\n      railStyle: {\n        fill: !!scrollRailColor,\n        fillColor: scrollRailColor\n      },\n      sliderStyle: {\n        fill: true,\n        fillColor: scrollSliderColor\n      },\n      range: [0, 0.1],\n      visible: false\n    });\n    (this.vScrollBar as any).render();\n    this.vScrollBar.hideAll();\n  }\n\n  /**\n   * @description: 更新滚动条尺寸\n   * @return {*}\n   */\n  updateScrollBar() {\n    const oldHorizontalBarPos = this.table.stateManeger.scroll.horizontalBarPos;\n    const oldVerticalBarPos = this.table.stateManeger.scroll.verticalBarPos;\n\n    const theme = this.table.theme;\n    const width = theme.scrollStyle?.width as number;\n    const visible = theme.scrollStyle?.visible as string;\n    // const hoverOn = theme.scrollStyle?.hoverOn as boolean;\n    const tableWidth = Math.ceil(this.table.scenegraph.tableGroup.attribute.width);\n    const tableHeight = Math.ceil(this.table.scenegraph.tableGroup.attribute.height);\n\n    const totalHeight = this.table.getAllRowsHeight();\n    const totalWidth = this.table.getAllColsWidth();\n    const frozenRowsHeight = this.table.getFrozenRowsHeight();\n    const frozenColsWidth = this.table.getFrozenColsWidth();\n    if (totalWidth > tableWidth) {\n      const y = Math.min(tableHeight, totalHeight);\n      const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));\n      this.hScrollBar.setAttributes({\n        x: frozenColsWidth,\n        y: y - width,\n        width: tableWidth - frozenColsWidth,\n        range: [0, rangeEnd],\n        visible: visible === 'always'\n      });\n      const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;\n      (this.hScrollBar as any)._viewPosition = {\n        x: bounds.x1,\n        y: bounds.y1\n      };\n      if (visible === 'always') {\n        this.hScrollBar.showAll();\n      }\n    }\n\n    if (totalHeight > tableHeight) {\n      const x = Math.min(tableWidth, totalWidth);\n      const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));\n      this.vScrollBar.setAttributes({\n        x: x - width,\n        y: frozenRowsHeight,\n        height: tableHeight - frozenRowsHeight,\n        range: [0, rangeEnd],\n        visible: visible === 'always'\n      });\n      const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;\n      (this.vScrollBar as any)._viewPosition = {\n        x: bounds.x1,\n        y: bounds.y1\n      };\n\n      if (visible === 'always') {\n        this.vScrollBar.showAll();\n      }\n    }\n\n    this.table.stateManeger.setScrollLeft(oldHorizontalBarPos);\n    this.table.stateManeger.setScrollTop(oldVerticalBarPos);\n  }\n\n  /**\n   * @description: 隐藏列宽调整组件\n   * @return {*}\n   */\n  hideResizeCol() {\n    // this.columnResizerLine.attribute.visible = false;\n    this.columnResizerLine.setAttribute('visible', false);\n    this.columnResizerBgLine.setAttribute('visible', false);\n    this.columnResizerLabel.setAttribute('visible', false);\n    this.columnResizerLabel.hideAll();\n  }\n\n  /**\n   * @description: 显示列宽调整组件\n   * @param {number} col\n   * @param {number} y\n   * @return {*}\n   */\n  showResizeCol(col: number, y: number) {\n    // this.columnResizerLine.attribute.visible = false;\n    // 基准线\n    const colX = getColX(col, this.table);\n    this.columnResizerLine.setAttributes({\n      visible: true,\n      x: colX,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: this.table.getRowsHeight(0, this.table.rowCount - 1) }\n      ]\n    });\n    this.columnResizerBgLine.setAttributes({\n      visible: true,\n      x: colX,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: this.table.getRowsHeight(0, this.table.rowCount - 1) }\n      ]\n    });\n\n    // 标签\n    // this.columnResizerLabel.setAttribute('visible', true);\n    this.columnResizerLabel.showAll();\n    this.columnResizerLabel.setAttributes({\n      visible: true,\n      x: colX,\n      y\n    });\n    (this.columnResizerLabel.lastChild as WrapText).setAttribute('text', `${this.table.getColWidth(col)}px`);\n  }\n\n  /**\n   * @description: 更新列宽调整组件\n   * @param {number} col\n   * @param {number} y 标签显示的y坐标\n   * @return {*}\n   */\n  updateResizeCol(col: number, y: number) {\n    // 基准线\n    const colX = getColX(col, this.table);\n    // this.columnResizerLine.setAttribute('x', x);\n    this.columnResizerLine.setAttributes({\n      x: colX,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: this.table.getRowsHeight(0, this.table.rowCount - 1) } // todo: 优化points赋值\n      ]\n    });\n    this.columnResizerBgLine.setAttributes({\n      x: colX,\n      points: [\n        { x: 0, y: 0 },\n        { x: 0, y: this.table.getRowsHeight(0, this.table.rowCount - 1) } // todo: 优化points赋值\n      ]\n    });\n\n    // 标签\n    this.columnResizerLabel.setAttributes({\n      x: colX,\n      y\n    });\n    (this.columnResizerLabel.lastChild as WrapText).setAttribute(\n      'text',\n      `${Math.floor(this.table.getColWidth(col))}px`\n    );\n  }\n\n  /**\n   * @description: 隐藏列顺序调整组件\n   * @return {*}\n   */\n  hideMoveCol() {\n    this.cellMover.hide();\n  }\n\n  /**\n   * @description: 显示列顺序调整组件\n   * @param {number} col\n   * @param {number} x\n   * @return {*}\n   */\n  showMoveCol(col: number, row: number, delta: number) {\n    this.cellMover.show(col, row, delta);\n  }\n\n  /**\n   * @description: 更新列顺序调整组件\n   * @param {number} backX\n   * @param {number} lineX\n   * @return {*}\n   */\n  updateMoveCol(backX: number, lineX: number, backY: number, lineY: number) {\n    this.cellMover.update(backX, lineX, backY, lineY);\n  }\n\n  /**\n   * @description: 显示冻结列shadow\n   * @param {number} col\n   * @return {*}\n   */\n  setFrozenColumnShadow(col: number) {\n    if (col < 0) {\n      this.frozenShadowLine.setAttributes({\n        visible: false\n      });\n    } else {\n      const colX = this.table.getColsWidth(0, col);\n      this.frozenShadowLine.setAttributes({\n        visible: true,\n        x: colX,\n        height: this.table.getRowsHeight(0, this.table.rowCount - 1)\n      });\n    }\n  }\n\n  hideVerticalScrollBar() {\n    const visable = this.table.theme.scrollStyle.visible;\n    if (visable !== 'focus' && visable !== 'scrolling') {\n      return;\n    }\n    this.vScrollBar.setAttribute('visible', false);\n    this.vScrollBar.hideAll();\n    this.table.scenegraph.updateNextFrame();\n  }\n  showVerticalScrollBar() {\n    const visable = this.table.theme.scrollStyle.visible;\n    if (visable !== 'focus' && visable !== 'scrolling') {\n      return;\n    }\n    this.vScrollBar.setAttribute('visible', true);\n    this.vScrollBar.showAll();\n    this.table.scenegraph.updateNextFrame();\n  }\n  hideHorizontalScrollBar() {\n    const visable = this.table.theme.scrollStyle.visible;\n    if (visable !== 'focus' && visable !== 'scrolling') {\n      return;\n    }\n    this.hScrollBar.setAttribute('visible', false);\n    this.hScrollBar.hideAll();\n    this.table.scenegraph.updateNextFrame();\n  }\n  showHorizontalScrollBar() {\n    const visable = this.table.theme.scrollStyle.visible;\n    if (visable !== 'focus' && visable !== 'scrolling') {\n      return;\n    }\n    this.hScrollBar.setAttribute('visible', true);\n    this.hScrollBar.showAll();\n    this.table.scenegraph.updateNextFrame();\n  }\n  updateVerticalScrollBarPos(topRatio: number) {\n    const range = this.vScrollBar.attribute.range;\n    const size = range[1] - range[0];\n    const range0 = topRatio * (1 - size);\n    this.vScrollBar.setAttribute('range', [range0, range0 + size]);\n    const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;\n    (this.vScrollBar as any)._viewPosition = {\n      x: bounds.x1,\n      y: bounds.y1\n    };\n  }\n  updateHorizontalScrollBarPos(leftRatio: number) {\n    const range = this.hScrollBar.attribute.range;\n    const size = range[1] - range[0];\n    this.hScrollBar.setAttribute('range', [leftRatio, leftRatio + size]);\n    const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;\n    (this.hScrollBar as any)._viewPosition = {\n      x: bounds.x1,\n      y: bounds.y1\n    };\n  }\n}\n"]}

package/cjs/scenegraph/component/util.d.ts

@@ -0,0 +1,2 @@
+import type { BaseTableAPI } from '../../ts-types/base-table';
+export declare function getColX(col: number, table: BaseTableAPI): number;

package/cjs/scenegraph/component/util.js

@@ -0,0 +1,11 @@
+"use strict";
+
+function getColX(col, table) {
+    let colX = table.getColsWidth(0, col);
+    return col >= table.frozenColCount && (colX -= table.scrollLeft), colX;
+}
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.getColX = void 0, exports.getColX = getColX;
+//# sourceMappingURL=util.js.map

package/cjs/scenegraph/component/util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scenegraph/component/util.ts"],"names":[],"mappings":";;;AAEA,SAAgB,OAAO,CAAC,GAAW,EAAE,KAAmB;IACtD,IAAI,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtC,IAAI,GAAG,IAAI,KAAK,CAAC,cAAc,EAAE;QAC/B,IAAI,IAAI,KAAK,CAAC,UAAU,CAAC;KAC1B;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAND,0BAMC","file":"util.js","sourcesContent":["import type { BaseTableAPI } from '../../ts-types/base-table';\n\nexport function getColX(col: number, table: BaseTableAPI) {\n  let colX = table.getColsWidth(0, col);\n  if (col >= table.frozenColCount) {\n    colX -= table.scrollLeft;\n  }\n  return colX;\n}\n"]}

package/cjs/scenegraph/debug-tool/debug-tool.d.ts

@@ -0,0 +1,36 @@
+import type { FederatedPointerEvent, IStage, IRect, IGraphic } from '@visactor/vrender';
+export interface DebugToolOptions {
+    container?: HTMLElement;
+    infoPosition?: 'tl' | 'tr' | 'bl' | 'br';
+    infoWidth?: number;
+    infoHeight?: number;
+    mode?: 'hover' | 'click';
+    customGrapicKeys?: string[];
+}
+export declare class DebugTool {
+    _stage: IStage;
+    _infoContainer: HTMLElement;
+    _highlightRect: HTMLElement;
+    _target: IGraphic;
+    _rect: IRect;
+    _mode: 'hover' | 'click';
+    _customGrapicKeys?: string[];
+    _modeTip: HTMLElement;
+    _callback: {
+        pointermove: (e: FederatedPointerEvent) => void;
+        pointerup: (e: FederatedPointerEvent) => void;
+        pointerleave: (e: FederatedPointerEvent) => void;
+        keydown: (e: KeyboardEvent) => void;
+    };
+    constructor(stage: IStage, options?: DebugToolOptions);
+    createInfoContainer(options?: DebugToolOptions): void;
+    createHighlightRect(): void;
+    bindStageEvent(): void;
+    addHighlightBounds(bounds: any): void;
+    removeHighlightBounds(): void;
+    updateInfo(): void;
+    clearInfo(): void;
+    updateMode(): void;
+    bindKeyEvent(): void;
+    release(): void;
+}

package/cjs/scenegraph/debug-tool/debug-tool.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DebugTool = void 0;
+
+const vrender_1 = require("@visactor/vrender"), json_formatter_js_1 = __importDefault(require("json-formatter-js"));
+
+class DebugTool {
+    constructor(stage, options) {
+        this._mode = "hover", this._stage = stage, this._callback = {}, (null == options ? void 0 : options.customGrapicKeys) && (this._customGrapicKeys = options.customGrapicKeys), 
+        (null == options ? void 0 : options.container) ? this._infoContainer = options.container : this.createInfoContainer(options), 
+        this.createHighlightRect(), this.bindStageEvent(), this.bindKeyEvent();
+    }
+    createInfoContainer(options) {
+        const position = (null == options ? void 0 : options.infoPosition) || "tr", width = (null == options ? void 0 : options.infoWidth) || 300, height = (null == options ? void 0 : options.infoPosition) || 400;
+        switch (this._infoContainer = document.createElement("div"), this._infoContainer.style.position = "fixed", 
+        this._infoContainer.style.width = `${width}px`, this._infoContainer.style.height = `${height}px`, 
+        this._infoContainer.style.backgroundColor = "rgba(210, 210, 210, 0.3)", this._infoContainer.style.overflow = "auto", 
+        this._infoContainer.style.display = "none", position) {
+          case "tl":
+            this._infoContainer.style.top = "0px", this._infoContainer.style.left = "0px";
+            break;
+
+          case "tr":
+            this._infoContainer.style.top = "0px", this._infoContainer.style.right = "0px";
+            break;
+
+          case "bl":
+            this._infoContainer.style.bottom = "0px", this._infoContainer.style.left = "0px";
+            break;
+
+          case "br":
+            this._infoContainer.style.bottom = "0px", this._infoContainer.style.right = "0px";
+        }
+        const tip = document.createElement("div"), tipSpan1 = document.createElement("span");
+        tipSpan1.innerText = "debug 模式：", tip.appendChild(tipSpan1), this._modeTip = document.createElement("span"), 
+        this._modeTip.innerText = this._mode, tip.appendChild(this._modeTip);
+        const tipSpan2 = document.createElement("span");
+        tipSpan2.innerText = "（shift + s改变模式；shift + d控制台输出target graphic）", tip.appendChild(tipSpan2), 
+        this._infoContainer.appendChild(tip), this._stage.window.getContainer().append(this._infoContainer);
+    }
+    createHighlightRect() {
+        const container = this._stage.window.getContainer();
+        this._highlightRect = document.createElement("div"), this._highlightRect.style.display = "absolute", 
+        this._highlightRect.style.border = "1px solid red", this._highlightRect.style.pointerEvents = "none", 
+        this._highlightRect.style.position = "absolute", container.appendChild(this._highlightRect);
+    }
+    bindStageEvent() {
+        this._rect = (0, vrender_1.createRect)({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            fill: !1,
+            stroke: !0,
+            strokeColor: "red",
+            lineWidth: 1,
+            pickable: !1,
+            visible: !1
+        }), this._stage.defaultLayer.appendChild(this._rect), this._callback.pointermove = e => {
+            "hover" !== this._mode || (e.target && e.target !== this._target ? (this._target = e.target, 
+            this.addHighlightBounds(this._target.globalAABBBounds), setTimeout((() => {
+                this.updateInfo();
+            }), 100)) : e.target || (this._target = void 0, this.removeHighlightBounds(), this.clearInfo()));
+        }, this._stage.addEventListener("pointermove", this._callback.pointermove), this._callback.pointerup = e => {
+            "click" !== this._mode || (e.target && e.target !== this._target ? (this._target = e.target, 
+            this.addHighlightBounds(this._target.globalAABBBounds), setTimeout((() => {
+                this.updateInfo();
+            }), 100)) : e.target || (this._target = void 0, this.removeHighlightBounds(), this.clearInfo()));
+        }, this._stage.addEventListener("pointerup", this._callback.pointerup), this._callback.pointerleave = e => {
+            "hover" === this._mode && (this._target = void 0, this.removeHighlightBounds(), 
+            this.clearInfo());
+        }, this._stage.addEventListener("pointerleave", this._callback.pointerleave);
+    }
+    addHighlightBounds(bounds) {
+        this._highlightRect.style.left = `${bounds.x1}px`, this._highlightRect.style.top = `${bounds.y1}px`, 
+        this._highlightRect.style.width = `${bounds.width()}px`, this._highlightRect.style.height = `${bounds.height()}px`;
+    }
+    removeHighlightBounds() {
+        this._rect.setAttribute("visible", !1), this._stage.renderNextFrame();
+    }
+    updateInfo() {
+        if (!this._target) return;
+        this._infoContainer.children.length > 1 && this._infoContainer.removeChild(this._infoContainer.children[1]), 
+        this._infoContainer.style.display = "block";
+        const info = {
+            customKeys: {},
+            type: this._target.type,
+            globalX: this._target.globalTransMatrix.e,
+            globalY: this._target.globalTransMatrix.f,
+            attribute: this._target.attribute,
+            theme: (0, vrender_1.getTheme)(this._target)[this._target.type],
+            target: this._target
+        };
+        this._customGrapicKeys ? this._customGrapicKeys.forEach((key => {
+            info.customKeys[key] = this._target[key];
+        })) : delete info.customKeys;
+        const formatter = new json_formatter_js_1.default(info, 2);
+        this._infoContainer.appendChild(formatter.render());
+    }
+    clearInfo() {
+        this._infoContainer.style.display = "none";
+    }
+    updateMode() {
+        this._modeTip.innerText = this._mode;
+    }
+    bindKeyEvent() {
+        this._callback.keydown = e => {
+            if ("D" === e.key) console.log(this._target); else if ("S" === e.key) {
+                switch (this._mode) {
+                  case "click":
+                    this._mode = "hover";
+                    break;
+
+                  case "hover":
+                    this._mode = "click";
+                }
+                this.updateMode();
+            }
+        }, window.addEventListener("keydown", this._callback.keydown);
+    }
+    release() {
+        document.body.removeChild(this._infoContainer), this._highlightRect.parentElement.removeChild(this._highlightRect), 
+        this._stage.defaultLayer.removeChild(this._rect), this._stage.removeEventListener("pointermove", this._callback.pointermove), 
+        this._stage.removeEventListener("pointerup", this._callback.pointerup), this._stage.removeEventListener("pointerleave", this._callback.pointerleave), 
+        window.removeEventListener("keydown", this._callback.keydown);
+    }
+}
+
+exports.DebugTool = DebugTool;
+//# sourceMappingURL=debug-tool.js.map