Handle message for platforms and geometry

Signed-off-by: Daniel Kastl <daniel@georepublic.de>

config/locales/de.yml

@@ -83,6 +83,8 @@ de:
       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."
+      modify_start_mac: "Hold down <code>Option</code> and click on a vertex to delete it."
+      modify_start_touch: "Tap 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

@@ -132,3 +132,5 @@ en:
       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."
+      modify_start_mac: "Hold down <code>Option</code> and click on a vertex to delete it."
+      modify_start_touch: "Tap on a vertex to delete it."

config/locales/ja.yml

@@ -127,3 +127,5 @@ ja:
       baselayer_missing: "背景レイヤーが存在しません!"
       zoom_in_more: "地物表示のためズームします。"
       modify_start: "Hold down <code>ALT</code> and click on a vertex to delete it."
+      modify_start_mac: "Hold down <code>Option</code> and click on a vertex to delete it."
+      modify_start_touch: "Tap on a vertex to delete it."

src/components/gtt-client/helpers/platforms.ts

@@ -0,0 +1,17 @@
+/**
+ * Utility function to detect touch devices
+ * @param isTouchDevice - boolean
+ * @returns boolean
+ */
+export const isTouchDevice = (): boolean => {
+  return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+}
+
+/**
+ * Utility function to detect macOS
+ * @param isMacOS - boolean
+ * @returns boolean
+ */
+export const isMacOS = (): boolean => {
+  return /Macintosh|MacIntel|MacPPC|Mac68K/.test(navigator.userAgent);
+}

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

@@ -17,6 +17,7 @@ import { position } from 'ol-ext/control/control';
 import { GeoJSON } from 'ol/format';
 
 import { getCookie, getMapSize, degreesToRadians, updateForm, formatLength, formatArea } from "../helpers";
+import { isTouchDevice, isMacOS } from "../helpers/platforms";
 
 // Define the types for the Tooltip and the custom methods you added
 interface ExtendedTooltip extends Tooltip {
@@ -305,7 +306,20 @@ export function setControls(types: Array<string>) {
             interaction.setActive(false);
           }
         });
-        this.map.notification.show(this.i18n.messages.modify_start);
+
+        if (this.vector.getSource().getFeatures().length > 0) {
+          const firstFeature = this.vector.getSource().getFeatures()[0];
+          if (firstFeature && firstFeature.getGeometry().getType() !== 'Point') {
+            // Code to execute if the first feature is not a Point
+            let message = this.i18n.messages.modify_start;
+            if (isTouchDevice()) {
+              message = this.i18n.messages.modify_start_touch;
+            } else if (isMacOS()) {
+              message = this.i18n.messages.modify_start_mac;
+            }
+            this.map.notification.show(message);
+          }
+        }
       } else {
         modify.setActive(false);
       }