@geogirafe/lib-geoportal 1.2.0-dev.2736532702 → 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

@@ -488,6 +488,7 @@
     "Send message": "Nachricht senden",
     "Settings": "Einstellungen",
     "Shadows": "Schatten",
+    "Share map": "Karte teilen",
     "Share this map": "Diese Karte teilen",
     "share-panel": "Karte teilen oder einbetten",
     "Show metadata": "Metadaten anzeigen",
@@ -523,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

@@ -490,6 +490,7 @@
     "Send message": "Send message",
     "Settings": "Settings",
     "Shadows": "Shadows",
+    "Share map": "Share map",
     "Share this map": "Share this map",
     "share-panel": "Share or embed map",
     "Show metadata": "Show metadata",
@@ -526,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

@@ -488,6 +488,7 @@
     "Send message": "Envoyer un message",
     "Settings": "Paramètres",
     "Shadows": "Ombres",
+    "Share map": "Partager la carte",
     "Share this map": "Partager cette carte",
     "share-panel": "Partager ou intégrer la carte",
     "Show metadata": "Afficher les métadonnées",
@@ -523,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

@@ -488,6 +488,7 @@
     "Send message": "Invia messaggio",
     "Settings": "Impostazioni",
     "Shadows": "Ombre",
+    "Share map": "Condividi la mappa",
     "Share this map": "Condividi questa mappa",
     "share-panel": "Condividi o incorpora la mappa",
     "Show metadata": "Mostra metadati",
@@ -523,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/share-native.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path fill="#1c1b1f" d="M18 22a2.9 2.9 0 0 1-2.125-.875A2.9 2.9 0 0 1 15 19q0-.175.025-.363.025-.187.075-.337l-7.05-4.1q-.425.375-.95.588T6 15a2.9 2.9 0 0 1-2.125-.875A2.9 2.9 0 0 1 3 12q0-1.25.875-2.125A2.9 2.9 0 0 1 6 9q.575 0 1.1.213.525.212.95.587l7.05-4.1a2 2 0 0 1-.075-.338A3 3 0 0 1 15 5q0-1.25.875-2.125A2.9 2.9 0 0 1 18 2q1.25 0 2.125.875T21 5t-.875 2.125A2.9 2.9 0 0 1 18 8q-.575 0-1.1-.213a3.3 3.3 0 0 1-.95-.587L8.9 11.3q.05.15.075.337a2.7 2.7 0 0 1 0 .726 2 2 0 0 1-.075.337l7.05 4.1q.425-.375.95-.588T18 16q1.25 0 2.125.875T21 19t-.875 2.125A2.9 2.9 0 0 1 18 22m0-16q.424 0 .712-.287A.97.97 0 0 0 19 5a.97.97 0 0 0-.288-.713A.97.97 0 0 0 18 4a.97.97 0 0 0-.712.287A.97.97 0 0 0 17 5q0 .424.288.713Q17.575 6 18 6M6 13q.424 0 .713-.287A.97.97 0 0 0 7 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 6 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 5 12q0 .424.287.713Q5.576 13 6 13m12 7q.424 0 .712-.288A.97.97 0 0 0 19 19a.97.97 0 0 0-.288-.712A.97.97 0 0 0 18 18a.97.97 0 0 0-.712.288A.97.97 0 0 0 17 19q0 .424.288.712.287.288.712.288"/></g></svg>

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/main.d.ts

@@ -48,6 +48,7 @@ export { default as SelectionPanelMobile, getLinkFriendlyString } from './select
 export { default as SelectionToolComponent } from './selectiontool/component.js';
 export { default as SelectionWindowComponent } from './selectionwindow/component.js';
 export { default as ShareComponent } from './share/component.js';
+export { default as ShareMobileComponent } from './share-mobile/component.js';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component.js';
 export { default as ThemeComponent } from './themes/component.js';
 export { default as MobileGroupElementComponent } from './themes-mobile/group/component.js';

package/components/main.js

@@ -47,6 +47,7 @@ export { default as SelectionPanelMobile, getLinkFriendlyString } from './select
 export { default as SelectionToolComponent } from './selectiontool/component.js';
 export { default as SelectionWindowComponent } from './selectionwindow/component.js';
 export { default as ShareComponent } from './share/component.js';
