Update app.py

app.py

@@ -702,7 +702,7 @@ async(c, o, p, d, n, m)=>{
 
 js = """
 async()=>{
-  console.log('Hi');
+console.log('Hi');
 
 const chart = document.getElementById('chart');
 const blur_in = document.getElementById('blur_in').getElementsByTagName('textarea')[0];
@@ -795,7 +795,26 @@ function drawLine(x, y) {
   }
 }
 window.drawLine = drawLine;
-  
+
+
+document.getElementById("image_edit").getElementsByTagName("canvas")[0].oncontextmenu = function(e){e.preventDefault();}
+document.getElementById("image_edit").getElementsByTagName("canvas")[0].ondrag = function(e){e.preventDefault();}
+            
+document.getElementById("image_edit").getElementsByTagName("canvas")[0].ondblclick = function(e) {
+    var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
+    var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
+
+    var p = document.getElementById("mouse").getElementsByTagName("textarea")[0].value.slice(1, -1);
+    if (p != "") { p += ", "; }
+    p += "[" + x + ", " + y + "]";
+    document.getElementById("mouse").getElementsByTagName("textarea")[0].value = "[" + p + "]";
+              
+    var evt = document.createEvent("Event");
+    evt.initEvent("input", true, false);
+    document.getElementById("mouse").getElementsByTagName("textarea")[0].dispatchEvent(evt);
+    document.getElementById("mouse").getElementsByTagName("textarea")[0].value = "[]";
+}
+
 }
 """
 
@@ -853,44 +872,6 @@ with gr.Blocks(css=css, js=js) as demo:
             output_switch.input(fn=switch_rows, inputs=[output_switch], outputs=[output_frame])
             output_mask = gr.ImageEditor(layers=False, sources=('upload', 'clipboard'), show_download_button=True, type="numpy", interactive=True, transforms=(None,), eraser=gr.Eraser(), brush=gr.Brush(default_size=0, colors=['black', '#505050', '#a0a0a0', 'white']), elem_id="image_edit")
             with gr.Row():
-              selector = gr.HTML(value="""
-            <a href='#' id='selector' onclick='if (this.style.fontWeight!=\"bold\") {
-            this.style.fontWeight=\"bold\";
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
-            
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onclick = function(e) {
-              var x = parseInt((e.clientX-e.target.getBoundingClientRect().x)*e.target.width/e.target.getBoundingClientRect().width);
-              var y = parseInt((e.clientY-e.target.getBoundingClientRect().y)*e.target.height/e.target.getBoundingClientRect().height);
-
-              var p = document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value.slice(1, -1);
-              if (p != \"\") { p += \", \"; }
-              p += \"[\" + x + \", \" + y + \"]\";
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[\" + p + \"]\";
-              
-              var evt = document.createEvent(\"Event\");
-              evt.initEvent(\"input\", true, false);
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
-            }
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerdown = function(e) {
-              
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].style.borderColor = \"#a0a0a0\";
-            
-            }
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerup = function(e) {
-              
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].style.borderColor = \"#ffffff\";
-            
-            }
-            } else {
-              this.style.fontWeight=\"normal\";
-              document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onclick = null;
-              
-            }' title='Select point' style='text-decoration:none;color:white;'>⊹ Select point</a> <a href='#' id='clear_select' onclick='
-              
-              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
-            
-            ' title='Clear selection' style='text-decoration:none;color:white;'>✕ Clear</a>""")
               reset = gr.Button("Reset", size='sm')
             with gr.Accordion(label="Border", open=False):
               boffset = gr.Slider(label="Offset", value=1, maximum=256, minimum=0, step=1)