Touch pan and zoom for non-apple

html/css/dashboard.css

@@ -16,6 +16,7 @@
     left: 0;
     bottom: 45px;
     right: 0;
+    touch-action: pan-x pan-y;
 }
 
 #pedalboard-dashboard.dev_api:after {

html/index.html

@@ -45,6 +45,7 @@
 
 <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/jquery-ui-1.10.1.custom.min.js?v={{version}}"></script>
+<script> if (! ("ontouchend" in document)){document.ontouchend=''}</script>
 <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/jquery.ba-resize.min.js?v={{version}}"></script>
 <script type="text/javascript" src="js/lib/mustache.js?v={{version}}"></script>

html/js/desktop.js

@@ -1304,9 +1304,9 @@ function Desktop(elements) {
     var prevent = function (ev) {
         ev.preventDefault()
     }
+
     $('body')[0].addEventListener('gesturestart', prevent)
     $('body')[0].addEventListener('gesturechange', prevent)
-    $('body')[0].addEventListener('touchmove', prevent)
     $('body')[0].addEventListener('dblclick', prevent)
 }
 

html/js/pedalboard.js

@@ -73,7 +73,7 @@ JqueryClass('pedalboard', {
             // The scale is the transform scale() css property that the pedalboard has
             baseScale: 0.5,
             // maxScale is the maximum zoom.
-            maxScale: 1,
+            maxScale: 1.2,
             // wherever to skip zoom animations
             skipAnimations: false,
 
@@ -316,7 +316,7 @@ JqueryClass('pedalboard', {
         }});
 
         // Dragging the pedalboard move the view area
-        self.mousedown(function (e) {
+        self.bind('mousedown touchstart', function (e) {
             self.pedalboard('drag', e)
         })
 
@@ -811,34 +811,43 @@ JqueryClass('pedalboard', {
 
     // Moves the viewable area of the pedalboard
     drag: function (start) {
-        var self = $(this)
-
+        const self = $(this)
         self.trigger('dragStart')
+        const scale = self.data('scale')
+
+        function shape(e) {
+            if (!e.type.startsWith('touch')) return { pageX: e.pageX, pageY: e.pageY, pageD: 0.0001 }
+            var touches = e.originalEvent.touches
+            if (touches.length == 1) return { pageX: touches[0].pageX, pageY: touches[0].pageY, pageD: 0.0001 } 
+            const [ x0, x1, y0, y1 ] = [ touches[0].pageX, touches[1].pageX, touches[0].pageY, touches[1].pageY ]
+            return {
+                pageX: Math.round(x0+(x1-x0)*0.50),
+                pageY: Math.round(y0+(y1-y0)*0.50),
+                pageD: Math.hypot(x0 - x1, y0 - y1)
+            }
+        }
 
-        var scale = self.data('scale')
-
-        var canvasX = (start.pageX - self.offset().left) / scale
-        var canvasY = (start.pageY - self.offset().top) / scale
-        var screenX = start.pageX - self.parent().offset().left
-        var screenY = start.pageY - self.parent().offset().top
-
-        var moveHandler = function (e) {
-            if (self.data('preventDrag'))
-                return
-
-            self.pedalboard('zoom', scale, canvasX, canvasY,
-                screenX + e.pageX - start.pageX,
-                screenY + e.pageY - start.pageY,
-                0)
+        start = shape(start)
+        const canvasX = (start.pageX - self.offset().left) / scale
+        const canvasY = (start.pageY - self.offset().top) / scale
+
+        const moveHandler = function (e) {
+            if (self.data('preventDrag')) return
+            e = shape(e)
+            var newScale = scale * e.pageD / start.pageD
+            newScale = Math.min(self.data('maxScale'), newScale)
+            newScale = Math.max(self.data('minScale'), newScale)
+            self.pedalboard( 'zoom', newScale, canvasX, canvasY, 
+                             e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 )
         }
 
-        var upHandler = function (e) {
-            $(document).unbind('mouseup', upHandler)
-            $(document).unbind('mousemove', moveHandler)
+        const upHandler = function (e) {
+            $(document).unbind('mouseup touchend', upHandler)
+            $(document).unbind('mousemove touchmove', moveHandler)
         }
 
-        $(document).bind('mousemove', moveHandler)
-        $(document).bind('mouseup', upHandler)
+        $(document).bind('mousemove touchmove', moveHandler)
+        $(document).bind('mouseup touchend', upHandler)
     },
 
     // Changes the viewing scale of the pedalboard and position it in a way that
@@ -1494,13 +1503,13 @@ JqueryClass('pedalboard', {
                 }
             }
 
-            icon.mousedown(function () {
+            icon.bind('mousedown touchstart', function () {
                 self.pedalboard('preventDrag', true)
                 var upHandler = function () {
                     self.pedalboard('preventDrag', false)
-                    $('body').unbind('mouseup', upHandler)
+                    $('body').unbind('mouseup touchend', upHandler)
                 }
-                $('body').bind('mouseup', upHandler)
+                $('body').bind('mouseup touchend', upHandler)
             })
 
             var actions = $('<div>').addClass('ignore-arrive').addClass('mod-actions').appendTo(icon)