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

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;

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

@@ -1,8 +1,18 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-env browser */
 
-import { CompositeLayer, CompositeLayerProps } from '@deck.gl/core';
-import { DraggingEvent, ClickEvent, StartDraggingEvent, StopDraggingEvent, PointerMoveEvent } from '../edit-modes/types';
-import { Position } from '../geojson-types';
+import {CompositeLayer, CompositeLayerProps} from '@deck.gl/core';
+import {
+  DraggingEvent,
+  ClickEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  PointerMoveEvent
+} from '../edit-modes/types';
+import {Position} from '../utils/geojson-types';
 
 const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
 
@@ -12,7 +22,7 @@ export type EditableLayerProps<DataType = any> = CompositeLayerProps & {
   pickingDepth?: number;
 };
 
-export default abstract class EditableLayer<
+export abstract class EditableLayer<
   DataT = any,
   ExtraPropsT = Record<string, unknown>
 > extends CompositeLayer<ExtraPropsT & Required<EditableLayerProps<DataT>>> {
@@ -57,8 +67,8 @@ export default abstract class EditableLayer<
         pointerDownMapCoords: null,
 
         // Keep track of the mjolnir.js event handler so it can be deregistered
-        eventHandler: this._forwardEventToCurrentLayer.bind(this),
-      },
+        eventHandler: this._forwardEventToCurrentLayer.bind(this)
+      }
     });
 
     this._addEventHandlers();
@@ -70,21 +80,21 @@ export default abstract class EditableLayer<
 
   _addEventHandlers() {
     // @ts-expect-error accessing protected props
-    const { eventManager } = this.context.deck;
-    const { eventHandler } = this.state._editableLayerState;
+    const {eventManager} = this.context.deck;
+    const {eventHandler} = this.state._editableLayerState;
 
     for (const eventType of EVENT_TYPES) {
       eventManager.on(eventType as any, eventHandler, {
         // give nebula a higher priority so that it can stop propagation to deck.gl's map panning handlers
-        priority: 100,
+        priority: 100
       });
     }
   }
 
   _removeEventHandlers() {
     // @ts-expect-error accessing protected props
-    const { eventManager } = this.context.deck;
-    const { eventHandler } = this.state._editableLayerState;
+    const {eventManager} = this.context.deck;
+    const {eventHandler} = this.state._editableLayerState;
 
     for (const eventType of EVENT_TYPES) {
       eventManager.off(eventType as any, eventHandler);
@@ -95,7 +105,7 @@ export default abstract class EditableLayer<
   // This means that the first layer instance will stick around to be the event listener, but will forward the event
   // to the latest layer instance.
   _forwardEventToCurrentLayer(event: any) {
-    const currentLayer = this.getCurrentLayer()!;
+    const currentLayer = this.getCurrentLayer();
 
     // Use a naming convention to find the event handling function for this event type
     const func = currentLayer[`_on${event.type}`].bind(currentLayer);
@@ -106,7 +116,7 @@ export default abstract class EditableLayer<
     func(event);
   }
 
-  _onanyclick({ srcEvent }: any) {
+  _onanyclick({srcEvent}: any) {
     const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
     const mapCoords = this.getMapCoords(screenCoords);
 
@@ -116,11 +126,11 @@ export default abstract class EditableLayer<
       mapCoords,
       screenCoords,
       picks,
-      sourceEvent: srcEvent,
+      sourceEvent: srcEvent
     });
   }
 
-  _onkeyup({ srcEvent }: { srcEvent: KeyboardEvent }) {
+  _onkeyup({srcEvent}: {srcEvent: KeyboardEvent}) {
     this.onLayerKeyUp(srcEvent);
   }
 
@@ -134,8 +144,8 @@ export default abstract class EditableLayer<
         ...this.state._editableLayerState,
         pointerDownScreenCoords: screenCoords,
         pointerDownMapCoords: mapCoords,
-        pointerDownPicks: picks,
-      },
+        pointerDownPicks: picks
+      }
     });
 
     this.onStartDragging({
@@ -145,16 +155,16 @@ export default abstract class EditableLayer<
       pointerDownScreenCoords: screenCoords,
       pointerDownMapCoords: mapCoords,
       cancelPan: event.stopImmediatePropagation,
-      sourceEvent: event.srcEvent,
+      sourceEvent: event.srcEvent
     });
   }
 
   _onpanmove(event: any) {
-    const { srcEvent } = event;
+    const {srcEvent} = event;
     const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
     const mapCoords = this.getMapCoords(screenCoords);
 
-    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+    const {pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords} =
       this.state._editableLayerState;
 
     const picks = this.getPicks(screenCoords);
@@ -167,7 +177,7 @@ export default abstract class EditableLayer<
       pointerDownScreenCoords,
       pointerDownMapCoords,
       sourceEvent: srcEvent,
-      cancelPan: event.stopImmediatePropagation,
+      cancelPan: event.stopImmediatePropagation
       // another (hacky) approach for cancelling map panning
       // const controller = this.context.deck.viewManager.controllers[
       //   Object.keys(this.context.deck.viewManager.controllers)[0]
@@ -176,11 +186,11 @@ export default abstract class EditableLayer<
     });
   }
 
