46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
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);
|
|
}
|
|
|
|
}
|