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

package/src/edit-modes/measure-angle-mode.ts

@@ -1,63 +1,70 @@
 import turfBearing from '@turf/bearing';
 import turfCenter from '@turf/center';
-import memoize from '../memoize';
+import {memoize} from '../utils/memoize';
 
-import { ClickEvent, PointerMoveEvent, Tooltip, ModeProps, GuideFeatureCollection } from './types';
-import { FeatureCollection, Position } from '../geojson-types';
-import { GeoJsonEditMode } from './geojson-edit-mode';
+import {ClickEvent, PointerMoveEvent, Tooltip, ModeProps, GuideFeatureCollection} from './types';
+import {FeatureCollection, Position} from '../utils/geojson-types';
+import {GeoJsonEditMode} from './geojson-edit-mode';
 
 const DEFAULT_TOOLTIPS: Tooltip[] = [];
 
 export class MeasureAngleMode extends GeoJsonEditMode {
-  _getTooltips = memoize(({ modeConfig, vertex, point1, point2 }: {
-    modeConfig: any,
-    vertex: any,
-    point1: Position,
-    point2: Position
-  }): Tooltip[] => {
-    let tooltips = DEFAULT_TOOLTIPS;
-
-    if (vertex && point1 && point2) {
-      const { formatTooltip, measurementCallback } = modeConfig || {};
-      const units = 'deg';
-
-      const angle1 = turfBearing(vertex, point1);
-      const angle2 = turfBearing(vertex, point2);
-      let angle = Math.abs(angle1 - angle2);
-      if (angle > 180) {
-        angle = 360 - angle;
+  _getTooltips = memoize(
+    ({
+      modeConfig,
+      vertex,
+      point1,
+      point2
+    }: {
+      modeConfig: any;
+      vertex: any;
+      point1: Position;
+      point2: Position;
+    }): Tooltip[] => {
+      let tooltips = DEFAULT_TOOLTIPS;
+
+      if (vertex && point1 && point2) {
+        const {formatTooltip, measurementCallback} = modeConfig || {};
+        const units = 'deg';
+
+        const angle1 = turfBearing(vertex, point1);
+        const angle2 = turfBearing(vertex, point2);
+        let angle = Math.abs(angle1 - angle2);
+        if (angle > 180) {
+          angle = 360 - angle;
+        }
+
+        let text: string;
+        if (formatTooltip) {
+          text = formatTooltip(angle);
+        } else {
+          // By default, round to 2 decimal places and append units
+          // @ts-expect-error angle isn't string
+          text = `${parseFloat(angle).toFixed(2)} ${units}`;
+        }
+
+        if (measurementCallback) {
+          measurementCallback(angle);
+        }
+
+        const position = turfCenter({
+          type: 'FeatureCollection',
+          features: [point1, point2].map((p) => ({
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: p
+            },
+            properties: {}
+          }))
+        }).geometry.coordinates;
+
+        tooltips = [{position, text}];
       }
 
-      let text: string;
-      if (formatTooltip) {
-        text = formatTooltip(angle);
-      } else {
-        // By default, round to 2 decimal places and append units
-        // @ts-expect-error angle isn't string
-        text = `${parseFloat(angle).toFixed(2)} ${units}`;
-      }
-
-      if (measurementCallback) {
-        measurementCallback(angle);
-      }
-
-      const position = turfCenter({
-        type: 'FeatureCollection',
-        features: [point1, point2].map((p) => ({
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: p,
-          },
-          properties: {}
-        })),
-      }).geometry.coordinates as Position;
-
-      tooltips = [{position, text}];
+      return tooltips;
     }
-
-    return tooltips;
-  });
+  );
 
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void {
     if (this.getClickSequence().length >= 3) {
@@ -86,28 +93,28 @@ export class MeasureAngleMode extends GeoJsonEditMode {
 
   // Return features that can be used as a guide for editing the data
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
-    const guides: GuideFeatureCollection = { type: 'FeatureCollection', features: [] };
-    const { features } = guides;
+    const guides: GuideFeatureCollection = {type: 'FeatureCollection', features: []};
+    const {features} = guides;
 
     const points = this.getPoints(props);
 
     if (points.length > 2) {
       features.push({
         type: 'Feature',
-        properties: { guideType: 'tentative' },
+        properties: {guideType: 'tentative'},
         geometry: {
           type: 'LineString',
-          coordinates: [points[1], points[0], points[2]],
-        },
+          coordinates: [points[1], points[0], points[2]]
+        }
       });
     } else if (points.length > 1) {
       features.push({
         type: 'Feature',
-        properties: { guideType: 'tentative' },
+        properties: {guideType: 'tentative'},
         geometry: {
           type: 'LineString',
-          coordinates: [points[1], points[0]],
-        },
+          coordinates: [points[1], points[0]]
+        }
       });
     }
 
@@ -121,7 +128,7 @@ export class MeasureAngleMode extends GeoJsonEditMode {
       modeConfig: props.modeConfig,
       vertex: points[0],
       point1: points[1],
-      point2: points[2],
+      point2: points[2]
     }) as Tooltip[];
   }
 }

