From 677898c21e44b8000957d9cf96a85c9b0cd467e6 Mon Sep 17 00:00:00 2001 From: Sumit Kumar Date: Sun, 21 Feb 2016 17:44:15 +0100 Subject: [PATCH 1/2] added bower_components to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index cfca4052..c0b90b39 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store /node_modules/ +/bower_components/ From f0f34b49bc26f93ab8a2bd1a08366d87fc67b77c Mon Sep 17 00:00:00 2001 From: Sumit Kumar Date: Sun, 21 Feb 2016 19:07:14 +0100 Subject: [PATCH 2/2] added hintline from cursor to last polygon point --- dist/leaflet.pm.js | 31 +++++++++++++++++++++++++++++++ dist/leaflet.pm.min.js | 2 +- src/js/L.PM.Draw.Poly.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 1 deletion(-) diff --git a/dist/leaflet.pm.js b/dist/leaflet.pm.js index 5b9a081d..8d99238a 100644 --- a/dist/leaflet.pm.js +++ b/dist/leaflet.pm.js @@ -182,20 +182,36 @@ L.PM.Draw.Poly = { this._map = map; + // create a new layergroup this._layerGroup = new L.LayerGroup(); this._layerGroup.addTo(this._map); + // this is the polyLine that'll make up the polygon this._polyline = L.polyline([], {color: 'red'}); this._layerGroup.addLayer(this._polyline); + // this is the hintline from the mouse cursor to the last marker + this._hintline = L.polyline([], { + color: 'red', + dashArray: [5, 5] + }); + this._layerGroup.addLayer(this._hintline); + + // change map cursor this._map._container.style.cursor = 'crosshair'; + // create a polygon-point on click this._map.on('click', this._createPolygonPoint, this); + // sync the hintline on mousemove + this._map.on('mousemove', this._syncHintLine, this); + + // give the map the function to disable draw mode this._map.disableDraw = function() { self.disable(); }; + // fire drawstart event this._map.fireEvent('pm:drawstart'); }, @@ -209,6 +225,18 @@ L.PM.Draw.Poly = { this._map.fireEvent('pm:drawend'); + }, + _syncHintLine: function(e) { + + var polyPoints = this._polyline.getLatLngs(); + + if(polyPoints.length > 0) { + var lastPolygonPoint = polyPoints[polyPoints.length - 1]; + this._hintline.setLatLngs([lastPolygonPoint, e.latlng]); + } + + + }, _createPolygonPoint: function(e) { @@ -218,6 +246,9 @@ L.PM.Draw.Poly = { this._polyline.addLatLng(e.latlng); this._createMarker(e.latlng, first); + + this._hintline.setLatLngs([e.latlng, e.latlng]); + }, _finishPolygon: function() { diff --git a/dist/leaflet.pm.min.js b/dist/leaflet.pm.min.js index 23666bd3..872ae153 100644 --- a/dist/leaflet.pm.min.js +++ b/dist/leaflet.pm.min.js @@ -1 +1 @@ -L.PM=L.PM||{initialize:function(){var t=function(){this.pm=new L.PM.Edit.LayerGroup(this)};L.LayerGroup.addInitHook(t);var e=function(){this.pm=new L.PM.Edit.Poly(this)};L.Polygon.addInitHook(e)},enableDraw:function(t){L.PM.Draw.Poly.enable(t.map)},disableDraw:function(t){t.disableDraw&&t.disableDraw()},addControls:function(t){var e={iconUrl:"assets/icons/polygon.png",onClick:function(){},afterClick:function(e){this.toggled()?L.PM.enableDraw({map:t}):L.PM.disableDraw(t)},doToggle:!0,toggleStatus:!1},i=new L.Control.PMButton(e).addTo(t);return t.on("pm:drawstart",function(){i.toggled()||i._clicked()}),t.on("pm:drawend",function(){i.toggled()&&i._clicked()}),[i]},Edit:{},Draw:{}},L.Control.PMButton=L.Control.extend({options:{position:"topleft"},initialize:function(t){this._button={},this.setButton(t)},onAdd:function(t){this._map=t;var e=L.DomUtil.create("div","leaflet-control-button");return this._container=e,this._makeButton(this._button),this._container},onRemove:function(t){},setButton:function(t){var e={iconUrl:t.iconUrl,onClick:t.onClick,afterClick:t.afterClick,doToggle:t.doToggle,toggleStatus:t.toggleStatus};this._button=e},getText:function(){return this._button.text},getIconUrl:function(){return this._button.iconUrl},destroy:function(){this._button={},this._update()},toggle:function(t){"boolean"==typeof t?this._button.toggleStatus=t:this._button.toggleStatus=!this._button.toggleStatus},toggled:function(){return this._button.toggleStatus},onCreate:function(){this.toggle(!1)},_makeButton:function(t){var e=L.DomUtil.create("div","leaflet-buttons-control-button",this._container);t.toggleStatus&&L.DomUtil.addClass(e,"active");var i=L.DomUtil.create("img","control-icon",e);return i.setAttribute("src",t.iconUrl),L.DomEvent.addListener(e,"click",t.onClick,this).addListener(e,"click",this._clicked,this).addListener(e,"click",t.afterClick,this),L.DomEvent.disableClickPropagation(e),e},_clicked:function(){this._button.doToggle&&(this._button.toggleStatus?L.DomUtil.removeClass(this._container.childNodes[0],"active"):L.DomUtil.addClass(this._container.childNodes[0],"active"),this.toggle())}}),L.PM.Draw.Poly={enable:function(t){var e=this;this._map=t,this._layerGroup=new L.LayerGroup,this._layerGroup.addTo(this._map),this._polyline=L.polyline([],{color:"red"}),this._layerGroup.addLayer(this._polyline),this._map._container.style.cursor="crosshair",this._map.on("click",this._createPolygonPoint,this),this._map.disableDraw=function(){e.disable()},this._map.fireEvent("pm:drawstart")},disable:function(){this._map._container.style.cursor="default",this._map.off("click",this._createPolygonPoint),this._map.removeLayer(this._layerGroup),this._map.fireEvent("pm:drawend")},_createPolygonPoint:function(t){var e=0===this._polyline.getLatLngs().length?!0:!1;this._polyline.addLatLng(t.latlng),this._createMarker(t.latlng,e)},_finishPolygon:function(){var t=this._polyline.getLatLngs(),e=L.polygon(t).addTo(this._map);e.pm.toggleEdit(),this.disable(),this._map.fireEvent("pm:create",e)},_createMarker:function(t,e){var i=new L.Marker(t,{draggable:!1,icon:L.divIcon({className:"marker-icon"})});return this._layerGroup.addLayer(i),e&&i.on("click",this._finishPolygon,this),i}},L.PM.Edit.Poly=L.Class.extend({initialize:function(t){this._poly=t,this._enabled=!1},toggleEdit:function(){this.enabled()?this.disable():this.enable()},enable:function(){var t=this;this.enabled()||(this._enabled=!0,this._markerGroup||(this._markerGroup=new L.LayerGroup,this._initMarkers()),this._poly._map.addLayer(this._markerGroup),this._poly.on("remove",function(){t.disable()}))},enabled:function(){return this._enabled},disable:function(){this._enabled=!1,this._poly._map.removeLayer(this._markerGroup)},_initMarkers:function(){this._markers=[];for(var t=this._poly._latlngs[0],e=0;e=t.length?0:r+1;this._createMiddleMarker(this._markers[r],this._markers[a])}},_createMarker:function(t,e){var i=new L.Marker(t,{draggable:!0,icon:L.divIcon({className:"marker-icon"})});return i._origLatLng=t,i._index=e,i.on("drag",this._onMarkerDrag,this),i.on("dragend",this._onMarkerDragEnd,this),i.on("contextmenu",this._removeMarker,this),this._markerGroup.addLayer(i),i},_createMiddleMarker:function(t,e){var i=this,r=this._calcMiddleLatLng(t,e),a=this._createMarker(r),n=L.divIcon({className:"marker-icon marker-icon-middle"});a.setIcon(n),t._middleMarkerRight=a,e._middleMarkerLeft=a,a.on("dragstart",function(){i._addMarker(a,t,e)}),a.on("click",function(){i._addMarker(a,t,e)})},_addMarker:function(t,e,i){var r=L.divIcon({className:"marker-icon"});t.setIcon(r),t.off("dragstart"),t.off("click");var a=t.getLatLng(),n=this._poly._latlngs[0],o=e._index+1;n.splice(o,0,a),t._origLatLng=n[o],this._markers.splice(o,0,t);for(var s=0;sr-1?this._markers.length-1:r-1,n=r+1>=this._markers.length?0:r+1,o=this._markers[a],s=this._markers[n];this._createMiddleMarker(o,s),this._markers.splice(r,1);for(var l=0;l=this._markers.length?0:e._index+1,r=e._index-1<0?this._markers.length-1:e._index-1;L.extend(e._origLatLng,e._latlng),this._poly.redraw();var a=this._calcMiddleLatLng(e,this._markers[i]);e._middleMarkerRight.setLatLng(a);var n=this._calcMiddleLatLng(e,this._markers[r]);e._middleMarkerLeft.setLatLng(n)},_onMarkerDragEnd:function(t){t.target;this._fireEdit()},_fireEdit:function(){this._poly.edited=!0,this._poly.fireEvent("pm:edit")},_calcMiddleLatLng:function(t,e){var i=this._poly._map,r=i.project(t.getLatLng()),a=i.project(e.getLatLng()),n=i.unproject(r._add(a)._divideBy(2));return n}}),L.PM.Edit.LayerGroup=L.Class.extend({initialize:function(t){this._layerGroup=t,this._layers=t.getLayers();for(var e=0;e0){var i=e[e.length-1];this._hintline.setLatLngs([i,t.latlng])}},_createPolygonPoint:function(t){var e=0===this._polyline.getLatLngs().length?!0:!1;this._polyline.addLatLng(t.latlng),this._createMarker(t.latlng,e),this._hintline.setLatLngs([t.latlng,t.latlng])},_finishPolygon:function(){var t=this._polyline.getLatLngs(),e=L.polygon(t).addTo(this._map);e.pm.toggleEdit(),this.disable(),this._map.fireEvent("pm:create",e)},_createMarker:function(t,e){var i=new L.Marker(t,{draggable:!1,icon:L.divIcon({className:"marker-icon"})});return this._layerGroup.addLayer(i),e&&i.on("click",this._finishPolygon,this),i}},L.PM.Edit.Poly=L.Class.extend({initialize:function(t){this._poly=t,this._enabled=!1},toggleEdit:function(){this.enabled()?this.disable():this.enable()},enable:function(){var t=this;this.enabled()||(this._enabled=!0,this._markerGroup||(this._markerGroup=new L.LayerGroup,this._initMarkers()),this._poly._map.addLayer(this._markerGroup),this._poly.on("remove",function(){t.disable()}))},enabled:function(){return this._enabled},disable:function(){this._enabled=!1,this._poly._map.removeLayer(this._markerGroup)},_initMarkers:function(){this._markers=[];for(var t=this._poly._latlngs[0],e=0;e=t.length?0:r+1;this._createMiddleMarker(this._markers[r],this._markers[n])}},_createMarker:function(t,e){var i=new L.Marker(t,{draggable:!0,icon:L.divIcon({className:"marker-icon"})});return i._origLatLng=t,i._index=e,i.on("drag",this._onMarkerDrag,this),i.on("dragend",this._onMarkerDragEnd,this),i.on("contextmenu",this._removeMarker,this),this._markerGroup.addLayer(i),i},_createMiddleMarker:function(t,e){var i=this,r=this._calcMiddleLatLng(t,e),n=this._createMarker(r),a=L.divIcon({className:"marker-icon marker-icon-middle"});n.setIcon(a),t._middleMarkerRight=n,e._middleMarkerLeft=n,n.on("dragstart",function(){i._addMarker(n,t,e)}),n.on("click",function(){i._addMarker(n,t,e)})},_addMarker:function(t,e,i){var r=L.divIcon({className:"marker-icon"});t.setIcon(r),t.off("dragstart"),t.off("click");var n=t.getLatLng(),a=this._poly._latlngs[0],o=e._index+1;a.splice(o,0,n),t._origLatLng=a[o],this._markers.splice(o,0,t);for(var s=0;sr-1?this._markers.length-1:r-1,a=r+1>=this._markers.length?0:r+1,o=this._markers[n],s=this._markers[a];this._createMiddleMarker(o,s),this._markers.splice(r,1);for(var l=0;l=this._markers.length?0:e._index+1,r=e._index-1<0?this._markers.length-1:e._index-1;L.extend(e._origLatLng,e._latlng),this._poly.redraw();var n=this._calcMiddleLatLng(e,this._markers[i]);e._middleMarkerRight.setLatLng(n);var a=this._calcMiddleLatLng(e,this._markers[r]);e._middleMarkerLeft.setLatLng(a)},_onMarkerDragEnd:function(t){t.target;this._fireEdit()},_fireEdit:function(){this._poly.edited=!0,this._poly.fireEvent("pm:edit")},_calcMiddleLatLng:function(t,e){var i=this._poly._map,r=i.project(t.getLatLng()),n=i.project(e.getLatLng()),a=i.unproject(r._add(n)._divideBy(2));return a}}),L.PM.Edit.LayerGroup=L.Class.extend({initialize:function(t){this._layerGroup=t,this._layers=t.getLayers();for(var e=0;e 0) { + var lastPolygonPoint = polyPoints[polyPoints.length - 1]; + this._hintline.setLatLngs([lastPolygonPoint, e.latlng]); + } + + + }, _createPolygonPoint: function(e) { @@ -42,6 +70,9 @@ L.PM.Draw.Poly = { this._polyline.addLatLng(e.latlng); this._createMarker(e.latlng, first); + + this._hintline.setLatLngs([e.latlng, e.latlng]); + }, _finishPolygon: function() {