47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
import { HTMLappendIt, Positionable, svgNamespace } from "../types";
|
||
|
|
|
||
|
|
export class SVGArrow implements HTMLappendIt {
|
||
|
|
group;
|
||
|
|
lineText;
|
||
|
|
line;
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|