UNPKG

rc-leaflet-drawing

Version:

React Map Drawing Component based on rc-leaflet

379 lines (378 loc) 19.4 kB
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; }