Add polyline

static/picture-annotation.py

@@ -404,10 +404,16 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            404  
                                                    vertical_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            405  
                                                    horizontal_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            406  
                                                    zone.style.cursor = "crosshair"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        407 -
                                            elif shape_type == "shape-polygon":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        408 -
                                                helper_message.innerText = ("Click on the image to define the points of the polygon, "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        409 -
                                                                            "press escape to cancel, enter to close, or backspace to "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        410 -
                                                                            "remove the last point")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        407 +
                                            elif shape_type == "shape-polygon" or shape_type == "shape-polyline":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        408 +
                                                match shape_type:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        409 +
                                                    case "shape-polygon":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        410 +
                                                        helper_message.innerText = ("Click on the image to define the points of the polygon, "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        411 +
                                                                                    "press escape to cancel, enter to close, or backspace to "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        412 +
                                                                                    "remove the last point")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        413 +
                                                    case "shape-polyline":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        414 +
                                                        helper_message.innerText = ("Click on the image to define the points of the polyline, "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        415 +
                                                                                    "press escape to cancel, enter to finish, or backspace to "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        416 +
                                                                                    "remove the last point")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            417  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            418  
                                                    if not polygon_points and not new_shape:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            419  
                                                        new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -418,7 +424,6 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            424  
                                                        new_shape.classList.add("shape-container")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            425  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            426  
                                                    if not polygon_points and int(len(new_shape.children)) == 0:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        421 -
                                                    print(len(new_shape.children), "children found")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            427  
                                                        zone.addEventListener("click", make_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            428  
                                                        document.addEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            429  
                                                        document.addEventListener("keydown", cancel_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -429,10 +434,15 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            434  
                                                        confirm_button.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            435  
                                                        backspace_button.addEventListener("click", backspace_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            436  
                                                        backspace_button.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        432 -
                                                    polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        437 +
                                                    match shape_type:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        438 +
                                                        case "shape-polygon":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        439 +
                                                            polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        440 +
                                                            polygon.classList.add("shape-polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        441 +
                                                        case "shape-polyline":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        442 +
                                                            polygon = document.createElementNS("http://www.w3.org/2000/svg", "polyline")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        443 +
                                                            polygon.classList.add("shape-polyline")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            444  
                                                        polygon.setAttribute("fill", "none")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            445  
                                                        polygon.setAttribute("data-object-type", "")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        435 -
                                                    polygon.classList.add("shape-polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            446  
                                                        polygon.classList.add("shape")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            447  
                                                        new_shape.appendChild(polygon)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            448  
                                                        zone.appendChild(new_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -63,8 +63,13 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            63  
                                                pointer-events: auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            64  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            65  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                        .shape-polyline {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 +
                                            fill: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                            .shape.selected {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                fill-opacity: 0.2;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 +
                                            stroke-width: 4px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            73  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            74  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                            .shape-container {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -24,7 +24,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                                        <button class="button-flat" title="polygon" id="shape-polygon">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                            <iconify-icon icon="mdi:pentagon"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 -
                                                    <button class="button-flat" title="line" id="shape-line">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                    <button class="button-flat" title="polyline" id="shape-polyline">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                                            <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                                        <button class="button-flat" title="point" id="shape-point">