@deck.gl-community/editable-layers 9.0.2 → 9.1.0-beta.2

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

@@ -11,6 +11,7 @@ import {
 } from './types';
 import {Position, Polygon, FeatureOf, FeatureCollection} from '../utils/geojson-types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
+import {omit} from 'lodash';
 
 export class ThreeClickPolygonMode extends GeoJsonEditMode {
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
@@ -23,7 +24,11 @@ export class ThreeClickPolygonMode extends GeoJsonEditMode {
       tentativeFeature &&
       tentativeFeature.geometry.type === 'Polygon'
     ) {
-      const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry, props);
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(
+        tentativeFeature.geometry,
+        props,
+        omit(tentativeFeature.properties, 'guideType')
+      );
       this.resetClickSequence();
 
       if (editAction) {
@@ -70,6 +75,7 @@ export class ThreeClickPolygonMode extends GeoJsonEditMode {
         guides.features.push({
           type: 'Feature',
           properties: {
+            ...polygon.properties,
             guideType: 'tentative'
           },
           geometry: polygon.geometry

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

@@ -33,6 +33,10 @@ export class TransformMode extends CompositeMode {
     let translateMode: TranslateMode | null = null;
     const filteredModes: GeoJsonEditMode[] = [];
 
+    if (event.picks.length) {
+      event.cancelPan();
+    }
+
     // If the user selects a scaling edit handle that overlaps with part of the selected feature,
     // it is possible for both scale and translate actions to be triggered. This logic prevents
     // this simultaneous action trigger from happening by putting a higher priority on scaling

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

@@ -5,8 +5,9 @@
 import turfBearing from '@turf/bearing';
 import turfDistance from '@turf/distance';
 import clone from '@turf/clone';
-import {point, Feature as TurfFeature, Geometry as TurfGeometry} from '@turf/helpers';
-import WebMercatorViewport from 'viewport-mercator-project';
+import type {Feature as TurfFeature, Geometry as TurfGeometry} from '@turf/helpers';
+import {point} from '@turf/helpers';
+import {WebMercatorViewport} from 'viewport-mercator-project';
 import {FeatureCollection, Position, Geometry} from '../utils/geojson-types';
 import {
   PointerMoveEvent,
@@ -59,6 +60,7 @@ export class TranslateMode extends GeoJsonEditMode {
       return;
     }
 
+    event.cancelPan();
     this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection(props);
   }
 

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

@@ -13,6 +13,7 @@ import {
 } from './types';
 import {Polygon, FeatureCollection, FeatureOf, Position} from '../utils/geojson-types';
 import {GeoJsonEditMode} from './geojson-edit-mode';
+import {omit} from 'lodash';
 
 export class TwoClickPolygonMode extends GeoJsonEditMode {
   handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
@@ -57,9 +58,7 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
     ) {
       const feature: FeatureOf<Polygon> = {
         type: 'Feature',
-        properties: {
-          shape: tentativeFeature.properties.shape
-        },
+        properties: omit(tentativeFeature.properties, 'guideType'),
         geometry: {
           type: 'Polygon',
           coordinates: tentativeFeature.geometry.coordinates
@@ -97,7 +96,7 @@ export class TwoClickPolygonMode extends GeoJsonEditMode {
       guides.features.push({
         type: 'Feature',
         properties: {
-          shape: polygon.properties && polygon.properties.shape,
+          ...polygon.properties,
           guideType: 'tentative'
         },
         geometry: polygon.geometry

package/src/edit-modes/types.ts

@@ -18,6 +18,7 @@ export type Pick = {
   index: number;
   object?: any;
   isGuide?: boolean;
+  featureType?: string;
   featureIndex?: number;
   type?: string;
   isEditingHandle?: boolean | null;

package/src/edit-modes/utils.ts

@@ -2,14 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+/* eslint-disable no-shadow */
+
 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 type {MultiLineString} from '@turf/helpers';
+import {point} from '@turf/helpers';
 import {getCoords} from '@turf/invariant';
-import WebMercatorViewport from 'viewport-mercator-project';
-import {Viewport, Pick, EditHandleFeature, EditHandleType} from './types';
+import {WebMercatorViewport} from 'viewport-mercator-project';
+import {Viewport, Pick, EditHandleFeature, EditHandleType, StartDraggingEvent} from './types';
 import {
   Geometry,
   Position,
@@ -514,3 +517,7 @@ export function mapCoords(
     })
     .filter(Boolean);
 }
+
+export function shouldCancelPan(event: StartDraggingEvent) {
+  return event.picks.length && event.picks.find((p) => p.featureType === 'points');
+}

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

@@ -40,6 +40,7 @@ import {Draw90DegreePolygonMode} from '../edit-modes/draw-90degree-polygon-mode'
 import {DrawPolygonByDraggingMode} from '../edit-modes/draw-polygon-by-dragging-mode';
 import {SnappableMode} from '../edit-modes/snappable-mode';
 import {TransformMode} from '../edit-modes/transform-mode';
+import {DeleteMode} from '../edit-modes/delete-mode';
 import {GeoJsonEditModeType} from '../edit-modes/geojson-edit-mode';
 
 import {Color} from '../utils/types';
@@ -112,7 +113,7 @@ function getEditHandleRadius(handle) {
   }
 }
 
-export type EditableGeojsonLayerProps<DataT = any> = EditableLayerProps & {
+export type EditableGeoJsonLayerProps<DataT = any> = EditableLayerProps & {
   data: DataT;
   mode?: any;
   modeConfig?: any;
@@ -172,7 +173,7 @@ export type EditableGeojsonLayerProps<DataT = any> = EditableLayerProps & {
   billboard?: boolean;
 };
 
-const defaultProps: DefaultProps<EditableGeojsonLayerProps<any>> = {
+const defaultProps: DefaultProps<EditableGeoJsonLayerProps<any>> = {
   mode: DEFAULT_EDIT_MODE,
 
   // Edit and interaction events
@@ -250,6 +251,7 @@ const modeNameMapping = {
   split: SplitPolygonMode,
   extrude: ExtrudeMode,
   elevation: ElevationMode,
+  delete: DeleteMode,
 
   // Draw modes
   drawPoint: DrawPointMode,
@@ -270,7 +272,7 @@ const modeNameMapping = {
 
 export class EditableGeoJsonLayer extends EditableLayer<
   FeatureCollection,
-  EditableGeojsonLayerProps<FeatureCollection>
+  EditableGeoJsonLayerProps<FeatureCollection>
 > {
   static layerName = 'EditableGeoJsonLayer';
   static defaultProps = defaultProps;
@@ -411,7 +413,7 @@ export class EditableGeoJsonLayer extends EditableLayer<
     this.setState({selectedFeatures});
   }
 
-  getModeProps(props: EditableGeojsonLayerProps<any>) {
+  getModeProps(props: EditableGeoJsonLayerProps<any>) {
     return {
       modeConfig: props.modeConfig,
       data: props.data,

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

@@ -4,8 +4,8 @@
 
 /* eslint-env browser */
 
+import type {DefaultProps} from '@deck.gl/core';
 import {H3ClusterLayer} from '@deck.gl/geo-layers';
-import {DefaultProps} from '@deck.gl/core';
 // TODO: Fix H3 support.
 // import { polyfill, geoToH3 } from 'h3-js';
 import {PROJECTED_PIXEL_SIZE_MULTIPLIER} from '../constants';

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

@@ -4,7 +4,8 @@
 
 /* eslint-env browser */
 
-import {CompositeLayer, CompositeLayerProps} from '@deck.gl/core';
+import type {CompositeLayerProps} from '@deck.gl/core';
+import {CompositeLayer} from '@deck.gl/core';
 import {
   DraggingEvent,
   ClickEvent,
@@ -14,12 +15,13 @@ import {
 } from '../edit-modes/types';
 import {Position} from '../utils/geojson-types';
 
-const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
+const EVENT_TYPES = ['click', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
 
 // TODO(v9): remove generic layer
 export type EditableLayerProps<DataType = any> = CompositeLayerProps & {
   pickingRadius?: number;
   pickingDepth?: number;
+  onCancelPan?: () => void;
 };
 
 export abstract class EditableLayer<
@@ -116,7 +118,7 @@ export abstract class EditableLayer<
     func(event);
   }
 
-  _onanyclick({srcEvent}: any) {
+  _onclick({srcEvent}: any) {
     const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
     const mapCoords = this.getMapCoords(screenCoords);
 
@@ -154,7 +156,13 @@ export abstract class EditableLayer<
       mapCoords,
       pointerDownScreenCoords: screenCoords,
       pointerDownMapCoords: mapCoords,
-      cancelPan: event.stopImmediatePropagation,
+      cancelPan: () => {
+        if (this.props.onCancelPan) {
+          this.props.onCancelPan();
+        }
+
+        event.stopImmediatePropagation();
+      },
       sourceEvent: event.srcEvent
     });
   }

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

@@ -2,10 +2,31 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {PathLayer, PathLayerProps} from '@deck.gl/layers';
+import type {PathLayerProps} from '@deck.gl/layers';
+import {PathLayer} from '@deck.gl/layers';
+import type {ShaderModule} from '@luma.gl/shadertools';
 
 import {insertBefore} from '../utils/utils';
 
+const uniformBlock = `\
+uniform pickingLineWidthUniforms {
+  float extraPixels;
+} pickingLineWidth;
+`;
+
+export type PickingLineWidthProps = {
+  extraPixels: number;
+};
+
+export const pickingUniforms = {
+  name: 'pickingLineWidth',
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    extraPixels: 'f32'
+  }
+} as const satisfies ShaderModule<PickingLineWidthProps>;
+
 interface EditablePathLayerProps extends PathLayerProps<any> {
   pickingLineWidthExtraPixels?: number;
 }
@@ -24,30 +45,23 @@ export class EditablePathLayer extends PathLayer<any, EditablePathLayerProps> {
       'vec3 width;',
       `
        if(bool(picking.isActive)){
-        widthPixels.xy += pickingLineWidthExtraPixels;
+        widthPixels.xy += pickingLineWidth.extraPixels;
        }
       `
     );
 
     return {
       ...shaders,
-      inject: {
-        ...(shaders.inject || {}),
-        'vs:#decl': (shaders.inject?.['vs:#decl'] || '').concat(
-          'uniform float pickingLineWidthExtraPixels;'
-        )
-      }
+      modules: [...shaders.modules, pickingUniforms]
     };
   }
 
   draw(props) {
-    super.draw({
-      ...props,
-      uniforms: {
-        ...props.uniforms,
-        pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels
-      }
-    });
+    const {pickingLineWidthExtraPixels} = this.props;
+    const pickingProps: PickingLineWidthProps = {extraPixels: pickingLineWidthExtraPixels};
+    const model = this.state.model;
+    model.shaderInputs.setProps({pickingLineWidth: pickingProps});
+    super.draw(props);
   }
 }
 

package/src/editable-layers/junction-scatterplot-layer.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
-import {ScatterplotLayer, ScatterplotLayerProps} from '@deck.gl/layers';
+import type {CompositeLayerProps, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer} from '@deck.gl/core';
+import type {ScatterplotLayerProps} from '@deck.gl/layers';
+import {ScatterplotLayer} from '@deck.gl/layers';
 
 import {Color} from '../utils/types';
 

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

@@ -4,7 +4,8 @@
 
 /* eslint-env browser */
 
-import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
+import type {CompositeLayerProps, DefaultProps} from '@deck.gl/core';
+import {CompositeLayer} from '@deck.gl/core';
 import {PolygonLayer} from '@deck.gl/layers';
 import {polygon} from '@turf/helpers';
 import turfBuffer from '@turf/buffer';

package/src/index.ts

@@ -44,6 +44,8 @@ export type {EditMode} from './edit-modes/edit-mode';
 export type {GeoJsonEditModeType} from './edit-modes/geojson-edit-mode';
 export type {GeoJsonEditModeConstructor} from './edit-modes/geojson-edit-mode';
 
+export type {EditableGeoJsonLayerProps} from './editable-layers/editable-geojson-layer';
+
 export {GeoJsonEditMode} from './edit-modes/geojson-edit-mode';
 
 // Alter modes

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

@@ -11,7 +11,8 @@ import turfBearing from '@turf/bearing';
 import turfDistance from '@turf/distance';
 import turfDestination from '@turf/destination';
 import turfPolygonToLine from '@turf/polygon-to-line';
-import nearestPointOnLine, {NearestPointOnLine} from '@turf/nearest-point-on-line';
+import type {NearestPointOnLine} from '@turf/nearest-point-on-line';
+import nearestPointOnLine from '@turf/nearest-point-on-line';
 import {generatePointsParallelToLinePoints} from '../utils/utils';
 import {EditAction, ModeHandler} from './mode-handler';
 import {ClickEvent, PointerMoveEvent} from '../edit-modes/types';

package/src/shaderlib/color/color.ts

@@ -4,19 +4,28 @@
 
 import type {ShaderModule} from '@luma.gl/shadertools';
 
-/* eslint-disable camelcase */
-const INITIAL_STATE: Record<string, number> = {
-  color_uOpacity: 1.0,
-  color_uDesaturate: 0.0,
-  color_uBrightness: 1.0
+const uniformBlock = `\
+uniform colorUniforms {
+  float opacity;
+  float desaturate;
+  float brightness;
+} color;
+`;
+
+export type ColorProps = {
+  opacity: number;
+  desaturate: number;
+  brightness: number;
+};
+
+const INITIAL_STATE: ColorProps = {
+  opacity: 1.0,
+  desaturate: 0.0,
+  brightness: 1.0
 };
 
 function getUniforms(opts = INITIAL_STATE) {
-  const uniforms: Record<string, number> = {};
-  if (opts.opacity) {
-    uniforms.color_uOpacity = opts.opacity;
-  }
-  return uniforms;
+  return opts;
 }
 
 const vs = `\
@@ -28,9 +37,7 @@ color_setColor(vec4 color) {
 `;
 
 const fs = `\
-uniform float color_uOpacity;
-uniform float color_uDesaturate;
-uniform float color_uBrightness;
+${uniformBlock}
 
 in vec4 color_vColor;
 
@@ -40,14 +47,16 @@ vec4 color_getColor() {
   return color_vColor;
 }
 
-vec4 color_filterColor(vec4 color) {
+vec4 color_filterColor(vec4 inputColor) {
+  vec4 color = inputColor;
   // apply desaturation and brightness
-  if (color_uDesaturate > 0.01) {
-    float luminance = (color.r + color.g + color.b) * 0.333333333 + color_uBrightness;
-    color = vec4(mix(color.rgb, vec3(luminance), color_uDesaturate), color.a);
+  if (color.desaturate > 0.01) {
+    float luminance = (color.r + color.g + color.b) * 0.333333333 + color.brightness;
+    color = vec4(mix(color.rgb, vec3(luminance), color.desaturate), color.a);
+  }
 
   // Apply opacity
-  color = vec4(color.rgb, color.a * color_uOpacity);
+  color = vec4(color.rgb, color.a * color.opacity);
   return color;
 }
 `;
@@ -57,5 +66,10 @@ export const color = {
   name: 'color',
   vs,
   fs,
-  getUniforms
-} as const satisfies ShaderModule;
+  getUniforms,
+  uniformTypes: {
+    opacity: 'f32',
+    desaturate: 'f32',
+    brightness: 'f32'
+  }
+} as const satisfies ShaderModule<ColorProps>;

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

@@ -12,7 +12,7 @@ import type {
   Geometry as TurfGeometry
 } from '@turf/helpers';
 import {mapCoords} from '../edit-modes/utils';
-import type {AnyCoordinates, Position} from './geojson-types';
+import type {AnyCoordinates /* , Position */} from './geojson-types';
 
 // This function takes feature's center, moves it,
 // and builds new feature around it keeping the proportions
@@ -28,19 +28,19 @@ export function translateFromCenter(
   const movedCoordinates = mapCoords(
     feature.geometry.coordinates as AnyCoordinates,
     (coordinate) => {
-      const distance = turfRhumbDistance(
+      const rhumbDistance = turfRhumbDistance(
         initialCenterPoint.geometry.coordinates,
         coordinate as TurfPosition
       );
-      const direction = turfRhumbBearing(
+      const rhumbDirection = turfRhumbBearing(
         initialCenterPoint.geometry.coordinates,
         coordinate as TurfPosition
       );
 
       const movedPosition = turfRhumbDestination(
         movedCenterPoint.geometry.coordinates,
-        distance,
-        direction
+        rhumbDistance,
+        rhumbDirection
       ).geometry.coordinates;
       return movedPosition;
     }

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 'viewport-mercator-project';
 import {FeatureOf, FeatureWithProps, LineString, Point, Position} from './geojson-types';
 import {Viewport} from './types';
 
@@ -175,12 +175,12 @@ export function nearestPointOnProjectedLine(
 /**
  * Inserts toInsert string into base string before insertBefore string.
  * @param base A string to insert into.
- * @param insertBefore A sub string in `base` string to insert before.
+ * @param insertBeforeText A sub string in `base` string to insert before.
  * @param toInsert A string to insert.
  * @returns Combined string. `base` string if `insertBefore` string isn't found.
  */
-export function insertBefore(base: string, insertBefore: string, toInsert: string): string {
-  const at = base.indexOf(insertBefore);
+export function insertBefore(base: string, insertBeforeText: string, toInsert: string): string {
+  const at = base.indexOf(insertBeforeText);
   if (at < 0) {
     return base;
   }