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

package/es/menu/dom/MenuHandler.js

@@ -0,0 +1,132 @@
+import { Container, Menu } from "./Menu";
+
+import { cellInRange } from "../../tools/helper";
+
+import { TABLE_EVENT_TYPE } from "../../core/TABLE_EVENT_TYPE";
+
+const MENU_INSTANCE_FACTORY = {
+    "dropdown-menu": function(table) {
+        return new Menu(table);
+    },
+    "context-menu": function(table) {
+        return new Menu(table);
+    },
+    container: table => new Container(table)
+};
+
+function getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions) {
+    var _a;
+    const {lineHeight: lineHeight, textBaseline: textBaseline, textStick: textStick} = table._getCellStyle(col, row);
+    let rect = table.getCellRangeRelativeRect(table.getCellRange(col, row));
+    textStick && (rect = table.getVisibleCellRangeRelativeRect({
+        col: col,
+        row: row
+    }));
+    let {left: left, right: right, bottom: bottom, top: top, width: width, height: height} = rect;
+    if (table.isHeader(col, row) && ({left: left, right: right, bottom: bottom, top: top, width: width, height: height} = table.internalProps.headerHelper.getDropDownIconRect(rect, lineHeight, textBaseline || "middle")), 
+    null == dropDownMenuOptions ? void 0 : dropDownMenuOptions.content) return {
+        type: type,
+        position: dropDownMenuOptions.position,
+        referencePosition: null !== (_a = dropDownMenuOptions.referencePosition) && void 0 !== _a ? _a : {
+            rect: {
+                left: left,
+                right: right,
+                top: top,
+                bottom: bottom,
+                width: width,
+                height: height
+            }
+        },
+        content: dropDownMenuOptions.content
+    };
+    if ("dropdown-menu" === type) {
+        const {dropDownMenu: dropDownMenu = table.globalDropDownMenu, pivotInfo: pivotInfo} = table._getHeaderLayoutMap(col, row);
+        return {
+            type: type,
+            referencePosition: {
+                rect: {
+                    left: left,
+                    right: right,
+                    top: top,
+                    bottom: bottom,
+                    width: width,
+                    height: height
+                }
+            },
+            content: dropDownMenu,
+            pivotInfo: pivotInfo
+        };
+    }
+    return null;
+}
+
+export class MenuHandler {
+    constructor(table) {
+        this._table = table, this._menuInstances = {}, this._bindTableEvent(table);
+    }
+    dispose() {
+        const menuInstances = this._menuInstances;
+        for (const k in menuInstances) menuInstances[k].dispose();
+        delete this._menuInstances, this._attachInfo = null;
+    }
+    _bindToCell(col, row, type, dropDownMenuOptions) {
+        var _a;
+        const info = this._attachInfo, instanceInfo = this._getMenuInstanceInfo(col, row, type, dropDownMenuOptions);
+        if (!info || instanceInfo && info.instance === instanceInfo.instance || (null === (_a = info.instance) || void 0 === _a || _a.unbindMenuElement(), 
+        this._attachInfo = null), !instanceInfo) return;
+        const {instance: instance, info: menuInstanceInfo} = instanceInfo;
+        if (instance && instance.bindMenuElement(col, row, menuInstanceInfo)) {
+            const range = this._table.getCellRange(col, row);
+            this._attachInfo = {
+                range: range,
+                instance: instance
+            };
+        }
+    }
+    _unbindFromCell() {
+        const info = this._attachInfo;
+        if (!info) return;
+        const {instance: instance} = info;
+        null == instance || instance.unbindMenuElement(), this._attachInfo = null;
+    }
+    _isBindToCell(col, row) {
+        const info = this._attachInfo;
+        return !!info && cellInRange(info.range, col, row);
+    }
+    pointInMenuElement(x, y) {
+        if (!this._attachInfo) return !1;
+        const info = this._attachInfo, {instance: instance} = info;
+        return instance.pointInMenuElement(x, y);
+    }
+    _bindTableEvent(table) {
+        table.listen(TABLE_EVENT_TYPE.DROPDOWN_ICON_CLICK, (e => {
+            this._attachInfo && this._isBindToCell(e.col, e.row) ? this._unbindFromCell() : this._bindToCell(e.col, e.row, "dropdown-menu");
+        })), table.listen(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, (e => {
+            this._unbindFromCell();
+        })), table.listen(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, (e => {
+            var _a, _b, _c, _d;
+            if ("html" === (null === (_a = table.internalProps.menu) || void 0 === _a ? void 0 : _a.renderMode)) {
+                const abstractPos = table._getMouseAbstractPoint(e.event, !1);
+                let menu = null;
+                abstractPos && "function" == typeof (null === (_b = table.internalProps.menu) || void 0 === _b ? void 0 : _b.contextMenuItems) ? menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row), e.row) : abstractPos && Array.isArray(null === (_c = table.internalProps.menu) || void 0 === _c ? void 0 : _c.contextMenuItems) && (menu = null === (_d = table.internalProps.menu) || void 0 === _d ? void 0 : _d.contextMenuItems), 
+                this._bindToCell(e.col, e.row, "context-menu", {
+                    content: menu,
+                    position: {
+                        x: abstractPos.x,
+                        y: abstractPos.y
+                    }
+                });
+            }
+        }));
+    }
+    _getMenuInstanceInfo(col, row, type, dropDownMenuOptions) {
+        const table = this._table, menuInstances = this._menuInstances, info = getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions);
+        if (!info) return null;
+        return {
+            instance: menuInstances && menuInstances[type] || menuInstances && (menuInstances[type] = MENU_INSTANCE_FACTORY[type](table)),
+            type: type,
+            info: info
+        };
+    }
+}
+//# sourceMappingURL=MenuHandler.js.map

