Class ESLink

explainshell/web/static/js/es.js:201–255

// this class represents a link (visualized by a line) between a span (option)
// in .command that needs to be connected to a corresponding <pre> in .help
class ESLink {
    constructor(clazz, option, mid, color) {
        this.option = option; // a span from .command
        this.color = color; // the color chosen for this link
        this.paths = []; // a list of d3 paths to draw for this link
        this.lines = []; // a list of d3 lines to draw for this link
        this.circle = null; // circle data to draw, if any (used by unknowns)
        this.text = null; // the text to draw in the circle (always '?')
        this.group = null; // the group this link is a part of

        // unknown links have no corresponding <pre> in .help, they simply show up
        // with a '?' connected to them
        this.unknown = false;

        // unknown links can go either down or up
        this.directiondown = true;

        // clazz is the name of the current group (shell, command0, command1..)
        if (clazz) {
            // the matching <pre> in .help
            this.help = document.getElementById(clazz);

            // each link can go either left or right, we decide where by
            // calculating its middle and comparing it to the middle of .command
            const rr = option.getBoundingClientRect();
            const rrmid = rr.left + rr.width / 2;
            this.goingleft = rrmid <= mid;

            this.help.style.borderColor = this.color;
        }
    }

    leftmost() {
        return this.group.links.find((l) => l.goingleft) ?? null;
    }

    rightmost() {
        return this.group.links.findLast((l) => !l.goingleft) ?? null;
    }

    // return true if this eslink is 'close' to other by looking at their bounding
    // rects
    //
    // we use this when deciding which direction an 'unknown' link should go
    nearby(other) {
        const closeness = 5,
            r = this.option.getBoundingClientRect(),
            rr = other.option.getBoundingClientRect();

        return (
            Math.abs(r.right - rr.left) <= closeness ||
            Math.abs(r.left - rr.right) <= closeness
        );
    }
}

// a convenient wrapper around an array of points that allows to chain appends
class ESPath {