dragging of markers can be disabled

flopp · Jan 5, 2023 · 7a47381 · 7a47381
1 parent 6f504bc
commit 7a47381
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 6 deletions.
diff --git a/src/components/leaflet_wrapper.ts b/src/components/leaflet_wrapper.ts
@@ -401,6 +401,15 @@ export class LeafletWrapper extends MapStateObserver {
     }
 
     protected update_marker_object(obj: IMarkerObjDict, marker: Marker): void {
+        const draggable = this.app.map_state.draggable_markers();
+        if (obj.marker_obj.dragging!.enabled() !== draggable) {
+            if (draggable) {
+                obj.marker_obj.dragging!.enable();
+            } else {
+                obj.marker_obj.dragging!.disable();
+            }
+        }
+
         obj.marker_obj.setLatLng(from_coordinates(marker.coordinates));
         if (marker.radius > 0) {
             if (obj.circle_obj === null) {

diff --git a/src/components/map_state.ts b/src/components/map_state.ts
@@ -49,6 +49,7 @@ export class MapState {
     public settings_marker_random_color: boolean;
     public settings_marker_color: Color = Color.default_color();
     public settings_marker_radius: number = 0;
+    public settings_marker_draggable: boolean = false;
     public settings_line_distance_format: DistanceFormat = DistanceFormat.m;
     public settings_line_random_color: boolean = true;
     public settings_line_color: Color = Color.default_color();
@@ -87,6 +88,7 @@ export class MapState {
         this.storage.set_bool("settings.marker.random_color", this.settings_marker_random_color);
         this.storage.set_color("settings.marker.color", this.settings_marker_color);
         this.storage.set_float("settings.marker.radius", this.settings_marker_radius);
+        this.storage.set_bool("settings.marker.draggable", this.settings_marker_draggable);
 
         this.storage.set("settings.line.distance_format", this.settings_line_distance_format);
         this.storage.set_bool("settings.line.random_color", this.settings_line_random_color);
@@ -173,6 +175,7 @@ export class MapState {
             color: this.storage.get_color("settings.marker.color", new Color("FF0000")),
             radius: this.storage.get_float("settings.marker.radius", 0)!,
         });
+        this.set_draggable_markers(this.storage.get_bool("settings.marker.draggable", false));
 
         // Settings
         const distance_format = parseDistanceFormat(
@@ -219,6 +222,7 @@ export class MapState {
         ok_keys.add("settings.marker.random_color");
         ok_keys.add("settings.marker.color");
         ok_keys.add("settings.marker.radius");
+        ok_keys.add("settings.marker.draggable");
         ok_keys.add("settings.line.distance_format");
         ok_keys.add("settings.line.random_color");
         ok_keys.add("settings.line.color");
@@ -825,6 +829,16 @@ export class MapState {
         this.update_observers(MapStateChange.MARKERS);
     }
 
+    public set_draggable_markers(value: boolean): void {
+        this.settings_marker_draggable = value;
+        this.storage.set_bool("settings.marker.draggable", this.settings_marker_draggable);
+        this.update_observers(MapStateChange.MARKERS);
+    }
+
+    public draggable_markers(): boolean {
+        return this.settings_marker_draggable;
+    }
+
     public set_default_line_settings(settings: ILineSettingsDict): void {
         this.settings_line_distance_format = settings.distance_format;
         this.storage.set("settings.line.distance_format", this.settings_line_distance_format);
@@ -1006,6 +1020,7 @@ export class MapState {
                     random_color: this.settings_marker_random_color,
                     color: this.settings_marker_color.to_hash_string(),
                     radius: this.settings_marker_radius,
+                    draggable: this.settings_marker_draggable,
                 },
                 lines: {
                     distance_format: this.settings_line_distance_format,
@@ -1073,6 +1088,9 @@ export class MapState {
                         this.settings_marker_radius = radius;
                     }
                 }
+                if ("draggable" in data.settings.markers) {
+                    this.settings_marker_draggable = data.settings.markers.draggable;
+                }
             }
             if ("lines" in data.settings) {
                 if ("distance_format" in data.settings.lines) {

diff --git a/src/components/news_dialog.ts b/src/components/news_dialog.ts
@@ -81,7 +81,7 @@ const news_articles: NewsArticle[] = [
         <i>Florian aka. Flopp</i>`,
     ),
     new NewsArticle(
-        "2022-01-01",
+        "2022-01-03",
         `And... here's another larger update:
 
         - there's now a satellite base map with roads and labels (World Imagery layer  + OSM overlay),
@@ -105,13 +105,30 @@ const news_articles: NewsArticle[] = [
         Beste Grüße,
         Florian aka. Flopp`,
     ),
-];
+    new NewsArticle(
+        "2023-01-05",
+        `Update:
 
-// Optimized updating of markers
-// Multiple search results
-// Yes/no dialog when deleting all markers/lines
-// Blog, add help links
+        - Searching for a place name will now produce a list of search results.
+        - Dragging of markers on the map can be disabled to prevent unvoluntary modification of Marker positions (dragging is disbaled by default).
+        - A yes/no dialog is displayed before deleting all markers/lines.
+        - There's now an <a href="https://blog.flopp.net" target="_blank">additional website with documentation and news (blog.flopp.net)</a>; there will be links to specific documentation pages (look for "?" buttons).
+        - Marker updates have been optimized; the map should now behave more smoothly.
+
+        Best regards,
+        Florian aka. Flopp`,
+        `Update:
 
+        - Bei der Suche nach einem Ortsnamen wird nun eine Liste mit Suchergebnissen angezeigt.
+        - Das Ziehen von Markern auf der Karte kann deaktiviert werden um eine ungewollte Änderung der Markerpositionen zu verhindern (das Ziehen ist standardmäßig deaktiviert).
+        - Vor dem Löschen aller Marker/Linien wird ein Ja/Nein-Dialog angezeigt.
+        - Es gibt jetzt eine <a href="https://blog.flopp.net" target="_blank">zusätzliche Website mit Dokumentation und Neuigkeiten (blog.flopp.net)</a>; es wird Links zu spezifischen Dokumentationsseiten geben ("?"-Knöpfe).
+        - Die Aktualisierung von Markern wurde optimiert; die Karte sollte sich nun flüssiger verhalten.
+
+        Beste Grüße,
+        Florian aka. Flopp`,
+    ),
+];
 
 export class NewsDialog extends Dialog {
     public shown: number;

diff --git a/src/components/sidebar_markers.ts b/src/components/sidebar_markers.ts
@@ -19,6 +19,7 @@ import {
 export class SidebarMarkers extends SidebarItem {
     private readonly sortable: Sortable;
     private readonly settingsDialog: MarkerSettingsDialog;
+    private readonly draggableMarkers: HTMLInputElement;
 
     public constructor(app: App, id: string) {
         super(app, id);
@@ -44,6 +45,11 @@ export class SidebarMarkers extends SidebarItem {
             this.settingsDialog.show();
         });
 
+        this.draggableMarkers = this._div.querySelector("#draggable-markers") as HTMLInputElement;
+        this.draggableMarkers.onchange = (): void => {
+            this.app.map_state.set_draggable_markers(this.draggableMarkers.checked);
+        };
+
         this.sortable = Sortable.create(document.getElementById("markers")!, {
             handle: ".drag-handle",
             onEnd: (event: Sortable.SortableEvent): void => {
@@ -86,6 +92,8 @@ export class SidebarMarkers extends SidebarItem {
             return;
         }
 
+        this.draggableMarkers.checked = this.app.map_state.draggable_markers();
+
         const container = document.querySelector("#markers")!;
         let scrollTo: Element|null = null;
 

diff --git a/src/index.html b/src/index.html
@@ -128,6 +128,15 @@
                             </a>
                         </p>
                     </div>
+                    <div class="field">
+                        <div class="control">
+                            <label class="checkbox">
+                                <input id="draggable-markers" type="checkbox" />
+                                <span data-i18n="sidebar.markers.draggable">Draggable Markers</span>
+                            </label>
+                        </div>
+                        <p class="help" data-i18n="sidebar.markers.draggable-help"></p>
+                    </div>
                 </div>
                 <div class="scrollable-content">
                     <div id="markers" class="scrollable-list"></div>

diff --git a/src/lang/de/translation.json b/src/lang/de/translation.json
@@ -149,6 +149,8 @@
                 "delete": "L\u00f6schen",
                 "delete_all": "L\u00f6sche alle Marker",
                 "delete_all_question": "Willst du wirklich alle Marker l\u00f6schen?",
+                "draggable": "Verschiebare Marker",
+                "draggable-help": "Marker können auf der Karte per Maus oder Touch verschoben werden.",
                 "edit": "Bearbeiten",
                 "edit_color": "Farbe",
                 "edit_color_placeholder": "Farbe",

diff --git a/src/lang/en/translation.json b/src/lang/en/translation.json
@@ -148,6 +148,8 @@
                 "copy_coordinates_success_message": "The coordinates have been copied to the clipboard: {1}",
                 "delete": "Delete",
                 "delete_all": "Delete all markers",
+                "draggable": "Draggable Markers",
+                "draggable-help": "Markers can be moved on the map by dragging them with the mouse or touch.",
                 "delete_all_question": "Do you really want to delete all markers?",
                 "edit": "Edit",
                 "edit_color": "Color",

diff --git a/src/lang/fr/translation.json b/src/lang/fr/translation.json
@@ -149,6 +149,8 @@
                 "delete": "Supprimer",
                 "delete_all": "Supprimer tous les marqueurs",
                 "delete_all_question": "Tu veux vraiment effacer tous les marqueurs ?",
+                "draggable": "Marqueurs déplaçables",
+                "draggable-help": "Les marqueurs peuvent être déplacés sur la carte en les faisant glisser avec la souris ou le toucher.",
                 "edit": "Modifier",
                 "edit_color": "Couleur",
                 "edit_color_placeholder": "Couleur",