Allow shape deletion

static/picture-annotation.py

@@ -10,12 +10,14 @@ zone = document.getElementById("annotation-zone")

                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            confirm_button = document.getElementById("annotation-confirm")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            cancel_button = document.getElementById("annotation-cancel")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            backspace_button = document.getElementById("annotation-backspace")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        delete_button = document.getElementById("annotation-delete")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            object_list = document.getElementById("object-types")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                            confirm_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                            cancel_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                            backspace_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                        delete_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            shape_type = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                            bbox_pos = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                            new_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -60,6 +62,8 @@ async def select_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            62  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            63  
                                                objects = await get_all_objects()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            64  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                            delete_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                object_list.innerHTML = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                                new_radio = document.createElement("input")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -100,10 +104,25 @@ def unselect_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            104  
                                                    selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            105  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            106  
                                                object_list.innerHTML = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        107 +
                                            delete_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        108 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        109 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        110 +
                                        def delete_shape(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        111 +
                                            global selected_shape
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        112 +
                                            if selected_shape is None:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        113 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        114 +
                                            # Shape is SVG shape inside SVG so we need to remove the parent SVG
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        115 +
                                            selected_shape.parentNode.remove()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        116 +
                                            selected_shape = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        117 +
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        118 +
                                            delete_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            119  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            120  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            121  
                                            select_shape_proxy = create_proxy(select_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            122  
                                            unselect_shape_proxy = create_proxy(unselect_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        123 +
                                        delete_shape_proxy = create_proxy(delete_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        124 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        125 +
                                        delete_button.addEventListener("click", delete_shape_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            126  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            127  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            128  
                                            # These are functions usable in JS
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -3,6 +3,13 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            :root {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                                --gap-navbar: 1rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                --width-navbar-button: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                            --text-soft: #000000C0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                            --text-softer: #0000009A;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                            --text-faint: #00000066;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        p {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                            color: var(--text-soft);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            iconify-icon {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -63,3 +70,7 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                            .shape-container {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                pointer-events: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            72  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                        #annotation-helper-message {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                            min-height: 2lh;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -51,6 +51,9 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                        <button class="button-flat" title="remove last point" id="annotation-backspace">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                                            <iconify-icon icon="mdi:backspace"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                    <button class="button-flat" title="delete shape" id="annotation-delete">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                        <iconify-icon icon="mdi:delete"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                    </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                                    </x-vbox>