Update scroll touch action (#24)

source/electron.html

@@ -8,12 +8,12 @@
 <link rel="stylesheet" type="text/css" href="view-grapher.css">
 <link rel="stylesheet" type="text/css" href="view-sidebar.css">
 <style>
-html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
-body { margin: 0; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
+html { touch-action: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
+body { touch-action: none; margin: 0; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
 .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .select { user-select: text; -webkit-user-select: text; -moz-user-select: text; }
 .open-file-dialog { display: none; }
-.graph { overflow: auto; height: 100%; }
+.graph { touch-action: pan-x pan-y; overflow: auto; height: 100%; }
 .canvas { display: block; position: absolute; text-rendering: geometricPrecision; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .toolbar { position: absolute; top: 10px; left: 10px; padding: 0; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .toolbar-button { background: None; border-radius: 6px; border: 0; margin: 0; padding: 0; fill: None; stroke: #777; cursor: hand; width: 24px; height: 24px; }

source/index.html

@@ -27,13 +27,13 @@
 <script type="text/javascript" src="view.js"></script>
 <script type="text/javascript" src="index.js"></script>
 <style>
-html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
-body { overflow: hidden; margin: 0; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
+html { touch-action: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
+body { touch-action: none; overflow: hidden; margin: 0; width: 100vw; height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 12px; text-rendering: geometricPrecision; }
 .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .select { user-select: text; -webkit-user-select: text; -moz-user-select: text; }
 .open-file-dialog { display: none; }
 .transparent { width: 100vw; height: 100vh; background-color: #000000; display: none; opacity: 0; }
-.graph { overflow: auto; height: 100%; }
+.graph { touch-action: pan-x pan-y; overflow: auto; height: 100%; }
 .canvas { display: block; position: absolute; text-rendering: geometricPrecision; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .toolbar { position: absolute; top: 10px; left: 10px; padding: 0; margin: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .toolbar-button { background: None; border-radius: 6px; border: 0; margin: 0; padding: 0; fill: None; stroke: #777; cursor: hand; width: 24px; height: 24px; }

source/view.js

@@ -46,12 +46,18 @@ view.View = class {
                 this.clearSelection();
             });
             if (this._host.environment('zoom') === 'scroll') {
+                window.addEventListener('wheel', (e) => {
+                    this._mouseWheelHandler(e);
+                });
                 this._getElementById('graph').addEventListener('mousewheel', (e) => {
                     this._mouseWheelHandler(e);
                 });
                 this._getElementById('graph').addEventListener('scroll', (e) => {
                     this._scrollHandler(e);
                 });
+                this._getElementById('graph').addEventListener('wheel', (e) => {
+                    this._scrollHandler(e);
+                });
                 this._getElementById('graph').addEventListener('gesturestart', (e) => {
                     e.preventDefault();
                     this._gestureStartZoom = this._zoom;
@@ -175,7 +181,7 @@ view.View = class {
     zoomIn() {
         switch (this._host.environment('zoom')) {
             case 'scroll':
-                this._updateZoom(this._zoom * 1.05);
+                this._updateZoom(this._zoom * 1.1);
                 break;
             case 'd3':
                 if (this._zoom) {
@@ -188,7 +194,7 @@ view.View = class {
     zoomOut() {
         switch (this._host.environment('zoom')) {
             case 'scroll':
-                this._updateZoom(this._zoom * 0.95);
+                this._updateZoom(this._zoom * 0.9);
                 break;
             case 'd3':
                 if (this._zoom) {