Direct link for mobile devices.
Today I made the selection action work using touch events in addition to the mouse click event. The touch mechanism in JavaScript for mobile browsers does not current have a click counterpart so we have to simulate the action using the events we do have. I’ve done it in the most naive way, by simply activating the desired event if a touch event ends within a sufficiently short period of time. I’ve included the code below, with comments for what’s been added. This implementation was pretty mindless, consisting of about eight lines.
Interestingly, at least on my iPhone, this process continues to work without adjustment when the user zooms the screen in and out, indicating that the OS is handling that part of the scaling process natively. When zooming of the 2D image is handled separately, however, and again I haven’t gotten to this yet, the situation is going to get more complex and will need to be handled explicitly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
//var totalDragDistance; //stubbed var touchDate = new Date; //added var touchTimeStamp = 0; //added //start drag canvas.addEventListener("touchstart", function(event) { startDragT(event); }); function startDragT(e) { touchTimeStamp = touchDate.getTime(); //added startDragX = globalBaseX; startDragY = globalBaseY; e.preventDefault(); var touches = e.changedTouches; dragBaseX = touches[0].pageX; dragBaseY = touches[0].pageY; dragLastX = dragBaseX; dragLastY = dragBaseY; dragFlag = true; //totalDragDistance = 0; //stubbed } //end drag canvas.addEventListener("touchend", function(event) { endDragT(event); }); function endDragT(e) { //if (((endTime - touchTimeStamp) < 200) && (totalDragDistance <= 5)) { //stubbed var endTime = touchDate.getTime(); //added if ((endTime - touchTimeStamp) < 300) { //treat as a click event //added componentSelectionIndex = selectComponent(dragLastX, dragLastY); //added } //added //also process end drag event //added e.preventDefault(); dragFlag = false; } //move while dragging canvas.addEventListener("touchmove", function(event) { doDragT(event); }); function doDragT(e) { if (dragFlag) { e.preventDefault(); var touches = e.changedTouches; var currentX = touches[0].pageX; //change to clientX var currentY = touches[0].pageY; //change to clientY var incrementX = currentX - dragLastX; var incrementY = currentY - dragLastY; //accumulate drag distance //stubbed //totalDragDistance += Math.abs(incrementX) + Math.abs(incrementX); //stubbed //if (totalDragDistance > 5) { //stubbed if (incrementX > 0) { panLeft(incrementX) } else if (incrementX < 0) { panRight(-incrementX) } if (incrementY > 0) { panUp(incrementY); } else if (incrementY < 0) { panDown(-incrementY); } dragLastX = currentX; dragLastY = currentY; //} //stubbed } } //touch leaves appropriate area (control works beyond canvas) canvas.addEventListener("touchcancel", function(event) { leaveDragT(event); }); function leaveDragT(e) { e.preventDefault(); if (dragFlag) { globalBaseX = startDragX; globalBaseY = startDragY; if (!running) { drawModel(); } dragFlag = false; } } |
I’ve left stubs in for checking to see that we haven’t dragged anything too far, and have also stubbed in the ability to not start executing a drag until it’s clear the user really means it. This could all be tuned more over time but I imagine that a number of capabilities are going to be added over time and I want to get a better feel for what the fuller list might include before doing the final polish on any one feature.