rc-leaflet-drawing
Version:
React Map Drawing Component based on rc-leaflet
477 lines (476 loc) • 26.3 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;
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
require("leaflet.pm/dist/leaflet.pm.css");
var react_1 = __importStar(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var leaflet_1 = __importDefault(require("leaflet"));
require("leaflet.pm");
var rc_leaflet_1 = require("rc-leaflet");
var Context_1 = __importDefault(require("rc-leaflet/es/components/RCMap/Context"));
var creator_1 = require("rc-leaflet/es/components/DivIcon/creator");
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 = exports.Lang || (exports.Lang = {}));
var Mode;
(function (Mode) {
Mode["None"] = "None";
Mode["Draw"] = "Draw";
Mode["Drag"] = "Drag";
Mode["Edit"] = "Edit";
Mode["Remove"] = "Remove";
})(Mode = exports.Mode || (exports.Mode = {}));
var Shape;
(function (Shape) {
Shape["Marker"] = "Marker";
Shape["Circle"] = "Circle";
Shape["Line"] = "Line";
Shape["Polygon"] = "Polygon";
Shape["Rectangle"] = "Rectangle";
})(Shape = exports.Shape || (exports.Shape = {}));
var _a = rc_leaflet_1.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 leaflet_1.default.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 leaflet_1.default.Marker) {
onDrawPoint && onDrawPoint(e.layer, points.concat([e.layer]));
}
else if (e.shape === Shape.Circle && e.layer instanceof leaflet_1.default.Circle) {
onDrawCircle && onDrawCircle(e.layer, circles.concat([e.layer]));
}
else if (e.shape === Shape.Line && e.layer instanceof leaflet_1.default.Polyline) {
onDrawPolyline && onDrawPolyline(e.layer, polylines.concat([e.layer]));
}
else if (e.shape === Shape.Polygon && e.layer instanceof leaflet_1.default.Polygon) {
onDrawPolygon && onDrawPolygon(e.layer, polygons.concat([e.layer]));
}
else if (e.shape === Shape.Rectangle && e.layer instanceof leaflet_1.default.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 leaflet_1.default.Marker) {
onRemovePoint && onRemovePoint(layer, index, points.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof leaflet_1.default.Circle) {
onRemoveCircle && onRemoveCircle(layer, index, circles.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof leaflet_1.default.Polyline) {
onRemovePolyline && onRemovePolyline(layer, index, polylines.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof leaflet_1.default.Polygon) {
onRemovePolygon && onRemovePolygon(layer, index, polygons.filter(function (l) { return l !== layer; }));
}
else if (layer instanceof leaflet_1.default.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: creator_1.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 = leaflet_1.default.circle(layer.getLatLng(), layer.getRadius());
leaflet_1.default.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 = leaflet_1.default.polyline(layer.getLatLngs());
leaflet_1.default.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 = leaflet_1.default.polygon(layer.getLatLngs());
leaflet_1.default.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 = leaflet_1.default.rectangle(layer.getBounds());
leaflet_1.default.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 = leaflet_1.default.marker(layer.getLatLng());
leaflet_1.default.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 leaflet_1.default.Marker) {
return react_1.default.createElement(rc_leaflet_1.Point, __assign({ position: layer.getLatLng() }, props, { onAdd: function (e, l) { return _this.addPoint(l, i); } }));
}
else if (layer instanceof leaflet_1.default.Circle) {
return react_1.default.createElement(rc_leaflet_1.Circle, __assign({ center: layer.getLatLng(), radius: layer.getRadius() }, props, { onAdd: function (e, l) { return _this.addCircle(l, i); } }));
}
else if (layer instanceof leaflet_1.default.Rectangle) {
return react_1.default.createElement(rc_leaflet_1.Rectangle, __assign({ bounds: layer.getBounds() }, props, { onAdd: function (e, l) { return _this.addRectangle(l, i); } }));
}
else if (layer instanceof leaflet_1.default.Polygon) {
return react_1.default.createElement(rc_leaflet_1.Polygon, __assign({ points: layer.getLatLngs() }, props, { onAdd: function (e, l) { return _this.addPolygon(l, i); } }));
}
else if (layer instanceof leaflet_1.default.Polyline) {
return react_1.default.createElement(rc_leaflet_1.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: prop_types_1.default.oneOf(Object.values(Lang)),
translation: prop_types_1.default.shape({
tooltips: prop_types_1.default.shape({
placeMarker: prop_types_1.default.string,
firstVertex: prop_types_1.default.string,
continueLine: prop_types_1.default.string,
finishLine: prop_types_1.default.string,
finishPoly: prop_types_1.default.string,
finishRect: prop_types_1.default.string,
startCircle: prop_types_1.default.string,
finishCircle: prop_types_1.default.string
}),
actions: prop_types_1.default.shape({
finish: prop_types_1.default.string,
cancel: prop_types_1.default.string,
removeLastVertex: prop_types_1.default.string
}),
buttonTitles: prop_types_1.default.shape({
drawMarkerButton: prop_types_1.default.string,
drawPolyButton: prop_types_1.default.string,
drawLineButton: prop_types_1.default.string,
drawCircleButton: prop_types_1.default.string,
drawRectButton: prop_types_1.default.string,
editButton: prop_types_1.default.string,
dragButton: prop_types_1.default.string,
cutButton: prop_types_1.default.string,
deleteButton: prop_types_1.default.string
})
}),
mode: prop_types_1.default.oneOf(Object.values(Mode)),
shape: prop_types_1.default.oneOf(Object.values(Shape)),
drawOptions: prop_types_1.default.shape({
snappable: prop_types_1.default.bool,
snapDistance: prop_types_1.default.number,
snapMiddle: prop_types_1.default.bool,
tooltips: prop_types_1.default.bool,
allowSelfIntersection: prop_types_1.default.bool,
templineStyle: prop_types_1.default.shape(rc_leaflet_1.Path.propTypes),
hintlineStyle: prop_types_1.default.shape(rc_leaflet_1.Path.propTypes),
cursorMarker: prop_types_1.default.bool,
finishOn: prop_types_1.default.oneOf(['click', 'dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu', null]),
markerStyle: prop_types_1.default.shape(PointPropTypes),
pathOptions: prop_types_1.default.shape(rc_leaflet_1.Path.propTypes)
}),
editOptions: prop_types_1.default.shape({
draggable: prop_types_1.default.bool,
snappable: prop_types_1.default.bool,
snapDistance: prop_types_1.default.number,
allowSelfIntersection: prop_types_1.default.bool,
preventMarkerRemoval: prop_types_1.default.bool,
hintlineStyle: prop_types_1.default.shape(rc_leaflet_1.Path.propTypes)
}),
layers: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Layer)),
points: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Marker)),
circles: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Circle)),
polylines: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Polyline)),
polygons: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Polygon)),
rectangles: prop_types_1.default.arrayOf(prop_types_1.default.instanceOf(leaflet_1.default.Rectangle)),
onDrawLayer: prop_types_1.default.func,
onDrawPoint: prop_types_1.default.func,
onDrawCircle: prop_types_1.default.func,
onDrawPolyline: prop_types_1.default.func,
onDrawPolygon: prop_types_1.default.func,
onDrawRectangle: prop_types_1.default.func,
onLayerChange: prop_types_1.default.func,
onPointChange: prop_types_1.default.func,
onCircleChange: prop_types_1.default.func,
onPolylineChange: prop_types_1.default.func,
onPolygonChange: prop_types_1.default.func,
onRectangleChange: prop_types_1.default.func,
onRemoveLayer: prop_types_1.default.func,
onRemovePoint: prop_types_1.default.func,
onRemoveCircle: prop_types_1.default.func,
onRemovePolyline: prop_types_1.default.func,
onRemovePolygon: prop_types_1.default.func,
onRemoveRectangle: prop_types_1.default.func
};
Drawing.defaultProps = {
lang: Lang.en,
mode: Mode.None,
shape: Shape.Marker
};
Drawing.contextType = Context_1.default;
return Drawing;
}(react_1.Component));
exports.default = Drawing;