Update app.py

app.py

@@ -638,10 +638,42 @@ async(c, o, p, d, n, m)=>{
           BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.diffuseTexture.hasAlpha = true;
           BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.useAlphaFromDiffuseTexture = true;
           BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].applyDisplacementMap(m[o_[j]].url, 0, 255, function(m){try{alert(BABYLON.Engine.Version);}catch(e){alert(e);}}, null, null, true, function(e){alert(e);});
+
+          document.getElementById("cnum").innerHTML += '<option value="' + o_[j] + '">' + j + '</option>';
         }
         loadEditControl();
         const editControl = new EditControl(BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1-parseInt(document.getElementById("cnum").value)], BABYLON.Engine.LastCreatedScene.activeCamera, document.getElementById("model3D").getElementsByTagName("canvas")[0], 1.0, true, 0.02);
         editControl.enableTranslation();
+        document.getElementById("cnum").onchange = function(e) {
+          editControl.switchTo(BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1-parseInt(e.target.value)], true);
+        }
+        document.getElementById("c_mode").onchange = function(e) {
+          if (e.target.value == 'move') {
+            editControl.show();
+            editControl.enableTranslation();
+    
+            editControl.disableRotation();
+            editControl.disableScaling();
+          } else if (e.target.value == 'rotate') {
+            editControl.show();
+            editControl.enableRotation();
+            editControl.setRotGuideFull(false) //This makes the rotation guides 360 degree(true) or 90 degree(false) .90 degree  looks less cluttered.
+            editControl.returnEuler(true); // Optional. This will return rotation in euler instead of quaternion. Quaternion is the default.
+            editControl.disableTranslation();
+            editControl.disableScaling();
+          } else if (e.target.value == 'scale') {
+            editControl.show();
+            editControl.enableScaling();
+    
+            editControl.disableTranslation();
+            editControl.disableRotation();
+          } else {
+            editControl.disableTranslation();
+            editControl.disableRotation();
+            editControl.disableScaling();
+            editControl.hide();
+          }
+        }
         
         if (document.getElementById("model")) {
           document.getElementById("model").appendChild(document.getElementById("model3D"));
@@ -861,7 +893,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
           with gr.Tab("Blur"):
             chart_c = gr.HTML(elem_id="chart_c", value="""<div id='chart' onpointermove='window.drawLine(event.clientX, event.clientY);' onpointerdown='window.pointerDown(event.clientX, event.clientY);' onpointerup='window.pointerUp();' onpointerleave='window.pointerUp();' onpointercancel='window.pointerUp();' onclick='window.resetLine();'></div>
             <style>
-  body {
+  * {
     user-select: none;
   }
   #chart hr {
@@ -973,39 +1005,8 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
             '/><span>1.0</span>""")
-            control = gr.HTML(value="""<select id='cnum' style='color:black' oninput='
-              editControl.switchTo(BABYLON.Engine.LastCreatedScene.meshes[parseInt(this.value)], true);
-            ' onselect='
-              editControl.switchTo(BABYLON.Engine.LastCreatedScene.meshes[parseInt(this.value)], true);
-            '><option selected value='0'>0</option></select>
-            mode<select id='c_mode' style='color:black' oninput='
-              if (this.value == \'move\') {
-                editControl.show();
-                editControl.enableTranslation();
-    
-                editControl.disableRotation();
-                editControl.disableScaling();
-              } else if (this.value == \'rotate\') {
-                editControl.show();
-                editControl.enableRotation();
-                editControl.setRotGuideFull(false) //This makes the rotation guides 360 degree(true) or 90 degree(false) .90 degree  looks less cluttered.
-                editControl.returnEuler(true); // Optional. This will return rotation in euler instead of quaternion. Quaternion is the default.
-
-                editControl.disableTranslation();
-                editControl.disableScaling();
-              } else if (this.value == \'scale\') {
-                editControl.show();
-                editControl.enableScaling();
-    
-                editControl.disableTranslation();
-                editControl.disableRotation();
-              } else {
-                editControl.disableTranslation();
-                editControl.disableRotation();
-                editControl.disableScaling();
-                editControl.hide();
-              }
-            ' onselect='this.oninput'>
+            control = gr.HTML(value="""<select id='cnum' style='color:black;line-height:1em'></select>
+            mode<select id='c_mode' style='color:black;line-height:1em'>
               <option selected value='move'>move</option>
               <option value='rotate'>rotate</option>
               <option value='scale'>scale</option>