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

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

@@ -0,0 +1,16 @@
+import distance from '@turf/distance';
+import ellipse from '@turf/ellipse';
+import bearing from '@turf/bearing';
+import { point } from '@turf/helpers';
+import { getIntermediatePosition } from './geojson-edit-mode';
+import { ThreeClickPolygonMode } from './three-click-polygon-mode';
+export class DrawEllipseUsingThreePointsMode extends ThreeClickPolygonMode {
+    getThreeClickPolygon(coord1, coord2, coord3, modeConfig) {
+        const centerCoordinates = getIntermediatePosition(coord1, coord2);
+        const xSemiAxis = Math.max(distance(centerCoordinates, point(coord3)), 0.001);
+        const ySemiAxis = Math.max(distance(coord1, coord2), 0.001) / 2;
+        const options = { angle: bearing(coord1, coord2) };
+        // @ts-expect-error fix return types
+        return ellipse(centerCoordinates, xSemiAxis, ySemiAxis, options);
+    }
+}

package/dist/edit-modes/draw-line-string-mode.d.ts

@@ -0,0 +1,25 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, Tooltip } from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class DrawLineStringMode extends GeoJsonEditMode {
+    dist: number;
+    position: Position;
+    elems: Position[];
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+    /**
+     * 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[];
+    calculateInfoDraw(clickSequence: any): void;
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param dist
+     */
+    _getTooltips: (args: any) => any;
+}

package/dist/edit-modes/draw-line-string-mode.js

@@ -0,0 +1,170 @@
+import distance from '@turf/distance';
+import memoize from '../memoize';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class DrawLineStringMode extends GeoJsonEditMode {
+    // declaration of variables for the calculation of the distance of linestring
+    dist = 0;
+    position = null;
+    elems = [];
+    handleClick(event, props) {
+        const { picks } = event;
+        const clickedEditHandle = getPickedEditHandle(picks);
+        let positionAdded = false;
+        if (!clickedEditHandle) {
+            // Don't add another point right next to an existing one
+            this.addClickSequence(event);
+            positionAdded = true;
+        }
+        const clickSequence = this.getClickSequence();
+        // check if the pointer is on editable state calculate the distance of new point
+        if (!clickedEditHandle) {
+            this.calculateInfoDraw(clickSequence);
+        }
+        if (clickSequence.length > 1 &&
+            clickedEditHandle &&
+            Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+            clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1) {
+            // They clicked the last point (or double-clicked), so add the LineString
+            // reset distance to new calculate
+            this.dist = 0;
+            const lineStringToAdd = {
+                type: 'LineString',
+                coordinates: [...clickSequence],
+            };
+            this.resetClickSequence();
+            const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+        else if (positionAdded) {
+            // new tentative point
+            props.onEdit({
+                // data is the same
+                updatedData: props.data,
+                editType: 'addTentativePosition',
+                editContext: {
+                    position: event.mapCoords,
+                },
+            });
+        }
+    }
+    handleKeyUp(event, props) {
+        const { key } = event;
+        if (key === 'Enter') {
+            const clickSequence = this.getClickSequence();
+            if (clickSequence.length > 1) {
+                const lineStringToAdd = {
+                    type: 'LineString',
+                    coordinates: [...clickSequence],
+                };
+                this.resetClickSequence();
+                const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+                if (editAction) {
+                    props.onEdit(editAction);
+                }
+            }
+        }
+        else if (key === 'Escape') {
+            this.resetClickSequence();
+            props.onEdit({
+                // Because the new drawing feature is dropped, so the data will keep as the same.
+                updatedData: props.data,
+                editType: 'cancelFeature',
+                editContext: {},
+            });
+        }
+    }
+    getGuides(props) {
+        const { lastPointerMoveEvent } = props;
+        const clickSequence = this.getClickSequence();
+        const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        let tentativeFeature;
+        if (clickSequence.length > 0) {
+            tentativeFeature = {
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [...clickSequence, ...lastCoords],
+                },
+            };
+        }
+        if (tentativeFeature) {
+            guides.features.push(tentativeFeature);
+        }
+        const editHandles = clickSequence.map((clickedCoord, index) => ({
+            type: 'Feature',
+            properties: {
+                guideType: 'editHandle',
+                editHandleType: 'existing',
+                featureIndex: -1,
+                positionIndexes: [index],
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: clickedCoord,
+            },
+        }));
+        guides.features.push(...editHandles);
+        return guides;
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+    }
+    /**
+     * 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,
+            dist: this.dist,
+        });
+    }
+    // utility function
+    calculateInfoDraw(clickSequence) {
+        // check if the selected points are at least 2
+        if (clickSequence.length > 1) {
+            // setting the last point
+            this.position = clickSequence[clickSequence.length - 1];
+            // calculate the new distance by adding the
+            // distance of the new drawn linestring
+            this.dist += distance(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]);
+        }
+    }
+    /**
+     * redefine the tooltip of geometry
+     * @param modeConfig
+     * @param dist
+     */
+    _getTooltips = memoize(({ modeConfig, dist }) => {
+        let tooltips = [];
+        const { formatTooltip } = modeConfig || {};
+        let text;
+        if (dist) {
+            if (formatTooltip) {
+                text = formatTooltip(dist);
+            }
+            else {
+                // By default, round to 2 decimal places and append units
+                text = `Distance: ${parseFloat(dist).toFixed(2)} kilometers`;
+            }
+            tooltips = [
+                {
+                    position: this.position,
+                    text,
+                },
+            ];
+        }
+        return tooltips;
+    });
+}

