You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
5.0 KiB
137 lines
5.0 KiB
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } |
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } |
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } |
|
|
|
import { PropTypes } from 'prop-types'; |
|
import Draw from 'leaflet-draw'; // eslint-disable-line |
|
|
|
import isEqual from 'fast-deep-equal'; |
|
import React, { useRef } from 'react'; |
|
import { useLeafletContext } from '@react-leaflet/core'; |
|
import leaflet, { Map, Control } from 'leaflet'; |
|
var eventHandlers = { |
|
onEdited: 'draw:edited', |
|
onDrawStart: 'draw:drawstart', |
|
onDrawStop: 'draw:drawstop', |
|
onDrawVertex: 'draw:drawvertex', |
|
onEditStart: 'draw:editstart', |
|
onEditMove: 'draw:editmove', |
|
onEditResize: 'draw:editresize', |
|
onEditVertex: 'draw:editvertex', |
|
onEditStop: 'draw:editstop', |
|
onDeleted: 'draw:deleted', |
|
onDeleteStart: 'draw:deletestart', |
|
onDeleteStop: 'draw:deletestop' |
|
}; |
|
|
|
function EditControl(props) { |
|
var context = useLeafletContext(); |
|
var drawRef = useRef(); |
|
var propsRef = useRef(props); |
|
|
|
var onDrawCreate = function onDrawCreate(e) { |
|
var onCreated = props.onCreated; |
|
var container = context.layerContainer || context.map; |
|
container.addLayer(e.layer); |
|
onCreated && onCreated(e); |
|
}; |
|
|
|
React.useEffect(function () { |
|
var map = context.map; |
|
var onMounted = props.onMounted; |
|
|
|
for (var key in eventHandlers) { |
|
map.on(eventHandlers[key], function (evt) { |
|
var handlers = Object.keys(eventHandlers).filter(function (handler) { |
|
return eventHandlers[handler] === evt.type; |
|
}); |
|
|
|
if (handlers.length === 1) { |
|
var handler = handlers[0]; |
|
props[handler] && props[handler](evt); |
|
} |
|
}); |
|
} |
|
|
|
map.on(leaflet.Draw.Event.CREATED, onDrawCreate); |
|
drawRef.current = createDrawElement(props, context); |
|
map.addControl(drawRef.current); |
|
onMounted && onMounted(drawRef.current); |
|
return function () { |
|
map.off(leaflet.Draw.Event.CREATED, onDrawCreate); |
|
|
|
for (var _key in eventHandlers) { |
|
if (props[_key]) { |
|
map.off(eventHandlers[_key], props[_key]); |
|
} |
|
} |
|
}; |
|
}, []); |
|
React.useEffect(function () { |
|
if (isEqual(props.draw, propsRef.current.draw) && isEqual(props.edit, propsRef.current.edit) && props.position === propsRef.current.position) { |
|
return; |
|
} |
|
|
|
var map = context.map; |
|
drawRef.current.remove(map); |
|
drawRef.current = createDrawElement(props, context); |
|
drawRef.current.addTo(map); |
|
var onMounted = props.onMounted; |
|
onMounted && onMounted(drawRef.current); |
|
}, [props.draw, props.edit, props.position]); |
|
return null; |
|
} |
|
|
|
function createDrawElement(props, context) { |
|
var layerContainer = context.layerContainer; |
|
var draw = props.draw, |
|
edit = props.edit, |
|
position = props.position; |
|
var options = { |
|
edit: _objectSpread(_objectSpread({}, edit), {}, { |
|
featureGroup: layerContainer |
|
}) |
|
}; |
|
|
|
if (draw) { |
|
options.draw = _objectSpread({}, draw); |
|
} |
|
|
|
if (position) { |
|
options.position = position; |
|
} |
|
|
|
return new Control.Draw(options); |
|
} |
|
|
|
EditControl.propTypes = _objectSpread(_objectSpread({}, Object.keys(eventHandlers).reduce(function (acc, val) { |
|
acc[val] = PropTypes.func; |
|
return acc; |
|
}, {})), {}, { |
|
onCreated: PropTypes.func, |
|
onMounted: PropTypes.func, |
|
draw: PropTypes.shape({ |
|
polyline: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
polygon: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
rectangle: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
circle: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
marker: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]) |
|
}), |
|
edit: PropTypes.shape({ |
|
edit: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
remove: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
poly: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), |
|
allowIntersection: PropTypes.bool |
|
}), |
|
position: PropTypes.oneOf(['topright', 'topleft', 'bottomright', 'bottomleft']), |
|
leaflet: PropTypes.shape({ |
|
map: PropTypes.instanceOf(Map), |
|
layerContainer: PropTypes.shape({ |
|
addLayer: PropTypes.func.isRequired, |
|
removeLayer: PropTypes.func.isRequired |
|
}) |
|
}) |
|
}); |
|
export default EditControl; |