From 9272033b8c679da813d7b47dbc2cb30ede136490 Mon Sep 17 00:00:00 2001
From: Anurag Aggarwal <kanurag94@gmail.com>
Date: Fri, 8 May 2020 12:48:03 +0530
Subject: [PATCH] Added touch zooming capability

---
 index.html |  1 +
 js/xaos.js | 29 ++++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7f2e8e4..a84f50f 100644
--- a/index.html
+++ b/index.html
@@ -63,6 +63,7 @@
                 Try <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://firefox.com">Firefox</a>.</p>
         </canvas>
         <p>This is a real-time fractal zoomer.  Using it is simple: left-click to zoom in, right-click to zoom out.</p>
+        <p>Touch Devices: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom out with one finger.</p>
     </div>
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
diff --git a/js/xaos.js b/js/xaos.js
index e04e76d..9e396d9 100644
--- a/js/xaos.js
+++ b/js/xaos.js
@@ -1255,7 +1255,34 @@ xaos.zoom = (function() {
             }
         }
 
-        canvas.onmousedown = function(e) {
+        canvas.ontouchstart = function(e) {
+            if(e.touches.length < 3){
+                var touch = e.touches[0];
+                (e.touches.length == 2)?mouse.button[2]=true:mouse.button[2]=false;
+                var mouseEvent = new MouseEvent("mousedown", {
+                    clientX: touch.clientX,
+                    clientY: touch.clientY
+                });
+                canvas.dispatchEvent(mouseEvent);
+            }
+        };
+
+        canvas.ontouchend = function(e) {
+            console.log(e);
+            var mouseEvent = new MouseEvent("mouseup", {});
+            canvas.dispatchEvent(mouseEvent);
+        };
+
+        canvas.ontouchmove = function(e) {
+            var touch = e.touches[0];
+            var mouseEvent = new MouseEvent("mousemove", {
+                clientX: touch.clientX,
+                clientY: touch.clientY
+            });
+            canvas.dispatchEvent(mouseEvent);
+        };
+
+        canvas.onmousedown =  function(e) {
             mouse.button[e.button] = true;
             mouse.x = e.offsetX || (e.clientX - canvas.offsetLeft);
             mouse.y = e.offsetY || (e.clientY - canvas.offsetTop);