Fix touch zoom

static/picture-annotation.py

@@ -4,6 +4,7 @@ from pyscript import document, fetch as pyfetch

                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                            from pyscript.ffi import create_proxy
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            import asyncio
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                            import json
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                        import math
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            document.getElementById("shape-options").style.display = "flex"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -826,8 +827,8 @@ def on_touch_start(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            827  
                                                if event.touches.length == 2:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            828  
                                                    event.preventDefault()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            829  
                                                    last_touch_positions = [
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        829 -
                                                    (event.touches[0].clientX, event.touches[0].clientY),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        830 -
                                                    (event.touches[1].clientX, event.touches[1].clientY)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        830 +
                                                    ((event.touches[0].clientX - zone.getBoundingClientRect().left) / scale, (event.touches[0].clientY - zone.getBoundingClientRect().top) / scale),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        831 +
                                                    ((event.touches[1].clientX - zone.getBoundingClientRect().left) / scale, (event.touches[1].clientY - zone.getBoundingClientRect().top) / scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            832  
                                                    ]
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            833  
                                                    last_touch_distance = calculate_distance(event.touches)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            834  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -839,15 +840,17 @@ def on_touch_move(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            840  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            841  
                                                    # Finger positions.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            842  
                                                    current_positions = [
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        842 -
                                                    (event.touches[0].clientX, event.touches[0].clientY),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        843 -
                                                    (event.touches[1].clientX, event.touches[1].clientY)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        843 +
                                                    ((event.touches[0].clientX - zone.getBoundingClientRect().left) / scale, (event.touches[0].clientY - zone.getBoundingClientRect().top) / scale),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        844 +
                                                    ((event.touches[1].clientX - zone.getBoundingClientRect().left) / scale, (event.touches[1].clientY - zone.getBoundingClientRect().top) / scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            845  
                                                    ]
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            846  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            847  
                                                    current_distance = calculate_distance(event.touches)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            848  
                                                    # Ignore small movements.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        848 -
                                                if abs(current_distance - last_touch_distance) > 16:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        849 +
                                                if last_touch_distance and abs(current_distance - last_touch_distance) > min(image.width, image.height) / 64:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            850  
                                                        zoom_factor = current_distance / last_touch_distance
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            851  
                                                        new_scale = max(0.0625, min(64, scale * zoom_factor))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        852 +
                                                    scale_exponent = math.log2(new_scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        853 +
                                                    zoom_slider.value = scale_exponent
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            854  
                                                    else:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            855  
                                                        new_scale = scale
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            856  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -859,8 +862,11 @@ def on_touch_move(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            862  
                                                    tx, ty = compute_zoom_translation_around_point(zone, midpoint_x, midpoint_y, scale, new_scale)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            863  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            864  
                                                    # Compute translation for panning.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        862 -
                                                delta_x = sum(p[0] - lp[0] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        863 -
                                                delta_y = sum(p[1] - lp[1] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        865 +
                                                if last_touch_positions:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        866 +
                                                    delta_x = sum(p[0] - lp[0] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        867 +
                                                    delta_y = sum(p[1] - lp[1] for p, lp in zip(current_positions, last_touch_positions)) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        868 +
                                                else:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        869 +
                                                    delta_x = delta_y = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            870  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            871  
                                                    translate_x += delta_x - tx
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            872  
                                                    translate_y += delta_y - ty
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -825,12 +825,13 @@ nav .button-flat .ripple-pad {

                                
                                
                                
                            
                                
                                    
                                        
                                            825  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            826  
                                            #annotation-zoom-container {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            827  
                                                flex: 1 1 auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        828 -
                                            overflow: scroll;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        828 +
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            829  
                                                align-self: stretch;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            830  
                                                width: 100%;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            831  
                                                display: flex;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            832  
                                                justify-content: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            833  
                                                align-items: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        834 +
                                            touch-action: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            835  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            836  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            837  
                                            #annotation-zoom-container > #annotation-zone {