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

package/dist/editable-layers/editable-geojson-layer.js

@@ -0,0 +1,450 @@
+/* eslint-env browser */
+import { GeoJsonLayer, ScatterplotLayer, IconLayer, TextLayer } from '@deck.gl/layers';
+import { ViewMode } from '../edit-modes/view-mode';
+import { TranslateMode } from '../edit-modes/translate-mode';
+import { ModifyMode } from '../edit-modes/modify-mode';
+import { ScaleMode } from '../edit-modes/scale-mode';
+import { RotateMode } from '../edit-modes/rotate-mode';
+import { DuplicateMode } from '../edit-modes/duplicate-mode';
+import { SplitPolygonMode } from '../edit-modes/split-polygon-mode';
+import { ExtrudeMode } from '../edit-modes/extrude-mode';
+import { ElevationMode } from '../edit-modes/elevation-mode';
+import { DrawPointMode } from '../edit-modes/draw-point-mode';
+import { DrawLineStringMode } from '../edit-modes/draw-line-string-mode';
+import { DrawPolygonMode } from '../edit-modes/draw-polygon-mode';
+import { DrawRectangleMode } from '../edit-modes/draw-rectangle-mode';
+import { DrawSquareMode } from '../edit-modes/draw-square-mode';
+import { DrawRectangleFromCenterMode } from '../edit-modes/draw-rectangle-from-center-mode';
+import { DrawSquareFromCenterMode } from '../edit-modes/draw-square-from-center-mode';
+import { DrawCircleFromCenterMode } from '../edit-modes/draw-circle-from-center-mode';
+import { DrawCircleByDiameterMode } from '../edit-modes/draw-circle-by-diameter-mode';
+import { DrawEllipseByBoundingBoxMode } from '../edit-modes/draw-ellipse-by-bounding-box-mode';
+import { DrawRectangleUsingThreePointsMode } from '../edit-modes/draw-rectangle-using-three-points-mode';
+import { DrawEllipseUsingThreePointsMode } from '../edit-modes/draw-ellipse-using-three-points-mode';
+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 { PROJECTED_PIXEL_SIZE_MULTIPLIER } from '../constants';
+import EditableLayer from './editable-layer';
+import EditablePathLayer from './editable-path-layer';
+const DEFAULT_LINE_COLOR = [0x0, 0x0, 0x0, 0x99];
+const DEFAULT_FILL_COLOR = [0x0, 0x0, 0x0, 0x90];
+const DEFAULT_SELECTED_LINE_COLOR = [0x0, 0x0, 0x0, 0xff];
+const DEFAULT_SELECTED_FILL_COLOR = [0x0, 0x0, 0x90, 0x90];
+const DEFAULT_TENTATIVE_LINE_COLOR = [0x90, 0x90, 0x90, 0xff];
+const DEFAULT_TENTATIVE_FILL_COLOR = [0x90, 0x90, 0x90, 0x90];
+const DEFAULT_EDITING_EXISTING_POINT_COLOR = [0xc0, 0x0, 0x0, 0xff];
+const DEFAULT_EDITING_INTERMEDIATE_POINT_COLOR = [0x0, 0x0, 0x0, 0x80];
+const DEFAULT_EDITING_SNAP_POINT_COLOR = [0x7c, 0x00, 0xc0, 0xff];
+const DEFAULT_EDITING_POINT_OUTLINE_COLOR = [0xff, 0xff, 0xff, 0xff];
+const DEFAULT_EDITING_EXISTING_POINT_RADIUS = 5;
+const DEFAULT_EDITING_INTERMEDIATE_POINT_RADIUS = 3;
+const DEFAULT_EDITING_SNAP_POINT_RADIUS = 7;
+const DEFAULT_TOOLTIP_FONT_SIZE = 32 * PROJECTED_PIXEL_SIZE_MULTIPLIER;
+const DEFAULT_EDIT_MODE = DrawPolygonMode;
+function guideAccessor(accessor) {
+    if (!accessor || typeof accessor !== 'function') {
+        return accessor;
+    }
+    return (guideMaybeWrapped) => accessor(unwrapGuide(guideMaybeWrapped));
+}
+// The object handed to us from deck.gl is different depending on the version of deck.gl used, unwrap as necessary
+function unwrapGuide(guideMaybeWrapped) {
+    if (guideMaybeWrapped.__source) {
+        return guideMaybeWrapped.__source.object;
+    }
+    else if (guideMaybeWrapped.sourceFeature) {
+        return guideMaybeWrapped.sourceFeature.feature;
+    }
+    // It is not wrapped, return as is
+    return guideMaybeWrapped;
+}
+function getEditHandleColor(handle) {
+    switch (handle.properties.editHandleType) {
+        case 'existing':
+            return DEFAULT_EDITING_EXISTING_POINT_COLOR;
+        case 'snap-source':
+            return DEFAULT_EDITING_SNAP_POINT_COLOR;
+        case 'intermediate':
+        default:
+            return DEFAULT_EDITING_INTERMEDIATE_POINT_COLOR;
+    }
+}
+function getEditHandleOutlineColor(handle) {
+    return DEFAULT_EDITING_POINT_OUTLINE_COLOR;
+}
+function getEditHandleRadius(handle) {
+    switch (handle.properties.editHandleType) {
+        case 'existing':
+            return DEFAULT_EDITING_EXISTING_POINT_RADIUS;
+        case 'snap':
+            return DEFAULT_EDITING_SNAP_POINT_RADIUS;
+        case 'intermediate':
+        default:
+            return DEFAULT_EDITING_INTERMEDIATE_POINT_RADIUS;
+    }
+}
+const defaultProps = {
+    mode: DEFAULT_EDIT_MODE,
+    // Edit and interaction events
+    onEdit: () => { },
+    pickable: true,
+    pickingRadius: 10,
+    pickingDepth: 5,
+    fp64: false,
+    filled: true,
+    stroked: true,
+    lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER,
+    lineWidthMinPixels: 1,
+    lineWidthMaxPixels: Number.MAX_SAFE_INTEGER,
+    pickingLineWidthExtraPixels: 0,
+    lineWidthUnits: 'pixels',
+    lineJointRounded: false,
+    lineCapRounded: false,
+    lineMiterLimit: 4,
+    pointRadiusScale: 1,
+    pointRadiusMinPixels: 2,
+    pointRadiusMaxPixels: Number.MAX_SAFE_INTEGER,
+    getLineColor: (feature, isSelected, mode) => isSelected ? DEFAULT_SELECTED_LINE_COLOR : DEFAULT_LINE_COLOR,
+    getFillColor: (feature, isSelected, mode) => isSelected ? DEFAULT_SELECTED_FILL_COLOR : DEFAULT_FILL_COLOR,
+    getRadius: (f) => (f && f.properties && f.properties.radius) || (f && f.properties && f.properties.size) || 1,
+    getLineWidth: (f) => (f && f.properties && f.properties.lineWidth) || 3,
+    // Tentative feature rendering
+    getTentativeLineColor: (f) => DEFAULT_TENTATIVE_LINE_COLOR,
+    getTentativeFillColor: (f) => DEFAULT_TENTATIVE_FILL_COLOR,
+    getTentativeLineWidth: (f) => (f && f.properties && f.properties.lineWidth) || 3,
+    editHandleType: 'point',
+    // point handles
+    editHandlePointRadiusScale: 1,
+    editHandlePointOutline: true,
+    editHandlePointStrokeWidth: 2,
+    editHandlePointRadiusUnits: 'pixels',
+    editHandlePointRadiusMinPixels: 4,
+    editHandlePointRadiusMaxPixels: 8,
+    getEditHandlePointColor: getEditHandleColor,
+    getEditHandlePointOutlineColor: getEditHandleOutlineColor,
+    getEditHandlePointRadius: getEditHandleRadius,
+    // icon handles
+    editHandleIconAtlas: null,
+    editHandleIconMapping: null,
+    editHandleIconSizeScale: 1,
+    editHandleIconSizeUnits: 'pixels',
+    getEditHandleIcon: (handle) => handle.properties.editHandleType,
+    getEditHandleIconSize: 10,
+    getEditHandleIconColor: getEditHandleColor,
+    getEditHandleIconAngle: 0,
+    // misc
+    billboard: true,
+};
+// Mapping of mode name to mode class (for legacy purposes)
+const modeNameMapping = {
+    view: ViewMode,
+    // Alter modes
+    modify: ModifyMode,
+    translate: new SnappableMode(new TranslateMode()),
+    transform: new SnappableMode(new TransformMode()),
+    scale: ScaleMode,
+    rotate: RotateMode,
+    duplicate: DuplicateMode,
+    split: SplitPolygonMode,
+    extrude: ExtrudeMode,
+    elevation: ElevationMode,
+    // Draw modes
+    drawPoint: DrawPointMode,
+    drawLineString: DrawLineStringMode,
+    drawPolygon: DrawPolygonMode,
+    drawRectangle: DrawRectangleMode,
+    drawSquare: DrawSquareMode,
+    drawRectangleFromCenter: DrawRectangleFromCenterMode,
+    drawSquareFromCenter: DrawSquareFromCenterMode,
+    drawCircleFromCenter: DrawCircleFromCenterMode,
+    drawCircleByBoundingBox: DrawCircleByDiameterMode,
+    drawEllipseByBoundingBox: DrawEllipseByBoundingBoxMode,
+    drawRectangleUsing3Points: DrawRectangleUsingThreePointsMode,
+    drawEllipseUsing3Points: DrawEllipseUsingThreePointsMode,
+    draw90DegreePolygon: Draw90DegreePolygonMode,
+    drawPolygonByDragging: DrawPolygonByDraggingMode,
+};
+export default class EditableGeoJsonLayer extends EditableLayer {
+    static layerName = 'EditableGeoJsonLayer';
+    static defaultProps = defaultProps;
+    state = undefined;
+    // setState: ($Shape<State>) => void;
+    renderLayers() {
+        const subLayerProps = this.getSubLayerProps({
+            id: 'geojson',
+            // Proxy most GeoJsonLayer props as-is
+            data: this.props.data,
+            fp64: this.props.fp64,
+            filled: this.props.filled,
+            stroked: this.props.stroked,
+            lineWidthScale: this.props.lineWidthScale,
+            lineWidthMinPixels: this.props.lineWidthMinPixels,
+            lineWidthMaxPixels: this.props.lineWidthMaxPixels,
+            lineWidthUnits: this.props.lineWidthUnits,
+            lineJointRounded: this.props.lineJointRounded,
+            lineCapRounded: this.props.lineCapRounded,
+            lineMiterLimit: this.props.lineMiterLimit,
+            pointRadiusScale: this.props.pointRadiusScale,
+            pointRadiusMinPixels: this.props.pointRadiusMinPixels,
+            pointRadiusMaxPixels: this.props.pointRadiusMaxPixels,
+            getLineColor: this.selectionAwareAccessor(this.props.getLineColor),
+            getFillColor: this.selectionAwareAccessor(this.props.getFillColor),
+            getPointRadius: this.selectionAwareAccessor(this.props.getRadius),
+            getLineWidth: this.selectionAwareAccessor(this.props.getLineWidth),
+            _subLayerProps: {
+                linestrings: {
+                    billboard: this.props.billboard,
+                    updateTriggers: {
+                        // required to update dashed array attribute
+                        all: [this.props.selectedFeatureIndexes, this.props.mode],
+                    },
+                },
+                'polygons-stroke': {
+                    billboard: this.props.billboard,
+                    pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels,
+                    type: EditablePathLayer,
+                    updateTriggers: {
+                        // required to update dashed array attribute
+                        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],
+            },
+        });
+        let layers = [new GeoJsonLayer(subLayerProps)];
+        layers = layers.concat(this.createGuidesLayers(), this.createTooltipsLayers());
+        return layers;
+    }
+    initializeState() {
+        super.initializeState();
+        this.setState({
+            selectedFeatures: [],
+            editHandles: [],
+        });
+    }
+    // TODO: is this the best way to properly update state from an outside event handler?
+    shouldUpdateState(opts) {
+        // console.log(
+        //   'shouldUpdateState',
+        //   opts.changeFlags.propsOrDataChanged,
+        //   opts.changeFlags.stateChanged
+        // );
+        return super.shouldUpdateState(opts) || opts.changeFlags.stateChanged;
+    }
+    updateState({ props, oldProps, changeFlags, context }) {
+        super.updateState({ oldProps, props, changeFlags, context });
+        if (changeFlags.propsOrDataChanged) {
+            const modePropChanged = Object.keys(oldProps).length === 0 || props.mode !== oldProps.mode;
+            if (modePropChanged) {
+                let mode;
+                if (typeof props.mode === 'function') {
+                    // They passed a constructor/class, so new it up
+                    const ModeConstructor = props.mode;
+                    mode = new ModeConstructor();
+                }
+                else if (typeof props.mode === 'string') {
+                    // Lookup the mode based on its name (for backwards compatibility)
+                    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.');
+                }
+                else {
+                    // Should be an instance of EditMode in this case
+                    mode = props.mode;
+                }
+                if (!mode) {
+                    console.warn(`No mode configured for ${String(props.mode)}`); // eslint-disable-line no-console,no-undef
+                    // Use default mode
+                    mode = new DEFAULT_EDIT_MODE();
+                }
+                if (mode !== this.state.mode) {
+                    this.setState({ mode, cursor: null });
+                }
+            }
+        }
+        let selectedFeatures = [];
+        if (Array.isArray(props.selectedFeatureIndexes) &&
+            typeof props.data === 'object' &&
+            'features' in props.data) {
+            // 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 });
+    }
+    getModeProps(props) {
+        return {
+            modeConfig: props.modeConfig,
+            data: props.data,
+            selectedIndexes: props.selectedFeatureIndexes,
+            lastPointerMoveEvent: this.state.lastPointerMoveEvent,
+            cursor: this.state.cursor,
+            onEdit: (editAction) => {
+                // Force a re-render
+                // 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);
+            },
+            onUpdateCursor: (cursor) => {
+                this.setState({ cursor });
+            },
+        };
+    }
+    selectionAwareAccessor(accessor) {
+        if (typeof accessor !== 'function') {
+            return accessor;
+        }
+        return (feature) => accessor(feature, this.isFeatureSelected(feature), this.props.mode);
+    }
+    isFeatureSelected(feature) {
+        if (!this.props.data || !this.props.selectedFeatureIndexes) {
+            return false;
+        }
+        if (!this.props.selectedFeatureIndexes.length) {
+            return false;
+        }
+        return this.state.selectedFeatures.includes(feature);
+    }
+    getPickingInfo({ info, sourceLayer }) {
+        if (sourceLayer.id.endsWith('guides')) {
+            // If user is picking an editing handle, add additional data to the info
+            info.isGuide = true;
+        }
+        return info;
+    }
+    _updateAutoHighlight(info) {
+        // Extra handling for guides
+        if (info?.sourceLayer) {
+            if (info.isGuide) {
+                for (const layer of info.sourceLayer.getSubLayers()) {
+                    layer.updateAutoHighlight(info);
+                }
+            }
+            else {
+                info.sourceLayer.updateAutoHighlight(info);
+            }
+        }
+    }
+    createGuidesLayers() {
+        const mode = this.getActiveMode();
+        const guides = mode.getGuides(this.getModeProps(this.props));
+        if (!guides || !guides.features.length) {
+            return [];
+        }
+        const subLayerProps = {
+            linestrings: {
+                billboard: this.props.billboard,
+                autoHighlight: false,
+            },
+            'polygons-fill': {
+                autoHighlight: false,
+            },
+            'polygons-stroke': {
+                billboard: this.props.billboard,
+            },
+        };
+        if (this.props.editHandleType === 'icon') {
+            subLayerProps['points-icon'] = {
+                type: IconLayer,
+                iconAtlas: this.props.editHandleIconAtlas,
+                iconMapping: this.props.editHandleIconMapping,
+                sizeUnits: this.props.editHandleIconSizeUnits,
+                sizeScale: this.props.editHandleIconSizeScale,
+                getIcon: guideAccessor(this.props.getEditHandleIcon),
+                getSize: guideAccessor(this.props.getEditHandleIconSize),
+                getColor: guideAccessor(this.props.getEditHandleIconColor),
+                getAngle: guideAccessor(this.props.getEditHandleIconAngle),
+                billboard: this.props.billboard,
+            };
+        }
+        else {
+            subLayerProps['points-circle'] = {
+                type: ScatterplotLayer,
+                radiusScale: this.props.editHandlePointRadiusScale,
+                stroked: this.props.editHandlePointOutline,
+                getLineWidth: this.props.editHandlePointStrokeWidth,
+                radiusUnits: this.props.editHandlePointRadiusUnits,
+                radiusMinPixels: this.props.editHandlePointRadiusMinPixels,
+                radiusMaxPixels: this.props.editHandlePointRadiusMaxPixels,
+                getRadius: guideAccessor(this.props.getEditHandlePointRadius),
+                getFillColor: guideAccessor(this.props.getEditHandlePointColor),
+                getLineColor: guideAccessor(this.props.getEditHandlePointOutlineColor),
+                billboard: this.props.billboard,
+            };
+        }
+        const layer = new GeoJsonLayer(this.getSubLayerProps({
+            id: 'guides',
+            data: guides,
+            fp64: this.props.fp64,
+            _subLayerProps: subLayerProps,
+            lineWidthScale: this.props.lineWidthScale,
+            lineWidthMinPixels: this.props.lineWidthMinPixels,
+            lineWidthMaxPixels: this.props.lineWidthMaxPixels,
+            lineWidthUnits: this.props.lineWidthUnits,
+            lineJointRounded: this.props.lineJointRounded,
+            lineCapRounded: this.props.lineCapRounded,
+            lineMiterLimit: this.props.lineMiterLimit,
+            getLineColor: guideAccessor(this.props.getTentativeLineColor),
+            getLineWidth: guideAccessor(this.props.getTentativeLineWidth),
+            getFillColor: guideAccessor(this.props.getTentativeFillColor),
+            pointType: this.props.editHandleType === 'icon' ? 'icon' : 'circle',
+            iconAtlas: this.props.editHandleIconAtlas,
+        }));
+        return [layer];
+    }
+    createTooltipsLayers() {
+        const mode = this.getActiveMode();
+        const tooltips = mode.getTooltips(this.getModeProps(this.props));
+        const layer = new TextLayer({
+            getSize: DEFAULT_TOOLTIP_FONT_SIZE,
+            ...this.getSubLayerProps({
+                id: 'tooltips',
+                data: tooltips,
+            }),
+        });
+        return [layer];
+    }
+    onLayerClick(event) {
+        this.getActiveMode().handleClick(event, this.getModeProps(this.props));
+    }
+    onLayerKeyUp(event) {
+        this.getActiveMode().handleKeyUp(event, this.getModeProps(this.props));
+    }
+    onStartDragging(event) {
+        this.getActiveMode().handleStartDragging(event, this.getModeProps(this.props));
+    }
+    onDragging(event) {
+        this.getActiveMode().handleDragging(event, this.getModeProps(this.props));
+    }
+    onStopDragging(event) {
+        this.getActiveMode().handleStopDragging(event, this.getModeProps(this.props));
+    }
+    onPointerMove(event) {
+        this.setState({ lastPointerMoveEvent: event });
+        this.getActiveMode().handlePointerMove(event, this.getModeProps(this.props));
+    }
+    getCursor({ isDragging }) {
+        if (this.state === null || this.state === undefined) {
+            // Layer in 'Awaiting state'
+            return null;
+        }
+        let { cursor } = this.state;
+        if (!cursor) {
+            // default cursor
+            cursor = isDragging ? 'grabbing' : 'grab';
+        }
+        return cursor;
+    }
+    getActiveMode() {
+        return this.state.mode;
+    }
+}

package/dist/editable-layers/editable-h3-cluster-layer.d.ts

@@ -0,0 +1,34 @@
+import { DefaultProps } from '@deck.gl/core';
+import EditableLayer, { EditableLayerProps } from './editable-layer';
+export type EditableH3ClusterLayerProps<DataT> = EditableLayerProps & {
+    data: DataT;
+    resolution?: number;
+    mode?: any;
+    modeConfig?: any;
+    selectedIndexes?: number[];
+    getEditedCluster?: (updatedHexagons: any[], existingCluster: any) => any;
+    getHexagons?: (d: any) => number[];
+    onEdit?: (updatedData?: any, editType?: string, featureIndexes?: number[], editContext?: any) => void;
+    filled?: boolean;
+    stroked?: boolean;
+    lineWidthScale?: number;
+    lineWidthMinPixels?: number;
+    lineWidthMaxPixels?: number;
+    lineWidthUnits?: string;
+};
+export default class EditableH3ClusterLayer extends EditableLayer<any, EditableH3ClusterLayerProps<any>> {
+    static layerName: string;
+    static defaultProps: DefaultProps<EditableH3ClusterLayerProps<any>>;
+    state: EditableLayer['state'] & {
+        cursor?: 'grabbing' | 'grab' | null;
+        tentativeHexagonIDs: string[];
+    };
+    initializeState(): void;
+    getDerivedHexagonIDs(coords: any): void;
+    getDerivedHexagonID(coords: any): void;
+    renderLayers(): any;
+    getSelectedHexIDs(): number[];
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): 'grabbing' | 'grab';
+}

package/dist/editable-layers/editable-h3-cluster-layer.js

@@ -0,0 +1,164 @@
+/* eslint-env browser */
+import { H3ClusterLayer } from '@deck.gl/geo-layers';
+// 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 from './editable-layer';
+import { ViewMode } from '../edit-modes/view-mode';
+const DEFAULT_EDIT_MODE = ViewMode;
+const DEFAULT_H3_RESOLUTION = 9;
+const EMPTY_FEATURE_COLLECTION = {
+    type: 'FeatureCollection',
+    features: []
+};
+const defaultProps = {
+    mode: DEFAULT_EDIT_MODE,
+    ...EditableGeoJsonLayer.defaultProps,
+    // h3 layer
+    data: [],
+    selectedIndexes: [],
+    filled: false,
+    stroked: true,
+    lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER,
+    lineWidthMinPixels: 1,
+    lineWidthMaxPixels: Number.MAX_SAFE_INTEGER,
+    lineWidthUnits: 'pixels',
+    getHexagons: (d) => d.hexIds,
+    getEditedCluster: (updatedHexagons, existingCluster) => {
+        if (existingCluster) {
+            return {
+                ...existingCluster,
+                hexIds: updatedHexagons
+            };
+        }
+        return {
+            hexIds: updatedHexagons
+        };
+    },
+    resolution: DEFAULT_H3_RESOLUTION
+};
+export default class EditableH3ClusterLayer extends EditableLayer {
+    static layerName = 'EditableH3ClusterLayer';
+    static defaultProps = defaultProps;
+    state = undefined;
+    initializeState() {
+        super.initializeState();
+        this.setState({
+            tentativeHexagonIDs: []
+        });
+    }
+    // convert array of (lng, lat) coords to cluster of hexes
+    getDerivedHexagonIDs(coords) {
+        throw new Error('not implemented'); // TODO
+        // return polyfill(coords, this.props.resolution, true);
+    }
+    // convert pair of (lng, lat) coords into single hex
+    getDerivedHexagonID(coords) {
+        throw new Error('not implemented'); // TODO
+        // return geoToH3(coords[1], coords[0], this.props.resolution);
+    }
+    renderLayers() {
+        const layers = [
+            new EditableGeoJsonLayer(this.getSubLayerProps({
+                id: 'editable-geojson',
+                mode: this.props.mode,
+                data: EMPTY_FEATURE_COLLECTION,
+                selectedFeatureIndexes: [],
+                onEdit: (editAction) => {
+                    const { editType, editContext } = editAction;
+                    switch (editType) {
+                        case 'updateTentativeFeature':
+                            // tentative feature updates, updated on every pointer move
+                            if (editContext.feature.geometry.type === 'Polygon') {
+                                const coords = editContext.feature.geometry.coordinates;
+                                const hexIDs = this.getDerivedHexagonIDs(coords);
+                                this.setState({ tentativeHexagonIDs: hexIDs });
+                            }
+                            else if (editContext.feature.geometry.type === 'Point') {
+                                const coords = editContext.feature.geometry.coordinates;
+                                const hexID = this.getDerivedHexagonID(coords);
+                                this.setState({ tentativeHexagonIDs: [hexID] });
+                            }
+                            break;
+                        case 'addFeature':
+                            const updatedData = [...this.props.data];
+                            const { modeConfig } = this.props;
+                            if (!modeConfig || !modeConfig.booleanOperation) {
+                                // add new h3 cluster
+                                updatedData.push(this.props.getEditedCluster(this.state.tentativeHexagonIDs, null));
+                            }
+                            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;
+                                const committedHexagonIDs = new Set(this.getSelectedHexIDs());
+                                const tentativeHexagonIDs = new Set(this.state.tentativeHexagonIDs);
+                                switch (modeConfig.booleanOperation) {
+                                    case 'union':
+                                    default:
+                                        finalHexagonIDs = [
+                                            ...new Set([...committedHexagonIDs, ...tentativeHexagonIDs])
+                                        ];
+                                        break;
+                                    case 'intersection':
+                                        finalHexagonIDs = [...committedHexagonIDs].filter((hexID) => tentativeHexagonIDs.has(hexID));
+                                        break;
+                                    case 'difference':
+                                        finalHexagonIDs = [...committedHexagonIDs].filter((hexID) => !tentativeHexagonIDs.has(hexID));
+                                        break;
+                                }
+                                const selectedIndex = this.props.selectedIndexes[0];
+                                const existingCluster = this.props.data[selectedIndex];
+                                updatedData[selectedIndex] = this.props.getEditedCluster(finalHexagonIDs, existingCluster);
+                            }
+                            this.setState({
+                                tentativeHexagonIDs: []
+                            });
+                            this.props.onEdit({ updatedData });
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            })),
+            new H3ClusterLayer(this.getSubLayerProps({
+                id: 'hexagons',
+                data: this.props.data,
+                getHexagons: this.props.getHexagons
+            })),
+            new H3ClusterLayer(this.getSubLayerProps({
+                id: 'tentative-hexagons',
+                data: [
+                    {
+                        hexIds: this.state.tentativeHexagonIDs
+                    }
+                ],
+                getHexagons: (d) => d.hexIds
+            }))
+        ];
+        return layers;
+    }
+    // because data is an array of hexagon data, we take the cumulative of all selected indexes,
+    // using props.getHexagons to support multiple data types
+    getSelectedHexIDs() {
+        let cumulativeHexIDs = [];
+        this.props.selectedIndexes.forEach((index) => {
+            const selectedCluster = this.props.data[index];
+            const hexIDs = this.props.getHexagons(selectedCluster);
+            cumulativeHexIDs = cumulativeHexIDs.concat(hexIDs);
+        });
+        return cumulativeHexIDs;
+    }
+    getCursor({ isDragging }) {
+        let { cursor } = this.state || {};
+        if (!cursor) {
+            // default cursor
+            cursor = isDragging ? 'grabbing' : 'grab';
+        }
+        return cursor;
+    }
+}