jusax23/PNet
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

touch support

Browse source
This commit is contained in:
jusax23 2023-06-28 18:02:41 +02:00
parent 56bd2bec6d
commit 53e7c26678
Signed by: jusax23
GPG key ID: 499E2AA870C1CD41
2 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/graphics/SVGArrow.ts
View file

@ -37,8 +37,8 @@ export class SVGArrow implements HTMLappendIt {
this.line.setAttribute('y1', (this.from.y + dy * 30) + ""); this.line.setAttribute('y1', (this.from.y + dy * 30) + "");
this.line.setAttribute('x2', (this.to.x - dx * 40) + ""); this.line.setAttribute('x2', (this.to.x - dx * 40) + "");
this.line.setAttribute('y2', (this.to.y - dy * 40) + ""); this.line.setAttribute('y2', (this.to.y - dy * 40) + "");
this.lineText.setAttribute('x', this.from.x + dx / 2 + ""); this.lineText.setAttribute('x', (this.from.x + this.to.x) / 2 + "");
this.lineText.setAttribute('y', this.from.y + dy / 2 + ""); this.lineText.setAttribute('y', (this.from.y + this.to.y) / 2 + "");
} }
appendIt(svg) { appendIt(svg) {
svg.appendChild(this.group); svg.appendChild(this.group);

32
js/graphics/tragable.ts
View file

@ -1,3 +1,8 @@
export class InteractionEvent {
x: number;
y: number;
}
export class Tragable { export class Tragable {
static getRootSVG(elem: SVGElement): SVGSVGElement { static getRootSVG(elem: SVGElement): SVGSVGElement {
while (!(elem instanceof SVGSVGElement)) { while (!(elem instanceof SVGSVGElement)) {
@ -7,8 +12,8 @@ export class Tragable {
return elem; return elem;
} }
#moveCB: (event: MouseEvent) => any = () => { }; #moveCB: (event: InteractionEvent) => any = () => { };
#clickCB: (event: MouseEvent) => any = () => { }; #clickCB: (event: InteractionEvent) => any = () => { };
initTrag(element: SVGElement) { initTrag(element: SVGElement) {
let svg = Tragable.getRootSVG(element); let svg = Tragable.getRootSVG(element);
let selected = false; let selected = false;
@ -32,12 +37,31 @@ export class Tragable {
element.addEventListener('click', event => { element.addEventListener('click', event => {
if (!selected && !moved) this.#clickCB(event); if (!selected && !moved) this.#clickCB(event);
}); });
element.addEventListener('touchstart', () => {
selected = true;
moved = false;
console.log("td");
});
svg.addEventListener('touchmove', event => {
if (selected) {
moved = true;
let e = event.touches[0];
this.#moveCB({ x: e.clientX, y: e.clientY });
}
});
svg.addEventListener('touchend', () => {
selected = false;
});
svg.addEventListener('touchcancel', event => {
selected = false;
});
} }
onMove(cb: (event: MouseEvent) => any) { onMove(cb: (event: InteractionEvent) => any) {
this.#moveCB = cb; this.#moveCB = cb;
} }
onClick(cb: (event: MouseEvent) => any) { onClick(cb: (event: InteractionEvent) => any) {
this.#clickCB = cb; this.#clickCB = cb;
} }
} }