@visactor/vtable
Version:
canvas table width high performance
145 lines (135 loc) • 12.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.updateCornerRadius = exports.updateFrameBorderSize = exports.getStroke = exports.updateFrameBorder = exports.createFrameBorder = void 0;
const vrender_1 = require("./../../vrender"), vutils_1 = require("@visactor/vutils"), padding_1 = require("../utils/padding"), helper_1 = require("../../tools/helper");
function createFrameBorder(group, frameTheme, role, strokeArray, justForXYPosition) {
var _a, _b, _c, _d, _e, _f;
if (!frameTheme) return;
const isTableGroup = "table" === role, {shadowBlur: shadowBlur, shadowOffsetX: shadowOffsetX, shadowOffsetY: shadowOffsetY, shadowColor: shadowColor, cornerRadius: cornerRadius, borderColor: borderColor, borderLineWidth: borderLineWidth, borderLineDash: borderLineDash} = frameTheme;
let hasShadow = !1;
const groupAttributes = {}, rectAttributes = {
pickable: !1
};
shadowBlur && isTableGroup && (rectAttributes.shadowBlur = shadowBlur, rectAttributes.shadowOffsetX = shadowOffsetX,
rectAttributes.shadowOffsetY = shadowOffsetY, rectAttributes.shadowColor = shadowColor,
rectAttributes.stroke = !0, rectAttributes.stroke = shadowColor, rectAttributes.lineWidth = 1,
hasShadow = !0), borderLineWidth && (rectAttributes.stroke = !0, rectAttributes.fill = !1,
rectAttributes.stroke = getStroke(null != borderColor ? borderColor : "#E1E4E8", strokeArray, borderLineWidth),
rectAttributes.lineWidth = borderLineWidth, borderLineDash && (rectAttributes.lineDash = borderLineDash),
rectAttributes.lineCap = "butt"), Array.isArray(borderColor) && (rectAttributes.strokeArrayColor = (0,
padding_1.getQuadProps)(borderColor)), Array.isArray(borderLineWidth) && (rectAttributes.strokeArrayWidth = (0,
padding_1.getQuadProps)(borderLineWidth), rectAttributes.lineWidth = 1), cornerRadius && (rectAttributes.cornerRadius = cornerRadius,
groupAttributes.cornerRadius = cornerRadius);
const borderTop = rectAttributes.strokeArrayWidth ? rectAttributes.strokeArrayWidth[0] : null !== (_a = rectAttributes.lineWidth) && void 0 !== _a ? _a : 0, borderRight = rectAttributes.strokeArrayWidth ? rectAttributes.strokeArrayWidth[1] : null !== (_b = rectAttributes.lineWidth) && void 0 !== _b ? _b : 0, borderBottom = rectAttributes.strokeArrayWidth ? rectAttributes.strokeArrayWidth[2] : null !== (_c = rectAttributes.lineWidth) && void 0 !== _c ? _c : 0, borderLeft = rectAttributes.strokeArrayWidth ? rectAttributes.strokeArrayWidth[3] : null !== (_d = rectAttributes.lineWidth) && void 0 !== _d ? _d : 0;
if (group.setAttributes(groupAttributes), !justForXYPosition) if (rectAttributes.stroke) if (rectAttributes.x = borderLeft / 2,
rectAttributes.y = borderTop / 2, rectAttributes.pickable = !1, isTableGroup) {
if (cornerRadius) if (Array.isArray(cornerRadius)) {
const cornerRadiusArr = (0, padding_1.getQuadProps)(cornerRadius);
rectAttributes.cornerRadius = cornerRadiusArr, groupAttributes.cornerRadius = cornerRadiusArr,
cornerRadiusArr[0] && (cornerRadiusArr[0] = cornerRadiusArr[0] + Math.min(borderLeft, borderTop) / 2),
cornerRadiusArr[1] && (cornerRadiusArr[1] = cornerRadiusArr[1] + Math.min(borderTop, borderRight) / 2),
cornerRadiusArr[2] && (cornerRadiusArr[2] = cornerRadiusArr[2] + Math.min(borderRight, borderBottom) / 2),
cornerRadiusArr[3] && (cornerRadiusArr[3] = cornerRadiusArr[3] + Math.min(borderBottom, borderLeft) / 2);
} else if ((0, vutils_1.isArray)(borderLineWidth)) {
const cornerRadiusArr = [];
rectAttributes.cornerRadius = cornerRadiusArr, groupAttributes.cornerRadius = cornerRadiusArr,
cornerRadiusArr[0] = cornerRadius + Math.min(borderLeft, borderTop) / 2, cornerRadiusArr[1] = cornerRadius + Math.min(borderTop, borderRight) / 2,
cornerRadiusArr[2] = cornerRadius + Math.min(borderRight, borderBottom) / 2, cornerRadiusArr[3] = cornerRadius + Math.min(borderBottom, borderLeft) / 2;
} else rectAttributes.cornerRadius = cornerRadius + (null !== (_e = rectAttributes.lineWidth) && void 0 !== _e ? _e : 0) / 2,
groupAttributes.cornerRadius = cornerRadius + (null !== (_f = rectAttributes.lineWidth) && void 0 !== _f ? _f : 0) / 2;
let shadowRect, borderRect;
if (frameTheme.innerBorder ? (rectAttributes.x = group.attribute.x + borderLeft / 2,
rectAttributes.y = group.attribute.y + borderTop / 2, rectAttributes.width = group.attribute.width - borderLeft / 2 - borderRight / 2,
rectAttributes.height = group.attribute.height - borderTop / 2 - borderBottom / 2) : (rectAttributes.x = group.attribute.x - borderLeft / 2,
rectAttributes.y = group.attribute.y - borderTop / 2, rectAttributes.width = group.attribute.width + borderLeft / 2 + borderRight / 2,
rectAttributes.height = group.attribute.height + borderTop / 2 + borderBottom / 2),
hasShadow) {
rectAttributes.fill = "white", rectAttributes.notAdjustPos = !0, borderRect = (0,
vrender_1.createGroup)(rectAttributes), borderRect.name = "table-border-rect", shadowRect = (0,
vrender_1.createRect)({
x: borderLeft / 2,
y: borderTop / 2,
width: group.attribute.width,
height: group.attribute.height,
fill: "red",
cornerRadius: group.attribute.cornerRadius,
globalCompositeOperation: "destination-out"
}), borderRect.addChild(shadowRect);
const hackRect = (0, vrender_1.createRect)({
x: borderLeft / 2,
y: borderTop / 2,
width: group.attribute.width,
height: group.attribute.height,
fill: "transparent",
pickable: !1,
globalCompositeOperation: "source-over"
});
borderRect.addChild(hackRect);
} else borderRect = (0, vrender_1.createRect)(rectAttributes), borderRect.name = "table-border-rect";
frameTheme.innerBorder && !hasShadow ? group.parent.insertAfter(borderRect, group) : group.parent.insertBefore(borderRect, group),
group.border = borderRect;
} else {
rectAttributes.width = group.attribute.width - borderLeft / 2 - borderRight / 2,
rectAttributes.height = group.attribute.height - borderTop / 2 - borderBottom / 2;
const borderRect = (0, vrender_1.createRect)(rectAttributes);
borderRect.name = "border-rect", group.addChild(borderRect), group.border = borderRect;
} else {
const borderRect = (0, vrender_1.createRect)({
fill: !1,
stroke: !1,
pickable: !1,
lineWidth: 0
});
borderRect.name = "border-rect", group.addChild(borderRect), group.border = borderRect;
}
}
function updateFrameBorder(group, frameTheme, strokeArray) {
var _a;
if (!frameTheme) return;
const {borderColor: borderColor} = frameTheme;
null === (_a = group.border) || void 0 === _a || _a.setAttribute("stroke", getStroke(borderColor, strokeArray));
}
function getStroke(borderColor, strokeArray, strokeLineWidth) {
let stroke = !0;
return !strokeArray && !(0, vutils_1.isArray)(strokeLineWidth) || (0, vutils_1.isArray)(borderColor) ? strokeArray ? stroke = strokeArray : strokeArray || (0,
vutils_1.isArray)(borderColor) ? (0, vutils_1.isArray)(borderColor) && (stroke = !0) : stroke = borderColor : stroke = (null != strokeArray ? strokeArray : strokeLineWidth).map((stroke => !!stroke && borderColor)),
stroke;
}
function updateFrameBorderSize(group) {
var _a, _b, _c, _d;
if (!group.border) return;
const borderTop = group.border.attribute.strokeArrayWidth ? group.border.attribute.strokeArrayWidth[0] : null !== (_a = group.border.attribute.lineWidth) && void 0 !== _a ? _a : 0, borderRight = group.border.attribute.strokeArrayWidth ? group.border.attribute.strokeArrayWidth[1] : null !== (_b = group.border.attribute.lineWidth) && void 0 !== _b ? _b : 0, borderBottom = group.border.attribute.strokeArrayWidth ? group.border.attribute.strokeArrayWidth[2] : null !== (_c = group.border.attribute.lineWidth) && void 0 !== _c ? _c : 0, borderLeft = group.border.attribute.strokeArrayWidth ? group.border.attribute.strokeArrayWidth[3] : null !== (_d = group.border.attribute.lineWidth) && void 0 !== _d ? _d : 0;
group.border.setAttributes({
borderLeft: borderLeft,
borderTop: borderTop,
borderRight: borderRight,
borderBottom: borderBottom,
width: group.attribute.width - borderLeft / 2 - borderRight / 2,
height: group.attribute.height - borderTop / 2 - borderBottom / 2
}), "group" === group.border.type && group.border.firstChild.setAttributes({
width: group.attribute.width,
height: group.attribute.height
});
}
function updateCornerRadius(table) {
if (!table.theme.frameStyle.cornerRadius) return;
const cornerRadius = table.theme.frameStyle.cornerRadius, {cornerHeaderGroup: cornerHeaderGroup, colHeaderGroup: colHeaderGroup, rowHeaderGroup: rowHeaderGroup, bodyGroup: bodyGroup, rightTopCornerGroup: rightTopCornerGroup, leftBottomCornerGroup: leftBottomCornerGroup, rightBottomCornerGroup: rightBottomCornerGroup, rightFrozenGroup: rightFrozenGroup, bottomFrozenGroup: bottomFrozenGroup} = table.scenegraph;
cornerHeaderGroup.setAttribute("cornerRadius", 0), colHeaderGroup.setAttribute("cornerRadius", 0),
rowHeaderGroup.setAttribute("cornerRadius", 0), bodyGroup.setAttribute("cornerRadius", 0),
rightTopCornerGroup.setAttribute("cornerRadius", 0), leftBottomCornerGroup.setAttribute("cornerRadius", 0),
rightBottomCornerGroup.setAttribute("cornerRadius", 0), rightFrozenGroup.setAttribute("cornerRadius", 0),
bottomFrozenGroup.setAttribute("cornerRadius", 0);
const cornerRadiusArray = (0, helper_1.toBoxArray)(cornerRadius);
cornerHeaderGroup.attribute.width > 0 && cornerHeaderGroup.attribute.height > 0 ? setCornerRadius(cornerHeaderGroup, [ cornerRadiusArray[0], 0, 0, 0 ]) : colHeaderGroup.attribute.height > 0 ? setCornerRadius(colHeaderGroup, [ cornerRadiusArray[0], 0, 0, 0 ]) : rowHeaderGroup.attribute.width > 0 ? setCornerRadius(rowHeaderGroup, [ cornerRadiusArray[0], 0, 0, 0 ]) : setCornerRadius(bodyGroup, [ cornerRadiusArray[0], 0, 0, 0 ]),
leftBottomCornerGroup.attribute.width > 0 && leftBottomCornerGroup.attribute.height > 0 ? setCornerRadius(leftBottomCornerGroup, [ 0, 0, 0, cornerRadiusArray[3] ]) : bottomFrozenGroup.attribute.height > 0 ? setCornerRadius(bottomFrozenGroup, [ 0, 0, 0, cornerRadiusArray[3] ]) : rowHeaderGroup.attribute.width > 0 ? setCornerRadius(rowHeaderGroup, [ 0, 0, 0, cornerRadiusArray[3] ]) : setCornerRadius(bodyGroup, [ 0, 0, 0, cornerRadiusArray[3] ]),
rightTopCornerGroup.attribute.width > 0 && rightTopCornerGroup.attribute.height > 0 ? setCornerRadius(rightTopCornerGroup, [ 0, cornerRadiusArray[1], 0, 0 ]) : colHeaderGroup.attribute.height > 0 ? setCornerRadius(colHeaderGroup, [ 0, cornerRadiusArray[1], 0, 0 ]) : rightFrozenGroup.attribute.width > 0 ? setCornerRadius(rightFrozenGroup, [ 0, cornerRadiusArray[1], 0, 0 ]) : setCornerRadius(bodyGroup, [ 0, cornerRadiusArray[1], 0, 0 ]),
rightBottomCornerGroup.attribute.width > 0 && rightBottomCornerGroup.attribute.height > 0 ? setCornerRadius(rightBottomCornerGroup, [ 0, 0, cornerRadiusArray[2], 0 ]) : rightFrozenGroup.attribute.width > 0 ? setCornerRadius(rightFrozenGroup, [ 0, 0, cornerRadiusArray[2], 0 ]) : bottomFrozenGroup.attribute.height > 0 ? setCornerRadius(bottomFrozenGroup, [ 0, 0, cornerRadiusArray[2], 0 ]) : setCornerRadius(bodyGroup, [ 0, 0, cornerRadiusArray[2], 0 ]);
}
function setCornerRadius(group, cornerRadius) {
group.setAttribute("cornerRadius", cornerRadius), group.border && group.border.setAttribute("cornerRadius", cornerRadius);
}
exports.createFrameBorder = createFrameBorder, exports.updateFrameBorder = updateFrameBorder,
exports.getStroke = getStroke, exports.updateFrameBorderSize = updateFrameBorderSize,
exports.updateCornerRadius = updateCornerRadius;
//# sourceMappingURL=frame-border.js.map