--- a/svghmi/widget_keypad.ysl2 Mon Aug 17 10:00:25 2020 +0200
+++ b/svghmi/widget_keypad.ysl2 Tue Aug 18 11:42:28 2020 +0200
@@ -17,12 +17,19 @@
||
class KeypadWidget extends Widget{
moving = undefined;
- enTimer = undefined;
+ click = undefined;
offset = undefined;
on_position_click(evt) {
this.moving = true;
- this.enTimer = true;
+
+ // chatch window events
+ window.addEventListener("touchmove", this.bound_on_drag, true);
+ window.addEventListener("mousemove", this.bound_on_drag, true);
+
+ window.addEventListener("mouseup", this.bound_on_release, true)
+ window.addEventListener("touchend", this.bound_on_release, true);
+ window.addEventListener("touchcancel", this.bound_on_release, true);
// get click position offset from widget x,y and save it to variable
var keypad_borders = this.position_elt.getBoundingClientRect();
@@ -39,40 +46,49 @@
this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
}
- off_position_click(evt) {
+ on_release(evt) {
+ //relase binds
+ window.removeEventListener("touchmove", this.bound_on_drag, true);
+ window.removeEventListener("mousemove", this.bound_on_drag, true);
+
+ window.removeEventListener("mouseup", this.bound_on_release, true)
+ window.removeEventListener("touchend", this.bound_on_release, true);
+ window.removeEventListener("touchcancel", this.bound_on_release, true);
+
if(this.moving)
this.moving = false;
}
- on_move(evt) {
- if(this.moving && this.enTimer){
- //get keyboard pos in html
- let [eltid, tmpgrp] = current_modal;
- let [xcoord,ycoord] = this.coordinates;
- let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
-
- //get mouse coordinates
- var clickX = undefined;
- var clickY = undefined;
- if (evt.type == "touchmove"){
- clickX = Math.ceil(evt.touches[0].clientX);
- clickY = Math.ceil(evt.touches[0].clientY);
- }
- else{
- clickX = evt.pageX;
- clickY = evt.pageY;
- }
-
- //translate keyboard position
- let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
- let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
- tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
-
- //reset timer
- this.enTimer = false;
- setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
- }
-
+ on_drag(evt) {
+ if(this.moving)
+ //get mouse coordinates
+ var clickX = undefined;
+ var clickY = undefined;
+ if (evt.type == "touchmove"){
+ clickX = Math.ceil(evt.touches[0].clientX);
+ clickY = Math.ceil(evt.touches[0].clientY);
+ }
+ else{
+ clickX = evt.pageX;
+ clickY = evt.pageY;
+ }
+ this.click = [clickX,clickY]
+
+ //requeset redraw
+ this.request_animate();
+ }
+
+ animate(){
+ //get keyboard pos in html
+ let [eltid, tmpgrp] = current_modal;
+ let [xcoord,ycoord] = this.coordinates;
+ let [clickX,clickY] = this.click;
+ let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+
+ //translate keyboard position
+ let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
+ let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
+ tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
}
on_key_click(symbols) {
@@ -176,15 +192,11 @@
| this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
}
| if(this.position_elt){
+ | this.bound_on_release = this.on_release.bind(this);
+ | this.bound_on_drag = this.on_drag.bind(this);
+ |
| this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
| this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
-
- | window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this));
- | window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this));
- | window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this));
-
- | window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this));
- | window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this));
| }
| },
|