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
2 years ago
|
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;
|