package/dist/edit-modes/draw-point-mode.d.ts

@@ -0,0 +1,8 @@
+import { ClickEvent, PointerMoveEvent, ModeProps, TentativeFeature } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class DrawPointMode extends GeoJsonEditMode {
+    createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature;
+    handleClick({ mapCoords }: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+}

package/dist/edit-modes/draw-point-mode.js

@@ -0,0 +1,28 @@
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class DrawPointMode extends GeoJsonEditMode {
+    createTentativeFeature(props) {
+        const { lastPointerMoveEvent } = props;
+        const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+        return {
+            type: 'Feature',
+            properties: {
+                guideType: 'tentative',
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: lastCoords[0],
+            },
+        };
+    }
+    handleClick({ mapCoords }, props) {
+        const geometry = {
+            type: 'Point',
+            coordinates: mapCoords,
+        };
+        props.onEdit(this.getAddFeatureAction(geometry, props.data));
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+        super.handlePointerMove(event, props);
+    }
+}

package/dist/edit-modes/draw-polygon-by-dragging-mode.d.ts

@@ -0,0 +1,14 @@
+import { ClickEvent, StartDraggingEvent, StopDraggingEvent, DraggingEvent, ModeProps } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { DrawPolygonMode } from './draw-polygon-mode';
+type DraggingHandler = (event: DraggingEvent, props: ModeProps<FeatureCollection>) => void;
+export declare class DrawPolygonByDraggingMode extends DrawPolygonMode {
+    handleDraggingThrottled: DraggingHandler | null | undefined;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleDraggingAux(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void;
+    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void;
+}
+export {};

package/dist/edit-modes/draw-polygon-by-dragging-mode.js

@@ -0,0 +1,87 @@
+import throttle from 'lodash.throttle';
+import { getPickedEditHandle } from './utils';
+import { DrawPolygonMode } from './draw-polygon-mode';
+export class DrawPolygonByDraggingMode extends DrawPolygonMode {
+    handleDraggingThrottled = null;
+    handleClick(event, props) {
+        // No-op
+    }
+    handleStartDragging(event, props) {
+        event.cancelPan();
+        if (props.modeConfig && props.modeConfig.throttleMs) {
+            this.handleDraggingThrottled = throttle(this.handleDraggingAux, props.modeConfig.throttleMs);
+        }
+        else {
+            this.handleDraggingThrottled = this.handleDraggingAux;
+        }
+    }
+    handleStopDragging(event, props) {
+        this.addClickSequence(event);
+        const clickSequence = this.getClickSequence();
+        // @ts-expect-error cancel() not typed
+        if (this.handleDraggingThrottled && this.handleDraggingThrottled.cancel) {
+            // @ts-expect-error cancel() not typed
+            this.handleDraggingThrottled.cancel();
+        }
+        if (clickSequence.length > 2) {
+            // Complete the polygon.
+            const polygonToAdd = {
+                type: 'Polygon',
+                coordinates: [[...clickSequence, clickSequence[0]]],
+            };
+            const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+        this.resetClickSequence();
+    }
+    handleDraggingAux(event, props) {
+        const { picks } = event;
+        const clickedEditHandle = getPickedEditHandle(picks);
+        if (!clickedEditHandle) {
+            // Don't add another point right next to an existing one.
+            this.addClickSequence(event);
+            props.onEdit({
+                updatedData: props.data,
+                editType: 'addTentativePosition',
+                editContext: {
+                    position: event.mapCoords,
+                },
+            });
+        }
+    }
+    handleDragging(event, props) {
+        if (this.handleDraggingThrottled) {
+            this.handleDraggingThrottled(event, props);
+        }
+    }
+    handleKeyUp(event, props) {
+        if (event.key === 'Enter') {
+            const clickSequence = this.getClickSequence();
+            if (clickSequence.length > 2) {
+                const polygonToAdd = {
+                    type: 'Polygon',
+                    coordinates: [[...clickSequence, clickSequence[0]]],
+                };
+                this.resetClickSequence();
+                const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+                if (editAction) {
+                    props.onEdit(editAction);
+                }
+            }
+        }
+        else if (event.key === 'Escape') {
+            this.resetClickSequence();
+            if (this.handleDraggingThrottled) {
+                this.handleDraggingThrottled = null;
+            }
+            props.onEdit({
+                // Because the new drawing feature is dropped, so the data will keep as the same.
+                updatedData: props.data,
+                editType: 'cancelFeature',
+                editContext: {},
+            });
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection, TentativeFeature } from './types';
+import { FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export declare class DrawPolygonMode extends GeoJsonEditMode {
+    createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature;
+    getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection;
+    handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void;
+    handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void;
+    handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void;
+}

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

@@ -0,0 +1,143 @@
+import lineIntersect from '@turf/line-intersect';
+import { lineString as turfLineString } from '@turf/helpers';
+import { getPickedEditHandle } from './utils';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+export class DrawPolygonMode extends GeoJsonEditMode {
+    createTentativeFeature(props) {
+        const { lastPointerMoveEvent } = props;
+        const clickSequence = this.getClickSequence();
+        const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
+        let tentativeFeature;
+        if (clickSequence.length === 1 || clickSequence.length === 2) {
+            tentativeFeature = {
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [...clickSequence, ...lastCoords],
+                },
+            };
+        }
+        else if (clickSequence.length > 2) {
+            tentativeFeature = {
+                type: 'Feature',
+                properties: {
+                    guideType: 'tentative',
+                },
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]],
+                },
+            };
+        }
+        return tentativeFeature;
+    }
+    getGuides(props) {
+        const clickSequence = this.getClickSequence();
+        const guides = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+        const tentativeFeature = this.createTentativeFeature(props);
+        if (tentativeFeature) {
+            guides.features.push(tentativeFeature);
+        }
+        const editHandles = clickSequence.map((clickedCoord, index) => ({
+            type: 'Feature',
+            properties: {
+                guideType: 'editHandle',
+                editHandleType: 'existing',
+                featureIndex: -1,
+                positionIndexes: [index],
+            },
+            geometry: {
+                type: 'Point',
+                coordinates: clickedCoord,
+            },
+        }));
+        guides.features.push(...editHandles);
+        return guides;
+    }
+    handleClick(event, props) {
+        const { picks } = event;
+        const clickedEditHandle = getPickedEditHandle(picks);
+        const clickSequence = this.getClickSequence();
+        let overlappingLines = false;
+        if (clickSequence.length > 2 && props.modeConfig && props.modeConfig.preventOverlappingLines) {
+            const currentLine = turfLineString([
+                clickSequence[clickSequence.length - 1],
+                event.mapCoords,
+            ]);
+            const otherLines = turfLineString([...clickSequence.slice(0, clickSequence.length - 1)]);
+            const intersectingPoints = lineIntersect(currentLine, otherLines);
+            if (intersectingPoints.features.length > 0) {
+                overlappingLines = true;
+            }
+        }
+        let positionAdded = false;
+        if (!clickedEditHandle && !overlappingLines) {
+            // Don't add another point right next to an existing one
+            this.addClickSequence(event);
+            positionAdded = true;
+        }
+        if (clickSequence.length > 2 &&
+            clickedEditHandle &&
+            Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+            (clickedEditHandle.properties.positionIndexes[0] === 0 ||
+                clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)) {
+            // They clicked the first or last point (or double-clicked), so complete the polygon
+            // Remove the hovered position
+            const polygonToAdd = {
+                type: 'Polygon',
+                coordinates: [[...clickSequence, clickSequence[0]]],
+            };
+            this.resetClickSequence();
+            const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+            if (editAction) {
+                props.onEdit(editAction);
+            }
+        }
+        else if (positionAdded) {
+            // new tentative point
+            props.onEdit({
+                // data is the same
+                updatedData: props.data,
+                editType: 'addTentativePosition',
+                editContext: {
+                    position: event.mapCoords,
+                },
+            });
+        }
+    }
+    handleKeyUp(event, props) {
+        if (event.key === 'Enter') {
+            const clickSequence = this.getClickSequence();
+            if (clickSequence.length > 2) {
+                const polygonToAdd = {
+                    type: 'Polygon',
+                    coordinates: [[...clickSequence, clickSequence[0]]],
+                };
+                this.resetClickSequence();
+                const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+                if (editAction) {
+                    props.onEdit(editAction);
+                }
+            }
+        }
+        else if (event.key === 'Escape') {
+            this.resetClickSequence();
+            props.onEdit({
+                // Because the new drawing feature is dropped, so the data will keep as the same.
+                updatedData: props.data,
+                editType: 'cancelFeature',
+                editContext: {},
+            });
+        }
+    }
+    handlePointerMove(event, props) {
+        props.onUpdateCursor('cell');
+        super.handlePointerMove(event, props);
+    }
+}

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

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

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

@@ -0,0 +1,17 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawRectangleFromCenterMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        const longitude = coord1[0] > coord2[0]
+            ? coord1[0] + Math.abs(coord1[0] - coord2[0])
+            : coord1[0] - Math.abs(coord1[0] - coord2[0]);
+        const latitude = coord1[1] > coord2[1]
+            ? coord1[1] + Math.abs(coord1[1] - coord2[1])
+            : coord1[1] - Math.abs(coord1[1] - coord2[1]);
+        const rectangle = bboxPolygon([longitude, latitude, coord2[0], coord2[1]]);
+        rectangle.properties = rectangle.properties || {};
+        rectangle.properties.shape = 'Rectangle';
+        // @ts-expect-error turf typing too wide
+        return rectangle;
+    }
+}

