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

package/src/geojson-types.ts

@@ -0,0 +1,89 @@
+// Geometry types
+
+export type Position = [number, number] | [number, number, number];
+export type PointCoordinates = Position;
+export type LineStringCoordinates = Position[];
+export type PolygonCoordinates = Position[][];
+export type MultiPointCoordinates = Position[];
+export type MultiLineStringCoordinates = Position[][];
+export type MultiPolygonCoordinates = Position[][][];
+
+export type AnyCoordinates =
+  | PointCoordinates
+  | LineStringCoordinates
+  | PolygonCoordinates
+  | MultiPointCoordinates
+  | MultiLineStringCoordinates
+  | MultiPolygonCoordinates;
+
+export type Point = {
+  type: 'Point';
+  coordinates: PointCoordinates;
+};
+
+export type LineString = {
+  type: 'LineString';
+  coordinates: LineStringCoordinates;
+};
+
+export type Polygon = {
+  type: 'Polygon';
+  coordinates: PolygonCoordinates;
+};
+
+export type MultiPoint = {
+  type: 'MultiPoint';
+  coordinates: MultiPointCoordinates;
+};
+
+export type MultiLineString = {
+  type: 'MultiLineString';
+  coordinates: MultiLineStringCoordinates;
+};
+
+export type MultiPolygon = {
+  type: 'MultiPolygon';
+  coordinates: MultiPolygonCoordinates;
+};
+
+export type Geometry = Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon;
+
+export type Polygonal = Polygon | MultiPolygon;
+
+// Feature types
+
+export type BoundingBoxArray = [number, number, number, number];
+
+export type FeatureOf<T extends Geometry> = {
+  type: 'Feature';
+  geometry: T;
+  properties?: {
+    [key: string]: any;
+  };
+  id?: string | number;
+  bbox?: BoundingBoxArray;
+};
+
+export type FeatureWithProps<T extends Geometry, P> = {
+  type: 'Feature';
+  geometry: T;
+  properties: P;
+};
+
+export type Feature =
+  | FeatureOf<Point>
+  | FeatureOf<LineString>
+  | FeatureOf<Polygon>
+  | FeatureOf<MultiPoint>
+  | FeatureOf<MultiLineString>
+  | FeatureOf<MultiPolygon>;
+
+export type FeatureCollection = {
+  type: 'FeatureCollection';
+  features: Feature[];
+  properties?: {};
+  id?: string | number;
+  bbox?: BoundingBoxArray;
+};
+
+export type AnyGeoJson = Feature | FeatureCollection;

package/src/index.ts

