@geogirafe/lib-geoportal 1.2.0-dev.2750042516 → 1.2.0-dev.2751114005

package/LICENSE

@@ -246,6 +246,7 @@ From:
 - https://www.svgrepo.com/svg/310166/thumb-dislike
 - https://www.svgrepo.com/svg/309871/photo-filter
 - https://www.svgrepo.com/svg/309651/full-screen-zoom
+- https://www.svgrepo.com/svg/310134/text-font
 
 
 The MIT License (MIT)

package/assets/i18n/de.json

@@ -524,6 +524,8 @@
     "system": "System",
     "Take measure": "Messen",
     "Test for Translation": "Test für Übersetzung",
+    "Text": "Text",
+    "Text to draw": "Zu zeichnender Text",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Vielen Dank für Ihre Nachricht. Falls erforderlich, wird sich so schnell wie möglich jemand mit Ihnen in Verbindung setzen.",
     "The CSV export has been truncated to the maximum number of features allowed for download": "Der CSV-Export wurde auf die maximal zulässige Anzahl herunterladbarer Objekte begrenzt.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Der folgende Link wird mit Ihrer Nachricht gesendet. Er enthält Ihre aktuelle Konfiguration und hilft uns, Ihr Problem zu verstehen.",

package/assets/i18n/en.json

@@ -527,6 +527,8 @@
     "system": "System",
     "Take measure": "Take measure",
     "Test for Translation": "Test for Translation",
+    "Text": "Text",
+    "Text to draw": "Text to draw",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Thanks for your message. If necessary, someone will get in touch with you as soon as possible.",
     "The CSV export has been truncated to the maximum number of features allowed for download": "The CSV export has been truncated to the maximum number of features allowed for download.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.",

package/assets/i18n/fr.json

@@ -524,6 +524,8 @@
     "system": "Système",
     "Take measure": "Prendre une mesure",
     "Test for Translation": "Test de traduction",
+    "Text": "Texte",
+    "Text to draw": "Texte à dessiner",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Merci pour votre message. Si nécessaire, quelqu'un prendra contact avec vous dès que possible.",
     "The CSV export has been truncated to the maximum number of features allowed for download": "L’export CSV a été limité au nombre maximal d’entités autorisées au téléchargement.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Le lien ci-dessous sera envoyé avec votre message. Il contient votre configuration courante et nous aidera à analyser votre demande.",

package/assets/i18n/it.json

@@ -524,6 +524,8 @@
     "system": "Sistema",
     "Take measure": "Prendi misura",
     "Test for Translation": "Test di traduzione",
+    "Text": "Testo",
+    "Text to draw": "Testo da disegnare",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Grazie per il tuo messaggio. Se necessario, qualcuno ti contatterà il prima possibile.",
     "The CSV export has been truncated to the maximum number of features allowed for download": "L'esportazione CSV è stata limitata al numero massimo di elementi consentiti per il download.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Il seguente link verrà inviato con il tuo messaggio. Contiene la tua configurazione attuale e ci aiuterà a capire il problema.",

package/assets/icons/text-font.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_text_font_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M14.503 6a.75.75 0 0 1 .697.474l5.555 14.03h.494a.75.75 0 0 1 0 1.5H18.75a.75.75 0 0 1 0-1.5h.392l-1.19-3.004h-6.91L9.85 20.504h.4a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 1 1 0-1.5h.486l5.57-14.03A.75.75 0 0 1 14.503 6m0 2.785L11.637 16h5.72zM7 2a.75.75 0 0 1 .703.49l3.187 8.619-.828 2.086-.627-1.694H4.564L3.45 14.51a.75.75 0 0 1-1.407-.521l4.253-11.5A.75.75 0 0 1 7 2m0 2.913L5.118 10h3.763z"/></svg>

package/components/drawing/component-mobile.js

@@ -14,7 +14,7 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
 button.selected{background-color:#daebff!important;border:1px solid #54a4ff!important}#toolbar{box-sizing:border-box;grid-template-columns:repeat(5,1fr);gap:20px;width:100%;display:grid}#toolbar>button{box-sizing:border-box;filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;padding:10px}#toolbar>button>img{opacity:.7;width:100%}.icon{width:1.5rem;height:1.5rem}.gg-icon-button:hover{background-color:#0000}#panel{font-size:1.5em}#drawingList{gap:10px}#drawingList .girafe{filter:drop-shadow(0 4px 7px #0004381c);background:#fff;border:none;border-radius:8px;padding:10px}#optionsTitle{text-align:center;filter:drop-shadow(0 4px 7px #0004381c);color:#4553ff;border-radius:8px;width:100%;margin-bottom:20px;padding:10px;font-size:1.6rem}.gg-input:hover{filter:drop-shadow(0 4px 7px #4c58ff70);background-color:#fff}#optionsColorLine{flex-direction:column;display:flex}#optionsColorLine>div{text-align:end;width:100%}.selectable-label{font-size:1.3em}#optionsNameFontSize,#optionsMeasuresFontSize,#optionsStrokeWidth,#line-style,#arrow-style,#arrow-position{text-align:right;border:1px solid #e3e3e3;padding:1px;font-size:1em}.popup.popup_top{translate:15px -15px}#optionsExportLine{display:none}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="label first" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="label" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="measureColorPicker"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="text-end" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>
+<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button> <button id="text" tip="Text" class="gg-icon-button gg-medium"><img alt="text icon" src="icons/text-font.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Text"><label class="gg-label" for="drawingText" i18n="Text to draw">Text to draw</label> <input id="drawingText" class="gg-input" value="${this.drawingText}" oninput="${(e) => this.drawingTextChangedHandler(e)}"></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="${this.isMeasureInformationEnabled() ? 'label first' : 'label first disabled'}" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" disabled="${!this.isMeasureInformationEnabled()}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="${this.isMeasureInformationEnabled() ? 'label' : 'label disabled'}" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" disabled="${!this.isMeasureInformationEnabled()}" oninput="${() => this.onOptionsChange()}"> <span class="${this.isMeasureInformationEnabled() ? 'unit' : 'unit disabled'}">pt</span> <button class="icon colorPicker" id="measureColorPicker" disabled="${!this.isMeasureInformationEnabled()}"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="${this.isStrokeColorEnabled() ? 'text-end' : 'text-end disabled'}" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" disabled="${!this.isStrokeColorEnabled()}" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineArrowEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/drawing/component.d.ts

@@ -44,6 +44,7 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     olDrawing: OlDrawing;
     cesiumDrawing: CesiumDrawing;
     fixedLengthEnabled: boolean;
+    drawingText: string;
     batchCreateMode: boolean;
     constructor(name?: string);
     render(): void;
@@ -55,6 +56,7 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     setTool(tool?: DrawingShape | null): void;
     showToolParameters(tool?: DrawingShape | null): void;
     protected fixedDimensionValueChangedHandler(e: CustomEvent): void;
+    protected drawingTextChangedHandler(e: Event): void;
     protected connectedCallback(): void;
     togglePanel(visible: boolean): void;
     get selectedFeatures(): DrawingFeature[];
@@ -67,8 +69,12 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     deactivateLayerInTreeAnMap(): void;
     protected getOptionsTitle(): string;
     protected isDisplayNameEnabled(): boolean;
-    protected isLineStyleEnabled(): boolean;
+    protected isLineArrowEnabled(): boolean;
     protected isFillColorEnabled(): boolean;
+    protected isStrokeColorEnabled(): boolean;
+    protected isLineStyleEnabled(): boolean;
+    protected isMeasureInformationEnabled(): boolean;
+    private selectedFeaturesHasTextFeature;
     deleteFeature(feature: DrawingFeature): Promise<void>;
     deleteAllFeatures(): Promise<void>;
     onOptionsChange(): void;
@@ -76,5 +82,6 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     toggleNameVisibility(): void;
     private warnWhenInWebMercator;
     exportSelectedFeatures(format: 'geojson' | 'kml' | 'gpx'): void;
+    private onRemovalRequested;
 }
 export {};

