DefinitelyTyped/types/leaflet-draw/index.d.ts

// Type definitions for leaflet-draw 1.0
// Project: https://github.com/Leaflet/Leaflet.draw
// Definitions by: Matt Guest <https://github.com/matt-guest>
//                 Ryan Blace <https://github.com/reblace>
//                 Yun Shi <https://github.com/YunS-Stacy>
//                 Kevin Richter <https://github.com/beschoenen>
//                 Jeroen Claassens <https://github.com/favna>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

import * as L from 'leaflet';

declare module 'leaflet' {
    interface MapOptions {
        drawControl?: boolean;
        drawControlTooltips?: boolean;
        touchExtend?: boolean;
    }

    class DrawMap extends Map {
        mergeOptions(options?: MapOptions): void;
        addInitHook(): void;
    }

    interface ToolbarAction {
        title: string;
        text: string;
        callback: () => void;
        context: object;
    }

    interface ToolbarModeHandler {
        enabled: boolean;
        handler: Handler;
        title: string;
    }

    interface ToolbarOptions {
        polyline?: DrawOptions.PolylineOptions;
        polygon?: DrawOptions.PolygonOptions;
        rectangle?: DrawOptions.RectangleOptions;
        circle?: DrawOptions.CircleOptions;
        marker?: DrawOptions.MarkerOptions;
        circlemarker?: DrawOptions.CircleOptions;
    }

    interface PrecisionOptions {
        km?: number;
        ha?: number;
        m?: number;
        mi?: number;
        ac?: number;
        yd?: number;
        ft?: number;
        nm?: number;
    }

    class Toolbar extends Class {
        constructor(options?: ToolbarOptions);

        addToolbar(map: DrawMap): HTMLElement | void;

        removeToolbar(): void;
    }

    class DrawToolbar extends Toolbar {
        getModeHandlers(map: DrawMap): ToolbarModeHandler[];

        getActions(handler: Draw.Feature): ToolbarAction[];

        setOptions(options: Control.DrawConstructorOptions): void;
    }

    class EditToolbar extends Toolbar {
        getModeHandlers(map: DrawMap): ToolbarModeHandler[];

        getActions(handler: Draw.Feature): ToolbarAction[];

        setOptions(options: Control.DrawConstructorOptions): void;
    }

    namespace Control {
        interface DrawConstructorOptions {
            /**
             * The initial position of the control (one of the map corners).
             *
             * @default 'topleft'
             */
            position?: ControlPosition;

            /**
             * The options used to configure the draw toolbar.
             *
             * @default {}
             */
            draw?: DrawOptions;

            /**
             * The options used to configure the edit toolbar.
             *
             * @default false
             */
            edit?: EditOptions;
        }

        interface DrawOptions {
            /**
             * Polyline draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            polyline?: DrawOptions.PolylineOptions | false;

            /**
             * Polygon draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            polygon?: DrawOptions.PolygonOptions | false;

            /**
             * Rectangle draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            rectangle?: DrawOptions.RectangleOptions | false;

            /**
             * Circle draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            circle?: DrawOptions.CircleOptions | false;

            /**
             * Circle marker draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            circlemarker?: DrawOptions.CircleMarkerOptions | false;

            /**
             * Marker draw handler options. Set to false to disable handler.
             *
             * @default {}
             */
            marker?: DrawOptions.MarkerOptions | false;
        }

        interface EditOptions {
            /**
             * This is the FeatureGroup that stores all editable shapes.
             * THIS IS REQUIRED FOR THE EDIT TOOLBAR TO WORK
             *
             * @default null
             */
            featureGroup: FeatureGroup;

            /**
             * Edit handler options. Set to false to disable handler.
             *
             * @default null
             */
            edit?: DrawOptions.EditHandlerOptions | false;

            /**
             * Delete handler options. Set to false to disable handler.
             *
             * Default value: null
             */
            remove?: null | false;
        }

        class Draw extends Control {
            constructor(options?: DrawConstructorOptions);

            initialize(options?: DrawOptions): void;
            setDrawingOptions(options?: DrawOptions): void;
        }
    }

    namespace DrawOptions {
        interface SimpleShapeOptions {
            /**
             * Determines if the draw tool remains enabled after drawing a shape.
             *
             * @default false
             */
            repeatMode?: boolean;
        }

        interface PolylineOptions extends SimpleShapeOptions {
            /**
             * Determines if line segments can cross.
             *
             * @default true
             */
            allowIntersection?: boolean;