@@ -0,0 +1,125 @@
+export { ArrowStyles, DEFAULT_ARROWS, MAX_ARROWS } from './lib/style';
+export { SELECTION_TYPE } from './lib/deck-renderer/deck-drawer';
+
+export { default as Feature } from './lib/feature';
+export { default as LayerMouseEvent } from './lib/layer-mouse-event';
+
+export { default as NebulaLayer } from './lib/nebula-layer';
+export { default as JunctionsLayer } from './lib/layers/junctions-layer';
+export { default as TextsLayer } from './lib/layers/texts-layer';
+export { default as SegmentsLayer } from './lib/layers/segments-layer';
+
+export { default as NebulaCore } from './lib/nebula';
+
+export { PROJECTED_PIXEL_SIZE_MULTIPLIER } from './lib/constants';
+
+// Utils
+export { toDeckColor } from './utils';
+
+// Types
+export type { Color, Style, Viewport } from './types';
+
+// Layers
+export { default as EditableGeoJsonLayer } from './editable-layers/editable-geojson-layer';
+export { default as EditableH3ClusterLayer } from './editable-layers/editable-h3-cluster-layer';
+export { default as SelectionLayer } from './editable-layers/selection-layer';
+export { default as ElevatedEditHandleLayer } from './editable-layers/elevated-edit-handle-layer';
+
+// Layers moved from deck.gl
+export { default as PathOutlineLayer } from './editable-layers/path-outline-layer/path-outline-layer';
+export { default as PathMarkerLayer } from './editable-layers/path-marker-layer/path-marker-layer';
+export { default as JunctionScatterplotLayer } from './editable-layers/junction-scatterplot-layer';
+
+
+// Types
+
+import * as utils from './utils';
+
+export { utils };
+
+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 { GeoJsonEditMode } from './edit-modes/geojson-edit-mode';
+
+// Alter modes
+export { ModifyMode } from './edit-modes/modify-mode';
+export { ResizeCircleMode } from './edit-modes/resize-circle-mode';
+export { TranslateMode } from './edit-modes/translate-mode';
+export { ScaleMode } from './edit-modes/scale-mode';
+export { RotateMode } from './edit-modes/rotate-mode';
+export { DuplicateMode } from './edit-modes/duplicate-mode';
+export { ExtendLineStringMode } from './edit-modes/extend-line-string-mode';
+export { SplitPolygonMode } from './edit-modes/split-polygon-mode';
+export { ExtrudeMode } from './edit-modes/extrude-mode';
+export { ElevationMode } from './edit-modes/elevation-mode';
+export { TransformMode } from './edit-modes/transform-mode';
+
+// Draw modes
+export { DrawPointMode } from './edit-modes/draw-point-mode';
+export { DrawLineStringMode } from './edit-modes/draw-line-string-mode';
+export { DrawPolygonMode } from './edit-modes/draw-polygon-mode';
+export { DrawRectangleMode } from './edit-modes/draw-rectangle-mode';
+export { DrawSquareMode } from './edit-modes/draw-square-mode';
+export { DrawRectangleFromCenterMode } from './edit-modes/draw-rectangle-from-center-mode';
+export { DrawSquareFromCenterMode } from './edit-modes/draw-square-from-center-mode';
+export { DrawCircleByDiameterMode } from './edit-modes/draw-circle-by-diameter-mode';
+export { DrawCircleFromCenterMode } from './edit-modes/draw-circle-from-center-mode';
+export { DrawEllipseByBoundingBoxMode } from './edit-modes/draw-ellipse-by-bounding-box-mode';
+export { DrawEllipseUsingThreePointsMode } from './edit-modes/draw-ellipse-using-three-points-mode';
+export { DrawRectangleUsingThreePointsMode } from './edit-modes/draw-rectangle-using-three-points-mode';
+export { Draw90DegreePolygonMode } from './edit-modes/draw-90degree-polygon-mode';
+export { DrawPolygonByDraggingMode } from './edit-modes/draw-polygon-by-dragging-mode';
+export { ImmutableFeatureCollection } from './edit-modes/immutable-feature-collection';
+
+// Other modes
+export { ViewMode } from './edit-modes/view-mode';
+export { MeasureDistanceMode } from './edit-modes/measure-distance-mode';
+export { MeasureAreaMode } from './edit-modes/measure-area-mode';
+export { MeasureAngleMode } from './edit-modes/measure-angle-mode';
+export { CompositeMode } from './edit-modes/composite-mode';
+export { SnappableMode } from './edit-modes/snappable-mode';
+
+// Experimental
+export { default as _memoize } from './memoize';
+
+export type {
+  ScreenCoordinates,
+  EditAction,
+  Pick,
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  // Viewport,
+  Tooltip,
+} from './edit-modes/types';
+
+export type {
+  Position,
+  PointCoordinates,
+  LineStringCoordinates,
+  PolygonCoordinates,
+  MultiPointCoordinates,
+  MultiLineStringCoordinates,
+  MultiPolygonCoordinates,
+  AnyCoordinates,
+  Point,
+  LineString,
+  Polygon,
+  MultiPoint,
+  MultiLineString,
+  MultiPolygon,
+  Geometry,
+  Polygonal,
+  BoundingBoxArray,
+  FeatureOf,
+  FeatureWithProps,
+  // Feature,
+  FeatureCollection,
+  AnyGeoJson,
+} from './geojson-types';

