@deck.gl-community/editable-layers 9.2.0-beta.8 → 9.2.8

package/src/edit-modes/resize-circle-mode.ts

@@ -14,7 +14,13 @@ import {
   getPickedEditHandle,
   NearestPointType
 } from './utils';
-import {LineString, Point, FeatureCollection, Feature, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  LineString,
+  Point,
+  FeatureCollection,
+  Feature,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {Viewport} from '../utils/types';
 import {
   ModeProps,
@@ -24,7 +30,7 @@ import {
   DraggingEvent,
   EditHandleFeature,
   GuideFeatureCollection,
-  GuideFeature,
+  GuideFeature
 } from './types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
 import {ImmutableFeatureCollection} from './immutable-feature-collection';
@@ -69,7 +75,6 @@ export class ResizeCircleMode extends GeoJsonEditMode {
           (lineString, prefix) => {
             const lineStringFeature = toLineString(lineString);
             const candidateIntermediatePoint = this.getNearestPoint(
-
               lineStringFeature,
               referencePoint,
               props.modeConfig && props.modeConfig.viewport

package/src/edit-modes/rotate-mode.ts

@@ -172,14 +172,9 @@ export class RotateMode extends GeoJsonEditMode {
     }
     const centroid = turfCentroid(this._geometryBeingRotated);
     const angle = getRotationAngle(centroid.geometry.coordinates, startDragPoint, currentPoint);
-    const rotatedFeatures = turfTransformRotate(
-
-      this._geometryBeingRotated,
-      angle,
-      {
-        pivot: centroid
-      }
-    );
+    const rotatedFeatures = turfTransformRotate(this._geometryBeingRotated, angle, {
+      pivot: centroid
+    });
 
     let updatedData = new ImmutableFeatureCollection(props.data);
 

package/src/edit-modes/scale-mode.ts

@@ -64,7 +64,10 @@ export class ScaleMode extends GeoJsonEditMode {
     );
   };
 
-  _getUpdatedData = (props: ModeProps<SimpleFeatureCollection>, editedData: SimpleFeatureCollection) => {
+  _getUpdatedData = (
+    props: ModeProps<SimpleFeatureCollection>,
+    editedData: SimpleFeatureCollection
+  ) => {
     let updatedData = new ImmutableFeatureCollection(props.data);
     const selectedIndexes = props.selectedIndexes;
     for (let i = 0; i < selectedIndexes.length; i++) {
@@ -92,11 +95,7 @@ export class ScaleMode extends GeoJsonEditMode {
 
     const scaleFactor = getScaleFactor(origin, startDragPoint, currentPoint);
 
-    const scaledFeatures = turfTransformScale(
-      this._geometryBeingScaled,
-      scaleFactor,
-      {origin}
-    );
+    const scaledFeatures = turfTransformScale(this._geometryBeingScaled, scaleFactor, {origin});
 
     return {
       updatedData: this._getUpdatedData(props, scaledFeatures),

package/src/edit-modes/snappable-mode.ts

@@ -2,7 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Position, FeatureCollection, SimpleFeatureCollection, SimpleFeature} from '../utils/geojson-types';
+import {
+  Position,
+  FeatureCollection,
+  SimpleFeatureCollection,
+  SimpleFeature
+} from '../utils/geojson-types';
 import {
   PointerMoveEvent,
   StartDraggingEvent,

package/src/edit-modes/split-polygon-mode.ts

@@ -26,7 +26,11 @@ import {GeoJsonEditMode, GeoJsonEditAction} from './geojson-edit-mode';
 import {ImmutableFeatureCollection} from './immutable-feature-collection';
 
 export class SplitPolygonMode extends GeoJsonEditMode {
-  calculateMapCoords(clickSequence: any, mapCoords: any, props: ModeProps<SimpleFeatureCollection>) {
+  calculateMapCoords(
+    clickSequence: any,
+    mapCoords: any,
+    props: ModeProps<SimpleFeatureCollection>
+  ) {
     const modeConfig = props.modeConfig;
     if (!modeConfig || !modeConfig.lock90Degree || !clickSequence.length) {
       return mapCoords;
@@ -53,7 +57,7 @@ export class SplitPolygonMode extends GeoJsonEditMode {
       if (closestPoint) {
         // closest point is used as 90degree entry to the polygon
         const lastBearing = turfBearing(firstPoint, closestPoint);
-        const currentDistance = turfDistance(firstPoint, mapCoords, { units: 'meters' });
+        const currentDistance = turfDistance(firstPoint, mapCoords, {units: 'meters'});
         return turfDestination(firstPoint, currentDistance, lastBearing, {
           units: 'meters'
         }).geometry.coordinates;
@@ -161,7 +165,9 @@ export class SplitPolygonMode extends GeoJsonEditMode {
     }
 
     const buffer = turfBuffer(tentativeFeature, gap, {units});
-    const updatedGeometry = turfDifference(featureCollection([turfFeature(selectedGeometry as PolygonGeometry), buffer]));
+    const updatedGeometry = turfDifference(
+      featureCollection([turfFeature(selectedGeometry as PolygonGeometry), buffer])
+    );
     if (!updatedGeometry) {
       // eslint-disable-next-line no-console,no-undef
       console.warn('Canceling edit. Split Polygon erased');

package/src/edit-modes/three-click-polygon-mode.ts

@@ -9,26 +9,31 @@ import {
   GuideFeatureCollection,
   TentativeFeature
 } from './types';
-import {Position, Polygon, Feature, FeatureCollection, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  Position,
+  Polygon,
+  Feature,
+  FeatureCollection,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
-import omit from 'lodash.omit';
 
 export class ThreeClickPolygonMode extends GeoJsonEditMode {
   handleClick(event: ClickEvent, props: ModeProps<SimpleFeatureCollection>) {
     this.addClickSequence(event);
+
+    const {modeConfig} = props;
     const clickSequence = this.getClickSequence();
-    const tentativeFeature = this.getTentativeGuide(props);
-
-    if (
-      clickSequence.length > 2 &&
-      tentativeFeature &&
-      tentativeFeature.geometry.type === 'Polygon'
-    ) {
-      const editAction = this.getAddFeatureOrBooleanPolygonAction(
-        tentativeFeature.geometry,
-        props,
-        omit(tentativeFeature.properties, 'guideType')
+
+    if (clickSequence.length > 2) {
+      const {geometry, properties} = this.getThreeClickPolygon(
+        clickSequence[0],
+        clickSequence[1],
+        clickSequence[2],
+        modeConfig
       );
+
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(geometry, props, properties);
       this.resetClickSequence();
 
       if (editAction) {
@@ -46,14 +51,12 @@ export class ThreeClickPolygonMode extends GeoJsonEditMode {
       features: []
     };
 
-    if (clickSequence.length === 0) {
-      // nothing to do yet
-      return guides;
-    }
-
-    const hoveredCoord = lastPointerMoveEvent.mapCoords;
+    const coords = [
+      ...clickSequence,
+      ...(lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [])
+    ];
 
-    if (clickSequence.length === 1) {
+    if (coords.length === 2) {
       guides.features.push({
         type: 'Feature',
         properties: {
@@ -61,24 +64,18 @@ export class ThreeClickPolygonMode extends GeoJsonEditMode {
         },
         geometry: {
           type: 'LineString',
-          coordinates: [clickSequence[0], hoveredCoord]
+          coordinates: [coords[0], coords[1]]
         }
       });
-    } else {
-      const polygon = this.getThreeClickPolygon(
-        clickSequence[0],
-        clickSequence[1],
-        hoveredCoord,
-        modeConfig
-      );
+    } else if (coords.length > 2) {
+      const polygon = this.getThreeClickPolygon(coords[0], coords[1], coords[2], modeConfig);
       if (polygon) {
         guides.features.push({
-          type: 'Feature',
+          ...polygon,
           properties: {
             ...polygon.properties,
             guideType: 'tentative'
-          },
-          geometry: polygon.geometry
+          }
         });
       }
     }

package/src/edit-modes/translate-mode.ts

@@ -6,8 +6,13 @@ import turfBearing from '@turf/bearing';
 import turfDistance from '@turf/distance';
 import clone from '@turf/clone';
 import {point} from '@turf/helpers';
-import {WebMercatorViewport} from 'viewport-mercator-project';
-import {FeatureCollection, Position, SimpleGeometry, SimpleFeatureCollection} from '../utils/geojson-types';
+import {WebMercatorViewport} from '@math.gl/web-mercator';
+import {
+  FeatureCollection,
+  Position,
+  SimpleGeometry,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {
   PointerMoveEvent,
   StartDraggingEvent,
@@ -132,7 +137,7 @@ export class TranslateMode extends GeoJsonEditMode {
 
           updatedData = updatedData.replaceGeometry(selectedIndex, {
             type: feature.geometry.type,
-            coordinates,
+            coordinates
           } as SimpleGeometry);
         }
       }

package/src/edit-modes/two-click-polygon-mode.ts

@@ -11,7 +11,13 @@ import {
   GuideFeatureCollection,
   TentativeFeature
 } from './types';
-import {Polygon, FeatureCollection, Feature, Position, SimpleFeatureCollection} from '../utils/geojson-types';
+import {
+  Polygon,
+  FeatureCollection,
+  Feature,
+  Position,
+  SimpleFeatureCollection
+} from '../utils/geojson-types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
 import omit from 'lodash.omit';
 

package/src/edit-modes/utils.ts

@@ -10,7 +10,7 @@ import pointToLineDistance from '@turf/point-to-line-distance';
 import {flattenEach} from '@turf/meta';
 import {point} from '@turf/helpers';
 import {getCoords} from '@turf/invariant';
-import {WebMercatorViewport} from 'viewport-mercator-project';
+import {WebMercatorViewport} from '@math.gl/web-mercator';
 import {Viewport, Pick, EditHandleFeature, EditHandleType, StartDraggingEvent} from './types';
 import {
   SimpleGeometry,

package/src/editable-layers/editable-geojson-layer.ts

@@ -333,10 +333,26 @@ export class EditableGeoJsonLayer extends EditableLayer<
       },
 
       updateTriggers: {
-        getLineColor: [this.props.updateTriggers.getLineColor, this.props.selectedFeatureIndexes, this.props.mode],
-        getFillColor: [this.props.updateTriggers.getFillColor, this.props.selectedFeatureIndexes, this.props.mode],
-        getPointRadius: [this.props.updateTriggers.getPointRadius, this.props.selectedFeatureIndexes, this.props.mode],
-        getLineWidth: [this.props.updateTriggers.getLineWidth, this.props.selectedFeatureIndexes, this.props.mode]
+        getLineColor: [
+          this.props.updateTriggers.getLineColor,
+          this.props.selectedFeatureIndexes,
+          this.props.mode
+        ],
+        getFillColor: [
+          this.props.updateTriggers.getFillColor,
+          this.props.selectedFeatureIndexes,
+          this.props.mode
+        ],
+        getPointRadius: [
+          this.props.updateTriggers.getPointRadius,
+          this.props.selectedFeatureIndexes,
+          this.props.mode
+        ],
+        getLineWidth: [
+          this.props.updateTriggers.getLineWidth,
+          this.props.selectedFeatureIndexes,
+          this.props.mode
+        ]
       }
     });
 

package/src/index.ts

@@ -22,6 +22,9 @@ export type {
   EditModeTrayWidgetSelectEvent
 } from './widgets/edit-mode-tray-widget';
 
+export {EditorToolbarWidget} from './widgets/editor-toolbar-widget';
+export type {EditorToolbarWidgetProps, BooleanOperation} from './widgets/editor-toolbar-widget';
+
 // Layers move to deck.gl-community/layers?
 export {JunctionScatterplotLayer} from './editable-layers/junction-scatterplot-layer';
 

package/src/mode-handlers/mode-handler.ts

@@ -9,7 +9,16 @@ import turfUnion from '@turf/union';
 import turfDifference from '@turf/difference';
 import turfIntersect from '@turf/intersect';
 
-import {FeatureCollection, Feature, Polygon, SimpleGeometry, Position, PolygonGeometry, SimpleFeatureCollection, SimpleFeature} from '../utils/geojson-types';
+import {
+  FeatureCollection,
+  Feature,
+  Polygon,
+  SimpleGeometry,
+  Position,
+  PolygonGeometry,
+  SimpleFeatureCollection,
+  SimpleFeature
+} from '../utils/geojson-types';
 
 import {
   ClickEvent,
@@ -74,7 +83,7 @@ export class ModeHandler {
   }
 
   getSelectedFeaturesAsFeatureCollection(): SimpleFeatureCollection {
-    const { features } = this.featureCollection.getObject();
+    const {features} = this.featureCollection.getObject();
     const selectedFeatures = this.getSelectedFeatureIndexes().map(
       (selectedIndex) => features[selectedIndex]
     );
@@ -222,16 +231,22 @@ export class ModeHandler {
       const feature: Feature<Polygon> = {
         type: 'Feature',
         geometry,
-        properties: {},
+        properties: {}
       };
 
       let updatedGeometry;
       if (modeConfig.booleanOperation === 'union') {
-        updatedGeometry = turfUnion(turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature]));
+        updatedGeometry = turfUnion(
+          turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature])
+        );
       } else if (modeConfig.booleanOperation === 'difference') {
-        updatedGeometry = turfDifference(turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature]));
+        updatedGeometry = turfDifference(
+          turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature])
+        );
       } else if (modeConfig.booleanOperation === 'intersection') {
-        updatedGeometry = turfIntersect(turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature]));
+        updatedGeometry = turfIntersect(
+          turfFeatureCollection([selectedFeature as Feature<PolygonGeometry>, feature])
+        );
       } else {
         // eslint-disable-next-line no-console,no-undef
         console.warn(`Invalid booleanOperation ${modeConfig.booleanOperation}`);

package/src/mode-handlers/rotate-handler.ts

@@ -69,10 +69,7 @@ export class RotateHandler extends ModeHandler {
     const centroid = turfCentroid(this._geometryBeingRotated);
     const angle = getRotationAngle(centroid.geometry.coordinates, startPosition, currentPoint);
 
-    const rotatedFeatures = turfTransformRotate(
-      this._geometryBeingRotated,
-      angle
-    );
+    const rotatedFeatures = turfTransformRotate(this._geometryBeingRotated, angle);
 
     let updatedData = this.getImmutableFeatureCollection();
 

package/src/mode-handlers/scale-handler.ts

@@ -68,13 +68,9 @@ export class ScaleHandler extends ModeHandler {
     const startPosition = startDragPoint;
     const centroid = turfCentroid(this._geometryBeingScaled);
     const factor = getScaleFactor(centroid.geometry.coordinates, startPosition, currentPoint);
-    const scaledFeatures = turfTransformScale(
-      this._geometryBeingScaled,
-      factor,
-      {
-        origin: centroid
-      }
-    );
+    const scaledFeatures = turfTransformScale(this._geometryBeingScaled, factor, {
+      origin: centroid
+    });
 
     let updatedData = this.getImmutableFeatureCollection();
 

package/src/mode-handlers/split-polygon-handler.ts

@@ -140,7 +140,9 @@ export class SplitPolygonHandler extends ModeHandler {
       units = 'centimeters';
     }
     const buffer = turfBuffer(tentativeFeature, gap, {units});
-    const updatedGeometry = turfDifference(featureCollection([turfFeature(selectedGeometry as PolygonGeometry), buffer]));
+    const updatedGeometry = turfDifference(
+      featureCollection([turfFeature(selectedGeometry as PolygonGeometry), buffer])
+    );
     this._setTentativeFeature(null);
     if (!updatedGeometry) {
       // eslint-disable-next-line no-console,no-undef

package/src/utils/geojson-types.ts

@@ -11,22 +11,38 @@ import type {
   MultiPolygon,
   Position,
   Feature,
-  FeatureCollection,
+  FeatureCollection
 } from 'geojson';
 
-export { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, Position, Feature, FeatureCollection };
+export {
+  Point,
+  LineString,
+  Polygon,
+  MultiPoint,
+  MultiLineString,
+  MultiPolygon,
+  Position,
+  Feature,
+  FeatureCollection
+};
 
 /** Simple geometries (excludes GeometryCollection) */
-export type SimpleGeometry = Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon;
+export type SimpleGeometry =
+  | Point
+  | LineString
+  | Polygon
+  | MultiPoint
+  | MultiLineString
+  | MultiPolygon;
 
 /** Feature with any geometry except GeometryCollection */
-export type SimpleFeature = Feature<SimpleGeometry>
+export type SimpleFeature = Feature<SimpleGeometry>;
 
 /** FeatureCollection with any geometries except GeometryCollection */
-export type SimpleFeatureCollection = FeatureCollection<SimpleGeometry>
+export type SimpleFeatureCollection = FeatureCollection<SimpleGeometry>;
 
 /** Coordinates of any geometry except GeometryCollection */
-export type SimpleGeometryCoordinates = SimpleGeometry['coordinates']
+export type SimpleGeometryCoordinates = SimpleGeometry['coordinates'];
 
 /** Polygon and MultiPolygon geometries */
 export type PolygonGeometry = Polygon | MultiPolygon;

package/src/utils/translate-from-center.ts

@@ -11,35 +11,22 @@ import type {SimpleFeature} from './geojson-types';
 
 // This function takes feature's center, moves it,
 // and builds new feature around it keeping the proportions
-export function translateFromCenter(
-  feature: SimpleFeature,
-  distance: number,
-  direction: number
-) {
+export function translateFromCenter(feature: SimpleFeature, distance: number, direction: number) {
   const initialCenterPoint = turfCenter(feature);
 
   const movedCenterPoint = turfRhumbDestination(initialCenterPoint, distance, direction);
 
-  const movedCoordinates = mapCoords(
-    feature.geometry.coordinates,
-    (coordinate) => {
-      const rhumbDistance = turfRhumbDistance(
-        initialCenterPoint.geometry.coordinates,
-        coordinate
-      );
-      const rhumbDirection = turfRhumbBearing(
-        initialCenterPoint.geometry.coordinates,
-        coordinate
-      );
+  const movedCoordinates = mapCoords(feature.geometry.coordinates, (coordinate) => {
+    const rhumbDistance = turfRhumbDistance(initialCenterPoint.geometry.coordinates, coordinate);
+    const rhumbDirection = turfRhumbBearing(initialCenterPoint.geometry.coordinates, coordinate);
 
-      const movedPosition = turfRhumbDestination(
-        movedCenterPoint.geometry.coordinates,
-        rhumbDistance,
-        rhumbDirection
-      ).geometry.coordinates;
-      return movedPosition;
-    }
-  );
+    const movedPosition = turfRhumbDestination(
+      movedCenterPoint.geometry.coordinates,
+      rhumbDistance,
+      rhumbDirection
+    ).geometry.coordinates;
+    return movedPosition;
+  });
 
   feature.geometry.coordinates = movedCoordinates;
 

package/src/utils/utils.ts

@@ -6,7 +6,7 @@ import destination from '@turf/destination';
 import bearing from '@turf/bearing';
 import pointToLineDistance from '@turf/point-to-line-distance';
 import {point} from '@turf/helpers';
-import {WebMercatorViewport} from 'viewport-mercator-project';
+import {WebMercatorViewport} from '@math.gl/web-mercator';
 import {Feature, LineString, Point, Position} from './geojson-types';
 import {Viewport} from './types';
 

package/src/widgets/edit-mode-tray-widget.tsx

@@ -4,12 +4,7 @@
 
 import {render} from 'preact';
 import type {ComponentChild, JSX} from 'preact';
-import {
-  Widget,
-  type WidgetProps,
-  type WidgetPlacement,
-  type Deck
-} from '@deck.gl/core';
+import {Widget, type WidgetProps, type WidgetPlacement, type Deck} from '@deck.gl/core';
 import type {
   GeoJsonEditModeConstructor,
   GeoJsonEditModeType
@@ -106,6 +101,7 @@ const BUTTON_LABEL_STYLE: JSX.CSSProperties = {
 export class EditModeTrayWidget extends Widget<EditModeTrayWidgetProps> {
   static override defaultProps = {
     id: 'edit-mode-tray',
+    _container: null,
     placement: 'top-left',
     layout: 'vertical',
     modes: [],