@visactor/vtable/es/scenegraph/style/frame-border.js

canvas table width high performance

import { createGroup, createRect } from "./../../vrender";

import { isArray } from "@visactor/vutils";

import { getQuadProps } from "../utils/padding";

import { toBoxArray } from "../../tools/helper";

export 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 = getQuadProps(borderColor)), 
    Array.isArray(borderLineWidth) && (rectAttributes.strokeArrayWidth = 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 = 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 (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 = createGroup(rectAttributes), 
            borderRect.name = "table-border-rect", shadowRect = 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 = 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 = 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 = createRect(rectAttributes);
        borderRect.name = "border-rect", group.addChild(borderRect), group.border = borderRect;
    } else {
        const borderRect = createRect({
            fill: !1,
            stroke: !1,
            pickable: !1,
            lineWidth: 0
        });
        borderRect.name = "border-rect", group.addChild(borderRect), group.border = borderRect;
    }
}

export 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));
}

export function getStroke(borderColor, strokeArray, strokeLineWidth) {
    let stroke = !0;
    return !strokeArray && !isArray(strokeLineWidth) || isArray(borderColor) ? strokeArray ? stroke = strokeArray : strokeArray || isArray(borderColor) ? isArray(borderColor) && (stroke = !0) : stroke = borderColor : stroke = (null != strokeArray ? strokeArray : strokeLineWidth).map((stroke => !!stroke && borderColor)), 
    stroke;
}

export 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
    });
}

export 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 = 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);
}
//# sourceMappingURL=frame-border.js.map