package/src/lib/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * A multiplier for screen-space width/scale for Arc, Line, Icon and Text layers.
+ * Required in order to maintain the same appearance after upgrading to deck.gl v8.5.
+ * https://github.com/visgl/deck.gl/blob/master/docs/upgrade-guide.md
+ */
+export const PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;

package/src/lib/deck-renderer/deck-cache.ts

@@ -0,0 +1,61 @@
+export default class DeckCache<TORIG, TCONV> {
+  objects: TCONV[];
+  originals: TORIG[];
+  updateTrigger: number;
+  _idToPosition: Map<string, number>;
+  _getData: () => TORIG[];
+  _convert: (arg0: TORIG) => TCONV;
+
+  constructor(getData: () => TORIG[], convert: (arg0: TORIG) => TCONV) {
+    this.objects = [];
+    this.originals = [];
+    this.updateTrigger = 0;
+
+    this._idToPosition = new Map();
+    this._getData = getData;
+    this._convert = convert;
+  }
+
+  updateAllDeckObjects() {
+    if (!this._getData || !this._convert) return;
+
+    this.originals.length = 0;
+    this.objects.length = 0;
+    this._idToPosition.clear();
+
+    this._getData().forEach((d) => {
+      this._idToPosition.set((d as any).id, this.objects.length);
+      this.originals.push(d);
+      this.objects.push(this._convert(d));
+    });
+
+    this.triggerUpdate();
+  }
+
+  updateDeckObjectsByIds(ids: string[]) {
+    if (!this._getData || !this._convert) return;
+
+    ids.forEach((id) => {
+      const p = this._idToPosition.get(id);
+      if (p !== undefined) {
+        this.objects[p] = this._convert(this.originals[p]);
+      }
+    });
+
+    this.triggerUpdate();
+  }
+
+  triggerUpdate() {
+    this.updateTrigger++;
+  }
+
+  getDeckObjectById(id: string): TCONV | null | undefined {
+    const p = this._idToPosition.get(id);
+    return p !== undefined ? this.objects[p] : null;
+  }
+
+  getOriginalById(id: string): TORIG | null | undefined {
+    const p = this._idToPosition.get(id);
+    return p !== undefined ? this.originals[p] : null;
+  }
+}

package/src/lib/deck-renderer/deck-drawer.ts

