WIP: Better support to create Plugins and new Shapes

src/js/Draw/L.PM.Draw.Circle.js

@@ -1,6 +1,6 @@
 import Draw from './L.PM.Draw';
 
-import { destinationOnLine, getTranslation } from '../helpers';
+import { destinationOnLine } from '../helpers';
 
 Draw.Circle = Draw.extend({
   initialize(map) {
@@ -56,7 +56,7 @@ Draw.Circle = Draw.extend({
     // add tooltip to hintmarker
     if (this.options.tooltips) {
       this._hintMarker
-        .bindTooltip(getTranslation('tooltips.startCircle'), {
+        .bindTooltip(L.PM.Translation.getTranslation('tooltips.startCircle'), {
           permanent: true,
           offset: L.point(0, 10),
           direction: 'bottom',
@@ -211,7 +211,7 @@ Draw.Circle = Draw.extend({
       this._hintMarker.on('move', this._syncCircleRadius, this);
 
       this._hintMarker.setTooltipContent(
-        getTranslation('tooltips.finishCircle')
+        L.PM.Translation.getTranslation('tooltips.finishCircle')
       );
 
       this._fireCenterPlaced();

src/js/Draw/L.PM.Draw.CircleMarker.js

@@ -1,5 +1,5 @@
 import Draw from './L.PM.Draw';
-import { destinationOnLine, getTranslation } from '../helpers';
+import { destinationOnLine } from '../helpers';
 
 Draw.CircleMarker = Draw.Marker.extend({
   initialize(map) {
@@ -58,13 +58,16 @@ Draw.CircleMarker = Draw.Marker.extend({
       // add tooltip to hintmarker
       if (this.options.tooltips) {
         this._hintMarker
-          .bindTooltip(getTranslation('tooltips.startCircle'), {
-            permanent: true,
-            offset: L.point(0, 10),
-            direction: 'bottom',
-
-            opacity: 0.8,
-          })
+          .bindTooltip(
+            L.PM.Translation.getTranslation('tooltips.startCircle'),
+            {
+              permanent: true,
+              offset: L.point(0, 10),
+              direction: 'bottom',
+
+              opacity: 0.8,
+            }
+          )
           .openTooltip();
       }
 
@@ -92,13 +95,16 @@ Draw.CircleMarker = Draw.Marker.extend({
       // add tooltip to hintmarker
       if (this.options.tooltips) {
         this._hintMarker
-          .bindTooltip(getTranslation('tooltips.placeCircleMarker'), {
-            permanent: true,
-            offset: L.point(0, 10),
-            direction: 'bottom',
-
-            opacity: 0.8,
-          })
+          .bindTooltip(
+            L.PM.Translation.getTranslation('tooltips.placeCircleMarker'),
+            {
+              permanent: true,
+              offset: L.point(0, 10),
+              direction: 'bottom',
+
+              opacity: 0.8,
+            }
+          )
           .openTooltip();
       }
     }
@@ -201,7 +207,7 @@ Draw.CircleMarker = Draw.Marker.extend({
       this._hintMarker.on('move', this._syncCircleRadius, this);
 
       this._hintMarker.setTooltipContent(
-        getTranslation('tooltips.finishCircle')
+        L.PM.Translation.getTranslation('tooltips.finishCircle')
       );
 
       this._fireCenterPlaced();

src/js/Draw/L.PM.Draw.Line.js

@@ -1,8 +1,6 @@
 import kinks from '@turf/kinks';
 import Draw from './L.PM.Draw';
 
-import { getTranslation } from '../helpers';
-
 Draw.Line = Draw.extend({
   initialize(map) {
     this._map = map;
@@ -51,7 +49,7 @@ Draw.Line = Draw.extend({
     // add tooltip to hintmarker
     if (this.options.tooltips) {
       this._hintMarker
-        .bindTooltip(getTranslation('tooltips.firstVertex'), {
+        .bindTooltip(L.PM.Translation.getTranslation('tooltips.firstVertex'), {
           permanent: true,
           offset: L.point(0, 10),
           direction: 'bottom',
@@ -368,9 +366,9 @@ Draw.Line = Draw.extend({
 
     // handle tooltip text
     if (length <= 1) {
-      text = getTranslation('tooltips.continueLine');
+      text = L.PM.Translation.getTranslation('tooltips.continueLine');
     } else {
-      text = getTranslation('tooltips.finishLine');
+      text = L.PM.Translation.getTranslation('tooltips.finishLine');
     }
     this._hintMarker.setTooltipContent(text);
   },

src/js/Draw/L.PM.Draw.Marker.js

@@ -1,5 +1,4 @@
 import Draw from './L.PM.Draw';
-import { getTranslation } from '../helpers';
 
 Draw.Marker = Draw.extend({
   initialize(map) {
@@ -30,7 +29,7 @@ Draw.Marker = Draw.extend({
     // add tooltip to hintmarker
     if (this.options.tooltips) {
       this._hintMarker
-        .bindTooltip(getTranslation('tooltips.placeMarker'), {
+        .bindTooltip(L.PM.Translation.getTranslation('tooltips.placeMarker'), {
           permanent: true,
           offset: L.point(0, 10),
           direction: 'bottom',

src/js/Draw/L.PM.Draw.Polygon.js

@@ -1,5 +1,4 @@
 import Draw from './L.PM.Draw';
-import { getTranslation } from '../helpers';
 
 Draw.Polygon = Draw.Line.extend({
   initialize(map) {
@@ -46,9 +45,9 @@ Draw.Polygon = Draw.Line.extend({
 
     // handle tooltip text
     if (length <= 2) {
-      text = getTranslation('tooltips.continueLine');
+      text = L.PM.Translation.getTranslation('tooltips.continueLine');
     } else {
-      text = getTranslation('tooltips.finishPoly');
+      text = L.PM.Translation.getTranslation('tooltips.finishPoly');
     }
     this._hintMarker.setTooltipContent(text);
   },

src/js/Draw/L.PM.Draw.Rectangle.js

@@ -1,5 +1,5 @@
 import Draw from './L.PM.Draw';
-import { fixLatOffset, getTranslation } from '../helpers';
+import { fixLatOffset } from '../helpers';
 
 Draw.Rectangle = Draw.extend({
   initialize(map) {
@@ -55,7 +55,7 @@ Draw.Rectangle = Draw.extend({
     // add tooltip to hintmarker
     if (this.options.tooltips) {
       this._hintMarker
-        .bindTooltip(getTranslation('tooltips.firstVertex'), {
+        .bindTooltip(L.PM.Translation.getTranslation('tooltips.firstVertex'), {
           permanent: true,
           offset: L.point(0, 10),
           direction: 'bottom',
@@ -175,7 +175,9 @@ Draw.Rectangle = Draw.extend({
     this._map.on('click', this._finishShape, this);
 
     // change tooltip text
-    this._hintMarker.setTooltipContent(getTranslation('tooltips.finishRect'));
+    this._hintMarker.setTooltipContent(
+      L.PM.Translation.getTranslation('tooltips.finishRect')
+    );
 
     this._setRectangleOrigin();
   },

src/js/Draw/L.PM.Draw.js

@@ -221,6 +221,10 @@ const Draw = L.Class.extend({
     const map = this._map || this._layer._map;
     return map.pm.getGeomanLayers().length === 0;
   },
+  addShape(name) {
+    this.shapes.push(name);
+    this[name] = new L.PM.Draw[name](this._map);
+  },
 });
 
 export default Draw;

src/js/Edit/L.PM.Edit.Circle.js

@@ -355,4 +355,12 @@ Edit.Circle = Edit.extend({
     // calculate the new latlng of marker if radius is out of min/max
     this._outerMarker.setLatLng(this._getNewDestinationOfOuterMarker());
   },
+  _handleDrag(deltaLatLng) {
+    // create the new coordinates array
+    const newCoords = L.PM.Utils.moveCoordsByDelta(deltaLatLng, [
+      this._layer.getLatLng(),
+    ]);
+    // set new coordinates and redraw
+    this._layer.setLatLng(newCoords[0]);
+  },
 });

src/js/Edit/L.PM.Edit.CircleMarker.js

@@ -429,4 +429,26 @@ Edit.CircleMarker = Edit.extend({
     // calculate the new latlng of marker if radius is out of min/max
     this._outerMarker.setLatLng(this._getNewDestinationOfOuterMarker());
   },
+  _handleDrag(deltaLatLng) {
+    if (this._layer instanceof L.CircleMarker && this._layer.options.editable) {
+      // create the new coordinates array
+      const newCoords = L.PM.Utils.moveCoordsByDelta(deltaLatLng, [
+        this._layer.getLatLng(),
+      ]);
+      // set new coordinates and redraw
+      this._layer.setLatLng(newCoords[0]);
+    } else {
+      let coordsRefernce = this._layer.getLatLng();
+      if (this._layer._snapped) {
+        // if layer is snapped we use the original latlng for re-calculation, else the layer will not be "unsnappable" anymore
+        coordsRefernce = this._layer._orgLatLng;
+      }
+      // create the new coordinates array
+      const newCoords = L.PM.Utils.moveCoordsByDelta(deltaLatLng, [
+        coordsRefernce,
+      ]);
+      // set new coordinates and redraw
+      this._layer.setLatLng(newCoords[0]);
+    }
+  },
 });

src/js/Edit/L.PM.Edit.ImageOverlay.js

@@ -87,4 +87,13 @@ Edit.ImageOverlay = Edit.extend({
 
     return [northwest, northeast, southeast, southwest];
   },
+  _handleDrag(deltaLatLng) {
+    // create the new coordinates array
+    const newCoords = L.PM.Utils.moveCoordsByDelta(deltaLatLng, [
+      this._layer.getBounds().getNorthWest(),
+      this._layer.getBounds().getSouthEast(),
+    ]);
+    // set new coordinates and redraw
+    this._layer.setBounds(newCoords);
+  },
 });

src/js/Edit/L.PM.Edit.Line.js

@@ -811,4 +811,14 @@ Edit.Line = Edit.extend({
 
     this._fireVertexClick(e, indexPath);
   },
+  _handleDrag(deltaLatLng) {
+    // create the new coordinates array
+    const newCoords = L.PM.Utils.moveCoordsByDelta(
+      deltaLatLng,
+      this._layer.getLatLngs()
+    );
+
+    // set new coordinates and redraw
+    this._layer.setLatLngs(newCoords);
+  },
 });

src/js/Edit/L.PM.Edit.Marker.js

@@ -116,4 +116,17 @@ Edit.Marker = Edit.extend({
     marker.off('pm:dragend', this._cleanupSnapping, this);
     marker.off('pm:dragstart', this._unsnap, this);
   },
+  _handleDrag(deltaLatLng) {
+    let coordsRefernce = this._layer.getLatLng();
+    if (this._layer._snapped) {
+      // if layer is snapped we use the original latlng for re-calculation, else the layer will not be "unsnappable" anymore
+      coordsRefernce = this._layer._orgLatLng;
+    }
+    // create the new coordinates array
+    const newCoords = L.PM.Utils.moveCoordsByDelta(deltaLatLng, [
+      coordsRefernce,
+    ]);
+    // set new coordinates and redraw
+    this._layer.setLatLng(newCoords[0]);
+  },
 });

src/js/Edit/L.PM.Edit.js

@@ -107,6 +107,9 @@ const Edit = L.Class.extend({
     }
     return true;
   },
+  _handleRotate(latlngs) {
+    this._layer.setLatLngs(latlngs);
+  },
 });
 
 export default Edit;

src/js/L.PM.Map.js

@@ -1,11 +1,11 @@
 import merge from 'lodash/merge';
-import translations from '../assets/translations';
 import GlobalEditMode from './Mixins/Modes/Mode.Edit';
 import GlobalDragMode from './Mixins/Modes/Mode.Drag';
 import GlobalRemovalMode from './Mixins/Modes/Mode.Removal';
 import GlobalRotateMode from './Mixins/Modes/Mode.Rotate';
 import EventMixin from './Mixins/Events';
 import KeyboardMixins from './Mixins/Keyboard';
+import { isEmptyDeep } from './helpers';
 
 const Map = L.Class.extend({
   includes: [
@@ -41,16 +41,53 @@ const Map = L.Class.extend({
     };
 
     this.Keyboard._initKeyListener(map);
+
+    this._allowedTypes = [
+      L.Polyline,
+      L.Marker,
+      L.Circle,
+      L.CircleMarker,
+      L.ImageOverlay,
+    ];
+    this._allowedSnappingTypes = [
+      L.Polyline,
+      L.Marker,
+      L.Circle,
+      L.CircleMarker,
+      L.ImageOverlay,
+    ];
+    this._allowedRotateTypes = [L.Polyline];
+    this._latlngFunctions = [
+      { type: L.Marker, fnc: L.Marker.prototype.getLatLng },
+      { type: L.CircleMarker, fnc: L.CircleMarker.prototype.getLatLng },
+      { type: L.Polyline, fnc: L.Polyline.prototype.getLatLngs },
+      { type: L.ImageOverlay, fnc: L.ImageOverlay.prototype.getBounds },
+    ];
+    this._latlngRotationOverlayFunctions = [];
+    this._snappingDistanceFunctions = [];
+
+    this._snappingFilters = [
+      (layer) => layer._latlng,
+      (layer) => layer._latlngs && !isEmptyDeep(layer._latlngs),
+    ];
   },
   setLang(lang = 'en', t, fallback = 'en') {
     const oldLang = L.PM.activeLang;
     if (t) {
-      translations[lang] = merge(translations[fallback], t);
+      L.PM.Translation.translations[lang] = merge(
+        L.PM.Translation.translations[fallback],
+        t
+      );
     }
 
     L.PM.activeLang = lang;
     this.map.pm.Toolbar.reinit();
-    this._fireLangChange(oldLang, lang, fallback, translations[lang]);
+    this._fireLangChange(
+      oldLang,
+      lang,
+      fallback,
+      L.PM.Translation.translations
+    );
   },
   addControls(options) {
     this.Toolbar.addControls(options);

src/js/L.PM.Translation.js

@@ -0,0 +1,18 @@
+import has from 'lodash/has';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import translations from '../assets/translations/index';
+
+export default {
+  translations,
+  getTranslation(path, lang = L.PM.activeLang) {
+    if (!has(this.translations, lang)) {
+      lang = 'en';
+    }
+
+    return get(this.translations[lang], path);
+  },
+  addTranslation(lang, json) {
+    this.translations[lang] = merge(this.translations[lang], json);
+  },
+}