            /**
             * Configuration options for the error that displays if an intersection is detected.
             *
             * @default { color: '#b00b00', timeout: 2500 }
             */
            drawError?: DrawErrorOptions;

            /**
             * Distance in pixels between each guide dash.
             *
             * @default 20
             */
            guidelineDistance?: number;

            /**
             * The options used when drawing the polyline/polygon on the map.
             *
             * @default { stroke: true, color: '#3388ff', weight: 4, opacity: 0.5, fill: false, clickable: true }
             */
            shapeOptions?: L.PolylineOptions & {
                clickable?: boolean;
            };

            /**
             * Whether to display distance in the tooltip
             *
             * @default true
             */
            showLength?: boolean;

            /**
             * Determines which measurement system (metric or imperial) is used.
             *
             * @default true
             */
            metric?: boolean;

            /**
             * When not metric, to use feet instead of yards for display.
             *
             * @default true
             */
            feet?: boolean;

            /**
             * When not metric, not feet use nautic mile for display
             *
             * @default false
             */
            nautic?: boolean;

            /**
             * This should be a high number to ensure that you can draw over all other layers on the map.
             *
             * @default 2000
             */
            zIndexOffset?: number;

            icon?: Icon | DivIcon;

            touchIcon?: Icon | DivIcon;

            /**
             * The maximum length of the guide line
             *
             * @default 4000
             */
            maxGuideLineLength?: number;

            /**
             * To change distance calculation
             *
             * @default 1
             */
            factor?: number;

            /**
             * Once this number of points are placed, finish shape
             *
             * @default 0
             */
            maxPoints?: number;
        }

        interface PolygonOptions extends PolylineOptions {
            /**
             * Show the area of the drawn polygon in m², ha or km².
             * The area is only approximate and become less accurate the larger the polygon is.
             *
             * @default false
             */
            showArea?: boolean;

            /**
             * Show the length of the drawn line.
             * The area is only approximate and become less accurate the larger the polygon is.
             *
             * @default false
             */
            showLength?: boolean;

            /**
             * Defines the precision for each type of unit (e.g. {km: 2, ft: 0}
             *
             * @default {}
             */
            precision?: PrecisionOptions;
        }

        interface RectangleOptions extends SimpleShapeOptions {
            /**
             * The options used when drawing the rectangle on the map.
             *
             * @default {stroke: true, weight: 4, opacity: 0.5, fill: true, fillColor: null, fillOpacity: 0.2, showArea: true, clickable: true }
             */
            shapeOptions?: PathOptions;

            /**
             * Whether to use the metric measurement system or imperial
             *
             * @default true
             */
            metric?: boolean;
        }

        interface CircleOptions extends SimpleShapeOptions {
            /**
             * The options used when drawing the circle on the map.
             *
             * @default { stroke: true, color: '#3388ff', weight: 4, opacity: 0.5, fill: true, fillColor: null, fillOpacity: 0.2, clickable: true }
             */
            shapeOptions?: PathOptions;

            /**
             * Whether to show the radius in the tooltip
             *
             * @default true
             */
            showRadius?: boolean;

            /**
             * Whether to use the metric measurement system or imperial
             *
             * @default true
             */
            metric?: boolean;

            /**
             * When not metric, use feet instead of yards for display
             *
             * @default true
             */
            feet?: boolean;

            /**
             * When not metric, not feet use nautic mile for display
             *
             * @default false
             */
            nautic?: boolean;
        }

        interface CircleMarkerOptions {
            /**
             * Whether to draw stroke around the circle marker.
             *
             * @default true
             */
            stroke?: boolean;

            /**
             * The stroke color of the circle marker.
             *
             * @default '#3388ff'
             */
            color?: string;

            /**
             * The stroke width in pixels of the circle marker.
             *
             * @default 4
             */
            weight?: number;

            /**
             * The stroke opacity of the circle marker.
             *
             * @default 0.5
             */
            opacity?: number;

            /**
             * Whether to fill the circle marker with color.
             *
             * @default true
             */
            fill?: boolean;

            /**
             * The fill color of the circle marker. Defaults to the value of the color option.
             *
             * @default null
             */
            fillColor?: string;

            /**
             * The opacity of the circle marker.
             *
             * @default 0.2
             */
            fillOpacity?: number;

            /**
             * Whether you can click the circle marker.
             *
             * @default true
             */
            clickable?: boolean;

            /**
             * This should be a high number to ensure that you can draw over all other layers on the map.
             *
             * @default 2000
             */
            zIndexOffset?: number;
        }

