k-vtable 1.0.0

package/cjs/components/menu/dom/MenuHandler.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MenuHandler = void 0;
+
+const Menu_1 = require("./Menu"), helper_1 = require("../../../tools/helper"), TABLE_EVENT_TYPE_1 = require("../../../core/TABLE_EVENT_TYPE"), MENU_INSTANCE_FACTORY = {
+    "dropdown-menu": function(table) {
+        return new Menu_1.Menu(table);
+    },
+    "context-menu": function(table) {
+        return new Menu_1.Menu(table);
+    },
+    container: table => new Menu_1.Container(table)
+};
+
+function getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions) {
+    var _a, _b;
+    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) {
+        let dropDownMenu = table.globalDropDownMenu;
+        const headerData = table._getHeaderLayoutMap(col, row);
+        dropDownMenu = null !== (_b = headerData.dropDownMenu) && void 0 !== _b ? _b : dropDownMenu;
+        const pivotInfo = headerData.pivotInfo;
+        return "function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+            row: row,
+            col: col,
+            table: table
+        })), {
+            type: type,
+            referencePosition: {
+                rect: {
+                    left: left,
+                    right: right,
+                    top: top,
+                    bottom: bottom,
+                    width: width,
+                    height: height
+                }
+            },
+            content: dropDownMenu,
+            pivotInfo: pivotInfo
+        };
+    }
+    return null;
+}
+
+class MenuHandler {
+    constructor(table) {
+        this._table = table, this._menuInstances = {}, this._bindTableEvent(table);
+    }
+    release() {
+        const menuInstances = this._menuInstances;
+        for (const k in menuInstances) menuInstances[k].release();
+        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 && (0, helper_1.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.on(TABLE_EVENT_TYPE_1.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.on(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, (e => {
+            this._unbindFromCell();
+        })), table.on(TABLE_EVENT_TYPE_1.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.inTable && "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, e.col, table) : abstractPos.inTable && 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
+        };
+    }
+    containElement(el) {
+        var _a;
+        for (const k in this._menuInstances) {
+            if (null === (_a = this._menuInstances[k].getRootElement()) || void 0 === _a ? void 0 : _a.contains(el)) return !0;
+        }
+        return !1;
+    }
+}
+
+exports.MenuHandler = MenuHandler;
+//# sourceMappingURL=MenuHandler.js.map

package/cjs/components/menu/dom/MenuHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/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, HeaderData } 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    let dropDownMenu = table.globalDropDownMenu;\n    const headerData = table._getHeaderLayoutMap(col, row) as HeaderData;\n    dropDownMenu = headerData.dropDownMenu ?? dropDownMenu;\n    const pivotInfo = headerData.pivotInfo;\n\n    if (typeof dropDownMenu === 'function') {\n      dropDownMenu = dropDownMenu({ row, col, table });\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 interface IMenuHandler {\n  new (table: BaseTableAPI): MenuHandler;\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  release(): void {\n    const menuInstances = this._menuInstances;\n    for (const k in menuInstances) {\n      menuInstances[k].release();\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.on(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.on(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, e => {\n      this._unbindFromCell();\n    });\n    // 监听右键菜单\n    table.on(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.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {\n          menu = table.internalProps.menu.contextMenuItems(\n            table.getHeaderField(e.col, e.row) as string,\n            e.row,\n            e.col,\n            table\n          );\n        } else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {\n          menu = table.internalProps.menu?.contextMenuItems;\n        }\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  containElement(el: HTMLElement): boolean {\n    for (const k in this._menuInstances) {\n      const contain = this._menuInstances[k].getRootElement()?.contains(el);\n      if (contain) {\n        return true;\n      }\n    }\n    return false;\n  }\n}\n"]}

package/cjs/components/menu/dom/logic/MenuContainer.d.ts

@@ -0,0 +1,21 @@
+import type { MenuInstanceInfo, Placement, RectProps } from '../../../../ts-types';
+import type { BaseTableAPI } from '../../../../ts-types/base-table';
+export declare class MenuContainer {
+    private _handler;
+    private _rootElement?;
+    private _menuInstanceInfo?;
+    constructor(table: BaseTableAPI);
+    get rootElement(): HTMLElement;
+    release(): 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/cjs/components/menu/dom/logic/MenuContainer.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MenuContainer = void 0;
+
+const EventHandler_1 = require("../../../../event/EventHandler"), dom_1 = require("../../../../tools/dom"), TABLE_EVENT_TYPE_1 = require("../../../../core/TABLE_EVENT_TYPE"), CLASSNAME = "vtable__menu-element", HIDDEN_CLASSNAME = `${CLASSNAME}--hidden`, SHOWN_CLASSNAME = `${CLASSNAME}--shown`;
+
+function createMenuDomElement() {
+    return (0, dom_1.createElement)("div", [ CLASSNAME, HIDDEN_CLASSNAME ]);
+}
+
+class MenuContainer {
+    constructor(table) {
+        var _a, _b, _c;
+        this._handler = new EventHandler_1.EventHandler, this._rootElement = createMenuDomElement(), 
+        this._rootElement.addEventListener("wheel", (e => {
+            e.stopPropagation();
+        })), 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_1.TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, {
+                col: col,
+                row: row,
+                field: field,
+                menuKey: menuKey,
+                text: text,
+                highlight: highlight,
+                cellLocation: table.getCellLocation(col, row),
+                event: e
+            }), table.fireListeners(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null), 
+            table.fireListeners(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.HIDE_MENU, null), 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;
+    }
+    release() {
+        this.unbindFromCell();
+        const rootElement = this._rootElement;
+        (null == rootElement ? void 0 : rootElement.parentElement) && rootElement.parentElement.removeChild(rootElement), 
+        this._handler.release(), 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) {
+        var _a;
+        const rect = table.getCellRangeRelativeRect({
+            col: col,
+            row: row
+        }), element = null !== (_a = table.internalProps.menu.parentElement) && void 0 !== _a ? _a : table.getElement(), {top: top, bottom: bottom, left: left, right: right} = rect;
+        if (table.isFrozenCell(col, row)) return !0;
+        if (bottom < table.getFrozenRowsHeight() || right < table.getFrozenColsWidth() || left > table.tableNoFrameWidth - table.getRightFrozenColsWidth() || top > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight()) return !1;
+        const {offsetHeight: offsetHeight, offsetWidth: offsetWidth} = element;
+        return !(offsetHeight < top) && !(offsetWidth < left);
+    }
+    _bindCell(table, col, row, position, referencePosition) {
+        var _a;
+        const rootElement = this._rootElement, element = null !== (_a = table.internalProps.menu.parentElement) && void 0 !== _a ? _a : table.getElement(), {width: containerWidth, height: containerHeight, left: containerLeft, top: containerTop} = 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;
+            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);
+            let deltaTop = 0, deltaLeft = 0;
+            if (table.getElement() !== element) {
+                const {left: left, top: top} = table.getElement().getBoundingClientRect();
+                deltaTop = top - containerTop, deltaLeft = left - containerLeft;
+            }
+            return rootElement.style.top = `${rootElementTop + deltaTop}px`, rootElementLeft < 0 ? rootElementLeft = 0 : rootElementLeft + rootElementWidth > containerWidth && (rootElementLeft = containerWidth - rootElementWidth), 
+            rootElement.style.left = `${rootElementLeft + deltaLeft}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;
+    }
+}
+
+exports.MenuContainer = MenuContainer;
+//# sourceMappingURL=MenuContainer.js.map

package/cjs/components/menu/dom/logic/MenuContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/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 { 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  const rootElement = createElement('div', [CLASSNAME, HIDDEN_CLASSNAME]);\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('wheel', e => {\n      e.stopPropagation();\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.DROPDOWN_MENU_CLICK, {\n        col,\n        row,\n        field: <string>field,\n        menuKey,\n        // fieldKey,\n        // dropDownIndex,\n        text,\n        highlight,\n        cellLocation: table.getCellLocation(col, row),\n        event: e\n      });\n\n      table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLEAR, null); // 清除菜单\n      table.fireListeners(TABLE_EVENT_TYPE.HIDE_MENU, null); // 清除菜单\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  release(): void {\n    this.unbindFromCell();\n\n    const rootElement = this._rootElement;\n    if (rootElement?.parentElement) {\n      rootElement.parentElement.removeChild(rootElement);\n    }\n\n    this._handler.release();\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 element = table.internalProps.menu.parentElement ?? table.getElement();\n    const { top, bottom, left, right } = rect;\n    if (table.isFrozenCell(col, row)) {\n      return true;\n    } else if (\n      bottom < table.getFrozenRowsHeight() ||\n      right < table.getFrozenColsWidth() ||\n      left > table.tableNoFrameWidth - table.getRightFrozenColsWidth() ||\n      top > table.tableNoFrameHeight - table.getBottomFrozenRowsHeight()\n    ) {\n      // 范围外\n      return false;\n    }\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(); // container element\n    const element = table.internalProps.menu.parentElement ?? table.getElement();\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      left: containerLeft,\n      top: containerTop\n    } = 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\n      let deltaTop = 0;\n      let deltaLeft = 0;\n      if (table.getElement() !== element) {\n        const { left, top } = table.getElement().getBoundingClientRect();\n        deltaTop = top - containerTop;\n        deltaLeft = left - containerLeft;\n      }\n\n      rootElement.style.top = `${rootElementTop + deltaTop}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 + deltaLeft}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/cjs/components/menu/dom/logic/MenuElement.d.ts

@@ -0,0 +1,26 @@
+import type { DropDownMenuHighlightInfo, MenuInstanceInfo, Placement, RectProps } from '../../../../ts-types';
+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;
+    release(): 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;
+}