Add touchscreen drag/zoom support (#93)

* Add touchscreen pan/zoom support

* Add polyfill for Pointer Events API

Hopefully this commit can be reverted at some point in the future

* Use minified pointer events polyfill

* Code style fixes for touchscreen support

* Add two-finger tap gesture to reset zoom

* Touch support: more style fixes

Author: JJJollyjim

InteractiveHtmlBom/core/ibom.py

@@ -545,6 +545,7 @@ def get_file_content(file_name):
     html = get_file_content("ibom.html")
     html = html.replace('///CSS///', get_file_content('ibom.css'))
     html = html.replace('///SPLITJS///', get_file_content('split.js'))
+    html = html.replace('///POINTER_EVENTS_POLYFILL///', get_file_content('pep.js'))
     html = html.replace('///CONFIG///', config_js)
     html = html.replace('///PCBDATA///', pcbdata_js)
     html = html.replace('///UTILJS///', get_file_content('util.js'))

InteractiveHtmlBom/web/ibom.css

@@ -611,3 +611,7 @@ a {
 .dark a {
   color: #00b9fd;
 }
+
+#frontcanvas, #backcanvas {
+    touch-action: none;
+}

InteractiveHtmlBom/web/ibom.html

@@ -13,6 +13,10 @@
 ///SPLITJS///
 ///////////////////////////////////////////////
 
+///////////////////////////////////////////////
+///POINTER_EVENTS_POLYFILL///
+///////////////////////////////////////////////
+
 ///////////////////////////////////////////////
 ///CONFIG///
 ///////////////////////////////////////////////
@@ -151,15 +155,15 @@
       </table>
     </div>
     <div id="canvasdiv" class="split split-horizontal">
-      <div id="frontcanvas" class="split" style="overflow: hidden">
+      <div id="frontcanvas" class="split" touch-action="none" style="overflow: hidden">
         <div style="position: relative; width: 100%; height: 100%;">
           <canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
           <canvas id="F_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
           <canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
           <canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
         </div>
       </div>
-      <div id="backcanvas" class="split" style="overflow: hidden">
+      <div id="backcanvas" class="split" touch-action="none" style="overflow: hidden">
         <div style="position: relative; width: 100%; height: 100%;">
           <canvas id="B_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
           <canvas id="B_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>