        interface MarkerOptions {
            /**
             * The icon displayed when drawing a marker.
             *
             * @default L.Icon.Default()
             */
            icon?: Icon | DivIcon;

            /**
             * This should be a high number to ensure that you can draw over all other layers on the map.
             *
             * @default 2000
             */
            zIndexOffset?: number;

            /**
             * Determines if the draw tool remains enabled after drawing a shape.
             *
             * @default false
             */
            repeatMode?: boolean;
        }

        interface EditPolyOptions {
            /**
             * This is the FeatureGroup that stores all editable shapes
             * THIS IS REQUIRED FOR THE EDIT TOOLBAR TO WORK
             */
            featureGroup: FeatureGroup;

            /**
             * Edit handler options. Set to false to disable handler.
             */
            edit: EditHandlerOptions;

            /**
             * Delete handler options. Set to false to disable handler.
             */
            remove: any;

            /**
             * Set polygon editing options
             */
            poly: EditPolyOptions;

            /**
             * Determines if line segments can cross
             *
             * @default true
             */
            allowIntersection: boolean;
        }

        interface EditHandlerOptions {
            /**
             * The path options for how the layers will look while in edit mode.
             * If this is set to null the editable path options will not be set.
             *
             * @default { dashArray: '10, 10', fill: true, fillColor: '#fe57a1', fillOpacity: 0.1, maintainColor: false }
             */
            selectedPathOptions?: PathOptions;
        }

        interface DrawErrorOptions {
            color?: string;
            timeout?: number;
            message?: string;
        }
    }

    namespace Draw {
        namespace Event {
            const CREATED: 'draw:created';
            const DELETED: 'draw:deleted';
            const DELETESTART: 'draw:deletestart';
            const DELETESTOP: 'draw:deletestop';
            const DRAWSTART: 'draw:drawstart';
            const DRAWSTOP: 'draw:drawstop';
            const DRAWVERTEX: 'draw:drawvertex';
            const EDITED: 'draw:edited';
            const EDITMOVE: 'draw:editmove';
            const EDITRESIZE: 'draw:editresize';
            const EDITSTART: 'draw:editstart';
            const EDITSTOP: 'draw:editstop';
            const EDITVERTEX: 'draw:editvertex';
            const MARKERCONTEXT: 'draw:markercontext';
            const TOOLBARCLOSED: 'draw:toolbarclosed';
            const TOOLBAROPENED: 'draw:toolbaropened';
        }

        /**
         * EventHandlers to be used in looping over all events
         *
         * @example
         * for (const key in eventHandlers) { map.off(eventHandlers[key], LeafletFn); }
         */
        interface EventHandlers {
          onCreated: typeof Event.CREATED;
          onDeleted: typeof Event.DELETED;
          onDeleteStart: typeof Event.DELETESTART;
          onDeleteStop: typeof Event.DELETESTOP;
          onDrawStart: typeof Event.DRAWSTART;
          onDrawStop: typeof Event.DRAWSTOP;
          onDrawVertex: typeof Event.DRAWVERTEX;
          onEdited: typeof Event.EDITED;
          onEditMove: typeof Event.EDITMOVE;
          onEditResize: typeof Event.EDITRESIZE;
          onEditStart: typeof Event.EDITSTART;
          onEditStop: typeof Event.EDITSTOP;
          onEditVertex: typeof Event.EDITVERTEX;
          onMarkerContext: typeof Event.MARKERCONTEXT;
          onToolbarClosed: typeof Event.TOOLBARCLOSED;
          onToolbarOpened: typeof Event.TOOLBAROPENED;

          // Requires an index signature of type string to be properly useful
          [key: string]: string;
        }

        class Feature extends Handler {
            initialize(
                map: DrawMap,
                options:
                    | DrawOptions.PolylineOptions | DrawOptions.PolygonOptions
                    | DrawOptions.RectangleOptions | DrawOptions.MarkerOptions
                    | DrawOptions.EditHandlerOptions
            ): void;

            setOptions(
                options:
                    | DrawOptions.PolylineOptions | DrawOptions.PolygonOptions
                    | DrawOptions.RectangleOptions | DrawOptions.MarkerOptions
                    | DrawOptions.EditHandlerOptions
            ): void;
        }

        class SimpleShape extends Feature {
            constructor(
                map: DrawMap,
                options?: DrawOptions.SimpleShapeOptions
            )
        }