package/dist/edit-modes/draw-rectangle-mode.d.ts

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

package/dist/edit-modes/draw-rectangle-mode.js

@@ -0,0 +1,11 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawRectangleMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        const rectangle = bboxPolygon([coord1[0], coord1[1], coord2[0], coord2[1]]);
+        rectangle.properties = rectangle.properties || {};
+        rectangle.properties.shape = 'Rectangle';
+        // @ts-expect-error turf typing too wide
+        return rectangle;
+    }
+}

package/dist/edit-modes/draw-rectangle-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 DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
+    getThreeClickPolygon(coord1: Position, coord2: Position, coord3: Position, modeConfig: any): FeatureOf<Polygon> | null | undefined;
+}

package/dist/edit-modes/draw-rectangle-using-three-points-mode.js

@@ -0,0 +1,28 @@
+import { generatePointsParallelToLinePoints } from './utils';
+import { ThreeClickPolygonMode } from './three-click-polygon-mode';
+export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
+    getThreeClickPolygon(coord1, coord2, coord3, modeConfig) {
+        const [p3, p4] = generatePointsParallelToLinePoints(coord1, coord2, coord3);
+        return {
+            type: 'Feature',
+            properties: {
+                shape: 'Rectangle',
+            },
+            geometry: {
+                type: 'Polygon',
+                coordinates: [
+                    [
+                        // Draw a polygon containing all the points of the LineString,
+                        // then the points orthogonal to the lineString,
+                        // then back to the starting position
+                        coord1,
+                        coord2,
+                        p3,
+                        p4,
+                        coord1,
+                    ],
+                ],
+            },
+        };
+    }
+}

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

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

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

