PNet/js/graphics/SVGArrow.ts

import { HTMLappendIt, Positionable, svgNamespace } from "../types";

export class SVGArrow implements HTMLappendIt {
    group: SVGElement;
    lineText: SVGElement;
    line: SVGElement;
    from: Positionable;
    to: Positionable;
    constructor(from: Positionable, to: Positionable) {
        this.from = from;
        this.to = to;
        this.group = document.createElementNS(svgNamespace, 'g');
        this.group.classList.add("PEdge");

        this.line = document.createElementNS(svgNamespace, 'line');
        this.line.setAttribute('marker-end', "url(#arrowhead)");
        this.group.setAttribute('transform', `translate(0, 0)`);

        // Create the text inside the circle
        this.lineText = document.createElementNS(svgNamespace, 'text');
        this.lineText.classList.add("lineText");
        this.lineText.setAttribute('x', '0');
        this.lineText.setAttribute('y', '0');
        this.lineText.textContent = "";

        this.group.appendChild(this.line);
        this.group.appendChild(this.lineText);

        this.updatePosition();
    }
    updatePosition() {
        let dx = this.to.x - this.from.x;
        let dy = this.to.y - this.from.y;
        let l = Math.sqrt(dx * dx + dy * dy);
        dx /= l;
        dy /= l;
        this.line.setAttribute('x1', (this.from.x + dx * 30) + "");
        this.line.setAttribute('y1', (this.from.y + dy * 30) + "");
        this.line.setAttribute('x2', (this.to.x - dx * 40) + "");
        this.line.setAttribute('y2', (this.to.y - dy * 40) + "");
    }
    appendIt(svg) {
        svg.appendChild(this.group);
    }

}