rc-leaflet-drawing
Version:
React Map Drawing Component based on rc-leaflet
465 lines (464 loc) • 24.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import 'leaflet.pm/dist/leaflet.pm.css';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import L from 'leaflet';
import 'leaflet.pm';
import { Path, Circle, Point, Polyline, Polygon, Rectangle } from 'rc-leaflet';
import MapContext from 'rc-leaflet/es/components/RCMap/Context';
import { defaultIcon } from 'rc-leaflet/es/components/DivIcon/creator';
export var Lang;
(function (Lang) {
Lang["en"] = "en";
Lang["de"] = "de";
Lang["it"] = "it";
Lang["ru"] = "ru";
Lang["ro"] = "ro";
Lang["es"] = "es";
Lang["fr"] = "fr";
Lang["nl"] = "nl";
})(Lang || (Lang = {}));
export var Mode;
(function (Mode) {
Mode["None"] = "None";
Mode["Draw"] = "Draw";
Mode["Drag"] = "Drag";
Mode["Edit"] = "Edit";
Mode["Remove"] = "Remove";
})(Mode || (Mode = {}));
export var Shape;
(function (Shape) {
Shape["Marker"] = "Marker";
Shape["Circle"] = "Circle";
Shape["Line"] = "Line";
Shape["Polygon"] = "Polygon";
Shape["Rectangle"] = "Rectangle";
})(Shape || (Shape = {}));
var _a = Point.propTypes, position = _a.position, PointPropTypes = __rest(_a, ["position"]);
var Drawing = /** @class */ (function (_super) {
__extends(Drawing, _super);
function Drawing(props, context) {
var _this = _super.call(this, props, context) || this;
_this.layers = [];
_this.isLayerRelevant = function (layer) { return layer.pm && !(layer.pm.options && layer.pm.options.preventMarkerRemoval) && !(layer instanceof L.LayerGroup); };
_this.isLayerRemoveable = function (layer) { return !layer._pmTempLayer && (!layer.pm || !layer.pm.dragging()); };
_this.onDrawLayer = function (e) {
var _a = _this.props, shape = _a.shape, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.points, points = _c === void 0 ? [] : _c, _d = _a.circles, circles = _d === void 0 ? [] : _d, _e = _a.polylines, polylines = _e === void 0 ? [] : _e, _f = _a.polygons, polygons = _f === void 0 ? [] : _f, _g = _a.rectangles, rectangles = _g === void 0 ? [] : _g, onDrawLayer = _a.onDrawLayer, onDrawPoint = _a.onDrawPoint, onDrawCircle = _a.onDrawCircle, onDrawPolyline = _a.onDrawPolyline, onDrawPolygon = _a.onDrawPolygon, onDrawRectangle = _a.onDrawRectangle;
e.layer.remove();
onDrawLayer && onDrawLayer(e.layer, layers.concat([e.layer]));
if (e.shape === Shape.Marker && e.layer instanceof L.Marker) {
onDrawPoint && onDrawPoint(e.layer, points.concat([e.layer]));
}
else if (e.shape === Shape.Circle && e.layer instanceof L.Circle) {
onDrawCircle && onDrawCircle(e.layer, circles.concat([e.layer]));
}
else if (e.shape === Shape.Line && e.layer instanceof L.Polyline) {
onDrawPolyline && onDrawPolyline(e.layer, polylines.concat([e.layer]));
}
else if (e.shape === Shape.Polygon && e.layer instanceof L.Polygon) {
onDrawPolygon && onDrawPolygon(e.layer, polygons.concat([e.layer]));
}
else if (e.shape === Shape.Rectangle && e.layer instanceof L.Rectangle) {
onDrawRectangle && onDrawRectangle(e.layer, rectangles.concat([e.layer]));
}
if (!_this.isControlled) {
_this.setState(function (prevState) { return ({ layers: prevState.layers.concat([e.layer]) }); });
}
_this.context.map.pm.enableDraw(shape, _this.drawOptions);
};
_this.onRemoveLayer = function (e, layer, index) {
if (_this.props.mode === Mode.Remove && _this.isLayerRelevant(e.target) && _this.isLayerRemoveable(e.target)) {
var _a = _this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.points, points = _c === void 0 ? [] : _c, _d = _a.circles, circles = _d === void 0 ? [] : _d, _e = _a.polylines, polylines = _e === void 0 ? [] : _e, _f = _a.polygons, polygons = _f === void 0 ? [] : _f, _g = _a.rectangles, rectangles = _g === void 0 ? [] : _g, onRemoveLayer = _a.onRemoveLayer, onRemovePoint = _a.onRemovePoint, onRemoveCircle = _a.onRemoveCircle, onRemovePolyline = _a.onRemovePolyline, onRemovePolygon = _a.onRemovePolygon, onRemoveRectangle = _a.onRemoveRectangle;
if (!_this.isControlled) {
_this.setState(function (prevState) { return ({ layers: prevState.layers.filter(function (l) { return l !== layer; }) }); });
}
onRemoveLayer && onRemoveLayer(layer, index, layers.filter(function (l) { return l !== layer; }));
if (layer instanceof L.Marker) {
onRemovePoint && onRemovePoint(layer, index, points.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof L.Circle) {
onRemoveCircle && onRemoveCircle(layer, index, circles.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof L.Polyline) {
onRemovePolyline && onRemovePolyline(layer, index, polylines.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof L.Polygon) {
onRemovePolygon && onRemovePolygon(layer, index, polygons.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof L.Rectangle) {
onRemoveRectangle && onRemoveRectangle(layer, index, rectangles.filter(function (l) { return l !== layer; }));
}
}
};
_this.removeLayer = function (layer) { _this.layers.filter(function (l) { return l !== layer; }); };
_this.state = { layers: [] };
return _this;
}
Drawing.prototype.componentDidMount = function () {
var _a = this.props, lang = _a.lang, translation = _a.translation;
var map = this.context.map;
map.pm.setLang('rc-leaflet', translation || {}, lang);
this.context.map.on('pm:create', this.onDrawLayer);
this.enableMode();
};
Drawing.prototype.componentDidUpdate = function (prevProps) {
var prevMode = prevProps.mode, prevShape = prevProps.shape, prevDrawOptions = prevProps.drawOptions;
var _a = this.props, mode = _a.mode, shape = _a.shape, drawOptions = _a.drawOptions;
if (mode !== prevMode || (mode === Mode.Draw && (shape !== prevShape || drawOptions !== prevDrawOptions))) {
this.disablePrevMode(prevMode);
this.enableMode();
}
};
Drawing.prototype.componentWillUnmount = function () {
this.context.map.off('pm:create', this.onDrawLayer);
};
Object.defineProperty(Drawing.prototype, "drawOptions", {
get: function () {
var _a = this.props, shape = _a.shape, _b = _a.drawOptions, drawOptions = _b === void 0 ? {} : _b;
var options = {};
if (shape === Shape.Marker) {
var _c = drawOptions.markerStyle, markerStyle = _c === void 0 ? {} : _c, restDrawOptions = __rest(drawOptions, ["markerStyle"]);
options = __assign({}, restDrawOptions, { markerStyle: __assign({ icon: defaultIcon }, markerStyle) });
}
else {
var theme = this.context.theme && this.context.theme.path || {};
var _d = drawOptions.templineStyle, templineStyle = _d === void 0 ? {} : _d, _e = drawOptions.hintlineStyle, hintlineStyle = _e === void 0 ? {} : _e, _f = drawOptions.pathOptions, pathOptions = _f === void 0 ? {} : _f, restDrawOptions = __rest(drawOptions, ["templineStyle", "hintlineStyle", "pathOptions"]);
options = __assign({}, restDrawOptions, { templineStyle: __assign({}, theme, templineStyle), hintlineStyle: __assign({}, theme, { dashArray: [5, 5] }, hintlineStyle), pathOptions: __assign({}, theme, pathOptions) });
}
return options;
},
enumerable: true,
configurable: true
});
Drawing.prototype.getLayers = function () {
if (this.isControlled) {
var _a = this.props, layers = _a.layers, _b = _a.points, points = _b === void 0 ? [] : _b, _c = _a.circles, circles = _c === void 0 ? [] : _c, _d = _a.polylines, polylines = _d === void 0 ? [] : _d, _e = _a.polygons, polygons = _e === void 0 ? [] : _e, _f = _a.rectangles, rectangles = _f === void 0 ? [] : _f;
if (layers) {
return layers;
}
return points.concat(circles, polylines, polygons, rectangles);
}
return this.state.layers;
};
Object.defineProperty(Drawing.prototype, "isControlled", {
get: function () {
var _a = this.props, layers = _a.layers, points = _a.points, circles = _a.circles, polylines = _a.polylines, polygons = _a.polygons, rectangles = _a.rectangles;
return (layers || points || circles || polylines || polygons || rectangles) !== undefined;
},
enumerable: true,
configurable: true
});
Drawing.prototype.onLayerUpdate = function (layer) {
var mode = this.props.mode;
if (mode === Mode.Edit) {
layer.pm.enable();
}
};
Drawing.prototype.onCircleChange = function (layer, index, center, radius) {
if (this.isControlled) {
var _a = this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.circles, circles = _c === void 0 ? [] : _c, onLayerChange = _a.onLayerChange, onCircleChange = _a.onCircleChange;
var circle_1 = L.circle(layer.getLatLng(), layer.getRadius());
L.Util.setOptions(circle_1, layer.options);
layer.setLatLng(center);
layer.setRadius(radius);
onLayerChange && onLayerChange(circle_1, index, layers.map(function (l, i) { return i === index ? circle_1 : l; }));
onCircleChange && onCircleChange(circle_1, index, circles.map(function (p, i) { return i === index ? circle_1 : p; }));
}
};
Drawing.prototype.onPolylineChange = function (layer, index, points) {
if (this.isControlled) {
var _a = this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.polylines, polylines = _c === void 0 ? [] : _c, onLayerChange = _a.onLayerChange, onPolylineChange = _a.onPolylineChange;
var polyline_1 = L.polyline(layer.getLatLngs());
L.Util.setOptions(polyline_1, layer.options);
layer.setLatLngs(points);
onLayerChange && onLayerChange(polyline_1, index, layers.map(function (l, i) { return i === index ? polyline_1 : l; }));
onPolylineChange && onPolylineChange(polyline_1, index, polylines.map(function (p, i) { return i === index ? polyline_1 : p; }));
}
};
Drawing.prototype.onPolygonChange = function (layer, index, points) {
if (this.isControlled) {
var _a = this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.polygons, polygons = _c === void 0 ? [] : _c, onLayerChange = _a.onLayerChange, onPolygonChange = _a.onPolygonChange;
var polygon_1 = L.polygon(layer.getLatLngs());
L.Util.setOptions(polygon_1, layer.options);
layer.setLatLngs(points);
onLayerChange && onLayerChange(polygon_1, index, layers.map(function (l, i) { return i === index ? polygon_1 : l; }));
onPolygonChange && onPolygonChange(polygon_1, index, polygons.map(function (p, i) { return i === index ? polygon_1 : p; }));
}
};
Drawing.prototype.onRectangleChange = function (layer, index, points) {
if (this.isControlled) {
var _a = this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.rectangles, rectangles = _c === void 0 ? [] : _c, onLayerChange = _a.onLayerChange, onRectangleChange = _a.onRectangleChange;
var rectangle_1 = L.rectangle(layer.getBounds());
L.Util.setOptions(rectangle_1, layer.options);
layer.setLatLngs(points);
onLayerChange && onLayerChange(rectangle_1, index, layers.map(function (l, i) { return i === index ? rectangle_1 : l; }));
onRectangleChange && onRectangleChange(rectangle_1, index, rectangles.map(function (p, i) { return i === index ? rectangle_1 : p; }));
}
};
Drawing.prototype.disablePrevMode = function (mode) {
if (mode === Mode.Draw) {
this.context.map.pm.disableDraw();
}
else if (mode === Mode.Edit) {
for (var _i = 0, _a = this.layers; _i < _a.length; _i++) {
var layer = _a[_i];
layer.pm.disable();
}
}
else if (mode === Mode.Drag) {
for (var _b = 0, _c = this.layers; _b < _c.length; _b++) {
var layer = _c[_b];
layer.pm.disableLayerDrag();
}
}
};
Drawing.prototype.enableMode = function () {
var _a = this.props, mode = _a.mode, shape = _a.shape, editOptions = _a.editOptions;
if (mode === Mode.Draw) {
this.context.map.pm.enableDraw(shape, this.drawOptions);
}
else if (mode === Mode.Edit) {
for (var _i = 0, _b = this.layers; _i < _b.length; _i++) {
var layer = _b[_i];
layer.pm.enable(editOptions);
}
}
else if (mode === Mode.Drag) {
for (var _c = 0, _d = this.layers; _c < _d.length; _c++) {
var layer = _d[_c];
layer.pm.enableLayerDrag();
}
}
};
Drawing.prototype.addPoint = function (layer, index) {
var _this = this;
var pos;
layer.on('dragstart', function (e) {
pos = layer.getLatLng();
});
layer.on('dragend', function () {
if (_this.isControlled) {
var _a = _this.props, _b = _a.layers, layers = _b === void 0 ? [] : _b, _c = _a.points, points = _c === void 0 ? [] : _c, onLayerChange = _a.onLayerChange, onPointChange = _a.onPointChange;
var point_1 = L.marker(layer.getLatLng());
L.Util.setOptions(point_1, layer.options);
layer.setLatLng(pos);
onLayerChange && onLayerChange(point_1, index, layers.map(function (l, i) { return i === index ? point_1 : l; }));
onPointChange && onPointChange(point_1, index, points.map(function (p, i) { return i === index ? point_1 : p; }));
}
});
this.layers.push(layer);
};
Drawing.prototype.addCircle = function (layer, index) {
var _this = this;
var center;
var radius;
layer.on('pm:dragstart', function () {
center = layer.getLatLng();
radius = layer.getRadius();
});
layer.on('pm:dragend', function () { return _this.onCircleChange(layer, index, center, radius); });
layer.on('pm:markerdragstart', function () {
center = layer.getLatLng();
radius = layer.getRadius();
});
layer.on('pm:markerdragend', function () {
_this.onCircleChange(layer, index, center, radius);
_this.isControlled && layer.pm.enable();
});
this.layers.push(layer);
};
Drawing.prototype.addPolyline = function (layer, index) {
var _this = this;
var points;
layer.on('pm:dragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:dragend', function () { return _this.onPolylineChange(layer, index, points); });
layer.on('pm:markerdragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:markerdragend', function () {
_this.onPolylineChange(layer, index, points);
_this.isControlled && layer.pm.enable();
});
this.layers.push(layer);
};
Drawing.prototype.addPolygon = function (layer, index) {
var _this = this;
var points;
layer.on('pm:dragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:dragend', function () { return _this.onPolygonChange(layer, index, points); });
layer.on('pm:markerdragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:markerdragend', function () {
_this.onPolygonChange(layer, index, points);
_this.isControlled && layer.pm.enable();
});
this.layers.push(layer);
};
Drawing.prototype.addRectangle = function (layer, index) {
var _this = this;
var points;
layer.on('pm:dragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:dragend', function () { return _this.onRectangleChange(layer, index, points); });
layer.on('pm:markerdragstart', function () {
points = layer.getLatLngs();
});
layer.on('pm:markerdragend', function () {
_this.onRectangleChange(layer, index, points);
_this.isControlled && layer.pm.enable();
});
this.layers.push(layer);
};
Drawing.prototype.renderLayers = function (layers) {
var _this = this;
if (layers === void 0) { layers = []; }
return layers.map(function (layer, i) {
var props = __assign({ key: i }, (layer.options || {}), { onClick: function (e) { return _this.onRemoveLayer(e, layer, i); }, onUpdate: function (l) { return _this.onLayerUpdate(l); }, onBeforeRemove: _this.removeLayer });
if (layer instanceof L.Marker) {
return React.createElement(Point, __assign({ position: layer.getLatLng() }, props, { onAdd: function (e, l) { return _this.addPoint(l, i); } }));
}
else if (layer instanceof L.Circle) {
return React.createElement(Circle, __assign({ center: layer.getLatLng(), radius: layer.getRadius() }, props, { onAdd: function (e, l) { return _this.addCircle(l, i); } }));
}
else if (layer instanceof L.Rectangle) {
return React.createElement(Rectangle, __assign({ bounds: layer.getBounds() }, props, { onAdd: function (e, l) { return _this.addRectangle(l, i); } }));
}
else if (layer instanceof L.Polygon) {
return React.createElement(Polygon, __assign({ points: layer.getLatLngs() }, props, { onAdd: function (e, l) { return _this.addPolygon(l, i); } }));
}
else if (layer instanceof L.Polyline) {
return React.createElement(Polyline, __assign({ points: layer.getLatLngs() }, props, { onAdd: function (e, l) { return _this.addPolyline(l, i); } }));
}
return null;
});
};
Drawing.prototype.render = function () {
return this.renderLayers(this.getLayers());
};
Drawing.propTypes = {
lang: PropTypes.oneOf(Object.values(Lang)),
translation: PropTypes.shape({
tooltips: PropTypes.shape({
placeMarker: PropTypes.string,
firstVertex: PropTypes.string,
continueLine: PropTypes.string,
finishLine: PropTypes.string,
finishPoly: PropTypes.string,
finishRect: PropTypes.string,
startCircle: PropTypes.string,
finishCircle: PropTypes.string
}),
actions: PropTypes.shape({
finish: PropTypes.string,
cancel: PropTypes.string,
removeLastVertex: PropTypes.string
}),
buttonTitles: PropTypes.shape({
drawMarkerButton: PropTypes.string,
drawPolyButton: PropTypes.string,
drawLineButton: PropTypes.string,
drawCircleButton: PropTypes.string,
drawRectButton: PropTypes.string,
editButton: PropTypes.string,
dragButton: PropTypes.string,
cutButton: PropTypes.string,
deleteButton: PropTypes.string
})
}),
mode: PropTypes.oneOf(Object.values(Mode)),
shape: PropTypes.oneOf(Object.values(Shape)),
drawOptions: PropTypes.shape({
snappable: PropTypes.bool,
snapDistance: PropTypes.number,
snapMiddle: PropTypes.bool,
tooltips: PropTypes.bool,
allowSelfIntersection: PropTypes.bool,
templineStyle: PropTypes.shape(Path.propTypes),
hintlineStyle: PropTypes.shape(Path.propTypes),
cursorMarker: PropTypes.bool,
finishOn: PropTypes.oneOf(['click', 'dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu', null]),
markerStyle: PropTypes.shape(PointPropTypes),
pathOptions: PropTypes.shape(Path.propTypes)
}),
editOptions: PropTypes.shape({
draggable: PropTypes.bool,
snappable: PropTypes.bool,
snapDistance: PropTypes.number,
allowSelfIntersection: PropTypes.bool,
preventMarkerRemoval: PropTypes.bool,
hintlineStyle: PropTypes.shape(Path.propTypes)
}),
layers: PropTypes.arrayOf(PropTypes.instanceOf(L.Layer)),
points: PropTypes.arrayOf(PropTypes.instanceOf(L.Marker)),
circles: PropTypes.arrayOf(PropTypes.instanceOf(L.Circle)),
polylines: PropTypes.arrayOf(PropTypes.instanceOf(L.Polyline)),
polygons: PropTypes.arrayOf(PropTypes.instanceOf(L.Polygon)),
rectangles: PropTypes.arrayOf(PropTypes.instanceOf(L.Rectangle)),
onDrawLayer: PropTypes.func,
onDrawPoint: PropTypes.func,
onDrawCircle: PropTypes.func,
onDrawPolyline: PropTypes.func,
onDrawPolygon: PropTypes.func,
onDrawRectangle: PropTypes.func,
onLayerChange: PropTypes.func,
onPointChange: PropTypes.func,
onCircleChange: PropTypes.func,
onPolylineChange: PropTypes.func,
onPolygonChange: PropTypes.func,
onRectangleChange: PropTypes.func,
onRemoveLayer: PropTypes.func,
onRemovePoint: PropTypes.func,
onRemoveCircle: PropTypes.func,
onRemovePolyline: PropTypes.func,
onRemovePolygon: PropTypes.func,
onRemoveRectangle: PropTypes.func
};
Drawing.defaultProps = {
lang: Lang.en,
mode: Mode.None,
shape: Shape.Marker
};
Drawing.contextType = MapContext;
return Drawing;
}(Component));
export default Drawing;