@@ -0,0 +1,35 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import turfDistance from '@turf/distance';
+import turfAlong from '@turf/along';
+import { point, lineString as turfLineString } from '@turf/helpers';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawSquareFromCenterMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        // get the coordinates of the other two rectangle vertices
+        const coord3 = [coord2[0], coord1[1]];
+        const coord4 = [coord1[0], coord2[1]];
+        // determine the shortest distance to the origin, which will be the length of each square side
+        const distance1 = turfDistance(point(coord3), point(coord1));
+        const distance2 = turfDistance(point(coord4), point(coord1));
+        const shortestDistance = distance1 <= distance2 ? distance1 : distance2;
+        // determine which coordinate pair of the two is closest to the origin
+        const closestPoint = distance1 <= distance2 ? coord3 : coord4;
+        // create a linestring which will used to locate the second square vertex
+        const line = turfLineString([closestPoint, coord2]);
+        // get the coordinates of the second square vertex
+        const newPoint = turfAlong(line, shortestDistance);
+        const corner = newPoint.geometry.coordinates;
+        // determine the longitude and latitude values of the opposite corner
+        const longitude = coord1[0] > corner[0]
+            ? coord1[0] + Math.abs(coord1[0] - corner[0])
+            : coord1[0] - Math.abs(coord1[0] - corner[0]);
+        const latitude = coord1[1] > corner[1]
+            ? coord1[1] + Math.abs(coord1[1] - corner[1])
+            : coord1[1] - Math.abs(coord1[1] - corner[1]);
+        const square = bboxPolygon([longitude, latitude, corner[0], corner[1]]);
+        square.properties = square.properties || {};
+        square.properties.shape = 'Square';
+        // @ts-expect-error turf typing too wide
+        return square;
+    }
+}

