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

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

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {
   ClickEvent,
   StartDraggingEvent,
@@ -5,10 +9,10 @@ import {
   PointerMoveEvent,
   ModeProps,
   GuideFeatureCollection,
-  TentativeFeature,
+  TentativeFeature
 } from './types';
-import { Polygon, FeatureCollection, FeatureOf, Position } from '../geojson-types';
-import { GeoJsonEditMode } from './geojson-edit-mode';
+import {Polygon, FeatureCollection, FeatureOf, Position} from '../utils/geojson-types';
+import {GeoJsonEditMode} from './geojson-edit-mode';
 
 export class TwoClickPolygonMode extends GeoJsonEditMode {
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
@@ -54,12 +58,12 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
       const feature: FeatureOf<Polygon> = {
         type: 'Feature',
         properties: {
-          shape: tentativeFeature.properties.shape,
+          shape: tentativeFeature.properties.shape
         },
         geometry: {
           type: 'Polygon',
-          coordinates: tentativeFeature.geometry.coordinates,
-        },
+          coordinates: tentativeFeature.geometry.coordinates
+        }
       };
       const editAction = this.getAddFeatureOrBooleanPolygonAction(feature, props);
 
@@ -72,12 +76,12 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
   }
 
   getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
-    const { lastPointerMoveEvent, modeConfig } = props;
+    const {lastPointerMoveEvent, modeConfig} = props;
     const clickSequence = this.getClickSequence();
 
     const guides: GuideFeatureCollection = {
       type: 'FeatureCollection',
-      features: [],
+      features: []
     };
 
     if (clickSequence.length === 0 || !lastPointerMoveEvent) {
@@ -94,9 +98,9 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
         type: 'Feature',
         properties: {
           shape: polygon.properties && polygon.properties.shape,
-          guideType: 'tentative',
+          guideType: 'tentative'
         },
-        geometry: polygon.geometry,
+        geometry: polygon.geometry
       });
     }
 
@@ -117,7 +121,7 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
   }
 
   createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
-    const { lastPointerMoveEvent } = props;
+    const {lastPointerMoveEvent} = props;
     const clickSequence = this.getClickSequence();
 
     const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];

package/src/edit-modes/types.ts

@@ -1,4 +1,8 @@
-import { Position, Point, Geometry, FeatureWithProps } from '../geojson-types';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Position, Point, Geometry, FeatureWithProps} from '../utils/geojson-types';
 
 export type ScreenCoordinates = [number, number];
 

package/src/edit-modes/utils.ts

@@ -1,11 +1,15 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import destination from '@turf/destination';
 import bearing from '@turf/bearing';
 import pointToLineDistance from '@turf/point-to-line-distance';
-import { flattenEach } from '@turf/meta';
-import { point, MultiLineString } from '@turf/helpers';
-import { getCoords } from '@turf/invariant';
+import {flattenEach} from '@turf/meta';
+import {point, MultiLineString} from '@turf/helpers';
+import {getCoords} from '@turf/invariant';
 import WebMercatorViewport from 'viewport-mercator-project';
-import { Viewport, Pick, EditHandleFeature, EditHandleType } from './types';
+import {Viewport, Pick, EditHandleFeature, EditHandleType} from './types';
 import {
   Geometry,
   Position,
@@ -14,10 +18,10 @@ import {
   Polygon,
   FeatureOf,
   FeatureWithProps,
-  AnyCoordinates,
-} from '../geojson-types';
+  AnyCoordinates
+} from '../utils/geojson-types';
 
-export type NearestPointType = FeatureWithProps<Point, { dist: number; index: number }>;
+export type NearestPointType = FeatureWithProps<Point, {dist: number; index: number}>;
 
 export function toDeckColor(
   color?: [number, number, number, number] | number,
@@ -78,7 +82,7 @@ export function generatePointsParallelToLinePoints(
 ): Position[] {
   const lineString: LineString = {
     type: 'LineString',
-    coordinates: [p1, p2],
+    coordinates: [p1, p2]
   };
   const pt = point(mapCoords);
   const ddistance = pointToLineDistance(pt, lineString);
@@ -150,12 +154,12 @@ export function nearestPointOnProjectedLine(
       minPointInfo = {
         index,
         x0: (B * (B * x - A * y) - A * C) / div,
-        y0: (A * (-B * x + A * y) - B * C) / div,
+        y0: (A * (-B * x + A * y) - B * C) / div
       };
     }
   });
-  // @ts-ignore
-  const { index, x0, y0 } = minPointInfo;
+  // @ts-expect-error TODO
+  const {index, x0, y0} = minPointInfo;
   const [x1, y1, z1 = 0] = projectedCoords[index - 1];
   const [x2, y2, z2 = 0] = projectedCoords[index];
 