package/src/edit-modes/measure-area-mode.ts

@@ -1,8 +1,12 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import turfArea from '@turf/area';
 import turfCentroid from '@turf/centroid';
-import { ClickEvent, Tooltip, ModeProps } from './types';
-import { FeatureCollection } from '../geojson-types';
-import { DrawPolygonMode } from './draw-polygon-mode';
+import {ClickEvent, Tooltip, ModeProps} from './types';
+import {FeatureCollection} from '../utils/geojson-types';
+import {DrawPolygonMode} from './draw-polygon-mode';
 
 const DEFAULT_TOOLTIPS = [];
 
@@ -10,7 +14,7 @@ export class MeasureAreaMode extends DrawPolygonMode {
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
     const propsWithoutEdit = {
       ...props,
-      onEdit: () => {},
+      onEdit: () => {}
     };
 
     super.handleClick(event, propsWithoutEdit);
@@ -19,7 +23,7 @@ export class MeasureAreaMode extends DrawPolygonMode {
   handleKeyUp(event: KeyboardEvent, props: ModeProps<FeatureCollection>): void {
     const propsWithoutEdit = {
       ...props,
-      onEdit: () => {},
+      onEdit: () => {}
     };
 
     super.handleKeyUp(event, propsWithoutEdit);
@@ -29,8 +33,8 @@ export class MeasureAreaMode extends DrawPolygonMode {
     const tentativeGuide = this.getTentativeGuide(props);
 
     if (tentativeGuide && tentativeGuide.geometry.type === 'Polygon') {
-      const { modeConfig } = props;
-      const { formatTooltip, measurementCallback } = modeConfig || {};
+      const {modeConfig} = props;
+      const {formatTooltip, measurementCallback} = modeConfig || {};
       const units = 'sq. m';
 
       const centroid = turfCentroid(tentativeGuide);
@@ -51,10 +55,9 @@ export class MeasureAreaMode extends DrawPolygonMode {
 
       return [
         {
-          // @ts-expect-error turf types diff
           position: centroid.geometry.coordinates,
-          text,
-        },
+          text
+        }
       ];
     }
     return DEFAULT_TOOLTIPS;

package/src/edit-modes/measure-distance-mode.ts

@@ -1,24 +1,28 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import turfDistance from '@turf/distance';
 import turfMidpoint from '@turf/midpoint';
-import { FeatureCollection, Position } from '../geojson-types';
+import {FeatureCollection, Position} from '../utils/geojson-types';
 import {
   ClickEvent,
   PointerMoveEvent,
   ModeProps,
   GuideFeatureCollection,
   Tooltip,
-  GuideFeature,
+  GuideFeature
 } from './types';
-import { getPickedEditHandle } from './utils';
-import { GeoJsonEditMode } from './geojson-edit-mode';
+import {getPickedEditHandle} from './utils';
+import {GeoJsonEditMode} from './geojson-edit-mode';
 
 export class MeasureDistanceMode extends GeoJsonEditMode {
   _isMeasuringSessionFinished = false;
   _currentTooltips: Tooltip[] = [];
   _currentDistance = 0;
 
-  _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig }) => {
-    const { turfOptions, measurementCallback } = modeConfig || {};
+  _calculateDistanceForTooltip = ({positionA, positionB, modeConfig}) => {
+    const {turfOptions, measurementCallback} = modeConfig || {};
     const distance = turfDistance(positionA, positionB, turfOptions);
 
     if (measurementCallback) {
@@ -29,7 +33,7 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
   };
 
   _formatTooltip(distance, modeConfig?) {
-    const { formatTooltip, turfOptions } = modeConfig || {};
+    const {formatTooltip, turfOptions} = modeConfig || {};
     const units = (turfOptions && turfOptions.units) || 'kilometers';
 
     let text;
@@ -44,8 +48,8 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
   }
 
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
-    const { modeConfig, data, onEdit } = props;
-    const { centerTooltipsOnLine = false } = modeConfig || {};
+    const {modeConfig, data, onEdit} = props;
+    const {centerTooltipsOnLine = false} = modeConfig || {};
 
     // restart measuring session
     if (this._isMeasuringSessionFinished) {
@@ -55,7 +59,7 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
       this._currentDistance = 0;
     }
 
-    const { picks } = event;
+    const {picks} = event;
     const clickedEditHandle = getPickedEditHandle(picks);
 
     let positionAdded = false;
@@ -79,19 +83,19 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
         this._currentDistance += this._calculateDistanceForTooltip({
           positionA: clickSequence[clickSequence.length - 2],
           positionB: clickSequence[clickSequence.length - 1],
-          modeConfig,
+          modeConfig
         });
 
         const tooltipPosition = centerTooltipsOnLine
           ? turfMidpoint(
-            clickSequence[clickSequence.length - 2],
-            clickSequence[clickSequence.length - 1]
-          ).geometry.coordinates
+              clickSequence[clickSequence.length - 2],
+              clickSequence[clickSequence.length - 1]
+            ).geometry.coordinates
           : event.mapCoords;
 
         this._currentTooltips.push({
-          position: tooltipPosition as Position,
-          text: this._formatTooltip(this._currentDistance, modeConfig),
+          position: tooltipPosition,
+          text: this._formatTooltip(this._currentDistance, modeConfig)
         });
       }
 
@@ -101,8 +105,8 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
         updatedData: data,
         editType: 'addTentativePosition',
         editContext: {
-          position: event.mapCoords,
-        },
+          position: event.mapCoords
+        }
       });
     }
   }
