[NME] fix wheel behaviour and overscroll (#12537)

* fix onWheel zoom behaviour * move window onWheel behaviour to graphEditor.tsx
BabylonJS · May 19, 2022 · 9aa6c7c · 9aa6c7c
1 parent 58747b4
commit 9aa6c7c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/tools/nodeEditor/public/index.html b/packages/tools/nodeEditor/public/index.html
@@ -3,7 +3,7 @@
     <head>
         <title>Babylon.js Node Material Editor</title>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico" />
 
         <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
@@ -17,7 +17,11 @@
                 height: 100%;
                 padding: 0;
                 margin: 0;
+                -ms-touch-action: none;
+                touch-action: none;
                 overflow: hidden;
+                overscroll-behavior-x: none;
+                overscroll-behavior-y: none;
             }
 
             #host-element {
@@ -28,6 +32,7 @@
                 overflow: hidden;
             }
         </style>
+
     </head>
 
     <body>

diff --git a/packages/tools/nodeEditor/src/diagram/graphCanvas.tsx b/packages/tools/nodeEditor/src/diagram/graphCanvas.tsx
@@ -766,8 +766,6 @@ export class GraphCanvasComponent extends React.Component<IGraphCanvasComponentP
 
         this.x = this.x - widthDiff * xFactor;
         this.y = this.y - heightDiff * yFactor;
-
-        evt.stopPropagation();
     }
 
     zoomToFit() {

diff --git a/packages/tools/nodeEditor/src/graphEditor.tsx b/packages/tools/nodeEditor/src/graphEditor.tsx
@@ -120,6 +120,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     }
 
     componentDidMount() {
+        window.addEventListener("wheel", this.onWheel, { passive: false });
+
         if (this.props.globalState.hostDocument) {
             this._graphCanvas = this._graphCanvasRef.current!;
             this._diagramContainer = this._diagramContainerRef.current!;
@@ -139,6 +141,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
     }
 
     componentWillUnmount() {
+        window.removeEventListener("wheel", this.onWheel);
+
         if (this.props.globalState.hostDocument) {
             this.props.globalState.hostDocument!.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
         }
@@ -570,6 +574,21 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         evt.currentTarget.releasePointerCapture(evt.pointerId);
     }
 
+    onWheel(this: any, evt: WheelEvent) {
+        if (evt.ctrlKey) {
+            return evt.preventDefault();
+        }
+
+        if (Math.abs(evt.deltaX) < Math.abs(evt.deltaY)) {
+            return;
+        }
+
+        const scrollLeftMax = this.scrollWidth - this.offsetWidth;
+        if (this.scrollLeft + evt.deltaX < 0 || this.scrollLeft + evt.deltaX > scrollLeftMax) {
+            return evt.preventDefault();
+        }
+    }
+
     resizeColumns(evt: React.PointerEvent<HTMLDivElement>, forLeft = true) {
         if (!this._moveInProgress) {
             return;