@@ -169,14 +173,13 @@ export function nearestPointOnProjectedLine(
     type: 'Feature',
     geometry: {
       type: 'Point',
-      // @ts-expect-error
-      coordinates: wmViewport.unproject([x0, y0, z0]),
+      coordinates: wmViewport.unproject([x0, y0, z0])
     },
     properties: {
       // TODO: calculate the distance in proper units
       dist: minDistance,
-      index: index - 1,
-    },
+      index: index - 1
+    }
   };
 }
 
@@ -191,18 +194,18 @@ export function nearestPointOnLine<G extends LineString | MultiLineString>(
     mercator = new WebMercatorViewport(viewport);
   }
   let closestPoint: any = point([Infinity, Infinity], {
-    dist: Infinity,
+    dist: Infinity
   });
 
   if (!lines.geometry?.coordinates.length || lines.geometry?.coordinates.length < 2) {
     return closestPoint;
   }
 
-  // @ts-ignore
+  // @ts-expect-error TODO
   // eslint-disable-next-line max-statements, complexity
   flattenEach(lines, (line: any) => {
     const coords: any = getCoords(line);
-    // @ts-ignore
+    // @ts-expect-error TODO
     const pointCoords: any = getCoords(inPoint);
 
     let minDist;
@@ -293,7 +296,7 @@ export function nearestPointOnLine<G extends LineString | MultiLineString>(
     }
 
     // index needs to be -1 because we have to account for the shift from initial backscan
-    let snapPoint = { x, y, idx: segmentIdx - 1, to, from };
+    let snapPoint = {x, y, idx: segmentIdx - 1, to, from};
 
     if (mercator) {
       const pixelToLatLong = mercator.unproject([snapPoint.x, snapPoint.y]);
@@ -302,13 +305,13 @@ export function nearestPointOnLine<G extends LineString | MultiLineString>(
         y: pixelToLatLong[1],
         idx: segmentIdx - 1,
         to,
-        from,
+        from
       };
     }
 
     closestPoint = point([snapPoint.x, snapPoint.y], {
       dist: Math.abs(snapPoint.from - snapPoint.to),
-      index: snapPoint.idx,
+      index: snapPoint.idx
     });
   });
 
@@ -338,7 +341,7 @@ export function getPickedExistingEditHandle(
 ): EditHandleFeature | null | undefined {
   const handles = getPickedEditHandles(picks);
   return handles.find(
-    ({ properties }) => properties.featureIndex >= 0 && properties.editHandleType === 'existing'
+    ({properties}) => properties.featureIndex >= 0 && properties.editHandleType === 'existing'
   );
 }
 
@@ -347,7 +350,7 @@ export function getPickedIntermediateEditHandle(
 ): EditHandleFeature | null | undefined {
   const handles = getPickedEditHandles(picks);
   return handles.find(
-    ({ properties }) => properties.featureIndex >= 0 && properties.editHandleType === 'intermediate'
+    ({properties}) => properties.featureIndex >= 0 && properties.editHandleType === 'intermediate'
   );
 }
 
@@ -379,13 +382,13 @@ export function getEditHandlesForGeometry(
             guideType: 'editHandle',
             editHandleType,
             positionIndexes: [],
-            featureIndex,
+            featureIndex
           },
           geometry: {
             type: 'Point',
-            coordinates: geometry.coordinates,
-          },
-        },
+            coordinates: geometry.coordinates
+          }
+        }
       ];
       break;
     case 'MultiPoint':
@@ -449,12 +452,12 @@ function getEditHandlesForCoordinates(
         guideType: 'editHandle',
         positionIndexes: [...positionIndexPrefix, i],
         featureIndex,
-        editHandleType,
+        editHandleType
       },
       geometry: {
         type: 'Point',
-        coordinates: position,
-      },
+        coordinates: position
+      }
     });
   }
   return editHandles;

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

@@ -1,3 +1,7 @@
-import { GeoJsonEditMode } from './geojson-edit-mode';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {GeoJsonEditMode} from './geojson-edit-mode';
 
 export class ViewMode extends GeoJsonEditMode {}

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

@@ -1,14 +1,18 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-env browser */
 