@@ -111,7 +115,7 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
     if (this._isMeasuringSessionFinished) return;
 
     event.stopPropagation();
-    const { key } = event;
+    const {key} = event;
 
     const clickSequenceLength = this.getClickSequence().length;
 
@@ -135,7 +139,7 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
   }
 
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
-    const { lastPointerMoveEvent } = props;
+    const {lastPointerMoveEvent} = props;
     const clickSequence = this.getClickSequence();
 
     const lastCoords =
@@ -145,19 +149,19 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
 
     const guides: GuideFeatureCollection = {
       type: 'FeatureCollection',
-      features: [],
+      features: []
     };
 
     if (clickSequence.length > 0) {
       guides.features.push({
         type: 'Feature',
         properties: {
-          guideType: 'tentative',
+          guideType: 'tentative'
         },
         geometry: {
           type: 'LineString',
-          coordinates: [...clickSequence, ...lastCoords],
-        },
+          coordinates: [...clickSequence, ...lastCoords]
+        }
       });
     }
 
@@ -167,12 +171,12 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
         guideType: 'editHandle',
         editHandleType: 'existing',
         featureIndex: -1,
-        positionIndexes: [index],
+        positionIndexes: [index]
       },
       geometry: {
         type: 'Point',
-        coordinates: clickedCoord,
-      },
+        coordinates: clickedCoord
+      }
     }));
 
     guides.features.push(...editHandles);
@@ -185,28 +189,28 @@ export class MeasureDistanceMode extends GeoJsonEditMode {
   }
 
   getTooltips(props: ModeProps<FeatureCollection>): Tooltip[] {
-    const { lastPointerMoveEvent, modeConfig } = props;
-    const { centerTooltipsOnLine = false } = modeConfig || {};
+    const {lastPointerMoveEvent, modeConfig} = props;
+    const {centerTooltipsOnLine = false} = modeConfig || {};
     const positions = this.getClickSequence();
 
     if (positions.length > 0 && lastPointerMoveEvent && !this._isMeasuringSessionFinished) {
       const distance = this._calculateDistanceForTooltip({
         positionA: positions[positions.length - 1],
         positionB: lastPointerMoveEvent.mapCoords,
-        modeConfig: props.modeConfig,
+        modeConfig: props.modeConfig
       });
 
       const tooltipPosition = centerTooltipsOnLine
         ? turfMidpoint(positions[positions.length - 1], lastPointerMoveEvent.mapCoords).geometry
-          .coordinates as Position
+            .coordinates
         : lastPointerMoveEvent.mapCoords;
 
       return [
         ...this._currentTooltips,
         {
           position: tooltipPosition,
-          text: this._formatTooltip(this._currentDistance + distance, modeConfig),
-        },
+          text: this._formatTooltip(this._currentDistance + distance, modeConfig)
+        }
       ];
     }
 

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

