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

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

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';