touch support

js/graphics/SVGArrow.ts

@@ -37,8 +37,8 @@ export class SVGArrow implements HTMLappendIt {
         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) + "");
-        this.lineText.setAttribute('x', this.from.x + dx / 2 + "");
-        this.lineText.setAttribute('y', this.from.y + dy / 2 + "");
+        this.lineText.setAttribute('x', (this.from.x + this.to.x) / 2 + "");
+        this.lineText.setAttribute('y', (this.from.y + this.to.y) / 2 + "");
     }
     appendIt(svg) {
         svg.appendChild(this.group);

js/graphics/tragable.ts

@@ -1,3 +1,8 @@
+export class InteractionEvent {
+    x: number;
+    y: number;
+}
+
 export class Tragable {
     static getRootSVG(elem: SVGElement): SVGSVGElement {
         while (!(elem instanceof SVGSVGElement)) {
@@ -7,8 +12,8 @@ export class Tragable {
         return elem;
     }
 
-    #moveCB: (event: MouseEvent) => any = () => { };
-    #clickCB: (event: MouseEvent) => any = () => { };
+    #moveCB: (event: InteractionEvent) => any = () => { };
+    #clickCB: (event: InteractionEvent) => any = () => { };
     initTrag(element: SVGElement) {
         let svg = Tragable.getRootSVG(element);
         let selected = false;
@@ -32,12 +37,31 @@ export class Tragable {
         element.addEventListener('click', 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;
     }
-    onClick(cb: (event: MouseEvent) => any) {
+    onClick(cb: (event: InteractionEvent) => any) {
         this.#clickCB = cb;
     }
 }