Better event/cursor handling

static/picture-annotation.py

@@ -302,7 +302,8 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            302  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            303  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            304  
                                            async def select_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        305 -
                                            await focus_shape(event.target)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        305 +
                                            if drag_distance == 0:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        306 +
                                                await focus_shape(event.target)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            307  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            308  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            309  
                                            async def next_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -366,18 +367,19 @@ async def previous_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            367  
                                            def unselect_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            368  
                                                global selected_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            369  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        369 -
                                            if selected_shape is not None:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        370 -
                                                selected_shape.classList.remove("selected")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        371 -
                                                selected_shape = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        370 +
                                            if drag_distance == 0:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        371 +
                                                if selected_shape is not None:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        372 +
                                                    selected_shape.classList.remove("selected")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        373 +
                                                    selected_shape = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            374  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        373 -
                                            object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        374 -
                                            object_list.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        375 -
                                            delete_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        376 -
                                            next_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        377 -
                                            previous_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        378 -
                                            document.removeEventListener("keydown", delete_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        379 -
                                            document.removeEventListener("keydown", next_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        380 -
                                            document.removeEventListener("keydown", previous_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        375 +
                                                object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        376 +
                                                object_list.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        377 +
                                                delete_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        378 +
                                                next_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        379 +
                                                previous_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        380 +
                                                document.removeEventListener("keydown", delete_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        381 +
                                                document.removeEventListener("keydown", next_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        382 +
                                                document.removeEventListener("keydown", previous_shape_key_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            383  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            384  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            385  
                                            def delete_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -432,6 +434,7 @@ def switch_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            434  
                                                        shape.addEventListener("click", select_shape_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            435  
                                                    image.addEventListener("click", unselect_shape_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            436  
                                                    helper_message.innerText = "Click on a shape to select"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        437 +
                                                zone.style.cursor = "inherit"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            438  
                                                    # Cancel the current shape creation
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            439  
                                                    if shape_type == "shape-bbox":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            440  
                                                        cancel_bbox(None)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -440,6 +443,9 @@ def switch_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            443  
                                                    elif shape_type == "shape-polyline":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            444  
                                                        cancel_polygon(None)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            445  
                                                else:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        446 +
                                                zone.style.cursor = "pointer"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        447 +
                                                if shape_type == "shape-point":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        448 +
                                                    zone.style.cursor = "crosshair"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            449  
                                                    # Remove event listeners for selection
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            450  
                                                    for shape in document.getElementsByClassName("shape"):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            451  
                                                        print("Removing event listener from shape:", shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -767,6 +773,7 @@ def on_wheel(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            773  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            774  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            775  
                                            is_dragging = False
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        776 +
                                        drag_distance = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            777  
                                            start_x = 0
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            778  
                                            start_y = 0
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            779  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -779,22 +786,30 @@ def on_mouse_down(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            786  
                                                    is_dragging = True
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            787  
                                                    start_x = event.clientX
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            788  
                                                    start_y = event.clientY
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        789 +
                                                zoom_container.style.cursor = "grabbing"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            790  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            791  
                                            def on_mouse_move(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        784 -
                                            global translate_x, translate_y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        792 +
                                            global translate_x, translate_y, drag_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            793  
                                                if object_list.matches(":hover"):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            794  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            795  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        788 -
                                            if is_dragging:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        796 +
                                            if is_dragging and min(event.movementX, event.movementY) != 0:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        797 +
                                                drag_distance += abs(event.movementX) + abs(event.movementY)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            798  
                                                    translate_x += event.movementX
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            799  
                                                    translate_y += event.movementY
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            800  
                                                    update_transform()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            801  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            802  
                                            def on_mouse_up(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        794 -
                                            global is_dragging
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        803 +
                                            global is_dragging, drag_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        804 +
                                            if drag_distance:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        805 +
                                                # Don't click if the image was panned
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        806 +
                                                event.preventDefault()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        807 +
                                                event.stopPropagation()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            808  
                                                if object_list.matches(":hover"):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            809  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            810  
                                                is_dragging = False
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        811 +
                                            drag_distance = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        812 +
                                            zoom_container.style.cursor = "grab"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            813  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            814  
                                            last_touch_positions = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            815  
                                            last_touch_distance = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -884,7 +899,7 @@ def zoom_out(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            899  
                                            zoom_container.addEventListener("wheel", on_wheel)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            900  
                                            zoom_container.addEventListener("mousedown", on_mouse_down)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            901  
                                            document.addEventListener("mousemove", on_mouse_move)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        887 -
                                        document.addEventListener("mouseup", on_mouse_up)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        902 +
                                        document.addEventListener("click", on_mouse_up)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            903  
                                            zone.addEventListener("touchstart", on_touch_start)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            904  
                                            zone.addEventListener("touchmove", on_touch_move)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            905  
                                            zone.addEventListener("touchend", on_touch_end)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -871,3 +871,11 @@ body.fixed-content-area > main {

                                
                                
                                
                            
                                
                                    
                                        
                                            871  
                                                width: 7ch;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            872  
                                                text-align: right;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            873  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        874 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        875 +
                                        #annotation-zoom-container {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        876 +
                                            cursor: grab;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        877 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        878 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        879 +
                                        #object-types {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        880 +
                                            cursor: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        881 +
                                        }