JS: Enhancing digitizing component and module

assets/src/components/Digitizing.js

@@ -19,6 +19,7 @@ import '../images/svg/freehand.svg';
 import '../images/svg/pencil.svg';
 import '../images/svg/edit.svg';
 import '../images/svg/eraser.svg';
+import '../images/svg/eraser-all.svg';
 import '../images/svg/save.svg';
 
 import '../images/svg/file-download.svg';
@@ -111,10 +112,15 @@ export default class Digitizing extends HTMLElement {
                     <use xlink:href="#eraser"/>
                 </svg>
             </button>
+            <button type="button" class="digitizing-all btn" ?disabled=${!mainLizmap.digitizing.featureDrawn} @click=${() => this.eraseAll()} data-original-title="${lizDict['digitizing.toolbar.erase.all']}">
+                <svg>
+                    <use xlink:href="#eraser-all"/>
+                </svg>
+            </button>
             <button type="button" class="digitizing-toggle-visibility btn" ?disabled=${!mainLizmap.digitizing.featureDrawn} @click=${() => mainLizmap.digitizing.toggleVisibility()} data-original-title="${lizDict['tree.button.checkbox']}">
                 <i class="icon-eye-${mainLizmap.digitizing.visibility ? 'open' : 'close'}"></i>
             </button>
-            <button type="button" class="digitizing-toggle-measure btn ${mainLizmap.digitizing.hasMeasureVisible ? 'active btn-primary' : ''}" @click=${() => mainLizmap.digitizing.toggleMeasure()} data-original-title="${lizDict['digitizing.toolbar.measure']}">
+            <button type="button" class="digitizing-toggle-measure btn ${mainLizmap.digitizing.hasMeasureVisible ? 'active btn-primary' : ''} ${this.hasAttribute('measure') ? '' : 'hide'}" @click=${() => mainLizmap.digitizing.toggleMeasure()} data-original-title="${lizDict['digitizing.toolbar.measure']}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                     <path d="M17 3l4 4l-14 14l-4 -4z"></path>
@@ -124,7 +130,7 @@ export default class Digitizing extends HTMLElement {
                     <path d="M7 16l-1.5 -1.5"></path>
                 </svg>
             </button>
-            <button type="button" class="digitizing-save btn ${mainLizmap.digitizing.isSaved ? 'active btn-primary' : ''} ${this.hasAttribute('save') ? '' : 'hide'}" @click=${()=> mainLizmap.digitizing.toggleSave()} data-original-title="${lizDict['digitizing.toolbar.save']}">
+            <button type="button" class="digitizing-save btn ${mainLizmap.digitizing.isSaved ? 'active btn-primary' : ''} ${this.hasAttribute('save') ? '' : 'hide'}" @click=${()=> this.toggleSave()} data-original-title="${lizDict['digitizing.toolbar.save']}">
                 <svg>
                     <use xlink:href="#save" />
                 </svg>
@@ -167,6 +173,9 @@ export default class Digitizing extends HTMLElement {
                     <span class="file-name"></span>
                 </div>
             </div>
+            <div class="digitizing-state hide">
+                <div class="digitizing-save-state hide">${lizDict['digitizing.toolbar.save.state']}</div>
+            </div>
             <div class="digitizing-constraints ${mainLizmap.digitizing.hasConstraintsPanelVisible ? '' : 'hide'}">
                 <details>
                     <summary>${lizDict['digitizing.constraint.title']}</summary>${lizDict['digitizing.constraint.details']}
@@ -213,10 +222,30 @@ export default class Digitizing extends HTMLElement {
             () => {
                 render(mainTemplate(), this);
             },
-            ['digitizing.featureDrawn', 'digitizing.visibility', 'digitizing.toolSelected', 'digitizing.editionBegins', 'digitizing.editionEnds', 'digitizing.erasingBegins', 'digitizing.erasingEnds', 'digitizing.erase', 'digitizing.drawColor', 'digitizing.save', 'digitizing.measure', 'digitizing.editedFeatureText', 'digitizing.editedFeatureRotation', 'digitizing.editedFeatureScale']
+            ['digitizing.featureDrawn', 'digitizing.visibility', 'digitizing.toolSelected', 'digitizing.editionBegins', 'digitizing.editionEnds', 'digitizing.erasingBegins', 'digitizing.erasingEnds', 'digitizing.erase', 'digitizing.erase.all', 'digitizing.drawColor', 'digitizing.save', 'digitizing.measure', 'digitizing.editedFeatureText', 'digitizing.editedFeatureRotation', 'digitizing.editedFeatureScale']
         );
     }
 
     disconnectedCallback() {
     }
+
+    eraseAll() {
+        if (!confirm(lizDict['digitizing.confirm.erase.all'])) {
+            return false;
+        }
+        mainLizmap.digitizing.eraseAll();
+    }
+
+    toggleSave() {
+        mainLizmap.digitizing.toggleSave();
+        if (mainLizmap.digitizing.isSaved) {
+            this.querySelector('button.digitizing-save').dataset.originalTitle = lizDict['digitizing.toolbar.save.remove'];
+            this.querySelector('div.digitizing-save-state').classList.remove('hide');
+            this.querySelector('div.digitizing-state').classList.remove('hide');
+        } else {
+            this.querySelector('button.digitizing-save').dataset.originalTitle = lizDict['digitizing.toolbar.save'];
+            this.querySelector('div.digitizing-save-state').classList.add('hide');
+            this.querySelector('div.digitizing-state').classList.add('hide');
+        }
+    }
 }

assets/src/modules/Digitizing.js

@@ -345,7 +345,7 @@ export default class Digitizing {
         } else {
             this._contextFeatures[this._context] = null;
         }
-        this._isSaved = false;
+        this._isSaved = (localStorage.getItem(this._repoAndProjectString + '_' + this._context + '_drawLayer') !== null);
         this._measureTooltips.forEach((measureTooltip) => {
             mainLizmap.map.removeOverlay(measureTooltip[0]);
             mainLizmap.map.removeOverlay(measureTooltip[1]);
@@ -577,7 +577,7 @@ export default class Digitizing {
                         hitTolerance: 8
                     });
                     if(features.length){
-                        if (!confirm(lizDict['digitizing.confirme.erase'])) {
+                        if (!confirm(lizDict['digitizing.confirm.erase'])) {
                             return false;
                         }
 
@@ -990,6 +990,20 @@ export default class Digitizing {
         mainEventDispatcher.dispatch('digitizing.save');
     }
 
+    eraseAll() {
+        this._measureTooltips.forEach((measureTooltip) => {
+            mainLizmap.map.removeOverlay(measureTooltip[0]);
+            mainLizmap.map.removeOverlay(measureTooltip[1]);
+            this._measureTooltips.delete(measureTooltip);
+        });
+        this._drawSource.clear();
+
+        this.saveFeatureDrawn();
+
+        mainEventDispatcher.dispatch('digitizing.erase.all');
+        mainEventDispatcher.dispatch('digitizing.erase');
+    }
+
     /**
      * Save all drawn features in local storage
      */
@@ -1019,6 +1033,8 @@ export default class Digitizing {
             } else {
                 localStorage.removeItem(this._repoAndProjectString + '_' + this._context + '_drawLayer');
             }
+        } else {
+            localStorage.removeItem(this._repoAndProjectString + '_' + this._context + '_drawLayer');
         }
     }
 
@@ -1087,6 +1103,7 @@ export default class Digitizing {
             }
 
             // Draw features
+            this._isSaved = (loadedFeatures.length > 0);
             this._drawSource.addFeatures(loadedFeatures);
         }
     }

