Improved editor control

config/locales/de.yml

@@ -72,6 +72,7 @@ de:
       linestring: Linieneditor
       polygon: Flächeneditor
       clear_map: "Clear map"
+      remove_point: "Remove point"
       geolocation_activated: Geolokalisierung aktiviert
       geolocation_deactivated: Geolokalisierung deaktiviert
       copied_location_to_clipboard: Standort in die Zwischenablage kopiert
@@ -81,6 +82,7 @@ de:
     messages:
       baselayer_missing: "Es ist kein Baselayer verfügbar!"
       zoom_in_more: "Zoomen Sie hinein, um die Objekte zu sehen."
+      modify_start: "Hold down <code>ALT</code> and click on a vertex to delete it."
   gtt_map_rotate_label: Kartenrotation
   gtt_map_rotate_info_html: Halten Sie <code>Shift+Alt</code> gedrückt und ziehen
     Sie die Karte, um sie zu drehen.

config/locales/en.yml

@@ -123,10 +123,12 @@ en:
       linestring: "Line editor"
       polygon: "Area editor"
       clear_map: "Clear map"
+      remove_point: "Remove point"
       copied_location_to_clipboard: "Copied location to clipboard"
     modal:
       load: "Load"
       cancel: "Cancel"
     messages:
       baselayer_missing: "There is no baselayer available!"
       zoom_in_more: "Zoom in to view objects."
+      modify_start: "Hold down <code>ALT</code> and click on a vertex to delete it."

config/locales/ja.yml

@@ -118,10 +118,12 @@ ja:
       linestring: ライン編集
       polygon: エリア編集
       clear_map: "地図をクリア"
+      remove_point: "Remove point"
       copied_location_to_clipboard: 位置情報をクリップボードにコピーしました
     modal:
       load: 読み込み
       cancel: キャンセル
     messages:
       baselayer_missing: "背景レイヤーが存在しません!"
       zoom_in_more: "地物表示のためズームします。"
+      modify_start: "Hold down <code>ALT</code> and click on a vertex to delete it."

src/components/gtt-client/openlayers/index.ts

@@ -6,7 +6,8 @@ import { Style, Fill, Stroke, Circle } from 'ol/style';
 import { createEmpty, extend, containsCoordinate } from 'ol/extent';
 import { transform, fromLonLat } from 'ol/proj';
 
-import { Modify, Draw, Select } from 'ol/interaction'
+import { Draw, Select, Snap } from 'ol/interaction'
+import ModifyTouch from 'ol-ext/interaction/ModifyTouch';
 import Bar from 'ol-ext/control/Bar';
 import Button from 'ol-ext/control/Button';
 import Toggle from 'ol-ext/control/Toggle';
@@ -156,9 +157,17 @@ function createTooltip(): ExtendedTooltip {
  */
 export function setControls(types: Array<string>) {
   // Make vector features editable
-  const modify = new Modify({
+  const modify = new ModifyTouch({
+    title: this.i18n.control.remove_point,
     features: this.vector.getSource().getFeaturesCollection()
-  })
+  } as any)
+
+  modify.on('showpopup', evt => {
+    const geometryType = evt.feature.getGeometry().getType();
+    if (geometryType === 'Point') {
+      modify.removePoint(); // don't show the popup
+    }
+  });
 
   modify.on('modifyend', evt => {
     updateForm(this, evt.features.getArray(), true)
@@ -197,14 +206,36 @@ export function setControls(types: Array<string>) {
     })
 
     draw.on('drawstart', evt => {
+      // Change the style of existing features to light gray and transparent and dashed line
+      this.vector.getSource().getFeatures().forEach((feature: any) => {
+        feature.setStyle(new Style({
+          fill: new Fill({
+            color: 'rgba(0, 0, 0, 0.1)'
+          }),
+          stroke: new Stroke({
+            color: 'rgba(0, 0, 0, 0.5)',
+            width: 2,
+            lineDash: [5, 5]
+          })
+        }));
+      });
+
       if (this.contents.measure) {
         tooltip.setFeature(evt.feature)
       }
     })
 
     draw.on('change:active', evt => {
-      tooltip.removeFeature()
-    })
+      // If the Draw interaction is deactivated
+      if (!evt.target.getActive()) {
+        // Reset the style of existing features
+        this.vector.getSource().getFeatures().forEach((feature: any) => {
+          feature.setStyle(null); // Reset the style to the default style
+        });
+      }
+
+      tooltip.removeFeature();
+    });
 
     draw.on('drawend', evt => {
       tooltip.removeFeature()
@@ -230,11 +261,50 @@ export function setControls(types: Array<string>) {
       html: `<i class="mdi ${mdi}" ></i>`,
       title: this.i18n.control[type.toLowerCase()],
       interaction: draw,
-      active: (type === geometryType)
+      active: false,
+      onToggle: (active: boolean) => {
+        modify.setActive(false);
+        if (active) {
+          draw.setActive(true);
+        } else {
+          draw.setActive(false);
+        }
+      }
     })
     editbar.addControl(control)
   })
 
+  // Add the edit control
+  const editModeControl = new Toggle({
+    html: '<i class="mdi mdi-pencil"></i>',
+    title: this.i18n.control.edit_mode,
+    active: false,
+    onToggle: (active: boolean) => {
+      if (active) {
+        modify.setActive(true);
+        this.map.getInteractions().forEach((interaction: any) => {
+          if (interaction instanceof Draw) {
+            interaction.setActive(false);
+          }
+        });
+        this.map.notification.show(this.i18n.messages.modify_start);
+      } else {
+        modify.setActive(false);
+      }
+    }
+  });
+  editbar.addControl(editModeControl);
+
+  // if the vector layer is not empty, set the editModeControl to active
+  if (this.vector.getSource().getFeatures().length > 0) {
+    editModeControl.setActive(true);
+  }
+  // otherwise set the first draw control to active
+  else {
+    const firstControl = editbar.getControls()[0] as Toggle;
+    firstControl.setActive(true);
+  }
+
   // Add the clear map control
   const clearMapCtrl = new Button({
     html: '<i class="mdi mdi-delete"></i>',
@@ -246,6 +316,12 @@ export function setControls(types: Array<string>) {
   });
   editbar.addControl(clearMapCtrl);
 
+  // Add the snap interaction
+  const snap = new Snap({
+    source: this.vector.getSource(),
+  });
+  this.map.addInteraction(snap);
+
   // Uses jQuery UI for GeoJSON Upload modal window
   const mapObj = this
   const dialog = $("#dialog-geojson-upload").dialog({