diff --git a/js/graphics/SVGArrow.ts b/js/graphics/SVGArrow.ts index e4352d6..0f88512 100644 --- a/js/graphics/SVGArrow.ts +++ b/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); diff --git a/js/graphics/tragable.ts b/js/graphics/tragable.ts index 30b1108..e82f809 100644 --- a/js/graphics/tragable.ts +++ b/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; } } \ No newline at end of file