lizmap/app/locales/cs_CZ/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Velikost
 digitizing.toolbar.import=Importovat v GeoJSON, GPX nebo KML
 digitizing.toolbar.edit=Upravte ( podržte klávesu "Shift" pro výběr více funkcí)
 digitizing.toolbar.erase=Smazat některé funkce
-digitizing.confirme.erase=Opravdu chcete smazat tuto funkci?
+digitizing.confirm.erase=Opravdu chcete smazat tuto funkci?
 digitizing.toolbar.save=Uložit kresbu v prohlížeči
 digitizing.toolbar.measure=Měření
 digitizing.constraint.title=Omezení

lizmap/app/locales/de_DE/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=GeoJSON, GPX oder KML importieren
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Zeichnung im Browser speichern
 digitizing.toolbar.measure=Grössen
 digitizing.constraint.title=Constraints

lizmap/app/locales/el_GR/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Measures
 digitizing.constraint.title=Constraints

lizmap/app/locales/es_ES/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Importación en GeoJSON, GPX o KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Medidas
 digitizing.constraint.title=Constraints

lizmap/app/locales/eu_ES/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Measures
 digitizing.constraint.title=Constraints

lizmap/app/locales/fi_FI/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Mitat
 digitizing.constraint.title=Constraints

lizmap/app/locales/fr_FR/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Taille
 digitizing.toolbar.import=Import en GeoJSON, GPX ou KML
 digitizing.toolbar.edit=Éditer (maintenir "Shift" pour sélectionner plusieurs entités)
 digitizing.toolbar.erase=Supprimer quelques entités