@@ -1,4 +1,8 @@
-import { point, lineString as toLineString } from '@turf/helpers';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {point, lineString as toLineString} from '@turf/helpers';
 import {
   recursivelyTraverseNestedArrays,
   nearestPointOnProjectedLine,
@@ -9,9 +13,9 @@ import {
   getPickedExistingEditHandle,
   getPickedIntermediateEditHandle,
   updateRectanglePosition,
-  NearestPointType,
+  NearestPointType
 } from './utils';
-import { LineString, Point, Polygon, FeatureCollection, FeatureOf } from '../geojson-types';
+import {LineString, Point, Polygon, FeatureCollection, FeatureOf} from '../utils/geojson-types';
 import {
   ModeProps,
   ClickEvent,
@@ -22,24 +26,24 @@ import {
   Viewport,
   GuideFeatureCollection,
   EditHandleFeature,
-  GuideFeature,
+  GuideFeature
 } from './types';
-import { GeoJsonEditMode } from './geojson-edit-mode';
-import { ImmutableFeatureCollection } from './immutable-feature-collection';
+import {GeoJsonEditMode} from './geojson-edit-mode';
+import {ImmutableFeatureCollection} from './immutable-feature-collection';
 
 export class ModifyMode extends GeoJsonEditMode {
   // eslint-disable-next-line complexity
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
     const handles: GuideFeature[] = [];
 
-    const { data, lastPointerMoveEvent } = props;
-    const { features } = data;
+    const {data, lastPointerMoveEvent} = props;
+    const {features} = data;
     const picks = lastPointerMoveEvent && lastPointerMoveEvent.picks;
     const mapCoords = lastPointerMoveEvent && lastPointerMoveEvent.mapCoords;
 
     for (const index of props.selectedIndexes) {
       if (index < features.length) {
-        const { geometry } = features[index];
+        const {geometry} = features[index];
         handles.push(...getEditHandlesForGeometry(geometry, index));
       } else {
         console.warn(`selectedFeatureIndexes out of range ${index}`); // eslint-disable-line no-console,no-undef
@@ -88,21 +92,21 @@ export class ModifyMode extends GeoJsonEditMode {
         // tack on the lone intermediate point to the set of handles
         if (intermediatePoint) {
           const {
-            geometry: { coordinates: position },
-            properties: { index },
-          } = intermediatePoint as NearestPointType;
+            geometry: {coordinates: position},
+            properties: {index}
+          } = intermediatePoint;
           handles.push({
             type: 'Feature',
             properties: {
               guideType: 'editHandle',
               editHandleType: 'intermediate',
               featureIndex: featureAsPick.index,
-              positionIndexes: [...positionIndexPrefix, index + 1],
+              positionIndexes: [...positionIndexPrefix, index + 1]
             },
             geometry: {
               type: 'Point',
-              coordinates: position,
-            },
+              coordinates: position
+            }
           });
         }
       }
@@ -110,7 +114,7 @@ export class ModifyMode extends GeoJsonEditMode {
 
     return {
       type: 'FeatureCollection',
-      features: handles,
+      features: handles
     };
   }
 
@@ -120,7 +124,7 @@ export class ModifyMode extends GeoJsonEditMode {
     inPoint: FeatureOf<Point>,
     viewport: Viewport | null | undefined
   ): NearestPointType {
-    const { coordinates } = line.geometry;
+    const {coordinates} = line.geometry;
     if (coordinates.some((coord) => coord.length > 2)) {
       if (viewport) {
         // This line has elevation, we need to use alternative algorithm
@@ -131,7 +135,7 @@ export class ModifyMode extends GeoJsonEditMode {
         'Editing 3D point but modeConfig.viewport not provided. Falling back to 2D logic.'
       );
     }
-    return nearestPointOnLine(line, inPoint, viewport!);
+    return nearestPointOnLine(line, inPoint, viewport);
   }
 
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
@@ -139,7 +143,7 @@ export class ModifyMode extends GeoJsonEditMode {
     const pickedIntermediateHandle = getPickedIntermediateEditHandle(event.picks);
 
     if (pickedExistingHandle) {
-      const { featureIndex, positionIndexes } = pickedExistingHandle.properties;
+      const {featureIndex, positionIndexes} = pickedExistingHandle.properties;
 
       let updatedData;
       try {
@@ -157,16 +161,16 @@ export class ModifyMode extends GeoJsonEditMode {
           editContext: {
             featureIndexes: [featureIndex],
             positionIndexes,
-            position: pickedExistingHandle.geometry.coordinates,
-          },
+            position: pickedExistingHandle.geometry.coordinates
+          }
         });
       }
     } else if (pickedIntermediateHandle) {
-      const { featureIndex, positionIndexes } = pickedIntermediateHandle.properties;
+      const {featureIndex, positionIndexes} = pickedIntermediateHandle.properties;
 
       const feature = props.data.features[featureIndex];
       const canAddPosition = !(
-        props.modeConfig?.lockRectangles && feature?.properties!.shape === 'Rectangle'
+        props.modeConfig?.lockRectangles && feature?.properties.shape === 'Rectangle'
       );
 
       if (canAddPosition) {
@@ -181,8 +185,8 @@ export class ModifyMode extends GeoJsonEditMode {
             editContext: {
               featureIndexes: [featureIndex],
               positionIndexes,
-              position: pickedIntermediateHandle.geometry.coordinates,
-            },
+              position: pickedIntermediateHandle.geometry.coordinates
+            }
           });
         }
       }
@@ -210,15 +214,15 @@ export class ModifyMode extends GeoJsonEditMode {
     const editedFeature = props.data.features[editHandleProperties.featureIndex];
 
     let updatedData;
-    if (props.modeConfig?.lockRectangles && editedFeature.properties!.shape === 'Rectangle') {
+    if (props.modeConfig?.lockRectangles && editedFeature.properties.shape === 'Rectangle') {
       const coordinates = updateRectanglePosition(
         editedFeature as FeatureOf<Polygon>,
-        editHandleProperties.positionIndexes![1],
+        editHandleProperties.positionIndexes[1],
         event.mapCoords
       ) as any; // TODO
 
       updatedData = new ImmutableFeatureCollection(props.data)
-        .replaceGeometry(editHandleProperties.featureIndex, { coordinates, type: 'Polygon' })
+        .replaceGeometry(editHandleProperties.featureIndex, {coordinates, type: 'Polygon'})
         .getObject();
     } else {
       updatedData = new ImmutableFeatureCollection(props.data)
@@ -236,8 +240,8 @@ export class ModifyMode extends GeoJsonEditMode {
       editContext: {
         featureIndexes: [editHandleProperties.featureIndex],
         positionIndexes: editHandleProperties.positionIndexes,
-        position: event.mapCoords,
-      },
+        position: event.mapCoords
+      }
     });
   }
 
@@ -267,8 +271,8 @@ export class ModifyMode extends GeoJsonEditMode {
         editContext: {
           featureIndexes: [editHandleProperties.featureIndex],
           positionIndexes: editHandleProperties.positionIndexes,
-          position: event.mapCoords,
-        },
+          position: event.mapCoords
+        }
       });
     }
   }

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

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import nearestPointOnLine from '@turf/nearest-point-on-line';
 import {point, lineString as toLineString} from '@turf/helpers';
 import circle from '@turf/circle';