package/es/menu/dom/MenuHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["menu/dom/MenuHandler.ts"],"names":[],"mappings":"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","file":"MenuHandler.js","sourcesContent":["import type { CellRange, DropDownMenuOptions, MenuInstanceInfo, MenuInstanceType } from '../../ts-types';\nimport type { BaseMenu } from './BaseMenu';\nimport { Container, Menu } from './Menu';\nimport { cellInRange } from '../../tools/helper';\nimport { TABLE_EVENT_TYPE } from '../../core/TABLE_EVENT_TYPE';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\n// import { DEFAULTFONT } from '../../tools/global';\n// import { getFontSize } from '../../tools/canvases';\n\nconst MENU_INSTANCE_FACTORY = {\n  'dropdown-menu': function (table: BaseTableAPI): BaseMenu {\n    return new Menu(table);\n  },\n  'context-menu': function (table: BaseTableAPI): BaseMenu {\n    return new Menu(table);\n  },\n  container(table: BaseTableAPI): BaseMenu {\n    return new Container(table);\n  }\n};\n\n/** 获取下拉菜单展示内容及坐标位置 */\nfunction getMenuInstanceInfo(\n  table: BaseTableAPI,\n  col: number,\n  row: number,\n  type: MenuInstanceType,\n  dropDownMenuOptions?: DropDownMenuOptions\n): MenuInstanceInfo | null {\n  const { lineHeight, textBaseline, textStick } = table._getCellStyle(col, row);\n  // table.internalProps.layoutMap.getHeader(col, row).style ?? {};\n  // const lineHeight = getFontSize(table.getContext(), font).height;\n  let rect = table.getCellRangeRelativeRect(table.getCellRange(col, row));\n  if (textStick) {\n    rect = table.getVisibleCellRangeRelativeRect({ col, row });\n  }\n\n  let { left, right, bottom, top, width, height } = rect;\n  if (table.isHeader(col, row)) {\n    ({ left, right, bottom, top, width, height } = table.internalProps.headerHelper.getDropDownIconRect(\n      rect,\n      // paddingArray[1]\n      lineHeight as number,\n      textBaseline || 'middle'\n    ));\n  }\n  if (dropDownMenuOptions?.content) {\n    //如果有指定的下拉菜单内容\n    return {\n      type,\n      position: dropDownMenuOptions.position,\n      referencePosition: dropDownMenuOptions.referencePosition ?? {\n        rect: {\n          left,\n          right,\n          top,\n          bottom,\n          width,\n          height\n        }\n      },\n      content: dropDownMenuOptions.content\n    };\n  } // 没有指定的下拉菜单 从headerLayout中获取下拉菜单内容\n  else if (type === 'dropdown-menu') {\n    // 获取下拉菜单信息及位置 注：这里逻辑特指内置的下拉菜单\n    const { dropDownMenu = table.globalDropDownMenu, pivotInfo } = table._getHeaderLayoutMap(col, row);\n\n    // const x = (left + right) / 2;\n    // const y = bottom;\n\n    return {\n      type,\n      // position: {\n      //   x,\n      //   y,\n      // },\n      referencePosition: {\n        rect: {\n          left,\n          right,\n          top,\n          bottom,\n          width,\n          height\n        }\n      },\n      content: dropDownMenu,\n      pivotInfo\n    };\n  }\n  // else if (type === 'context-menu') {\n  //   // 获取右键菜单信息及位置\n  //   const abstractPos = table._getMouseAbstractPoint(event, false);\n  //   let menu = null;\n  //   if (abstractPos && typeof table.options.contextmenu === 'function') {\n  //     menu = table.options.contextmenu(table.getHeaderField(col, row) as string, row);\n  //   } else if (abstractPos && Array.isArray(table.options.contextmenu)) {\n  //     menu = table.options.contextmenu;\n  //   }\n  //   return {\n  //     position: {\n  //       x: abstractPos.x,\n  //       y: abstractPos.y,\n  //     },\n  //     type,\n  //     content: menu,\n  //   };\n  // }\n  return null;\n}\n\ntype AttachInfo = {\n  instance?: BaseMenu;\n  range: CellRange;\n};\n\nexport class MenuHandler {\n  private _table: BaseTableAPI;\n  private _menuInstances?: { [type: string]: BaseMenu };\n  private _attachInfo?: AttachInfo | null;\n  constructor(table: BaseTableAPI) {\n    this._table = table;\n    this._menuInstances = {};\n    this._bindTableEvent(table);\n  }\n  dispose(): void {\n    const menuInstances = this._menuInstances;\n    for (const k in menuInstances) {\n      menuInstances[k].dispose();\n    }\n    delete this._menuInstances;\n    this._attachInfo = null;\n  }\n  _bindToCell(col: number, row: number, type: MenuInstanceType, dropDownMenuOptions?: DropDownMenuOptions): void {\n    const info = this._attachInfo;\n    const instanceInfo = this._getMenuInstanceInfo(col, row, type, dropDownMenuOptions);\n    if (info && (!instanceInfo || info.instance !== instanceInfo.instance)) {\n      info.instance?.unbindMenuElement();\n      this._attachInfo = null;\n    }\n    if (!instanceInfo) {\n      return;\n    }\n    const { instance, info: menuInstanceInfo } = instanceInfo;\n    const attach = instance && instance.bindMenuElement(col, row, menuInstanceInfo);\n    if (attach) {\n      const range = this._table.getCellRange(col, row);\n      this._attachInfo = { range, instance };\n    }\n  }\n  _unbindFromCell(): void {\n    const info = this._attachInfo;\n    if (!info) {\n      return;\n    }\n    const { instance } = info;\n    instance?.unbindMenuElement();\n    this._attachInfo = null;\n    // this._table.showHoverIcon = undefined;\n  }\n  _isBindToCell(col: number, row: number): boolean {\n    const info = this._attachInfo;\n    if (!info) {\n      return false;\n    }\n    return cellInRange(info.range, col, row);\n  }\n  /** 鼠标坐标位置 是否位于下拉菜单内 */\n  pointInMenuElement(x: number, y: number) {\n    if (!this._attachInfo) {\n      return false;\n    }\n    const info = this._attachInfo;\n    const { instance } = info;\n    return instance.pointInMenuElement(x, y);\n  }\n  _bindTableEvent(table: BaseTableAPI): void {\n    // 监听按钮点击事件\n    // 三种情况：\n    // 1. 没有菜单，点击弹出菜单\n    // 2. 已显示菜单，点击关闭菜单\n    // 3. 已显示菜单，点击其他菜单按钮，关闭当前菜单，显示另一菜单\n    table.listen(TABLE_EVENT_TYPE.DROPDOWN_ICON_CLICK, e => {\n      if (this._attachInfo) {\n        if (this._isBindToCell(e.col, e.row)) {\n          this._unbindFromCell();\n        } else {\n          this._bindToCell(e.col, e.row, 'dropdown-menu');\n        }\n      } else {\n        this._bindToCell(e.col, e.row, 'dropdown-menu');\n      }\n    });\n    // 监听菜单清除事件\n    table.listen(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, e => {\n      this._unbindFromCell();\n    });\n    // 监听右键菜单\n    table.listen(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, e => {\n      if (table.internalProps.menu?.renderMode === 'html') {\n        // 获取右键菜单信息及位置\n        const abstractPos = table._getMouseAbstractPoint(e.event, false);\n        let menu = null;\n        if (abstractPos && typeof table.internalProps.menu?.contextMenuItems === 'function') {\n          menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row) as string, e.row);\n        } else if (abstractPos && Array.isArray(table.internalProps.menu?.contextMenuItems)) {\n          menu = table.internalProps.menu?.contextMenuItems;\n        }\n        this._bindToCell(e.col, e.row, 'context-menu', {\n          content: menu,\n          position: { x: abstractPos.x, y: abstractPos.y }\n        });\n      }\n    });\n  }\n  _getMenuInstanceInfo(\n    col: number,\n    row: number,\n    type: MenuInstanceType,\n    dropDownMenuOptions?: DropDownMenuOptions\n  ): {\n    instance?: BaseMenu;\n    type: MenuInstanceType;\n    info: MenuInstanceInfo;\n  } | null {\n    const table = this._table;\n    const menuInstances = this._menuInstances;\n\n    const info = getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions);\n    if (!info) {\n      return null;\n    }\n\n    // const { type } = info;\n    const instance =\n      (menuInstances && menuInstances[type]) ||\n      (menuInstances && (menuInstances[type] = MENU_INSTANCE_FACTORY[type](table)));\n\n    return {\n      instance,\n      type,\n      info\n    };\n  }\n}\n"]}