-digitizing.confirme.erase=Êtes-vous certain de vouloir supprimer cet entité ?
+digitizing.confirm.erase=Êtes-vous certain de vouloir supprimer cet entité ?
 digitizing.toolbar.save=Sauvegarder le dessin dans le navigateur
 digitizing.toolbar.measure=Mesures
 digitizing.constraint.title=Contraintes

lizmap/app/locales/gl_ES/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Importar en GeoJSON, GPX ou KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Garde o debuxo no navegador
 digitizing.toolbar.measure=Medidas
 digitizing.constraint.title=Constraints

lizmap/app/locales/hu_HU/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Mérések
 digitizing.constraint.title=Constraints

lizmap/app/locales/it_IT/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Dimensione
 digitizing.toolbar.import=Importa in GeoJSON, GPX o KML
 digitizing.toolbar.edit=Modifica (tieni premuto il tasto "Shift" per selezionare più elementi)
 digitizing.toolbar.erase=Elimina alcuni elementi
-digitizing.confirme.erase=Sei sicuro di voler eliminare questo elemento?
+digitizing.confirm.erase=Sei sicuro di voler eliminare questo elemento?
 digitizing.toolbar.save=Salva il disegno nel browser
 digitizing.toolbar.measure=Misure
 digitizing.constraint.title=Vincoli

lizmap/app/locales/ja_JP/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=GeoJSON、GPX または KML でのインポート‎
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=‎ブラウザで描画を保存する‎
 digitizing.toolbar.measure=計測
 digitizing.constraint.title=Constraints

lizmap/app/locales/nl_NL/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Grootte
 digitizing.toolbar.import=Importeer in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Bewerken (houd 'Shift' ingedrukt om meerdere objecten te selecteren)
 digitizing.toolbar.erase=Verwijder enkele functies
-digitizing.confirme.erase=Weet u zeker dat u deze functie wilt verwijderen?
+digitizing.confirm.erase=Weet u zeker dat u deze functie wilt verwijderen?
 digitizing.toolbar.save=Sla tekening op in de browser
 digitizing.toolbar.measure=Eenheden
 digitizing.constraint.title=Beperkingen

lizmap/app/locales/no_NO/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Measures
 digitizing.constraint.title=Constraints

