e-virt-table
Version:
A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
1,056 lines • 314 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(":root{--evt-header-font: 12px normal Arial;--evt-body-font: 12px normal Arial;--evt-color-white: #fff;--evt-color-black: #000000;--evt-color-primary: rgb(82, 146, 247);--evt-text-color-primary: #333;--evt-text-color-regular: #666;--evt-text-color-secondary: #999;--evt-box-shadow: 0 2px 12px 0 #0000001a;--evt-editor-bg-color: #fff;--evt-editor-text-color: #333;--evt-border-color: #e1e6eb;--evt-stripe-color: #fafafa;--evt-placeholder-color: #cdd0dc;--evt-header-bg-color: #f8faff;--evt-body-bg-color: #fff;--evt-header-text-color: #1d2129;--evt-body-text-color: #4e5969;--evt-footer-text-color: #4e5969;--evt-loading-icon-color: #4e5969;--evt-expand-icon-color: #4e5969;--evt-shrink-icon-color: #4e5969;--evt-error-tip-icon-color: red;--evt-required-color: #f56c6c;--evt-cell-hover-icon-bg-color: #fff;--evt-cell-hover-icon-border-color: #dde0ea;--evt-scroller-color: #dee0e3;--evt-scroller-track-color: #fff;--evt-scroller-focus-color: #bbbec4;--evt-select-border-color: var(--evt-color-primary);--evt-select-area-color: rgba(82, 146, 247, .1);--evt-select-row-col-bg-color: rgba(82, 146, 247, .1);--evt-autofill-point-border-color: #fff;--evt-edit-bg-color: #fcf6ed;--evt-checkbox-color: var(--evt-color-primary);--evt-checkbox-uncheck-color: #dde0ea;--evt-checkbox-disabled-color: #f1f2f4;--evt-checkbox-check-disabled-color: #dde0ea;--evt-icon-edit-color: #4e5969;--evt-icon-select-color: #4e5969;--evt-readonly-color: #fff;--evt-readonly-text-color: var(--evt-body-text-color);--evt-error-tip-color: #ed3f14;--evt-footer-bg-color: #fafafa;--evt-highlight-hover-row-color: rgba(186, 203, 231, .1);--evt-highlight-selected-row-color: rgba(82, 146, 247, .1);--evt-tooltip-bg-color: #303133;--evt-tooltip-text-color: #fff;--evt-resize-row-line-color: #e1e6eb;--evt-resize-column-text-color: #fff;--evt-resize-column-text-bg-color: var(--evt-color-primary);--evt-resize-column-line-color: #e1e6eb;--evt-tree-line-color: #e1e6eb;--evt-sort-icon-color: var(--evt-color-primary);--evt-drag-tip-bg-color: rgba(82, 146, 247, .1);--evt-drag-tip-line-color: var(--evt-color-primary);--evt-context-menu-min-width: 150px;--evt-context-menu-max-width: 220px;--evt-context-menu-item-padding: 8px 12px;--evt-context-menu-bg-color: #fff;--evt-context-menu-text-color: #333;--evt-context-menu-item-hover-text-color: var(--evt-color-primary);--evt-context-menu-item-hover-bg-color: #f5f5f5;--evt-context-menu-text-size: 13px}.dark{--evt-border-color: #363637;--evt-header-bg-color: #141414;--evt-body-bg-color: #141414;--evt-header-text-color: #a3a6ad;--evt-body-text-color: #cfd3dc;--evt-readonly-text-color: #cfd3dc;--evt-footer-text-color: #cfd3dc;--evt-scroller-color: #414243;--evt-scroller-track-color: #141414;--evt-scroller-focus-color: #a3a6ad;--evt-edit-bg-color: #141414;--evt-footer-bg-color: #262727;--evt-autofill-point-border-color: #fff;--evt-editor-bg-color: #434343;--evt-editor-text-color: #cfd3dc;--evt-context-menu-bg-color: #141414;--evt-context-menu-text-color: #cfd3dc;--evt-context-menu-item-hover-text-color: var(--evt-color-primary);--evt-context-menu-item-hover-bg-color: #414243}.e-virt-table-container{position:relative;outline:none}.e-virt-table-stage{position:relative;overflow:hidden;outline:none;box-sizing:border-box;z-index:10;border-radius:8px;border:1px solid var(--evt-border-color)}.e-virt-table-canvas{position:absolute;left:0;top:0;box-sizing:border-box;border:none;outline:none;z-index:10}.e-virt-table-editor{position:absolute;top:-10000px;left:-10000px;text-align:left;height:auto;line-height:0;z-index:100;overflow:hidden;background-color:var(--evt-editor-bg-color);border:2px solid var(--evt-color-primary);box-sizing:border-box;box-shadow:var(--evt-box-shadow);display:flex;align-items:center}.e-virt-table-overlayer{position:absolute;left:0;top:0;overflow:hidden;z-index:100;pointer-events:none}.e-virt-table-editor-textarea{width:100%;box-sizing:border-box;outline:none;font-weight:400;padding:8px;font-size:12px;color:inherit;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;line-height:1.5;margin:0;border:none;vertical-align:middle;background:var(--evt-editor-bg-color);color:var(--evt-editor-text-color);overflow-y:auto;resize:none}.e-virt-table-context-menu{position:absolute;font-size:14px;color:var(--evt-text-color-regular);background-color:var(--evt-color-white);border-radius:4px;border:1px solid #e4e7ed;box-shadow:var(--evt-box-shadow);width:fit-content;padding:6px 0;z-index:9999;left:-99999px;top:-99999px}.e-virt-table-context-menu-item{cursor:pointer;padding:6px 24px;color:var(--evt-text-color-regular)}.e-virt-table-context-menu-item:hover{color:var(--evt-color-primary);background-color:#f5f7fa}.e-virt-table-loading{display:none;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index:2000;background-color:#fff6;display:flex;align-items:center;justify-content:center}.e-virt-table-loading-spinner{opacity:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.e-virt-table-loading-spinner svg{color:var(--evt-text-color-regular);animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.e-virt-table-loading-text{margin:0;font-size:12px;color:var(--evt-text-color-regular)}.e-virt-table-main-menu,.e-virt-table-submenu{position:absolute;background:var(--evt-context-menu-bg-color);border-radius:4px;box-shadow:0 2px 8px #0000001a;min-width:var(--evt-context-menu-min-width);max-width:var(--evt-context-menu-max-width);color:var(--evt-text-color-primary)}.e-virt-table-main-menu{border:1px solid var(--evt-border-color);z-index:3000;left:-99999px;top:-99999px;display:none;position:fixed;background-color:var(--evt-body-bg-color)}.e-virt-table-submenu{border:1px solid var(--evt-border-color);z-index:1000;max-height:350px;overflow-y:auto;opacity:0;visibility:hidden;transform:translate(-10px);transition:opacity .2s,visibility .2s,transform .2s;-ms-overflow-style:none;scrollbar-width:none}.e-virt-table-submenu::-webkit-scrollbar{display:none}.e-virt-table-submenu.show{opacity:1;visibility:visible;transform:translate(0)}.e-virt-table-submenu:not(.show){transition:none}.e-virt-table-menu-item,.e-virt-table-submenu-item{position:relative;-webkit-user-select:none;user-select:none;padding:var(--evt-context-menu-item-padding);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s,color .2s;color:var(--evt-context-menu-text-color);font-size:var(--evt-context-menu-text-size)}.e-virt-table-menu-item:last-child,.e-virt-table-submenu-item:last-child{border-bottom:none}.e-virt-table-menu-item:has(.e-virt-table-menu-item-icon){padding-left:8px}.e-virt-table-menu-item-content{display:flex;align-items:center;flex:1;min-width:0}.e-virt-table-menu-item-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:8px;flex-shrink:0}.e-virt-table-menu-item-icon svg{width:100%;height:100%;fill:currentColor}.e-virt-table-menu-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.e-virt-table-menu-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--evt-text-color-regular);transition:color .2s}.e-virt-table-menu-arrow svg{width:20px;height:20px;fill:currentColor}.e-virt-table-submenu-item:hover,.e-virt-table-menu-item:hover,.e-virt-table-menu-item.active{background:var(--evt-context-menu-item-hover-bg-color);color:var(--evt-context-menu-item-hover-text-color)}.e-virt-table-menu-item.disabled,.e-virt-table-submenu-item.disabled{cursor:not-allowed}.e-virt-table-finder-bar{position:absolute;top:8px;right:16px;display:none;z-index:10000;background:#fff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 2px 6px #0003;padding:0 8px;height:48px;min-width:250px;align-items:center;font-size:12px}.e-virt-table-finder-bar.show{display:flex}.e-virt-table-finder-bar-input-wrapper{display:flex;align-items:center;flex:1;padding:0 8px;position:relative}.e-virt-table-finder-bar-input{border:none;outline:none;flex:1;font-size:12px;background:transparent;color:#333;min-width:150px;padding-left:0;position:relative}.e-virt-table-finder-bar-nav{display:flex;flex-direction:row;gap:8px;margin:0 8px;align-items:center}.e-virt-table-finder-bar-nav-btn{border:none;background:transparent;cursor:pointer;padding:0;color:#666;border-radius:50%;display:flex;align-items:center;justify-content:center}.e-virt-table-finder-bar-nav-btn svg{width:24px;height:24px}.e-virt-table-finder-bar-nav-btn.prev-btn{transform:rotate(-90deg)}.e-virt-table-finder-bar-nav-btn.next-btn{transform:rotate(90deg)}.e-virt-table-finder-bar-nav-btn.close-btn{font-size:24px;color:#666;line-height:1;width:24px;height:24px}.e-virt-table-finder-bar-nav-btn:hover{color:#666;background-color:#f0f0f0}.e-virt-table-finder-bar-count{color:#666;font-size:12px;margin:0 8px;white-space:nowrap;flex-shrink:0}.e-virt-table-finder-bar-count.no-results{color:#999}.e-virt-table-finder-bar-loading{display:none;position:absolute;left:8px;top:0;width:16px;height:16px;flex-shrink:0;pointer-events:none;z-index:0}.e-virt-table-finder-bar-loading.show{display:block}.e-virt-table-finder-bar-loading svg{width:100%;height:100%;color:#666;animation:rotate 1s linear infinite}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
var de = Object.defineProperty;
var fe = (h, t, e) => t in h ? de(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
var n = (h, t, e) => fe(h, typeof t != "symbol" ? t + "" : t, e);
class ue {
constructor(t) {
n(this, "rules");
this.rules = t;
}
validate(t) {
const e = [], { column: i, row: s, key: o, rowKey: r, colIndex: a, rowIndex: l, value: c, field: d, fieldValue: f } = t;
Array.isArray(this.rules) || (this.rules = [this.rules]);
for (const x of this.rules) {
if (x.validator) {
const u = {
field: d,
fieldValue: f,
value: c,
column: i,
colIndex: a,
rowIndex: l,
row: s,
key: o,
rowKey: r,
...x
};
x.validator(u, c, (g) => {
g && e.push({
...u,
message: g
});
});
}
if (!x.required && (c == null || c === ""))
return e;
x.pattern && !x.pattern.test(c) && e.push({
value: c,
column: i,
row: s,
key: o,
rowKey: r,
colIndex: a,
rowIndex: l,
field: d,
fieldValue: f,
message: x.message || `${o} is pattern validation error`
}), x.required && (c == null || c === "") && e.push({
value: c,
column: i,
row: s,
key: o,
rowKey: r,
colIndex: a,
rowIndex: l,
field: d,
fieldValue: f,
message: x.message || `${o} is required`
});
}
return e;
}
}
function $t() {
return "xxxxxxxxxxxxxxxxxx".replace(/[x]/g, function(h) {
const t = Math.random() * 16 | 0;
return (h === "x" ? t : t & 3 | 8).toString(16);
});
}
function bt(h, t) {
let e = 0, i;
return function(...s) {
const o = (/* @__PURE__ */ new Date()).getTime(), r = o - e, a = typeof t == "function" ? t() : t;
!e || r >= a ? (h.apply(this, s), e = o) : i || (i = setTimeout(() => {
h.apply(this, s), e = (/* @__PURE__ */ new Date()).getTime(), i = void 0;
}, a - r));
};
}
function ot(h = []) {
return h.length ? h.map((t) => ot(t.children) + 1).sort((t, e) => e - t)[0] : 0;
}
function xe(h = []) {
let t = [], e = [], i = [];
return h.forEach((s) => {
s.fixed === "left" ? t.push(s) : s.fixed === "right" ? i.push(s) : e.push(s);
}), [
...t.sort((s, o) => (s.sort ?? 0) - (o.sort ?? 0)),
...e.sort((s, o) => (s.sort ?? 0) - (o.sort ?? 0)),
...i.sort((s, o) => (s.sort ?? 0) - (o.sort ?? 0))
];
}
function rt(h = [], t = 1, e = 0, i = "") {
return h.sort((s, o) => (s.sort ?? 0) - (o.sort ?? 0)).map((s) => {
if (s.children) {
let o = 0, r = s.fixed;
s.children.forEach((l) => {
l.fixed = r;
});
const a = rt(s.children, t - 1, e + 1, s.key);
return a && a.forEach((l) => {
o += l.colspan ?? 0;
}), {
...s,
width: s.width,
level: e,
rowspan: 1,
colspan: o,
parentKey: i,
children: a.sort((l, c) => (l.sort ?? 0) - (c.sort ?? 0))
};
}
return {
...s,
level: e,
rowspan: t,
colspan: 1,
parentKey: i
};
});
}
function J(h = []) {
let t = [];
return h.forEach((e) => {
e.children ? t = t.concat(J(e.children)) : t.push(e);
}), t;
}
function Gt(h) {
return h.filter((t) => !t.hide).map((t) => Array.isArray(t.children) && t.children.length > 0 ? {
...t,
children: Gt(t.children)
// 递归处理
} : { ...t });
}
const At = /^(\r\n|\n\r|\r|\n)/, ge = /^[^\t\r\n]+/, Ht = /^\t/;
function we(h) {
let t = [[""]];
if (h.length === 0)
return t;
let e = 0, i = 0, s;
for (; h.length > 0 && s !== h.length; )
if (s = h.length, h.match(Ht))
h = h.replace(Ht, ""), e += 1, t[i][e] = "";
else if (h.match(At))
h = h.replace(At, ""), e = 0, i += 1, t[i] = [""];
else {
let o = "";
if (h.startsWith('"')) {
let r = 0, a = !0;
for (; a; ) {
const l = h.slice(0, 1);
l === '"' && (r += 1), o += l, h = h.slice(1), (h.length === 0 || h.match(/^[\t\r\n]/) && r % 2 === 0) && (a = !1);
}
o = o.replace(/^"/, "").replace(/"$/, "").replace(/["]*/g, (l) => new Array(Math.floor(l.length / 2)).fill('"').join(""));
} else {
const r = h.match(ge);
o = r ? r[0] : "", h = h.slice(o.length);
}
t[i][e] = o;
}
return Array.isArray(t) && t.length > 1 && t[t.length - 1].length === 1 && t[t.length - 1][0] === "" && (t = t.slice(0, t.length - 1)), t;
}
function me(h) {
let t, e, i, s, o = "", r;
for (t = 0, e = h.length; t < e; t += 1) {
for (s = h[t].length, i = 0; i < s; i += 1)
i > 0 && (o += " "), r = h[t][i], typeof r == "string" ? r.indexOf(`
`) > -1 ? o += `"${r.replace(/"/g, '""')}"` : o += r : r == null ? o += "" : o += r;
t !== e - 1 && (o += `
`);
}
return o;
}
function Ut(h, t, e = []) {
let i = 0;
const s = [];
return h.forEach((o, r) => {
if (r === 0)
s.push(1);
else {
const a = e.reduce((c, d) => `${c}${o[d] ?? ""}`, "") || o[t], l = e.reduce((c, d) => `${c}${h[r - 1][d] ?? ""}`, "") || h[r - 1][t];
a === l ? (s[i] += 1, s.push(0)) : (s.push(1), i = r);
}
}), s;
}
function jt(h, t) {
let e = "", i = "";
const s = {};
return t.forEach((o, r) => {
r === 0 ? (e = o.key, i = o.key, s[o.key] = 1) : h[o.key] === h[e] ? (s[o.key] = 0, s[i] += 1) : (s[o.key] = 1, e = o.key, i = o.key);
}), s;
}
function Ee(h, t, e = []) {
const { visibleRows: i, rowIndex: s, headIndex: o } = h, r = Ut(i, t, e);
return r[s - o] === 0 ? {
rowspan: 0,
colspan: 0,
relationRowKeys: e,
mergeRow: !0
} : {
rowspan: r[s - o],
colspan: 1,
relationRowKeys: e,
mergeRow: !0
};
}
function pe(h, t = []) {
const { column: e, row: i, visibleLeafColumns: s } = h, o = s.filter((r) => t.includes(r.key));
if (t.includes(e.key)) {
const r = jt(i, o);
return r[e.key] === 0 ? {
rowspan: 0,
colspan: 0,
relationColKeys: t,
mergeCol: !0
} : {
rowspan: 1,
colspan: r[e.key],
relationColKeys: t,
mergeCol: !0
};
}
}
function Ce(h, t = document.documentElement) {
const e = h.startsWith("--") ? h : `--${h}`;
return getComputedStyle(t).getPropertyValue(e).trim();
}
function Dt(h) {
if (!h) return /* @__PURE__ */ new Date(0);
if (typeof h == "number")
return new Date(h);
const t = String(h).trim(), e = new Date(t);
if (!isNaN(e.getTime()))
return e;
const i = [
// YYYY-MM-DD
/^(\d{4})-(\d{1,2})-(\d{1,2})$/,
// YYYY/MM/DD
/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/,
// YYYY.MM.DD
/^(\d{4})\.(\d{1,2})\.(\d{1,2})$/,
// DD-MM-YYYY
/^(\d{1,2})-(\d{1,2})-(\d{4})$/,
// DD/MM/YYYY
/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
// DD.MM.YYYY
/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,
// MM-DD-YYYY
/^(\d{1,2})-(\d{1,2})-(\d{4})$/,
// MM/DD/YYYY
/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
// MM.DD.YYYY
/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,
// YYYYMMDD
/^(\d{4})(\d{2})(\d{2})$/,
// 带时间的格式 YYYY-MM-DD HH:mm:ss
/^(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/,
// 带时间的格式 YYYY/MM/DD HH:mm:ss
/^(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/
];
for (const s of i) {
const o = t.match(s);
if (o) {
const r = o.slice(1).map(Number);
if (s.source.includes("YYYY-MM-DD") || s.source.includes("YYYY/MM/DD") || s.source.includes("YYYY.MM.DD")) {
const [a, l, c, d = 0, f = 0, x = 0] = r;
return new Date(a, l - 1, c, d, f, x);
} else if (s.source.includes("DD-MM-YYYY") || s.source.includes("DD/MM/YYYY") || s.source.includes("DD.MM.YYYY")) {
const [a, l, c, d = 0, f = 0, x = 0] = r;
return new Date(c, l - 1, a, d, f, x);
} else if (s.source.includes("MM-DD-YYYY") || s.source.includes("MM/DD/YYYY") || s.source.includes("MM.DD.YYYY")) {
const [a, l, c, d = 0, f = 0, x = 0] = r;
return new Date(c, a - 1, l, d, f, x);
} else if (s.source.includes("YYYYMMDD")) {
const [a, l, c] = r;
return new Date(a, l - 1, c);
}
}
}
return /* @__PURE__ */ new Date(NaN);
}
function ye(h, t) {
const e = Dt(h), i = Dt(t);
return isNaN(e.getTime()) && isNaN(i.getTime()) ? 0 : isNaN(e.getTime()) ? -1 : isNaN(i.getTime()) ? 1 : e.getTime() - i.getTime();
}
class qt {
constructor(t, e, i, s, o, r, a) {
n(this, "ctx");
n(this, "x", 0);
n(this, "y", 0);
n(this, "width", 0);
n(this, "height", 0);
n(this, "fixed");
n(this, "cellType");
this.ctx = t, this.x = e, this.y = i, this.width = s, this.height = o, this.fixed = a, this.cellType = r;
}
isHorizontalVisible() {
if (this.fixed)
return !0;
const { stageWidth: t, fixedLeftWidth: e, scrollX: i, fixedRightWidth: s } = this.ctx, o = t;
return !(this.x + this.width - e - i <= 0 || this.x - i >= o - s);
}
isVerticalVisible() {
const { stageHeight: t, scrollY: e } = this.ctx, i = t;
return !(this.y + this.height - e <= 0 || this.y - e >= i);
}
getDrawX() {
if (this.fixed === "left")
return this.x;
if (this.fixed === "right") {
const {
stageWidth: t,
config: { SCROLLER_TRACK_SIZE: e }
} = this.ctx;
return t - (this.ctx.header.width - this.x) - e;
}
return this.x - this.ctx.scrollX;
}
getDrawY() {
return this.cellType === "header" ? this.y : this.cellType === "footer" && this.ctx.config.FOOTER_FIXED ? this.y : this.y - this.ctx.scrollY;
}
getLeftFixedX() {
return this.x - this.ctx.scrollX;
}
/**
* RightFixed时相对StageX
* @returns
*/
getRightFixedX() {
}
}
class vt extends qt {
constructor(e, i, s, o, r, a, l, c, d, f = "body", x = !0) {
super(e, o, r, a, l, f, c.fixed);
n(this, "formatter");
n(this, "formatterFooter");
n(this, "hoverIconName", "");
n(this, "operation", !1);
n(this, "align");
n(this, "verticalAlign");
n(this, "fixed");
n(this, "type");
n(this, "editorType");
n(this, "editorProps");
n(this, "cellType");
n(this, "level");
n(this, "colspan", 1);
n(this, "rowspan", 1);
n(this, "mergeRow", !1);
n(this, "mergeCol", !1);
n(this, "relationRowKeys", []);
// 合并单元格关联key
n(this, "relationColKeys", []);
// 合并单元格关联key
n(this, "key");
n(this, "column");
n(this, "rowIndex");
n(this, "colIndex");
n(this, "rowKey");
n(this, "row");
n(this, "value");
n(this, "render");
n(this, "renderFooter");
n(this, "style", {});
n(this, "domDataset", {});
n(this, "rules", []);
n(this, "message", "");
n(this, "text", "");
n(this, "displayText", "");
n(this, "visibleWidth", 0);
n(this, "visibleHeight", 0);
n(this, "isHasChanged", !1);
n(this, "drawX", 0);
n(this, "drawY", 0);
n(this, "drawCellBgColor", "");
n(this, "drawCellSkyBgColor", "");
n(this, "drawTextColor", "");
n(this, "drawTextFont", "");
n(this, "drawTextX", 0);
n(this, "drawTextY", 0);
n(this, "drawTextWidth", 0);
n(this, "drawTextHeight", 0);
// 画tree图标
n(this, "drawTreeImageX", 0);
n(this, "drawTreeImageY", 0);
n(this, "drawTreeImageWidth", 0);
n(this, "drawTreeImageHeight", 0);
n(this, "drawTreeImageName", "");
n(this, "drawTreeImageSource");
// 画selection图标
n(this, "drawSelectionImageX", 0);
n(this, "drawSelectionImageY", 0);
n(this, "drawSelectionImageWidth", 0);
n(this, "drawSelectionImageHeight", 0);
n(this, "drawSelectionImageName", "");
n(this, "drawSelectionImageSource");
// 画hover图标
n(this, "drawHoverImageX", 0);
n(this, "drawHoverImageY", 0);
n(this, "drawHoverImageWidth", 0);
n(this, "drawHoverImageHeight", 0);
n(this, "drawHoverImageName", "");
n(this, "drawHoverImageSource");
n(this, "autoRowHeight", !1);
// 是否启用行高自适应
n(this, "calculatedHeight", 0);
// 计算出的自适应高度
n(this, "ellipsis", !1);
n(this, "rowExpand", !1);
n(this, "rowHasChildren", !1);
n(this, "overflowTooltipShow", !0);
n(this, "selectorCellValueType", "value");
n(this, "overflowTooltipMaxWidth", 500);
n(this, "overflowTooltipPlacement", "top");
n(this, "maxLineClamp", "auto");
this.visibleWidth = this.width, this.visibleHeight = this.height, this.colIndex = s, this.rowIndex = i, this.key = c.key, this.type = c.type || "", this.editorType = c.editorType || "text", this.selectorCellValueType = c.selectorCellValueType || this.ctx.config.SELECTOR_CELL_VALUE_TYPE || "value", this.editorProps = c.editorProps || {}, this.cellType = f, this.align = c.align || this.ctx.config.COLUMNS_ALIGN, this.verticalAlign = c.verticalAlign || this.ctx.config.COLUMNS_VERTICAL_ALIGN, this.fixed = c.fixed || "", this.level = c.level || 0, this.operation = c.operation || !1, this.column = c, this.rules = c.rules || [], this.row = d, this.rowKey = this.cellType === "body" ? this.ctx.database.getRowKeyForRowIndex(i) : `${this.cellType}_${this.rowIndex}`, this.value = this.getValue(), this.render = c.render, this.overflowTooltipShow = c.overflowTooltipShow !== !1, this.autoRowHeight = c.autoRowHeight !== void 0 ? c.autoRowHeight : this.ctx.config.AUTO_ROW_HEIGHT, this.overflowTooltipMaxWidth = c.overflowTooltipMaxWidth || 500, this.overflowTooltipPlacement = c.overflowTooltipPlacement || "top", this.renderFooter = c.renderFooter, this.hoverIconName = c.hoverIconName, this.formatter = c.formatter, this.formatterFooter = c.formatterFooter, this.maxLineClamp = c.maxLineClamp || "auto", x && this.update();
}
setWidthHeight(e, i) {
this.width = e, this.height = i;
}
getValidationMessage() {
const e = this.ctx.database.getValidationError(this.rowKey, this.key);
if (Array.isArray(e) && e.length) {
const [i] = e;
this.message = i.message || "";
}
return this.message;
}
update() {
this.drawX = this.getDrawX(), this.drawY = this.getDrawY(), this.drawTextX = this.drawX, this.drawTextY = this.drawY, this.isHasChanged = this.ctx.database.isHasChangedData(this.rowKey, this.key), this.updateSpan(), this.drawTextWidth = this.visibleWidth, this.drawTextHeight = this.visibleHeight, this.updateStyle(), this.updateType(), this.updateHoverIcon(), this.updateSelection(), this.updateTree(), this.updateEditor(), this.updateRender(), this.getValidationMessage(), this.updateContainer(), this.text = this.getText(), this.displayText = this.getDisplayText();
}
updateSpan() {
if (this.cellType === "footer")
return;
const { SPAN_METHOD: e } = this.ctx.config;
if (typeof e == "function") {
const i = e, {
colspan: s = 1,
rowspan: o = 1,
relationRowKeys: r,
relationColKeys: a,
mergeRow: l = !1,
mergeCol: c = !1
} = i({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue(),
headIndex: this.ctx.body.headIndex,
headPosition: this.ctx.database.getPositionForRowIndex(this.ctx.body.headIndex),
visibleRows: this.ctx.body.visibleRows,
visibleLeafColumns: this.ctx.header.visibleLeafColumns,
rows: this.ctx.body.data
}) || {};
Array.isArray(r) && r.length > 0 ? this.relationRowKeys = r : this.relationRowKeys = [this.key], Array.isArray(a) && a.length > 0 ? this.relationColKeys = a : this.relationColKeys = [this.key], this.mergeCol = c, this.mergeRow = l, this.colspan = s, this.rowspan = o, this.visibleWidth = this.getWidthByColIndexColSpan(this.colIndex, this.colspan), this.visibleHeight = this.ctx.database.getHeightByRowIndexRowSpan(this.rowIndex, this.rowspan);
}
}
updateSpanInfo() {
if (this.mergeRow || this.mergeCol) {
const e = this.getSpanInfo();
this.height = e.height, this.width = e.width, this.drawX = this.getDrawX(), this.drawY = this.getDrawY(), this.drawY -= e.offsetTop, this.drawX -= e.offsetLeft;
}
}
updateType() {
const { BODY_CELL_TYPE_METHOD: e } = this.ctx.config;
if (typeof e == "function") {
const s = e({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
});
s !== void 0 && (this.type = s);
}
}
updateEditor() {
const { BODY_CELL_EDITOR_METHOD: e } = this.ctx.config;
if (typeof e == "function") {
const s = e({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
});
if (s !== void 0) {
const { type: o, props: r = {} } = s;
this.editorType = o, this.editorProps = r;
}
}
}
updateRender() {
const { BODY_CELL_RENDER_METHOD: e } = this.ctx.config;
if (typeof e == "function") {
const s = e({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
});
s !== void 0 && (this.render = s);
}
}
validate() {
this.ctx.database.getValidator(this.rowKey, this.key).then(() => {
this.ctx.database.setValidationError(this.rowKey, this.key, []), this.message = "";
}).catch((e) => {
if (Array.isArray(e) && e.length) {
const [i] = e;
this.message = i.message, this.ctx.database.setValidationError(this.rowKey, this.key, e);
}
}).finally(() => {
this.ctx.emit("draw");
});
}
/**
* 更新样式
*/
updateStyle() {
this.autoRowHeight && (this.domDataset = {
"data-auto-height": !0,
"data-row-index": this.rowIndex,
"data-col-index": this.colIndex
}), this.style = this.getOverlayerViewsStyle();
}
updateTree() {
const { CELL_PADDING: e = 0 } = this.ctx.config, { rowKey: i, cellType: s } = this;
let o, r = 0, a = "";
if (!(["tree", "selection-tree", "tree-selection"].includes(this.type) && s === "body"))
return;
const l = this.ctx.database.getRowForRowKey(i), { expand: c = !1, hasChildren: d = !1, expandLoading: f = !1, level: x = 0 } = l || {};
this.rowExpand = c, this.rowHasChildren = d;
const { TREE_INDENT: u = 16, CHECKBOX_SIZE: g, TREE_ICON_SIZE: m } = this.ctx.config;
if (r = x * u, f) {
const R = this.ctx.icons.get("loading");
a = "loading", o = R;
} else if (d) {
const R = this.ctx.icons.get("expand"), S = this.ctx.icons.get("shrink");
o = c ? S : R, a = c ? "shrink" : "expand";
}
let w = m, E = m, p = this.drawX;
(this.align === "center" || this.align === "right") && (p = this.drawX + (this.visibleWidth - w - 2 * e) / 2, this.align = "left");
let C = p + r + e, b = this.drawY + (this.visibleHeight - E) / 2, y = r + this.drawX + w - 0.5;
this.type === "selection-tree" ? (C = r + this.drawSelectionImageX + this.drawSelectionImageWidth, y = C + w - e / 2) : this.type === "tree-selection" ? y = C + g + w - e / 2 : y = C + w - e / 2, this.drawTextX = y, this.drawTextWidth = this.drawX + this.visibleWidth - y, !(C + w + e > this.drawX + this.visibleWidth) && (b + E + e > this.drawY + this.visibleHeight || (this.drawTreeImageX = C, this.drawTreeImageY = b, this.drawTreeImageWidth = w, this.drawTreeImageHeight = E, o ? (this.drawTreeImageName = a, this.drawTreeImageSource = o) : (this.drawTreeImageName = "", this.drawTreeImageSource = void 0)));
}
drawTreeLine() {
const { TREE_LINE: e, TREE_INDENT: i = 16, TREE_ICON_SIZE: s = 16, TREE_LINE_COLOR: o = "#e1e6eb" } = this.ctx.config;
if (!e || this.cellType !== "body" || !["tree", "selection-tree", "tree-selection"].includes(this.type) || this.rowspan === 0 || this.colspan === 0) return;
const r = this.ctx.database.getRowForRowKey(this.rowKey) || {}, a = r.level ?? 0, l = this.drawTreeImageX + this.drawTreeImageWidth / 2, c = this.drawTreeImageY + this.drawTreeImageHeight / 2;
let d = this.drawTreeImageX - a * i;
const f = Array.isArray(r.parentRowKeys) ? r.parentRowKeys : [];
if (a > 0) {
for (let w = 0; w < a - 1; w += 1) {
const E = f[w + 1];
if (!!(E ? this.ctx.database.getRowForRowKey(E) || {} : {}).isLastChild) continue;
const b = Math.round(this.drawTreeImageX - (a - w) * i + s / 2);
this.ctx.paint.drawLine([b, this.drawY, b, this.drawY + this.visibleHeight], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
}
const x = Math.round(this.drawTreeImageX - i + s / 2), g = !!r.isLastChild ? c : this.drawY + this.visibleHeight;
this.ctx.paint.drawLine([x, this.drawY, x, g], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
const m = Math.round(d + (a - 1) * i + s / 2);
this.ctx.paint.drawLine([m, c, l, c], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
}
if (r.hasChildren && r.expand) {
const x = this.drawTreeImageY + this.drawTreeImageHeight, u = this.drawY + this.visibleHeight;
this.ctx.paint.drawLine([l, x, l, u], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
}
}
updateContainer() {
const {
BODY_BG_COLOR: e,
EDIT_BG_COLOR: i,
BODY_CELL_STYLE_METHOD: s,
FOOTER_CELL_STYLE_METHOD: o,
READONLY_TEXT_COLOR: r,
BODY_TEXT_COLOR: a,
FOOTER_TEXT_COLOR: l,
FOOTER_BG_COLOR: c,
HIGHLIGHT_SELECTED_ROW: d,
HIGHLIGHT_SELECTED_ROW_COLOR: f,
HIGHLIGHT_HOVER_ROW: x,
HIGHLIGHT_HOVER_ROW_COLOR: u,
STRIPE: g,
STRIPE_COLOR: m,
FINDER_CELL_BG_COLOR: w
} = this.ctx.config;
if (this.cellType === "footer") {
let _ = c, T = l;
if (typeof o == "function") {
const M = o, { backgroundColor: L, color: A, font: H } = M({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
}) || {};
L && (_ = L), A && (T = A), H && (this.drawTextFont = H);
}
this.drawCellSkyBgColor = "transparent", this.drawCellBgColor = _, this.drawTextColor = T;
return;
}
let E = "transparent";
const p = this.ctx.hoverCell, C = this.ctx.currentCell;
let b = this.rowIndex, y = this.rowIndex;
if (this.rowspan !== 1 && (x || d)) {
const _ = this.getSpanInfo(), { yArr: T } = _;
b = T[0], y = T[1];
}
x && p && (p.rowKey === this.rowKey && (E = u), p.rowIndex >= b && p.rowIndex <= y && (E = u)), d && C && (C.rowKey === this.rowKey && (E = f), C.rowIndex >= b && C.rowIndex <= y && (E = f)), this.drawCellSkyBgColor = E;
let R = e, S = a;
if (this.ctx.database.getReadonly(this.rowKey, this.key) || (R = i, S = r), g && (this.rowIndex % 2 ? R = m : R = e), typeof s == "function") {
const _ = s, { backgroundColor: T, color: M, font: L } = _({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
isHasChanged: this.isHasChanged,
value: this.getValue()
}) || {};
T && (R = T), M && (S = M), L && (this.drawTextFont = L);
}
const { rowIndex: O, colIndex: v, type: I } = this.ctx.finderBar;
O === this.rowIndex && v === this.colIndex && I === "body" && (R = w), this.drawCellBgColor = R, this.drawTextColor = S;
}
updateSelection() {
const { visibleWidth: e, visibleHeight: i, rowspan: s, colspan: o, cellType: r, type: a, rowIndex: l, rowKey: c } = this;
if (s === 0 || o === 0 || r === "footer" || !["index-selection", "selection", "selection-tree", "tree-selection"].includes(a))
return;
const d = this.ctx.database.getRowSelectable(c), { CHECKBOX_SIZE: f = 0, CELL_PADDING: x } = this.ctx.config;
let u = this.drawX + x;
(this.align === "center" || this.align === "right") && (u = this.drawX + (e - f) / 2);
let g = u, m = this.drawY + (i - f) / 2;
if (a !== "selection-tree") {
if (a === "tree-selection") {
const { TREE_INDENT: p = 16, TREE_ICON_SIZE: C } = this.ctx.config, b = this.ctx.database.getRowForRowKey(c), { level: y = 0 } = b || {}, R = y * p;
g = u + C + R;
}
}
let w = this.ctx.icons.get("checkbox-uncheck"), E = "checkbox-uncheck";
if (a === "selection-tree" || a === "tree-selection") {
const p = this.ctx.database.getTreeSelectionState(c);
p.indeterminate && d ? (w = this.ctx.icons.get("checkbox-indeterminate"), E = "checkbox-indeterminate") : p.checked && d ? (w = this.ctx.icons.get("checkbox-check"), E = "checkbox-check") : !p.checked && d ? (w = this.ctx.icons.get("checkbox-uncheck"), E = "checkbox-uncheck") : (w = this.ctx.icons.get("checkbox-disabled"), E = "checkbox-disabled");
} else {
const p = this.ctx.database.getRowSelection(c);
p && d ? (w = this.ctx.icons.get("checkbox-check"), E = "checkbox-check") : p && !d ? (w = this.ctx.icons.get("checkbox-check-disabled"), E = "checkbox-check-disabled") : !p && d ? (w = this.ctx.icons.get("checkbox-uncheck"), E = "checkbox-uncheck") : (w = this.ctx.icons.get("checkbox-disabled"), E = "checkbox-disabled");
}
g + f + x > this.drawX + this.visibleWidth || m + f + x > this.drawY + this.visibleHeight || (a === "index-selection" ? (this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === l || ["checkbox-disabled", "checkbox-check"].includes(E)) && (this.drawSelectionImageX = g, this.drawSelectionImageY = m, this.drawSelectionImageWidth = f, this.drawSelectionImageHeight = f, this.drawSelectionImageName = E, this.drawSelectionImageSource = w) : (this.drawSelectionImageX = g, this.drawSelectionImageY = m, this.drawSelectionImageWidth = f, this.drawSelectionImageHeight = f, this.drawSelectionImageName = E, this.drawSelectionImageSource = w));
}
updateHoverIcon() {
if (this.ctx.database.getReadonly(this.rowKey, this.key))
return;
const { BODY_CELL_HOVER_ICON_METHOD: i, CELL_HOVER_ICON_SIZE: s, CELL_PADDING: o, ENABLE_MERGE_CELL_LINK: r } = this.ctx.config;
if (typeof i == "function") {
const c = i({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
});
c !== void 0 && (this.hoverIconName = c);
}
const { hoverCell: a } = this.ctx;
if (this.hoverIconName && !this.ctx.editing && a) {
let l = 0, c = 0;
if (a.rowKey === this.rowKey && (l = this.drawX + this.width - s - o, c = this.drawY + (this.height - s) / 2), this.rowspan !== 1 && r) {
const f = this.getSpanInfo(), { yArr: x } = f, u = x[0], g = x[1];
if (a.rowIndex >= u && a.rowIndex <= g) {
const { width: m, height: w, offsetTop: E, offsetLeft: p } = f;
l = this.drawX - p + m - s - o, c = this.drawY - E + (w - s) / 2;
}
}
const d = this.ctx.icons.get(this.hoverIconName);
this.drawHoverImageX = l, this.drawHoverImageY = c, this.drawHoverImageWidth = s, this.drawHoverImageHeight = s, this.drawHoverImageName = this.hoverIconName, this.drawHoverImageSource = d;
}
}
/**
* 获取自动高度
* @returns
*/
getAutoHeight() {
if (this.cellType !== "body" || !this.autoRowHeight || this.rowspan === 0)
return 0;
if (this.render) {
const a = this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex);
return this.rowspan > 1 ? a < this.visibleHeight ? 0 : Math.round(a - (this.visibleHeight - this.height)) : Math.round(a);
}
if (!(this.displayText && typeof this.displayText == "string"))
return 0;
const { BODY_FONT: e, CELL_PADDING: i, CELL_LINE_HEIGHT: s } = this.ctx.config, o = `${this.displayText}_${this.drawTextWidth}_${this.drawTextFont}`, r = this.ctx.paint.calculateTextHeight(this.displayText, this.drawTextWidth, {
font: this.drawTextFont || e,
padding: i,
align: this.align,
verticalAlign: this.verticalAlign,
color: this.drawTextColor,
autoRowHeight: this.autoRowHeight,
lineHeight: s,
maxLineClamp: this.maxLineClamp,
cacheTextKey: o
});
return this.rowspan > 1 ? r < this.visibleHeight ? 0 : Math.round(r - (this.visibleHeight - this.height)) : Math.round(r);
}
// 过去跨度配置
getSpanInfo() {
return this.ctx.database.getSpanInfo(this);
}
/**
* 获取显示文本
* @returns
*/
getDisplayText() {
return this.cellType === "footer" ? this.renderFooter || this.text === null || this.text === void 0 ? "" : this.text : this.rowspan === 0 || this.colspan === 0 || this.render || this.type === "index-selection" && (this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === this.rowIndex || ["checkbox-disabled", "checkbox-check"].includes(this.drawSelectionImageName)) || this.text === null || this.text === void 0 ? "" : `${this.text}`;
}
/**
* 获取文本
* @returns
*/
getText() {
if (this.cellType === "footer")
return typeof this.formatterFooter == "function" ? this.formatterFooter({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.row[this.key]
}) : this.row[this.key];
if (typeof this.formatter == "function")
return this.formatter({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
});
const { BODY_CELL_FORMATTER_METHOD: e } = this.ctx.config;
return typeof e == "function" ? e({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
}) : ["index-selection", "index"].includes(this.type) ? `${this.rowIndex + 1}` : (this.value = this.ctx.database.getItemValue(this.rowKey, this.key), this.value);
}
getValue() {
return this.ctx.database.getItemValue(this.rowKey, this.key);
}
// 拓展格子可设置数据
setValue(e) {
this.ctx.setItemValueByEditor(this.rowKey, this.key, e);
}
/**
* 获取样式
*/
getOverlayerViewsStyle() {
let e = `${this.drawX - this.ctx.fixedLeftWidth}px`, i = `${this.drawY - this.ctx.body.y}px`;
return this.fixed === "left" ? e = `${this.drawX}px` : this.fixed === "right" && (e = `${this.drawX - (this.ctx.stageWidth - this.ctx.fixedRightWidth)}px`), this.cellType === "footer" && this.ctx.config.FOOTER_FIXED && (i = `${this.drawY - this.ctx.footer.y}px`), this.autoRowHeight && this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex) === 0 && (e = "-99999px", i = "-99999px"), {
position: "absolute",
overflow: "hidden",
left: e,
top: i,
width: `${this.visibleWidth}px`,
height: this.autoRowHeight ? "auto" : `${this.visibleHeight}px`,
// height: `${this.visibleHeight}px`,
// minHeight: `${this.visibleHeight}px`,
pointerEvents: "initial",
userSelect: "none"
};
}
drawContainer() {
const {
paint: e,
config: { BORDER_COLOR: i, BORDER: s }
} = this.ctx, { drawX: o, drawY: r } = this;
e.drawRect(o, r, this.visibleWidth, this.visibleHeight, {
borderColor: s ? i : "transparent",
fillColor: this.drawCellBgColor
}), e.drawRect(o, r, this.width, this.height, {
borderColor: "transparent",
fillColor: this.drawCellSkyBgColor
}), s || this.ctx.paint.drawLine(
[o, r + this.visibleHeight, o + this.visibleWidth, r + this.visibleHeight],
{
borderColor: i,
fillColor: i,
borderWidth: 1,
lineCap: "round",
lineJoin: "round"
}
);
}
drawAutofillPiont() {
if (this.cellType === "footer")
return;
const { SELECT_BORDER_COLOR: e, ENABLE_AUTOFILL: i, ENABLE_SELECTOR: s, AUTOFILL_POINT_BORDER_COLOR: o } = this.ctx.config;
if (!s || !i || this.ctx.editing)
return;
const { xArr: r, yArr: a } = this.ctx.selector, l = r[1], c = a[1], { colIndex: d, rowIndex: f, drawX: x, drawY: u } = this;
if (d === l && f === c) {
const m = d === this.ctx.maxColIndex || f === this.ctx.maxRowIndex || d === this.ctx.lastCenterColIndex ? 6 : 4;
this.ctx.paint.drawRect(x + this.width - m, u + this.height - m, 6, 6, {
borderColor: o,
fillColor: e
});
}
}
draw() {
this.drawTreeLine(), this.drawText(), this.drawImage(), this.drawSelector(), this.drawAutofillPiont(), this.drawErrorTip();
}
/**
* 根据列的索引获取列的宽度
* @param {Number} colIndex
*/
getWidthByColIndexColSpan(e, i) {
if (i === 0)
return 0;
let s = 0;
for (let o = e; o < e + i; o++) {
const r = this.ctx.header.leafCellHeaders[o];
s += r.width;
}
return s;
}
drawText() {
const { CELL_PADDING: e, BODY_FONT: i, PLACEHOLDER_COLOR: s, CELL_LINE_HEIGHT: o } = this.ctx.config, { placeholder: r } = this.column;
let a = this.displayText, l = this.drawTextColor;
if (!this.ctx.database.getReadonly(this.rowKey, this.key) && r && ["", null, void 0].includes(this.text) && this.cellType === "body" && !(this.rowspan === 0 || this.colspan === 0) && (a = r, l = s), ["", null, void 0].includes(a))
return !1;
typeof a != "string" && (a = `${a}`);
const d = `${a}_${this.drawTextWidth}_${this.drawTextFont}`;
return this.ellipsis = this.ctx.paint.drawText(
a,
this.drawTextX,
this.drawTextY,
this.drawTextWidth,
this.drawTextHeight,
{
font: this.drawTextFont || i,
padding: e,
align: this.align,
verticalAlign: this.verticalAlign,
color: l,
autoRowHeight: this.autoRowHeight,
lineHeight: o,
maxLineClamp: this.maxLineClamp,
cacheTextKey: d
}
), this.ellipsis;
}
drawImage() {
if (this.drawSelectionImageSource && this.ctx.paint.drawImage(
this.drawSelectionImageSource,
this.drawSelectionImageX,
this.drawSelectionImageY,
this.drawSelectionImageWidth,
this.drawSelectionImageHeight
), this.drawTreeImageSource && this.ctx.paint.drawImage(
this.drawTreeImageSource,
this.drawTreeImageX,
this.drawTreeImageY,
this.drawTreeImageWidth,
this.drawTreeImageHeight
), this.drawHoverImageSource) {
const { CELL_HOVER_ICON_BG_COLOR: e, CELL_HOVER_ICON_BORDER_COLOR: i } = this.ctx.config;
this.ctx.paint.drawRect(
this.drawHoverImageX - 2,
this.drawHoverImageY - 2,
this.drawHoverImageWidth + 4,
this.drawHoverImageHeight + 4,
{
borderColor: i,
radius: 4,
borderWidth: 1,
fillColor: e
}
), this.ctx.paint.drawImage(
this.drawHoverImageSource,
this.drawHoverImageX,
this.drawHoverImageY,
this.drawHoverImageWidth,
this.drawHoverImageHeight
);
}
}
drawSelector() {
if (this.cellType === "footer")
return;
const { ENABLE_SELECTOR: e } = this.ctx.config;
if (!e)
return;
const { xArr: i, yArr: s, xArrCopy: o, yArrCopy: r } = this.ctx.selector;
this.drawBorder({
xArr: o,
yArr: r,
borderColor: this.ctx.config.SELECT_BORDER_COLOR || "rgb(82,146,247)",
fillColor: "transparent",
borderWidth: 1,
lineDash: [4, 4]
}), this.drawBorder({
xArr: this.ctx.autofill.xArr,
yArr: this.ctx.autofill.yArr,
borderColor: this.ctx.config.SELECT_BORDER_COLOR || "rgb(82,146,247)",
fillColor: "transparent",
borderWidth: 1,
lineDash: [4, 4]
}), this.drawBorder({
xArr: i,
yArr: s,
borderColor: this.ctx.config.SELECT_BORDER_COLOR || "rgb(82,146,247)",
fillColor: "transparent",
borderWidth: 1
});
const [a, l] = i, [c, d] = s;
!(a === l && c === d) && this.colIndex >= a && this.colIndex <= l && this.rowIndex >= c && this.rowIndex <= d && this.ctx.paint.drawRect(this.drawX, this.drawY, this.width, this.height, {
borderColor: "transparent",
fillColor: this.ctx.config.SELECT_AREA_COLOR || "rgba(82,146,247,0.1)"
}), this.operation && this.rowIndex >= c && this.rowIndex <= d && this.ctx.paint.drawRect(this.drawX, this.drawY, this.visibleWidth, this.visibleHeight, {
borderColor: "transparent",
fillColor: this.ctx.config.SELECT_ROW_COL_BG_COLOR || "transparent"
});
}
drawErrorTip() {
if (this.cellType === "footer" || !this.message || this.rowspan === 0 || this.colspan === 0)
return;
const { ERROR_TIP_ICON_SIZE: e, ERROR_TIP_COLOR: i } = this.ctx.config, { width: s } = this, o = this.drawX, r = this.drawY, a = [
o + s - e - 0.5,
r,
o + s - 0.5,
r,
o + s - 0.5,
r + e
];
this.ctx.paint.drawLine(a, {
borderColor: i,
fillColor: i,
borderWidth: 1,
lineCap: "round",
lineJoin: "round"
});
}
drawBorder(e) {
const { drawX: i, drawY: s, rowIndex: o, colIndex: r, height: a, width: l } = this;
let c = i, d = s;
const { xArr: f, yArr: x, lineDash: u = [], borderWidth: g = 1, borderColor: m, fillColor: w } = e, E = f[0], p = f[1], C = x[0], b = x[1];
if (r >= E && r <= p && o === C) {
const y = r === p ? 1 : 0, R = r === E ? 1 : 0;
this.ctx.paint.drawLine([c + R, d + 1, c + l - y, d + 1], {
borderColor: m,
fillColor: w,
borderWidth: g,
lineCap: "round",
lineJoin: "round",
lineDash: u
});
}
if (r === p && o >= C && o <= b) {
const y = o === C ? 1 : 0, R = o === b ? 1 : 0;
this.ctx.paint.drawLine([c + l - 1, d + y, c + l - 1, d + a - R], {
borderColor: m,
fillColor: w,
borderWidth: g,
lineCap: "round",
lineJoin: "round",
lineDash: u
});
}
if (r >= E && r <= p && o === b) {
const y = r === p ? 1 : 0, R = r === E ? 1 : 0;
this.ctx.paint.drawLine([c + R, d + a - 1, c + l - y, d + a - 1], {
borderColor: m,
fillColor: w,
borderWidth: g,
lineCap: "round",
lineJoin: "round",
lineDash: u
});
}
if (r === E && o >= C && o <= b) {
const y = o === b ? 1 : 0, R = o === C ? 1 : 0;
this.ctx.paint.drawLine([c + 1, d + R, c + 1, d + a - y], {
borderColor: m,
fillColor: w,
borderWidth: g,
lineCap: "round",
lineJoin: "round",
lineDash: u
});
}
}
}
class be {
constructor(t, e) {
n(this, "ctx");
n(this, "data");
n(this, "columns");
n(this, "footerData", []);
n(this, "rowKeyMap", /* @__PURE__ */ new Map());
n(this, "colIndexKeyMap", /* @__PURE__ */ new Map());
n(this, "headerMap", /* @__PURE__ */ new Map());
n(this, "rowIndexRowKeyMap", /* @__PURE__ */ new Map());
n(this, "rowKeyRowIndexMap", /* @__PURE__ */ new Map());
n(this, "checkboxKeyMap", /* @__PURE__ */ new Map());
n(this, "selectionMap", /* @__PURE__ */ new Map());
n(this, "expandMap", /* @__PURE__ */ new Map());
n(this, "originalDataMap", /* @__PURE__ */ new Map());
n(this, "changedDataMap", /* @__PURE__ */ new Map());
n(this, "validationErrorMap", /* @__PURE__ */ new Map());
n(this, "itemRowKeyMap", /* @__PURE__ */ new WeakMap());
n(this, "bufferData", []);
n(this, "customHeader", {
fixedData: {},
sortData: {},
hideData: {},
resizableData: {}
});
n(this, "overlayerAutoHeightMap", /* @__PURE__ */ new Map());
n(this, "maxRowHeightMap", /* @__PURE__ */ new Map());
// 记录每行的最大渲染高度（按 rowKey 存储）
n(this, "bufferCheckState", {
buffer: !1,
check: !1,
indeterminate: !1,
selectable: !0
});
n(this, "sumHeight", 0);
n(this, "filterMethod");
n(this, "positions", []);
//虚拟滚动位置
n(this, "sortState", /* @__PURE__ */ new Map());
this.ctx = t;
const { data: i = [], columns: s = [], footerData: o = [] } = e;
this.data = i, this.footerData = o, this.columns = s, this.init();
}
// 初始化默认不忽略清空改变值和校验map
init(t = !0) {
this.ctx.paint.clearTextCache(), this.clearBufferData(), this.rowKeyMap.clear(), this.checkboxKeyMap.c