Improve click detection

simulator/js/editor.js

@@ -18,6 +18,8 @@ var snapToDirection_lockLimit_squared = 900; //拖曳物件且使用吸附至方
 var clickExtent_line = 10;
 var clickExtent_point = 10;
 var clickExtent_point_construct = 10;
+var touchscreenExtentRatio = 2;
+var lastDeviceIsTouch = false;
 
 var gridSize = 20; //格線大小 Size of the grid
 var origin = { x: 0, y: 0 }; //格線原點座標 Origin of the grid
@@ -31,23 +33,39 @@ function getMouseStyle(obj, style, screen) {
   return style;
 }
 
+function getClickExtent(isPoint, isConstruct) {
+  if (isPoint) {
+    if (isConstruct) {
+      var clickExtent = clickExtent_point_construct / scale;
+    } else {
+      var clickExtent = clickExtent_point / scale;
+    }
+  } else {
+    var clickExtent = clickExtent_line / scale;
+  }
+  if (lastDeviceIsTouch) {
+    clickExtent *= touchscreenExtentRatio;
+  }
+  return clickExtent;
+}
+
 function mouseOnPoint(mouse, point) {
-  return graphs.length_squared(mouse, point) < clickExtent_point * clickExtent_point;
+  return graphs.length_squared(mouse, point) < getClickExtent(true) * getClickExtent(true);
 }
 
 function mouseOnPoint_construct(mouse, point) {
-  return graphs.length_squared(mouse, point) < clickExtent_point_construct * clickExtent_point_construct;
+  return graphs.length_squared(mouse, point) < getClickExtent(true, true) * getClickExtent(true, true);
 }
 
 function mouseOnSegment(mouse, segment) {
   var d_per = Math.pow((mouse.x - segment.p1.x) * (segment.p1.y - segment.p2.y) + (mouse.y - segment.p1.y) * (segment.p2.x - segment.p1.x), 2) / ((segment.p1.y - segment.p2.y) * (segment.p1.y - segment.p2.y) + (segment.p2.x - segment.p1.x) * (segment.p2.x - segment.p1.x)); //類似於滑鼠與直線垂直距離 Similar to the distance between the mouse and the line
   var d_par = (segment.p2.x - segment.p1.x) * (mouse.x - segment.p1.x) + (segment.p2.y - segment.p1.y) * (mouse.y - segment.p1.y); //類似於滑鼠在直線上投影位置 Similar to the projected point of the mouse on the line
-  return d_per < clickExtent_line * clickExtent_line && d_par >= 0 && d_par <= graphs.length_segment_squared(segment);
+  return d_per < getClickExtent() * getClickExtent() && d_par >= 0 && d_par <= graphs.length_segment_squared(segment);
 }
 
 function mouseOnLine(mouse, line) {
   var d_per = Math.pow((mouse.x - line.p1.x) * (line.p1.y - line.p2.y) + (mouse.y - line.p1.y) * (line.p2.x - line.p1.x), 2) / ((line.p1.y - line.p2.y) * (line.p1.y - line.p2.y) + (line.p2.x - line.p1.x) * (line.p2.x - line.p1.x)); //類似於滑鼠與直線垂直距離 Similar to the distance between the mouse and the line
-  return d_per < clickExtent_line * clickExtent_line;
+  return d_per < getClickExtent() * getClickExtent();
 }
 
 //將滑鼠位置吸附至指定的方向中之最接近者(該方向直線上之投影點) Snap the mouse position to the direction nearest to the given directions
@@ -521,6 +539,7 @@ function canvas_onmousewheel(e) {
   d = Math.max(0.25, Math.min(5.00, d)) * 100;
   setScaleWithCenter(d / 100, (e.pageX - e.target.offsetLeft) / scale, (e.pageY - e.target.offsetTop) / scale);
   //window.toolBarViewModel.zoom.value(d);
+  canvas_onmousemove(e);
   return false;
 }
 

simulator/js/index.js

@@ -84,23 +84,27 @@ window.onload = function (e) {
     //console.log("mousedown");
     //document.getElementById('objAttr_text').blur();
     // TODO: check that commenting out the above line does not cause problem.
-
+    lastDeviceIsTouch = false;
     document.body.focus();
     canvas_onmousedown(e);
   });
 
   canvas.addEventListener('mousemove', function (e) {
     //console.log("mousemove");
+    lastDeviceIsTouch = false;
     canvas_onmousemove(e);
   });
 
   canvas.addEventListener('mouseup',  function (e) {
     //console.log("mouseup");
+    lastDeviceIsTouch = false;
     canvas_onmouseup(e);
   });
 
   canvas.addEventListener('mouseout',  function (e) {
-    mouseObj = -1;
+    if (!lastDeviceIsTouch) {
+      mouseObj = -1;
+    }
     draw(true, true)
   });
 
