@geogirafe/lib-geoportal 1.1.0-dev.2433737633 → 1.1.0-dev.2438378072

package/assets/i18n/de.json

@@ -70,9 +70,11 @@
     "Define time restriction on group": "Zeitliche Begrenzung für Gruppe definieren",
     "Define time restriction on layer": "Zeitliche Begrenzung für Layer definieren",
     "delete": "Löschen",
+    "Delete all shapes": "Alle Formen löschen",
     "Delete bookmark": "Lesezeichen löschen",
     "Delete Feature": "Funktion löschen",
     "Delete feature": "Objekt löschen",
+    "Delete Features": "Objekte löschen",
     "Delete shape": "Form löschen",
     "Delete Theme": "Thema löschen",
     "delete_help": "Profil-Linie löschen",
@@ -85,6 +87,7 @@
     "Do you want to delete this theme?": "Möchten Sie dieses Thema löschen?",
     "Do you want to logout ?": "Möchten Sie sich abmelden?",
     "Do you want to remove \"${feature.name}\" ?": "Möchten Sie \"${feature.name}\" entfernen?",
+    "Do you want to remove all features?": "Möchten Sie alle Objekte entfernen?",
     "Documentation": "Dokumentation",
     "does not contain": "enthält nicht",
     "does not equal": "ungleich",
@@ -102,6 +105,7 @@
     "Draw polygons": "Polygone zeichnen",
     "draw_profile": "Profil-Linie zeichnen",
     "draw_profile_help": "Profil-Linien-Zeichnen auf der Karte umschalten",
+    "Drawing List": "Zeichnungsliste",
     "drawing-panel": "Zeichnen & messen",
     "drawingFillColor": "Zeichnen Füllfarbe",
     "Drawings": "Zeichnungen",
@@ -142,7 +146,10 @@
     "Filter layer": "Layer filtern",
     "Filter layer tree...": "Layerliste filtern...",
     "Filtering deactivated: layers in layergroup don't have identical attributes.": "Filterung deaktiviert: Layer in der Layergruppe haben nicht identische Attribute.",
+    "Fix height to": "Höhe festlegen auf",
     "Fix length to": "Länge festlegen auf",
+    "Fix side length to": "Seitenlänge festlegen auf",
+    "Fix width to": "Breite festlegen auf",
     "Font": "Schriftart",
     "Format": "Format",
     "fr": "Französisch",
@@ -378,6 +385,7 @@
     "selectStrokeColor": "Auswahl Strichfarbe",
     "Send": "Senden",
     "Send message": "Nachricht senden",
+    "Settings": "Einstellungen",
     "Shadows": "Schatten",
     "Share this map": "Diese Karte teilen",
     "share-panel": "Karte teilen oder einbetten",

package/assets/i18n/en.json

@@ -73,6 +73,8 @@
     "Delete bookmark": "Delete bookmark",
     "Delete Feature": "Delete Feature",
     "Delete feature": "Delete feature",
+    "Delete Features": "Delete Features",
+    "Delete all shapes": "Delete all shapes",
     "Delete shape": "Delete shape",
     "Delete Theme": "Delete Theme",
     "delete_help": "Delete profile line",
@@ -85,6 +87,7 @@
     "Do you want to delete this theme?": "Do you want to delete this theme?",
     "Do you want to logout ?": "Do you want to logout?",
     "Do you want to remove \"${feature.name}\" ?": "Do you want to remove \"${feature.name}\"?",
+    "Do you want to remove all features?": "Do you want to remove all features?",
     "Documentation": "Documentation",
     "does not contain": "does not contain",
     "does not equal": "does not equal",
@@ -102,6 +105,7 @@
     "Draw polygons": "Draw polygons",
     "draw_profile": "Draw profile line",
     "draw_profile_help": "Toggle profile line drawing on map",
+    "Drawing List": "Drawings List",
     "drawing-panel": "Draw & measure",
     "drawingFillColor": "Drawing fill color",
     "Drawings": "Drawings",
@@ -143,7 +147,10 @@
     "Filter layer": "Filter layer",
     "Filter layer tree...": "Filter layer tree...",
     "Filtering deactivated: layers in layergroup don't have identical attributes.": "Filtering deactivated: layers in layergroup don't have identical attributes.",
+    "Fix height to": "Fix height to",
     "Fix length to": "Fix length to",
+    "Fix side length to": "Fix side length to",
+    "Fix width to": "Fix width to",
     "Font": "Font",
     "Format": "Format",
     "fr": "French",
@@ -379,6 +386,7 @@
     "selectStrokeColor": "Selection stroke color",
     "Send": "Send",
     "Send message": "Send message",
+    "Settings": "Settings",
     "Shadows": "Shadows",
     "Share this map": "Share this map",
     "share-panel": "Share or embed map",

package/assets/i18n/fr.json

@@ -70,9 +70,11 @@
     "Define time restriction on group": "Définir la restriction temporelle pour le groupe",
     "Define time restriction on layer": "Définir la restriction temporelle sur la couche",
     "delete": "Supprimer",
+    "Delete all shapes": "Supprimer toutes les formes",
     "Delete bookmark": "Supprimer le favori",
     "Delete Feature": "Supprimer la fonctionnalité",
     "Delete feature": "Suppression de l'entité",
+    "Delete Features": "Supprimer les objets",
     "Delete shape": "Supprimer la forme",
     "Delete Theme": "Supprimer le thème",
     "delete_help": "Supprimer la ligne de profil",
@@ -85,6 +87,7 @@
     "Do you want to delete this theme?": "Voulez-vous supprimer ce thème ?",
     "Do you want to logout ?": "Voulez-vous vous déconnecter ?",
     "Do you want to remove \"${feature.name}\" ?": "Voulez-vous supprimer \"${feature.name}\" ?",
+    "Do you want to remove all features?": "Voulez-vous supprimer tous les objets ?",
     "Documentation": "Documentation",
     "does not contain": "ne contient pas",
     "does not equal": "n'est pas égal à",
@@ -102,6 +105,7 @@
     "Draw polygons": "Tracer des polygones",
     "draw_profile": "Dessiner",
     "draw_profile_help": "Activer/désactiver le dessin de la ligne de profil sur la carte",
