rc-leaflet-drawing
Version:
React Map Drawing Component based on rc-leaflet
379 lines (378 loc) • 19.4 kB
TypeScript
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 { ContextType as MapContextType } from 'rc-leaflet/es/components/RCMap/Context';
export declare enum Lang {
en = "en",
de = "de",
it = "it",
ru = "ru",
ro = "ro",
es = "es",
fr = "fr",
nl = "nl"
}
export declare type TranslationTooltips = Partial<{
placeMarker: string;
firstVertex: string;
continueLine: string;
finishLine: string;
finishPoly: string;
finishRect: string;
startCircle: string;
finishCircle: string;
}>;
export declare type TranslationActions = Partial<{
finish: string;
cancel: string;
removeLastVertex: string;
}>;
export declare type TranslationButtonTitles = Partial<{
drawMarkerButton: string;
drawPolyButton: string;
drawLineButton: string;
drawCircleButton: string;
drawRectButton: string;
editButton: string;
dragButton: string;
cutButton: string;
deleteButton: string;
}>;
export declare type Translation = Partial<{
tooltips: TranslationTooltips;
actions: TranslationActions;
buttonTitles: TranslationButtonTitles;
}>;
export declare enum Mode {
None = "None",
Draw = "Draw",
Drag = "Drag",
Edit = "Edit",
Remove = "Remove"
}
export declare enum Shape {
Marker = "Marker",
Circle = "Circle",
Line = "Line",
Polygon = "Polygon",
Rectangle = "Rectangle"
}
export declare type FinishOn = 'click' | 'dblclick' | 'mousedown' | 'mouseover' | 'mouseout' | 'contextmenu' | null;
export declare type DrawOptions = Partial<{
snappable: boolean;
snapDistance: number;
snapMiddle: boolean;
tooltips: boolean;
allowSelfIntersection: boolean;
templineStyle: L.PathOptions;
hintlineStyle: L.PathOptions;
cursorMarker: boolean;
finishOn: FinishOn;
markerStyle: L.MarkerOptions;
pathOptions: L.PathOptions;
}>;
export declare type EditOptions = Partial<{
draggable: boolean;
snappable: boolean;
snapDistance: number;
allowSelfIntersection: boolean;
preventMarkerRemoval: boolean;
hintlineStyle: L.PathOptions;
}>;
export interface PartialProps {
lang: Lang;
translation: Translation;
mode: Mode;
shape: Shape;
drawOptions: DrawOptions;
editOptions: EditOptions;
layers: L.Layer[];
points: L.Marker[];
circles: L.Circle[];
polylines: L.Polyline[];
polygons: L.Polygon[];
rectangles: L.Rectangle[];
onDrawLayer(layer: L.Layer, layers: L.Layer[]): void;
onDrawPoint(point: L.Marker, points: L.Marker[]): void;
onDrawCircle(circle: L.Circle, circles: L.Circle[]): void;
onDrawPolyline(polyline: L.Polyline, polylines: L.Polyline[]): void;
onDrawPolygon(polygon: L.Polygon, polygons: L.Polygon[]): void;
onDrawRectangle(rectangle: L.Rectangle, rectangles: L.Rectangle[]): void;
onLayerChange(layer: L.Layer, index: number, layers: L.Layer[]): void;
onPointChange(point: L.Marker, index: number, points: L.Marker[]): void;
onCircleChange(circle: L.Circle, index: number, circles: L.Circle[]): void;
onPolylineChange(polyline: L.Polyline, index: number, polylines: L.Polyline[]): void;
onPolygonChange(polygon: L.Polygon, index: number, polygons: L.Polygon[]): void;
onRectangleChange(rectangle: L.Rectangle, index: number, rectangles: L.Rectangle[]): void;
onRemoveLayer(layer: L.Layer, index: number, layers: L.Layer[]): void;
onRemovePoint(point: L.Marker, index: number, points: L.Marker[]): void;
onRemoveCircle(circle: L.Circle, index: number, circles: L.Circle[]): void;
onRemovePolyline(polyline: L.Polyline, index: number, polylines: L.Polyline[]): void;
onRemovePolygon(polygon: L.Polygon, index: number, polygons: L.Polygon[]): void;
onRemoveRectangle(rectangle: L.Rectangle, index: number, rectangles: L.Rectangle[]): void;
}
export declare type Props = Readonly<Partial<PartialProps>>;
export declare type State = Readonly<{
layers: L.Layer[];
}>;
export default class Drawing extends Component<Props, State> {
static propTypes: {
lang: PropTypes.Requireable<Lang>;
translation: PropTypes.Requireable<PropTypes.InferProps<{
tooltips: PropTypes.Requireable<PropTypes.InferProps<{
placeMarker: PropTypes.Requireable<string>;
firstVertex: PropTypes.Requireable<string>;
continueLine: PropTypes.Requireable<string>;
finishLine: PropTypes.Requireable<string>;
finishPoly: PropTypes.Requireable<string>;
finishRect: PropTypes.Requireable<string>;
startCircle: PropTypes.Requireable<string>;
finishCircle: PropTypes.Requireable<string>;
}>>;
actions: PropTypes.Requireable<PropTypes.InferProps<{
finish: PropTypes.Requireable<string>;
cancel: PropTypes.Requireable<string>;
removeLastVertex: PropTypes.Requireable<string>;
}>>;
buttonTitles: PropTypes.Requireable<PropTypes.InferProps<{
drawMarkerButton: PropTypes.Requireable<string>;
drawPolyButton: PropTypes.Requireable<string>;
drawLineButton: PropTypes.Requireable<string>;
drawCircleButton: PropTypes.Requireable<string>;
drawRectButton: PropTypes.Requireable<string>;
editButton: PropTypes.Requireable<string>;
dragButton: PropTypes.Requireable<string>;
cutButton: PropTypes.Requireable<string>;
deleteButton: PropTypes.Requireable<string>;
}>>;
}>>;
mode: PropTypes.Requireable<Mode>;
shape: PropTypes.Requireable<Shape>;
drawOptions: PropTypes.Requireable<PropTypes.InferProps<{
snappable: PropTypes.Requireable<boolean>;
snapDistance: PropTypes.Requireable<number>;
snapMiddle: PropTypes.Requireable<boolean>;
tooltips: PropTypes.Requireable<boolean>;
allowSelfIntersection: PropTypes.Requireable<boolean>;
templineStyle: PropTypes.Requireable<PropTypes.InferProps<{
stroke: PropTypes.Requireable<boolean>;
color: PropTypes.Requireable<string>;
weight: PropTypes.Requireable<number>;
opacity: PropTypes.Requireable<number>;
lineCap: PropTypes.Requireable<"square" | "butt" | "round" | "inherit">;
lineJoin: PropTypes.Requireable<"round" | "bevel" | "miter" | "inherit">;
dashArray: PropTypes.Requireable<string | number[]>;
dashOffset: PropTypes.Requireable<string>;
fill: PropTypes.Requireable<boolean>;
fillColor: PropTypes.Requireable<string>;
fillOpacity: PropTypes.Requireable<number>;
fillRule: PropTypes.Requireable<"nonzero" | "evenodd" | "inherit">;
renderer: PropTypes.Requireable<L.Renderer>;
className: PropTypes.Requireable<string>;
interactive: PropTypes.Requireable<boolean>;
bubblingMouseEvents: PropTypes.Requireable<boolean>;
pane: PropTypes.Requireable<string>;
attribution: PropTypes.Requireable<string>;
onCreate: PropTypes.Requireable<(...args: any[]) => any>;
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
onUpdate: PropTypes.Requireable<(...args: any[]) => any>;
onBeforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
}>>;
hintlineStyle: PropTypes.Requireable<PropTypes.InferProps<{
stroke: PropTypes.Requireable<boolean>;
color: PropTypes.Requireable<string>;
weight: PropTypes.Requireable<number>;
opacity: PropTypes.Requireable<number>;
lineCap: PropTypes.Requireable<"square" | "butt" | "round" | "inherit">;
lineJoin: PropTypes.Requireable<"round" | "bevel" | "miter" | "inherit">;
dashArray: PropTypes.Requireable<string | number[]>;
dashOffset: PropTypes.Requireable<string>;
fill: PropTypes.Requireable<boolean>;
fillColor: PropTypes.Requireable<string>;
fillOpacity: PropTypes.Requireable<number>;
fillRule: PropTypes.Requireable<"nonzero" | "evenodd" | "inherit">;
renderer: PropTypes.Requireable<L.Renderer>;
className: PropTypes.Requireable<string>;
interactive: PropTypes.Requireable<boolean>;
bubblingMouseEvents: PropTypes.Requireable<boolean>;
pane: PropTypes.Requireable<string>;
attribution: PropTypes.Requireable<string>;
onCreate: PropTypes.Requireable<(...args: any[]) => any>;
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
onUpdate: PropTypes.Requireable<(...args: any[]) => any>;
onBeforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
}>>;
cursorMarker: PropTypes.Requireable<boolean>;
finishOn: PropTypes.Requireable<FinishOn>;
markerStyle: PropTypes.Requireable<PropTypes.InferProps<Pick<{
position: PropTypes.Validator<[number, number] | L.LatLng | PropTypes.InferProps<{
lat: PropTypes.Validator<number>;
lng: PropTypes.Validator<number>;
}>>;
zIndexOffset: PropTypes.Requireable<number>;
opacity: PropTypes.Requireable<number>;
clickable: PropTypes.Requireable<boolean>;
draggable: PropTypes.Requireable<boolean>;
keyboard: PropTypes.Requireable<boolean>;
title: PropTypes.Requireable<string>;
alt: PropTypes.Requireable<string>;
riseOnHover: PropTypes.Requireable<boolean>;
riseOffset: PropTypes.Requireable<number>;
autoPan: PropTypes.Requireable<boolean>;
autoPanSpeed: PropTypes.Requireable<number>;
autoPanPadding: PropTypes.Requireable<L.PointExpression>;
interactive: PropTypes.Requireable<boolean>;
bubblingMouseEvents: PropTypes.Requireable<boolean>;
pane: PropTypes.Requireable<string>;
attribution: PropTypes.Requireable<string>;
onCreate: PropTypes.Requireable<(...args: any[]) => any>;
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
onUpdate: PropTypes.Requireable<(...args: any[]) => any>;
onBeforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
}, "interactive" | "title" | "keyboard" | "children" | "opacity" | "attribution" | "pane" | "onClick" | "onMouseOver" | "onMouseOut" | "onCreate" | "onAdd" | "onUpdate" | "onBeforeRemove" | "onRemove" | "draggable" | "alt" | "zIndexOffset" | "riseOnHover" | "riseOffset" | "autoPan" | "autoPanPadding" | "autoPanSpeed" | "bubblingMouseEvents" | "clickable">>>;
pathOptions: PropTypes.Requireable<PropTypes.InferProps<{
stroke: PropTypes.Requireable<boolean>;
color: PropTypes.Requireable<string>;
weight: PropTypes.Requireable<number>;
opacity: PropTypes.Requireable<number>;
lineCap: PropTypes.Requireable<"square" | "butt" | "round" | "inherit">;
lineJoin: PropTypes.Requireable<"round" | "bevel" | "miter" | "inherit">;
dashArray: PropTypes.Requireable<string | number[]>;
dashOffset: PropTypes.Requireable<string>;
fill: PropTypes.Requireable<boolean>;
fillColor: PropTypes.Requireable<string>;
fillOpacity: PropTypes.Requireable<number>;
fillRule: PropTypes.Requireable<"nonzero" | "evenodd" | "inherit">;
renderer: PropTypes.Requireable<L.Renderer>;
className: PropTypes.Requireable<string>;
interactive: PropTypes.Requireable<boolean>;
bubblingMouseEvents: PropTypes.Requireable<boolean>;
pane: PropTypes.Requireable<string>;
attribution: PropTypes.Requireable<string>;
onCreate: PropTypes.Requireable<(...args: any[]) => any>;
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
onUpdate: PropTypes.Requireable<(...args: any[]) => any>;
onBeforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
}>>;
}>>;
editOptions: PropTypes.Requireable<PropTypes.InferProps<{
draggable: PropTypes.Requireable<boolean>;
snappable: PropTypes.Requireable<boolean>;
snapDistance: PropTypes.Requireable<number>;
allowSelfIntersection: PropTypes.Requireable<boolean>;
preventMarkerRemoval: PropTypes.Requireable<boolean>;
hintlineStyle: PropTypes.Requireable<PropTypes.InferProps<{
stroke: PropTypes.Requireable<boolean>;
color: PropTypes.Requireable<string>;
weight: PropTypes.Requireable<number>;
opacity: PropTypes.Requireable<number>;
lineCap: PropTypes.Requireable<"square" | "butt" | "round" | "inherit">;
lineJoin: PropTypes.Requireable<"round" | "bevel" | "miter" | "inherit">;
dashArray: PropTypes.Requireable<string | number[]>;
dashOffset: PropTypes.Requireable<string>;
fill: PropTypes.Requireable<boolean>;
fillColor: PropTypes.Requireable<string>;
fillOpacity: PropTypes.Requireable<number>;
fillRule: PropTypes.Requireable<"nonzero" | "evenodd" | "inherit">;
renderer: PropTypes.Requireable<L.Renderer>;
className: PropTypes.Requireable<string>;
interactive: PropTypes.Requireable<boolean>;
bubblingMouseEvents: PropTypes.Requireable<boolean>;
pane: PropTypes.Requireable<string>;
attribution: PropTypes.Requireable<string>;
onCreate: PropTypes.Requireable<(...args: any[]) => any>;
onAdd: PropTypes.Requireable<(...args: any[]) => any>;
onUpdate: PropTypes.Requireable<(...args: any[]) => any>;
onBeforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
onClick: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
onMouseOut: PropTypes.Requireable<(...args: any[]) => any>;
}>>;
}>>;
layers: PropTypes.Requireable<L.Layer[]>;
points: PropTypes.Requireable<L.Marker<any>[]>;
circles: PropTypes.Requireable<L.Circle<any>[]>;
polylines: PropTypes.Requireable<L.Polyline<import("geojson").LineString | import("geojson").MultiLineString, any>[]>;
polygons: PropTypes.Requireable<L.Polygon<any>[]>;
rectangles: PropTypes.Requireable<L.Rectangle<any>[]>;
onDrawLayer: PropTypes.Requireable<(...args: any[]) => any>;
onDrawPoint: PropTypes.Requireable<(...args: any[]) => any>;
onDrawCircle: PropTypes.Requireable<(...args: any[]) => any>;
onDrawPolyline: PropTypes.Requireable<(...args: any[]) => any>;
onDrawPolygon: PropTypes.Requireable<(...args: any[]) => any>;
onDrawRectangle: PropTypes.Requireable<(...args: any[]) => any>;
onLayerChange: PropTypes.Requireable<(...args: any[]) => any>;
onPointChange: PropTypes.Requireable<(...args: any[]) => any>;
onCircleChange: PropTypes.Requireable<(...args: any[]) => any>;
onPolylineChange: PropTypes.Requireable<(...args: any[]) => any>;
onPolygonChange: PropTypes.Requireable<(...args: any[]) => any>;
onRectangleChange: PropTypes.Requireable<(...args: any[]) => any>;
onRemoveLayer: PropTypes.Requireable<(...args: any[]) => any>;
onRemovePoint: PropTypes.Requireable<(...args: any[]) => any>;
onRemoveCircle: PropTypes.Requireable<(...args: any[]) => any>;
onRemovePolyline: PropTypes.Requireable<(...args: any[]) => any>;
onRemovePolygon: PropTypes.Requireable<(...args: any[]) => any>;
onRemoveRectangle: PropTypes.Requireable<(...args: any[]) => any>;
};
static defaultProps: {
lang: Lang;
mode: Mode;
shape: Shape;
};
static contextType: React.Context<Readonly<{
map: L.Map;
theme: import("rc-leaflet/es/components/Theme").ContextType;
}>>;
context: MapContextType;
private layers;
constructor(props: Props, context: MapContextType);
componentDidMount(): void;
componentDidUpdate(prevProps: Props): void;
componentWillUnmount(): void;
private readonly drawOptions;
private getLayers;
private readonly isControlled;
private isLayerRelevant;
private isLayerRemoveable;
private onDrawLayer;
private onLayerUpdate;
private onCircleChange;
private onPolylineChange;
private onPolygonChange;
private onRectangleChange;
private onRemoveLayer;
private disablePrevMode;
private enableMode;
private addPoint;
private addCircle;
private addPolyline;
private addPolygon;
private addRectangle;
private removeLayer;
private renderLayers;
render(): React.ReactNode;
}