package/dist/edit-modes/draw-square-mode.d.ts

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

package/dist/edit-modes/draw-square-mode.js

@@ -0,0 +1,28 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import turfDistance from '@turf/distance';
+import turfAlong from '@turf/along';
+import { point, lineString as turfLineString } from '@turf/helpers';
+import { TwoClickPolygonMode } from './two-click-polygon-mode';
+export class DrawSquareMode extends TwoClickPolygonMode {
+    getTwoClickPolygon(coord1, coord2, modeConfig) {
+        // get the coordinates of the other two rectangle vertices
+        const coord3 = [coord2[0], coord1[1]];
+        const coord4 = [coord1[0], coord2[1]];
+        // determine the shortest distance to the origin, which will be the length of each square side
+        const distance1 = turfDistance(point(coord3), point(coord1));
+        const distance2 = turfDistance(point(coord4), point(coord1));
+        const shortestDistance = distance1 <= distance2 ? distance1 : distance2;
+        // determine which coordinate pair of the two is closest to the origin
+        const closestPoint = distance1 <= distance2 ? coord3 : coord4;
+        // create a linestring which will used to locate the second square vertex
+        const line = turfLineString([closestPoint, coord2]);
+        // get the coordinates of the second square vertex
+        const newPoint = turfAlong(line, shortestDistance);
+        const corner = newPoint.geometry.coordinates;
+        const square = bboxPolygon([coord1[0], coord1[1], corner[0], corner[1]]);
+        square.properties = square.properties || {};
+        square.properties.shape = 'Square';
+        // @ts-expect-error turf types too wide
+        return square;
+    }
+}