Update app.py

app.py

@@ -670,9 +670,17 @@ async(c, o, p, d, n, m)=>{
         window.a_old = 0;
         window.b_old = Math.PI / 2;
         window.compass = document.getElementById("compass");
-
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function() {
-          if (md === true) {
+        window.x = 0;
+        window.y = 0;
+        window.xold = 0;
+        window.yold = 0;
+
+        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function(evt) {
+        if (md === true) {
+          x = parseInt(evt.clientX - evt.target.getBoundingClientRect().x);
+          y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
+          
+          if (Math.abs(x-xold)>16 || Math.abs(y-yold)>16) {
             if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius - r_old) > 1/16) {
               BABYLON.Engine.LastCreatedScene.activeCamera.radius = r_old;
             } else {
@@ -687,11 +695,14 @@ async(c, o, p, d, n, m)=>{
             }
             document.getElementById('zoom').value = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
             document.getElementById('zoom').parentNode.childNodes[2].innerText = document.getElementById('zoom').value;
-    
-            try {
-              compass.style.transform = "rotateX(" + (BABYLON.Engine.LastCreatedScene.activeCamera.beta-Math.PI/2) + "rad) rotateZ(" + BABYLON.Engine.LastCreatedScene.activeCamera.alpha + "rad)";
-            } catch(e) {alert(e);}
+          
+            xold=x;
+            yold=y;
           }
+          try {
+            compass.style.transform = "rotateX(" + (BABYLON.Engine.LastCreatedScene.activeCamera.beta-Math.PI/2) + "rad) rotateZ(" + BABYLON.Engine.LastCreatedScene.activeCamera.alpha + "rad)";
+          } catch(e) {alert(e);}
+        }
         });
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerdown', function() {
           md = true;
@@ -699,9 +710,15 @@ async(c, o, p, d, n, m)=>{
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerup', function() {
           md = false;
         });
+        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointercancel', function() {
+          md = false;
+        });
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerleave', function() {
           md = false;
         });
+        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerout', function() {
+          md = false;
+        });
         
         if (document.getElementById("model")) {
           document.getElementById("model").appendChild(document.getElementById("model3D"));
@@ -978,7 +995,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
     #compass_box {
 	  top:1.5em;
 	  right:3px;
-	  position: fixed;
+	  position:absolute;
 	  border:1px dashed gray;
 	  border-radius: 50%;
 	  width:1.5em;