lizmap/app/locales/pl_PL/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Rozmiar
 digitizing.toolbar.import=Importuj GeoJSON, GPX lub KML
 digitizing.toolbar.edit=Edytuj (przytrzymaj „Shift”, aby wybrać wiele funkcji)
 digitizing.toolbar.erase=Usuń niektóre obiekty
-digitizing.confirme.erase=Czy na pewno chcesz usunąć ten obiekt?
+digitizing.confirm.erase=Czy na pewno chcesz usunąć ten obiekt?
 digitizing.toolbar.save=Zapisz rysunek w przeglądarce
 digitizing.toolbar.measure=Pomiary
 digitizing.constraint.title=Wymagania

lizmap/app/locales/pt_BR/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Import in GeoJSON, GPX or KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Medidas
 digitizing.constraint.title=Constraints

lizmap/app/locales/pt_PT/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Tamanho
 digitizing.toolbar.import=Importar GeoJSON, GPX ou KML
 digitizing.toolbar.edit=Editar (manter pressionada a tecla "Shift" para selecionar vários elementos)
 digitizing.toolbar.erase=Eliminar alguns elementos
-digitizing.confirme.erase=Tem a certeza que pretende eliminar este elemento?
+digitizing.confirm.erase=Tem a certeza que pretende eliminar este elemento?
 digitizing.toolbar.save=Guardar o desenho no browser
 digitizing.toolbar.measure=Medições
 digitizing.constraint.title=Restrições

lizmap/app/locales/ro_RO/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Dimensiune
 digitizing.toolbar.import=Importare GeoJSON, GPX sau KML
 digitizing.toolbar.edit=Editează (ține apăsată tasta "Shift" pentru a selecta mai multe obiecte)
 digitizing.toolbar.erase=Șterge unele obiecte
-digitizing.confirme.erase=Sigur dorești să ștergi acest obiect?
+digitizing.confirm.erase=Sigur dorești să ștergi acest obiect?
 digitizing.toolbar.save=Salvare desen în browser
 digitizing.toolbar.measure=Măsurări
 digitizing.constraint.title=Constrângeri

lizmap/app/locales/ru_RU/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Импорт в GeoJSON, GPX или KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Сохранить чертеж в браузере
 digitizing.toolbar.measure=Измерения
 digitizing.constraint.title=Constraints

lizmap/app/locales/sk_SK/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Importujte v GeoJSON, GPX alebo KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Save draw in the browser
 digitizing.toolbar.measure=Miery
 digitizing.constraint.title=Constraints

lizmap/app/locales/sl_SI/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Velikost
 digitizing.toolbar.import=Uvozite v GeoJSON, GPX ali KML
 digitizing.toolbar.edit=Urejanje (z "Shift" izberete več elementov)
 digitizing.toolbar.erase=Izbrišite elemente
-digitizing.confirme.erase=Želite izbrisati element?
+digitizing.confirm.erase=Želite izbrisati element?
 digitizing.toolbar.save=Shranite sliko v brskalniku
 digitizing.toolbar.measure=Ukrepi
 digitizing.constraint.title=Relacije

lizmap/app/locales/sv_SE/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Importera från GeoJSON. GPX eller KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Spara ritningen i webbläsaren
 digitizing.toolbar.measure=Mätningar
 digitizing.constraint.title=Constraints

lizmap/app/locales/uk_UA/view/locales/dictionnary.UTF-8.properties

@@ -192,7 +192,7 @@ digitizing.toolbar.textScale=Size
 digitizing.toolbar.import=Імпорт в GeoJSON, GPX або KML
 digitizing.toolbar.edit=Edit (hold "Shift" to select multiple features)
 digitizing.toolbar.erase=Delete some features
-digitizing.confirme.erase=Are you sure you want to delete this feature?
+digitizing.confirm.erase=Are you sure you want to delete this feature?
 digitizing.toolbar.save=Збережіть малюнок у браузері
 digitizing.toolbar.measure=Заходи
 digitizing.constraint.title=Constraints