Mercurial > hg > orthanc-wsi

changeset 469:0bf4bee8a257 annotations

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layout of right panel
author Sebastien Jodogne <s.jodogne@gmail.com>
date Tue, 04 Aug 2026 09:36:17 +0200
parents 4d59cee2d59d
children a25ff065ebef
files ViewerPlugin/WebApplication/viewer.html ViewerPlugin/WebApplication/viewer.js
diffstat 2 files changed, 25 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/ViewerPlugin/WebApplication/viewer.html	Tue Aug 04 08:10:25 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.html	Tue Aug 04 09:36:17 2026 +0200
@@ -137,7 +137,9 @@
                   data-bs-toggle="tooltip" data-bs-placement="bottom" title="Draw freehand figure">
             <i class="bi bi-pencil"></i>
           </button>
+        </div>
 
+        <div class="btn-group" role="group">
           <button type="button" class="btn btn-outline-secondary icon-btn" id="btn-delete-annotation"
                   data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete selected annotation">
             <i class="bi bi-trash"></i>
@@ -184,11 +186,13 @@
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
       </div>
       <div class="offcanvas-body">
-        <button class="btn btn-primary w-100 mb-2" id="btn-focus-annotation"
-                style="display:none">
-          <i class="bi bi-arrows-fullscreen me-2 align-middle"></i> Focus on annotation
-        </button>
-        <div id="annotation-info"></div>
+        <div id="annotation-info">
+          <h5>Current selection</h5>
+          <button class="btn btn-primary w-100 mb-2" id="btn-focus-annotation">
+            <i class="bi bi-arrows-fullscreen me-2 align-middle"></i> Focus on annotation
+          </button>
+          <div id="annotation-properties"></div>
+        </div>
       </div>
     </div>
 
@@ -232,21 +236,21 @@
     <template id="tpl-readonly-property">
       <div class="d-flex align-items-baseline border-bottom py-1 gap-2">
         <span class="text-muted small flex-shrink-0 prop-label" style="width:8em"></span>
-        <span class="text-break prop-value"></span>
+        <span class="text-break small prop-value"></span>
       </div>
     </template>
 
     <template id="tpl-editable-property">
       <div class="d-flex align-items-center border-bottom py-1 gap-2">
         <label class="text-muted small flex-shrink-0 mb-0" style="width:8em"></label>
-        <input type="text" class="form-control form-control-sm flex-grow-1">
+        <input type="text" class="form-control form-control-sm small flex-grow-1">
       </div>
     </template>
 
     <template id="tpl-dropdown-property">
       <div class="d-flex align-items-center border-bottom py-1 gap-2">
         <label class="text-muted small flex-shrink-0 mb-0" style="width:8em"></label>
-        <select class="form-select form-select-sm flex-grow-1"></select>
+        <select class="form-select form-select-sm small flex-grow-1"></select>
       </div>
     </template>
 
--- a/ViewerPlugin/WebApplication/viewer.js	Tue Aug 04 08:10:25 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.js	Tue Aug 04 09:36:17 2026 +0200
@@ -286,7 +286,7 @@
   var row = $(($('#tpl-readonly-property')[0].content.cloneNode(true)).firstElementChild);
   row.find('.prop-label').text(label);
   row.find('.prop-value').text(value);
-  $('#annotation-info').append(row);
+  $('#annotation-properties').append(row);
 }
 
 
@@ -299,7 +299,7 @@
   if (onChange) {
     input.on('change', function() { onChange($(this).val()); });
   }
-  $('#annotation-info').append(row);
+  $('#annotation-properties').append(row);
 }
 
 
@@ -316,7 +316,7 @@
   if (onChange) {
     select.on('change', function() { onChange($(this).val()); });
   }
-  $('#annotation-info').append(row);
+  $('#annotation-properties').append(row);
 }
 
 
@@ -425,7 +425,7 @@
     map.removeInteraction(selectAnnotation);
     $('.icon-btn').removeClass('active');
     map.getViewport().style.cursor = '';
-    $('#annotation-info').empty();
+    $('#annotation-info').hide();
   }
 
   function activateDrawTool(btn, interaction, cursor) {
@@ -449,14 +449,19 @@
   $('#btn-draw-freehand').on('click', function() { activateDrawTool($(this), drawFreehand, 'crosshair'); });
 
   selectAnnotation.on('select', function(e) {
-    $('#annotation-info').empty();
+    $('#annotation-properties').empty();
+
     if (e.selected.length === 1) {
+      $('#annotation-info').show();
+
       var feature = e.selected[0];
       var geometry = feature.getGeometry();
-      $('#btn-focus-annotation').show().off('click').on('click', function() {
+
+      $('#btn-focus-annotation').off('click').on('click', function() {
         bootstrap.Offcanvas.getOrCreateInstance($('#right-panel')[0]).hide();
         map.getView().fit(geometry.getExtent(), { padding: [40, 40, 40, 40], duration: 300 });
       });
+
       if (geometry.getType() === 'LineString') {
         AddReadOnlyProperty('Length', FormatLength(geometry, map.getView().getProjection()));
       } else {
@@ -477,7 +482,7 @@
       }
       bootstrap.Offcanvas.getOrCreateInstance($('#right-panel')[0]).show();
     } else {
-      $('#btn-focus-annotation').hide();
+      $('#annotation-info').hide();
     }
   });
 
@@ -507,7 +512,7 @@
       drawSource.removeFeature(feature);
     });
     selected.clear();
-    $('#annotation-info').empty();
+    $('#annotation-info').hide();
     deleteModal.hide();
   });
 }