package/components/drawing/component.js

@@ -25,6 +25,7 @@ import visibleIcon from './assets/visible.svg?raw';
 import notVisibleIcon from './assets/notVisible.svg?raw';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
 import { UsedInTemplateOnly } from '../../decorators.js';
+import { noop } from '../../tools/utils/async.js';
 export const DrawingStateLocation = 'drawing';
 export default class DrawingComponent extends GirafeHTMLElement {
     templateUrl = null;
@@ -36,7 +37,7 @@ export default class DrawingComponent extends GirafeHTMLElement {
 input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var(--bkg-color-input);padding-right:0}input:focus{border:1px solid var(--lt-color-gray-900)}button{border:solid 1px var(--bkg-color);color:var(--text-color);background-color:var(--bkg-color);cursor:pointer;padding:0}button:hover{border:solid 1px var(--text-color-grad2)}button.selected{border:solid 1px var(--text-color-grad2);background-color:var(--bkg-color-grad1);color:var(--bkg-color)}#toolbar{flex-wrap:wrap;display:flex}.label-container{flex-grow:1}.text-end{text-align:end}.icon{width:1.2rem;height:1.2rem;fill:var(--text-color);flex-shrink:0;margin:3px}.icon:hover{fill:var(--text-color-grad2)}.gg-icon-button:hover{border:none}.colorPicker{border:1px solid var(--text-color);border-radius:5px}.picker_wrapper{transform:translate(-250px)}.picker_arrow{transform:translate(200px)rotate(90deg)scaleX(-1)!important}.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}fieldset.field-wrapper{border:0;margin:0;padding:0}#panel{height:100%;color:var(--text-color);flex-direction:column;display:flex}#panel>div{padding:1rem}#toolParametersContainer{& .title{margin-top:.5rem;margin-bottom:.75rem;display:inline-block}}.toolParameters{flex-direction:column;justify-content:left;row-gap:.25rem;display:flex}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto;padding-top:0!important;& .titleContainer{margin-bottom:1rem;display:flex;& .title{flex-grow:1;align-items:center;display:flex}}}#drawingList{flex-flow:column;gap:.15rem;display:flex}#drawingList .girafe{border:solid 1px var(--text-color);flex-wrap:wrap;align-items:center;padding:.3rem;display:flex;position:relative}#drawingList .girafe span{flex-grow:1;padding-left:5px}#options{box-shadow:0px -2px 3px -1px var(--text-color-grad1);z-index:100;flex-direction:column;display:flex;position:relative}#optionsTitle{text-align:center;margin-bottom:20px;font-size:1.2rem}#options hr{width:100%;margin:8px 0}#optionsTextLines,#optionsColorLine,#optionsLineLines{align-items:center;display:grid}#optionsText{margin:auto}#optionsTextLines{grid-template-columns:.825fr 2.5fr 1fr 4em .5fr .5fr}#optionsTextLines button:hover{border:none}#optionsColor,#optionsLine,#optionsExport,#optionsArrow{margin:auto}#optionsColorLine{display:flex}#optionsColorLine>div{align-items:center;width:100%;display:flex}#optionsLineLines,#optionsArrowStyle{grid-template-columns:3fr 4em 1fr auto}#optionsExportLine{grid-template-columns:60px 60px 45px 45px;gap:.2rem;display:flex}span.label{padding-left:.5rem;padding-right:.5rem;&.first{padding-left:0}}span.unit{padding-left:.5rem}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="label first" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="label" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="measureColorPicker"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="text-end" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>
+<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="panel"><div><div id="toolbar"><button id="disable" tip="Disable drawing" class="gg-icon-button gg-medium"><img alt="select icon" src="icons/arrow.svg"></button> <button id="point" tip="Point" class="gg-icon-button gg-medium"><img alt="point icon" src="icons/point.svg"></button> <button id="line" tip="Line" class="gg-icon-button gg-medium"><img alt="polyline icon" src="icons/polyline.svg"></button> <button id="polygon" tip="Polygon" class="gg-icon-button gg-medium"><img alt="polygon icon" src="icons/polygon.svg"></button> <button id="square" tip="Square" class="gg-icon-button gg-medium"><img alt="square icon" src="icons/square.svg"></button> <button id="rectangle" tip="Rectangle" class="gg-icon-button gg-medium"><img alt="rectangle icon" src="icons/rectangle.svg"></button> <button id="circle" tip="Circle" class="gg-icon-button gg-medium"><img alt="circle icon" src="icons/circle.svg"></button> <button id="freeline" tip="Freehand line" class="gg-icon-button gg-medium"><img alt="polyline-free icon" src="icons/polyline-free.svg"></button> <button id="freepolygon" tip="Freehand polygon" class="gg-icon-button gg-medium"><img alt="polygon-free icon" src="icons/polygon-free.svg"></button> <button id="text" tip="Text" class="gg-icon-button gg-medium"><img alt="text icon" src="icons/text-font.svg"></button></div><div id="toolParametersContainer"><span i18n="Settings" class="title"></span><div class="toolParameters" data-tool="Polyline,Polygon"><girafe-fixed-dimension dimensionname="length" dimension="length" id="fixedLineLength" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Square"><girafe-fixed-dimension dimensionname="side length" dimension="side" id="fixedSquareSide" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Rectangle"><girafe-fixed-dimension dimensionname="width" dimension="width" id="fixedRectangleWidth" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension><girafe-fixed-dimension dimensionname="height" dimension="height" id="fixedRectangleHeight" @fixed-dimension:value-changed="${(e) => this.fixedDimensionValueChangedHandler(e)}"></girafe-fixed-dimension></div><div class="toolParameters" data-tool="Text"><label class="gg-label" for="drawingText" i18n="Text to draw">Text to draw</label> <input id="drawingText" class="gg-input" value="${this.drawingText}" oninput="${(e) => this.drawingTextChangedHandler(e)}"></div></div></div><div id="drawingListContainer"><div class="titleContainer"><span i18n="Drawing List" class="title"></span> <button class="gg-icon-button icon" tip="Delete all shapes" onclick="${() => this.deleteAllFeatures()}" ?disabled="${this.drawingState.features.length === 0}">${this.htmlUnsafe(this.trashIcon)}</button></div><div id="drawingList">${this.drawingState.features.map(feature => uHtmlFor(feature, feature.id) `<div id="${'f-' + feature.id}" class="girafe"><button id="${'f-select-' + feature.id}" class="gg-icon-button gg-small" tip="Select to change appearance" onclick="${() => this.onToggleFeatureSelection(feature)}"><div class="icon">${this.htmlUnsafe(feature.selected ? this.checkedIcon : this.noCheckedIcon)}</div></button><div class="label-container"><button class="${feature.selected ? 'selectable-label gg-icon-button gg-small gg-selected' : 'selectable-label gg-icon-button gg-small gg-opacity'}" onclick="${() => this.onToggleFeatureSelection(feature)}"><span id="${'f-name-' + feature.id}">${feature.name}</span></button></div><button class="gg-icon-button icon" tip="Center on shape" onclick="${() => this.olDrawing.centerViewOnFeature(feature)}">${this.htmlUnsafe(this.locateIcon)}</button> <button class="gg-icon-button icon" tip="Delete shape" onclick="${() => this.deleteFeature(feature)}">${this.htmlUnsafe(this.trashIcon)}</button></div>`)}</div></div><div id="options" class="${this.selectedFeatures.length > 0 ? '' : 'disabled'}"><fieldset class="field-wrapper" disabled="${this.selectedFeatures.length <= 0}"><input id="optionsTitle" value="${this.getOptionsTitle()}" class="gg-input" disabled="${this.selectedFeatures.length > 1}"><div id="optionsText"><div id="optionsTextLines"><span class="label first" i18n="Name">Name</span> <button class="gg-icon-button icon" id="visibleIconName" tip="Show or hide shape name" onclick="${() => this.toggleNameVisibility()}">${this.htmlUnsafe(this.isDisplayNameEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span class="label" i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span class="unit">pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span class="${this.isMeasureInformationEnabled() ? 'label first' : 'label first disabled'}" i18n="Measures">Measures</span> <select id="measure-information" class="gg-select" tip="${this.measureInformationTooltip}" disabled="${!this.isMeasureInformationEnabled()}" onchange="${() => this.onOptionsChange()}">${Object.entries(this.measureInformations).map((entry) => uHtml `<option selected="${this.selectedFeatureMeasureInformation === entry[0]}" value="${entry[0]}"><span i18n="${entry[1]}">${entry[0]}</span></option>`)}</select> <span class="${this.isMeasureInformationEnabled() ? 'label' : 'label disabled'}" i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" disabled="${!this.isMeasureInformationEnabled()}" oninput="${() => this.onOptionsChange()}"> <span class="${this.isMeasureInformationEnabled() ? 'unit' : 'unit disabled'}">pt</span> <button class="icon colorPicker" id="measureColorPicker" disabled="${!this.isMeasureInformationEnabled()}"></button></div></div><hr><div id="optionsColor"><div id="optionsColorLine"><div><span class="${this.isStrokeColorEnabled() ? 'text-end' : 'text-end disabled'}" i18n="Stroke color">Stroke color</span> <button class="icon colorPicker" disabled="${!this.isStrokeColorEnabled()}" id="strokePicker"></button></div><div><span class="${this.isFillColorEnabled() ? 'text-end' : 'text-end disabled'}" id="fillPickerSpan" i18n="Fill color">Fill color</span> <button class="icon colorPicker" disabled="${!this.isFillColorEnabled()}" id="fillPicker"></button></div></div></div><hr><div id="optionsLine"><div class="${this.isLineStyleEnabled() ? '' : 'disabled'}" id="optionsLineLines"><span i18n="Line width">Line width</span> <input id="optionsStrokeWidth" type="number" class="gg-input" min="1" value="${this.selectedFeatures[0]?.strokeWidth}" oninput="${() => this.onOptionsChange()}"> <span class="unit">px</span> <select id="line-style" class="gg-select" onchange="${() => this.onOptionsChange()}">${Object.entries(this.lineStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.lineStroke === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsArrow"><div class="${this.isLineArrowEnabled() ? '' : 'disabled'}" id="optionsArrowStyles"><span i18n="Arrows style">Arrows style</span> <select id="arrow-style" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowStyles).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowStyle === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select> <select id="arrow-position" class="gg-select" onchange="${() => this.onArrowsChange()}">${Object.entries(this.arrowPositions).map((entry) => uHtml `<option selected="${this.selectedFeatures[0]?.arrowPosition === entry[0]}" value="${entry[0]}"><span>${entry[1]}</span></option>`)}</select></div></div><hr><div id="optionsExport"><div id="optionsExportLine"><label for="export" class="gg-label" i18n="Export">Export</label> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('geojson')}">GeoJson</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('kml')}">KML</button> <button class="gg-button" onclick="${() => this.exportSelectedFeatures('gpx')}">GPX</button></div></div></fieldset></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;
@@ -60,7 +61,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         { id: 'polygon', tool: DrawingShape.Polygon },
         { id: 'circle', tool: DrawingShape.Disk },
         { id: 'freeline', tool: DrawingShape.FreehandPolyline },
-        { id: 'freepolygon', tool: DrawingShape.FreehandPolygon }
+        { id: 'freepolygon', tool: DrawingShape.FreehandPolygon },
+        { id: 'text', tool: DrawingShape.Text }
     ];
     toolSelected = null;
     arrowStyles = {
@@ -112,6 +114,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     olDrawing;
     cesiumDrawing;
     fixedLengthEnabled = false;
+    // Text used by the "Text" drawing tool for the shapes it creates.
+    drawingText = '';
     // Batch Create mode is currently not used. Batch mode allows the user to create multiple shapes without re-selecting
     //  the drawing tool. It possibly will be part of advanced drawing/editing tools.
     batchCreateMode = false;
@@ -168,6 +172,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.olDrawing.registerInteractions();
         if (this.state.globe.loaded)
             this.cesiumDrawing.registerInteractions();
+        this.subscribe(/layers\.layersList\..*\.removalRequested/, (oldValue, value, parents) => this.onRemovalRequested(oldValue, value, parents));
     }
     unregisterEvents() {
         this.olDrawing.unregisterInteractions();
@@ -228,6 +233,11 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 console.debug('Value changed for unknown Dimension with id', details.id);
         }
     }