+    "Drawing List": "Liste des dessins",
     "drawing-panel": "Dessiner & mesurer",
     "drawingFillColor": "Couleur de remplissage du dessin",
     "Drawings": "Dessins",
@@ -142,7 +146,10 @@
     "Filter layer": "Filtrer la couche",
     "Filter layer tree...": "Filtrer les couches...",
     "Filtering deactivated: layers in layergroup don't have identical attributes.": "Filtrage désactivé : les couches dans le groupe de couches n'ont pas d'attributs identiques.",
+    "Fix height to": "Fixer la hauteur à",
     "Fix length to": "Fixer la longueur à",
+    "Fix side length to": "Fixer la longueur du côté à",
+    "Fix width to": "Fixer la largeur à",
     "Font": "Police",
     "Format": "Format",
     "fr": "Français",
@@ -378,6 +385,7 @@
     "selectStrokeColor": "Couleur du trait de sélection",
     "Send": "Envoyer",
     "Send message": "Envoyer un message",
+    "Settings": "Paramètres",
     "Shadows": "Ombres",
     "Share this map": "Partager cette carte",
     "share-panel": "Partager ou intégrer la carte",

package/assets/i18n/it.json

@@ -70,9 +70,11 @@
     "Define time restriction on group": "Definire la restrizione temporale del gruppo",
     "Define time restriction on layer": "Definire la restrizione temporale del livello",
     "delete": "Elimina",
+    "Delete all shapes": "Elimina tutte le forme",
     "Delete bookmark": "Elimina segnalibro",
     "Delete Feature": "Elimina funzionalità",
     "Delete feature": "Eliminare l'elemento",
+    "Delete Features": "Elimina oggetti",
     "Delete shape": "Elimina forma",
     "Delete Theme": "Elimina tema",
     "delete_help": "Elimina la linea di profilo",
@@ -85,6 +87,7 @@
     "Do you want to delete this theme?": "Vuoi eliminare questo tema?",
     "Do you want to logout ?": "Vuoi disconnetterti?",
     "Do you want to remove \"${feature.name}\" ?": "Vuoi rimuovere \"${feature.name}\"?",
+    "Do you want to remove all features?": "Vuoi rimuovere tutti gli oggetti?",
     "Documentation": "Documentazione",
     "does not contain": "non contiene",
     "does not equal": "diverso da",
@@ -102,6 +105,7 @@
     "Draw polygons": "Disegnare un poligono",
     "draw_profile": "Disegna linea di profilo",
     "draw_profile_help": "Attiva/disattiva il disegno della linea di profilo sulla mappa",
+    "Drawing List": "Elenco dei disegni",
     "drawing-panel": "Disegna e misura",
     "drawingFillColor": "Colore di riempimento del disegno",
     "Drawings": "Disegni",
@@ -142,7 +146,10 @@
     "Filter layer": "Filtra layer",
     "Filter layer tree...": "Albero dei livelli di filtraggio...",
     "Filtering deactivated: layers in layergroup don't have identical attributes.": "Filtro disattivato: i layer nel gruppo non hanno attributi identici.",
+    "Fix height to": "Fissa l’altezza a",
     "Fix length to": "Fissa la lunghezza a",
+    "Fix side length to": "Fissare la lunghezza del lato a",
+    "Fix width to": "Fissa la larghezza a",
     "Font": "Carattere",
     "Format": "Formato",
     "fr": "Francese",
@@ -378,6 +385,7 @@
     "selectStrokeColor": "Colore del tratto di selezione",
     "Send": "Invia",
     "Send message": "Invia messaggio",
+    "Settings": "Impostazioni",
     "Shadows": "Ombre",
     "Share this map": "Condividi questa mappa",
     "share-panel": "Condividi o incorpora la mappa",

package/base/GirafeHTMLElement.d.ts

