@visactor/vtable
Version:
canvas table width high performance
116 lines (110 loc) • 6.79 kB
JavaScript
import { cloneDeep, get, merge } from "@visactor/vutils";
import { DiscreteLegend, LegendEvent } from "./../../../vrender";
import { getLegendAttributes } from "./get-discrete-legend-attributes";
import { TABLE_EVENT_TYPE } from "../../../core/TABLE_EVENT_TYPE";
import { getQuadProps } from "../../../scenegraph/utils/padding";
export class DiscreteTableLegend {
constructor(option, table) {
var _a, _b, _c, _d;
this.table = table, this.option = cloneDeep(option), this.orient = null !== (_a = option.orient) && void 0 !== _a ? _a : "left",
this.visible = null === (_b = option.visible) || void 0 === _b || _b, this.position = null !== (_c = option.position) && void 0 !== _c ? _c : "middle",
this.selectedData = null !== (_d = option.defaultSelected) && void 0 !== _d ? _d : null,
this.createComponent(), this.initEvent();
}
createComponent() {
const attrs = this.getLegendAttributes({
width: this.table.tableNoFrameWidth,
height: this.table.tableNoFrameHeight
}), legend = new DiscreteLegend(merge({}, attrs, {
defaultSelected: this.selectedData,
disableTriggerEvent: this.table.options.disableInteraction
}));
legend.name = "legend", this.legendComponent = legend, !1 === this.visible && (legend.setAttributes({
visible: !1,
visibleAll: !1
}), legend.hideAll()), this.table.scenegraph.stage.defaultLayer.appendChild(legend),
this.adjustTableSize(attrs);
}
resize() {
if (!this.legendComponent || !1 === this.visible) return;
const attrs = this.getLegendAttributes({
width: this.table.tableNoFrameWidth,
height: this.table.tableNoFrameHeight
});
this.legendComponent.setAttributes(attrs), this.adjustTableSize(this.legendComponent.attribute);
}
adjustTableSize(attrs) {
var _a, _b;
if (!this.legendComponent || !1 === this.visible) return;
let width = isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0, height = isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0;
if (width <= 0 || height <= 0) return;
const rectWidth = this.table.tableNoFrameWidth, rectHeight = this.table.tableNoFrameHeight, padding = getQuadProps(null !== (_b = null !== (_a = attrs.padding) && void 0 !== _a ? _a : this.option.padding) && void 0 !== _b ? _b : 10);
let x = 0, y = 0;
"left" === this.orient ? (x = padding[3] + this.table.tableX - this.table._tableBorderWidth_left,
y = 0 + this.table.tableY - this.table._tableBorderWidth_top, width += padding[1] + padding[3]) : "top" === this.orient ? (x = 0 + this.table.tableX - this.table._tableBorderWidth_left,
y = padding[0] + this.table.tableY - this.table._tableBorderWidth_top, height += padding[0] + padding[2]) : "right" === this.orient ? (x = rectWidth - width - padding[1],
y = 0 + this.table.tableY - this.table._tableBorderWidth_top, width += padding[1] + padding[3]) : "bottom" === this.orient && (x = 0 + this.table.tableX - this.table._tableBorderWidth_left,
y = rectHeight - height - padding[2], height += padding[0] + padding[2]);
const layout = "bottom" === this.orient || "top" === this.orient ? "horizontal" : "vertical", position = this.position;
let offsetX = 0, offsetY = 0;
"horizontal" === layout ? offsetX = "middle" === position ? (rectWidth - width) / 2 : "end" === position ? rectWidth - width - padding[1] : padding[3] : offsetY = "middle" === position ? (rectHeight - height) / 2 : "end" === position ? rectHeight - height - padding[2] : padding[0],
this.legendComponent.setAttributes({
dx: offsetX,
dy: offsetY,
x: x,
y: y
}), "left" === this.orient ? (this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width),
this.table.tableX += Math.ceil(width)) : "top" === this.orient ? (this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height),
this.table.tableY += Math.ceil(height)) : "right" === this.orient ? this.table.tableNoFrameWidth = this.table.tableNoFrameWidth - Math.ceil(width) : "bottom" === this.orient && (this.table.tableNoFrameHeight = this.table.tableNoFrameHeight - Math.ceil(height));
}
getLegendAttributes(rect) {
var _a, _b;
const layout = "bottom" === this.orient || "top" === this.orient ? "horizontal" : "vertical", legendAttrs = getLegendAttributes(this.option, rect), padding = getQuadProps(null !== (_b = null !== (_a = legendAttrs.padding) && void 0 !== _a ? _a : this.option.padding) && void 0 !== _b ? _b : 10);
return Object.assign({
layout: layout,
items: this.getLegendItems(),
maxWidth: rect.width - padding[1] - padding[3],
maxHeight: rect.height - padding[0] - padding[2]
}, legendAttrs);
}
getLegendItems() {
return this.option.data;
}
initEvent() {
this.legendComponent && (this.legendComponent.addEventListener(LegendEvent.legendItemClick, (e => {
const selectedData = get(e, "detail.currentSelected");
this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_CLICK, {
model: this,
value: selectedData,
event: e
});
})), this.legendComponent.addEventListener(LegendEvent.legendItemHover, (e => {
const detail = get(e, "detail");
this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_HOVER, {
model: this,
value: detail,
event: e
});
})), this.legendComponent.addEventListener(LegendEvent.legendItemUnHover, (e => {
const detail = get(e, "detail");
this.table.fireListeners(TABLE_EVENT_TYPE.LEGEND_ITEM_UNHOVER, {
model: this,
value: detail,
event: e
});
})), this.legendComponent.addEventListener("legendItemAttributeUpdate", (e => {
this.table.scenegraph.updateNextFrame();
})));
}
getLegendBounds() {
return {
width: isFinite(this.legendComponent.AABBBounds.width()) ? this.legendComponent.AABBBounds.width() : 0,
height: isFinite(this.legendComponent.AABBBounds.height()) ? this.legendComponent.AABBBounds.height() : 0
};
}
release() {
this.legendComponent && this.table.scenegraph.stage.defaultLayer.removeChild(this.legendComponent),
this.legendComponent = null;
}
}
//# sourceMappingURL=discrete-legend.js.map