package/es/menu/dom/logic/MenuContainer.d.ts

@@ -0,0 +1,22 @@
+import type { MenuInstanceInfo, Placement, RectProps } from '../../../ts-types';
+import './MenuElement.css';
+import type { BaseTableAPI } from '../../../ts-types/base-table';
+export declare class MenuContainer {
+    private _handler;
+    private _rootElement?;
+    private _menuInstanceInfo?;
+    constructor(table: BaseTableAPI);
+    get rootElement(): HTMLElement;
+    dispose(): void;
+    bindToCell(table: BaseTableAPI, col: number, row: number, menuInstanceInfo: MenuInstanceInfo): boolean;
+    unbindFromCell(): void;
+    _canBindToCell(table: BaseTableAPI, col: number, row: number): boolean;
+    _bindCell(table: BaseTableAPI, col: number, row: number, position: {
+        x: number;
+        y: number;
+    }, referencePosition: {
+        rect: RectProps;
+        placement?: Placement;
+    }): boolean;
+    pointInMenuElement(x: number, y: number): boolean;
+}

package/es/menu/dom/logic/MenuContainer.js

@@ -0,0 +1,105 @@
+import { EventHandler } from "../../../event/EventHandler";
+
+import { createElement } from "../../../tools/dom";
+
+import "./MenuElement.css";
+
+import { TABLE_EVENT_TYPE } from "../../../core/TABLE_EVENT_TYPE";
+
+const CLASSNAME = "vtable__menu-element", HIDDEN_CLASSNAME = `${CLASSNAME}--hidden`, SHOWN_CLASSNAME = `${CLASSNAME}--shown`;
+
+function createMenuDomElement() {
+    return createElement("div", [ CLASSNAME, HIDDEN_CLASSNAME ]);
+}
+
+export class MenuContainer {
+    constructor(table) {
+        var _a, _b, _c;
+        this._handler = new EventHandler, this._rootElement = createMenuDomElement(), null === (_a = this._rootElement) || void 0 === _a || _a.addEventListener("mousedown", (e => {
+            e.stopPropagation(), e.preventDefault();
+        })), null === (_b = this._rootElement) || void 0 === _b || _b.addEventListener("click", (e => {
+            if (e.stopPropagation(), e.preventDefault(), this._rootElement.classList.contains(HIDDEN_CLASSNAME)) return;
+            const {col: col, row: row, dropDownIndex: dropDownIndex, menuKey: menuKey, text: text, hasChildren: hasChildren} = e.target;
+            if ("number" != typeof dropDownIndex || hasChildren) return void e.stopPropagation();
+            const field = table.isPivotTable() ? table.internalProps.layoutMap.getPivotDimensionInfo(col, row) : table.getHeaderField(col, row), highlight = table._dropDownMenuIsHighlight(col, row, dropDownIndex);
+            table.fireListeners(TABLE_EVENT_TYPE.DROPDOWNMENU_CLICK, {
+                col: col,
+                row: row,
+                field: field,
+                menuKey: menuKey,
+                text: text,
+                highlight: highlight,
+                cellType: table.getCellType(col, row)
+            }), table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null), table.fireListeners(TABLE_EVENT_TYPE.HIDE_MENU), 
+            e.stopPropagation();
+        })), null === (_c = this._rootElement) || void 0 === _c || _c.addEventListener("mousemove", (e => {
+            this._rootElement.classList.contains(HIDDEN_CLASSNAME) || e.stopPropagation();
+        }));
+    }
+    get rootElement() {
+        return this._rootElement;
+    }
+    dispose() {
+        this.unbindFromCell();
+        const rootElement = this._rootElement;
+        (null == rootElement ? void 0 : rootElement.parentElement) && rootElement.parentElement.removeChild(rootElement), 
+        this._handler.dispose(), delete this._rootElement;
+    }
+    bindToCell(table, col, row, menuInstanceInfo) {
+        const rootElement = this._rootElement;
+        if (this._menuInstanceInfo = menuInstanceInfo, null == rootElement || rootElement.classList.remove(SHOWN_CLASSNAME), 
+        null == rootElement || rootElement.classList.add(HIDDEN_CLASSNAME), this._canBindToCell(table, col, row)) {
+            rootElement.innerHTML = "", rootElement.appendChild(menuInstanceInfo.content);
+            if (this._bindCell(table, col, row, menuInstanceInfo.position, menuInstanceInfo.referencePosition)) return null == rootElement || rootElement.classList.add(SHOWN_CLASSNAME), 
+            null == rootElement || rootElement.classList.remove(HIDDEN_CLASSNAME), !0;
+        } else this.unbindFromCell();
+        return !1;
+    }
+    unbindFromCell() {
+        const rootElement = this._rootElement;
+        this._menuInstanceInfo = void 0, (null == rootElement ? void 0 : rootElement.parentElement) && (rootElement.classList.remove(SHOWN_CLASSNAME), 
+        rootElement.classList.add(HIDDEN_CLASSNAME));
+    }
+    _canBindToCell(table, col, row) {
+        const rect = table.getCellRangeRelativeRect({
+            col: col,
+            row: row
+        }), element = table.getElement(), {top: top, bottom: bottom, left: left, right: right} = rect, {frozenRowCount: frozenRowCount, frozenColCount: frozenColCount} = table;
+        if (row >= frozenRowCount && frozenRowCount > 0) {
+            if (bottom < table.getCellRangeRelativeRect({
+                col: col,
+                row: frozenRowCount - 1
+            }).bottom) return !1;
+        } else if (bottom < 0) return !1;
+        if (col >= frozenColCount && frozenColCount > 0) {
+            if (right < table.getCellRangeRelativeRect({
+                col: frozenColCount - 1,
+                row: row
+            }).right) return !1;
+        } else if (right < 0) return !1;
+        const {offsetHeight: offsetHeight, offsetWidth: offsetWidth} = element;
+        return !(offsetHeight < top) && !(offsetWidth < left);
+    }
+    _bindCell(table, col, row, position, referencePosition) {
+        const rootElement = this._rootElement, element = table.getElement(), {width: containerWidth, height: containerHeight} = table.internalProps.element.getBoundingClientRect();
+        if (rootElement) {
+            rootElement.parentElement !== element && element.appendChild(rootElement), rootElement.style.left = "0px";
+            const maxWidth = .8 * containerWidth;
+            rootElement.style.maxWidth = `${maxWidth}px`;
+            const rootElementWidth = rootElement.clientWidth, rootElementHeight = rootElement.clientHeight;
+            let rootElementLeft, rootElementTop;
+            return position && (rootElementLeft = position.x, rootElementTop = position.y), 
+            referencePosition && (rootElementLeft = referencePosition.rect.right - rootElementWidth, 
+            rootElementTop = referencePosition.rect.bottom), rootElementTop + rootElementHeight > containerHeight && (rootElementTop = containerHeight - rootElementHeight, 
+            rootElementLeft += rootElementWidth - 2), rootElementTop < 0 && (rootElementTop /= 2), 
+            rootElement.style.top = `${rootElementTop}px`, rootElementLeft < 0 ? rootElementLeft = 0 : rootElementLeft + rootElementWidth > containerWidth && (rootElementLeft = containerWidth - rootElementWidth), 
+            rootElement.style.left = `${rootElementLeft}px`, !0;
+        }
+        return !1;
+    }
+    pointInMenuElement(x, y) {
+        const rootElement = this._rootElement, {x: rootLeft, y: rootTop, width: rootWidth, height: rootHeight} = rootElement.getBoundingClientRect();
+        return x > rootLeft - 5 && x < rootLeft + rootWidth + 5 && y > rootTop - 5 && y < rootTop + rootHeight + 5;
+    }
+}
+//# sourceMappingURL=MenuContainer.js.map

