Zoom around point

static/picture-annotation.py

@@ -693,7 +693,7 @@ translate_x = 0

                                
                                
                                
                            
                                
                                    
                                        
                                            693  
                                            translate_y = 0
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            694  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            695  
                                            def update_transform():
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        696 -
                                            zone.style.transform = f"scale({scale}) translate({translate_x}px, {translate_y}px)"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        696 +
                                            zone.style.transform = f"translate({translate_x}px, {translate_y}px) scale({scale}) "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            697  
                                                object_list.style.transform = f"scale({1/scale})"   # neutralise the zoom
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            698  
                                                vertical_ruler.style.transform = f"scale({1/scale})"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            699  
                                                horizontal_ruler.style.transform = f"scale({1/scale})"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -713,6 +713,21 @@ scale_exponent = 0

                                
                                
                                
                            
                                
                                    
                                        
                                            713  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            714  
                                            zoom_offset = (0, 0)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            715  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        716 +
                                        def compute_zoom_translation_around_point(element, x, y, sc, nsc):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        717 +
                                            rect = element.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        718 +
                                            # The difference in size between the new and old scales.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        719 +
                                            size_difference_x = (nsc - sc) * image.width
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        720 +
                                            size_difference_y = (nsc - sc) * image.height
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        721 +
                                            width = rect.width / sc
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        722 +
                                            height = rect.height / sc
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        723 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        724 +
                                            # (size difference) * ((cursor position) / (image size) - (transform origin))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        725 +
                                            tx = size_difference_x * (x / width - 0.5)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        726 +
                                            ty = size_difference_y * (y / height - 0.5)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        727 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        728 +
                                            return tx, ty
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        729 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        730 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            731  
                                            def on_wheel(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            732  
                                                global scale, scale_exponent, translate_x, translate_y
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            733  
                                                if object_list.matches(":hover"):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -720,9 +735,24 @@ def on_wheel(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            735  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            736  
                                                event.preventDefault()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            737  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        738 +
                                            rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        739 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        740 +
                                            # Position of the cursor in the unscaled image.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        741 +
                                            mouse_x = (event.clientX - rect.left) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        742 +
                                            mouse_y = (event.clientY - rect.top) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        743 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            744  
                                                # Adjust scale exponent and compute new scale.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            745  
                                                scale_exponent += (-1 if event.deltaY > 0 else 1) / 4
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            746  
                                                new_scale = 2 ** scale_exponent
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        747 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        748 +
                                            # Limit the scale to a reasonable range.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        749 +
                                            new_scale = max(0.0625, min(64, new_scale))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        750 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        751 +
                                            # Compute the new translation.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        752 +
                                            offset_x, offset_y = compute_zoom_translation_around_point(zone, mouse_x, mouse_y, scale, new_scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        753 +
                                            translate_x -= offset_x
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        754 +
                                            translate_y -= offset_y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        755 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            756  
                                                scale = new_scale
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            757  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            758  
                                                update_transform()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -748,8 +778,8 @@ def on_mouse_move(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            778  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            779  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            780  
                                                if is_dragging:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        751 -
                                                translate_x += event.movementX / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        752 -
                                                translate_y += event.movementY / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        781 +
                                                translate_x += event.movementX
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        782 +
                                                translate_y += event.movementY
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            783  
                                                    update_transform()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            784  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            785  
                                            def on_mouse_up(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -758,8 +788,16 @@ def on_mouse_up(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            788  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            789  
                                                is_dragging = False
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            790  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        791 +
                                        last_touch_positions = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        792 +
                                        last_touch_distance = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        793 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        794 +
                                        def calculate_distance(touches):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        795 +
                                            dx = touches[1].clientX - touches[0].clientX
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        796 +
                                            dy = touches[1].clientY - touches[0].clientY
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        797 +
                                            return (dx**2 + dy**2) ** 0.5
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        798 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            799  
                                            def on_touch_start(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        762 -
                                            global last_touch_positions
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        800 +
                                            global last_touch_positions, last_touch_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            801  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            802  
                                                if event.touches.length == 2:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            803  
                                                    event.preventDefault()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -767,9 +805,10 @@ def on_touch_start(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            805  
                                                        (event.touches[0].clientX, event.touches[0].clientY),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            806  
                                                        (event.touches[1].clientX, event.touches[1].clientY)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            807  
                                                    ]
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        808 +
                                                last_touch_distance = calculate_distance(event.touches)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            809  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            810  
                                            def on_touch_move(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        772 -
                                            global translate_x, translate_y, last_touch_positions
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        811 +
                                            global translate_x, translate_y, scale, last_touch_positions, last_touch_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            812  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            813  
                                                if event.touches.length == 2:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            814  
                                                    event.preventDefault()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -779,20 +818,38 @@ def on_touch_move(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            818  
                                                        (event.touches[1].clientX, event.touches[1].clientY)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            819  
                                                    ]
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            820  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        821 +
                                                current_distance = calculate_distance(event.touches)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        822 +
                                                zoom_factor = current_distance / last_touch_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        823 +
                                                new_scale = max(0.0625, min(64, scale * zoom_factor))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        824 +
                                                scale_factor = new_scale / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        825 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        826 +
                                                midpoint_x = (current_positions[0][0] + current_positions[1][0]) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        827 +
                                                midpoint_y = (current_positions[0][1] + current_positions[1][1]) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        828 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        829 +
                                                rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        830 +
                                                content_mid_x = (midpoint_x - rect.left - translate_x) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        831 +
                                                content_mid_y = (midpoint_y - rect.top - translate_y) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        832 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        833 +
                                                translate_x = midpoint_x - content_mid_x * new_scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        834 +
                                                translate_y = midpoint_y - content_mid_y * new_scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        835 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            836  
                                                    delta_x = sum(p[0] - lp[0] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            837  
                                                    delta_y = sum(p[1] - lp[1] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            838  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            839  
                                                    translate_x += delta_x
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            840  
                                                    translate_y += delta_y
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            841  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        842 +
                                                scale = new_scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            843  
                                                    last_touch_positions = current_positions
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        844 +
                                                last_touch_distance = current_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            845  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            846  
                                                    update_transform()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            847  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            848  
                                            def on_touch_end(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        793 -
                                            global last_touch_positions
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        794 -
                                            if event.touches.length == 0:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        849 +
                                            global last_touch_positions, last_touch_distance
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        850 +
                                            if event.touches.length < 2:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            851  
                                                    last_touch_positions = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        852 +
                                                last_touch_distance = None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            853  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            854  
                                            zoom_container.addEventListener("wheel", on_wheel)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            855  
                                            zoom_container.addEventListener("mousedown", on_mouse_down)