@@ -0,0 +1,263 @@
+import { PolygonLayer } from '@deck.gl/layers';
+import { point, polygon } from '@turf/helpers';
+import turfBbox from '@turf/bbox';
+import turfBboxPolygon from '@turf/bbox-polygon';
+import turfBuffer from '@turf/buffer';
+import turfDifference from '@turf/difference';
+import turfDistance from '@turf/distance';
+
+import { Color } from '../../types';
+
+const POLYGON_LINE_COLOR = [0, 255, 0, 255];
+const POLYGON_FILL_COLOR = [255, 255, 255, 90];
+const POLYGON_LINE_WIDTH = 2;
+// const POLYGON_DASHES = [20, 20];
+const POLYGON_THRESHOLD = 0.01;
+const EXPANSION_KM = 10;
+const LAYER_ID_VIEW = 'DeckDrawerView';
+const LAYER_ID_PICK = 'DeckDrawerPick';
+
+export const SELECTION_TYPE = {
+  NONE: null,
+  RECTANGLE: 'rectangle',
+  POLYGON: 'polygon',
+};
+
+export default class DeckDrawer {
+  nebula: Record<string, any>;
+  usePolygon: boolean;
+  validPolygon: boolean;
+  landPoints: [number, number][];
+  mousePoints: [number, number][];
+
+  constructor(nebula: Record<string, any>) {
+    this.nebula = nebula;
+    this.usePolygon = false;
+    this.validPolygon = true;
+    this.landPoints = [];
+    this.mousePoints = [];
+  }
+
+  _getLayerIds() {
+    // TODO: sort by mouse priority
+    return this.nebula.deckgl.props.layers
+      .filter((l) => l && l.props && l.props.nebulaLayer && l.props.nebulaLayer.enableSelection)
+      .map((l) => l.id);
+  }
+
+  _selectFromPickingInfos(pickingInfos: Record<string, any>[]) {
+    const objects = pickingInfos.map(
+      ({ layer, index, object }) =>
+        object.original || layer.props.nebulaLayer.deckCache.originals[index]
+    );
+    this.nebula.props.onSelection(objects);
+  }
+
+  _getBoundingBox(): Record<string, any> {
+    const { mousePoints } = this;
+    const allX = mousePoints.map((mousePoint) => mousePoint[0]);
+    const allY = mousePoints.map((mousePoint) => mousePoint[1]);
+    const x = Math.min(...allX);
+    const y = Math.min(...allY);
+    const maxX = Math.max(...allX);
+    const maxY = Math.max(...allY);
+
+    return { x, y, width: maxX - x, height: maxY - y };
+  }
+
+  _selectRectangleObjects() {
+    if (this.landPoints.length !== 2) return;
+
+    const [x1, y1] = this.mousePoints[0];
+    const [x2, y2] = this.mousePoints[1];
+    const pickingInfos = this.nebula.deckgl.pickObjects({
+      x: Math.min(x1, x2),
+      y: Math.min(y1, y2),
+      width: Math.abs(x2 - x1),
+      height: Math.abs(y2 - y1),
+      layerIds: this._getLayerIds(),
+    });
+
+    this._selectFromPickingInfos(pickingInfos);
+  }
+
+  _selectPolygonObjects() {
+    const pickingInfos = this.nebula.deckgl.pickObjects({
+      ...this._getBoundingBox(),
+      layerIds: [LAYER_ID_PICK, ...this._getLayerIds()],
+    });
+
+    this._selectFromPickingInfos(pickingInfos.filter((item) => item.layer.id !== LAYER_ID_PICK));
+  }
+
+  _getMousePosFromEvent(event: Record<string, any>): [number, number] {
+    const { offsetX, offsetY } = event;
+    return [offsetX, offsetY];
+  }
+
+  // eslint-disable-next-line max-statements, complexity
+  handleEvent(
+    event: Record<string, any>,
+    lngLat: [number, number],
+    selectionType: number
+  ): { redraw: boolean; deactivate: boolean } {
+    // capture all events (mouse-up is needed to prevent us stuck in moving map)
+    if (event.type !== 'mouseup') event.stopPropagation();
+
+    // @ts-expect-error revisit selectionType type
+    this.usePolygon = selectionType === SELECTION_TYPE.POLYGON;
+
+    let redraw = false;
+    let deactivate = false;
+
+    const { usePolygon, landPoints, mousePoints } = this;
+
+    if (event.type === 'mousedown') {
+      if (usePolygon && landPoints.length) {
+        // if landPoints.length is zero we want to insert two points (so we let it run the else)
+        // also don't insert if polygon is invalid
+        if (this.landPoints.length < 3 || this.validPolygon) {
+          landPoints.push(lngLat);
+          mousePoints.push(this._getMousePosFromEvent(event));
+        }
+      } else {
+        this.landPoints = [lngLat, lngLat];
+        const m = this._getMousePosFromEvent(event);
+        this.mousePoints = [m, m];
+      }
+      redraw = true;
+    } else if (event.type === 'mousemove' && landPoints.length) {
+      // update last point
+      landPoints[landPoints.length - 1] = lngLat;
+      mousePoints[mousePoints.length - 1] = this._getMousePosFromEvent(event);
+      redraw = true;
+    } else if (event.type === 'mouseup') {
+      if (usePolygon) {
+        // check to see if completed
+        // TODO: Maybe double-click to finish?
+        if (
+          landPoints.length > 4 &&
+          turfDistance(landPoints[0], landPoints[landPoints.length - 1]) < POLYGON_THRESHOLD &&
+          this.validPolygon
+        ) {
+          this._selectPolygonObjects();
+          this.reset();
+          redraw = true;
+          deactivate = true;
+        }
+      } else {
+        this._selectRectangleObjects();
+        this.reset();
+        redraw = true;
+        deactivate = true;
+      }
+    }
+
+    return { redraw, deactivate };
+  }
+
+  reset() {
+    this.landPoints = [];
+    this.mousePoints = [];
+  }
+
+  _makeStartPointHighlight(center: [number, number]): number[] {
+    const buffer = turfBuffer(point(center), POLYGON_THRESHOLD / 4.0);
+    // @ts-expect-error revisit return type
+    return turfBboxPolygon(turfBbox(buffer)).geometry.coordinates;
+  }
+
+  render() {
+    const data: any[] = [];
+    const dataPick: any[] = [];
+
+    if (!this.usePolygon && this.landPoints.length === 2) {
+      // Use mouse points instead of land points so we get the right shape
+      // no matter what bearing is.
+      const [[x1, y1], [x2, y2]] = this.mousePoints;
+      const selPolygon = [
+        [x1, y1],
+        [x1, y2],
+        [x2, y2],
+        [x2, y1],
+        [x1, y1],
+      ].map((mousePos) => this.nebula.unprojectMousePosition(mousePos));
+      data.push({
+        polygon: selPolygon,
+        lineColor: POLYGON_LINE_COLOR,
+        fillColor: POLYGON_FILL_COLOR,
+      });
+    } else if (this.usePolygon && this.landPoints.length) {
+      data.push({
+        polygon: this.landPoints,
+        lineColor: POLYGON_LINE_COLOR,
+        fillColor: POLYGON_FILL_COLOR,
+      });
+
+      // Hack: use a polygon to hide the outside, because pickObjects()
+      // does not support polygons
+      if (this.landPoints.length >= 3) {
+        const landPointsPoly = polygon([[...this.landPoints, this.landPoints[0]]]);
+        const bigBuffer = turfBuffer(point(this.landPoints[0]), EXPANSION_KM);
+        let bigPolygon;
+        try {
+          // turfDifference throws an exception if the polygon
+          // intersects with itself
+          bigPolygon = turfDifference(bigBuffer, landPointsPoly);
+          dataPick.push({
+            polygon: bigPolygon.geometry.coordinates,
+            fillColor: [0, 0, 0, 1],
+          });
+          this.validPolygon = true;
+        } catch (e) {
+          // invalid selection polygon
+          this.validPolygon = false;
+        }
+      }
+    }
+
+    if (this.landPoints.length) {
+      // highlight start point
+      data.push({
+        polygon: this._makeStartPointHighlight(this.landPoints[0]),
+        lineColor: [0, 0, 0, 0],
+        fillColor: POLYGON_LINE_COLOR,
+      });
+    }
+
+    // Hack to make the PolygonLayer() stay active,
+    // otherwise it takes 3 seconds (!) to init!
+    // TODO: fix this
+    data.push({ polygon: [[0, 0]] });
+    dataPick.push({ polygon: [[0, 0]] });
+
+    return [
+      new PolygonLayer({
+        id: LAYER_ID_VIEW,
+        data,
+        fp64: false,
+        opacity: 1.0,
+        pickable: false,
+        lineWidthMinPixels: POLYGON_LINE_WIDTH,
+        lineWidthMaxPixels: POLYGON_LINE_WIDTH,
+        lineDashJustified: true,
+        // TODO(v9) Add extension
+        // getLineDashArray: (x) => POLYGON_DASHES,
+        getLineColor: (obj: { lineColor?: Color }) => obj.lineColor || [0, 0, 0, 255],
+        getFillColor: (obj: { fillColor?: Color }) => obj.fillColor || [0, 0, 0, 255],
+        getPolygon: (o: { polygon?: any }) => o.polygon,
+      }),
+      new PolygonLayer({
+        id: LAYER_ID_PICK,
+        data: dataPick,
+        getLineColor: (obj: { lineColor?: Color }) => obj.lineColor || [0, 0, 0, 255],
+        getFillColor: (obj: { fillColor?: Color }) => obj.fillColor || [0, 0, 0, 255],
+        fp64: false,
+        opacity: 1.0,
+        stroked: false,
+        pickable: true,
+        getPolygon: (o: { polygon?: any }) => o.polygon,
+      }),
+    ];
+  }
+}

