@visactor/vtable
Version:
canvas table width high performance
129 lines (123 loc) • 13.2 kB
JavaScript
import { isArray, isFunction, isString, merge } from "@visactor/vutils";
import { DEFAULT_TEXT_FONT_FAMILY, DEFAULT_TEXT_FONT_SIZE, commonAxis } from "./get-axis-attributes";
export function computeAxisComponentWidth(config, table) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
const attribute = merge({}, commonAxis, config);
let tickWidth = 0;
!1 !== attribute.tick.visible && (tickWidth = null !== (_a = attribute.tick.width) && void 0 !== _a ? _a : 4);
let labelWidth = 0;
if (attribute.label.visible) {
if ("band" === attribute.type) {
attribute.domain.forEach((text => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
attribute.label.formatMethod && (text = attribute.label.formatMethod(text));
const {width: width, height: height} = table.measureText(text, {
fontSize: null !== (_c = null === (_b = null === (_a = attribute.label) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_f = null === (_e = null === (_d = attribute.label) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.fontWeight) && void 0 !== _f ? _f : "normal",
fontFamily: null !== (_j = null === (_h = null === (_g = attribute.label) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.fontFamily) && void 0 !== _j ? _j : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_l = null === (_k = attribute.label) || void 0 === _k ? void 0 : _k.style) || void 0 === _l ? void 0 : _l.maxLineWidth) || 1 / 0, angel = (null !== (_p = null === (_o = null === (_m = attribute.label) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.angle) && void 0 !== _p ? _p : 0) + ("vertical" === (null === (_r = null === (_q = attribute.label) || void 0 === _q ? void 0 : _q.style) || void 0 === _r ? void 0 : _r.direction) ? 90 : 0);
labelWidth = Math.max(labelWidth, getSizeAfterResize(Math.min(width, widthLimit), height, angel).width);
}));
} else {
let ticks;
if ((null === (_b = config.sync) || void 0 === _b ? void 0 : _b.tickAlign) && isFunction(null === (_c = config.tick) || void 0 === _c ? void 0 : _c.tickMode)) ticks = config.tick.tickMode(); else if (isArray(config.__ticksForVTable)) ticks = config.__ticksForVTable; else {
const range = attribute.range, minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min, maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
ticks = [ formatDecimal(minNumber), formatDecimal(maxNumber) ];
}
ticks.forEach((text => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
attribute.label.formatMethod && (text = attribute.label.formatMethod(text));
const {width: width, height: height} = table.measureText(text, {
fontSize: null !== (_c = null === (_b = null === (_a = attribute.label) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_f = null === (_e = null === (_d = attribute.label) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.fontWeight) && void 0 !== _f ? _f : "normal",
fontFamily: null !== (_j = null === (_h = null === (_g = attribute.label) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.fontFamily) && void 0 !== _j ? _j : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_l = null === (_k = attribute.label) || void 0 === _k ? void 0 : _k.style) || void 0 === _l ? void 0 : _l.maxLineWidth) || 1 / 0, angle = (null !== (_p = null === (_o = null === (_m = attribute.label) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.angle) && void 0 !== _p ? _p : 0) + ("vertical" === (null === (_r = null === (_q = attribute.label) || void 0 === _q ? void 0 : _q.style) || void 0 === _r ? void 0 : _r.direction) ? 90 : 0);
labelWidth = Math.max(labelWidth, getSizeAfterResize(Math.min(width, widthLimit), height, angle).width);
}));
}
labelWidth += null !== (_d = attribute.label.space) && void 0 !== _d ? _d : 4;
}
let titleWidth = 0;
if (attribute.title.visible && isString(attribute.title.text)) {
const {width: width, height: height} = table.measureText(attribute.title.text, {
fontSize: null !== (_g = null === (_f = null === (_e = attribute.title) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.fontSize) && void 0 !== _g ? _g : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_k = null === (_j = null === (_h = attribute.title) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.fontWeight) && void 0 !== _k ? _k : "normal",
fontFamily: null !== (_o = null === (_m = null === (_l = attribute.title) || void 0 === _l ? void 0 : _l.style) || void 0 === _m ? void 0 : _m.fontFamily) && void 0 !== _o ? _o : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_q = null === (_p = attribute.label) || void 0 === _p ? void 0 : _p.style) || void 0 === _q ? void 0 : _q.maxLineWidth) || 1 / 0, size = getSizeAfterResize(Math.min(width, widthLimit), height, null === (_s = null === (_r = attribute.title) || void 0 === _r ? void 0 : _r.style) || void 0 === _s ? void 0 : _s.angle);
titleWidth = "left" !== config.orient && "right" !== config.orient || !attribute.title.autoRotate ? size.width : size.height,
titleWidth += null !== (_t = attribute.title.space) && void 0 !== _t ? _t : 4;
}
return Math.ceil(tickWidth + labelWidth + titleWidth + 1);
}
export function computeAxisComponentHeight(config, table) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
const attribute = merge({}, commonAxis, config);
let tickHeight = 0;
!1 !== attribute.tick.visible && (tickHeight = null !== (_a = attribute.tick.width) && void 0 !== _a ? _a : 4);
let labelHeight = 0;
if (attribute.label.visible) {
if ("band" === attribute.type) {
attribute.domain.forEach((text => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
attribute.label.formatMethod && (text = attribute.label.formatMethod(text));
const {width: width, height: height} = table.measureText(text, {
fontSize: null !== (_c = null === (_b = null === (_a = attribute.label) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_f = null === (_e = null === (_d = attribute.label) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.fontWeight) && void 0 !== _f ? _f : "normal",
fontFamily: null !== (_j = null === (_h = null === (_g = attribute.label) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.fontFamily) && void 0 !== _j ? _j : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_l = null === (_k = attribute.label) || void 0 === _k ? void 0 : _k.style) || void 0 === _l ? void 0 : _l.maxLineWidth) || 1 / 0, angle = (null !== (_p = null === (_o = null === (_m = attribute.label) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.angle) && void 0 !== _p ? _p : 0) + ("vertical" === (null === (_r = null === (_q = attribute.label) || void 0 === _q ? void 0 : _q.style) || void 0 === _r ? void 0 : _r.direction) ? 90 : 0);
labelHeight = Math.max(labelHeight, getSizeAfterResize(Math.min(width, widthLimit), height, angle).height);
}));
} else {
let ticks;
if ((null === (_b = config.sync) || void 0 === _b ? void 0 : _b.tickAlign) && isFunction(null === (_c = config.tick) || void 0 === _c ? void 0 : _c.tickMode)) ticks = config.tick.tickMode(); else if (isArray(config.__ticksForVTable)) ticks = config.__ticksForVTable; else {
const range = attribute.range, minNumber = Math.abs(range.min) > 1 ? Math.round(range.min) : range.min, maxNumber = Math.abs(range.max) > 1 ? Math.round(range.max) : range.max;
ticks = [ formatDecimal(minNumber), formatDecimal(maxNumber) ];
}
ticks.forEach((text => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
attribute.label.formatMethod && (text = attribute.label.formatMethod(text));
const {width: width, height: height} = table.measureText(text, {
fontSize: null !== (_c = null === (_b = null === (_a = attribute.label) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_f = null === (_e = null === (_d = attribute.label) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.fontWeight) && void 0 !== _f ? _f : "normal",
fontFamily: null !== (_j = null === (_h = null === (_g = attribute.label) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.fontFamily) && void 0 !== _j ? _j : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_l = null === (_k = attribute.label) || void 0 === _k ? void 0 : _k.style) || void 0 === _l ? void 0 : _l.maxLineWidth) || 1 / 0, angle = (null !== (_p = null === (_o = null === (_m = attribute.label) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.angle) && void 0 !== _p ? _p : 0) + ("vertical" === (null === (_r = null === (_q = attribute.label) || void 0 === _q ? void 0 : _q.style) || void 0 === _r ? void 0 : _r.direction) ? 90 : 0);
labelHeight = Math.max(labelHeight, getSizeAfterResize(Math.min(width, widthLimit), height, angle).height);
}));
}
labelHeight += null !== (_d = attribute.label.space) && void 0 !== _d ? _d : 4;
}
let titleHeight = 0;
if (attribute.title.visible && attribute.title.text) {
const {width: width, height: height} = table.measureText(attribute.title.text, {
fontSize: null !== (_g = null === (_f = null === (_e = attribute.title) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.fontSize) && void 0 !== _g ? _g : DEFAULT_TEXT_FONT_SIZE,
fontWeight: null !== (_k = null === (_j = null === (_h = attribute.title) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.fontWeight) && void 0 !== _k ? _k : "normal",
fontFamily: null !== (_o = null === (_m = null === (_l = attribute.title) || void 0 === _l ? void 0 : _l.style) || void 0 === _m ? void 0 : _m.fontFamily) && void 0 !== _o ? _o : DEFAULT_TEXT_FONT_FAMILY
}), widthLimit = (null === (_q = null === (_p = attribute.label) || void 0 === _p ? void 0 : _p.style) || void 0 === _q ? void 0 : _q.maxLineWidth) || 1 / 0, size = getSizeAfterResize(Math.min(width, widthLimit), height, null === (_s = null === (_r = attribute.title) || void 0 === _r ? void 0 : _r.style) || void 0 === _s ? void 0 : _s.angle);
titleHeight = "bottom" !== config.orient && "top" !== config.orient || !attribute.title.autoRotate ? size.height : size.width,
titleHeight += null !== (_t = attribute.title.space) && void 0 !== _t ? _t : 4;
}
return tickHeight + labelHeight + titleHeight + 1;
}
function formatDecimal(number) {
return "number" != typeof number && (number = Number(number)), Number(number.toPrecision(1)).toString();
}
function getSizeAfterResize(width, height, angle = 0) {
const theta = angle * Math.PI / 180, p1_x = -width / 2, p1_y = -height / 2, p2_x = width / 2, p2_y = -height / 2, p3_x = width / 2, p3_y = height / 2, p4_x = -width / 2, p4_y = height / 2, p1Rotated = {
x: p1_x * Math.cos(theta) - p1_y * Math.sin(theta),
y: p1_x * Math.sin(theta) + p1_y * Math.cos(theta)
}, p2Rotated = {
x: p2_x * Math.cos(theta) - p2_y * Math.sin(theta),
y: p2_x * Math.sin(theta) + p2_y * Math.cos(theta)
}, p3Rotated = {
x: p3_x * Math.cos(theta) - p3_y * Math.sin(theta),
y: p3_x * Math.sin(theta) + p3_y * Math.cos(theta)
}, p4Rotated = {
x: p4_x * Math.cos(theta) - p4_y * Math.sin(theta),
y: p4_x * Math.sin(theta) + p4_y * Math.cos(theta)
}, bounds_minX = Math.min(p1Rotated.x, p2Rotated.x, p3Rotated.x, p4Rotated.x), bounds_maxX = Math.max(p1Rotated.x, p2Rotated.x, p3Rotated.x, p4Rotated.x), bounds_minY = Math.min(p1Rotated.y, p2Rotated.y, p3Rotated.y, p4Rotated.y);
return {
width: bounds_maxX - bounds_minX,
height: Math.max(p1Rotated.y, p2Rotated.y, p3Rotated.y, p4Rotated.y) - bounds_minY
};
}
//# sourceMappingURL=get-axis-component-size.js.map