Update app.py

app.py

@@ -341,9 +341,7 @@ def draw_mask(ksize, th, v, d, evt: gr.EventData):
     vv = json.loads(v)
     pts = np.array(vv, np.int32)
     pts = pts.reshape((-1,1,2))
-    d["layers"][0] = cv2.polylines(d["layers"][0],[pts],True,(0,0,0,255))
-    d["composite"] = cv2.polylines(d["composite"],[pts],True,(0,0,0,255))
-
+    
     d["layers"][0] = cv2.fillPoly(d["layers"][0], [pts], (0,0,0,255))
     d["composite"] = cv2.fillPoly(d["composite"], [pts], (0,0,0,255))
 
@@ -451,14 +449,35 @@ 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;
-              document.getElementById(\"select_cursor\").style.top = e.clientY;
+              document.getElementById(\"select_cursor\").style.left = e.clientX + \"px\";
+              document.getElementById(\"select_cursor\").style.top = e.clientY + \"px\";
             }
             document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointermove = function(e) {
+              if (document.getElementById(\"select_cursor\").style.borderColor != \"#ffffff\") {
+                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 = \"[\" + x + \", \" + y + \"]\";
+                } else { 
+                  p = p.substr(0, p.lastIndexOf(\"[\"));
+                  p += \"[\" + x + \", \" + y + \"]\";
+                }
+                document.getElementById(\"mouse\").getElementsByTagName(\"textarea\")[0].value = \"[\" + p + \"]\";
+              }
+            }
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].oncontextmenu = 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\";
+            }
+            document.getElementById(\"image_edit\").getElementsByTagName(\"canvas\")[0].onpointerup = function(e) {
+              document.getElementById(\"select_cursor\").style.borderColor = \"#ffffff\";
             }' title='select' style='text-decoration:none;color:white;'>⬚ Select polygon</a>""")
             mouse = gr.Textbox(elem_id="mouse", value="""[]""", interactive=False)
             output_mask.apply(fn=draw_mask, inputs=[ksize, threshold, mouse, output_mask], outputs=[output_mask])