-  _onpanend({ srcEvent }: any) {
+  _onpanend({srcEvent}: any) {
     const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
     const mapCoords = this.getMapCoords(screenCoords);
 
-    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+    const {pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords} =
       this.state._editableLayerState;
 
     const picks = this.getPicks(screenCoords);
@@ -192,7 +202,7 @@ export default abstract class EditableLayer<
       pointerDownPicks,
       pointerDownScreenCoords,
       pointerDownMapCoords,
-      sourceEvent: srcEvent,
+      sourceEvent: srcEvent
     });
 
     this.setState({
@@ -200,17 +210,17 @@ export default abstract class EditableLayer<
         ...this.state._editableLayerState,
         pointerDownScreenCoords: null,
         pointerDownMapCoords: null,
-        pointerDownPicks: null,
-      },
+        pointerDownPicks: null
+      }
     });
   }
 
   _onpointermove(event: any) {
-    const { srcEvent } = event;
+    const {srcEvent} = event;
     const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
     const mapCoords = this.getMapCoords(screenCoords);
 
-    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+    const {pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords} =
       this.state._editableLayerState;
 
     const picks = this.getPicks(screenCoords);
@@ -223,17 +233,17 @@ export default abstract class EditableLayer<
       pointerDownScreenCoords,
       pointerDownMapCoords,
       sourceEvent: srcEvent,
-      cancelPan: event.stopImmediatePropagation,
+      cancelPan: event.stopImmediatePropagation
     });
   }
 
   getPicks(screenCoords: [number, number]) {
-    return this.context.deck!.pickMultipleObjects({
+    return this.context.deck.pickMultipleObjects({
       x: screenCoords[0],
       y: screenCoords[1],
       layerIds: [this.props.id],
       radius: this.props.pickingRadius,
-      depth: this.props.pickingDepth,
+      depth: this.props.pickingDepth
     });
   }
 
@@ -242,7 +252,7 @@ export default abstract class EditableLayer<
       pointerEvent.clientX -
         (this.context.gl.canvas as HTMLCanvasElement).getBoundingClientRect().left,
       pointerEvent.clientY -
-        (this.context.gl.canvas as HTMLCanvasElement).getBoundingClientRect().top,
+        (this.context.gl.canvas as HTMLCanvasElement).getBoundingClientRect().top
     ];
   }
 

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

@@ -1,6 +1,10 @@
-import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-import { insertBefore } from '../utils';
+import {PathLayer, PathLayerProps} from '@deck.gl/layers';
+
+import {insertBefore} from '../utils/utils';
 
 interface EditablePathLayerProps extends PathLayerProps<any> {
   pickingLineWidthExtraPixels?: number;
@@ -8,10 +12,10 @@ interface EditablePathLayerProps extends PathLayerProps<any> {
 
 const defaultProps = {
   ...PathLayer.defaultProps,
-  pickingLineWidthExtraPixels: { type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER },
+  pickingLineWidthExtraPixels: {type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER}
 };
 
-export default class EditablePathLayer extends PathLayer<any, EditablePathLayerProps> {
+export class EditablePathLayer extends PathLayer<any, EditablePathLayerProps> {
   getShaders() {
     const shaders = super.getShaders();
 
@@ -31,8 +35,8 @@ export default class EditablePathLayer extends PathLayer<any, EditablePathLayerP
         ...(shaders.inject || {}),
         'vs:#decl': (shaders.inject?.['vs:#decl'] || '').concat(
           'uniform float pickingLineWidthExtraPixels;'
-        ),
-      },
+        )
+      }
     };
   }
 
@@ -41,8 +45,8 @@ export default class EditablePathLayer extends PathLayer<any, EditablePathLayerP
       ...props,
       uniforms: {
         ...props.uniforms,
-        pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels,
-      },
+        pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels
+      }
     });
   }
 }

package/src/editable-layers/elevated-edit-handle-layer.ts

@@ -1,18 +1,22 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-env browser */
 
-import { CompositeLayer } from '@deck.gl/core';
-import { ScatterplotLayer, LineLayer } from '@deck.gl/layers';
+import {CompositeLayer} from '@deck.gl/core';
+import {ScatterplotLayer, LineLayer} from '@deck.gl/layers';
 
 const defaultProps = {};
 
-export default class ElevatedEditHandleLayer extends CompositeLayer<any> {
+export class ElevatedEditHandleLayer extends CompositeLayer<any> {
   static layerName = 'ElevatedEditHandleLayer';
   static defaultProps = defaultProps;
   renderLayers() {
     const handles = new ScatterplotLayer(
       Object.assign({}, this.props, {
         id: `${this.props.id}-ScatterplotLayer`,
-        data: this.props.data,
+        data: this.props.data
       })
     );
 
@@ -21,10 +25,10 @@ export default class ElevatedEditHandleLayer extends CompositeLayer<any> {
         id: `${this.props.id}-LineLayer`,
         data: this.props.data,
         pickable: false,
-        getSourcePosition: ({ position }) => [position[0], position[1], 0],
-        getTargetPosition: ({ position }) => [position[0], position[1], position[2] || 0],
+        getSourcePosition: ({position}) => [position[0], position[1], 0],
+        getTargetPosition: ({position}) => [position[0], position[1], position[2] || 0],
         getColor: [150, 150, 150, 200],
-        getStrokeWidth: 3,
+        getStrokeWidth: 3
       })
     );