2023-06-22 17:47:04 +02:00
|
|
|
export class Tragable {
|
|
|
|
static getRootSVG(elem: SVGElement): SVGSVGElement {
|
|
|
|
while (!(elem instanceof SVGSVGElement)) {
|
|
|
|
if (!(elem instanceof SVGElement)) throw new Error("Not in an SVG");
|
|
|
|
elem = elem.parentElement as any;
|
|
|
|
}
|
|
|
|
return elem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#moveCB: (event: MouseEvent) => any = () => { };
|
|
|
|
#clickCB: (event: MouseEvent) => any = () => { };
|
|
|
|
initTrag(element: SVGElement) {
|
|
|
|
let svg = Tragable.getRootSVG(element);
|
|
|
|
let selected = false;
|
|
|
|
element.addEventListener('mousedown', () => {
|
|
|
|
selected = true;
|
|
|
|
});
|
|
|
|
svg.addEventListener('mousemove', event => {
|
|
|
|
if (selected) this.#moveCB(event);
|
|
|
|
});
|
|
|
|
svg.addEventListener('mouseup', () => {
|
|
|
|
selected = false;
|
|
|
|
});
|
|
|
|
svg.addEventListener('mouseleave', event => {
|
|
|
|
selected = false;
|
|
|
|
});
|
2023-06-27 09:19:06 +02:00
|
|
|
element.addEventListener('click', event => {
|
2023-06-22 17:47:04 +02:00
|
|
|
if (!selected) this.#clickCB(event);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-06-22 17:50:11 +02:00
|
|
|
onMove(cb: (event: MouseEvent) => any) {
|
2023-06-22 17:47:04 +02:00
|
|
|
this.#moveCB = cb;
|
|
|
|
}
|
2023-06-22 17:50:11 +02:00
|
|
|
onClick(cb: (event: MouseEvent) => any) {
|
2023-06-22 17:47:04 +02:00
|
|
|
this.#clickCB = cb;
|
|
|
|
}
|
|
|
|
}
|