UNPKG

@visactor/vtable

Version:

canvas table width high performance

145 lines (135 loc) 12.3 kB
"use strict"; 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