package/es/menu/dom/logic/MenuContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["menu/dom/logic/MenuContainer.ts"],"names":[],"mappings":"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","file":"MenuContainer.js","sourcesContent":["import { EventHandler } from '../../../event/EventHandler';\nimport type { MenuInstanceInfo, Placement, RectProps } from '../../../ts-types';\nimport { createElement } from '../../../tools/dom';\nimport './MenuElement.css';\nimport { TABLE_EVENT_TYPE } from '../../../core/TABLE_EVENT_TYPE';\nimport type { PivotHeaderLayoutMap } from '../../../layout/pivot-header-layout';\nimport type { BaseTableAPI } from '../../../ts-types/base-table';\n\nconst CLASSNAME = 'vtable__menu-element';\nconst HIDDEN_CLASSNAME = `${CLASSNAME}--hidden`;\nconst SHOWN_CLASSNAME = `${CLASSNAME}--shown`;\n\nfunction createMenuDomElement(): HTMLElement {\n  // require(\"@/menu/tools/MenuElement.css\");\n  // require('./MenuElement.css');\n  const rootElement = createElement('div', [CLASSNAME, HIDDEN_CLASSNAME]);\n  // const messageElement = createElement('pre', {\n  //   classList: [CONTENT_CLASSNAME],\n  // });\n  // rootElement.appendChild(messageElement);\n  return rootElement;\n}\n\nexport class MenuContainer {\n  private _handler: EventHandler;\n  private _rootElement?: HTMLElement;\n  private _menuInstanceInfo?: MenuInstanceInfo;\n  constructor(table: BaseTableAPI) {\n    this._handler = new EventHandler();\n    this._rootElement = createMenuDomElement();\n\n    // 绑定交互事件\n    this._rootElement?.addEventListener('mousedown', e => {\n      e.stopPropagation();\n      e.preventDefault();\n    });\n    this._rootElement?.addEventListener('click', e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (this._rootElement.classList.contains(HIDDEN_CLASSNAME)) {\n        return;\n      }\n      // console.log('menu mousedown', e);\n      // 触发菜单条目点击事件\n      const { col, row, dropDownIndex, menuKey, text, hasChildren } = e.target as any;\n      if (typeof dropDownIndex !== 'number' || hasChildren) {\n        e.stopPropagation();\n        return;\n      }\n      // const field = table.getHeaderField(col, row);\n      const field = table.isPivotTable()\n        ? (table.internalProps.layoutMap as PivotHeaderLayoutMap).getPivotDimensionInfo(col, row)\n        : table.getHeaderField(col, row);\n\n      const highlight = table._dropDownMenuIsHighlight(col, row, dropDownIndex);\n      table.fireListeners(TABLE_EVENT_TYPE.DROPDOWNMENU_CLICK, {\n        col,\n        row,\n        field: <string>field,\n        menuKey,\n        // fieldKey,\n        // dropDownIndex,\n        text,\n        highlight,\n        cellType: table.getCellType(col, row)\n      });\n\n      table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单\n      table.fireListeners(TABLE_EVENT_TYPE.HIDE_MENU); // 清除菜单\n      // table.invalidateCell(col, row); // 更新状态图表\n      e.stopPropagation();\n    });\n    this._rootElement?.addEventListener('mousemove', e => {\n      if (this._rootElement.classList.contains(HIDDEN_CLASSNAME)) {\n        return;\n      }\n      // console.log('menu mousemove', e);\n      // table.hoverIcon = undefined;\n\n      e.stopPropagation();\n    });\n    // this._rootElement?.addEventListener('mouseenter', () => {\n    //   if (this._rootElement.classList.contains(HIDDEN_CLASSNAME)) return;\n    //   if (!table.hoverIcon) return;\n    //   // console.log('menu mousemove', e);\n    //   table.showHoverIcon = table.hoverIcon;\n    //   table.hoverIcon = undefined; // 避免在hover icon后不能交互表格区域\n    //   table.invalidateCell(table.showHoverIcon.col, table.showHoverIcon.row);\n    //   // console.log('showHoverIcon', table.showHoverIcon);\n    // });\n    // this._rootElement?.addEventListener('blur', () => {\n    //   // table.fireListeners(LG_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单\n    //   table.showHoverIcon = undefined;\n    // });\n  }\n  get rootElement() {\n    return this._rootElement;\n  }\n  dispose(): void {\n    this.unbindFromCell();\n\n    const rootElement = this._rootElement;\n    if (rootElement?.parentElement) {\n      rootElement.parentElement.removeChild(rootElement);\n    }\n\n    this._handler.dispose();\n    delete this._rootElement;\n    // delete this._messageElement;\n  }\n  bindToCell(table: BaseTableAPI, col: number, row: number, menuInstanceInfo: MenuInstanceInfo): boolean {\n    const rootElement = this._rootElement;\n    this._menuInstanceInfo = menuInstanceInfo;\n    // const messageElement = this._messageElement;\n\n    rootElement?.classList.remove(SHOWN_CLASSNAME);\n    rootElement?.classList.add(HIDDEN_CLASSNAME);\n\n    if (this._canBindToCell(table, col, row)) {\n      rootElement.innerHTML = '';\n      rootElement.appendChild(<HTMLElement>menuInstanceInfo.content);\n\n      const binded = this._bindCell(table, col, row, menuInstanceInfo.position, menuInstanceInfo.referencePosition);\n\n      if (binded) {\n        rootElement?.classList.add(SHOWN_CLASSNAME);\n        rootElement?.classList.remove(HIDDEN_CLASSNAME);\n        return true;\n      }\n    } else {\n      this.unbindFromCell();\n    }\n    return false;\n  }\n  unbindFromCell(): void {\n    const rootElement = this._rootElement;\n    this._menuInstanceInfo = undefined;\n    if (rootElement?.parentElement) {\n      // rootElement.parentElement.removeChild(rootElement);\n      rootElement.classList.remove(SHOWN_CLASSNAME);\n      rootElement.classList.add(HIDDEN_CLASSNAME);\n    }\n  }\n  _canBindToCell(table: BaseTableAPI, col: number, row: number): boolean {\n    const rect = table.getCellRangeRelativeRect({ col, row });\n    const element = table.getElement();\n    const { top, bottom, left, right } = rect;\n    const { frozenRowCount, frozenColCount } = table;\n    if (row >= frozenRowCount && frozenRowCount > 0) {\n      const frozenRect = table.getCellRangeRelativeRect({ col, row: frozenRowCount - 1 });\n      if (bottom < frozenRect.bottom) {\n        return false;\n      }\n    } else if (bottom < 0) {\n      return false;\n    }\n    if (col >= frozenColCount && frozenColCount > 0) {\n      const frozenRect = table.getCellRangeRelativeRect({ col: frozenColCount - 1, row });\n      if (right < frozenRect.right) {\n        //整个是被冻结列盖住的 不需要提示toolTip\n        return false;\n      }\n    } else if (right < 0) {\n      return false;\n    }\n    const { offsetHeight, offsetWidth } = element;\n    if (offsetHeight < top) {\n      return false;\n    }\n    if (offsetWidth < left) {\n      return false;\n    }\n    return true;\n  }\n  _bindCell(\n    table: BaseTableAPI,\n    col: number,\n    row: number,\n    position: { x: number; y: number },\n    referencePosition: { rect: RectProps; placement?: Placement }\n  ): boolean {\n    const rootElement = this._rootElement;\n    const element = table.getElement();\n    const { width: containerWidth, height: containerHeight } = table.internalProps.element.getBoundingClientRect();\n    if (rootElement) {\n      if (rootElement.parentElement !== element) {\n        element.appendChild(rootElement); // 之前在做dom边缘躲避的时候放到了table.getParentElement()上，但发现不是相对定位导致位置错位\n      }\n      rootElement.style.left = `0px`;\n      //设置最宽尺寸\n      const maxWidth = containerWidth * 0.8;\n      rootElement.style.maxWidth = `${maxWidth}px`;\n      //计算弹出框的宽度\n      const rootElementWidth = rootElement.clientWidth;\n      const rootElementHeight = rootElement.clientHeight;\n      let rootElementLeft;\n      let rootElementTop;\n      if (position) {\n        rootElementLeft = position.x;\n        rootElementTop = position.y;\n      }\n      if (referencePosition) {\n        rootElementLeft = referencePosition.rect.right - rootElementWidth;\n        rootElementTop = referencePosition.rect.bottom;\n      }\n      //  rootElementLeft = position.x - rootElementWidth;\n      // let leftStyle = rootElementLeft;\n      // 检测下方能否容纳，不能容纳向上偏移\n      if (rootElementTop + rootElementHeight > containerHeight) {\n        rootElementTop = containerHeight - rootElementHeight;\n        rootElementLeft += rootElementWidth - 2;\n      }\n      // 偏移后上方超出canvas范围，居中显示\n      if (rootElementTop < 0) {\n        rootElementTop = rootElementTop / 2;\n      }\n      rootElement.style.top = `${rootElementTop}px`;\n\n      // 判断如果超出左右范围则靠边显示\n      if (rootElementLeft < 0) {\n        rootElementLeft = 0;\n      } else if (rootElementLeft + rootElementWidth > containerWidth) {\n        rootElementLeft = containerWidth - rootElementWidth;\n      }\n      rootElement.style.left = `${rootElementLeft}px`;\n\n      return true;\n    }\n    return false;\n  }\n  /** 鼠标坐标位置 是否位于下拉菜单内 */\n  pointInMenuElement(x: number, y: number): boolean {\n    const rootElement = this._rootElement;\n\n    const { x: rootLeft, y: rootTop, width: rootWidth, height: rootHeight } = rootElement.getBoundingClientRect();\n    if (x > rootLeft - 5 && x < rootLeft + rootWidth + 5 && y > rootTop - 5 && y < rootTop + rootHeight + 5) {\n      return true;\n    }\n\n    return false;\n  }\n}\n"]}