@@ -9,7 +9,7 @@ declare abstract class GirafeHTMLElement extends HTMLElement {
     protected template: Hole | (() => Hole);
     readonly name: string;
     protected shadow: ShadowRoot;
-    private displayStyle?;
+    protected displayStyle?: string;
     private timeoutId?;
     protected rendered: boolean;
     private readonly callbacks;

package/components/drawing/cesiumDrawing.d.ts

@@ -11,13 +11,13 @@ export default class CesiumDrawing {
     scene: Cesium.Scene | undefined;
     handler: Cesium.ScreenSpaceEventHandler | undefined;
     entities: Cesium.EntityCollection | undefined;
-    fixedLength: number;
+    fixedLineLength: number;
     private readonly context;
     private get state();
     private get drawingState();
     private get config();
     constructor(map: MapComponent, toolName: string, context: IGirafeContext);
-    setFixedLength(length: number): void;
+    setFixedLineLength(length: number): void;
     activateTool(tool: DrawingShape): void;
     deactivateTool(): void;
     pickOnGlobe(position: Cartesian2): Cesium.Cartesian3 | undefined;

package/components/drawing/cesiumDrawing.js

@@ -13,7 +13,7 @@ export default class CesiumDrawing {
     scene = undefined;
     handler = undefined;
     entities = undefined;
-    fixedLength = 0;
+    fixedLineLength = 0;
     context;
     get state() {
         return this.context.stateManager.state;
@@ -36,8 +36,8 @@ export default class CesiumDrawing {
             }
         });
     }
-    setFixedLength(length) {
-        this.fixedLength = Number.isNaN(length) ? 0 : length;
+    setFixedLineLength(length) {
+        this.fixedLineLength = Number.isNaN(length) ? 0 : length;
     }
     activateTool(tool) {
         if (!this.canExecute('globe.draw')) {
@@ -124,7 +124,7 @@ export default class CesiumDrawing {
         this.activeShapePoints = [];
     }
     fixLastLength(tool, length, coord) {
-        if (this.fixedLength > 0 && tool != DrawingShape.Rectangle) {
+        if (this.fixedLineLength > 0 && tool != DrawingShape.Rectangle) {
             const factor = tool == DrawingShape.Square ? Math.SQRT2 / 2 : 1;
             const pointCarto = new EllipsoidGeodesic(Cartographic.fromCartesian(coord[coord.length - 2]), Cartographic.fromCartesian(coord[coord.length - 1])).interpolateUsingSurfaceDistance(length * factor);
             coord[coord.length - 1] = Cartographic.toCartesian(pointCarto);
@@ -140,7 +140,7 @@ export default class CesiumDrawing {
                     }
                     else {
                         this.activeShapePoints[this.activeShapePoints.length - 1] = newPosition;
-                        this.fixLastLength(tool, this.fixedLength, this.activeShapePoints);
+                        this.fixLastLength(tool, this.fixedLineLength, this.activeShapePoints);
                     }
                     this.activeShapes.forEach((e) => this.entities.remove(e));
                     this.activeShapes = this.getShapes(tool, this.activeShapePoints, new DrawingFeature(tool, this.drawingState, this.config.drawing));

package/components/drawing/component-mobile.js

@@ -7,11 +7,11 @@ export default class DrawingComponentMobile extends DrawingComponent {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.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)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-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}.toolParameters{grid-template-columns:auto auto 60px auto;justify-content:left;align-items:center;margin-top:10px;display:grid}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto}#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:2fr 2fr 1fr 4em 1fr 1fr}#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}
+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:2fr 2fr 1fr 4em 1fr 1fr}#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}
 </style><style>
 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>
-<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 class="toolParameters"><button id="fixedLengthEnabled" class="gg-icon-button icon" disabled="${!this.fixedLengthOptionAllowed()}" onclick="${() => this.onToggleFixedLength()}">${this.htmlUnsafe(this.fixedLengthEnabled ? this.checkedIcon : this.noCheckedIcon)}</button> <label class="${this.fixedLengthEnabled && this.fixedLengthOptionAllowed() ? 'gg-label' : 'gg-label disabled'}" for="fixedLengthValue" i18n="Fix length to">Fix length to</label> <input class="gg-input" disabled="${!(this.fixedLengthEnabled && this.fixedLengthOptionAllowed())}" type="number" id="fixedLengthValue"> <label class="${this.fixedLengthEnabled && this.fixedLengthOptionAllowed() ? 'gg-label' : 'gg-label disabled'}" disabled="${!(this.fixedLengthEnabled && this.fixedLengthOptionAllowed())}" for="fixedLengthValue" i18n="meters">meters</label></div></div><div id="drawingListContainer"><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 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 i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <button class="gg-icon-button icon" id="visibleIconMeasure" tip="Show or hide measure information" onclick="${() => this.toggleMeasureVisibility()}">${this.htmlUnsafe(this.isDisplayMeasureEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span>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>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></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 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 i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <button class="gg-icon-button icon" id="visibleIconMeasure" tip="Show or hide measure information" onclick="${() => this.toggleMeasureVisibility()}">${this.htmlUnsafe(this.isDisplayMeasureEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span>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>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>`;
     };
     constructor() {
         super('drawing-mobile');

package/components/drawing/component.d.ts

@@ -1,5 +1,5 @@
 import { Color } from 'vanilla-picker';
-import DrawingFeature, { DrawingState, DrawingShape, ArrowStyle, ArrowPosition } from './drawingFeature.js';
+import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape, DrawingState } from './drawingFeature.js';
 import OlDrawing from './olDrawing.js';
 import CesiumDrawing from './cesiumDrawing.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
@@ -42,24 +42,25 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     unregisterEvents(): void;
     addColorPicker(id: string, set: (c: Color) => unknown, get: () => string): void;
     setTool(tool?: DrawingShape | null): void;
-    fixedLengthOptionAllowed(): boolean;
+    showToolParameters(tool?: DrawingShape | null): void;
+    protected fixedDimensionValueChangedHandler(e: CustomEvent): void;
     protected connectedCallback(): void;
     togglePanel(visible: boolean): void;
     get selectedFeatures(): DrawingFeature[];
     deselectAllFeatures(): void;
     onFeaturesChanged(oldFeatures: DrawingFeature[], newFeatures: DrawingFeature[]): void;
     onProjectionChanged(oldProj: string, newProj: string): void;
-    onToggleBatchMode(): void;
-    onToggleFixedLength(): void;
+    protected onToggleBatchMode(): void;
     onToggleFeatureSelection(feature: DrawingFeature): void;
     activateLayerInTreeAndMap(layerName?: string): void;
     deactivateLayerInTreeAnMap(): void;
-    getOptionsTitle(): string;
-    isDisplayNameEnabled(): boolean;
-    isDisplayMeasureEnabled(): boolean;
-    isLineStyleEnabled(): boolean;
-    isFillColorEnabled(): boolean;
+    protected getOptionsTitle(): string;
+    protected isDisplayNameEnabled(): boolean;
+    protected isDisplayMeasureEnabled(): boolean;
+    protected isLineStyleEnabled(): boolean;
+    protected isFillColorEnabled(): boolean;
     deleteFeature(feature: DrawingFeature): Promise<void>;
+    deleteAllFeatures(): Promise<void>;
     onOptionsChange(): void;
     onArrowsChange(): void;
     toggleNameVisibility(): void;

package/components/drawing/component.js

@@ -1,10 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { htmlFor as uHtmlFor } from 'uhtml/keyed';
 import { html as uHtml } from 'uhtml';
 import { v4 as uuidv4 } from 'uuid';
 import DrawingFeature, { DrawingShape } from './drawingFeature.js';
 import OlDrawing from './olDrawing.js';
 import CesiumDrawing from './cesiumDrawing.js';
-import { KML, GeoJSON, GPX } from 'ol/format.js';
+import { GeoJSON, GPX, KML } from 'ol/format.js';
 import { Polygon } from 'ol/geom.js';
 import Feature from 'ol/Feature.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
@@ -18,14 +24,15 @@ import locateIcon from './assets/locate.svg?raw';
 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';
 export default class DrawingComponent extends GirafeHTMLElement {
     template = () => {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.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)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-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}.toolParameters{grid-template-columns:auto auto 60px auto;justify-content:left;align-items:center;margin-top:10px;display:grid}.toolParameters>label{padding:0 5px}#drawingListContainer{flex-grow:1;overflow:hidden auto}#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:2fr 2fr 1fr 4em 1fr 1fr}#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}
+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:2fr 2fr 1fr 4em 1fr 1fr}#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}
 </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 class="toolParameters"><button id="fixedLengthEnabled" class="gg-icon-button icon" disabled="${!this.fixedLengthOptionAllowed()}" onclick="${() => this.onToggleFixedLength()}">${this.htmlUnsafe(this.fixedLengthEnabled ? this.checkedIcon : this.noCheckedIcon)}</button> <label class="${this.fixedLengthEnabled && this.fixedLengthOptionAllowed() ? 'gg-label' : 'gg-label disabled'}" for="fixedLengthValue" i18n="Fix length to">Fix length to</label> <input class="gg-input" disabled="${!(this.fixedLengthEnabled && this.fixedLengthOptionAllowed())}" type="number" id="fixedLengthValue"> <label class="${this.fixedLengthEnabled && this.fixedLengthOptionAllowed() ? 'gg-label' : 'gg-label disabled'}" disabled="${!(this.fixedLengthEnabled && this.fixedLengthOptionAllowed())}" for="fixedLengthValue" i18n="meters">meters</label></div></div><div id="drawingListContainer"><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 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 i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <button class="gg-icon-button icon" id="visibleIconMeasure" tip="Show or hide measure information" onclick="${() => this.toggleMeasureVisibility()}">${this.htmlUnsafe(this.isDisplayMeasureEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span>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>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></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 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 i18n="Font">Font</span> <input id="optionsNameFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.nameFontSize}" oninput="${() => this.onOptionsChange()}"> <span>pt</span> <button class="icon colorPicker" id="nameColorPicker"></button> <span i18n="Measures">Measures</span> <button class="gg-icon-button icon" id="visibleIconMeasure" tip="Show or hide measure information" onclick="${() => this.toggleMeasureVisibility()}">${this.htmlUnsafe(this.isDisplayMeasureEnabled() ? this.visibleIcon : this.notVisibleIcon)}</button> <span i18n="Font">Font</span> <input id="optionsMeasuresFontSize" class="gg-input" type="number" min="1" value="${this.selectedFeatures[0]?.measureFontSize}" oninput="${() => this.onOptionsChange()}"> <span>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>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>`;
     };
     isPanelVisible = false;
     panelTitle = 'drawing-panel';
@@ -111,24 +118,6 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
                 this.selectedFeatures[0].name = e.target.value;
                 this.refreshRender();
             };
-            this.getById('fixedLengthValue').oninput = (e) => {
-                const val = parseFloat(e.target.value);
-                this.olDrawing.setFixedLength(val);
-                this.cesiumDrawing.setFixedLength(val);
-            };
-            this.getById('fixedLengthEnabled').onchange = (e) => {
-                const elements = Array.from(this.shadowRoot.querySelectorAll('.fixedLengthElement'));
-                const option = e.target;
-                if (!option.disabled && option.checked) {
-                    elements.forEach((e) => e.classList.remove('disabled'));
-                    this.getById('fixedLengthValue').dispatchEvent(new Event('input'));
-                }
-                else {
-                    elements.forEach((e) => e.classList.add('disabled'));
-                    this.olDrawing.setFixedLength(0);
-                    this.cesiumDrawing.setFixedLength(0);
-                }
-            };
             this.setTool();
         }
         this.warnWhenInWebMercator();
@@ -172,16 +161,39 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         this.toolSelected = this.getById(this.buttons.find((x) => x.tool == tool).id);
         this.toolSelected.classList.add('selected');
         this.drawingState.activeTool = tool;
-    }
-    fixedLengthOptionAllowed() {
-        // Enable / disable fix length checkbox based on current tool
-        return ![
-            null,
-            DrawingShape.Point,
-            DrawingShape.Rectangle,
-            DrawingShape.FreehandPolyline,
-            DrawingShape.FreehandPolygon
-        ].includes(this.drawingState.activeTool);
+        this.showToolParameters(tool);
+    }
+    showToolParameters(tool = null) {
+        const toolName = tool ? DrawingShape[tool] : 'Pointer';
+        const toolParametersList = this.shadowRoot.querySelectorAll('.toolParameters');
+        let hasParameters = false;
+        toolParametersList.forEach((toolParameters) => {
+            const isParametersForTool = toolParameters.dataset.tool?.includes(toolName) ?? false;
+            toolParameters.style.display = isParametersForTool ? 'flex' : 'none';
+            hasParameters ||= isParametersForTool;
+        });
+        this.shadow.querySelector('#toolParametersContainer span.title').style.display = hasParameters
+            ? 'inline-block'
+            : 'none';
+    }
+    fixedDimensionValueChangedHandler(e) {
+        const details = e.detail;
+        switch (details.id) {
+            case 'fixedLineLength':
+                this.olDrawing.setFixedLineLength(details.value);
+                break;
+            case 'fixedSquareSide':
+                this.olDrawing.setFixedSquareSide(details.value);
+                break;
+            case 'fixedRectangleWidth':
+                this.olDrawing.setFixedRectangleWidth(details.value);
+                break;
+            case 'fixedRectangleHeight':
+                this.olDrawing.setFixedRectangleHeight(details.value);
+                break;
+            default:
+                console.debug('Value changed for unknown Dimension with id', details.id);
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -287,20 +299,12 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         }
     }
     onToggleBatchMode() {
-        // Currently not used, will possibly be part of advanced editing/drawing tools
         this.batchCreateMode = !this.batchCreateMode;
         if (this.batchCreateMode) {
             this.deselectAllFeatures();
         }
         this.refreshRender();
     }
-    onToggleFixedLength() {
-        this.fixedLengthEnabled = !this.fixedLengthEnabled;
-        const val = this.fixedLengthEnabled ? parseFloat(this.getById('fixedLengthValue').value) : 0;
-        this.olDrawing.setFixedLength(val);
-        this.cesiumDrawing.setFixedLength(val);
-        this.refreshRender();
-    }
     onToggleFeatureSelection(feature) {
         this.setTool(null);
         feature.selected = !feature.selected;
@@ -349,6 +353,13 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
             }
         }
     }
+    async deleteAllFeatures() {
+        const confirm = await window.gConfirm('Do you want to remove all features?', 'Delete Features');
+        if (confirm) {
+            this.drawingState.features = [];
+            this.refreshRender();
+        }
+    }
     onOptionsChange() {
         const nameFontSize = parseInt(this.getById('optionsNameFontSize').value);
         const measureFontSize = parseInt(this.getById('optionsMeasuresFontSize').value);
@@ -413,3 +424,24 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         }
     }
 }
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "fixedDimensionValueChangedHandler", null);
+__decorate([
+    UsedInTemplateOnly('Currently not used, will possibly be part of advanced editing/drawing tools')
+], DrawingComponent.prototype, "onToggleBatchMode", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "getOptionsTitle", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isDisplayNameEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isDisplayMeasureEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isLineStyleEnabled", null);
+__decorate([
+    UsedInTemplateOnly()
+], DrawingComponent.prototype, "isFillColorEnabled", null);

package/components/drawing/drawingFeature.d.ts

@@ -1,6 +1,6 @@
 import { Style } from 'ol/style.js';
 import type { IBrainSerializable } from '../../tools/state/brain/decorators.js';
-import type { Geometry } from 'ol/geom.js';
+import type { Circle as CircleGeom, Geometry } from 'ol/geom.js';
 import type Feature from 'ol/Feature.js';
 import IGirafeContext from '../../tools/context/icontext.js';
 export declare enum DrawingShape {
@@ -99,6 +99,7 @@ export default class DrawingFeature {
     getLengthText(length: number): string;
     getAreaText(area: number): string;
     getCoordText(coord: number[]): string;
+    getAzimuthText(circle: CircleGeom): string;
     isPointOrPolyline(): boolean;
     getVertexStyle(activeNode?: boolean): Style;
     static deserialize(serializedFeature: SerializedFeature, context: IGirafeContext): DrawingFeature;

package/components/drawing/drawingFeature.js

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Fill, RegularShape, Stroke, Style } from 'ol/style.js';
 import { toRadians } from 'ol/math.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
-import { getAreaAsMetricText, getLengthAsMetricText } from '../../tools/utils/olutils.js';
+import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../../tools/utils/olutils.js';
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -203,6 +203,9 @@ export default class DrawingFeature {
         }
         return 'E ' + coord[0].toFixed(2) + '\nN ' + coord[1].toFixed(2);
     }
+    getAzimuthText(circle) {
+        return getAzimuthAsText(this.displayMeasure ? circle.getProperties()['azimuth'] ?? undefined : undefined);
+    }
     isPointOrPolyline() {
         return (this.type === DrawingShape.Point ||
             this.type === DrawingShape.Polyline ||
@@ -259,12 +262,17 @@ export default class DrawingFeature {
     static geojsonFromOlFeature(olFeature, shapeType) {
         if (shapeType === DrawingShape.Disk) {
             const disk = olFeature.getGeometry();
+            const center = disk.getCenter();
+            const radius = disk.getRadius();
+            const pointer = disk.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
             return {
                 type: 'Feature',
                 geometry: {
                     type: 'Disk',
-                    center: disk.getCenter(),
-                    radius: disk.getRadius()
+                    center: center,
+                    radius: radius,
+                    azimuth: disk.getProperties()['azimuth'] ?? 0,
+                    pointer: pointer,
                 }
             };
         }

package/components/drawing/fixed-dimension/component.d.ts

@@ -0,0 +1,39 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+export type FixedDimensionValueChangedEventDetails = {
+    id: string;
+    dimension: string;
+    value: number;
+};
+export type DimensionUnit = {
+    name: string;
+    factor: number;
+};
+declare class FixedDimensionComponent extends GirafeHTMLElement {
+    static readonly observedAttributes: string[];
+    template: () => import("uhtml").Hole;
+    checkedIcon: string;
+    notCheckedIcon: string;
+    dimensionName: string;
+    dimension: string;
+    dimensionUnits: string;
+    onChange: string;
+    fixedDimensionEnabled: boolean;
+    renderedOnce: boolean;
+    lastValue: string;
+    units: DimensionUnit[];
+    unit: DimensionUnit | undefined;
+    constructor(name?: string);
+    render(): void;
+    private renderComponent;
+    protected connectedCallback(): void;
+    private refreshDimensionName;
+    private refreshDimension;
+    private refreshDimensionUnits;
+    private refreshOnChange;
+    toggleFixedDimensionEnabled(): void;
+    fixedValueChanged(e: InputEvent): void;
+    dimensionUnitChanged(e: Event): void;
+    dispatchFixedDimensionValueChangedEvent(valueAsString: string): void;
+    protected attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export default FixedDimensionComponent;

package/components/drawing/fixed-dimension/component.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+import checkedIcon from '../../../assets/icons/checked-full.svg?raw';
+import checkedNoIcon from '../../../assets/icons/checked-no.svg?raw';
+import { UsedInTemplateOnly } from '../../../decorators.js';
+const defaultUnits = 'm:1;km:1000';
+class FixedDimensionComponent extends GirafeHTMLElement {
+    static observedAttributes = ['dimensionName', 'dimension', 'dimensionUnits', 'onChange'];
+    template = () => {
+        return uHtml `<style>
+*{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.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)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
+</style><style>
+:host{grid-template-columns:auto auto 60px auto;justify-content:left;align-items:center;display:grid}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)}.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}button:disabled,input:disabled,.disabled{pointer-events:none;opacity:.5}label.gg-label{padding:0 5px!important;&.disabled{pointer-events:revert}}
+</style>
+<button class="gg-icon-button icon" onclick="${() => this.toggleFixedDimensionEnabled()}">${this.htmlUnsafe(this.fixedDimensionEnabled ? this.checkedIcon : this.notCheckedIcon)}</button> <label class="${this.fixedDimensionEnabled ? 'gg-label' : 'gg-label disabled'}" onclick="${() => this.toggleFixedDimensionEnabled()}" onkeyup="${() => this.toggleFixedDimensionEnabled()}" for="fixedValue" i18n="${'Fix ' + this.dimensionName + ' to'}"></label> <input class="gg-input" disabled="${!this.fixedDimensionEnabled}" oninput="${(e) => this.fixedValueChanged(e)}" type="number" id="fixedValue"> <select id="dimensionUnits" class="gg-select" disabled="${!this.fixedDimensionEnabled}" onchange="${(e) => this.dimensionUnitChanged(e)}">${this.units.map((unit) => uHtml `<option ?selected="${this.unit?.name === unit.name}" value="${unit.factor}">${unit.name}</option>`)}</select>`;
+    };
+    checkedIcon = checkedIcon;
+    notCheckedIcon = checkedNoIcon;
+    dimensionName = 'dimension';
+    dimension = 'dimension';
+    dimensionUnits = defaultUnits;
+    onChange = '';
+    fixedDimensionEnabled = false;
+    renderedOnce = false;
+    lastValue = '0';
+    units = [];
+    unit = undefined;
+    constructor(name = 'fixed-dimension') {
+        super(name);
+        this.displayStyle = 'grid';
+    }
+    render() {
+        super.render();
+        this.refreshDimensionName();
+        this.refreshDimension();
+        this.refreshDimensionUnits();
+        this.refreshOnChange();
+        this.renderComponent();
+        super.girafeTranslate();
+    }
+    renderComponent() {
+        this.show();
+        if (!this.renderedOnce) {
+            this.renderedOnce = true;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+    refreshDimensionName() {
+        this.dimensionName = this.getAttribute('dimensionName') ?? 'dimension';
+        this.refreshRender();
+    }
+    refreshDimension() {
+        this.dimension = this.getAttribute('dimension') ?? 'dimension';
+    }
+    refreshDimensionUnits(dimensionUnits = defaultUnits) {
+        console.log(`Refreshing dimension units for ${this.dimension} with units ${dimensionUnits}`);
+        this.dimensionUnits = dimensionUnits ?? this.getAttribute('dimensionUnits') ?? defaultUnits;
+        this.units = this.dimensionUnits.split(';').map((unit) => {
+            const [name, factor] = unit.split(':');
+            return { name, factor: Number.parseFloat(factor) };
+        });
+        this.unit = this.units[0];
+        this.refreshRender();
+    }
+    refreshOnChange() {
+        this.onChange = this.getAttribute('onChange') ?? '';
+        console.log(`Refreshing onChange for ${this.dimension} with onChange ${this.onChange}`);
+    }
+    toggleFixedDimensionEnabled() {
+        this.fixedDimensionEnabled = !this.fixedDimensionEnabled;
+        this.dispatchFixedDimensionValueChangedEvent(this.fixedDimensionEnabled ? this.lastValue : '0');
+        this.refreshRender();
+    }
+    fixedValueChanged(e) {
+        this.lastValue = e.target.value;
+        this.dispatchFixedDimensionValueChangedEvent(this.lastValue);
+        this.htmlUnsafe(this.onChange);
+    }
+    dimensionUnitChanged(e) {
+        const selectedUnitFactor = Number.parseFloat(e.target.value);
+        this.unit = this.units.find((unit) => unit.factor == selectedUnitFactor);
+        this.dispatchFixedDimensionValueChangedEvent(this.lastValue);
+    }
+    dispatchFixedDimensionValueChangedEvent(valueAsString) {
+        const value = Number.parseFloat(valueAsString);
+        this.dispatchEvent(new CustomEvent('fixed-dimension:value-changed', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                id: this.id,
+                dimension: this.dimension,
+                value: value * (this.unit?.factor ?? 1)
+            }
+        }));
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'dimensionName') {
+            this.dimensionName = newValue;
+        }
+        else if (name === 'dimension') {
+            this.dimension = newValue;
+        }
+        else if (name === 'dimensionUnits') {
+            this.refreshDimensionUnits(newValue);
+        }
+        else if (name === 'onChange') {
+            this.onChange = newValue;
+        }
+    }
+}
+__decorate([
+    UsedInTemplateOnly('attributeChangedCallback is not used in this component, but it is required by the HTMLElement interface.')
+], FixedDimensionComponent.prototype, "attributeChangedCallback", null);
+export default FixedDimensionComponent;

package/components/drawing/olDrawing.d.ts

@@ -24,7 +24,10 @@ export default class OlDrawing {
     snap: Snap | null;
     editContextMenu: ContextMenu | null;
     currentShape: DrawingShape | null;
-    fixedLength: number;
+    fixedLineLength: number;
+    fixedSquareSide: number;
+    fixedRectangleWidth: number;
+    fixedRectangleHeight: number;
     drawingSource: VectorSource;
     drawingLayer: VectorLayer;
     lastClosestFeature: Feature | null;
@@ -97,11 +100,15 @@ export default class OlDrawing {
     private getOlFeatureFromDrawingSource;
     private isOlFeatureInState;
     createOlFeature(dFeature: DrawingFeature): Feature<Geometry>;
-    setFixedLength(length: number): void;
+    setFixedLineLength(length: number): void;
+    setFixedSquareSide(length: number): void;
+    setFixedRectangleWidth(width: number): void;
+    setFixedRectangleHeight(height: number): void;
     createLineStringFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
     createSquareFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry, proj: Projection): SimpleGeometry;
     createPolygonFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
     createDiskFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
+    createRectangleFixedSides(coordinates: SketchCoordType, geom: SimpleGeometry, proj: Projection): SimpleGeometry;
     addDrawInteraction(tool: DrawingShape): void;
     centerViewOnFeature(drawingFeature: DrawingFeature): void;
     getStyle(dFeature: DrawingFeature, olFeature: Feature<Geometry>): Style[];

package/components/drawing/olDrawing.js

@@ -59,7 +59,10 @@ export default class OlDrawing {
     snap = null;
     editContextMenu = null;
     currentShape = null;
-    fixedLength = 0;
+    fixedLineLength = 0;
+    fixedSquareSide = 0;
+    fixedRectangleWidth = 0;
+    fixedRectangleHeight = 0;
     drawingSource;
     drawingLayer;
     lastClosestFeature = null;
@@ -138,6 +141,25 @@ export default class OlDrawing {
             pixelTolerance: this.map.pixelTolerance
         });
         this.map.olMap.addInteraction(this.modify);
+        this.modify.on('modifystart', (e) => {
+            e.features.forEach((olFeature) => {
+                olFeature.on('change', (e) => {
+                    const geometry = e.target.getGeometry();
+                    if (geometry && geometry.getType() == 'Circle') {
+                        const circle = geometry;
+                        const newRadius = circle.getRadius();
+                        const properties = circle.getProperties();
+                        const { pointer } = properties;
+                        const oldRadiusLine = new LineString([circle.getCenter(), pointer]);
+                        oldRadiusLine.scale(newRadius / oldRadiusLine.getLength());
+                        circle.setProperties({
+                            ...properties,
+                            pointer: oldRadiusLine.getLastCoordinate()
+                        });
+                    }
+                });
+            });
+        });
         // Update the modified geometries in the state
         this.modify.on('modifyend', (e) => {
             e.features.forEach((olFeature) => this.updateGeometryInState(olFeature)); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
@@ -434,7 +456,12 @@ export default class OlDrawing {
         const geometry = dFeature.geojson.geometry;
         let olFeature;
         if (geometry.type == 'Disk') {
-            olFeature = new Feature(new CircleGeom(geometry.center, geometry.radius));
+            const geom = new CircleGeom(geometry.center, geometry.radius);
+            geom.setProperties({
+                azimuth: geometry.azimuth,
+                pointer: geometry.pointer
+            });
+            olFeature = new Feature(geom);
         }
         else {
             olFeature = new Feature(new GeoJSON().readFeatures(dFeature.geojson)[0].getGeometry());
@@ -443,33 +470,91 @@ export default class OlDrawing {
         olFeature.setStyle((f) => this.getStyle(dFeature, f));
         return olFeature;
     }
-    setFixedLength(length) {
-        this.fixedLength = Number.isNaN(length) ? 0 : length;
+    setFixedLineLength(length) {
+        this.fixedLineLength = Number.isNaN(length) ? 0 : length;
+    }
+    setFixedSquareSide(length) {
+        this.fixedSquareSide = Number.isNaN(length) ? 0 : length;
+    }
+    setFixedRectangleWidth(width) {
+        this.fixedRectangleWidth = Number.isNaN(width) ? 0 : width;
+    }
+    setFixedRectangleHeight(height) {
+        this.fixedRectangleHeight = Number.isNaN(height) ? 0 : height;
     }
     createLineStringFixedLength(coordinates, geom) {
-        this.fixLastLength(this.fixedLength, coordinates);
+        this.fixLastLength(this.fixedLineLength, coordinates);
         geom = geom ?? new LineString(coordinates);
         geom.setCoordinates(coordinates);
         return geom;
     }
     createSquareFixedLength(coordinates, geom, proj) {
-        this.fixLastLength(this.fixedLength, coordinates, Math.SQRT2);
-        return createRegularPolygon(4)(coordinates, geom, proj);
+        this.fixLastLength(this.fixedSquareSide, coordinates, Math.SQRT2);
+        const poly = createRegularPolygon(4)(coordinates, geom, proj);
+        console.log('createSquareFixedLength ' + JSON.stringify(poly.getCoordinates()));
+        return poly;
     }
     createPolygonFixedLength(coordinates, geom) {
         const coord = coordinates[0];
-        this.fixLastLength(this.fixedLength, coord);
+        this.fixLastLength(this.fixedLineLength, coord);
         geom = geom ?? new Polygon([coord]);
         geom.setCoordinates([coord]);
         return geom;
     }
     createDiskFixedLength(coordinates, geom) {
         const coord = coordinates;
-        this.fixLastLength(this.fixedLength, coord);
+        this.fixLastLength(this.fixedLineLength, coord);
         geom = geom ?? new CircleGeom(coord[0], getDistance(coord, this.state.projection));
         geom.setCenterAndRadius(coord[0], getDistance(coord, this.state.projection));
+        geom.setProperties({
+            azimuth: ((90 - (Math.atan2(coord[1][1] - coord[0][1], coord[1][0] - coord[0][0]) * (180 / Math.PI)) + 360) % 360),
+            pointer: coord[1]
+        });
         return geom;
     }
+    createRectangleFixedSides(coordinates, geom, proj) {
+        if (coordinates.length < 2) {
+            geom = geom ?? createBox()(coordinates, geom, proj);
+            return geom;
+        }
+        // If no fixed dimensions are set, behave like the normal box drawing.
+        if (this.fixedRectangleWidth <= 0 && this.fixedRectangleHeight <= 0) {
+            geom = geom ?? createBox()(coordinates, geom, proj);
+            return createBox()(coordinates, geom, proj);
+        }
+        const coords = coordinates;
+        const start = coords[0];
+        const pointer = coords[1];
+        // Decide in which quadrant the user is dragging.
+        const signX = pointer[0] >= start[0] ? 1 : -1;
+        const signY = pointer[1] >= start[1] ? 1 : -1;
+        // Convert "meters" (or whatever your getDistance returns) to map units along X and Y.
+        const xUnit = [start[0] + 1, start[1]];
+        const yUnit = [start[0], start[1] + 1];
+        const metersPerMapUnitX = getDistance([start, xUnit], this.state.projection);
+        const metersPerMapUnitY = getDistance([start, yUnit], this.state.projection);
+        // Guard against division by 0 in weird edge cases.
+        if (metersPerMapUnitX <= 0 || metersPerMapUnitY <= 0) {
+            geom = geom ?? createBox()(coordinates, geom, proj);
+            return createBox()(coordinates, geom, proj);
+        }
+        const dxMapUnits = (this.fixedRectangleWidth / metersPerMapUnitX) * signX;
+        const dyMapUnits = (this.fixedRectangleHeight / metersPerMapUnitY) * signY;
+        if (dxMapUnits != 0 && dyMapUnits != 0) {
+            // Overwrite width and height
+            coords[1] = [start[0] + dxMapUnits, start[1] + dyMapUnits];
+        }
+        else if (dxMapUnits != 0) {
+            // Overwrite only width
+            coords[1] = [start[0] + dxMapUnits, pointer[1]];
+        }
+        else if (dyMapUnits != 0) {
+            // Overwrite only height
+            coords[1] = [pointer[0], start[1] + dyMapUnits];
+        }
+        geom = geom ?? createBox()(coords, geom, proj);
+        return createBox()(coords, geom, proj);
+    }
     addDrawInteraction(tool) {
         this.removeDrawInteraction();
         // Block feature selection while drawing by registering 'map.select' exclusively
@@ -499,7 +584,7 @@ export default class OlDrawing {
                 break;
             case DrawingShape.Rectangle:
                 olTool = 'Circle';
-                geomFunction = createBox();
+                geomFunction = this.createRectangleFixedSides.bind(this);
                 break;
             case DrawingShape.FreehandPolyline:
                 olTool = 'LineString';
@@ -661,12 +746,13 @@ export default class OlDrawing {
             addLabel(polygon.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(polygon, this.state.projection)));
         }
         else if (dFeature.type == DrawingShape.Disk) {
-            const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: dFeature.strokeWidth }));
-            if (!dFeature.displayMeasure) {
-                radiusDataForCircle.style.setGeometry(new LineString([]));
+            if (dFeature.displayMeasure) {
+                const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: dFeature.strokeWidth }));
+                styles.push(radiusDataForCircle.style);
+                const lengthText = dFeature.getLengthText(radiusDataForCircle.radius);
+                const azimuthText = dFeature.getAzimuthText(geometry);
+                addLabel(getHalfPoint(radiusDataForCircle.radiusLine), `${lengthText}, ${azimuthText}`);
             }
-            styles.push(radiusDataForCircle.style);
-            addLabel(getHalfPoint(radiusDataForCircle.radiusLine), dFeature.getLengthText(radiusDataForCircle.radius));
         }
         else if (dFeature.type == DrawingShape.FreehandPolygon) {
             const polygon = geometry;

package/components/main.d.ts

@@ -12,6 +12,8 @@ export { default as CrossSectionViewComponent } from './cross-section/cross-sect
 export { default as DisplayMenuButtonMobile } from './displaymenubutton-mobile/component.js';
 export { default as DisplaySelectorButtonMobile } from './displayselectorbutton-mobile/component.js';
 export { default as DrawingComponent } from './drawing/component.js';
+export type { FixedDimensionValueChangedEventDetails, DimensionUnit } from './drawing/fixed-dimension/component.js';
+export { default as FixedDimensionComponent } from './drawing/fixed-dimension/component.js';
 export { default as DrawingContainerMobile } from './drawing-container-mobile/component.js';
 export { default as EditComponent } from './edit/component.js';
 export { default as EditFromComponent } from './edit/editform/component.js';

package/components/main.js

@@ -12,6 +12,7 @@ export { default as CrossSectionViewComponent } from './cross-section/cross-sect
 export { default as DisplayMenuButtonMobile } from './displaymenubutton-mobile/component.js';
 export { default as DisplaySelectorButtonMobile } from './displayselectorbutton-mobile/component.js';
 export { default as DrawingComponent } from './drawing/component.js';
+export { default as FixedDimensionComponent } from './drawing/fixed-dimension/component.js';
 export { default as DrawingContainerMobile } from './drawing-container-mobile/component.js';
 export { default as EditComponent } from './edit/component.js';
 export { default as EditFromComponent } from './edit/editform/component.js';

package/decorators.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Use this Decorator to mark a Method that seems unused but is used in the HTML Template.
+ * @constructor
+ */
+export declare function UsedInTemplateOnly(_reason?: string): (_target: object, _propertyKey: string, _descriptor: PropertyDescriptor) => void;

package/decorators.js

@@ -0,0 +1,7 @@
+/**
+ * Use this Decorator to mark a Method that seems unused but is used in the HTML Template.
+ * @constructor
+ */
+export function UsedInTemplateOnly(_reason = 'Method is used in HTML Template') {
+    return function (_target, _propertyKey, _descriptor) { };
+}

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2433737633",
+  "version": "1.1.0-dev.2438378072",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2433737633", "build":"2433737633", "date":"07/04/2026"}
+{"version":"1.1.0-dev.2438378072", "build":"2438378072", "date":"08/04/2026"}

package/tools/app/geogirafeapp.js

@@ -47,6 +47,7 @@ import { DrawingState } from '../../components/drawing/drawingFeature.js';
 import DrawingSerializer from '../../components/drawing/drawingSerializer.js';
 import { ShareState, ShareStateSerializer } from '../../components/share/sharestate.js';
 import SelectionToolComponent from '../../components/selectiontool/component.js';
+import FixedDimensionComponent from '../../components/drawing/fixed-dimension/component.js';
 export default class GeoGirafeApp {
     readyPromise;
     resolveReady;
@@ -138,6 +139,7 @@ export default class GeoGirafeApp {
         customElements.define('girafe-tree-view-theme', TreeViewThemeComponent);
         customElements.define('girafe-user-preferences', UserPreferencesComponent);
         customElements.define('girafe-video-record', VideoRecordComponent);
+        customElements.define('girafe-fixed-dimension', FixedDimensionComponent);
     }
     async initializeServiceWorker() {
         try {

package/tools/main.d.ts

@@ -106,7 +106,7 @@ export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
-export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText } from './utils/olutils.js';
+export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';

package/tools/main.js

@@ -81,7 +81,7 @@ export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
-export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText } from './utils/olutils.js';
+export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';

package/tools/utils/olutils.d.ts

@@ -48,3 +48,4 @@ export declare const getRadiusDataForCircle: (circle: Circle, defaultStyle: Styl
 };
 export declare const getLengthAsMetricText: (length?: number) => string;
 export declare const getAreaAsMetricText: (area?: number) => string;
+export declare const getAzimuthAsText: (azimuth?: number) => string;

package/tools/utils/olutils.js

@@ -148,7 +148,8 @@ export const getLabelStyle = (position, text, labelStyle) => {
 export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
     const radius = circle.getRadius();
     const center = circle.getCenter();
-    const radiusLine = [center, [center[0] + radius, center[1]]];
+    const pointer = circle.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
+    const radiusLine = [center, pointer];
     const radiusLineStyle = defaultStyle.clone();
     radiusLineStyle.setStroke(stroke);
     radiusLineStyle.getText().setText('');
@@ -173,3 +174,9 @@ export const getAreaAsMetricText = (area) => {
     }
     return '';
 };
+export const getAzimuthAsText = (azimuth) => {
+    if (azimuth) {
+        return `${azimuth.toFixed(0)}°`;
+    }
+    return '';
+};