changeset 596:0b282bf7ff63 annotations

making the label a text area
author Sebastien Jodogne <s.jodogne@gmail.com>
date Mon, 07 Sep 2026 11:28:33 +0200
parents ea5cfc37aac7
children 008409bc9978
files ViewerPlugin/WebApplication/viewer.html ViewerPlugin/WebApplication/viewer.js
diffstat 2 files changed, 34 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/ViewerPlugin/WebApplication/viewer.html	Mon Sep 07 11:02:04 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.html	Mon Sep 07 11:28:33 2026 +0200
@@ -438,12 +438,27 @@
                   <span class="text-muted small flex-shrink-0" style="width:5em">{{prop.label}}</span>
                   <span class="text-break small">{{prop.value}}</span>
                 </div>
+                <div v-else-if="prop.type === 'readonly-textarea'" class="d-flex align-items-start border-bottom py-1 gap-2">
+                  <label class="text-muted small flex-shrink-0 mt-1 mb-0" style="width:5em">{{prop.label}}</label>
+                  <textarea class="form-control form-control-sm small flex-grow-1"
+                            rows="3"
+                            readonly
+                            style="background-color: transparent;"
+                            v-model="prop.value"></textarea>
+                </div>
                 <div v-else-if="prop.type === 'editable'" class="d-flex align-items-center border-bottom py-1 gap-2">
                   <label class="text-muted small flex-shrink-0 mb-0" style="width:5em">{{prop.label}}</label>
                   <input type="text" class="form-control form-control-sm small flex-grow-1"
                          v-model="prop.value"
                          v-on:change="UpdateAnnotationProperty(prop)">
                 </div>
+                <div v-else-if="prop.type === 'editable-textarea'" class="d-flex align-items-start border-bottom py-1 gap-2">
+                  <label class="text-muted small flex-shrink-0 mt-1 mb-0" style="width:5em">{{prop.label}}</label>
+                  <textarea class="form-control form-control-sm small flex-grow-1"
+                            rows="3"
+                            v-model="prop.value"
+                            v-on:change="UpdateAnnotationProperty(prop)"></textarea>
+                </div>
                 <div v-else-if="prop.type === 'dropdown'" class="d-flex align-items-center border-bottom py-1 gap-2">
                   <label class="text-muted small flex-shrink-0 mb-0" style="width:5em">{{prop.label}}</label>
                   <select class="form-select form-select-sm small flex-grow-1"
--- a/ViewerPlugin/WebApplication/viewer.js	Mon Sep 07 11:02:04 2026 +0200
+++ b/ViewerPlugin/WebApplication/viewer.js	Mon Sep 07 11:28:33 2026 +0200
@@ -418,6 +418,14 @@
       });
     },
 
+    AddReadOnlyTextAreaProperty: function(label, value) {
+      this.annotationProperties.push({
+        type: 'readonly-textarea',
+        label: label,
+        value: value
+      });
+    },
+
     AddEditableProperty: function(label, value, featureProp) {
       this.annotationProperties.push({
         type: 'editable',
@@ -427,6 +435,15 @@
       });
     },
 
+    AddTextAreaProperty: function(label, value, featureProp) {
+      this.annotationProperties.push({
+        type: 'editable-textarea',
+        label: label,
+        value: value,
+        featureProp: featureProp
+      });
+    },
+
     AddDropdownProperty: function(label, options, selectedValue, featureProp) {
       this.annotationProperties.push({
         type: 'dropdown',
@@ -1083,9 +1100,9 @@
 
           if (that.drawSource !== null &&
               that.drawSource.hasFeature(feature)) {
-            that.AddEditableProperty('Label', feature.get('label') || '', 'label');
+            that.AddTextAreaProperty('Label', feature.get('label') || '', 'label');
           } else {
-            that.AddReadOnlyProperty('Label', feature.get('label') || '');
+            that.AddReadOnlyTextAreaProperty('Label', feature.get('label') || '');
           }
 
           /*