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,094 lines • 347 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-body-bg-color: #fff;--evt-stripe-color: #fafafa;--evt-placeholder-color: #cdd0dc;--evt-header-bg-color: #f8faff;--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;background-color:var(--evt-body-bg-color);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}.e-virt-table-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:#666;z-index:15}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
var Te = Object.defineProperty;
var Se = (h, t, e) => t in h ? Te(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e;
var n = (h, t, e) => Se(h, typeof t != "symbol" ? t + "" : t, e);
class Oe {
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 u of this.rules) {
if (u.validator) {
const x = {
field: d,
fieldValue: f,
value: c,
column: i,
colIndex: a,
rowIndex: l,
row: s,
key: o,
rowKey: r,
...u
};
u.validator(x, c, (g) => {
g && e.push({
...x,
message: g
});
});
}
if (!u.required && (c == null || c === ""))
return e;
u.pattern && !u.pattern.test(c) && e.push({
value: c,
column: i,
row: s,
key: o,
rowKey: r,
colIndex: a,
rowIndex: l,
field: d,
fieldValue: f,
message: u.message || `${o} is pattern validation error`
}), u.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: u.message || `${o} is required`
});
}
return e;
}
}
function ae() {
return "xxxxxxxxxxxxxxxxxx".replace(/[x]/g, function(h) {
const t = Math.random() * 16 | 0;
return (h === "x" ? t : t & 3 | 8).toString(16);
});
}
function Nt(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 ht(h = []) {
return h.length ? h.map((t) => ht(t.children) + 1).sort((t, e) => e - t)[0] : 0;
}
function Le(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 dt(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 = dt(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 st(h = []) {
let t = [];
return h.forEach((e) => {
e.children ? t = t.concat(st(e.children)) : t.push(e);
}), t;
}
function le(h) {
return h.filter((t) => !t.hide).map((t) => Array.isArray(t.children) && t.children.length > 0 ? {
...t,
children: le(t.children)
// 递归处理
} : { ...t });
}
const Pt = /^(\r\n|\n\r|\r|\n)/, Me = /^[^\t\r\n]+/, zt = /^\t/;
function Ae(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(zt))
h = h.replace(zt, ""), e += 1, t[i][e] = "";
else if (h.match(Pt))
h = h.replace(Pt, ""), 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(Me);
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 He(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 ce(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 he(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 De(h, t, e = []) {
const { visibleRows: i, rowIndex: s, headIndex: o } = h, r = ce(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 Ne(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 = he(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 ke(h, t = document.documentElement) {
const e = h.startsWith("--") ? h : `--${h}`;
return getComputedStyle(t).getPropertyValue(e).trim();
}
function Gt(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, u = 0] = r;
return new Date(a, l - 1, c, d, f, u);
} 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, u = 0] = r;
return new Date(c, l - 1, a, d, f, u);
} 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, u = 0] = r;
return new Date(c, a - 1, l, d, f, u);
} else if (s.source.includes("YYYYMMDD")) {
const [a, l, c] = r;
return new Date(a, l - 1, c);
}
}
}
return /* @__PURE__ */ new Date(NaN);
}
function Be(h, t) {
const e = Gt(h), i = Gt(t);
return isNaN(e.getTime()) && isNaN(i.getTime()) ? 0 : isNaN(e.getTime()) ? -1 : isNaN(i.getTime()) ? 1 : e.getTime() - i.getTime();
}
function Xe(h) {
const t = String(h).match(/\.(\d+)/);
return (t == null ? void 0 : t[1].length) ?? 0;
}
function Ye(h) {
return (h.scrollbarMode ?? h.SCROLLBAR_MODE) === "inner" ? "inner" : "outer";
}
function V(h) {
return Ye(h) === "inner";
}
function B(h) {
return V(h) ? 0 : h.SCROLLER_TRACK_SIZE || 0;
}
function de(h) {
return h.SCROLLER_TRACK_SIZE || 0;
}
function $t(h, t) {
return !V(h) || !t ? 0 : de(h);
}
function Ke(h) {
return V(h) ? 1 : 0;
}
function Fe(h) {
return !V(h);
}
function We(h) {
return !V(h);
}
function Ve(h, t) {
return V(h) && t;
}
function Pe(h, t) {
return V(h) ? t.innerVisible || t.isFocus || t.isDragging : !0;
}
class fe {
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, "visibleWidth", 0);
n(this, "visibleHeight", 0);
n(this, "fixed");
n(this, "cellType");
n(this, "drawX", 0);
n(this, "drawY", 0);
n(this, "cellImages", /* @__PURE__ */ new Map());
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 } = this.ctx;
return t - (this.ctx.header.width - this.x) - B(this.ctx.config);
}
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;
}
isInside(t, e) {
return t >= this.drawX && t <= this.drawX + this.width && e >= this.drawY && e <= this.drawY + this.height;
}
/**
* 判断是否在可见区域,合并单元格用
* @param x
* @param y
* @returns
*/
isInsideVisible(t, e) {
return t >= this.drawX && t <= this.drawX + this.visibleWidth && e >= this.drawY && e <= this.drawY + this.visibleHeight && this.isInside(t, e);
}
setImage(t, e) {
this.cellImages.set(t, e);
}
getImages() {
return this.cellImages;
}
getImage(t) {
return this.cellImages.get(t);
}
isImageInside(t, e) {
const { offsetX: i, offsetY: s } = this.ctx.getOffset(e), o = this.getImage(t);
return o ? o.isInside(i, s) : !1;
}
}
class q {
constructor(t, e, i, s, o, r) {
n(this, "source");
n(this, "name");
n(this, "x");
n(this, "y");
n(this, "width");
n(this, "height");
n(this, "visible", !0);
this.source = r, this.name = t, this.x = e - 1, this.y = i - 1, this.width = s, this.height = o;
}
drawWrapper(t, e) {
t.paint.drawRect(this.x - 2, this.y - 2, this.width + 4, this.height + 4, {
radius: 4,
borderWidth: 1,
...e
});
}
setVisible(t) {
this.visible = t;
}
isInside(t, e) {
return this.visible ? !!(this.source && t > this.x && t < this.x + this.width && e > this.y && e < this.y + this.height) : !1;
}
}
function rt(h) {
return h === !0 ? "default" : h === !1 ? "inner" : h;
}
function Tt(h) {
return rt(h) === "default";
}
function kt(h) {
const t = rt(h);
return t === "default" || t === "inner";
}
function ze(h) {
const t = rt(h);
return t === "default" || t === "outer";
}
function St(h) {
return rt(h) === "default";
}
function Ge(h, t) {
return St(h) || t;
}
class ue extends fe {
constructor(e, i, s, o, r, a, l, c, d, f = "body", u = !0) {
super(e, o, r, a, l, f, c.fixed);
n(this, "parentRowKey", "");
n(this, "parentRowKeys", []);
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);
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");
n(this, "precision");
n(this, "min");
n(this, "max");
n(this, "maxlength");
n(this, "mixedRender", !1);
n(this, "renderType", "default");
n(this, "renderFooterType", "default");
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", this.precision = c.precision, this.min = c.min, this.max = c.max, this.maxlength = c.maxlength, this.mixedRender = c.mixedRender || !1, this.renderType = c.renderType || "default", this.renderFooterType = c.renderFooterType || "default";
const x = this.ctx.database.getRowForRowKey(this.rowKey);
this.cellType === "body" && x && (this.parentRowKey = x.parentRowKey, this.parentRowKeys = x.parentRowKeys), u && 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.updateSpan(), this.updateDragImage();
const e = this.getImage("drag"), i = e ? e.width : 0;
this.drawTextX = this.drawX + i, this.drawTextY = this.drawY, this.isHasChanged = this.ctx.database.isHasChangedData(this.rowKey, this.key), this.drawTextWidth = this.visibleWidth - i, 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();
}
isInsideVisible(e, i) {
return e >= this.drawX && e <= this.drawX + this.visibleWidth && i >= this.drawY && i <= this.drawY + this.visibleHeight;
}
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: u = 0 } = l || {};
this.rowExpand = c, this.rowHasChildren = d;
const { TREE_INDENT: x = 16, CHECKBOX_SIZE: g, TREE_ICON_SIZE: E } = this.ctx.config;
if (r = u * x, f) {
const _ = this.ctx.icons.get("loading");
a = "loading", o = _;
} else if (d) {
const _ = this.ctx.icons.get("expand"), R = this.ctx.icons.get("shrink");
o = c ? R : _, a = c ? "shrink" : "expand";
}
let m = E, w = E, y = this.drawX;
(this.align === "center" || this.align === "right") && (y = this.drawX + (this.visibleWidth - m - 2 * e) / 2, this.align = "left");
let b = y + r + e, p = this.drawY + (this.visibleHeight - w) / 2, C = r + this.drawX + m - 0.5;
const v = this.getImage("selection"), I = this.getImage("drag"), T = I ? I.width : 0;
if (this.type === "selection-tree" && v) {
const _ = v.x, R = v.width;
b = r + _ + R, C = b + m - e / 2;
} else this.type === "tree-selection" ? (b += T, C = b + g + m - e / 2) : (b += T, C = b + m - e / 2);
this.drawTextX = C, this.drawTextWidth = this.drawX + this.visibleWidth - C, !(b + m + e > this.drawX + this.visibleWidth) && (p + w + e > this.drawY + this.visibleHeight || this.setImage("tree", new q(a, b, p, m, w, o)));
}
updateDragImage() {
if (this.cellType === "body" && this.column.dragRow) {
const { DRAG_ROW_ICON_SIZE: e, CELL_PADDING: i } = this.ctx.config, s = this.drawX + i / 2, o = this.drawY + (this.visibleHeight - e) / 2, r = new q("drag", s, o, e, e, this.ctx.icons.get("drag"));
this.rowspan === 0 && r.setVisible(!1), this.setImage("drag", r);
}
}
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.getImage("tree");
if (!l) return;
const c = l.x, d = l.y, f = l.width, u = l.height, x = c + f / 2, g = d + u / 2;
let E = c - a * i;
const m = Array.isArray(r.parentRowKeys) ? r.parentRowKeys : [];
if (a > 0) {
for (let C = 0; C < a - 1; C += 1) {
const v = m[C + 1];
if (!!(v ? this.ctx.database.getRowForRowKey(v) || {} : {}).isLastChild) continue;
const _ = Math.round(c - (a - C) * i + s / 2);
this.ctx.paint.drawLine([_, this.drawY, _, this.drawY + this.visibleHeight], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
}
const w = Math.round(c - i + s / 2), b = !!r.isLastChild ? g : this.drawY + this.visibleHeight;
this.ctx.paint.drawLine([w, this.drawY, w, b], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
const p = Math.round(E + (a - 1) * i + s / 2);
this.ctx.paint.drawLine([p, g, x, g], {
borderColor: o,
borderWidth: 1,
lineDash: [4, 4],
lineDashOffset: 0
});
}
if (r.hasChildren && r.expand) {
const w = d + u, y = this.drawY + this.visibleHeight;
this.ctx.paint.drawLine([x, w, x, y], {
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: u,
HIGHLIGHT_HOVER_ROW_COLOR: x,
STRIPE: g,
STRIPE_COLOR: E,
FINDER_CELL_BG_COLOR: m
} = this.ctx.config;
if (this.cellType === "footer") {
let S = c, O = l;
if (typeof o == "function") {
const M = o, { backgroundColor: L, color: H, font: D } = M({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
value: this.getValue()
}) || {};
L && (S = L), H && (O = H), D && (this.drawTextFont = D);
}
this.drawCellSkyBgColor = "transparent", this.drawCellBgColor = S, this.drawTextColor = O;
return;
}
let w = "transparent";
const y = this.ctx.hoverCell, b = this.ctx.currentCell;
let p = this.rowIndex, C = this.rowIndex;
if (this.rowspan !== 1 && (u || d)) {
const S = this.getSpanInfo(), { yArr: O } = S;
p = O[0], C = O[1];
}
u && y && !this.ctx.dragRowIng && (y.rowKey === this.rowKey && (w = x), y.rowIndex >= p && y.rowIndex <= C && (w = x)), d && b && !this.ctx.dragRowIng && (b.rowKey === this.rowKey && (w = f), b.rowIndex >= p && b.rowIndex <= C && (w = f)), this.drawCellSkyBgColor = w;
let v = e, I = a;
if (this.ctx.database.getReadonly(this.rowKey, this.key) || (v = i, I = r), g && (this.rowIndex % 2 ? v = E : v = e), typeof s == "function") {
const S = s, { backgroundColor: O, color: M, font: L } = S({
row: this.row,
rowIndex: this.rowIndex,
colIndex: this.colIndex,
column: this.column,
isHasChanged: this.isHasChanged,
value: this.getValue()
}) || {};
O && (v = O), M && (I = M), L && (this.drawTextFont = L);
}
const { rowIndex: T, colIndex: _, type: R } = this.ctx.finderBar;
T === this.rowIndex && _ === this.colIndex && R === "body" && (v = m), this.drawCellBgColor = v, this.drawTextColor = I;
}
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: u } = this.ctx.config;
let x = this.drawX + u;
(this.align === "center" || this.align === "right") && (x = this.drawX + (e - f) / 2);
let g = x, E = this.drawY + (i - f) / 2;
if (a !== "selection-tree") {
if (a === "tree-selection") {
const { TREE_INDENT: C = 16, TREE_ICON_SIZE: v } = this.ctx.config, I = this.ctx.database.getRowForRowKey(c), { level: T = 0 } = I || {}, _ = T * C;
g = x + v + _;
}
}
let m = this.ctx.icons.get("checkbox-uncheck"), w = "checkbox-uncheck";
if (a === "selection-tree" || a === "tree-selection") {
const C = this.ctx.database.getTreeSelectionState(c);
C.indeterminate && d ? (m = this.ctx.icons.get("checkbox-indeterminate"), w = "checkbox-indeterminate") : C.checked && d ? (m = this.ctx.icons.get("checkbox-check"), w = "checkbox-check") : !C.checked && d ? (m = this.ctx.icons.get("checkbox-uncheck"), w = "checkbox-uncheck") : (m = this.ctx.icons.get("checkbox-disabled"), w = "checkbox-disabled");
} else {
const C = this.ctx.database.getRowSelection(c);
C && d ? (m = this.ctx.icons.get("checkbox-check"), w = "checkbox-check") : C && !d ? (m = this.ctx.icons.get("checkbox-check-disabled"), w = "checkbox-check-disabled") : !C && d ? (m = this.ctx.icons.get("checkbox-uncheck"), w = "checkbox-uncheck") : (m = this.ctx.icons.get("checkbox-disabled"), w = "checkbox-disabled");
}
const y = this.getImage("drag"), b = y ? y.width : 0;
if (g += b, g + f + u > this.drawX + this.visibleWidth || E + f + u > this.drawY + this.visibleHeight)
return;
const p = new q(w, g, E, f, f, m);
if (a === "index-selection") {
p.setVisible(!1), (this.ctx.hoverCell && this.ctx.hoverCell.rowIndex === l || ["checkbox-disabled", "checkbox-check"].includes(w)) && p.setVisible(!0);
let C = this.rowIndex, v = this.rowIndex;
const I = this.ctx.hoverCell, T = this.getSpanInfo(), { yArr: _ } = T;
C = _[0], v = _[1], I && I.rowIndex >= C && I.rowIndex <= v && p.setVisible(!0);
}
this.setImage("selection", p);
}
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 && !this.ctx.dragRowIng && 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 u = this.getSpanInfo(), { yArr: x } = u, g = x[0], E = x[1];
if (a.rowIndex >= g && a.rowIndex <= E) {
const { width: m, height: w, offsetTop: y, offsetLeft: b } = u;
l = this.drawX - b + m - s - o, c = this.drawY - y + (w - s) / 2;
}
}
const d = this.ctx.icons.get(this.hoverIconName), f = new q(this.hoverIconName, l, c, s, s, d);
(this.rowspan === 0 || this.colspan === 0) && f.setVisible(!1), this.setImage("hover", f);
}
}
/**
* 获取自动高度
* @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() {
if (this.cellType === "footer")
return this.renderFooter && this.renderFooterType === "default" || this.text === null || this.text === void 0 ? "" : this.text;
{
if (this.rowspan === 0 || this.colspan === 0 || this.render && this.renderType === "default" && !this.mixedRender)
return "";
const e = this.getImage("selection");
return this.type === "index-selection" && e && e.visible || 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, i = this.drawY - this.ctx.body.y;
if (this.fixed === "left" ? e = this.drawX : this.fixed === "right" && (e = this.drawX - (this.ctx.stageWidth - this.ctx.fixedRightWidth)), this.cellType === "footer" && this.ctx.config.FOOTER_FIXED && (i = this.drawY - this.ctx.footer.y), this.autoRowHeight && this.render && this.verticalAlign === "middle") {
const o = this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex);
if (o < this.visibleHeight && o > 0) {
const r = (this.visibleHeight - o) / 2;
i = i + r;
}
}
this.autoRowHeight && this.ctx.database.getOverlayerAutoHeight(this.rowIndex, this.colIndex) === 0 && (e = -99999, i = -99999);
let s = {};
return this.rowspan === 0 && (s = {
display: "none"
}), {
position: "absolute",
overflow: "hidden",
left: `${Math.round(e - 1)}px`,
top: `${Math.round(i - 1)}px`,
width: `${this.visibleWidth}px`,
height: this.autoRowHeight && this.renderType === "default" ? "auto" : `${this.visibleHeight}px`,
// height: `${this.visibleHeight}px`,
// minHeight: `${this.visibleHeight}px`,
pointerEvents: "initial",
userSelect: "none",
...s
};
}
drawContainer() {
const {
paint: e,
config: { BORDER_COLOR: i, BORDER: s }
} = this.ctx, { drawX: o, drawY: r } = this, a = Tt(s);
e.drawRect(o, r, this.visibleWidth, this.visibleHeight, {
borderColor: a ? i : "transparent",
fillColor: this.drawCellBgColor
}), e.drawRect(o, r, this.width, this.height, {
borderColor: "transparent",
fillColor: this.drawCellSkyBgColor
});
}
drawHorizontalBorder() {
const {
config: { BORDER_COLOR: e, BORDER: i }
} = this.ctx;
if (Tt(i) || !kt(i))
return;
const { drawX: s, drawY: o } = this;
this.ctx.paint.drawLine(
[s, o + this.visibleHeight, s + this.visibleWidth, o + this.visibleHeight],
{
borderColor: e,
fillColor: e,
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: u, drawY: x } = this;
if (d === l && f === c) {
const E = d === this.ctx.maxColIndex || f === this.ctx.maxRowIndex || d === this.ctx.lastCenterColIndex ? 6 : 4;
this.ctx.paint.drawRect(u + this.width - E, x + this.height - E, 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,
layoutCallback: (f) => {
this.ctx.emit(
"registerTextLayout",
`${this.cellType}-${this.rowIndex}-${this.colIndex}`,
f
);
}
}
), this.ellipsis;
}
drawImage() {
this.getImages().forEach((e, i) => {
if (e.visible && e.source) {
if (i === "hover") {
const { CELL_HOVER_ICON_BG_COLOR: s, CELL_HOVER_ICON_BORDER_COLOR: o } = this.ctx.config;
e.drawWrapper(this.ctx, {
borderColor: o,
fillColor: s
});
}
this.ctx.paint.drawImage(
e.source,
e.x,
e.y,
e.width,
e.height
);
}
});
}
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