terra-draw 1.0.0-beta.0 → 1.0.0-beta.3

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,14 +13,15 @@ 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
 
 Terra Draw uses the concept of 'adapters' to allow it to work with a host of different mapping libraries. Currently supported are:
 
 - [Leaflet](https://leafletjs.com/) v1
-- [OpenLayers](https://openlayers.org/) v7
+- [OpenLayers](https://openlayers.org/) v10
 - [Mapbox GL JS](https://www.mapbox.com/mapbox-gljs) v2
 - [MapLibre](https://maplibre.org/maplibre-gl-js/docs/) v2/v3
 - [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/overview) v3

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,25 +1,25 @@
 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: {
@@ -39,12 +39,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
@@ -117,4 +111,3 @@ export declare class TerraDrawOpenLayersAdapter extends TerraDrawBaseAdapter {
     getCoordinatePrecision(): number;
     unregister(): void;
 }
-export {};

package/dist/common.d.ts

@@ -28,9 +28,6 @@ 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) => {

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

@@ -0,0 +1,17 @@
+/**
+ * Calculate the relative angle between two lines
+ * @param A The first point of the first line
+ * @param B The second point of the first line and the first point of the second line
+ * @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;

package/dist/geometry/clockwise.d.ts

@@ -0,0 +1,10 @@
+export declare function isClockwiseWebMercator(center: {
+    x: number;
+    y: number;
+}, secondCoord: {
+    x: number;
+    y: number;
+}, thirdCoord: {
+    x: number;
+    y: number;
+}): boolean;

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

@@ -0,0 +1,10 @@
+export declare function determineHalfPlane(point: {
+    x: number;
+    y: number;
+}, lineStart: {
+    x: number;
+    y: number;
+}, lineEnd: {
+    x: number;
+    y: number;
+}): string;

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

@@ -7,3 +7,4 @@ export declare function webMercatorBearing({ x: x1, y: y1 }: {
     x: number;
     y: number;
 }): number;
+export declare function normalizeBearing(bearing: number): number;

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

@@ -1,2 +1,9 @@
 import { Position } from "geojson";
 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;
+};

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

@@ -1,4 +1,4 @@
-export declare const pixelDistance: (pointOne: {
+export declare const cartesianDistance: (pointOne: {
     x: number;
     y: number;
 }, pointTwo: {

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

@@ -0,0 +1,58 @@
+import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
+import { TerraDrawBaseDrawMode, BaseModeOptions, CustomStyling } from "../base.mode";
+import { GeoJSONStoreFeatures } from "../../store/store";
+type TerraDrawPolygonModeKeyEvents = {
+    cancel?: KeyboardEvent["key"] | null;
+    finish?: KeyboardEvent["key"] | null;
+};
+type PolygonStyling = {
+    fillColor: HexColorStyling;
+    outlineColor: HexColorStyling;
+    outlineWidth: NumericStyling;
+    fillOpacity: NumericStyling;
+};
+interface Cursors {
+    start?: Cursor;
+    close?: Cursor;
+}
+interface TerraDrawPolygonModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
+    snapping?: boolean;
+    pointerDistance?: number;
+    keyEvents?: TerraDrawPolygonModeKeyEvents | null;
+    cursors?: Cursors;
+}
+export declare class TerraDrawAngledRectangleMode extends TerraDrawBaseDrawMode<PolygonStyling> {
+    mode: string;
+    private currentCoordinate;
+    private currentId;
+    private keyEvents;
+    private cursors;
+    private mouseMove;
+    constructor(options?: TerraDrawPolygonModeOptions<PolygonStyling>);
+    private close;
+    /** @internal */
+    start(): void;
+    /** @internal */
+    stop(): void;
+    /** @internal */
+    onMouseMove(event: TerraDrawMouseEvent): void;
+    private updatePolygonGeometry;
+    /** @internal */
+    onClick(event: TerraDrawMouseEvent): void;
+    /** @internal */
+    onKeyUp(event: TerraDrawKeyboardEvent): void;
+    /** @internal */
+    onKeyDown(): void;
+    /** @internal */
+    onDragStart(): void;
+    /** @internal */
+    onDrag(): void;
+    /** @internal */
+    onDragEnd(): void;
+    /** @internal */
+    cleanUp(): void;
+    /** @internal */
+    styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
+    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+}
+export {};

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

@@ -0,0 +1,60 @@
+import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
+import { TerraDrawBaseDrawMode, BaseModeOptions, CustomStyling } from "../base.mode";
+import { GeoJSONStoreFeatures } from "../../store/store";
+type TerraDrawSectorModeKeyEvents = {
+    cancel?: KeyboardEvent["key"] | null;
+    finish?: KeyboardEvent["key"] | null;
+};
+type SectorPolygonStyling = {
+    fillColor: HexColorStyling;
+    outlineColor: HexColorStyling;
+    outlineWidth: NumericStyling;
+    fillOpacity: NumericStyling;
+};
+interface Cursors {
+    start?: Cursor;
+    close?: Cursor;
+}
+interface TerraDrawSectorModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
+    arcPoints?: number;
+    pointerDistance?: number;
+    keyEvents?: TerraDrawSectorModeKeyEvents | null;
+    cursors?: Cursors;
+}
+export declare class TerraDrawSectorMode extends TerraDrawBaseDrawMode<SectorPolygonStyling> {
+    mode: string;
+    private currentCoordinate;
+    private currentId;
+    private keyEvents;
+    private direction;
+    private arcPoints;
+    private cursors;
+    private mouseMove;
+    constructor(options?: TerraDrawSectorModeOptions<SectorPolygonStyling>);
+    private close;
+    /** @internal */
+    start(): void;
+    /** @internal */
+    stop(): void;
+    /** @internal */
+    onMouseMove(event: TerraDrawMouseEvent): void;
+    private updatePolygonGeometry;
+    /** @internal */
+    onClick(event: TerraDrawMouseEvent): void;
+    /** @internal */
+    onKeyUp(event: TerraDrawKeyboardEvent): void;
+    /** @internal */
+    onKeyDown(): void;
+    /** @internal */
+    onDragStart(): void;
+    /** @internal */
+    onDrag(): void;
+    /** @internal */
+    onDragEnd(): void;
+    /** @internal */
+    cleanUp(): void;
+    /** @internal */
+    styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
+    validateFeature(feature: unknown): feature is GeoJSONStoreFeatures;
+}
+export {};

package/dist/store/store.d.ts

@@ -8,14 +8,14 @@ type DefinedProperties = Record<string, JSON>;
 export type GeoJSONStoreGeometries = Polygon | LineString | Point;
 export type BBoxPolygon = Feature<Polygon, DefinedProperties>;
 export type GeoJSONStoreFeatures = Feature<GeoJSONStoreGeometries, DefinedProperties>;
-export type StoreChangeEvents = "delete" | "create" | "update" | "styling";
+type StoreChangeEvents = "delete" | "create" | "update" | "styling";
 export type StoreChangeHandler = (ids: FeatureId[], change: StoreChangeEvents) => void;
 export type FeatureId = string | number;
 export type IdStrategy<Id extends FeatureId> = {
     isValidId: (id: Id) => boolean;
     getId: () => Id;
 };
-export type GeoJSONStoreConfig<Id extends FeatureId> = {
+type GeoJSONStoreConfig<Id extends FeatureId> = {
     idStrategy?: IdStrategy<Id>;
     tracked?: boolean;
 };