Consistent region look

static/style.css

@@ -137,11 +137,11 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            137  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            138  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            139  
                                            .shape-label {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        140 -
                                            font-size: 1.5rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        140 +
                                            position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            141  
                                                font-weight: 500;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            142  
                                                color: var(--color-shape-label-text);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        143 -
                                            pointer-events: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        144 -
                                            height: 32px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        143 +
                                            pointer-events: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        144 +
                                            height: 28px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            145  
                                                padding-left: 8px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            146  
                                                padding-right: 8px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            147  
                                                display: flex;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -161,7 +161,7 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            161  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            162  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            163  
                                            /* Only show region parts when checkbox is checked */
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        164 -
                                        #annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        164 +
                                        #annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            165  
                                                opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            166  
                                                transform: scale(1);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            167  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -306,3 +306,11 @@ small {

                                
                                
                                
                            
                                
                                    
                                        
                                            306  
                                                gap: 1em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            307  
                                                width: 100%;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            308  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        309 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        310 +
                                        .thumbnail-list {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        311 +
                                            list-style: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        312 +
                                            margin: 0 !important;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        313 +
                                            display: grid;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        314 +
                                            grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        315 +
                                            gap: 16px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        316 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture.html

@@ -2,11 +2,9 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            {% block title %}Picture {{ resource.title }} | gigadata{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            {% macro shape_label(x, y, text) %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                                {% if text %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 -
                                                <foreignObject height="100%" width="100%" x="{{ x * size[0] }}" y="{{ y * size[1] }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 -
                                                    <div class="shape-label">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                                        {{ text }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 -
                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 -
                                                </foreignObject>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                                <div class="shape-label" style="left: {{ x * 100 }}%; top: {{ y * 100 }}%">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                    {{ text }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                                {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            {% endmacro %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -34,7 +32,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                                                    ></rect>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                                    {% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            34  
                                                                    {% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 -
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            35  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            36  
                                                            {% elif region.json.type == "polygon" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -45,7 +42,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                                    {% set right = region.json.shape | sort(attribute='x') | last %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                                                    {% set centre_x = (left.x + right.x) / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                                                    {% set centre_y = (top.y + bottom.y) / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 -
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                                            {% elif region.json.type == "polyline" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -53,14 +49,13 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                                                    {# Median point #}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                                                    {% set centre_x = region.json.shape | map(attribute="x") | median %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                                    {% set centre_y = region.json.shape | map(attribute="y") | median %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 -
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                                            {% elif region.json.type == "point" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                                                    <circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                                {{ shape_label(region.json.shape.x, region.json.shape.y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                            {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                                        {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                                        {% endfor %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            61  
                                                    <x-buttonbox>