leaflet-editable - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

 # CHANGELOG
 
+# dev
+- hide middle markers if there is not enough space
+- make possible to add new vertex on top of other
+  paths vertex
+
 ## 0.5.0
@@ -4,0 +9,0 @@ - added editable:vertex:drag event

package.json

 {
   "name": "leaflet-editable",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Make geometries editable in Leaflet",
@@ -5,0 +5,0 @@ "main": "src/Leaflet.Editable.js",

src/Leaflet.Editable.js

@@ -11,3 +11,3 @@ L.Editable = L.Class.extend({
     options: {
-        zIndex: 10000,
+        zIndex: 1000,
         polygonClass: L.Polygon,
@@ -21,2 +21,3 @@ polylineClass: L.Polyline,
         L.setOptions(this, options);
+        this._lastZIndex = this.options.zIndex;
         this.map = map;
@@ -49,3 +50,4 @@ this.editLayer = this.createEditLayer();
             icon: this.createVertexIcon({className: 'leaflet-div-icon leaflet-drawing-icon'}),
-            opacity: 0
+            opacity: 0,
+            zIndexOffset: this._lastZIndex
         });
@@ -104,2 +106,7 @@ },
 
+    updateNewClickHandlerZIndex: function () {
+        this._lastZIndex += 2;
+        this.newClickHandler.setZIndexOffset(this._lastZIndex);
+    },
+
     registerForDrawing: function (editor) {
@@ -113,2 +120,3 @@ this.map.on('mousemove touchmove', editor.onMouseMove, editor);
         L.DomUtil.addClass(this.map._container, this.options.drawingCSSClass);
+        this.updateNewClickHandlerZIndex();
     },
@@ -228,4 +236,2 @@
         draggable: true,
-        riseOnOver: true,
-        zIndexOffset: 100,
         className: 'leaflet-div-icon leaflet-vertex-icon'
@@ -242,2 +248,3 @@ },
         this.editor.editLayer.addLayer(this);
+        this.setZIndexOffset(editor.tools._lastZIndex + 1);
     },
@@ -253,5 +260,17 @@
         this.on('mousedown touchstart', this.onMouseDown);
-        if (!this.editor.tools.options.skipMiddleMarkers) this.addMiddleMarkers();
+        this.addMiddleMarkers();
     },
 