package/src/lib/feature.ts

@@ -0,0 +1,27 @@
+import { Feature as GeoJson } from '../geojson-types';
+
+import { Style } from '../types';
+
+export default class Feature {
+  // geo json coordinates
+  geoJson: GeoJson;
+  style: Style;
+  original: any | null | undefined;
+  metadata: Record<string, any>;
+
+  constructor(
+    geoJson: GeoJson,
+    style: Style,
+    original: any | null | undefined = null,
+    metadata: Record<string, any> = {}
+  ) {
+    this.geoJson = geoJson;
+    this.style = style;
+    this.original = original;
+    this.metadata = metadata;
+  }
+
+  getCoords() {
+    return this.geoJson.geometry.coordinates;
+  }
+}

package/src/lib/layer-mouse-event.ts

@@ -0,0 +1,32 @@
+import { Position } from '../geojson-types';
+
+export default class LayerMouseEvent {
+  canceled: boolean = false;
+  // original item that this event is related to
+  data: Record<string, any>;
+  // internal nebula info about the object
+  metadata: Record<string, any>;
+  // the mouse [lng,lat] raycasted onto the ground
+  groundPoint: Position;
+  // browser event
+  nativeEvent: MouseEvent;
+  // reference to nebula
+  nebula: Record<string, any>;
+
+  constructor(
+    nativeEvent: MouseEvent,
+    { data, groundPoint, nebula, metadata }: Record<string, any>
+  ) {
+    this.nativeEvent = nativeEvent;
+
+    this.data = data;
+    this.groundPoint = groundPoint;
+    this.nebula = nebula;
+    this.metadata = metadata;
+  }
+
+  stopPropagation() {
+    this.nativeEvent.stopPropagation();
+    this.canceled = true;
+  }
+}