        class Marker extends Feature {
            constructor(
                map: DrawMap,
                options?: DrawOptions.MarkerOptions
            )
        }

        class CircleMarker extends Marker {
            constructor(
                map: DrawMap,
                options?: DrawOptions.MarkerOptions
            )
        }

        class Circle extends SimpleShape {
            constructor(
                map: DrawMap,
                options?: DrawOptions.CircleOptions
            )
        }

        class Polyline extends Feature {
            constructor(
                map: DrawMap,
                options?: DrawOptions.PolylineOptions
            )

            deleteLastVertex(): void;

            addVertex(latlng: LatLng): void;

            completeShape(): void;
        }

        class Rectangle extends SimpleShape {
            constructor(
                map: DrawMap,
                options?: DrawOptions.RectangleOptions
            )
        }

        class Polygon extends Polyline {
            constructor(
                map: DrawMap,
                options?: DrawOptions.PolygonOptions
            )
        }

        class Tooltip extends Class {
            constructor(map: DrawMap);

            dispose(): void;

            updateContent(labelText?: { text: string, subtext?: string }): Tooltip;

            updatePosition(latlng: LatLng): Tooltip;

            showAsError(): Tooltip;

            removeError(): Tooltip;
        }
    }

    namespace DrawEvents {
        interface Created extends LeafletEvent {
            /**
             * Layer that was just created.
             */
            layer: Circle | CircleMarker | Marker | Polygon | Polyline | Rectangle;

            /**
             * The type of layer this is. One of: polyline, polygon, rectangle, circle, marker.
             */
            layerType: string;
        }

        interface Edited extends LeafletEvent {
            /**
             * List of all layers just edited on the map.
             */
            layers: LayerGroup;
        }

        /**
         * Triggered when layers have been removed (and saved) from the FeatureGroup.
         */
        interface Deleted extends LeafletEvent {
            /**
             * List of all layers just removed from the map.
             */
            layers: LayerGroup;
        }

        interface DrawStart extends LeafletEvent {
            /**
             * The type of layer this is. One of: polyline, polygon, rectangle, circle, marker
             */
            layerType: string;
        }

        interface DrawStop extends LeafletEvent {
            /**
             * The type of layer this is. One of: polyline, polygon, rectangle, circle, marker
             */
            layerType: string;
        }

        interface DrawVertex extends LeafletEvent {
            /**
             * List of all layers just being added from the map.
             */
            layers: LayerGroup;
        }

        interface EditStart extends LeafletEvent {
            /**
             * The type of edit this is. One of: edit
             */
            handler: string;
        }

        interface EditMove extends LeafletEvent {
            /**
             * Layer that was just moved.
             */
            layer: Layer;
        }

        interface EditResize extends LeafletEvent {
            /**
             * Layer that was just resized.
             */
            layer: Layer;
        }

        interface EditVertex extends LeafletEvent {
            /**
             * List of all layers just being edited from the map.
             */
            layers: LayerGroup;

            poly: Polyline | Polygon;
        }

        interface EditStop extends LeafletEvent {
            /**
             * The type of edit this is. One of: edit
             */
            handler: string;
        }

        interface DeleteStart extends LeafletEvent {
            /**
             * The type of edit this is. One of: remove
             */
            handler: string;
        }

        interface DeleteStop extends LeafletEvent {
            /**
             * The type of edit this is. One of: remove
             */
            handler: string;
        }

        type ToolbarOpened = LeafletEvent;
        type ToolbarClosed = LeafletEvent;
        type MarkerContext = LeafletEvent;
    }

    namespace GeometryUtil {
        /**
         * Returns the area of a polygon drawn with leaflet.draw
         */
        function geodesicArea(coordinates: LatLngLiteral[]): number;

        /**
         * Returns n in specified number format (if defined) and precision
         */
        function formattedNumber(n: string, precision: number): string;

        /**
         * Returns a readable area string in yards or metric
         */
        function readableArea(area: number, isMetric?: boolean, precision?: PrecisionOptions): string;

        /**
         * Converts a metric distance to one of [ feet, nauticalMile, metric or yards ] string
         * The value will be rounded as defined by the precision option object.
         */
        function readableDistance(
            distance: number, isMetric?: boolean, isFeet?: boolean,
            isNauticalMile?: boolean, precision?: PrecisionOptions
        ): string;

        /**
         * Returns true if the Leaflet version is 0.7.x, false otherwise.
         */
        function isVersion07x(): boolean;
    }