+    drawingTextChangedHandler(e) {
+        this.drawingText = e.target.value;
+        this.olDrawing.setDrawingText(this.drawingText);
+        this.cesiumDrawing.setDrawingText(this.drawingText);
+    }
     connectedCallback() {
         super.connectedCallback();
         if (!this.state.extendedState[DrawingStateLocation]) {
@@ -244,6 +254,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.cesiumDrawing = new CesiumDrawing(map, DrawingStateLocation, this.context);
         this.render();
         this.subscribe(`extendedState.${DrawingStateLocation}.features`, (olds, news) => this.onFeaturesChanged(olds, news));
+        // Keep the shape list and the options in sync when the selection is changed in the map
+        this.subscribe(new RegExp(String.raw `extendedState.${DrawingStateLocation}.features.*\.selected`, 'g'), () => {
+            if (this.isPanelVisible) {
+                this.refreshRender();
+            }
+        });
         this.subscribe('projection', (olds, news) => this.onProjectionChanged(olds, news));
         this.subscribe('globe.loaded', () => {
             if (this.state.globe.loaded && this.isPanelVisible) {
@@ -258,6 +274,9 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     togglePanel(visible) {
         if (this.isPanelVisible == visible)
             return;
+        if (this.activeDrawingLayer?.removalRequested) {
+            this.deleteAllFeatures().then(noop);
+        }
         this.isPanelVisible = visible;
         if (this.isPanelVisible) {
             this.registerEvents();
@@ -369,11 +388,27 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     isDisplayNameEnabled() {
         return this.selectedFeatures.some((f) => f.displayName);
     }
-    isLineStyleEnabled() {
+    isLineArrowEnabled() {
         return this.selectedFeatures.some((f) => f.type == DrawingShape.Polyline || f.type == DrawingShape.FreehandPolyline);
     }
     isFillColorEnabled() {
-        return !this.selectedFeatures.every((f) => f.isPointOrPolyline());
+        return this.selectedFeatures.every((f) => f.type == DrawingShape.Polygon ||
+            f.type == DrawingShape.FreehandPolygon ||
+            f.type == DrawingShape.Disk ||
+            f.type == DrawingShape.Rectangle ||
+            f.type == DrawingShape.Square);
+    }
+    isStrokeColorEnabled() {
+        return !this.selectedFeaturesHasTextFeature();
+    }
+    isLineStyleEnabled() {
+        return !this.selectedFeaturesHasTextFeature();
+    }
+    isMeasureInformationEnabled() {
+        return !this.selectedFeaturesHasTextFeature();
+    }
+    selectedFeaturesHasTextFeature() {
+        return this.selectedFeatures.some((f) => f.type == DrawingShape.Text);
     }
     async deleteFeature(feature) {
         const confirm = await window.gConfirm('Do you want to remove "${feature.name}" ?', 'Delete Feature', (translatedMessage) => {
@@ -393,6 +428,9 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.drawingState.features = [];
             this.refreshRender();
         }
+        else {
+            this.activeDrawingLayer.removalRequested = false;
+        }
     }
     onOptionsChange() {
         const nameFontSize = parseInt(this.getById('optionsNameFontSize').value);
@@ -449,7 +487,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             case 'kml':
                 return download(new KML().writeFeatures(olFeatures, { featureProjection: this.state.projection }), fileName + '.kml', 'application/vnd.google-earth.kml+xml');
             case 'gpx':
-                if (this.selectedFeatures.some((f) => !f.isPointOrPolyline())) {
+                if (this.selectedFeatures.some((f) => !f.isPointPolylineOrText())) {
                     this.context.errorManager.pushMessage('export-gpx-error', 'The GPX format only supports points and polylines', 'warning');
                 }
                 else {
@@ -457,10 +495,18 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 }
         }
     }
+    onRemovalRequested(_oldValue, value, parents) {
+        if (value === true && parents.removalRequested) {
+            this.deleteAllFeatures().then(noop);
+        }
+    }
 }
 __decorate([
     UsedInTemplateOnly()
 ], DrawingComponent.prototype, "fixedDimensionValueChangedHandler", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "drawingTextChangedHandler", null);
 __decorate([
     UsedInTemplateOnly('Currently not used, will possibly be part of advanced editing/drawing tools')
 ], DrawingComponent.prototype, "onToggleBatchMode", null);
@@ -472,7 +518,16 @@ __decorate([
 ], DrawingComponent.prototype, "isDisplayNameEnabled", null);
 __decorate([
     UsedInTemplateOnly()
-], DrawingComponent.prototype, "isLineStyleEnabled", null);
+], DrawingComponent.prototype, "isLineArrowEnabled", null);
 __decorate([
     UsedInTemplateOnly()
 ], DrawingComponent.prototype, "isFillColorEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isStrokeColorEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isLineStyleEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isMeasureInformationEnabled", null);

package/components/treeview/treeviewitem/component.js

@@ -8,6 +8,7 @@ import LayerWmts from '../../../models/layers/layerwmts.js';
 import TreeViewElement from '../tools/treeviewelement.js';
 import { isSnappableLayer } from '../../../models/layers/snappablelayer.js';
 import WmsLegendHelper from '../../../tools/wms/wmslegendhelper.js';
+import LayerDrawing from '../../../models/layers/layerdrawing.js';
 class TreeViewItemComponent extends TreeViewElement {
     templateUrl = null;
     styleUrls = null;
@@ -224,8 +225,14 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.context.mapManager.zoomToExtent(this.layer.extent);
     }
     deleteLayer() {
-        this.context.layerManager.toggleLayer(this.layer, 'off');
-        this.removeFromParent();
+        if (this.layer instanceof LayerDrawing) {
+            this.layer.removalRequested = true;
+            this.context.stateManager.state.interface.drawingPanelVisible = true;
+        }
+        else {
+            this.context.layerManager.toggleLayer(this.layer, 'off');
+            this.removeFromParent();
+        }
     }
     connectedCallback() {
         super.connectedCallback();

package/models/layers/layerdrawing.d.ts

@@ -2,6 +2,7 @@ import Layer from './layer.js';
 import VectorLayer from 'ol/layer/Vector.js';
 export default class LayerDrawing extends Layer {
     _oLayer: VectorLayer;
+    removalRequested: boolean;
     constructor(name: string, oLayer: VectorLayer);
     clone(): LayerDrawing;
 }

package/models/layers/layerdrawing.js

@@ -9,9 +9,10 @@ import Layer from './layer.js';
  */
 export default class LayerDrawing extends Layer {
     _oLayer;
+    removalRequested = false;
     constructor(name, oLayer) {
         super(0, name, 0, { isDefaultChecked: true });
-        this.isRemovable = false;
+        this.isRemovable = true;
         this.isSwipeable = false;
         this.isDraggable = false;
         this._oLayer = oLayer;

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2750042516",
+  "version": "1.2.0-dev.2751114005",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2750042516", "build":"2750042516", "date":"11/08/2026"}
+{"version":"1.2.0-dev.2751114005", "build":"2751114005", "date":"11/08/2026"}

package/tools/drawing/cesiumDrawing.d.ts

@@ -9,12 +9,19 @@ export default class CesiumDrawing {
     private handler;
     private entities;
     private fixedLineLength;
+    private drawingText;
     private readonly context;
     private get state();
     private get drawingState();
     private get config();
     constructor(map: MapComponent, stateLocation: string, context: IGirafeContext);
     setFixedLineLength(length: number): void;
+    setDrawingText(text: string): void;
+    /**
+     * A text shape displays the text entered in the tool parameters instead of its generated default name.
+     * If no text has been entered, the default name is kept so that the shape stays visible on the globe.
+     */
+    private getTextOf;
     private activateTool;
     private deactivateTool;
     private pickOnGlobe;

package/tools/drawing/cesiumDrawing.js

@@ -15,6 +15,7 @@ export default class CesiumDrawing {
     handler = undefined;
     entities = undefined;
     fixedLineLength = 0;
+    drawingText = '';
     context;
     get state() {
         return this.context.stateManager.state;
@@ -40,6 +41,16 @@ export default class CesiumDrawing {
     setFixedLineLength(length) {
         this.fixedLineLength = Number.isNaN(length) ? 0 : length;
     }
+    setDrawingText(text) {
+        this.drawingText = text;
+    }
+    /**
+     * A text shape displays the text entered in the tool parameters instead of its generated default name.
+     * If no text has been entered, the default name is kept so that the shape stays visible on the globe.
+     */
+    getTextOf(feature) {
+        return this.drawingText.trim().length > 0 ? this.drawingText : feature.name;
+    }
     activateTool(tool) {
         if (!this.canExecute('globe.draw')) {
             return;
@@ -83,6 +94,9 @@ export default class CesiumDrawing {
         const newCesiumEntities = this.getShapes(tool, newCesiumEntityPoints, new DrawingFeature(tool, this.drawingState, this.config.drawing));
         this.activeShapes.forEach((e) => this.entities.remove(e));
         const newFeature = new DrawingFeature(tool, this.drawingState, this.config.drawing);
+        if (tool === DrawingShape.Text) {
+            newFeature.name = this.getTextOf(newFeature);
+        }
         // The following code will be useful when we will remove OLCesium
         /*newCesiumEntities.forEach((e) => this.entities!.add(e));
         const updateStyle = (feature:DrawingFeature) => {
@@ -164,7 +178,7 @@ export default class CesiumDrawing {
                     this.activeShapes.forEach((e) => this.entities.add(e));
                 }
                 // Tools that automatically terminate the shape after a fixed number of points
-                if ((tool === DrawingShape.Point && this.activeShapePoints.length === 2) ||
+                if (((tool === DrawingShape.Point || tool === DrawingShape.Text) && this.activeShapePoints.length === 2) ||
                     (tool === DrawingShape.Disk && this.activeShapePoints.length === 3) ||
                     (tool === DrawingShape.Square && this.activeShapePoints.length === 3) ||
                     (tool === DrawingShape.Rectangle && this.activeShapePoints.length === 3)) {
@@ -221,6 +235,15 @@ export default class CesiumDrawing {
                         label: this.createLabel(feature.getCoordText(this.getPosition(pos[0])), font)
                     })
                 ];
+            case DrawingShape.Text:
+                return [
+                    new Entity({
+                        position: pos[0],
+                        // The anchor point is needed to export the shape as a KML placemark
+                        point: this.createPoint(strokeColor),
+                        label: this.createLabel(this.getTextOf(feature), font)
+                    })
+                ];
             case DrawingShape.Polyline:
                 return [
                     new Entity({ polyline: this.getPolyline(pos, feature) }),

package/tools/drawing/drawingFeature.d.ts

@@ -12,7 +12,8 @@ export declare enum DrawingShape {
     Rectangle = 4,
     Disk = 5,
     FreehandPolyline = 6,
-    FreehandPolygon = 7
+    FreehandPolygon = 7,
+    Text = 8
 }
 export type ArrowStyle = 'none' | 'start' | 'end' | 'both';
 export type ArrowPosition = 'whole' | 'each' | 'mid';
@@ -100,7 +101,7 @@ export default class DrawingFeature {
     getAreaText(area: number): string;
     getCoordText(coord: number[]): string;
     getAzimuthText(circle: CircleGeom): string;
-    isPointOrPolyline(): boolean;
+    isPointPolylineOrText(): boolean;
     getVertexStyle(activeNode?: boolean): Style;
     static deserialize(serializedFeature: SerializedFeature, context: IGirafeContext, drawingState: DrawingState): DrawingFeature;
     static circleToPolygon(center: number[], radius: number, nbEdges?: number): number[][];

package/tools/drawing/drawingFeature.js

@@ -8,6 +8,7 @@ import GeoJSON from 'ol/format/GeoJSON.js';
 import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../utils/olutils.js';
 import { fromCircle } from 'ol/geom/Polygon.js';
 import LineString from 'ol/geom/LineString.js';
+// New shapes must be appended at the end, as the numeric values are used to serialize features.
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -18,6 +19,7 @@ export var DrawingShape;
     DrawingShape[DrawingShape["Disk"] = 5] = "Disk";
     DrawingShape[DrawingShape["FreehandPolyline"] = 6] = "FreehandPolyline";
     DrawingShape[DrawingShape["FreehandPolygon"] = 7] = "FreehandPolygon";
+    DrawingShape[DrawingShape["Text"] = 8] = "Text";
 })(DrawingShape || (DrawingShape = {}));
 export default class DrawingFeature {
     static geoJSONFormat = new GeoJSON();
@@ -206,10 +208,11 @@ export default class DrawingFeature {
     getAzimuthText(circle) {
         return getAzimuthAsText(this.measureInformation === 'none' ? undefined : (circle.getProperties()['azimuth'] ?? undefined));
     }
-    isPointOrPolyline() {
+    isPointPolylineOrText() {
         return (this.type === DrawingShape.Point ||
             this.type === DrawingShape.Polyline ||
-            this.type === DrawingShape.FreehandPolyline);
+            this.type === DrawingShape.FreehandPolyline ||
+            this.type === DrawingShape.Text);
     }
     getVertexStyle(activeNode = false) {
         const defaultConfig = this.defaultDrawingConfig;

package/tools/drawing/olDrawing.d.ts

@@ -21,12 +21,16 @@ export default class OlDrawing {
     private fixedSquareSide;
     private fixedRectangleWidth;
     private fixedRectangleHeight;
+    private drawingText;
     readonly drawingSource: VectorSource;
     readonly drawingLayer: VectorLayer;
     private lastClosestFeature;
     private translate;
     private transform;
     private readonly modifyFeatureChangeListeners;
+    private hoverListener;
+    private selectListener;
+    private hoveredTextFeatureId;
     defaultStyle: StyleFunction | undefined;
     private readonly updateGeometryInState;
     private get state();
@@ -46,6 +50,22 @@ export default class OlDrawing {
     private addEditContextMenu;
     private addEditInteractions;
     private removeEditInteractions;
+    private addHoverListener;
+    private removeHoverListener;
+    private addSelectListener;
+    private removeSelectListener;
+    /**
+     * Lets the user select the shapes to edit directly in the map, as an alternative to the drawing list:
+     * a click selects the shape under the cursor exclusively, a click with the platform modifier key (ctrl / meta)
+     * adds the shape to the current selection or removes it from it. A click outside of any shape clears the selection.
+     */
+    private selectClickedFeature;
+    /**
+     * Only writes to the state if the selection of the shape really changed, so that the map and the drawing
+     * panel are not refreshed for the shapes that are not concerned by the click.
+     */
+    private setFeatureSelected;
+    private findFeatureIdAtPixel;
     private readonly prepareMenuEntriesForVertex;
     private readonly prepareMenuEntriesForShape;
     /**
@@ -98,6 +118,12 @@ export default class OlDrawing {
     setFixedSquareSide(length: number): void;
     setFixedRectangleWidth(width: number): void;
     setFixedRectangleHeight(height: number): void;
+    setDrawingText(text: string): void;
+    /**
+     * A text shape displays the text entered in the tool parameters instead of its generated default name.
+     * If no text has been entered, the default name is kept so that the shape stays visible on the map.
+     */
+    private applyDrawingText;
     private createLineStringFixedLength;
     private createSquareFixedLength;
     private createPolygonFixedLength;
@@ -106,11 +132,24 @@ export default class OlDrawing {
     private addDrawInteraction;
     centerViewOnFeature(drawingFeature: DrawingFeature): void;
     private getStyle;
+    /**
+     * Vertices are rendered on the shapes selected for editing. A text shape is an exception: as its geometry is
+     * a single anchor point hidden behind the text, its vertex is only revealed while the cursor hovers the text.
+     */
+    private shouldRenderVertices;
     private removeDrawInteraction;
     private removeModifyInteraction;
     private getDrawingShapeType;
     private isSquareOrRectangle;
+    private isSquareRectangleOrText;
     private shouldAllowVertexInsertionAtEvent;
+    /**
+     * A text shape is only made of its text: its anchor point is hidden behind it. To let the user know where to
+     * grab the shape, the anchor vertex is revealed as long as the cursor hovers the text.
+     */
+    private updateHoveredTextFeature;
+    private setHoveredTextFeature;
+    private findHoveredTextFeatureIdAtPixel;
     private getHoveredModifiableFeatureAtPixel;
     private applyScaleRotateOnModifyStyle;
     private clearModifyFeatureChangeListeners;
@@ -119,5 +158,7 @@ export default class OlDrawing {
     registerInteractions(): void;
     unregisterInteractions(): void;
     private canExecute;
+    private disableContextMenu;
+    private enableContextMenu;
     private fixLastLength;
 }

package/tools/drawing/olDrawing.js

@@ -8,7 +8,8 @@ import { Draw, Modify, Snap, Translate } from 'ol/interaction.js';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import { getPointResolution } from 'ol/proj.js';
-import { always, never, primaryAction } from 'ol/events/condition.js';
+import { always, never, platformModifierKeyOnly, primaryAction } from 'ol/events/condition.js';
+import { unByKey } from 'ol/Observable.js';
 import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getLengthAsMetricText, getRadiusDataForCircle, unByKeyAll } from '../utils/olutils.js';
 import { ContextMenu, EntryInteractionType } from '../../components/map/tools/contextmenu.js';
 import { formatCoordinates } from '../geometrytools.js';
@@ -64,12 +65,16 @@ export default class OlDrawing {
     fixedSquareSide = 0;
     fixedRectangleWidth = 0;
     fixedRectangleHeight = 0;
+    drawingText = '';
     drawingSource;
     drawingLayer;
     lastClosestFeature = null;
     translate = null;
     transform = null;
     modifyFeatureChangeListeners = [];
+    hoverListener = null;
+    selectListener = null;
+    hoveredTextFeatureId = null;
     defaultStyle;
     updateGeometryInState = (olFeature) => {
         const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
@@ -324,21 +329,78 @@ export default class OlDrawing {
         if (!this.editContextMenu) {
             this.addEditContextMenu();
         }
+        this.addHoverListener();
         // Always recreate snap interaction to get snapping behavior on latest features
         this.addSnapInteraction();
     }
     removeEditInteractions() {
         this.removeModifyInteraction();
         this.removeEditContextMenu();
+        this.removeHoverListener();
         if (!this.draw) {
             this.removeSnapInteraction();
         }
     }
+    addHoverListener() {
+        this.hoverListener ??= this.map.olMap.on('pointermove', (e) => this.updateHoveredTextFeature(e));
+    }
+    removeHoverListener() {
+        if (this.hoverListener) {
+            unByKey(this.hoverListener);
+            this.hoverListener = null;
+        }
+        this.setHoveredTextFeature(null);
+    }
+    addSelectListener() {
+        this.selectListener ??= this.map.olMap.on('singleclick', (e) => this.selectClickedFeature(e));
+    }
+    removeSelectListener() {
+        if (this.selectListener) {
+            unByKey(this.selectListener);
+            this.selectListener = null;
+        }
+    }
+    /**
+     * Lets the user select the shapes to edit directly in the map, as an alternative to the drawing list:
+     * a click selects the shape under the cursor exclusively, a click with the platform modifier key (ctrl / meta)
+     * adds the shape to the current selection or removes it from it. A click outside of any shape clears the selection.
+     */
+    selectClickedFeature(e) {
+        // While drawing, moving or transforming a shape, the click belongs to the interaction in progress
+        if (this.draw || this.translate || this.transform || !this.canExecute('map.select')) {
+            return;
+        }
+        const clickedFeatureId = this.findFeatureIdAtPixel(e.pixel);
+        if (platformModifierKeyOnly(e)) {
+            const clickedFeature = this.drawingState.features.find((f) => f.id === clickedFeatureId);
+            if (clickedFeature) {
+                this.setFeatureSelected(clickedFeature, !clickedFeature.selected);
+            }
+        }
+        else {
+            this.drawingState.features.forEach((f) => this.setFeatureSelected(f, f.id === clickedFeatureId));
+        }
+    }
+    /**
+     * Only writes to the state if the selection of the shape really changed, so that the map and the drawing
+     * panel are not refreshed for the shapes that are not concerned by the click.
+     */
+    setFeatureSelected(dFeature, selected) {
+        if (dFeature.selected !== selected) {
+            dFeature.selected = selected;
+        }
+    }
+    findFeatureIdAtPixel(pixel) {
+        const clickedFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => (feature instanceof Feature && layer === this.drawingLayer ? feature : undefined), {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return clickedFeature ? (clickedFeature.getId() ?? null) : null;
+    }
     prepareMenuEntriesForVertex = (_e, mapCoordinate) => {
         if (!this.hasEditableVertexAtCoordinate(mapCoordinate)) {
             return EntryInteractionType.NOT_SHOWN;
         }
-        if (this.isSquareOrRectangle(this.getDrawingShapeType(this.lastClosestFeature))) {
+        if (this.isSquareRectangleOrText(this.getDrawingShapeType(this.lastClosestFeature))) {
             return EntryInteractionType.NOT_SHOWN;
         }
         return EntryInteractionType.ENABLED;
@@ -476,6 +538,7 @@ export default class OlDrawing {
         }
         const olFeature = e.feature;
         const dFeature = new DrawingFeature(this.currentShape, this.drawingState, this.config.drawing);
+        this.applyDrawingText(dFeature);
         olFeature.setId(dFeature.id);
         dFeature.geojson = DrawingFeature.geojsonFromOlFeature(olFeature, dFeature.type);
         dFeature.addToState();
@@ -507,6 +570,18 @@ export default class OlDrawing {
     setFixedRectangleHeight(height) {
         this.fixedRectangleHeight = Number.isNaN(height) ? 0 : height;
     }
+    setDrawingText(text) {
+        this.drawingText = text;
+    }
+    /**
+     * A text shape displays the text entered in the tool parameters instead of its generated default name.
+     * If no text has been entered, the default name is kept so that the shape stays visible on the map.
+     */
+    applyDrawingText(dFeature) {
+        if (dFeature.type === DrawingShape.Text && this.drawingText.trim().length > 0) {
+            dFeature.name = this.drawingText;
+        }
+    }
     createLineStringFixedLength(coordinates, geom) {
         this.fixLastLength(this.fixedLineLength, coordinates);
         geom = geom ?? new LineString(coordinates);
@@ -582,8 +657,6 @@ export default class OlDrawing {
     }
     addDrawInteraction(tool) {
         this.removeDrawInteraction();
-        // Block feature selection while drawing by registering 'map.select' exclusively
-        this.context.userInteractionManager.registerListener('map.select', true, this.stateLocation);
         this.currentShape = tool;
         let geomFunction = undefined;
         let olTool;
@@ -617,6 +690,9 @@ export default class OlDrawing {
             case DrawingShape.FreehandPolygon:
                 olTool = 'Polygon';
                 break;
+            case DrawingShape.Text:
+                olTool = 'Point';
+                break;
         }
         this.draw = new Draw({
             source: this.drawingSource,
@@ -627,9 +703,17 @@ export default class OlDrawing {
             // Default condition for ol drawing is noModifierKeys(e)
             // canExecute: If another tool is exclusively drawing, this interaction will be prevented from reacting
             condition: (e) => primaryAction(e) && this.canExecute('map.draw'),
-            style: (f) => this.getStyle(new DrawingFeature(tool, this.drawingState, this.config.drawing), f)
+            style: (f) => {
+                const sketchFeature = new DrawingFeature(tool, this.drawingState, this.config.drawing);
+                this.applyDrawingText(sketchFeature);
+                return this.getStyle(sketchFeature, f);
+            }
+        });
+        this.draw.on('drawstart', () => {
+            this.disableContextMenu();
         });
         this.draw.on('drawend', () => {
+            this.enableContextMenu();
             this.draw?.removeLastPoint();
             this.draw?.finishDrawing();
         });
@@ -663,17 +747,26 @@ export default class OlDrawing {
                 lineDash: getLineStroke(dFeature.lineStroke, dFeature.strokeWidth)
             }),
             fill: new Fill({ color: dFeature.fillColor }),
-            image: new Circle({
-                radius: dFeature.strokeWidth, // Points are using default stroke parameters
-                fill: new Fill({ color: dFeature.strokeColor })
-            }),
+            image: dFeature.type === DrawingShape.Text
+                ? // A text shape is only made of its text, its anchor point is not drawn
+                    undefined
+                : new Circle({
+                    radius: dFeature.strokeWidth, // Points are using default stroke parameters
+                    fill: new Fill({ color: dFeature.strokeColor })
+                }),
             text: new Text({
                 text: dFeature.displayName ? dFeature.name : '',
                 font: nameFont,
                 textBaseline: 'middle',
                 /*offsetY: dFeature.type == DrawingShape.Point ? 2 * dFeature.nameFontSize : 1.2 * dFeature.nameFontSize,*/
                 fill: new Fill({ color: dFeature.nameColor }),
-                overflow: true
+                overflow: true,
+                stroke: dFeature.type == DrawingShape.Text
+                    ? new Stroke({
+                        color: '#ffffff',
+                        width: 8
+                    })
+                    : undefined
             })
         });
         const labelStyle = new Style({
@@ -768,7 +861,10 @@ export default class OlDrawing {
                 }
             }
         }
-        if (dFeature.type == DrawingShape.Point || geometry.getType() === 'Point') {
+        if (dFeature.type == DrawingShape.Text) {
+            // A text shape displays only its text, there is no measure to add
+        }
+        else if (dFeature.type == DrawingShape.Point || geometry.getType() === 'Point') {
             addLabel(geometry, dFeature.getCoordText(geometry.getCoordinates()));
         }
         else if (dFeature.type == DrawingShape.Polyline) {
@@ -792,7 +888,7 @@ export default class OlDrawing {
                 appendText(getLengthAsMetricText(lineString.getLength()));
             }
         }
-        else if (dFeature.type == DrawingShape.Disk) {
+        else if (dFeature.type == DrawingShape.Disk && geometry instanceof CircleGeom) {
             if (dFeature.measureInformation !== 'none') {
                 const radiusDataForCircle = getRadiusDataForCircle(geometry, this.state.projection, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
                 styles.push(radiusDataForCircle.style);
@@ -830,7 +926,7 @@ export default class OlDrawing {
             }
             addLabel(square.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(square, this.state.projection)));
         }
-        if (dFeature.selected && this.transform == null) {
+        if (this.shouldRenderVertices(dFeature)) {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
@@ -843,13 +939,21 @@ export default class OlDrawing {
         }
         return styles;
     }
+    /**
+     * Vertices are rendered on the shapes selected for editing. A text shape is an exception: as its geometry is
+     * a single anchor point hidden behind the text, its vertex is only revealed while the cursor hovers the text.
+     */
+    shouldRenderVertices(dFeature) {
+        if (!dFeature.selected || this.transform != null) {
+            return false;
+        }
+        return dFeature.type !== DrawingShape.Text || dFeature.id === this.hoveredTextFeatureId;
+    }
     removeDrawInteraction() {
         if (this.draw) {
             this.map.olMap.removeInteraction(this.draw);
             this.draw = null;
         }
-        // Reactivate feature selection by unregistering 'map.select'
-        this.context.userInteractionManager.unregisterListener('map.select', this.stateLocation);
     }
     removeModifyInteraction() {
         this.clearModifyFeatureChangeListeners();
@@ -867,10 +971,50 @@ export default class OlDrawing {
     isSquareOrRectangle(shapeType) {
         return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle;
     }
+    isSquareRectangleOrText(shapeType) {
+        return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle || shapeType === DrawingShape.Text;
+    }
     shouldAllowVertexInsertionAtEvent(e) {
         const hoveredFeature = this.getHoveredModifiableFeatureAtPixel(e.pixel);
         return shouldAllowVertexInsertionForShape(this.getDrawingShapeType(hoveredFeature));
     }
+    /**
+     * A text shape is only made of its text: its anchor point is hidden behind it. To let the user know where to
+     * grab the shape, the anchor vertex is revealed as long as the cursor hovers the text.
+     */
+    updateHoveredTextFeature(e) {
+        if (e.dragging) {
+            return;
+        }
+        // Only the selected shapes display their vertices, so there is nothing to look for otherwise
+        const hasSelectedText = this.drawingState.features.some((f) => f.selected && f.type === DrawingShape.Text);
+        this.setHoveredTextFeature(hasSelectedText ? this.findHoveredTextFeatureIdAtPixel(e.pixel) : null);
+    }
+    setHoveredTextFeature(featureId) {
+        if (featureId === this.hoveredTextFeatureId) {
+            return;
+        }
+        const previousFeatureId = this.hoveredTextFeatureId;
+        this.hoveredTextFeatureId = featureId;
+        // Redraw the shapes whose hovered state changed, so that their vertex appears or disappears
+        for (const id of [previousFeatureId, featureId]) {
+            if (id) {
+                this.getOlFeatureFromDrawingSource(id)?.changed();
+            }
+        }
+    }
+    findHoveredTextFeatureIdAtPixel(pixel) {
+        // The text of a shape takes part in the hit detection, so hovering anywhere on it is enough
+        const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            if (!(feature instanceof Feature) || layer !== this.drawingLayer) {
+                return undefined;
+            }
+            return this.getDrawingShapeType(feature) === DrawingShape.Text ? feature : undefined;
+        }, {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return hoveredFeature instanceof Feature ? (hoveredFeature.getId() ?? null) : null;
+    }
     getHoveredModifiableFeatureAtPixel(pixel) {
         const modifiableFeatureSet = new Set(this.modifiableFeatures.getArray());
         const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
@@ -941,17 +1085,28 @@ export default class OlDrawing {
         this.context.userInteractionManager.registerListener('map.draw', true, this.stateLocation);
         this.context.userInteractionManager.registerListener('map.modify', true, this.stateLocation);
         this.context.userInteractionManager.registerListener('map.snap', true, this.stateLocation);
+        // Clicking on the map selects the drawn shapes, so feature selection is taken over from the other tools
+        this.context.userInteractionManager.registerListener('map.select', true, this.stateLocation);
+        this.addSelectListener();
     }
     unregisterInteractions() {
         this.removeDrawInteraction();
         this.removeEditInteractions();
+        this.removeSelectListener();
         this.context.userInteractionManager.unregisterListener('map.draw', this.stateLocation);
         this.context.userInteractionManager.unregisterListener('map.modify', this.stateLocation);
         this.context.userInteractionManager.unregisterListener('map.snap', this.stateLocation);
+        this.context.userInteractionManager.unregisterListener('map.select', this.stateLocation);
     }
     canExecute(event) {
         return this.context.userInteractionManager.canListenerExecute(event, this.stateLocation);
     }
+    disableContextMenu() {
+        this.context.userInteractionManager.registerListener('map.contextmenu', true, this.stateLocation);
+    }
+    enableContextMenu() {
+        this.context.userInteractionManager.unregisterListener('map.contextmenu', this.stateLocation);
+    }
     fixLastLength(length, coordinates, scale = 1) {
         const coord = coordinates;
         if (coord.length > 1 && length > 0) {