terra-draw 1.0.0-beta.1 → 1.0.0-beta.11

package/README.md

@@ -1,4 +1,10 @@
-<img src="./logo.png" alt="Terra Draw Logo" width="400"/>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./assets/logo-dark-mode.png">
+  <source media="(prefers-color-scheme: light)" srcset="./assets/logo.png">
+  <img alt="Terra Draw logo" src="./assets/logo.png" width="400px">
+</picture>
+
+<p></p>
 
 ![Terra Draw CI Badge](https://github.com/JamesLMilner/terra-draw/actions/workflows/ci.yml/badge.svg)
 [![npm version](https://badge.fury.io/js/terra-draw.svg)](https://badge.fury.io/js/terra-draw)
@@ -7,7 +13,8 @@ Frictionless map drawing across mapping libraries.
 
 Terra Draw centralizes map drawing logic and provides a host of out-of-the-box drawing modes that work across different JavaScript mapping libraries. It also allows you to bring your own modes!
 
-![An example of drawing geodesic lines using Terra Draw with Leaflet](./readme.gif)
+![An example of drawing geodesic lines using Terra Draw with Leaflet](./assets/readme.gif)
+
 
 ### Library Support
 

package/dist/adapters/common/adapter-listener.d.ts

@@ -0,0 +1,22 @@
+export declare class AdapterListener<Callback extends (...args: any[]) => any> {
+    name: string;
+    callback: (...args: any[]) => any;
+    registered: boolean;
+    register: any;
+    unregister: any;
+    /**
+     * Creates a new AdapterListener instance with the provided configuration.
+     *
+     * @param {Object} config - The configuration object for the listener.
+     * @param {string} config.name - The name of the event listener.
+     * @param {Function} config.callback - The callback function to be called when the event is triggered.
+     * @param {Function} config.unregister - The function to unregister the event listeners.
+     * @param {Function} config.register - The function to register the event listeners.
+     */
+    constructor({ name, callback, unregister, register, }: {
+        name: string;
+        callback: Callback;
+        unregister: (callbacks: Callback) => void;
+        register: (callback: Callback) => void;
+    });
+}

package/dist/adapters/common/base.adapter.d.ts

@@ -0,0 +1,59 @@
+import { Project, Unproject, TerraDrawCallbacks, TerraDrawChanges, TerraDrawMouseEvent, SetCursor, TerraDrawStylingFunction, GetLngLatFromEvent, TerraDrawAdapter } from "../../common";
+import { AdapterListener } from "./adapter-listener";
+type BasePointerListener = (event: PointerEvent) => void;
+type BaseKeyboardListener = (event: KeyboardEvent) => void;
+type BaseMouseListener = (event: MouseEvent) => void;
+export type BaseAdapterConfig = {
+    coordinatePrecision?: number;
+    minPixelDragDistanceDrawing?: number;
+    minPixelDragDistance?: number;
+    minPixelDragDistanceSelecting?: number;
+};
+export declare abstract class TerraDrawBaseAdapter implements TerraDrawAdapter {
+    constructor(config: BaseAdapterConfig);
+    protected _minPixelDragDistance: number;
+    protected _minPixelDragDistanceDrawing: number;
+    protected _minPixelDragDistanceSelecting: number;
+    protected _lastDrawEvent: TerraDrawMouseEvent | undefined;
+    protected _coordinatePrecision: number;
+    protected _heldKeys: Set<string>;
+    protected _listeners: AdapterListener<BasePointerListener | BaseKeyboardListener | BaseMouseListener>[];
+    protected _dragState: "not-dragging" | "pre-dragging" | "dragging";
+    protected _currentModeCallbacks: TerraDrawCallbacks | undefined;
+    abstract getMapEventElement(): HTMLElement;
+    protected getButton(event: PointerEvent | MouseEvent): "neither" | "left" | "middle" | "right";
+    protected getMapElementXYPosition(event: PointerEvent | MouseEvent): {
+        containerX: number;
+        containerY: number;
+    };
+    protected getDrawEventFromEvent(event: PointerEvent | MouseEvent): TerraDrawMouseEvent | null;
+    /**
+     * Registers the provided callbacks for the current drawing mode and attaches
+     * the necessary event listeners.
+     * @param {TerraDrawCallbacks} callbacks - An object containing callback functions
+     * for handling various drawing events in the current mode.
+     */
+    register(callbacks: TerraDrawCallbacks): void;
+    /**
+     * Gets the coordinate precision. The coordinate precision is the number of decimal places in geometry
+     * coordinates stored in the store.
+     * @returns {number} The coordinate precision.
+     */
+    getCoordinatePrecision(): number;
+    protected getAdapterListeners(): AdapterListener<BasePointerListener>[];
+    /**
+     * Unregisters the event listeners for the current drawing mode.
+     * This is typically called when switching between drawing modes or
+     * stopping the drawing process.
+     */
+    unregister(): void;
+    abstract clear(): void;
+    abstract project(...args: Parameters<Project>): ReturnType<Project>;
+    abstract unproject(...args: Parameters<Unproject>): ReturnType<Unproject>;
+    abstract setCursor(...args: Parameters<SetCursor>): ReturnType<SetCursor>;
+    abstract getLngLatFromEvent(...event: Parameters<GetLngLatFromEvent>): ReturnType<GetLngLatFromEvent>;
+    abstract setDraggability(enabled: boolean): void;
+    abstract setDoubleClickToZoom(enabled: boolean): void;
+    abstract render(changes: TerraDrawChanges, styling: TerraDrawStylingFunction): void;
+}
+export {};

package/dist/adapters/mapbox-gl.adapter.d.ts

@@ -22,7 +22,6 @@ export declare class TerraDrawMapboxGLAdapter extends TerraDrawBaseAdapter {
     private _addLayer;
     private _addGeoJSONLayer;
     private _setGeoJSONLayerData;
-    private getEmptyGeometries;
     private changedIds;
     private updateChangedIds;
     /**

package/dist/adapters/openlayers.adapter.d.ts

@@ -1,30 +1,31 @@
 import { TerraDrawChanges, SetCursor, TerraDrawStylingFunction, TerraDrawCallbacks } from "../common";
-import CircleGeom from "ol/geom/Circle";
 import Feature from "ol/Feature";
 import GeoJSON from "ol/format/GeoJSON";
 import Map from "ol/Map";
 import Circle from "ol/style/Circle";
+import Fill from "ol/style/Fill";
 import Stroke from "ol/style/Stroke";
 import Style from "ol/style/Style";
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
-import { toLonLat } from "ol/proj";
+import { getUserProjection } from "ol/proj";
 import { BaseAdapterConfig, TerraDrawBaseAdapter } from "./common/base.adapter";
-type InjectableOL = {
-    Circle: typeof CircleGeom;
+export type InjectableOL = {
+    Fill: typeof Fill;
     Feature: typeof Feature;
     GeoJSON: typeof GeoJSON;
     Style: typeof Style;
-    CircleStyle: typeof Circle;
+    Circle: typeof Circle;
     VectorLayer: typeof VectorLayer;
     VectorSource: typeof VectorSource;
     Stroke: typeof Stroke;
-    toLonLat: typeof toLonLat;
+    getUserProjection: typeof getUserProjection;
 };
 export declare class TerraDrawOpenLayersAdapter extends TerraDrawBaseAdapter {
     constructor(config: {
         map: Map;
         lib: InjectableOL;
+        zIndex?: number;
     } & BaseAdapterConfig);
     private stylingFunction;
     private _lib;
@@ -39,12 +40,6 @@ export declare class TerraDrawOpenLayersAdapter extends TerraDrawBaseAdapter {
      * @returns an object to red green and blue (RGB) color
      */
     private hexToRGB;
-    /**
-     * Converts a hexideciaml color to RGB
-     * @param feature
-     * @param styling
-     * @returns an object to red green and blue (RGB) color
-     */
     private getStyles;
     /**
      * Clears the layers created by the adapter
@@ -53,6 +48,12 @@ export declare class TerraDrawOpenLayersAdapter extends TerraDrawBaseAdapter {
     private clearLayers;
     private addFeature;
     private removeFeature;
+    /**
+     * Sorts an array of DOM elements based on their order in the document, from earliest to latest.
+     * @param elements - An array of `HTMLElement` objects to be sorted.
+     * @returns A new array of `HTMLElement` objects sorted by their document order.
+     */
+    private sortElementsByDOMOrder;
     /**
      * Returns the longitude and latitude coordinates from a given PointerEvent on the map.
      * @param event The PointerEvent or MouseEvent  containing the screen coordinates of the pointer.
@@ -113,8 +114,8 @@ export declare class TerraDrawOpenLayersAdapter extends TerraDrawBaseAdapter {
      * @returns void
      * */
     clear(): void;
+    private registeredLayerHandlers;
     register(callbacks: TerraDrawCallbacks): void;
     getCoordinatePrecision(): number;
     unregister(): void;
 }
-export {};

package/dist/common.d.ts

@@ -15,6 +15,10 @@ export interface TerraDrawAdapterStyling {
     lineStringColor: HexColor;
     zIndex: number;
 }
+export type CartesianPoint = {
+    x: number;
+    y: number;
+};
 export interface TerraDrawMouseEvent {
     lng: number;
     lat: number;
@@ -28,15 +32,9 @@ export interface TerraDrawKeyboardEvent {
     heldKeys: string[];
     preventDefault: () => void;
 }
-export type Required<T> = {
-    [P in keyof T]-?: T[P];
-};
 export type Cursor = Parameters<SetCursor>[0];
 export type SetCursor = (cursor: "unset" | "grab" | "grabbing" | "crosshair" | "pointer" | "wait" | "move") => void;
-export type Project = (lng: number, lat: number) => {
-    x: number;
-    y: number;
-};
+export type Project = (lng: number, lat: number) => CartesianPoint;
 export type Unproject = (x: number, y: number) => {
     lat: number;
     lng: number;
@@ -71,7 +69,10 @@ export declare enum UpdateTypes {
 type ValidationContext = Pick<TerraDrawModeRegisterConfig, "project" | "unproject" | "coordinatePrecision"> & {
     updateType: UpdateTypes;
 };
-export type Validation = (feature: GeoJSONStoreFeatures, context: ValidationContext) => boolean;
+export type Validation = (feature: GeoJSONStoreFeatures, context: ValidationContext) => {
+    valid: boolean;
+    reason?: string;
+};
 export type TerraDrawModeState = "unregistered" | "registered" | "started" | "drawing" | "selecting" | "stopped";
 export interface TerraDrawCallbacks {
     getState: () => TerraDrawModeState;
@@ -112,7 +113,8 @@ export declare const SELECT_PROPERTIES: {
     readonly MID_POINT: "midPoint";
     readonly SELECTION_POINT: "selectionPoint";
 };
-export declare const POLYGON_PROPERTIES: {
+export declare const COMMON_PROPERTIES: {
     CLOSING_POINT: string;
+    SNAPPING_POINT: string;
 };
 export {};

package/dist/extend.d.ts

@@ -0,0 +1,4 @@
+import { TerraDrawBaseAdapter, BaseAdapterConfig } from "./adapters/common/base.adapter";
+import { HexColorStyling, NumericStyling, TerraDrawCallbacks } from "./common";
+import { BaseModeOptions, TerraDrawBaseDrawMode } from "./modes/base.mode";
+export { TerraDrawBaseDrawMode, TerraDrawBaseAdapter, BaseAdapterConfig, NumericStyling, HexColorStyling, BaseModeOptions, TerraDrawCallbacks, };

package/dist/geometry/calculate-relative-angle.d.ts

@@ -1,3 +1,4 @@
+import { CartesianPoint } from "../common";
 /**
  * Calculate the relative angle between two lines
  * @param A The first point of the first line
@@ -5,13 +6,4 @@
  * @param C The second point of the second line
  * @returns The relative angle between the two lines
  */
-export declare function calculateRelativeAngle(A: {
-    x: number;
-    y: number;
-}, B: {
-    x: number;
-    y: number;
-}, C: {
-    x: number;
-    y: number;
-}): number;
+export declare function calculateRelativeAngle(A: CartesianPoint, B: CartesianPoint, C: CartesianPoint): number;

package/dist/geometry/clockwise.d.ts

@@ -0,0 +1,2 @@
+import { CartesianPoint } from "../common";
+export declare function isClockwiseWebMercator(center: CartesianPoint, secondCoord: CartesianPoint, thirdCoord: CartesianPoint): boolean;

package/dist/geometry/determine-halfplane.d.ts

@@ -1,10 +1,2 @@
-export declare function determineHalfPlane(point: {
-    x: number;
-    y: number;
-}, lineStart: {
-    x: number;
-    y: number;
-}, lineEnd: {
-    x: number;
-    y: number;
-}): string;
+import { CartesianPoint } from "../common";
+export declare function determineHalfPlane(point: CartesianPoint, lineStart: CartesianPoint, lineEnd: CartesianPoint): string;

package/dist/geometry/measure/bearing.d.ts

@@ -1,9 +1,5 @@
 import { Position } from "geojson";
+import { CartesianPoint } from "../../common";
 export declare function bearing(start: Position, end: Position): number;
-export declare function webMercatorBearing({ x: x1, y: y1 }: {
-    x: number;
-    y: number;
-}, { x: x2, y: y2 }: {
-    x: number;
-    y: number;
-}): number;
+export declare function webMercatorBearing({ x: x1, y: y1 }: CartesianPoint, { x: x2, y: y2 }: CartesianPoint): number;
+export declare function normalizeBearing(bearing: number): number;

package/dist/geometry/measure/destination.d.ts

@@ -1,9 +1,4 @@
 import { Position } from "geojson";
+import { CartesianPoint } from "../../common";
 export declare function destination(origin: Position, distance: number, bearing: number): Position;
-export declare function webMercatorDestination({ x, y }: {
-    x: number;
-    y: number;
-}, distance: number, bearing: number): {
-    x: number;
-    y: number;
-};
+export declare function webMercatorDestination({ x, y }: CartesianPoint, distance: number, bearing: number): CartesianPoint;

package/dist/geometry/measure/pixel-distance-to-line.d.ts

@@ -1,10 +1,2 @@
-export declare const pixelDistanceToLine: (point: {
-    x: number;
-    y: number;
-}, linePointOne: {
-    x: number;
-    y: number;
-}, linePointTwo: {
-    x: number;
-    y: number;
-}) => number;
+import { CartesianPoint } from "../../common";
+export declare const pixelDistanceToLine: (point: CartesianPoint, linePointOne: CartesianPoint, linePointTwo: CartesianPoint) => number;

package/dist/geometry/measure/pixel-distance.d.ts

@@ -1,7 +1,2 @@
-export declare const cartesianDistance: (pointOne: {
-    x: number;
-    y: number;
-}, pointTwo: {
-    x: number;
-    y: number;
-}) => number;
+import { CartesianPoint } from "../../common";
+export declare const cartesianDistance: (pointOne: CartesianPoint, pointTwo: CartesianPoint) => number;

package/dist/geometry/point-on-line.d.ts

@@ -0,0 +1,5 @@
+import { Position } from "geojson";
+export declare function nearestPointOnLine(inputCoordinate: Position, lines: [Position, Position][]): {
+    coordinate: Position;
+    distance: number;
+} | undefined;

package/dist/geometry/project/web-mercator.d.ts

@@ -1,13 +1,11 @@
+import { CartesianPoint } from "../../common";
 /**
  * Convert longitude and latitude to web mercator x and y
  * @param lng
  * @param lat
  * @returns - web mercator x and y
  */
-export declare const lngLatToWebMercatorXY: (lng: number, lat: number) => {
-    x: number;
-    y: number;
-};
+export declare const lngLatToWebMercatorXY: (lng: number, lat: number) => CartesianPoint;
 /**
  * Convert web mercator x and y to longitude and latitude
  * @param x - web mercator x

package/dist/geometry/web-mercator-centroid.d.ts

@@ -1,11 +1,9 @@
 import { Feature, LineString, Polygon } from "geojson";
+import { CartesianPoint } from "../common";
 /**
  * Calculates the centroid of a GeoJSON Polygon or LineString in Web Mercator
 
  * @param {Feature<Polygon | LineString>} feature - The GeoJSON Feature containing either a Polygon or LineString
  * @returns {{ x: number, y: number }} The centroid of the polygon or line string in Web Mercator coordinates.
  */
-export declare function webMercatorCentroid(feature: Feature<Polygon | LineString>): {
-    x: number;
-    y: number;
-};
+export declare function webMercatorCentroid(feature: Feature<Polygon | LineString>): CartesianPoint;

package/dist/geometry/web-mercator-point-on-line.d.ts

@@ -0,0 +1,11 @@
+import { Position } from "geojson";
+/**
+ * Takes two points and finds the closest point on the line between them to a third point.
+ * @param lines
+ * @param inputCoordinate
+ * @returns
+ */
+export declare function webMercatorNearestPointOnLine(inputCoordinate: Position, lines: [Position, Position][]): {
+    coordinate: Position;
+    distance: number;
+} | undefined;

package/dist/modes/angled-rectangle/angled-rectangle.mode.d.ts

@@ -1,7 +1,6 @@
 import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
 import { TerraDrawBaseDrawMode, BaseModeOptions, CustomStyling } from "../base.mode";
-import { BehaviorConfig } from "../base.behavior";
-import { GeoJSONStoreFeatures } from "../../store/store";
+import { GeoJSONStoreFeatures, StoreValidation } from "../../store/store";
 type TerraDrawPolygonModeKeyEvents = {
     cancel?: KeyboardEvent["key"] | null;
     finish?: KeyboardEvent["key"] | null;
@@ -17,7 +16,6 @@ interface Cursors {
     close?: Cursor;
 }
 interface TerraDrawPolygonModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
-    snapping?: boolean;
     pointerDistance?: number;
     keyEvents?: TerraDrawPolygonModeKeyEvents | null;
     cursors?: Cursors;
@@ -27,14 +25,11 @@ export declare class TerraDrawAngledRectangleMode extends TerraDrawBaseDrawMode<
     private currentCoordinate;
     private currentId;
     private keyEvents;
-    private pixelDistance;
     private cursors;
     private mouseMove;
     constructor(options?: TerraDrawPolygonModeOptions<PolygonStyling>);
     private close;
     /** @internal */
-    registerBehaviors(config: BehaviorConfig): void;
-    /** @internal */
     start(): void;
     /** @internal */
     stop(): void;
@@ -57,6 +52,6 @@ export declare class TerraDrawAngledRectangleMode extends TerraDrawBaseDrawMode<
     cleanUp(): void;
     /** @internal */
     styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): StoreValidation;
 }
 export {};

package/dist/modes/base.mode.d.ts

@@ -40,7 +40,9 @@ export declare abstract class TerraDrawBaseDrawMode<T extends CustomStyling> {
     protected setStarted(): void;
     protected setStopped(): void;
     register(config: TerraDrawModeRegisterConfig): void;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): ReturnType<Validation>;
+    private performFeatureValidation;
+    protected validateModeFeature(feature: unknown, modeValidationFn: (feature: GeoJSONStoreFeatures) => ReturnType<Validation>): ReturnType<Validation>;
     abstract start(): void;
     abstract stop(): void;
     abstract cleanUp(): void;

package/dist/modes/circle/circle.mode.d.ts

@@ -1,5 +1,5 @@
 import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor, Projection } from "../../common";
-import { GeoJSONStoreFeatures } from "../../store/store";
+import { GeoJSONStoreFeatures, StoreValidation } from "../../store/store";
 import { BaseModeOptions, CustomStyling, TerraDrawBaseDrawMode } from "../base.mode";
 type TerraDrawCircleModeKeyEvents = {
     cancel: KeyboardEvent["key"] | null;
@@ -28,6 +28,7 @@ export declare class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePol
     private keyEvents;
     private cursors;
     private startingRadiusKilometers;
+    private cursorMovedAfterInitialCursorDown;
     /**
      * Create a new circle mode instance
      * @param options - Options to customize the behavior of the circle mode
@@ -60,7 +61,7 @@ export declare class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePol
     cleanUp(): void;
     /** @internal */
     styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): StoreValidation;
     private updateCircle;
 }
 export {};

package/dist/modes/coordinate-snapping.behavior.d.ts

@@ -0,0 +1,16 @@
+import { BehaviorConfig, TerraDrawModeBehavior } from "./base.behavior";
+import { TerraDrawMouseEvent } from "../common";
+import { Position } from "geojson";
+import { ClickBoundingBoxBehavior } from "./click-bounding-box.behavior";
+import { FeatureId } from "../store/store";
+import { PixelDistanceBehavior } from "./pixel-distance.behavior";
+export declare class CoordinateSnappingBehavior extends TerraDrawModeBehavior {
+    readonly config: BehaviorConfig;
+    private readonly pixelDistance;
+    private readonly clickBoundingBox;
+    constructor(config: BehaviorConfig, pixelDistance: PixelDistanceBehavior, clickBoundingBox: ClickBoundingBoxBehavior);
+    /** Returns the nearest snappable coordinate - on first click there is no currentId so no need to provide */
+    getSnappableCoordinateFirstClick: (event: TerraDrawMouseEvent) => Position | undefined;
+    getSnappableCoordinate: (event: TerraDrawMouseEvent, currentFeatureId: FeatureId) => Position | undefined;
+    private getSnappable;
+}

package/dist/modes/freehand/freehand.mode.d.ts

@@ -1,6 +1,6 @@
 import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
 import { BaseModeOptions, CustomStyling, TerraDrawBaseDrawMode } from "../base.mode";
-import { GeoJSONStoreFeatures } from "../../store/store";
+import { GeoJSONStoreFeatures, StoreValidation } from "../../store/store";
 type TerraDrawFreehandModeKeyEvents = {
     cancel: KeyboardEvent["key"] | null;
     finish: KeyboardEvent["key"] | null;
@@ -22,6 +22,8 @@ interface Cursors {
 interface TerraDrawFreehandModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
     minDistance?: number;
     preventPointsNearClose?: boolean;
+    autoClose?: boolean;
+    autoCloseTimeout?: number;
     keyEvents?: TerraDrawFreehandModeKeyEvents | null;
     cursors?: Cursors;
 }
@@ -34,6 +36,10 @@ export declare class TerraDrawFreehandMode extends TerraDrawBaseDrawMode<Freehan
     private keyEvents;
     private cursors;
     private preventPointsNearClose;
+    private autoClose;
+    private autoCloseTimeout;
+    private hasLeftStartingPoint;
+    private preventNewFeature;
     constructor(options?: TerraDrawFreehandModeOptions<FreehandPolygonStyling>);
     private close;
     /** @internal */
@@ -58,6 +64,6 @@ export declare class TerraDrawFreehandMode extends TerraDrawBaseDrawMode<Freehan
     cleanUp(): void;
     /** @internal */
     styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): StoreValidation;
 }
 export {};

package/dist/modes/{snapping.behavior.d.ts → line-snapping.behavior.d.ts}

@@ -4,7 +4,7 @@ import { Position } from "geojson";
 import { ClickBoundingBoxBehavior } from "./click-bounding-box.behavior";
 import { FeatureId } from "../store/store";
 import { PixelDistanceBehavior } from "./pixel-distance.behavior";
-export declare class SnappingBehavior extends TerraDrawModeBehavior {
+export declare class LineSnappingBehavior extends TerraDrawModeBehavior {
     readonly config: BehaviorConfig;
     private readonly pixelDistance;
     private readonly clickBoundingBox;

package/dist/modes/linestring/linestring.mode.d.ts

@@ -1,7 +1,8 @@
 import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
+import { Position } from "geojson";
 import { BaseModeOptions, CustomStyling, TerraDrawBaseDrawMode } from "../base.mode";
 import { BehaviorConfig } from "../base.behavior";
-import { GeoJSONStoreFeatures } from "../../store/store";
+import { GeoJSONStoreFeatures, StoreValidation } from "../../store/store";
 type TerraDrawLineStringModeKeyEvents = {
     cancel: KeyboardEvent["key"] | null;
     finish: KeyboardEvent["key"] | null;
@@ -13,6 +14,10 @@ type LineStringStyling = {
     closingPointWidth: NumericStyling;
     closingPointOutlineColor: HexColorStyling;
     closingPointOutlineWidth: NumericStyling;
+    snappingPointColor: HexColorStyling;
+    snappingPointWidth: NumericStyling;
+    snappingPointOutlineColor: HexColorStyling;
+    snappingPointOutlineWidth: NumericStyling;
 };
 interface Cursors {
     start?: Cursor;
@@ -22,8 +27,12 @@ interface InertCoordinates {
     strategy: "amount";
     value: number;
 }
+interface Snapping {
+    toCoordinate?: boolean;
+    toCustom?: (event: TerraDrawMouseEvent) => Position | undefined;
+}
 interface TerraDrawLineStringModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
-    snapping?: boolean;
+    snapping?: Snapping;
     pointerDistance?: number;
     keyEvents?: TerraDrawLineStringModeKeyEvents | null;
     cursors?: Cursors;
@@ -35,12 +44,13 @@ export declare class TerraDrawLineStringMode extends TerraDrawBaseDrawMode<LineS
     private currentId;
     private closingPointId;
     private keyEvents;
-    private snappingEnabled;
+    private snapping;
     private cursors;
     private mouseMove;
     private insertCoordinates;
     private lastCommitedCoordinates;
-    private snapping;
+    private snappedPointId;
+    private coordinateSnapping;
     private insertPoint;
     constructor(options?: TerraDrawLineStringModeOptions<LineStringStyling>);
     private close;
@@ -73,6 +83,7 @@ export declare class TerraDrawLineStringMode extends TerraDrawBaseDrawMode<LineS
     cleanUp(): void;
     /** @internal */
     styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): StoreValidation;
+    private snapCoordinate;
 }
 export {};

package/dist/modes/point/point.mode.d.ts

@@ -1,5 +1,5 @@
 import { TerraDrawMouseEvent, TerraDrawAdapterStyling, NumericStyling, HexColorStyling, Cursor } from "../../common";
-import { GeoJSONStoreFeatures } from "../../store/store";
+import { GeoJSONStoreFeatures, StoreValidation } from "../../store/store";
 import { BaseModeOptions, CustomStyling, TerraDrawBaseDrawMode } from "../base.mode";
 type PointModeStyling = {
     pointWidth: NumericStyling;
@@ -39,6 +39,6 @@ export declare class TerraDrawPointMode extends TerraDrawBaseDrawMode<PointModeS
     onDragEnd(): void;
     /** @internal */
     styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
-    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+    validateFeature(feature: unknown): StoreValidation;
 }
 export {};