k-vtable 1.0.0

package/cjs/scenegraph/component/menu.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MenuHandler = exports.MenuType = void 0;
+
+const vrender_1 = require("./../../vrender"), TABLE_EVENT_TYPE_1 = require("../../core/TABLE_EVENT_TYPE"), group_1 = require("../graphic/group"), icon_1 = require("../graphic/icon");
+
+var MenuType;
+
+!function(MenuType) {
+    MenuType.dropDown = "dropDown", MenuType.contextmenu = "contextmenu", MenuType.custom = "custom";
+}(MenuType = exports.MenuType || (exports.MenuType = {}));
+
+const menuStyle = {
+    fontSize: 12,
+    fontFamily: "Arial,sans-serif",
+    color: "#000",
+    highlightColor: "#2E68CF",
+    hoverBgColor: "#EEE",
+    lineHeight: 30,
+    bgColor: "#FFF",
+    cornerRadius: 4,
+    borderWidth: .5,
+    borderColor: "#CCC",
+    menuPadding: 6,
+    menuItemPadding: 9,
+    maxLineWidth: 200
+};
+
+class MenuHandler {
+    constructor(table) {
+        this._table = table, this._menuInstance = new group_1.Group({
+            x: 0,
+            y: 0,
+            fill: menuStyle.bgColor,
+            stroke: menuStyle.borderColor,
+            cornerRadius: menuStyle.cornerRadius,
+            lineWidth: menuStyle.borderWidth
+        }), this._menuInfo = {
+            x: -1,
+            y: -1,
+            col: -1,
+            row: -1,
+            type: MenuType.dropDown,
+            menuInfo: [],
+            highlightIndex: -1
+        };
+    }
+    bindTableComponent(componentGroup) {
+        componentGroup.appendChild(this._menuInstance), this.bindEvent();
+    }
+    release() {}
+    attach(x, y, col, row, type, menuInfo) {
+        if (type === MenuType.dropDown && this.checkDropDownMenuChange(col, row)) {
+            const tableMenuInfo = this.getMenuInfo(col, row, type);
+            if (!tableMenuInfo) return;
+            const {menuInfo: menuInfo, highlightIndex: highlightIndex} = tableMenuInfo;
+            this.updateMenuInfo(col, row, type, menuInfo, highlightIndex), this.updateMenuInstance(menuInfo, highlightIndex);
+        } else if (type === MenuType.contextmenu && this.checkContextMenuChange(x, y)) {
+            const tableMenuInfo = this.getMenuInfo(col, row, type);
+            if (!tableMenuInfo) return;
+            const {menuInfo: menuInfo, highlightIndex: highlightIndex} = tableMenuInfo;
+            this.updateMenuInfo(col, row, type, menuInfo, highlightIndex), this.updateMenuInstance(menuInfo, highlightIndex);
+        }
+        this.updatePosition(x - this._table.scenegraph.x, y - this._table.scenegraph.y), 
+        this.addToScene();
+    }
+    updateMenuInfo(col, row, type, menuInfo, highlightIndex) {
+        this._menuInfo.col = col, this._menuInfo.row = row, this._menuInfo.type = type, 
+        this._menuInfo.menuInfo = menuInfo, this._menuInfo.highlightIndex = highlightIndex;
+    }
+    checkDropDownMenuChange(col, row) {
+        const {type: type, col: curCol, row: curRow} = this._menuInfo;
+        return type !== MenuType.dropDown || col !== curCol || row !== curRow;
+    }
+    checkContextMenuChange(x, y) {
+        var _a;
+        const {type: type, menuInfo: menuInfo} = this._menuInfo;
+        return type !== MenuType.contextmenu || menuInfo !== (null === (_a = this._table.internalProps.menu) || void 0 === _a ? void 0 : _a.contextMenuItems);
+    }
+    updateMenuInstance(menuInfo, highlightIndex) {
+        this._menuInstance.removeAllChild();
+        let y = menuStyle.menuPadding;
+        const x = menuStyle.menuPadding;
+        let maxWidth = 0;
+        menuInfo.forEach(((item, index) => {
+            var _a, _b;
+            const isisHighlight = highlightIndex === index;
+            let icon, text;
+            "string" == typeof item ? text = item : "object" == typeof item && (text = item.text, 
+            icon = isisHighlight ? item.selectedIcon : item.icon);
+            const group = new group_1.Group({
+                y: y,
+                x: x,
+                height: menuStyle.lineHeight,
+                fill: menuStyle.bgColor
+            });
+            group.role = "menu-item", this._menuInstance.appendChild(group), group.stateProxy = stateName => "hover" === stateName ? {
+                fill: menuStyle.hoverBgColor
+            } : {
+                fill: menuStyle.bgColor
+            }, group.addEventListener("pointerenter", (e => {
+                group.addState("hover", !0, !1), this._table.scenegraph.updateNextFrame();
+            })), group.addEventListener("pointerleave", (e => {
+                group.removeState("hover", !1), this._table.scenegraph.updateNextFrame();
+            }));
+            const textMark = new vrender_1.Text({
+                x: menuStyle.menuItemPadding,
+                y: menuStyle.menuItemPadding,
+                fill: isisHighlight ? menuStyle.highlightColor : menuStyle.color,
+                text: text,
+                textBaseline: "top",
+                fontSize: menuStyle.fontSize,
+                fontFamily: menuStyle.fontFamily,
+                pickable: !1,
+                maxLineWidth: menuStyle.maxLineWidth,
+                ellipsis: "…"
+            });
+            if (group.addChild(textMark), icon) {
+                textMark.AABBBounds.height();
+                const iconWidth = null !== (_a = icon.width) && void 0 !== _a ? _a : 16, iconHeight = null !== (_b = icon.height) && void 0 !== _b ? _b : 16, iconMark = new icon_1.Icon({
+                    x: menuStyle.menuItemPadding,
+                    y: (menuStyle.lineHeight - iconHeight) / 2,
+                    width: iconWidth,
+                    height: iconHeight,
+                    image: icon.svg,
+                    pickable: !1
+                });
+                iconMark.role = "menu-icon", group.insertBefore(iconMark, textMark), textMark.setAttribute("x", iconWidth + menuStyle.menuItemPadding);
+            }
+            maxWidth = Math.max(group.AABBBounds.width(), maxWidth), y += menuStyle.lineHeight;
+        })), this._menuInstance.setAttributes({
+            width: maxWidth + 2 * menuStyle.menuItemPadding + 2 * menuStyle.menuPadding,
+            height: y + menuStyle.menuPadding
+        }), this._menuInstance.forEachChildren((itemGroup => {
+            itemGroup.setAttribute("width", maxWidth + 2 * menuStyle.menuItemPadding);
+        }));
+    }
+    updatePosition(x, y) {
+        this._menuInstance.setAttributes({
+            x: this._menuInfo.type === MenuType.dropDown ? x - this._menuInstance.attribute.width : x,
+            y: y
+        }), this._menuInfo.x = MenuType.dropDown ? x - this._menuInstance.attribute.width : x, 
+        this._menuInfo.y = y;
+    }
+    addToScene() {
+        this._table.scenegraph.updateNextFrame();
+    }
+    detach() {
+        this._menuInstance.setAttributes({
+            x: -1e3,
+            y: -1e3
+        }), this._table.scenegraph.updateNextFrame();
+    }
+    getMenuInfo(col, row, type) {
+        var _a;
+        if (type === MenuType.dropDown) {
+            let dropDownMenu = this._table.globalDropDownMenu;
+            dropDownMenu = this._table._getHeaderLayoutMap(col, row).dropDownMenu, "function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
+                row: row,
+                col: col,
+                table: this._table
+            }));
+            let highlightIndex = -1;
+            if (Array.isArray(dropDownMenu)) for (let i = 0; i < dropDownMenu.length; i++) if (this._table._dropDownMenuIsHighlight(col, row, i)) {
+                highlightIndex = i;
+                break;
+            }
+            return {
+                menuInfo: dropDownMenu,
+                highlightIndex: highlightIndex
+            };
+        }
+        if (type === MenuType.contextmenu) {
+            const contextmenu = null === (_a = this._table.internalProps.menu) || void 0 === _a ? void 0 : _a.contextMenuItems;
+            let menuInfo;
+            if (Array.isArray(contextmenu)) menuInfo = contextmenu; else if ("function" == typeof contextmenu) {
+                const {field: field} = this._table.isHeader(col, row) ? this._table.getHeaderDefine(col, row) : this._table.getBodyColumnDefine(col, row);
+                menuInfo = contextmenu(field, row, col);
+            }
+            return {
+                menuInfo: menuInfo,
+                highlightIndex: -1
+            };
+        }
+    }
+    bindEvent() {
+        this._menuInstance.addEventListener("click", (e => {
+            const {target: target} = e;
+            if (target && "menu-item" === target.role) {
+                const resultMenuInfo = this.getEventInfo(target), resultTableInfo = this._table.getMenuInfo(this._menuInfo.col, this._menuInfo.row, this._menuInfo.type), result = Object.assign(resultMenuInfo, resultTableInfo);
+                result.event = e.nativeEvent, this._table.fireListeners(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, result);
+            }
+        }));
+    }
+    getEventInfo(target) {
+        const parent = target.parent;
+        let index = 0;
+        parent.forEachChildren(((child, i) => child === target && (index = i - 1, !0)));
+        const text = "string" == typeof this._menuInfo.menuInfo[index] ? this._menuInfo.menuInfo[index] : this._menuInfo.menuInfo[index].text, menuKey = "string" == typeof this._menuInfo.menuInfo[index] ? text : this._menuInfo.menuInfo[index].menuKey || text;
+        return {
+            col: this._menuInfo.col,
+            row: this._menuInfo.row,
+            dropDownIndex: index,
+            highlight: index === this._menuInfo.highlightIndex,
+            text: text,
+            menuKey: menuKey
+        };
+    }
+    get bounds() {
+        return this._menuInstance.globalAABBBounds;
+    }
+}
+
+exports.MenuHandler = MenuHandler;
+//# sourceMappingURL=menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scenegraph/component/menu.ts"],"names":[],"mappings":";;;AACA,6CAAmD;AACnD,kEAA+D;AAE/D,4CAAyC;AACzC,0CAAuC;AASvC,IAAY,QAIX;AAJD,WAAY,QAAQ;IAClB,iCAAuB,CAAA;IACvB,uCAA6B,CAAA;IAC7B,6BAAmB,CAAA;AACrB,CAAC,EAJW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAInB;AAID,MAAM,SAAS,GAAG;IAChB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,kBAAkB;IAC9B,KAAK,EAAE,MAAM;IACb,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,MAAM;IACpB,UAAU,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC;IACtB,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,CAAC;IACf,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,MAAM;IACnB,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,CAAC;IAClB,YAAY,EAAE,GAAG;CAClB,CAAC;AAEF,MAAa,WAAW;IActB,YAAY,KAAmB;QAC7B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,aAAK,CAAC;YAC7B,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YAEJ,IAAI,EAAE,SAAS,CAAC,OAAO;YACvB,MAAM,EAAE,SAAS,CAAC,WAAW;YAC7B,YAAY,EAAE,SAAS,CAAC,YAAY;YACpC,SAAS,EAAE,SAAS,CAAC,WAAW;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,GAAG;YACf,CAAC,EAAE,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC;YACL,GAAG,EAAE,CAAC,CAAC;YACP,GAAG,EAAE,CAAC,CAAC;YACP,IAAI,EAAE,QAAQ,CAAC,QAAQ;YACvB,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,CAAC,CAAC;SACnB,CAAC;IAUJ,CAAC;IAED,kBAAkB,CAAC,cAAqB;QACtC,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE/C,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,OAAO;IAEP,CAAC;IAED,MAAM,CAAC,CAAS,EAAE,CAAS,EAAE,GAAW,EAAE,GAAW,EAAE,IAAc,EAAE,QAAmB;QACxF,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,IAAI,IAAI,CAAC,uBAAuB,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;YAExE,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YACvD,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO;aACR;YACD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC;YACnD,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC;YAC9D,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;SAEnD;aAAM,IAAI,IAAI,KAAK,QAAQ,CAAC,WAAW,EAAE;YACxC,IAAI,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;gBACrC,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;gBACvD,IAAI,CAAC,aAAa,EAAE;oBAClB,OAAO;iBACR;gBACD,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC;gBACnD,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC;gBAC9D,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;aACnD;SACF;QACD,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEhF,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,cAAc,CAAC,GAAW,EAAE,GAAW,EAAE,IAAc,EAAE,QAAwB,EAAE,cAAsB;QACvG,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,cAAc,GAAG,cAAc,CAAC;IACjD,CAAC;IAED,uBAAuB,CAAC,GAAW,EAAE,GAAW;QAC9C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1D,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,MAAM,EAAE;YAClE,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,sBAAsB,CAAC,CAAS,EAAE,CAAS;;QACzC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,IAAI,KAAK,QAAQ,CAAC,WAAW,IAAI,QAAQ,MAAK,MAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,0CAAE,gBAAgB,CAAA,EAAE;YAClG,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,kBAAkB,CAAC,QAAkB,EAAE,cAAsB;QAE3D,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC;QAGpC,IAAI,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC;QAC9B,MAAM,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC;QAChC,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC/B,MAAM,aAAa,GAAG,cAAc,KAAK,KAAK,CAAC;YAC/C,IAAI,IAAI,CAAC;YACT,IAAI,IAAI,CAAC;YACT,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;gBAC5B,IAAI,GAAG,IAAI,CAAC;aACb;iBAAM,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;gBACnC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACjB,IAAI,aAAa,EAAE;oBACjB,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;iBAC1B;qBAAM;oBACL,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;iBAClB;aACF;YAED,MAAM,KAAK,GAAG,IAAI,aAAK,CAAC;gBACtB,CAAC;gBACD,CAAC;gBAED,MAAM,EAAE,SAAS,CAAC,UAAU;gBAC5B,IAAI,EAAE,SAAS,CAAC,OAAO;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAGtC,KAAK,CAAC,UAAU,GAAG,CAAC,SAAiB,EAAE,EAAE;gBACvC,IAAI,SAAS,KAAK,OAAO,EAAE;oBACzB,OAAO;wBACL,IAAI,EAAE,SAAS,CAAC,YAAY;qBAC7B,CAAC;iBACH;gBACD,OAAO;oBACL,IAAI,EAAE,SAAS,CAAC,OAAO;iBACxB,CAAC;YACJ,CAAC,CAAC;YACF,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAiB,EAAE,EAAE;gBAC3D,KAAK,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;YAC3C,CAAC,CAAC,CAAC;YACH,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAiB,EAAE,EAAE;gBAC3D,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBAClC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;YAC3C,CAAC,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,cAAI,CAAC;gBACxB,CAAC,EAAE,SAAS,CAAC,eAAe;gBAC5B,CAAC,EAAE,SAAS,CAAC,eAAe;gBAC5B,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK;gBAChE,IAAI;gBACJ,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,SAAS,CAAC,QAAQ;gBAC5B,UAAU,EAAE,SAAS,CAAC,UAAU;gBAChC,QAAQ,EAAE,KAAK;gBACf,YAAY,EAAE,SAAS,CAAC,YAAY;gBACpC,QAAQ,EAAE,GAAG;aAEd,CAAC,CAAC;YACH,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAEzB,IAAI,IAAI,EAAE;gBACR,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;gBAChD,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;gBACnC,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAC;gBACrC,MAAM,QAAQ,GAAG,IAAI,WAAI,CAAC;oBACxB,CAAC,EAAE,SAAS,CAAC,eAAe;oBAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC;oBAC1C,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,IAAI,CAAC,GAAG;oBACf,QAAQ,EAAE,KAAK;iBAChB,CAAC,CAAC;gBACH,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;gBAC5B,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;gBACvC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;aACnE;YAGD,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC;YAExD,CAAC,IAAI,SAAS,CAAC,UAAU,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;YAC/B,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAC,eAAe,GAAG,CAAC,GAAG,SAAS,CAAC,WAAW,GAAG,CAAC;YAC3E,MAAM,EAAE,CAAC,GAAG,SAAS,CAAC,WAAW;SAClC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,SAAgB,EAAE,EAAE;YACtD,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,cAAc,CAAC,CAAS,EAAE,CAAS;QAEjC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACzF,CAAC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;IACvB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;YAE/B,CAAC,EAAE,CAAC,IAAI;YACR,CAAC,EAAE,CAAC,IAAI;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IASD,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,IAAc;;QAClD,IAAI,IAAI,KAAK,QAAQ,CAAC,QAAQ,EAAE;YAC9B,IAAI,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAClD,YAAY,GAAI,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,CAAgB,CAAC,YAAY,CAAC;YACtF,IAAI,OAAO,YAAY,KAAK,UAAU,EAAE;gBACtC,YAAY,GAAG,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;aAC/D;YACD,IAAI,cAAc,GAAG,CAAC,CAAC,CAAC;YACxB,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;gBAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC5C,IAAI,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE;wBACrD,cAAc,GAAG,CAAC,CAAC;wBACnB,MAAM;qBACP;iBACF;aACF;YACD,OAAO;gBACL,QAAQ,EAAE,YAAY;gBACtB,cAAc;aACf,CAAC;SACH;aAAM,IAAI,IAAI,KAAK,QAAQ,CAAC,WAAW,EAAE;YACxC,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,0CAAE,gBAAgB,CAAC;YACrE,IAAI,QAAQ,CAAC;YACb,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;gBAC9B,QAAQ,GAAG,WAAW,CAAC;aACxB;iBAAM,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE;gBAC5C,MAAM,EAAE,KAAK,EAAE,GAAG,CAChB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;oBAC5B,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC;oBACvC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,CAAC,CAC9B,CAAC;gBAClB,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;aACzC;YACD,OAAO;gBACL,QAAQ;gBACR,cAAc,EAAE,CAAC,CAAC;aACnB,CAAC;SACH;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,SAAS;QAEP,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAiB,EAAE,EAAE;YACjE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YACrB,IAAI,MAAM,IAAK,MAA2B,CAAC,IAAI,KAAK,WAAW,EAAE;gBAE/D,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,MAA0B,CAAC,CAAC;gBACrE,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBAC7G,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;gBAC9D,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,WAAW,CAAC;gBAC7B,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,mCAAgB,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;aAIzE;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,MAAc;QAQzB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAgB,CAAC;QACvC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,CAAC,eAAe,CAAC,CAAC,KAAa,EAAE,CAAS,EAAE,EAAE;YAClD,IAAI,KAAK,KAAK,MAAM,EAAE;gBACpB,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBACd,OAAO,IAAI,CAAC;aACb;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GACR,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,QAAQ;YAChD,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC;YAChC,CAAC,CAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAS,CAAC,IAAI,CAAC;QACnD,MAAM,OAAO,GACX,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,QAAQ;YAChD,CAAC,CAAC,IAAI;YACN,CAAC,CAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAS,CAAC,OAAO,IAAI,IAAI,CAAC;QAE9D,OAAO;YACL,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;YACvB,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;YACvB,aAAa,EAAE,KAAK;YACpB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,cAAc;YAClD,IAAI;YACJ,OAAO;SACR,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC;IAC7C,CAAC;CACF;AAhVD,kCAgVC","file":"menu.js","sourcesContent":["import type { FederatedEvent, IGroup } from './../../vrender';\nimport { createRect, Text } from './../../vrender';\nimport { TABLE_EVENT_TYPE } from '../../core/TABLE_EVENT_TYPE';\nimport type { ColumnDefine, MenuListItem } from '../../ts-types';\nimport { Group } from '../graphic/group';\nimport { Icon } from '../graphic/icon';\nimport type { BaseTableAPI, HeaderData } 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  fontFamily: 'Arial,sans-serif',\n  color: '#000',\n  highlightColor: '#2E68CF',\n  hoverBgColor: '#EEE',\n  lineHeight: 12 + 9 + 9,\n  bgColor: '#FFF',\n  cornerRadius: 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: menuStyle.bgColor,\n      stroke: menuStyle.borderColor,\n      cornerRadius: menuStyle.cornerRadius,\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  release() {\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: 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            fill: menuStyle.hoverBgColor\n          };\n        }\n        return {\n          fill: 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: isisHighlight ? menuStyle.highlightColor : menuStyle.color,\n        text,\n        textBaseline: 'top',\n        fontSize: menuStyle.fontSize,\n        fontFamily: menuStyle.fontFamily,\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      let dropDownMenu = this._table.globalDropDownMenu;\n      dropDownMenu = (this._table._getHeaderLayoutMap(col, row) as HeaderData).dropDownMenu;\n      if (typeof dropDownMenu === 'function') {\n        dropDownMenu = dropDownMenu({ row, col, table: this._table });\n      }\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 } = (\n          this._table.isHeader(col, row)\n            ? this._table.getHeaderDefine(col, row)\n            : this._table.getBodyColumnDefine(col, row)\n        ) as ColumnDefine;\n        menuInfo = contextmenu(field, row, col);\n      }\n      return {\n        menuInfo,\n        highlightIndex: -1\n      };\n    }\n    return undefined;\n  }\n\n  bindEvent() {\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        result.event = e.nativeEvent;\n        this._table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_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,52 @@
+import type { ILine, IRect, IGroup } from './../../vrender';
+import { ScrollBar } from './../../vrender';
+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;
+    columnResizeLine: ILine;
+    columnResizeBgLine: ILine;
+    columnResizeLabel: IGroup;
+    rowResizeLine: ILine;
+    rowResizeBgLine: ILine;
+    rowResizeLabel: IGroup;
+    menu: MenuHandler;
+    vScrollBar: ScrollBar;
+    hScrollBar: ScrollBar;
+    frozenShadowLine: IRect;
+    rightFrozenShadowLine: IRect;
+    drillIcon: DrillIcon;
+    cellMover: CellMover;
+    labelVisible: boolean;
+    constructor(table: BaseTableAPI);
+    addToGroup(componentGroup: Group): void;
+    createScrollBar(): void;
+    updateScrollBar(): void;
+    hideResizeCol(): void;
+    showResizeCol(col: number, y: number, isRightFrozen?: boolean): void;
+    updateResizeCol(col: number, y: number, isRightFrozen?: boolean): void;
+    hideResizeRow(): void;
+    showResizeRow(row: number, x: number, isRightFrozen?: boolean): void;
+    updateResizeRow(row: number, x: number, isBottomFrozen?: boolean): void;
+    hideMoveCol(): void;
+    showMoveCol(col: number, row: number, delta: number): {
+        backX: number;
+        lineX: number;
+        backY: number;
+        lineY: number;
+    };
+    updateMoveCol(backX: number, lineX: number, backY: number, lineY: number): void;
+    setFrozenColumnShadow(col: number, isRightFrozen?: boolean): void;
+    setRightFrozenColumnShadow(col: number): void;
+    hideVerticalScrollBar(): void;
+    showVerticalScrollBar(): void;
+    hideHorizontalScrollBar(): void;
+    showHorizontalScrollBar(): void;
+    updateVerticalScrollBarPos(topRatio: number): void;
+    updateHorizontalScrollBarPos(leftRatio: number): void;
+    updateStyle(): void;
+}