draw path

gistfile1.txt

buildTopSvgPath(start, end, skipAmount = 0) {
        const startX = start.x + start.width / 2,
            startY = start.y + start.height,
            endX = (startX + end.x + end.width / 2) / 2, // half way between real start and end
            endY = start.enHeight + skipAmount + ENCLOSURE_Y_GAP / 2,
            width = Math.abs(endX - startX),
            height = Math.abs(endY - startY),
            svgWidth = width + STROKE_WIDTH * 2,
            svgHeight = height + STROKE_WIDTH * 2,
            left = Math.min(startX, endX) - STROKE_WIDTH,
            top = startY - STROKE_WIDTH,
            pathStartX = startX - left,
            pathStartY = STROKE_WIDTH,
            rightToLeft = endX < startX,
            curveSize = Math.min(10, width),
            curveSpec = `${curveSize}, ${curveSize}`,
            curve = `a ${curveSpec} 0 0 ${rightToLeft ? 1 : 0} ${rightToLeft ? '-' : ''}${curveSpec}`,
            horizontalChange = (rightToLeft ? -1 : 1) * (width - curveSize),
            path = nodeFromHTML(`
                <div class="l" style="left: ${left}px; top: ${top}px;">
                    <svg width="${svgWidth}" height="${svgHeight}" viewBox="0 0 ${svgWidth} ${svgHeight}"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M ${pathStartX} ${pathStartY} v${height - curveSize} ${curve} h${horizontalChange}"/>
                    </svg>
                </div>
            `);

        return path;
    }