package/src/lib/layers/junctions-layer.ts

@@ -0,0 +1,40 @@
+import NebulaLayer from '../nebula-layer';
+import { toDeckColor } from '../../utils';
+import DeckCache from '../deck-renderer/deck-cache';
+import JunctionScatterplotLayer from '../../editable-layers/junction-scatterplot-layer';
+
+export default class JunctionsLayer extends NebulaLayer {
+  deckCache: DeckCache<any, any>;
+
+  constructor(config: Record<string, any>) {
+    super(config);
+    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
+    this.enablePicking = true;
+  }
+
+  render({ nebula }: Record<string, any>) {
+    const defaultColor: [number, number, number, number] = [0x0, 0x0, 0x0, 0xff];
+    const { objects, updateTrigger } = this.deckCache;
+
+    return new JunctionScatterplotLayer({
+      id: `junctions-${this.id}`,
+      data: objects,
+      opacity: 1,
+      pickable: true,
+      getPosition: (nf: any) => nf.geoJson.geometry.coordinates,
+      getFillColor: (nf: any) => toDeckColor(nf.style.fillColor) || defaultColor,
+      getStrokeColor: (nf: any) =>
+        toDeckColor(nf.style.outlineColor) || toDeckColor(nf.style.fillColor) || defaultColor,
+      getRadius: (nf: any) => nf.style.pointRadiusMeters + nf.style.outlineRadiusMeters || 1,
+      getInnerRadius: (nf: any) => nf.style.pointRadiusMeters || 0.5,
+      parameters: {
+        depthCompare: 'always'
+      },
+
+      updateTriggers: { all: updateTrigger },
+
+      // @ts-ignore
+      nebulaLayer: this,
+    });
+  }
+}