Merge pull request 3liz#3934 from nboisteault/finish-text-draw

Finish text draw
nboisteault · Oct 23, 2023 · 035bf17 · 035bf17
2 parents 1358bbc + 86b81b1
commit 035bf17
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/assets/src/components/Digitizing.js b/assets/src/components/Digitizing.js
@@ -154,7 +154,10 @@ export default class Digitizing extends HTMLElement {
                     <span class="file-name"></span>
                 </div>
             </div>
-            <div class="digitizing-constraints ${mainLizmap.digitizing.hasMeasureVisible ? '' : 'hide'}">
+            <div class="digitizing-constraints ${mainLizmap.digitizing.hasConstraintsPanelVisible ? '' : 'hide'}">
+                <details>
+                    <summary>${lizDict['digitizing.constraint.title']}</summary>${lizDict['digitizing.constraint.details']}
+                </details>
                 <div class="input-append">
                     <input type="number" placeholder="${lizDict['digitizing.constraint.distance']}" class="distance" min="0" @input=${(event)=> mainLizmap.digitizing.distanceConstraint = event.target.value}>
                     <span class="add-on">m</span>
@@ -165,17 +168,19 @@ export default class Digitizing extends HTMLElement {
                 </div>
             </div>
             <form class="digitizing-text-tools ${mainLizmap.digitizing.editedFeatures.length ? '' : 'hide'}">
-                <fieldset>
-                    <legend>${lizDict['digitizing.toolbar.text']}</legend>
-                    <textarea placeholder="${lizDict['digitizing.toolbar.newText']}" .value=${mainLizmap.digitizing.editedFeatureText} @input=${ event=> mainLizmap.digitizing.editedFeatureText = event.target.value}></textarea>
-                    <div class='digitizing-text-rotation'>
-                        <div class="input-append">
-                            <input type="number" class="input-small" placeholder="${lizDict['digitizing.toolbar.textRotation']}" .value=${mainLizmap.digitizing.editedFeatureTextRotation} @input=${ event => { mainLizmap.digitizing.editedFeatureTextRotation = parseInt(event.target.value) }}>
-                            <span class="add-on">°</span>
-                        </div>
+                <details>
+                    <summary>${lizDict['digitizing.toolbar.text']}</summary>${lizDict['digitizing.toolbar.text.hint']}
+                </details>
+                <textarea placeholder="${lizDict['digitizing.toolbar.newText']}" .value=${mainLizmap.digitizing.editedFeatureText} @input=${ event=> mainLizmap.digitizing.editedFeatureText = event.target.value}></textarea>
+                <div class='digitizing-text-rotation'>
+                    <label for="textRotation">${lizDict['digitizing.toolbar.textRotation']}</label>
+                    <div class="input-append">
+                        <input id="textRotation" type="number" class="input-mini" .value=${mainLizmap.digitizing.editedFeatureTextRotation} @input=${ event => { mainLizmap.digitizing.editedFeatureTextRotation = parseInt(event.target.value) }}>
+                        <span class="add-on">°</span>
                     </div>
-                    <input type="number" min="1" class="input-small" placeholder="${lizDict['digitizing.toolbar.textScale']}" .value=${mainLizmap.digitizing.editedFeatureTextScale} @input=${ event => { mainLizmap.digitizing.editedFeatureTextScale = parseInt(event.target.value) }}>
-                </fieldset>
+                </div>
+                <label for="textScale">${lizDict['digitizing.toolbar.textScale']}</label>
+                <input id="textScale" type="number" min="1" class="input-mini" .value=${mainLizmap.digitizing.editedFeatureTextScale} @input=${ event => { mainLizmap.digitizing.editedFeatureTextScale = parseInt(event.target.value) }}>
             </form>
         </div>`;
 

diff --git a/assets/src/modules/Digitizing.js b/assets/src/modules/Digitizing.js
@@ -14,7 +14,7 @@ import { Vector as VectorSource } from 'ol/source.js';
 import { Vector as VectorLayer } from 'ol/layer.js';
 import { Feature } from 'ol';
 
-import { Point, LineString, Polygon, Circle as CircleGeom } from 'ol/geom.js';
+import { Point, LineString, Polygon, Circle as CircleGeom, MultiPoint } from 'ol/geom.js';
 import { circular } from 'ol/geom/Polygon.js';
 
 import { getArea, getLength } from 'ol/sphere.js';
@@ -108,6 +108,24 @@ export default class Digitizing {
                             width: this._strokeWidth
                         }),
                     }),
+                    new Style({
+                        image: new Circle({
+                            radius: 5,
+                            fill: new Fill({
+                                color: color,
+                            }),
+                        }),
+                        geometry: feature => {
+                            const geometryType = feature.getGeometry().getType();
+                            if (geometryType === "LineString") {
+                                return new MultiPoint(feature.getGeometry().getCoordinates());
+                            }
+                            if (geometryType === "Polygon") {
+                                // return the coordinates of the first ring of the polygon
+                                return new MultiPoint(feature.getGeometry().getCoordinates()[0]);
+                            }
+                        },
+                    }),
                 ];
             }
         });
@@ -295,9 +313,9 @@ export default class Digitizing {
 
     get editedFeatureTextScale() {
         if (this.editedFeatures.length !== 0) {
-            return this.editedFeatures[0].get('scale') || '';
+            return this.editedFeatures[0].get('scale') || 1;
         }
-        return '';
+        return 1;
     }
 
     set editedFeatureTextScale(scale) {
@@ -582,6 +600,10 @@ export default class Digitizing {
         mainEventDispatcher.dispatch('digitizing.measure');
     }
 
+    get hasConstraintsPanelVisible() {
+        return this._hasMeasureVisible && ['line', 'polygon'].includes(this.toolSelected);
+    }
+
     get isSaved() {
         return this._isSaved;
     }

diff --git a/lizmap/modules/view/locales/en_US/dictionnary.UTF-8.properties b/lizmap/modules/view/locales/en_US/dictionnary.UTF-8.properties
@@ -198,7 +198,8 @@ digitizing.toolbar.point=Point
 digitizing.toolbar.line=Line
 digitizing.toolbar.polygon=Polygon
 digitizing.toolbar.freehand=Free hand
-digitizing.toolbar.text=Text
+digitizing.toolbar.text=Object labelling
+digitizing.toolbar.text.hint=You can change the label text content, size and rotation for the selected objects.
 digitizing.toolbar.newText=New text
 digitizing.toolbar.textRotation=Rotation
 digitizing.toolbar.textScale=Size
@@ -209,6 +210,8 @@ digitizing.confirme.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Measures
 
+digitizing.constraint.title=Constraints
+digitizing.constraint.details=You can constrain digitizing by setting values for the distance of the current segment and the angle between the last segment and the current segment.
 digitizing.constraint.distance=Distance
 digitizing.constraint.angle=Angle
 

diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
@@ -2672,6 +2672,12 @@ input[type="color"].digitizing-color{
   font-size: x-large;
 }
 
+lizmap-digitizing details {
+  padding: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
 .digitizing-text{
   font-weight: bold;
 }
@@ -2680,6 +2686,12 @@ input[type="color"].digitizing-color{
   margin-top: 5px;
 }
 
+.digitizing-text-tools label{
+  display: inline-block;
+  width: 50px;
+  text-align: right;
+}
+
 .ol-tooltip {
   position: relative;
   background: rgba(0, 0, 0, 0.5);