rc-leaflet-drawing/dist/index.js

React Map Drawing Component based on rc-leaflet

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("leaflet"),require("leaflet.pm"),require("rc-leaflet")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","leaflet","leaflet.pm","rc-leaflet"],n):n((e=e||self).RCLeafletDrawing={},e.React,e.PropTypes,e.L,null,e.RCLeaflet)}(this,function(b,e,n,R,t,r){"use strict";var a="default"in e?e.default:e;n=n&&n.hasOwnProperty("default")?n.default:n,R=R&&R.hasOwnProperty("default")?R.default:R;var o=function(e,n){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(e,n)};var g=function(){return(g=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};function h(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t}var i,l,s,p,c=e.createContext(null),u=window&&window.__assign||function(){return(u=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},f=u({className:"rc-leaflet-icon-default"},{iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-47],tooltipAnchor:[1,-45]}),m=(i=f).className&&i.className!==f.className?R.divIcon(i):R.divIcon(u({},f,i));(l=b.Lang||(b.Lang={})).en="en",l.de="de",l.it="it",l.ru="ru",l.ro="ro",l.es="es",l.fr="fr",l.nl="nl",(s=b.Mode||(b.Mode={})).None="None",s.Draw="Draw",s.Drag="Drag",s.Edit="Edit",s.Remove="Remove",(p=b.Shape||(b.Shape={})).Marker="Marker",p.Circle="Circle",p.Line="Line",p.Polygon="Polygon",p.Rectangle="Rectangle";var d,y,v,L=r.Point.propTypes,C=(L.position,h(L,["position"])),P=(v=e.Component,o(d=w,y=v),void(d.prototype=null===y?Object.create(y):(O.prototype=y.prototype,new O)),w.prototype.componentDidMount=function(){var e=this.props,n=e.lang,t=e.translation;this.context.map.pm.setLang("rc-leaflet",t||{},n),this.context.map.on("pm:create",this.onDrawLayer),this.enableMode()},w.prototype.componentDidUpdate=function(e){var n=e.mode,t=e.shape,o=e.drawOptions,r=this.props,a=r.mode,i=r.shape,l=r.drawOptions;a===n&&(a!==b.Mode.Draw||i===t&&l===o)||(this.disablePrevMode(n),this.enableMode())},w.prototype.componentWillUnmount=function(){this.context.map.off("pm:create",this.onDrawLayer)},Object.defineProperty(w.prototype,"drawOptions",{get:function(){var e=this.props,n=e.shape,t=e.drawOptions,o=void 0===t?{}:t,r={};if(n===b.Shape.Marker){var a=o.markerStyle,i=void 0===a?{}:a,l=h(o,["markerStyle"]);r=g({},l,{markerStyle:g({icon:m},i)})}else{var s=this.context.theme&&this.context.theme.path||{},p=o.templineStyle,c=void 0===p?{}:p,u=o.hintlineStyle,f=void 0===u?{}:u,d=o.pathOptions,y=void 0===d?{}:d;l=h(o,["templineStyle","hintlineStyle","pathOptions"]),r=g({},l,{templineStyle:g({},s,c),hintlineStyle:g({},s,{dashArray:[5,5]},f),pathOptions:g({},s,y)})}return r},enumerable:!0,configurable:!0}),w.prototype.getLayers=function(){if(this.isControlled){var e=this.props,n=e.layers,t=e.points,o=void 0===t?[]:t,r=e.circles,a=void 0===r?[]:r,i=e.polylines,l=void 0===i?[]:i,s=e.polygons,p=void 0===s?[]:s,c=e.rectangles,u=void 0===c?[]:c;return n||o.concat(a,l,p,u)}return this.state.layers},Object.defineProperty(w.prototype,"isControlled",{get:function(){var e=this.props,n=e.layers,t=e.points,o=e.circles,r=e.polylines,a=e.polygons,i=e.rectangles;return void 0!==(n||t||o||r||a||i)},enumerable:!0,configurable:!0}),w.prototype.onLayerUpdate=function(e){this.props.mode===b.Mode.Edit&&e.pm.enable()},w.prototype.onCircleChange=function(e,t,n,o){if(this.isControlled){var r=this.props,a=r.layers,i=void 0===a?[]:a,l=r.circles,s=void 0===l?[]:l,p=r.onLayerChange,c=r.onCircleChange,u=R.circle(e.getLatLng(),e.getRadius());R.Util.setOptions(u,e.options),e.setLatLng(n),e.setRadius(o),p&&p(u,t,i.map(function(e,n){return n===t?u:e})),c&&c(u,t,s.map(function(e,n){return n===t?u:e}))}},w.prototype.onPolylineChange=function(e,t,n){if(this.isControlled){var o=this.props,r=o.layers,a=void 0===r?[]:r,i=o.polylines,l=void 0===i?[]:i,s=o.onLayerChange,p=o.onPolylineChange,c=R.polyline(e.getLatLngs());R.Util.setOptions(c,e.options),e.setLatLngs(n),s&&s(c,t,a.map(function(e,n){return n===t?c:e})),p&&p(c,t,l.map(function(e,n){return n===t?c:e}))}},w.prototype.onPolygonChange=function(e,t,n){if(this.isControlled){var o=this.props,r=o.layers,a=void 0===r?[]:r,i=o.polygons,l=void 0===i?[]:i,s=o.onLayerChange,p=o.onPolygonChange,c=R.polygon(e.getLatLngs());R.Util.setOptions(c,e.options),e.setLatLngs(n),s&&s(c,t,a.map(function(e,n){return n===t?c:e})),p&&p(c,t,l.map(function(e,n){return n===t?c:e}))}},w.prototype.onRectangleChange=function(e,t,n){if(this.isControlled){var o=this.props,r=o.layers,a=void 0===r?[]:r,i=o.rectangles,l=void 0===i?[]:i,s=o.onLayerChange,p=o.onRectangleChange,c=R.rectangle(e.getBounds());R.Util.setOptions(c,e.options),e.setLatLngs(n),s&&s(c,t,a.map(function(e,n){return n===t?c:e})),p&&p(c,t,l.map(function(e,n){return n===t?c:e}))}},w.prototype.disablePrevMode=function(e){if(e===b.Mode.Draw)this.context.map.pm.disableDraw();else if(e===b.Mode.Edit)for(var n=0,t=this.layers;n<t.length;n++)t[n].pm.disable();else if(e===b.Mode.Drag)for(var o=0,r=this.layers;o<r.length;o++)r[o].pm.disableLayerDrag()},w.prototype.enableMode=function(){var e=this.props,n=e.mode,t=e.shape,o=e.editOptions;if(n===b.Mode.Draw)this.context.map.pm.enableDraw(t,this.drawOptions);else if(n===b.Mode.Edit)for(var r=0,a=this.layers;r<a.length;r++)a[r].pm.enable(o);else if(n===b.Mode.Drag)for(var i=0,l=this.layers;i<l.length;i++)l[i].pm.enableLayerDrag()},w.prototype.addPoint=function(s,p){var c,u=this;s.on("dragstart",function(e){c=s.getLatLng()}),s.on("dragend",function(){if(u.isControlled){var e=u.props,n=e.layers,t=void 0===n?[]:n,o=e.points,r=void 0===o?[]:o,a=e.onLayerChange,i=e.onPointChange,l=R.marker(s.getLatLng());R.Util.setOptions(l,s.options),s.setLatLng(c),a&&a(l,p,t.map(function(e,n){return n===p?l:e})),i&&i(l,p,r.map(function(e,n){return n===p?l:e}))}}),this.layers.push(s)},w.prototype.addCircle=function(e,n){var t,o,r=this;e.on("pm:dragstart",function(){t=e.getLatLng(),o=e.getRadius()}),e.on("pm:dragend",function(){return r.onCircleChange(e,n,t,o)}),e.on("pm:markerdragstart",function(){t=e.getLatLng(),o=e.getRadius()}),e.on("pm:markerdragend",function(){r.onCircleChange(e,n,t,o),r.isControlled&&e.pm.enable()}),this.layers.push(e)},w.prototype.addPolyline=function(e,n){var t,o=this;e.on("pm:dragstart",function(){t=e.getLatLngs()}),e.on("pm:dragend",function(){return o.onPolylineChange(e,n,t)}),e.on("pm:markerdragstart",function(){t=e.getLatLngs()}),e.on("pm:markerdragend",function(){o.onPolylineChange(e,n,t),o.isControlled&&e.pm.enable()}),this.layers.push(e)},w.prototype.addPolygon=function(e,n){var t,o=this;e.on("pm:dragstart",function(){t=e.getLatLngs()}),e.on("pm:dragend",function(){return o.onPolygonChange(e,n,t)}),e.on("pm:markerdragstart",function(){t=e.getLatLngs()}),e.on("pm:markerdragend",function(){o.onPolygonChange(e,n,t),o.isControlled&&e.pm.enable()}),this.layers.push(e)},w.prototype.addRectangle=function(e,n){var t,o=this;e.on("pm:dragstart",function(){t=e.getLatLngs()}),e.on("pm:dragend",function(){return o.onRectangleChange(e,n,t)}),e.on("pm:markerdragstart",function(){t=e.getLatLngs()}),e.on("pm:markerdragend",function(){o.onRectangleChange(e,n,t),o.isControlled&&e.pm.enable()}),this.layers.push(e)},w.prototype.renderLayers=function(e){var o=this;return void 0===e&&(e=[]),e.map(function(n,t){var e=g({key:t},n.options||{},{onClick:function(e){return o.onRemoveLayer(e,n,t)},onUpdate:function(e){return o.onLayerUpdate(e)},onBeforeRemove:o.removeLayer});return n instanceof R.Marker?a.createElement(r.Point,g({position:n.getLatLng()},e,{onAdd:function(e,n){return o.addPoint(n,t)}})):n instanceof R.Circle?a.createElement(r.Circle,g({center:n.getLatLng(),radius:n.getRadius()},e,{onAdd:function(e,n){return o.addCircle(n,t)}})):n instanceof R.Rectangle?a.createElement(r.Rectangle,g({bounds:n.getBounds()},e,{onAdd:function(e,n){return o.addRectangle(n,t)}})):n instanceof R.Polygon?a.createElement(r.Polygon,g({points:n.getLatLngs()},e,{onAdd:function(e,n){return o.addPolygon(n,t)}})):n instanceof R.Polyline?a.createElement(r.Polyline,g({points:n.getLatLngs()},e,{onAdd:function(e,n){return o.addPolyline(n,t)}})):null})},w.prototype.render=function(){return this.renderLayers(this.getLayers())},w.propTypes={lang:n.oneOf(Object.values(b.Lang)),translation:n.shape({tooltips:n.shape({placeMarker:n.string,firstVertex:n.string,continueLine:n.string,finishLine:n.string,finishPoly:n.string,finishRect:n.string,startCircle:n.string,finishCircle:n.string}),actions:n.shape({finish:n.string,cancel:n.string,removeLastVertex:n.string}),buttonTitles:n.shape({drawMarkerButton:n.string,drawPolyButton:n.string,drawLineButton:n.string,drawCircleButton:n.string,drawRectButton:n.string,editButton:n.string,dragButton:n.string,cutButton:n.string,deleteButton:n.string})}),mode:n.oneOf(Object.values(b.Mode)),shape:n.oneOf(Object.values(b.Shape)),drawOptions:n.shape({snappable:n.bool,snapDistance:n.number,snapMiddle:n.bool,tooltips:n.bool,allowSelfIntersection:n.bool,templineStyle:n.shape(r.Path.propTypes),hintlineStyle:n.shape(r.Path.propTypes),cursorMarker:n.bool,finishOn:n.oneOf(["click","dblclick","mousedown","mouseover","mouseout","contextmenu",null]),markerStyle:n.shape(C),pathOptions:n.shape(r.Path.propTypes)}),editOptions:n.shape({draggable:n.bool,snappable:n.bool,snapDistance:n.number,allowSelfIntersection:n.bool,preventMarkerRemoval:n.bool,hintlineStyle:n.shape(r.Path.propTypes)}),layers:n.arrayOf(n.instanceOf(R.Layer)),points:n.arrayOf(n.instanceOf(R.Marker)),circles:n.arrayOf(n.instanceOf(R.Circle)),polylines:n.arrayOf(n.instanceOf(R.Polyline)),polygons:n.arrayOf(n.instanceOf(R.Polygon)),rectangles:n.arrayOf(n.instanceOf(R.Rectangle)),onDrawLayer:n.func,onDrawPoint:n.func,onDrawCircle:n.func,onDrawPolyline:n.func,onDrawPolygon:n.func,onDrawRectangle:n.func,onLayerChange:n.func,onPointChange:n.func,onCircleChange:n.func,onPolylineChange:n.func,onPolygonChange:n.func,onRectangleChange:n.func,onRemoveLayer:n.func,onRemovePoint:n.func,onRemoveCircle:n.func,onRemovePolyline:n.func,onRemovePolygon:n.func,onRemoveRectangle:n.func},w.defaultProps={lang:b.Lang.en,mode:b.Mode.None,shape:b.Shape.Marker},w.contextType=c,w);function O(){this.constructor=d}function w(e,n){var O=v.call(this,e,n)||this;return O.layers=[],O.isLayerRelevant=function(e){return e.pm&&!(e.pm.options&&e.pm.options.preventMarkerRemoval)&&!(e instanceof R.LayerGroup)},O.isLayerRemoveable=function(e){return!(e._pmTempLayer||e.pm&&e.pm.dragging())},O.onDrawLayer=function(n){var e=O.props,t=e.shape,o=e.layers,r=void 0===o?[]:o,a=e.points,i=void 0===a?[]:a,l=e.circles,s=void 0===l?[]:l,p=e.polylines,c=void 0===p?[]:p,u=e.polygons,f=void 0===u?[]:u,d=e.rectangles,y=void 0===d?[]:d,g=e.onDrawLayer,h=e.onDrawPoint,m=e.onDrawCircle,v=e.onDrawPolyline,L=e.onDrawPolygon,C=e.onDrawRectangle;n.layer.remove(),g&&g(n.layer,r.concat([n.layer])),n.shape===b.Shape.Marker&&n.layer instanceof R.Marker?h&&h(n.layer,i.concat([n.layer])):n.shape===b.Shape.Circle&&n.layer instanceof R.Circle?m&&m(n.layer,s.concat([n.layer])):n.shape===b.Shape.Line&&n.layer instanceof R.Polyline?v&&v(n.layer,c.concat([n.layer])):n.shape===b.Shape.Polygon&&n.layer instanceof R.Polygon?L&&L(n.layer,f.concat([n.layer])):n.shape===b.Shape.Rectangle&&n.layer instanceof R.Rectangle&&C&&C(n.layer,y.concat([n.layer])),O.isControlled||O.setState(function(e){return{layers:e.layers.concat([n.layer])}}),O.context.map.pm.enableDraw(t,O.drawOptions)},O.onRemoveLayer=function(e,n,t){if(O.props.mode===b.Mode.Remove&&O.isLayerRelevant(e.target)&&O.isLayerRemoveable(e.target)){var o=O.props,r=o.layers,a=void 0===r?[]:r,i=o.points,l=void 0===i?[]:i,s=o.circles,p=void 0===s?[]:s,c=o.polylines,u=void 0===c?[]:c,f=o.polygons,d=void 0===f?[]:f,y=o.rectangles,g=void 0===y?[]:y,h=o.onRemoveLayer,m=o.onRemovePoint,v=o.onRemoveCircle,L=o.onRemovePolyline,C=o.onRemovePolygon,P=o.onRemoveRectangle;O.isControlled||O.setState(function(e){return{layers:e.layers.filter(function(e){return e!==n})}}),h&&h(n,t,a.filter(function(e){return e!==n})),n instanceof R.Marker?m&&m(n,t,l.filter(function(e){return e!==n})):n instanceof R.Circle?v&&v(n,t,p.filter(function(e){return e!==n})):n instanceof R.Polyline?L&&L(n,t,u.filter(function(e){return e!==n})):n instanceof R.Polygon?C&&C(n,t,d.filter(function(e){return e!==n})):n instanceof R.Rectangle&&P&&P(n,t,g.filter(function(e){return e!==n}))}},O.removeLayer=function(n){O.layers.filter(function(e){return e!==n})},O.state={layers:[]},O}b.default=P,Object.defineProperty(b,"__esModule",{value:!0})});