@eccenca/gui-elements/dist/cjs/extensions/react-flow/edges/utils.js

GUI elements based on other libraries, usable in React application, written in Typescript.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawEdgeStep = exports.getStraightPath = exports.drawEdgeStraight = void 0;
const react_flow_renderer_1 = require("react-flow-renderer");
const getSmoothStepPath_1 = require("./getSmoothStepPath");
const posCorrectionEdge = ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, correctionLength = 7, correctionRadius = 7, }) => {
    let newSourceX = sourceX;
    let newSourceY = sourceY;
    let newTargetX = targetX;
    let newTargetY = targetY;
    let startCommandCorrection = `M ${sourceX},${sourceY} `;
    let endCommandCorrection = ``;
    if (sourcePosition === react_flow_renderer_1.Position.Left && sourceX < targetX) {
        newSourceX = newSourceX - 2 * correctionLength;
        if (sourceY < targetY) {
            newSourceY = sourceY + correctionRadius;
            startCommandCorrection =
                startCommandCorrection +
                    ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
        }
        else {
            newSourceY = sourceY - correctionRadius;
            startCommandCorrection =
                startCommandCorrection +
                    ` L ${newSourceX + correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
        }
    }
    if (sourcePosition === react_flow_renderer_1.Position.Right && sourceX > targetX) {
        newSourceX =
            targetPosition === react_flow_renderer_1.Position.Right
                ? newSourceX + correctionLength + correctionRadius
                : newSourceX + correctionLength;
        if (sourceY < targetY) {
            newSourceY = sourceY + correctionRadius;
            startCommandCorrection =
                startCommandCorrection +
                    ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} `;
        }
        else {
            newSourceY = sourceY - correctionRadius;
            startCommandCorrection =
                startCommandCorrection +
                    ` L ${newSourceX - correctionRadius},${sourceY} A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} `;
        }
    }
    if (targetPosition === react_flow_renderer_1.Position.Left && sourceX > targetX) {
        newTargetX = newTargetX - 3 * correctionLength;
        if (sourceY < targetY) {
            newTargetY = targetY - correctionRadius;
            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
        }
        else {
            newTargetY = targetY + correctionRadius;
            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX + correctionRadius},${targetY} L ${targetX},${targetY}`;
        }
    }
    if (targetPosition === react_flow_renderer_1.Position.Right && sourceX < targetX) {
        newTargetX = newTargetX + 3 * correctionLength;
        if (sourceY < targetY) {
            newTargetY = targetY - correctionRadius;
            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${1} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
        }
        else {
            newTargetY = targetY + correctionRadius;
            endCommandCorrection = ` A ${correctionRadius} ${correctionRadius} ${90} ${0} ${0} ${newTargetX - correctionRadius},${targetY} L ${targetX},${targetY}`;
        }
    }
    return {
        newSourceX,
        newSourceY,
        newTargetX,
        newTargetY,
        startCommandCorrection,
        endCommandCorrection,
    };
};
const pathCommandCorrection = ({ pathCommand, startCorrection, endCorrection }) => {
    return startCorrection + pathCommand.substring(1) + endCorrection;
};
const drawEdgeStraight = ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }) => {
    const corrections = posCorrectionEdge({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        correctionRadius: 0,
    });
    const pathCommand = `M ${corrections.newSourceX},${corrections.newSourceY}L ${corrections.newTargetX},${corrections.newTargetY}`;
    return pathCommandCorrection({
        pathCommand,
        startCorrection: corrections.startCommandCorrection,
        endCorrection: corrections.endCommandCorrection,
    });
};
exports.drawEdgeStraight = drawEdgeStraight;
const getStraightPath = (params) => {
    const path = (0, exports.drawEdgeStraight)(params);
    const [labelX, labelY, offsetX, offsetY] = (0, react_flow_renderer_1.getEdgeCenter)({
        sourceX: params.sourceX,
        sourceY: params.sourceY,
        targetX: params.targetX,
        targetY: params.targetY,
    });
    return [path, labelX, labelY, offsetX, offsetY];
};
exports.getStraightPath = getStraightPath;
const drawEdgeStep = ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data = {}, }) => {
    const corrections = posCorrectionEdge({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        correctionLength: data.stepCornerRadius || 7,
        correctionRadius: data.stepCornerRadius || 7,
    });
    const pathCommand = (0, getSmoothStepPath_1.getSmoothStepPath)({
        sourceX: corrections.newSourceX,
        sourceY: corrections.newSourceY,
        sourcePosition,
        targetX: corrections.newTargetX,
        targetY: corrections.newTargetY,
        targetPosition,
        borderRadius: data.stepCornerRadius || 7,
    });
    return pathCommandCorrection({
        pathCommand,
        startCorrection: corrections.startCommandCorrection,
        endCorrection: corrections.endCommandCorrection,
    });
};
exports.drawEdgeStep = drawEdgeStep;
//# sourceMappingURL=utils.js.map