Update app.py

app.py

@@ -433,6 +433,7 @@ with gr.Blocks(css=css) as demo:
             selector = gr.HTML(value="""<div id='select_cursor' style='width:1px;height:1px;position:absolute;border:1px dotted #ffffff;'></div>
             <a href='#' id='selector' onclick='this.style.fontWeight=\"bold\";
             document.body.appendChild(document.getElementById(\"select_cursor\"));
+            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) {
@@ -448,8 +449,8 @@ with gr.Blocks(css=css) as demo:
               evt.initEvent(\"input\", true, false);
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].dispatchEvent(evt);
 
-              document.getElementById(\"select_cursor\").style.left = e.clientX + \"px\";
-              document.getElementById(\"select_cursor\").style.top = e.clientY + \"px\";
+              document.getElementById(\"select_cursor\").style.left = e.clientX-1 + \"px\";
+              document.getElementById(\"select_cursor\").style.top = e.clientY-1 + \"px\";
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointermove = function(e) {
               if (document.getElementById(\"select_cursor\").style.borderColor != \"#ffffff\") {
@@ -465,17 +466,23 @@ with gr.Blocks(css=css) as demo:
                 }
                 document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[\" + p + \"]\";
 
-                document.getElementById(\"select_cursor\").style.left = e.clientX + \"px\";
-                document.getElementById(\"select_cursor\").style.top = e.clientY + \"px\";
+                document.getElementById(\"select_cursor\").style.left = e.clientX-1 + \"px\";
+                document.getElementById(\"select_cursor\").style.top = e.clientY-1 + \"px\";
               }
             }
-            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e) {
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].ondblclick = function(e) {
               e.preventDefault();
               document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
 
               document.getElementById(\"select_cursor\").style.left = 0;
               document.getElementById(\"select_cursor\").style.top = 0;
             }
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerleave = function(e) {
+              document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[]\";
+
+              document.getElementById(\"select_cursor\").style.left = 0;
+              document.getElementById(\"select_cursor\").style.top = 0;
+            }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerdown = function(e) {
               document.getElementById(\"select_cursor\").style.borderColor = \"#808080\";
             }