package/es/menu/dom/logic/MenuElement.css

@@ -0,0 +1,86 @@
+@keyframes vtable__menu-element--shown-animation {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+.vtable__menu-element {
+	position: absolute;
+	box-sizing: border-box;
+	border-radius: 4px;
+	background-color: #fff;
+	padding: 6px 0;
+	/* pointer-events: none; */
+	user-select: none;
+	color: #000;
+	max-width: 300px;
+	z-index: 99999;
+	border: #CCC 0.5px solid;
+	cursor: default;
+	width: max-content;
+	box-shadow: 0px 8px 16px rgba(27, 31, 35, 0.12);
+}
+.vtable__menu-element--hidden {
+	opacity: 0;
+	/* transform: translate(-50%, -50%); */
+	transition: opacity 75ms linear;
+	z-index: -9999;
+}
+.vtable__menu-element--shown {
+	opacity: 1;
+	/* transform: translate(-50%, -50%); */
+	animation: vtable__menu-element--shown-animation 150ms ease-out;
+}
+.vtable__menu-element__content {
+	font-family: Roboto;
+	font-size: 12px;
+	overflow: hidden;
+	display: inline-block;
+	/* height: 100%; */
+	line-height: 30px;
+}
+.vtable__menu-element__item {
+	height: 32px;
+	padding: 0px 12px;
+	cursor: pointer;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+.vtable__menu-element__item:hover {
+	background-color: rgba(27, 31, 35, 0.06);
+}
+.vtable__menu-element__icon{
+	/* vertical-align: top; */
+	display: flex;
+	/* line-height: 30px; */
+	margin-right: 6px;
+}
+.vtable__menu-element__no-event {
+	pointer-events: none;
+}
+.vtable__menu-element--select {
+	color: #2E68CF;
+}.vtable__menu-element--normal {
+	color: rgba(20, 20, 20, 0.9);;
+}
+.vtable__menu-element__split {
+	height: 0px;
+	border: 1px solid rgb(209, 213, 218);
+	margin: 5px 0;
+}
+.vtable__menu-element__title {
+	color: rgb(149, 149, 149);
+}
+.vtable__menu-element__arrow {
+	position: absolute;
+	right: 3px;
+	font-weight: bold;
+	margin-top: 1px;
+}
+.vtable__menu-element__item-text {
+	margin-right: 15px;
+}

package/es/menu/dom/logic/MenuElement.d.ts

@@ -0,0 +1,27 @@
+import type { DropDownMenuHighlightInfo, MenuInstanceInfo, Placement, RectProps } from '../../../ts-types';
+import './MenuElement.css';
+import type { BaseTableAPI } from '../../../ts-types/base-table';
+export declare function isMenuHighlight(_table: BaseTableAPI, cells: DropDownMenuHighlightInfo[], menuKeyCurrent: string, colCurrent: number, rowCurrent: number, index: number): boolean;
+export declare class MenuElement {
+    private _handler;
+    private _rootElement?;
+    private _secondElement?;
+    private _menuInstanceInfo?;
+    private _showChildrenIndex;
+    private _mouseEnterSecondElement;
+    constructor(table: BaseTableAPI);
+    get rootElement(): HTMLElement;
+    dispose(): void;
+    bindToCell(table: BaseTableAPI, col: number, row: number, menuInstanceInfo: MenuInstanceInfo): boolean;
+    unbindFromCell(): void;
+    _canBindToCell(table: BaseTableAPI, col: number, row: number): boolean;
+    _bindToCell(table: BaseTableAPI, col: number, row: number, position?: {
+        x: number;
+        y: number;
+    }, referencePosition?: {
+        rect: RectProps;
+        placement?: Placement;
+    }): boolean;
+    _bindSecondElement(table: BaseTableAPI, col: number, row: number, x: number, y: number): boolean;
+    pointInMenuElement(x: number, y: number): boolean;
+}