@@ -116,6 +120,7 @@ window.onload = function (e) {
   let lastY = 0;
 
   canvas.addEventListener('touchstart',  function (e) {
+    lastDeviceIsTouch = true;
     if (e.touches.length === 2) {
       // Pinch to zoom
       e.preventDefault();
@@ -136,6 +141,7 @@ window.onload = function (e) {
   });
 
   canvas.addEventListener('touchmove',  function (e) {
+    lastDeviceIsTouch = true;
     e.preventDefault();
     //console.log("touchmove");
     if (e.touches.length === 2) {
@@ -186,6 +192,7 @@ window.onload = function (e) {
   });
 
   canvas.addEventListener('touchend',  function (e) {
+    lastDeviceIsTouch = true;
     //console.log("touchend");
     if (e.touches.length < 2) {
       initialPinchDistance = null;
@@ -194,6 +201,7 @@ window.onload = function (e) {
   });
 
   canvas.addEventListener('touchcancel',  function (e) {
+    lastDeviceIsTouch = true;
     //console.log("touchcancel");
     initialPinchDistance = null;
     if (isConstructing || draggingObj >= 0) {
@@ -205,6 +213,7 @@ window.onload = function (e) {
   });
 
   canvas.addEventListener('dblclick',  function (e) {
+    lastDeviceIsTouch = false;
     canvas_ondblclick(e);
   });
 

simulator/js/objs/arcmirror.js

@@ -168,7 +168,7 @@ objTypes['arcmirror'] = {
       var a2 = Math.atan2(obj.p2.y - center.y, obj.p2.x - center.x);
       var a3 = Math.atan2(obj.p3.y - center.y, obj.p3.x - center.x);
       var a_m = Math.atan2(mouse_nogrid.y - center.y, mouse_nogrid.x - center.x);
-      if (Math.abs(graphs.length(center, mouse_nogrid) - r) < clickExtent_line && (((a2 < a3 && a3 < a1) || (a1 < a2 && a2 < a3) || (a3 < a1 && a1 < a2)) == ((a2 < a_m && a_m < a1) || (a1 < a2 && a2 < a_m) || (a_m < a1 && a1 < a2))))
+      if (Math.abs(graphs.length(center, mouse_nogrid) - r) < getClickExtent() && (((a2 < a3 && a3 < a1) || (a1 < a2 && a2 < a3) || (a3 < a1 && a1 < a2)) == ((a2 < a_m && a_m < a1) || (a1 < a2 && a2 < a_m) || (a_m < a1 && a1 < a2))))
       {
         //拖曳整個物件 Dragging the entire obj
         draggingPart.part = 0;

simulator/js/objs/blackcircle.js

@@ -50,7 +50,7 @@ objTypes['blackcircle'] = {
             return true;
         }
         // clicking on outer edge of circle?  then drag entire circle
-        if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < clickExtent_line) {
+        if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < getClickExtent()) {
             draggingPart.part = 0;
             draggingPart.mouse0 = mouse; //開始拖曳時的滑鼠位置 Mouse position when the user starts dragging
             draggingPart.mouse1 = mouse; //拖曳時上一點的滑鼠位置 Mouse position at the last moment during dragging

simulator/js/objs/circlelens.js

@@ -34,9 +34,9 @@ objTypes['circlelens'] = {
       return true;
     }
     // clicking on outer edge of circle?  then drag entire circle
-    //if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < clickExtent_line)
+    if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < getClickExtent())
     // clicking inside circle?  then drag entire circle
-    if (Math.abs(graphs.length(obj.p1, mouse_nogrid) < graphs.length_segment(obj)))
+    //if (Math.abs(graphs.length(obj.p1, mouse_nogrid) < graphs.length_segment(obj)))
     {
       draggingPart.part = 0;
       draggingPart.mouse0 = mouse; //開始拖曳時的滑鼠位置 Mouse position when the user starts dragging

simulator/js/objs/protractor.js

@@ -26,7 +26,7 @@ objTypes['protractor'] = {
       draggingPart.targetPoint = graphs.point(obj.p2.x, obj.p2.y);
       return true;
     }
-    if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < clickExtent_line)
+    if (Math.abs(graphs.length(obj.p1, mouse_nogrid) - graphs.length_segment(obj)) < getClickExtent())
     {
       draggingPart.part = 0;
       draggingPart.mouse0 = mouse; //開始拖曳時的滑鼠位置 Mouse position when the user starts dragging

simulator/js/objs/refractor.js

@@ -340,7 +340,7 @@ objTypes['refractor'] = {
           a2 = Math.atan2(p2.y - center.y, p2.x - center.x);
           a3 = Math.atan2(p3.y - center.y, p3.x - center.x);
           var a_m = Math.atan2(mouse_nogrid.y - center.y, mouse_nogrid.x - center.x);
-          if (Math.abs(graphs.length(center, mouse_nogrid) - r) < clickExtent_line && (((a2 < a3 && a3 < a1) || (a1 < a2 && a2 < a3) || (a3 < a1 && a1 < a2)) == ((a2 < a_m && a_m < a1) || (a1 < a2 && a2 < a_m) || (a_m < a1 && a1 < a2))))
+          if (Math.abs(graphs.length(center, mouse_nogrid) - r) < getClickExtent() && (((a2 < a3 && a3 < a1) || (a1 < a2 && a2 < a3) || (a3 < a1 && a1 < a2)) == ((a2 < a_m && a_m < a1) || (a1 < a2 && a2 < a_m) || (a_m < a1 && a1 < a2))))
           {
             //拖曳整個物件 Dragging the entire obj
             draggingPart.part = 0;