@@ -10,8 +14,8 @@ import {
   getPickedEditHandle,
   NearestPointType
 } from './utils';
-import {LineString, Point, FeatureCollection, FeatureOf} from '../geojson-types';
-import {Viewport} from '../types';
+import {LineString, Point, FeatureCollection, FeatureOf} from '../utils/geojson-types';
+import {Viewport} from '../utils/types';
 import {
   ModeProps,
   PointerMoveEvent,
@@ -84,7 +88,7 @@ export class ResizeCircleMode extends GeoJsonEditMode {
           const {
             geometry: {coordinates: position},
             properties: {index}
-          } = intermediatePoint as NearestPointType;
+          } = intermediatePoint;
           handles.push({
             type: 'Feature',
             properties: {
@@ -138,7 +142,7 @@ export class ResizeCircleMode extends GeoJsonEditMode {
 
       const editHandleProperties = editHandle.properties;
 
-      const feature = this.getSelectedFeature(props)!;
+      const feature = this.getSelectedFeature(props);
       // @ts-expect-error turf types diff
       const center = turfCenter(feature).geometry.coordinates;
       const numberOfSteps = Object.entries(feature.geometry.coordinates[0]).length - 1;
@@ -150,7 +154,6 @@ export class ResizeCircleMode extends GeoJsonEditMode {
       const geometry = updatedFeature.geometry;
 
       const updatedData = new ImmutableFeatureCollection(props.data)
-        // @ts-expect-error turf types diff
         .replaceGeometry(editHandleProperties.featureIndex, geometry)
         .getObject();