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

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

@@ -0,0 +1,226 @@
+/* eslint-env browser */
+
+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';
+import EditableGeoJsonLayer from './editable-geojson-layer';
+import EditableLayer, {EditableLayerProps} 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: []
+};
+
+export type EditableH3ClusterLayerProps<DataT> = EditableLayerProps & {
+  data: DataT;
+  resolution?: number;
+  mode?: any;
+  modeConfig?: any;
+  selectedIndexes?: number[];
+  getEditedCluster?: (updatedHexagons: any[], existingCluster: any) => any;
+  getHexagons?: (d) => number[];
+  onEdit?: (updatedData?, editType?: string, featureIndexes?: number[], editContext?) => void;
+  filled?: boolean;
+  stroked?: boolean;
+  lineWidthScale?: number;
+  lineWidthMinPixels?: number;
+  lineWidthMaxPixels?: number;
+  lineWidthUnits?: string;
+};
+
+const defaultProps: DefaultProps<EditableH3ClusterLayerProps<any>> = {
+  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<
+  any,
+  EditableH3ClusterLayerProps<any>
+> {
+  static layerName = 'EditableH3ClusterLayer';
+  static defaultProps = defaultProps;
+
+  state: EditableLayer['state'] & {
+    cursor?: 'grabbing' | 'grab' | null;
+    tentativeHexagonIDs: string[];
+  } = 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: any = [
+      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: (string | number)[];
+                  const committedHexagonIDs = new Set<string | number>(this.getSelectedHexIDs());
+                  const tentativeHexagonIDs = new Set<string | number>(this.state.tentativeHexagonIDs);
+
+                  switch (modeConfig.booleanOperation) {
+                    case 'union':
+                    default:
+                      finalHexagonIDs = [
+                        ...new Set([...committedHexagonIDs, ...tentativeHexagonIDs])
+                      ];
+                      break;
+                    case 'intersection':
+                      finalHexagonIDs = [...committedHexagonIDs].filter((hexID: string | number) =>
+                        tentativeHexagonIDs.has(hexID)
+                      );
+                      break;
+                    case 'difference':
+                      finalHexagonIDs = [...committedHexagonIDs].filter(
+                        (hexID: string | number) => !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: number[] = [];
+    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}: {isDragging: boolean}): 'grabbing' | 'grab' {
+    let {cursor} = this.state || {};
+    if (!cursor) {
+      // default cursor
+      cursor = isDragging ? 'grabbing' : 'grab';
+    }
+    return cursor;
+  }
+}

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

@@ -0,0 +1,252 @@
+/* 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';
+
+const EVENT_TYPES = ['anyclick', 'pointermove', 'panstart', 'panmove', 'panend', 'keyup'];
+
+// TODO(v9): remove generic layer
+export type EditableLayerProps<DataType = any> = CompositeLayerProps & {
+  pickingRadius?: number;
+  pickingDepth?: number;
+};
+
+export default abstract class EditableLayer<
+  DataT = any,
+  ExtraPropsT = Record<string, unknown>
+> extends CompositeLayer<ExtraPropsT & Required<EditableLayerProps<DataT>>> {
+  static layerName = 'EditableLayer';
+
+  state: {_editableLayerState: any} = undefined!;
+
+  // Overridable interaction event handlers
+  onLayerClick(event: ClickEvent): void {
+    // default implementation - do nothing
+  }
+
+  onStartDragging(event: StartDraggingEvent): void {
+    // default implementation - do nothing
+  }
+
+  onStopDragging(event: StopDraggingEvent): void {
+    // default implementation - do nothing
+  }
+
+  onDragging(event: DraggingEvent): void {
+    // default implementation - do nothing
+  }
+
+  onPointerMove(event: PointerMoveEvent): void {
+    // default implementation - do nothing
+  }
+
+  onLayerKeyUp(event: KeyboardEvent): void {
+    // default implementation - do nothing;
+  }
+  // TODO: implement onCancelDragging (e.g. drag off screen)
+
+  initializeState() {
+    this.setState({
+      _editableLayerState: {
+        // Picked objects at the time the pointer went down
+        pointerDownPicks: null,
+        // Screen coordinates where the pointer went down
+        pointerDownScreenCoords: null,
+        // Ground coordinates where the pointer went down
+        pointerDownMapCoords: null,
+
+        // Keep track of the mjolnir.js event handler so it can be deregistered
+        eventHandler: this._forwardEventToCurrentLayer.bind(this),
+      },
+    });
+
+    this._addEventHandlers();
+  }
+
+  finalizeState() {
+    this._removeEventHandlers();
+  }
+
+  _addEventHandlers() {
+    // @ts-expect-error accessing protected props
+    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,
+      });
+    }
+  }
+
+  _removeEventHandlers() {
+    // @ts-expect-error accessing protected props
+    const { eventManager } = this.context.deck;
+    const { eventHandler } = this.state._editableLayerState;
+
+    for (const eventType of EVENT_TYPES) {
+      eventManager.off(eventType as any, eventHandler);
+    }
+  }
+
+  // A new layer instance is created on every render, so forward the event to the current layer
+  // 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()!;
+
+    // Use a naming convention to find the event handling function for this event type
+    const func = currentLayer[`_on${event.type}`].bind(currentLayer);
+    if (!func) {
+      console.warn(`no handler for mjolnir.js event ${event.type}`); // eslint-disable-line
+      return;
+    }
+    func(event);
+  }
+
+  _onanyclick({ srcEvent }: any) {
+    const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
+    const mapCoords = this.getMapCoords(screenCoords);
+
+    const picks = this.getPicks(screenCoords);
+
+    this.onLayerClick({
+      mapCoords,
+      screenCoords,
+      picks,
+      sourceEvent: srcEvent,
+    });
+  }
+
+  _onkeyup({ srcEvent }: { srcEvent: KeyboardEvent }) {
+    this.onLayerKeyUp(srcEvent);
+  }
+
+  _onpanstart(event: any) {
+    const screenCoords = this.getScreenCoords(event.srcEvent) as [number, number];
+    const mapCoords = this.getMapCoords(screenCoords);
+    const picks = this.getPicks(screenCoords);
+
+    this.setState({
+      _editableLayerState: {
+        ...this.state._editableLayerState,
+        pointerDownScreenCoords: screenCoords,
+        pointerDownMapCoords: mapCoords,
+        pointerDownPicks: picks,
+      },
+    });
+
+    this.onStartDragging({
+      picks,
+      screenCoords,
+      mapCoords,
+      pointerDownScreenCoords: screenCoords,
+      pointerDownMapCoords: mapCoords,
+      cancelPan: event.stopImmediatePropagation,
+      sourceEvent: event.srcEvent,
+    });
+  }
+
+  _onpanmove(event: any) {
+    const { srcEvent } = event;
+    const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
+    const mapCoords = this.getMapCoords(screenCoords);
+
+    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+      this.state._editableLayerState;
+
+    const picks = this.getPicks(screenCoords);
+
+    this.onDragging({
+      screenCoords,
+      mapCoords,
+      picks,
+      pointerDownPicks,
+      pointerDownScreenCoords,
+      pointerDownMapCoords,
+      sourceEvent: srcEvent,
+      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]
+      // ];
+      // controller._state.isDragging = false;
+    });
+  }
+
+  _onpanend({ srcEvent }: any) {
+    const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
+    const mapCoords = this.getMapCoords(screenCoords);
+
+    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+      this.state._editableLayerState;
+
+    const picks = this.getPicks(screenCoords);
+
+    this.onStopDragging({
+      picks,
+      screenCoords,
+      mapCoords,
+      pointerDownPicks,
+      pointerDownScreenCoords,
+      pointerDownMapCoords,
+      sourceEvent: srcEvent,
+    });
+
+    this.setState({
+      _editableLayerState: {
+        ...this.state._editableLayerState,
+        pointerDownScreenCoords: null,
+        pointerDownMapCoords: null,
+        pointerDownPicks: null,
+      },
+    });
+  }
+
+  _onpointermove(event: any) {
+    const { srcEvent } = event;
+    const screenCoords = this.getScreenCoords(srcEvent) as [number, number];
+    const mapCoords = this.getMapCoords(screenCoords);
+
+    const { pointerDownPicks, pointerDownScreenCoords, pointerDownMapCoords } =
+      this.state._editableLayerState;
+
+    const picks = this.getPicks(screenCoords);
+
+    this.onPointerMove({
+      screenCoords,
+      mapCoords,
+      picks,
+      pointerDownPicks,
+      pointerDownScreenCoords,
+      pointerDownMapCoords,
+      sourceEvent: srcEvent,
+      cancelPan: event.stopImmediatePropagation,
+    });
+  }
+
+  getPicks(screenCoords: [number, number]) {
+    return this.context.deck!.pickMultipleObjects({
+      x: screenCoords[0],
+      y: screenCoords[1],
+      layerIds: [this.props.id],
+      radius: this.props.pickingRadius,
+      depth: this.props.pickingDepth,
+    });
+  }
+
+  getScreenCoords(pointerEvent: any): Position {
+    return [
+      pointerEvent.clientX -
+        (this.context.gl.canvas as HTMLCanvasElement).getBoundingClientRect().left,
+      pointerEvent.clientY -
+        (this.context.gl.canvas as HTMLCanvasElement).getBoundingClientRect().top,
+    ];
+  }
+
+  getMapCoords(screenCoords: Position): Position {
+    return this.context.viewport.unproject([screenCoords[0], screenCoords[1]]) as Position;
+  }
+}

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

@@ -0,0 +1,51 @@
+import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+
+import { insertBefore } from '../utils';
+
+interface EditablePathLayerProps extends PathLayerProps<any> {
+  pickingLineWidthExtraPixels?: number;
+}
+
+const defaultProps = {
+  ...PathLayer.defaultProps,
+  pickingLineWidthExtraPixels: { type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER },
+};
+
+export default class EditablePathLayer extends PathLayer<any, EditablePathLayerProps> {
+  getShaders() {
+    const shaders = super.getShaders();
+
+    shaders.vs = insertBefore(
+      shaders.vs,
+      'vec3 width;',
+      `
+       if(bool(picking.isActive)){
+        widthPixels.xy += pickingLineWidthExtraPixels;
+       }
+      `
+    );
+
+    return {
+      ...shaders,
+      inject: {
+        ...(shaders.inject || {}),
+        'vs:#decl': (shaders.inject?.['vs:#decl'] || '').concat(
+          'uniform float pickingLineWidthExtraPixels;'
+        ),
+      },
+    };
+  }
+
+  draw(props) {
+    super.draw({
+      ...props,
+      uniforms: {
+        ...props.uniforms,
+        pickingLineWidthExtraPixels: this.props.pickingLineWidthExtraPixels,
+      },
+    });
+  }
+}
+
+EditablePathLayer.defaultProps = defaultProps;
+EditablePathLayer.layerName = 'EditablePathLayer';

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

@@ -0,0 +1,33 @@
+/* eslint-env browser */
+
+import { CompositeLayer } from '@deck.gl/core';
+import { ScatterplotLayer, LineLayer } from '@deck.gl/layers';
+
+const defaultProps = {};
+
+export default 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,
+      })
+    );
+
+    const lines = new LineLayer(
+      Object.assign({}, this.props, {
+        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],
+        getColor: [150, 150, 150, 200],
+        getStrokeWidth: 3,
+      })
+    );
+
+    return [handles, lines];
+  }
+}

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

