@visactor/vtable
Version:
canvas table width high performance
167 lines (162 loc) • 11.1 kB
JavaScript
import { TABLE_EVENT_TYPE } from "../core/TABLE_EVENT_TYPE";
import { getCellEventArgsSet } from "../event/util";
import { isPromise } from "../tools/helper";
import { isValid } from "@visactor/vutils";
export class EditManager {
constructor(table) {
this.isValidatingValue = !1, this.listenersId = [], this.cacheLastSelectedCellEditor = {},
this.table = table;
const {editCellTrigger: editCellTrigger = "doubleclick"} = table.options;
this.bindEvent(editCellTrigger);
}
bindEvent(editCellTrigger) {
const table = this.table, doubleClickEventId = table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, (e => {
var _a, _b, _c;
if (!editCellTrigger.includes("doubleclick")) return;
const {col: col, row: row} = e, eventArgsSet = getCellEventArgsSet(e.federatedEvent), resizeCol = table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell);
table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 || (null === (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.attribute) || void 0 === _c ? void 0 : _c.funcType) || (this.beginTriggerEditCellMode = "doubleclick",
this.startEditCell(col, row));
})), clickEventId = table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e => {
var _a, _b;
const {editCellTrigger: editCellTrigger = "doubleclick"} = table.options;
if ("click" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("click")) {
if (null === (_b = null === (_a = e.target) || void 0 === _a ? void 0 : _a.attribute) || void 0 === _b ? void 0 : _b.funcType) return;
this.beginTriggerEditCellMode = "click";
const {col: col, row: row} = e;
this.startEditCell(col, row);
} else "keydown" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("keydown");
})), selectedChangedEventId = table.on(TABLE_EVENT_TYPE.SELECTED_CHANGED, (e => {
const selectedRanges = table.stateManager.select.ranges;
if (1 === selectedRanges.length && selectedRanges[0].start.col === selectedRanges[0].end.col && selectedRanges[0].start.row === selectedRanges[0].end.row && ("keydown" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("keydown"))) {
const {col: col, row: row} = e;
this.beginTriggerEditCellMode = "keydown";
const rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row)), referencePosition = {
rect: {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height
}
};
col === this.table.colCount - 1 ? referencePosition.rect.width = rect.width - 1 : referencePosition.rect.width = rect.width + 1,
row === this.table.rowCount - 1 ? referencePosition.rect.height = rect.height - 1 : referencePosition.rect.height = rect.height + 1;
const editor = this.table.getEditor(col, row);
editor && setTimeout((() => {
var _a;
editor && this.editingEditor !== editor && (null === (_a = editor.prepareEdit) || void 0 === _a || _a.call(editor, {
referencePosition: referencePosition,
container: this.table.getElement(),
table: this.table,
col: col,
row: row
}));
}), 10);
}
}));
this.listenersId.push(doubleClickEventId, clickEventId, selectedChangedEventId);
}
startEditCell(col, row, value, editElement) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
if (this.editingEditor) return;
const editor = this.table.getEditor(col, row);
if (editor) {
if (editElement && (null === (_b = (_a = editor).setElement) || void 0 === _b || _b.call(_a, editElement)),
this.table.internalProps.layoutMap.isSeriesNumber(col, row)) return;
if (null === (_d = null === (_c = this.table.internalProps.layoutMap) || void 0 === _c ? void 0 : _c.isAggregation) || void 0 === _d ? void 0 : _d.call(_c, col, row)) {
const isPivotTable = null === (_f = (_e = this.table).isPivotTable) || void 0 === _f ? void 0 : _f.call(_e), updateAggregationOnEditCell = !!isPivotTable && (null === (_h = null === (_g = this.table.internalProps) || void 0 === _g ? void 0 : _g.dataConfig) || void 0 === _h ? void 0 : _h.updateAggregationOnEditCell);
if (!isPivotTable || isPivotTable && updateAggregationOnEditCell) return;
}
const record = this.table.getCellRawRecord(col, row);
if (null == record ? void 0 : record.vtableMerge) return;
this.editingEditor || (this.editCell = {
col: col,
row: row
}), this.table._makeVisibleCell(col, row), this.editingEditor = editor;
const customMergeText = null === (_j = this.table.getCustomMerge(col, row)) || void 0 === _j ? void 0 : _j.text, dataValue = isValid(value) ? value : isValid(customMergeText) ? customMergeText : this.table.getCellOriginValue(col, row), rect = this.table.getCellRangeRelativeRect(this.table.getCellRange(col, row)), referencePosition = {
rect: {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height
}
};
col === this.table.colCount - 1 ? referencePosition.rect.width = rect.width - 1 : referencePosition.rect.width = rect.width + 1,
row === this.table.rowCount - 1 ? referencePosition.rect.height = rect.height - 1 : referencePosition.rect.height = rect.height + 1,
editor.beginEditing, null === (_k = editor.beginEditing) || void 0 === _k || _k.call(editor, this.table.getElement(), referencePosition, dataValue),
editor.bindSuccessCallback, null === (_l = editor.bindSuccessCallback) || void 0 === _l || _l.call(editor, (() => {
this.completeEdit();
})), null === (_m = editor.onStart) || void 0 === _m || _m.call(editor, {
value: dataValue,
endEdit: () => {
this.completeEdit();
},
referencePosition: referencePosition,
container: this.table.getElement(),
col: col,
row: row,
table: this.table
});
}
}
completeEdit(e) {
var _a, _b, _c;
if (!this.editingEditor) return !0;
if (this.isValidatingValue) return !1;
this.cacheLastSelectedCellEditor = {};
const target = null == e ? void 0 : e.target, {editingEditor: editor} = this;
if (target) if (editor.targetIsOnEditor) {
if (editor.targetIsOnEditor(target)) return !1;
} else if (!editor.isEditorElement || editor.isEditorElement(target)) return !1;
if (this.editingEditor.getValue, this.editingEditor.validateValue) {
this.isValidatingValue = !0;
const newValue = this.editingEditor.getValue(), customMergeText = null === (_a = this.table.getCustomMerge(this.editCell.col, this.editCell.row)) || void 0 === _a ? void 0 : _a.text, oldValue = isValid(customMergeText) ? customMergeText : this.table.getCellOriginValue(this.editCell.col, this.editCell.row), target = null == e ? void 0 : e.target, maybePromiseOrValue = null === (_c = (_b = this.editingEditor).validateValue) || void 0 === _c ? void 0 : _c.call(_b, newValue, oldValue, this.editCell, this.table, !!this.table.getElement().contains(target));
return isPromise(maybePromiseOrValue) ? (this.isValidatingValue = !0, new Promise(((resolve, reject) => {
maybePromiseOrValue.then((result => {
dealWithValidateValue(result, this, oldValue, resolve);
})).catch((err => {
this.isValidatingValue = !1, reject(err);
}));
}))) : dealWithValidateValue(maybePromiseOrValue, this, oldValue);
}
return this.doExit(), !0;
}
doExit() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const changedValue = null === (_b = (_a = this.editingEditor).getValue) || void 0 === _b ? void 0 : _b.call(_a), range = this.table.getCellRange(this.editCell.col, this.editCell.row);
if (null === (_d = (_c = this.editingEditor).beforeEnd) || void 0 === _d || _d.call(_c),
range.isCustom) this.table.changeCellValue(range.start.col, range.start.row, changedValue); else {
const changedValues = [];
for (let row = range.start.row; row <= range.end.row; row++) {
const rowChangedValues = [];
for (let col = range.start.col; col <= range.end.col; col++) rowChangedValues.push(changedValue);
changedValues.push(rowChangedValues);
}
this.table.changeCellValues(range.start.col, range.start.row, changedValues);
}
this.editingEditor.exit, null === (_f = (_e = this.editingEditor).exit) || void 0 === _f || _f.call(_e),
null === (_h = (_g = this.editingEditor).onEnd) || void 0 === _h || _h.call(_g),
this.editingEditor = null, this.isValidatingValue = !1, this.beginTriggerEditCellMode = null;
}
cancelEdit() {
var _a, _b, _c, _d;
this.editingEditor && (null === (_b = (_a = this.editingEditor).exit) || void 0 === _b || _b.call(_a),
null === (_d = (_c = this.editingEditor).onEnd) || void 0 === _d || _d.call(_c),
this.editingEditor = null), Object.values(this.cacheLastSelectedCellEditor).forEach((editor => {
var _a;
return null === (_a = null == editor ? void 0 : editor.onEnd) || void 0 === _a ? void 0 : _a.call(editor);
})), this.cacheLastSelectedCellEditor = {};
}
release() {
this.listenersId.forEach((id => {
this.table.off(id);
}));
}
}
function dealWithValidateValue(validateValue, editManager, oldValue, resolve) {
return editManager.isValidatingValue = !1, "validate-exit" === validateValue ? (editManager.doExit(),
null == resolve || resolve(!0), !0) : "invalidate-exit" === validateValue ? (editManager.editingEditor.setValue(oldValue),
editManager.doExit(), null == resolve || resolve(!0), !0) : "validate-not-exit" === validateValue || "invalidate-not-exit" === validateValue ? (null == resolve || resolve(!1),
!1) : !0 === validateValue ? (editManager.doExit(), null == resolve || resolve(!0),
!0) : (null == resolve || resolve(!1), !1);
}
//# sourceMappingURL=edit-manager.js.map