+    onRemove: function (map) {
+        if (this.middleMarker) this.middleMarker.delete();
+        delete this.latlng.__vertex;
+        this.off('drag', this.onDrag);
+        this.off('dragstart', this.onDragStart);
+        this.off('dragend', this.onDragEnd);
+        this.off('click', this.onClick);
+        this.off('contextmenu', this.onContextMenu);
+        this.off('mousedown touchstart', this.onMouseDown);
+        L.Marker.prototype.onRemove.call(this, map);
+    },
+
     onDrag: function (e) {
@@ -307,8 +326,2 @@ e.vertex = this;
 
-    onRemove: function (map) {
-        if (this.middleMarker) this.middleMarker.delete();
-        delete this.latlng.__vertex;
-        L.Marker.prototype.onRemove.call(this, map);
-    },
-
     getIndex: function () {
@@ -346,2 +359,3 @@ return this.latlngs.indexOf(this.latlng);
     addMiddleMarkers: function () {
+        if (this.editor.tools.options.skipMiddleMarkers) return;
         var previous = this.getPrevious();
@@ -386,8 +400,30 @@ if (previous) {
         L.Marker.prototype.initialize.call(this, this.computeLatLng(), options);
+        this._opacity = this.options.opacity;
         this.options.icon = this.editor.tools.createVertexIcon({className: this.options.className});
         this.editor.editLayer.addLayer(this);
+        this.setVisibility();
     },
 
+    setVisibility: function () {
+        var leftPoint = this._map.latLngToContainerPoint(this.left.latlng),
+            rightPoint = this._map.latLngToContainerPoint(this.right.latlng),
+            size = L.point(this.options.icon.options.iconSize);
+        if (leftPoint.distanceTo(rightPoint) < size.x * 3) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    },
+
+    show: function () {
+        this.setOpacity(this._opacity);
+    },
+
+    hide: function () {
+        this.setOpacity(0);
+    },
+
     updateLatLng: function () {
         this.setLatLng(this.computeLatLng());
+        this.setVisibility();
     },
@@ -404,4 +440,12 @@
         this.on('mousedown touchstart', this.onMouseDown);
+        map.on('zoomend', this.setVisibility, this);
     },
 
+    onRemove: function (map) {
+        delete this.right.middleMarker;
+        this.off('mousedown touchstart', this.onMouseDown);
+        map.off('zoomend', this.setVisibility, this);
+        L.Marker.prototype.onRemove.call(this, map);
+    },
+
     onMouseDown: function (e) {
@@ -420,7 +464,2 @@ this.editor.onMiddleMarkerMouseDown(e, this);
 
-    onRemove: function (map) {
-        delete this.right.middleMarker;
-        L.Marker.prototype.onRemove.call(this, map);
-    },
-
     index: function () {
@@ -453,2 +492,3 @@ return this.latlngs.indexOf(this.right.latlng);
     enable: function () {
+        if (this._enabled) return this;
         this.tools.editLayer.addLayer(this.editLayer);
@@ -553,2 +593,3 @@ this.onEnable();
     enable: function () {
+        if (this._enabled) return this;
         L.Editable.BaseEditor.prototype.enable.call(this);
@@ -590,2 +631,3 @@ this.feature.dragging.enable();
     enable: function () {
+        if (this._enabled) return this;
         L.Editable.BaseEditor.prototype.enable.call(this);
@@ -873,5 +915,4 @@ if (this.feature) {
     enableEdit: function () {
-        if (!this.editor) {
-            this.createEditor();
-        }
+        if (!this.editor) this.createEditor();
+        if (this.multi) this.multi.onEditEnabled();
         return this.editor.enable();
@@ -886,2 +927,3 @@ },
         if (this.editor) {
+            if (this.multi) this.multi.onEditDisabled();
             this.editor.disable();
@@ -988,3 +1030,3 @@ delete this.editor;
 
-    enableEdit: function (e) {
+    enableEdit: function () {
         this.eachLayer(function(layer) {
@@ -1008,2 +1050,20 @@ layer.multi = this;
         }
+    },
+
+    onEditEnabled: function () {
+        if (!this._editEnabled) {
+            this._editEnabled = true;
+            this.fire('editable:multi:edit:enabled');
+        }
+    },
+
+    onEditDisabled: function () {
+        if (this._editEnabled) {
+            this._editEnabled = false;
+            this.fire('editable:multi:edit:disabled');
+        }
+    },
+
+    editEnabled: function () {
+        return !!this._editEnabled;
     }
@@ -1010,0 +1070,0 @@

test/_pre.js

@@ -17,5 +17,2 @@ var qs = function (selector) {return document.querySelector(selector);};
     happen.at('mousedown', fromX, fromY);
-    while (fromX <= toX) {
-        happen.at('mousemove', fromX++, fromY);
-    }
     var moveX = function () {
@@ -22,0 +19,0 @@ if (fromX <= toX) {

test/Editable.js

@@ -1,2 +0,2 @@
-describe('L.Editable', function() {
+describe('L.Editable', function () {
 
@@ -9,5 +9,5 @@ before(function () {
 
-    describe('#init', function() {
+    describe('#init', function () {
 
-        it('should be initialized', function() {
+        it('should be initialized', function () {
             assert.ok(this.map.editTools);
@@ -17,3 +17,46 @@ });
     });
+    describe('#updateNewClickHandlerZIndex', function () {
 
+        it('should be possible to create latlng on top of previously created vertex', function () {
+            var line1 = this.map.editTools.startPolyline();
+            happen.at('mousemove', 450, 450);
+            happen.at('click', 450, 450);
+            happen.at('mousemove', 500, 500);
+            happen.at('click', 500, 500);
+            happen.at('click', 500, 500);
+            assert.equal(line1._latlngs.length, 2);
+            var line2 = this.map.editTools.startPolyline();
+            happen.at('mousemove', 450, 450);
+            happen.at('click', 450, 450);
+            assert.equal(line2._latlngs.length, 1);
+            assert.equal(line1._latlngs.length, 2);
+            happen.at('mousemove', 500, 500);
+            happen.at('click', 500, 500);
+            happen.at('click', 500, 500);
+            assert.equal(line2._latlngs.length, 2);
+            assert.equal(line1._latlngs.length, 2);
+            this.map.removeLayer(line1);
+            this.map.removeLayer(line2);
+        });
+
+        it('should be possible to delete other vertex of currently drawn path', function () {
+            var line = this.map.editTools.startPolyline();
+            happen.at('mousemove', 450, 450);
+            happen.at('click', 450, 450);
+            happen.at('mousemove', 500, 500);
+            happen.at('click', 500, 500);
+            happen.at('mousemove', 500, 550);
+            happen.at('click', 500, 550);
+            assert.equal(line._latlngs.length, 3);
+            happen.at('mousemove', 500, 500);
+            happen.at('click', 500, 500);
+            assert.equal(line._latlngs.length, 2);
+            happen.at('mousemove', 500, 550);
+            happen.at('click', 500, 550);
+            assert.equal(line._latlngs.length, 2);
+            this.map.removeLayer(line);
+        });
+
+    });
+
 });

test/PolylineEditor.js

@@ -59,3 +59,3 @@ describe('L.PolylineEditor', function() {
 
-        it('should start editing on enable() call', function () {
+        it('should start editing on enableEdit() call', function () {
             polyline.enableEdit();
@@ -65,2 +65,8 @@ assert.ok(polyline.editor._enabled);
 
+        it('should not reset editor when calling enableEdit() twice', function () {
+            var editor = polyline.editor;
+            polyline.enableEdit();
+            assert.equal(editor, polyline.editor);
+        });
+
     });
@@ -67,0 +73,0 @@

No alert changes

Improved metrics

Total package byte prevSize

89446

increased by9.64%

Number of package files

19

increased by5.56%

Lines of code

1484

increased by13.72%

No dependency changes