@deck.gl-community/editable-layers 9.0.0-alpha.1

package/README.md

@@ -0,0 +1,82 @@
+<h1 align="center">editable-layers | <a href="https://@deck.gl-community/editable-layers">Website</a></h1>
+
+<h5 align="center">An editing framework for deck.gl</h5>
+
+[![docs](https://i.imgur.com/bRDL1oh.gif)](https://@deck.gl-community/editable-layers)
+
+[@deck.gl-community/editable-layers](https://@deck.gl-community/editable-layers) provides editable and interactive map overlay layers, built using the power of [deck.gl](https://deck.gl/).
+
+## Getting started
+
+### Running the example
+
+1. `git clone git@github.com:uber/@deck.gl-community/editable-layers.git`
+2. `cd @deck.gl-community/editable-layers`
+3. `yarn`
+4. `cd examples/advanced`
+5. `yarn`
+6. `export MapboxAccessToken='<Add your key>'`
+7. `yarn start-local`
+8. You can now view and edit geometry.
+
+### Installation
+
+For npm
+
+```bash
+npm install @deck.gl-community/editable-layers
+```
+
+For yarn
+
+```bash
+yarn add @deck.gl-community/editable-layers
+```
+
+### `EditableGeoJsonLayer`
+
+[EditableGeoJsonLayer](/docs/modules/editor-layers/api-reference/editable-geojson-layer.md) is implemented as a [deck.gl](https://deck.gl) layer. It provides the ability to view and edit multiple types of geometry formatted as [GeoJSON](https://tools.ietf.org/html/rfc7946) (an open standard format for geometry) including polygons, lines, and points.
+
+```jsx
+import DeckGL from '@deck.gl/react';
+import { EditableGeoJsonLayer, DrawPolygonMode } from '@deck.gl-community/editable-layers';
+
+const myFeatureCollection = {
+  type: 'FeatureCollection',
+  features: [
+    /* insert features here */
+  ],
+};
+
+const selectedFeatureIndexes = [];
+
+class App extends React.Component {
+  state = {
+    data: myFeatureCollection,
+  };
+
+  render() {
+    const layer = new EditableGeoJsonLayer({
+      id: 'geojson-layer',
+      data: this.state.data,
+      mode: DrawPolygonMode,
+      selectedFeatureIndexes,
+
+      onEdit: ({ updatedData }) => {
+        this.setState({
+          data: updatedData,
+        });
+      },
+    });
+
+    return <DeckGL {...this.props.viewport} layers={[layer]} />;
+  }
+}
+```
+
+### Useful examples (Codesandbox)
+
+- [Hello World (using deck.gl)](https://codesandbox.io/s/hello-world-nebulagl-csvsm)
+- [With Toolbox](https://codesandbox.io/s/hello-nebulagl-with-toolbox-oelkr)
+- [No React](https://codesandbox.io/s/deckgl-and-nebulagl-editablegeojsonlayer-no-react-p9yrs)
+- [Custom EditMode](https://codesandbox.io/s/connect-the-dots-mode-yow65)

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A multiplier for screen-space width/scale for Arc, Line, Icon and Text layers.
+ * Required in order to maintain the same appearance after upgrading to deck.gl v8.5.
+ * https://github.com/visgl/deck.gl/blob/master/docs/upgrade-guide.md
+ */
+export declare const PROJECTED_PIXEL_SIZE_MULTIPLIER: number;
+/**
+ * Unit literal to shader unit number conversion.
+ */
+export declare const UNIT: {
+    common: number;
+    meters: number;
+    pixels: number;
+};

package/dist/constants.js

@@ -0,0 +1,14 @@
+/**
+ * A multiplier for screen-space width/scale for Arc, Line, Icon and Text layers.
+ * Required in order to maintain the same appearance after upgrading to deck.gl v8.5.
+ * https://github.com/visgl/deck.gl/blob/master/docs/upgrade-guide.md
+ */
+export const PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
+/**
+ * Unit literal to shader unit number conversion.
+ */
+export const UNIT = {
+    common: 0,
+    meters: 1,
+    pixels: 2,
+};

package/dist/curve-utils.d.ts

@@ -0,0 +1,2 @@
+import type { Feature, MultiLineString, LineString } from '@turf/helpers';
+export declare function generateCurveFromControlPoints(line: Feature<MultiLineString>): Feature<LineString>;

package/dist/curve-utils.js

@@ -0,0 +1,61 @@
+import hermite from 'cubic-hermite-spline';
+import turfDistance from '@turf/distance';
+import { lineString } from '@turf/helpers';
+const INTERPOLATION_INTERVAL = 0.005;
+const INTERPOLATION_THRESHOLD = 0.001;
+function calculateSingleTangent(p0, p1, d) {
+    const x = (p1[0] - p0[0]) / d;
+    const y = (p1[1] - p0[1]) / d;
+    return [x, y];
+}
+// eslint-disable-next-line max-statements
+export function generateCurveFromControlPoints(line) {
+    // calculate knots
+    const knots = [0];
+    let prev = null;
+    let totalDistance = 0;
+    const { coordinates: coords } = line.geometry;
+    for (let i = 0; i < coords.length; i++) {
+        const cur = coords[i];
+        if (prev !== null) {
+            // @ts-expect-error turf types diff
+            totalDistance += turfDistance(prev, cur);
+            knots.push(totalDistance);
+        }
+        prev = cur;
+    }
+    // calculate tangents
+    const tangents = [];
+    // first tangent
+    // @ts-ignore
+    tangents.push(calculateSingleTangent(coords[0], coords[1], knots[1] - knots[0]));
+    // second to before last
+    for (let i = 1; i < coords.length - 1; i++) {
+        // @ts-ignore
+        const A = calculateSingleTangent(coords[i], coords[i + 1], knots[i + 1] - knots[i]);
+        // @ts-ignore
+        const B = calculateSingleTangent(coords[i - 1], coords[i], knots[i] - knots[i - 1]);
+        const x = (A[0] + B[0]) / 2.0;
+        const y = (A[1] + B[1]) / 2.0;
+        tangents.push([x, y]);
+    }
+    // last tangent
+    const last = coords.length - 1;
+    tangents.push(
+    // @ts-ignore
+    calculateSingleTangent(coords[last - 1], coords[last], knots[last] - knots[last - 1]));
+    // generate curve
+    const result = [];
+    for (let i = 0; i < coords.length; i++) {
+        // add control point
+        result.push(coords[i]);
+        // add interpolated values
+        for (let t = knots[i] + INTERPOLATION_INTERVAL; t < knots[i + 1]; t += INTERPOLATION_INTERVAL) {
+            if (knots[i + 1] - t > INTERPOLATION_THRESHOLD) {
+                // Only add if not too close to a control point (knot = control point)
+                result.push(hermite(t, coords, tangents, knots));
+            }
+        }
+    }
+    return lineString(result);
+}

package/dist/edit-modes/composite-mode.d.ts

@@ -0,0 +1,14 @@
+import { FeatureCollection } from '../geojson-types';
+import { ModeProps, ClickEvent, PointerMoveEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, GuideFeatureCollection } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class CompositeMode extends GeoJsonEditMode {
+    _modes: Array<GeoJsonEditMode>;
+    constructor(modes: Array<GeoJsonEditMode>);
+    _coalesce<T>(callback: (arg0: GeoJsonEditMode) => T, resultEval?: ((arg0: T) => boolean | null | undefined) | null): T;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+}

package/dist/edit-modes/composite-mode.js

@@ -0,0 +1,47 @@
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class CompositeMode extends GeoJsonEditMode {
+    _modes;
+    constructor(modes) {
+        super();
+        this._modes = modes;
+    }
+    _coalesce(callback, resultEval = null) {
+        let result = null;
+        for (let i = 0; i < this._modes.length; i++) {
+            // eslint-disable-next-line callback-return
+            result = callback(this._modes[i]);
+            if (resultEval ? resultEval(result) : result) {
+                break;
+            }
+        }
+        return result;
+    }
+    handleClick(event, props) {
+        this._coalesce((handler) => handler.handleClick(event, props));
+    }
+    handlePointerMove(event, props) {
+        return this._coalesce((handler) => handler.handlePointerMove(event, props));
+    }
+    handleStartDragging(event, props) {
+        return this._coalesce((handler) => handler.handleStartDragging(event, props));
+    }
+    handleStopDragging(event, props) {
+        return this._coalesce((handler) => handler.handleStopDragging(event, props));
+    }
+    handleDragging(event, props) {
+        return this._coalesce((handler) => handler.handleDragging(event, props));
+    }
+    getGuides(props) {
+        // TODO: Combine the guides *BUT* make sure if none of the results have
+        // changed to return the same object so that "guides !== this.state.guides"
+        // in editable-geojson-layer works.
+        const allGuides = [];
+        for (const mode of this._modes) {
+            allGuides.push(...mode.getGuides(props).features);
+        }
+        return {
+            type: 'FeatureCollection',
+            features: allGuides,
+        };
+    }
+}

package/dist/edit-modes/draw-90degree-polygon-mode.d.ts

@@ -0,0 +1,11 @@
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, TentativeFeature } from './types';
+import { Position, FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class Draw90DegreePolygonMode extends GeoJsonEditMode {
+    createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    finalizedCoordinates(coords: Position[]): Position[][];
+    getIntermediatePoint(coordinates: Position[]): Position | null;
+}

package/dist/edit-modes/draw-90degree-polygon-mode.js

@@ -0,0 +1,179 @@
+import destination from '@turf/destination';
+import bearing from '@turf/bearing';
+import lineIntersect from '@turf/line-intersect';
+import turfDistance from '@turf/distance';
+import { point, lineString as turfLineString } from '@turf/helpers';
+import { generatePointsParallelToLinePoints, getPickedEditHandle, getEditHandlesForGeometry, } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class Draw90DegreePolygonMode extends GeoJsonEditMode {
+    createTentativeFeature(props) {
+        const clickSequence = this.getClickSequence();
+        const { mapCoords } = props.lastPointerMoveEvent;
+        let p3;
+        if (clickSequence.length === 1) {
+            p3 = mapCoords;
+        }
+        else {
+            const p1 = clickSequence[clickSequence.length - 2];
+            const p2 = clickSequence[clickSequence.length - 1];
+            [p3] = generatePointsParallelToLinePoints(p1, p2, mapCoords);
+        }
+        let tentativeFeature;
+        if (clickSequence.length < 3) {
+            // Draw a LineString connecting all the clicked points with the hovered point
+            tentativeFeature = {
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [...clickSequence, p3],
+                },
+            };
+        }
+        else {
+            // Draw a Polygon connecting all the clicked points with the hovered point
+            tentativeFeature = {
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: [[...clickSequence, p3, clickSequence[0]]],
+                },
+            };
+        }
+        return tentativeFeature;
+    }
+    getGuides(props) {
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        const clickSequence = this.getClickSequence();
+        if (clickSequence.length === 0 || !props.lastPointerMoveEvent) {
+            return guides;
+        }
+        const tentativeFeature = this.createTentativeFeature(props);
+        guides.features.push(tentativeFeature);
+        guides.features = guides.features.concat(getEditHandlesForGeometry(tentativeFeature.geometry, -1));
+        // Slice off the handles that are are next to the pointer
+        guides.features = guides.features.slice(0, -1);
+        return guides;
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+        super.handlePointerMove(event, props);
+    }
+    handleClick(event, props) {
+        const { picks } = event;
+        const tentativeFeature = this.getTentativeGuide(props);
+        this.addClickSequence(event);
+        const clickSequence = this.getClickSequence();
+        if (!tentativeFeature) {
+            // nothing else to do
+            return;
+        }
+        if (clickSequence.length === 3 && tentativeFeature.geometry.type === 'LineString') {
+            const lineString = tentativeFeature.geometry;
+            // Tweak the clicked position to be the snapped 90 degree point along the polygon
+            clickSequence[clickSequence.length - 1] =
+                lineString.coordinates[lineString.coordinates.length - 1];
+        }
+        else if (clickSequence.length > 3 && tentativeFeature.geometry.type === 'Polygon') {
+            const polygon = tentativeFeature.geometry;
+            // Tweak the clicked position to be the snapped 90 degree point along the polygon
+            clickSequence[clickSequence.length - 1] =
+                polygon.coordinates[0][polygon.coordinates[0].length - 2];
+            const clickedEditHandle = getPickedEditHandle(picks);
+            if (clickedEditHandle &&
+                Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+                (clickedEditHandle.properties.positionIndexes[1] === 0 ||
+                    clickedEditHandle.properties.positionIndexes[1] === polygon.coordinates[0].length - 3)) {
+                // They clicked the first or last point (or double-clicked), so complete the polygon
+                const polygonToAdd = {
+                    type: 'Polygon',
+                    coordinates: this.finalizedCoordinates([...polygon.coordinates[0]]),
+                };
+                this.resetClickSequence();
+                const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+                if (editAction) {
+                    props.onEdit(editAction);
+                }
+            }
+        }
+        // Trigger pointer move right away in order for it to update edit handles (to support double-click)
+        const fakePointerMoveEvent = {
+            screenCoords: [-1, -1],
+            mapCoords: event.mapCoords,
+            picks: [],
+            pointerDownPicks: null,
+            pointerDownScreenCoords: null,
+            pointerDownMapCoords: null,
+            cancelPan: () => { },
+            sourceEvent: null,
+        };
+        this.handlePointerMove(fakePointerMoveEvent, props);
+    }
+    finalizedCoordinates(coords) {
+        // Remove the hovered position
+        let coordinates = [[...coords.slice(0, -2), coords[0]]];
+        let pt = this.getIntermediatePoint([...coords]);
+        if (!pt) {
+            // if intermediate point with 90 degree not available
+            // try remove the last clicked point and get the intermediate point.
+            const tc = [...coords];
+            tc.splice(-3, 1);
+            pt = this.getIntermediatePoint([...tc]);
+            if (pt) {
+                coordinates = [[...coords.slice(0, -3), pt, coords[0]]];
+            }
+        }
+        else {
+            coordinates = [[...coords.slice(0, -2), pt, coords[0]]];
+        }
+        return coordinates;
+    }
+    getIntermediatePoint(coordinates) {
+        let pt = null;
+        if (coordinates.length > 4) {
+            const [p1, p2] = [...coordinates];
+            const angle1 = bearing(p1, p2);
+            const p3 = coordinates[coordinates.length - 3];
+            const p4 = coordinates[coordinates.length - 4];
+            const angle2 = bearing(p3, p4);
+            const angles = { first: [], second: [] };
+            // calculate 3 right angle points for first and last points in lineString
+            [1, 2, 3].forEach((factor) => {
+                const newAngle1 = angle1 + factor * 90;
+                // convert angles to 0 to -180 for anti-clock and 0 to 180 for clock wise
+                angles.first.push(newAngle1 > 180 ? newAngle1 - 360 : newAngle1);
+                const newAngle2 = angle2 + factor * 90;
+                angles.second.push(newAngle2 > 180 ? newAngle2 - 360 : newAngle2);
+            });
+            const distance = turfDistance(point(p1), point(p3));
+            // Draw imaginary right angle lines for both first and last points in lineString
+            // If there is intersection point for any 2 lines, will be the 90 degree point.
+            [0, 1, 2].forEach((indexFirst) => {
+                const line1 = turfLineString([
+                    p1,
+                    destination(p1, distance, angles.first[indexFirst]).geometry.coordinates,
+                ]);
+                [0, 1, 2].forEach((indexSecond) => {
+                    const line2 = turfLineString([
+                        p3,
+                        destination(p3, distance, angles.second[indexSecond]).geometry.coordinates,
+                    ]);
+                    const fc = lineIntersect(line1, line2);
+                    if (fc && fc.features.length) {
+                        // found the intersect point
+                        pt = fc.features[0].geometry.coordinates;
+                    }
+                });
+            });
+        }
+        return pt;
+    }
+}

package/dist/edit-modes/draw-circle-by-diameter-mode.d.ts

@@ -0,0 +1,24 @@
+import { ModeProps, Tooltip } from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export declare class DrawCircleByDiameterMode extends TwoClickPolygonMode {
+    radius: number | null | undefined;
+    position: Position;
+    areaCircle: number | null | undefined;
+    diameter: number | null | undefined;
+    getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon>;
+    /**
+     * define the default function to display the tooltip for
+     * nebula geometry mode type
+     * @param props properties of geometry nebula mode
+     */
+    getTooltips(props: ModeProps<FeatureCollection>): Tooltip[];
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param radius
+     * @param areaCircle
+     * @param diameter
+     */
+    _getTooltips: (args: any) => any;
+}

package/dist/edit-modes/draw-circle-by-diameter-mode.js

@@ -0,0 +1,78 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import area from '@turf/area';
+import memoize from '../memoize';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawCircleByDiameterMode extends TwoClickPolygonMode {
+    radius = null;
+    position = null;
+    areaCircle = null;
+    diameter = null;
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        // Default turf value for circle is 64
+        const { steps = 64 } = modeConfig || {};
+        const options = { steps };
+        if (steps < 4) {
+            console.warn('Minimum steps to draw a circle is 4 '); // eslint-disable-line no-console,no-undef
+            options.steps = 4;
+        }
+        const centerCoordinates = getIntermediatePosition(coord1, coord2);
+        // setting value of radius as distance of center and other point
+        this.radius = Math.max(distance(coord1, centerCoordinates), 0.001);
+        // setting value of diameter as distance of points
+        this.diameter = Math.max(distance(coord1, coord2), 0.001);
+        // setting position tooltip as center of circle
+        this.position = centerCoordinates;
+        const geometry = circle(centerCoordinates, this.radius, options);
+        geometry.properties = geometry.properties || {};
+        geometry.properties.shape = 'Circle';
+        // calculate area of circle with turf function
+        this.areaCircle = area(geometry);
+        // @ts-expect-error turf types diff
+        return geometry;
+    }
+    /**
+     * define the default function to display the tooltip for
+     * nebula geometry mode type
+     * @param props properties of geometry nebula mode
+     */
+    getTooltips(props) {
+        return this._getTooltips({
+            modeConfig: props.modeConfig,
+            radius: this.radius,
+            areaCircle: this.areaCircle,
+            diameter: this.diameter,
+        });
+    }
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param radius
+     * @param areaCircle
+     * @param diameter
+     */
+    _getTooltips = memoize(({ modeConfig, radius, areaCircle, diameter }) => {
+        let tooltips = [];
+        const { formatTooltip } = modeConfig || {};
+        let text;
+        if (radius && areaCircle) {
+            if (formatTooltip) {
+                text = formatTooltip(radius);
+            }
+            else {
+                // By default, round to 2 decimal places and append units
+                text = `Radius: ${parseFloat(radius).toFixed(2)} kilometers
+      \n Area: ${parseFloat(areaCircle).toFixed(2)}
+      \n Diameter: ${parseFloat(diameter).toFixed(2)} kilometers`;
+            }
+            tooltips = [
+                {
+                    position: this.position,
+                    text,
+                },
+            ];
+        }
+        return tooltips;
+    });
+}

package/dist/edit-modes/draw-circle-from-center-mode.d.ts

@@ -0,0 +1,22 @@
+import { ModeProps, Tooltip } from './types';
+import { Position, Polygon, FeatureOf, FeatureCollection } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export declare class DrawCircleFromCenterMode extends TwoClickPolygonMode {
+    radius: number | null | undefined;
+    position: Position;
+    areaCircle: number | null | undefined;
+    getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon>;
+    /**
+     * define the default function to display the tooltip for
+     * nebula geometry mode type
+     * @param props properties of geometry nebula mode
+     */
+    getTooltips(props: ModeProps<FeatureCollection>): Tooltip[];
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param radius
+     * @param areaCircle
+     */
+    _getTooltips: (args: any) => any;
+}

package/dist/edit-modes/draw-circle-from-center-mode.js

@@ -0,0 +1,70 @@
+import circle from '@turf/circle';
+import distance from '@turf/distance';
+import area from '@turf/area';
+import memoize from '../memoize';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawCircleFromCenterMode extends TwoClickPolygonMode {
+    radius = null;
+    position = null;
+    areaCircle = null;
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        // Default turf value for circle is 64
+        const { steps = 64 } = modeConfig || {};
+        const options = { steps };
+        // setting with position of center of circle
+        this.position = coord2;
+        if (steps < 4) {
+            console.warn('Minimum steps to draw a circle is 4 '); // eslint-disable-line no-console,no-undef
+            options.steps = 4;
+        }
+        // setting value of radius as distance of center and other point
+        this.radius = Math.max(distance(coord1, coord2), 0.001);
+        const geometry = circle(coord1, this.radius, options);
+        geometry.properties = geometry.properties || {};
+        geometry.properties.shape = 'Circle';
+        // calculate area of circle with turf function
+        this.areaCircle = area(geometry);
+        // @ts-expect-error turf types diff
+        return geometry;
+    }
+    /**
+     * define the default function to display the tooltip for
+     * nebula geometry mode type
+     * @param props properties of geometry nebula mode
+     */
+    getTooltips(props) {
+        return this._getTooltips({
+            modeConfig: props?.modeConfig,
+            radius: this.radius,
+            areaCircle: this.areaCircle,
+        });
+    }
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param radius
+     * @param areaCircle
+     */
+    _getTooltips = memoize(({ modeConfig, radius, areaCircle }) => {
+        let tooltips = [];
+        const { formatTooltip } = modeConfig || {};
+        let text;
+        if (radius && areaCircle) {
+            if (formatTooltip) {
+                text = formatTooltip(radius);
+            }
+            else {
+                // By default, round to 2 decimal places and append units
+                text = `Radius: ${parseFloat(radius).toFixed(2)} kilometers
+      \n Area: ${parseFloat(areaCircle).toFixed(2)}`;
+            }
+            tooltips = [
+                {
+                    position: this.position,
+                    text,
+                },
+            ];
+        }
+        return tooltips;
+    });
+}

package/dist/edit-modes/draw-ellipse-by-bounding-box-mode.d.ts

@@ -0,0 +1,5 @@
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export declare class DrawEllipseByBoundingBoxMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon>;
+}

package/dist/edit-modes/draw-ellipse-by-bounding-box-mode.js

@@ -0,0 +1,20 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import { point } from '@turf/helpers';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawEllipseByBoundingBoxMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        const minX = Math.min(coord1[0], coord2[0]);
+        const minY = Math.min(coord1[1], coord2[1]);
+        const maxX = Math.max(coord1[0], coord2[0]);
+        const maxY = Math.max(coord1[1], coord2[1]);
+        const polygonPoints = bboxPolygon([minX, minY, maxX, maxY]).geometry.coordinates[0];
+        const centerCoordinates = getIntermediatePosition(coord1, coord2);
+        const xSemiAxis = Math.max(distance(point(polygonPoints[0]), point(polygonPoints[1])), 0.001);
+        const ySemiAxis = Math.max(distance(point(polygonPoints[0]), point(polygonPoints[3])), 0.001);
+        // @ts-expect-error fix return types
+        return ellipse(centerCoordinates, xSemiAxis, ySemiAxis);
+    }
+}

package/dist/edit-modes/draw-ellipse-using-three-points-mode.d.ts

@@ -0,0 +1,5 @@
+import { Position, Polygon, FeatureOf } from '../geojson-types';
+import { ThreeClickPolygonMode } from './three-click-polygon-mode';
+export declare class DrawEllipseUsingThreePointsMode extends ThreeClickPolygonMode {
+    getThreeClickPolygon(coord1: Position, coord2: Position, coord3: Position, modeConfig: any): FeatureOf<Polygon> | null | undefined;
+}