-import type { UpdateParameters, DefaultProps } from '@deck.gl/core';
-import { GeoJsonLayer, ScatterplotLayer, IconLayer, TextLayer } from '@deck.gl/layers';
+import type {UpdateParameters, DefaultProps} from '@deck.gl/core';
+import {GeoJsonLayer, ScatterplotLayer, IconLayer, TextLayer} from '@deck.gl/layers';
 import {
   EditAction,
   ClickEvent,
   StartDraggingEvent,
   StopDraggingEvent,
   DraggingEvent,
-  PointerMoveEvent,
+  PointerMoveEvent
 } from '../edit-modes/types';
 
 import {ViewMode} from '../edit-modes/view-mode';
@@ -38,12 +42,12 @@ import {SnappableMode} from '../edit-modes/snappable-mode';
 import {TransformMode} from '../edit-modes/transform-mode';
 import {GeoJsonEditModeType} from '../edit-modes/geojson-edit-mode';
 
-import { Color } from '../types';
-import { PROJECTED_PIXEL_SIZE_MULTIPLIER } from '../constants';
+import {Color} from '../utils/types';
+import {PROJECTED_PIXEL_SIZE_MULTIPLIER} from '../constants';
 
-import EditableLayer, { EditableLayerProps } from './editable-layer';
-import EditablePathLayer from './editable-path-layer';
-import { Feature, FeatureCollection } from '../geojson-types';
+import {EditableLayer, EditableLayerProps} from './editable-layer';
+import {EditablePathLayer} from './editable-path-layer';
+import {Feature, FeatureCollection} from '../utils/geojson-types';
 
 const DEFAULT_LINE_COLOR: Color = [0x0, 0x0, 0x0, 0x99];
 const DEFAULT_FILL_COLOR: Color = [0x0, 0x0, 0x0, 0x90];
@@ -228,7 +232,7 @@ const defaultProps: DefaultProps<EditableGeojsonLayerProps<any>> = {
   getEditHandleIconAngle: 0,
 
   // misc
-  billboard: true,
+  billboard: true
 };
 
 // Mapping of mode name to mode class (for legacy purposes)
@@ -261,10 +265,10 @@ const modeNameMapping = {
   drawRectangleUsing3Points: DrawRectangleUsingThreePointsMode,
   drawEllipseUsing3Points: DrawEllipseUsingThreePointsMode,
   draw90DegreePolygon: Draw90DegreePolygonMode,
-  drawPolygonByDragging: DrawPolygonByDraggingMode,
+  drawPolygonByDragging: DrawPolygonByDraggingMode
 };
 
-export default class EditableGeoJsonLayer extends EditableLayer<
+export class EditableGeoJsonLayer extends EditableLayer<
   FeatureCollection,
   EditableGeojsonLayerProps<FeatureCollection>
 > {
@@ -310,8 +314,8 @@ export default class EditableGeoJsonLayer extends EditableLayer<
           billboard: this.props.billboard,
           updateTriggers: {
             // required to update dashed array attribute
-            all: [this.props.selectedFeatureIndexes, this.props.mode],
-          },
+            all: [this.props.selectedFeatureIndexes, this.props.mode]
+          }
         },
         'polygons-stroke': {
           billboard: this.props.billboard,
@@ -319,17 +323,17 @@ export default class EditableGeoJsonLayer extends EditableLayer<
           type: EditablePathLayer,
           updateTriggers: {
             // required to update dashed array attribute
-            all: [this.props.selectedFeatureIndexes, this.props.mode],
-          },
-        },
+            all: [this.props.selectedFeatureIndexes, this.props.mode]
+          }
+        }
       },
 
       updateTriggers: {
         getLineColor: [this.props.selectedFeatureIndexes, this.props.mode],
         getFillColor: [this.props.selectedFeatureIndexes, this.props.mode],
         getPointRadius: [this.props.selectedFeatureIndexes, this.props.mode],
-        getLineWidth: [this.props.selectedFeatureIndexes, this.props.mode],
-      },
+        getLineWidth: [this.props.selectedFeatureIndexes, this.props.mode]
+      }
     });
 
     let layers: any = [new GeoJsonLayer(subLayerProps)];
@@ -344,7 +348,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
 
     this.setState({
       selectedFeatures: [],
-      editHandles: [],
+      editHandles: []
     });
   }
 
@@ -358,8 +362,8 @@ export default class EditableGeoJsonLayer extends EditableLayer<
     return super.shouldUpdateState(opts) || opts.changeFlags.stateChanged;
   }
 