@@ -0,0 +1,53 @@
+import { CompositeLayer, CompositeLayerProps, DefaultProps } from '@deck.gl/core';
+import { ScatterplotLayer, ScatterplotLayerProps } from '@deck.gl/layers';
+
+import { Color } from '../types';
+
+type JunctionScatterplotLayerProps = CompositeLayerProps &
+  Omit<ScatterplotLayerProps, 'getFillColor'> & {
+    getFillColor?: Color | ((d) => Color);
+    getStrokeColor?: Color | ((d) => Color);
+    getInnerRadius?: number | ((d) => number);
+  };
+
+export default class JunctionScatterplotLayer extends CompositeLayer<JunctionScatterplotLayerProps> {
+  static layerName = 'JunctionScatterplotLayer';
+  static defaultProps: DefaultProps<JunctionScatterplotLayerProps> = {
+    ...ScatterplotLayer.defaultProps,
+    getFillColor: (d) => [0, 0, 0, 255],
+    getStrokeColor: (d) => [255, 255, 255, 255],
+    getInnerRadius: (d) => 1,
+  };
+
+  renderLayers() {
+    const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
+
+    // data needs to be passed explicitly after deck.gl 5.3
+    return [
+      // the full circles
+      new ScatterplotLayer<any>({
+        ...this.props,
+        id: `${id}-full`,
+        data: this.props.data as any,
+        getLineColor: getStrokeColor,
+        updateTriggers: {
+          ...updateTriggers,
+          getStrokeColor: updateTriggers.getStrokeColor,
+        },
+      }), // the inner part
+      new ScatterplotLayer<any>({
+        ...this.props,
+        id: `${id}-inner`,
+        data: this.props.data as any,
+        getFillColor,
+        getRadius: getInnerRadius,
+        pickable: false,
+        updateTriggers: {
+          ...updateTriggers,
+          getFillColor: updateTriggers.getFillColor,
+          getRadius: updateTriggers.getInnerRadius,
+        },
+      }),
+    ];
+  }
+}