+export { default as ShareMobileComponent } from './share-mobile/component.js';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component.js';
 export { default as ThemeComponent } from './themes/component.js';
 export { default as MobileGroupElementComponent } from './themes-mobile/group/component.js';

package/components/menu-buttons-mobile/MenuMobile3dButton.js

@@ -6,7 +6,7 @@ export default class MenuMobile3dButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileDrawingButton.js

@@ -6,7 +6,7 @@ export default class MenuMobileDrawingButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileOfflineButton.js

@@ -6,7 +6,7 @@ export default class MenuMobileOfflineButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileShareButton.d.ts

@@ -0,0 +1,11 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+export default class MenuMobileShareButton extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    icon: string;
+    label: string;
+    constructor();
+    onPointerUp(): void;
+    protected connectedCallback(): void;
+}

package/components/menu-buttons-mobile/MenuMobileShareButton.js

@@ -0,0 +1,32 @@
+import { html as uHtml } from 'uhtml';
+// SPDX-License-Identifier: Apache-2.0
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+export default class MenuMobileShareButton extends GirafeHTMLElement {
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        return uHtml `<style>
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
+</style>
+<style>${this.customStyle}</style>
+<div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>
+${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
+    };
+    icon = 'icons/share.svg';
+    label = 'Share map';
+    constructor() {
+        super('mobile-share-button');
+    }
+    onPointerUp() {
+        // If not delaying, the releasing of the click is also fired
+        // on the offline panel shown
+        setTimeout(() => {
+            this.state.interface.sharePanelVisible = true;
+            this.state.interface.swipeupPanelContent = 'share';
+        }, 50);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+}

package/components/menu-buttons-mobile/style.css

@@ -34,3 +34,6 @@
   font-weight: 600;
   color: #3f68a7;
 }
+.menu-item-title {
+  text-align: center;
+}

package/components/menu-mobile/component.js

@@ -10,7 +10,7 @@ export default class MenuMobile extends GirafeHTMLElement {
 </style><style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-.menu-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.menu-item-container{box-sizing:border-box;user-select:none;margin-bottom:max(env(safe-area-inset-bottom), 20px);grid-template-columns:repeat(2,1fr);gap:20px;padding:0 25px;display:grid}.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.menu-item-container{box-sizing:border-box;user-select:none;margin-bottom:max(env(safe-area-inset-bottom), 20px);grid-template-columns:repeat(2,1fr);gap:20px;padding:0 25px;display:grid}.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div style="${this.state.interface.swipeupPanelContent === 'menu' ? '' : 'display: none;'}"><div class="menu-title" i18n="Tools"></div><div class="menu-item-container"><slot name="mobile-menu-content"></slot></div></div>

package/components/menu-mobile/style.css

@@ -53,3 +53,7 @@
   font-weight: 600;
   color: #3f68a7;
 }
+
+.menu-item-title {
+  text-align: center;
+}

package/components/share/component.js

@@ -1,9 +1,9 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
-import TwitterLogo from './images/twitter.svg';
-import FacebookLogo from './images/facebook.svg';
-import LinkedInLogo from './images/linkedin.svg';
-import MailLogo from './images/mail.svg';
+import TwitterLogo from '../../assets/icons/twitter.svg';
+import FacebookLogo from '../../assets/icons/facebook.svg';
+import LinkedInLogo from '../../assets/icons/linkedin.svg';
+import MailLogo from '../../assets/icons/share-mail.svg';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import SimpleMaskManager from '../../tools/layers/simplemaskmanager.js';
 class ShareComponent extends GirafeHTMLElement {

package/components/share-mobile/component.d.ts

@@ -0,0 +1,28 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { IUrlShortener } from '../../tools/share/iurlshortener.js';
+declare class ShareMobileComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    shareLink?: string;
+    qrCode?: string;
+    success: boolean;
+    twitterLogo: string;
+    facebookLogo: string;
+    linkedInLogo: string;
+    mailLogo: string;
+    shareNativeLogo: string;
+    awaitingShareLink: boolean;
+    get urlShortener(): IUrlShortener | undefined;
+    constructor();
+    render(): void;
+    protected connectedCallback(): void;
+    registerEvents(): void;
+    private generateShareLink;
+    shareFacebook(): void;
+    shareTwitter(): void;
+    shareLinkedIn(): void;
+    shareMail(): void;
+    shareNative(): Promise<void>;
+}
+export default ShareMobileComponent;