-  updateState({ props, oldProps, changeFlags, context }: UpdateParameters<this>) {
-    super.updateState({ oldProps, props, changeFlags, context });
+  updateState({props, oldProps, changeFlags, context}: UpdateParameters<this>) {
+    super.updateState({oldProps, props, changeFlags, context});
 
     if (changeFlags.propsOrDataChanged) {
       const modePropChanged = Object.keys(oldProps).length === 0 || props.mode !== oldProps.mode;
@@ -374,7 +378,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
           mode = modeNameMapping[props.mode];
           // eslint-disable-next-line no-console
           console.warn(
-            'Deprecated use of passing `mode` as a string. Pass the mode\'s class constructor instead.'
+            "Deprecated use of passing `mode` as a string. Pass the mode's class constructor instead."
           );
         } else {
           // Should be an instance of EditMode in this case
@@ -388,7 +392,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
         }
 
         if (mode !== this.state.mode) {
-          this.setState({ mode, cursor: null });
+          this.setState({mode, cursor: null});
         }
       }
     }
@@ -401,11 +405,10 @@ export default class EditableGeoJsonLayer extends EditableLayer<
     ) {
       // TODO: needs improved testing, i.e. checking for duplicates, NaNs, out of range numbers, ...
       const propsData = props.data;
-      // @ts-ignore error TS2339: Property 'features' does not exist on type 'never'
       selectedFeatures = props.selectedFeatureIndexes.map((elem) => propsData.features[elem]);
     }
 
-    this.setState({ selectedFeatures });
+    this.setState({selectedFeatures});
   }
 
   getModeProps(props: EditableGeojsonLayerProps<any>) {
@@ -420,11 +423,11 @@ export default class EditableGeoJsonLayer extends EditableLayer<
         // This supports double-click where we need to ensure that there's a re-render between the two clicks
         // even though the data wasn't changed, just the internal tentative feature.
         this.setNeedsUpdate();
-        props.onEdit!(editAction);
+        props.onEdit(editAction);
       },
       onUpdateCursor: (cursor: string | null | undefined) => {
-        this.setState({ cursor });
-      },
+        this.setState({cursor});
+      }
     };
   }
 
@@ -447,7 +450,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
     return this.state.selectedFeatures.includes(feature);
   }
 
-  getPickingInfo({ info, sourceLayer }: Record<string, any>) {
+  getPickingInfo({info, sourceLayer}: Record<string, any>) {
     if (sourceLayer.id.endsWith('guides')) {
       // If user is picking an editing handle, add additional data to the info
       info.isGuide = true;
@@ -480,14 +483,14 @@ export default class EditableGeoJsonLayer extends EditableLayer<
     const subLayerProps = {
       linestrings: {
         billboard: this.props.billboard,
-        autoHighlight: false,
+        autoHighlight: false
       },
       'polygons-fill': {
-        autoHighlight: false,
+        autoHighlight: false
       },
       'polygons-stroke': {
-        billboard: this.props.billboard,
-      },
+        billboard: this.props.billboard
+      }
     };
 
     if (this.props.editHandleType === 'icon') {
@@ -501,7 +504,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
         getSize: guideAccessor(this.props.getEditHandleIconSize),
         getColor: guideAccessor(this.props.getEditHandleIconColor),
         getAngle: guideAccessor(this.props.getEditHandleIconAngle),
-        billboard: this.props.billboard,
+        billboard: this.props.billboard
       };
     } else {
       subLayerProps['points-circle'] = {
@@ -515,7 +518,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
         getRadius: guideAccessor(this.props.getEditHandlePointRadius),
         getFillColor: guideAccessor(this.props.getEditHandlePointColor),
         getLineColor: guideAccessor(this.props.getEditHandlePointOutlineColor),
-        billboard: this.props.billboard,
+        billboard: this.props.billboard
       };
     }
 
@@ -536,7 +539,7 @@ export default class EditableGeoJsonLayer extends EditableLayer<
         getLineWidth: guideAccessor(this.props.getTentativeLineWidth),
         getFillColor: guideAccessor(this.props.getTentativeFillColor),
         pointType: this.props.editHandleType === 'icon' ? 'icon' : 'circle',
-        iconAtlas: this.props.editHandleIconAtlas,
+        iconAtlas: this.props.editHandleIconAtlas
       })
     );
 
@@ -551,8 +554,8 @@ export default class EditableGeoJsonLayer extends EditableLayer<
       getSize: DEFAULT_TOOLTIP_FONT_SIZE,
       ...this.getSubLayerProps({
         id: 'tooltips',
-        data: tooltips,
-      }),
+        data: tooltips
+      })
     });
 
     return [layer];
@@ -579,17 +582,17 @@ export default class EditableGeoJsonLayer extends EditableLayer<
   }
 
   onPointerMove(event: PointerMoveEvent): void {
-    this.setState({ lastPointerMoveEvent: event });
+    this.setState({lastPointerMoveEvent: event});
     this.getActiveMode().handlePointerMove(event, this.getModeProps(this.props) as any);
   }
 