package/src/editable-layers/path-marker-layer/arrow-2d-geometry.ts

@@ -0,0 +1,61 @@
+import { Geometry } from '@luma.gl/engine';
+
+export default class Arrow2DGeometry extends Geometry {
+  constructor(opts = {}) {
+    super(
+      Object.assign({}, opts, {
+        attributes: getArrowAttributes(opts),
+        topology: 'triangle-list' as const
+      })
+    );
+  }
+}
+
+function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05 }) {
+  const texCoords = [
+    // HEAD
+    0.5,
+    1.0,
+    0,
+    0.5 - headSize / 2,
+    1.0 - headSize,
+    0,
+    0.5 + headSize / 2,
+    1.0 - headSize,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 + tailWidth / 2,
+    1.0 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    1.0 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    1.0 - headSize,
+    0,
+  ];
+
+  const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];
+
+  // Center and scale
+  const positions = new Array(texCoords.length);
+  for (let i = 0; i < texCoords.length / 3; i++) {
+    const i3 = i * 3;
+    positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;
+    positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;
+    positions[i3 + 2] = 0;
+  }
+  return {
+    positions: {size: 3, value: new Float32Array(positions)},
+    normals: {size: 3, value: new Float32Array(normals)},
+    texCoords: {size: 2, value: new Float32Array(texCoords)},
+  };
+}