    namespace LatLngUtil {
        /**
         * Clone the latLng point or points or nested points and return an array with those points
         */
        function cloneLatLngs(latlngs: LatLng[]): LatLng[][];

        /**
         * Clone the latLng and return a new LatLng object.
         */
        function cloneLatLng(latlng: LatLng): LatLng;
    }

    namespace LineUtil {
        /**
         * Checks to see if two line segments intersect.
         * Does not handle degenerate cases.
         */
        function segmentsIntersect(): boolean;
    }

    namespace Polygon {
        /**
         * Checks a polygon for any intersecting line segments.
         * Ignores holes.
         */
        function intersects(): boolean;
    }

    namespace EditToolbar {
        class Edit extends Toolbar {
            constructor(map: DrawMap, options?: ToolbarOptions);

            revertLayers(): void;

            save(): void;
        }

        class Delete extends Toolbar {
            constructor(map: DrawMap, options?: ToolbarOptions);

            revertLayers(): void;

            save(): void;

            removeAllLayers(): void;
        }
    }

    namespace EditOptions {
        interface EditPolyVerticesEditOptions {
            icon?: Icon | DivIcon;
            touchIcon?: Icon | DivIcon;
            drawError?: DrawOptions.DrawErrorOptions;
        }

        interface EditSimpleShapeOptions {
            moveIcon?: Icon | DivIcon;
            resizeIcon?: Icon | DivIcon;
            touchMoveIcon?: Icon | DivIcon;
            touchResizeIcon?: Icon | DivIcon;
        }
    }

    namespace Edit {
        class Circle extends CircleMarker {
            constructor(shape: Circle, options?: EditOptions.EditSimpleShapeOptions);
        }

        class CircleMarker extends SimpleShape {
            constructor(shape: CircleMarker, options?: EditOptions.EditSimpleShapeOptions);
        }

        class Marker extends Handler {
            constructor(marker: Marker, options?: object);
        }

        class Polyline extends Handler {
            constructor(polyline: Draw.Polyline);

            updateMarkers(): void;
        }

        class PolyVerticesEdit extends Handler {
            constructor(poly: Polyline, latlngs: LatLngExpression[], options?: EditOptions.EditPolyVerticesEditOptions);

            updateMarkers(): void;
        }

        class Rectangle extends SimpleShape {
            constructor(shape: Rectangle, options?: EditOptions.EditSimpleShapeOptions);
        }

        class SimpleShape extends Handler {
            constructor(shape: SimpleShape, options?: EditOptions.EditSimpleShapeOptions);

            updateMarkers(): void;
        }
    }

    namespace Localization {
        interface DrawLocal {
            draw: Draw;
            edit: Edit;
        }

        interface Draw {
            toolbar: DrawToolbar;
            handlers: DrawHandlers;
        }

        interface Edit {
            toolbar: EditToolbar;
            handlers: EditHandlers;
        }

        interface Action {
            title: string;
            text: string;
        }

        interface DrawToolbar {
            actions: Action;
            finish: Action;
            undo: Action;
            buttons: {
                polyline: string;
                polygon: string;
                rectangle: string;
                circle: string;
                marker: string;
                circlemarker: string;
            };
        }

        interface Tooltip {
            start?: string;
            cont?: string;
            end?: string;
        }

        interface DrawHandlers {
            circle: {
                tooltip: {
                    start: string;
                };
                radius: string;
            };
            circlemarker: {
                tooltip: {
                    start: string;
                };
            };
            marker: {
                tooltip: {
                    start: string;
                };
            };
            polygon: {
                tooltip: {
                    start: string;
                    cont: string;
                    end: string;
                };
            };
            polyline: {
                error: string;
                tooltip: {
                    start: string;
                    cont: string;
                    end: string;
                };
            };
            rectangle: {
                tooltip: {
                    start: string;
                };
            };
            simpleshape: {
                tooltip: {
                    end: string;
                };
            };
        }

        interface EditToolbar {
            actions: {
                save: Action;
                cancel: Action;
                clearAll: Action;
            };
            buttons: {
                edit: string;
                editDisabled: string;
                remove: string;
                removeDisabled: string;
            };
        }

        interface EditHandlers {
            edit: {
                tooltip: {
                    text: string;
                    subtext: string;
                };
            };
            remove: {
                tooltip: {
                    text: string;
                };
            };
        }
    }

    function map(element: string | HTMLElement, options?: MapOptions): DrawMap;

    const drawVersion: string;
    const drawLocal: Localization.DrawLocal;
}