-  getCursor({ isDragging }: { isDragging: boolean }):  null | 'grabbing' | 'grab' {
+  getCursor({isDragging}: {isDragging: boolean}): null | 'grabbing' | 'grab' {
     if (this.state === null || this.state === undefined) {
       // Layer in 'Awaiting state'
       return null;
     }
 
-    let { cursor } = this.state;
+    let {cursor} = this.state;
     if (!cursor) {
       // default cursor
       cursor = isDragging ? 'grabbing' : 'grab';

package/src/editable-layers/editable-h3-cluster-layer.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-env browser */
 
 import {H3ClusterLayer} from '@deck.gl/geo-layers';
@@ -5,8 +9,8 @@ import {DefaultProps} from '@deck.gl/core';
 // TODO: Fix H3 support.
 // import { polyfill, geoToH3 } from 'h3-js';
 import {PROJECTED_PIXEL_SIZE_MULTIPLIER} from '../constants';
-import EditableGeoJsonLayer from './editable-geojson-layer';
-import EditableLayer, {EditableLayerProps} from './editable-layer';
+import {EditableGeoJsonLayer} from './editable-geojson-layer';
+import {EditableLayer, EditableLayerProps} from './editable-layer';
 import {ViewMode} from '../edit-modes/view-mode';
 
 const DEFAULT_EDIT_MODE = ViewMode;
@@ -62,10 +66,7 @@ const defaultProps: DefaultProps<EditableH3ClusterLayerProps<any>> = {
   resolution: DEFAULT_H3_RESOLUTION
 };
 
-export default class EditableH3ClusterLayer extends EditableLayer<
-  any,
-  EditableH3ClusterLayerProps<any>
-> {
+export class EditableH3ClusterLayer extends EditableLayer<any, EditableH3ClusterLayerProps<any>> {
   static layerName = 'EditableH3ClusterLayer';
   static defaultProps = defaultProps;
 
@@ -129,16 +130,18 @@ export default class EditableH3ClusterLayer extends EditableLayer<
                 if (!modeConfig || !modeConfig.booleanOperation) {
                   // add new h3 cluster
                   updatedData.push(
-                    this.props.getEditedCluster!(this.state.tentativeHexagonIDs, null)
+                    this.props.getEditedCluster(this.state.tentativeHexagonIDs, null)
                   );
-                } else if (this.props.selectedIndexes!.length !== 1) {
+                } else if (this.props.selectedIndexes.length !== 1) {
                   // eslint-disable-next-line no-console,no-undef
                   console.warn('booleanOperation only supported for single cluster selection');
                 } else {
                   // they're affecting a selected cluster
                   let finalHexagonIDs: (string | number)[];
                   const committedHexagonIDs = new Set<string | number>(this.getSelectedHexIDs());
-                  const tentativeHexagonIDs = new Set<string | number>(this.state.tentativeHexagonIDs);
+                  const tentativeHexagonIDs = new Set<string | number>(
+                    this.state.tentativeHexagonIDs
+                  );
 
                   switch (modeConfig.booleanOperation) {
                     case 'union':
@@ -159,9 +162,9 @@ export default class EditableH3ClusterLayer extends EditableLayer<
                       break;
                   }
 
-                  const selectedIndex = this.props.selectedIndexes![0];
+                  const selectedIndex = this.props.selectedIndexes[0];
                   const existingCluster = this.props.data[selectedIndex];
-                  updatedData[selectedIndex] = this.props.getEditedCluster!(
+                  updatedData[selectedIndex] = this.props.getEditedCluster(
                     finalHexagonIDs,
                     existingCluster
                   );
@@ -171,7 +174,7 @@ export default class EditableH3ClusterLayer extends EditableLayer<
                   tentativeHexagonIDs: []
                 });
 
-                this.props.onEdit!({updatedData});
+                this.props.onEdit({updatedData});
 
                 break;
               default:
@@ -207,9 +210,9 @@ export default class EditableH3ClusterLayer extends EditableLayer<
   // using props.getHexagons to support multiple data types
   getSelectedHexIDs() {
     let cumulativeHexIDs: number[] = [];
-    this.props.selectedIndexes!.forEach((index) => {
+    this.props.selectedIndexes.forEach((index) => {
       const selectedCluster = this.props.data[index];
-      const hexIDs = this.props.getHexagons!(selectedCluster);
+      const hexIDs = this.props.getHexagons(selectedCluster);
       cumulativeHexIDs = cumulativeHexIDs.concat(hexIDs);
     });
     return cumulativeHexIDs;