@deck.gl-community/editable-layers 9.2.0-beta.6 → 9.2.0-beta.8

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

@@ -1,61 +0,0 @@
-export 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

@@ -1,263 +0,0 @@
-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 '../../utils/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 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

@@ -1,31 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {Feature as GeoJson} from '../utils/geojson-types';
-
-import {Style} from '../utils/types';
-
-export 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

@@ -1,33 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {Position} from '../utils/geojson-types';
-
-export 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

@@ -1,44 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {NebulaLayer} from '../nebula-layer';
-import {toDeckColor} from '../../utils/utils';
-import {DeckCache} from '../deck-renderer/deck-cache';
-import {JunctionScatterplotLayer} from '../../editable-layers/junction-scatterplot-layer';
-
-export 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-expect-error TODO
-      nebulaLayer: this
-    });
-  }
-}

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

@@ -1,112 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {ArrowStyles, DEFAULT_STYLE, MAX_ARROWS} from '../style';
-import {NebulaLayer} from '../nebula-layer';
-import {toDeckColor} from '../../utils/utils';
-import {DeckCache} from '../deck-renderer/deck-cache';
-import {PathMarkerLayer} from '@deck.gl-community/layers';
-
-const NEBULA_TO_DECK_DIRECTIONS = {
-  [ArrowStyles.NONE]: {forward: false, backward: false},
-  [ArrowStyles.FORWARD]: {forward: true, backward: false},
-  [ArrowStyles.BACKWARD]: {forward: false, backward: true},
-  [ArrowStyles.BOTH]: {forward: true, backward: true}
-};
-
-export class SegmentsLayer extends NebulaLayer {
-  deckCache: DeckCache<any, any>;
-  noBlend: boolean;
-  highlightColor: [number, number, number, number];
-  arrowSize: number;
-  jointRounded: boolean;
-  capRounded: boolean;
-  dashed: boolean;
-  markerLayerProps: Record<string, any> | null | undefined;
-
-  constructor(config: Record<string, any>) {
-    super(config);
-    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
-    this.enableSelection = true;
-    this.enablePicking = config.enablePicking ?? true;
-    this.noBlend = config.noBlend ?? false;
-    this.jointRounded = config.jointRounded ?? true;
-    this.capRounded = config.capRounded ?? true;
-    this.dashed = config.dashed ?? false;
-    this.markerLayerProps = config.markerLayerProps ?? null;
-    this.highlightColor = [1, 1, 1, 1];
-    this.arrowSize = 1;
-  }
-
-  getMouseOverSegment(): any {
-    // TODO: remove references
-    return null;
-  }
-
-  _calcMarkerPercentages(nf: Record<string, any>): number[] {
-    const {arrowPercentages} = nf.style;
-    if (arrowPercentages) {
-      return arrowPercentages;
-    }
-
-    const arrowStyle = nf.style.arrowStyle || DEFAULT_STYLE.arrowStyle;
-    if (arrowStyle === ArrowStyles.NONE) return [];
-
-    const arrowCount = Math.min(nf.style.arrowCount || DEFAULT_STYLE.arrowCount, MAX_ARROWS);
-    return [[0.5], [0.33, 0.66], [0.25, 0.5, 0.75]][arrowCount - 1];
-  }
-
-  _getHighlightedObjectIndex({nebula}: Record<string, any>): number {
-    const {deckglMouseOverInfo} = nebula;
-    if (deckglMouseOverInfo) {
-      const {originalLayer, index} = deckglMouseOverInfo;
-      if (originalLayer === this) {
-        return index;
-      }
-    }
-
-    // no object
-    return -1;
-  }
-
-  render({nebula}: Record<string, any>) {
-    const defaultColor: [number, number, number, number] = [0x0, 0x0, 0x0, 0xff];
-    const {objects, updateTrigger} = this.deckCache;
-
-    return new PathMarkerLayer<any>({
-      id: `segments-${this.id}`,
-      data: objects,
-      opacity: 1,
-      fp64: false,
-      jointRounded: this.jointRounded,
-      capRounded: this.capRounded,
-      pickable: true,
-      sizeScale: this.arrowSize || 6,
-      parameters: {
-        depthCompare: 'always',
-        blendColorOperation: this.noBlend ? undefined : 'max'
-      },
-      getPath: (nf: any) => nf.geoJson.geometry.coordinates,
-      getColor: (nf: any) => toDeckColor(nf.style.lineColor, defaultColor),
-      getWidth: (nf: any) => nf.style.lineWidthMeters || 1,
-      getZLevel: (nf: any) => nf.style.zLevel * 255,
-      getDirection: (nf: any) => NEBULA_TO_DECK_DIRECTIONS[nf.style.arrowStyle],
-      getMarkerColor: (nf: any) => toDeckColor(nf.style.arrowColor, defaultColor),
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      getMarkerPercentages: this._calcMarkerPercentages,
-      updateTriggers: {all: updateTrigger},
-
-      highlightedObjectIndex: this._getHighlightedObjectIndex({nebula}),
-      highlightColor: toDeckColor(this.highlightColor),
-
-      dashJustified: this.dashed,
-      getDashArray: this.dashed ? (nf) => nf.style.dashArray : undefined,
-      markerLayerProps:
-        this.markerLayerProps ||
-        (PathMarkerLayer as Record<string, any>).defaultProps.markerLayerProps,
-
-      nebulaLayer: this
-    });
-  }
-}

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

@@ -1,47 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {TextLayer} from '@deck.gl/layers';
-import {NebulaLayer} from '../nebula-layer';
-import {toDeckColor} from '../../utils/utils';
-import {PROJECTED_PIXEL_SIZE_MULTIPLIER} from '../constants';
-import {DeckCache} from '../deck-renderer/deck-cache';
-import {Color} from '../../utils/types';
-
-export class TextsLayer extends NebulaLayer {
-  deckCache: DeckCache<any, any>;
-
-  constructor(config: Record<string, any>) {
-    super(config);
-    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
-  }
-
-  render({nebula}: Record<string, any>): TextLayer {
-    const defaultColor: Color = [0x0, 0x0, 0x0, 0xff];
-    const {objects, updateTrigger} = this.deckCache;
-
-    const {zoom} = nebula.props.viewport;
-
-    return new TextLayer({
-      id: `texts-${this.id}`,
-      data: objects,
-      opacity: 1,
-      fp64: false,
-      pickable: false,
-
-      getText: (nf: any) => nf.style.text,
-      getPosition: (nf: any) => nf.geoJson.geometry.coordinates,
-      getColor: (nf: {style: {fillColor: Color}}) =>
-        toDeckColor(nf.style.fillColor) || defaultColor,
-
-      // TODO: layer should offer option to scale with zoom
-      sizeScale: 1 / Math.pow(2, 20 - zoom),
-      getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
-
-      updateTriggers: {all: updateTrigger},
-
-      nebulaLayer: this
-    });
-  }
-}

package/src/lib/math.ts

@@ -1,30 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {Position} from '../utils/geojson-types';
-
-export function toDegree(radian: number): number {
-  return (radian * 180) / Math.PI;
-}
-
-export function toRadian(angle: number): number {
-  return (angle * Math.PI) / 180;
-}
-
-/**
- * Converts an array of latitudes, longitudes in E7 format to a list of points in degrees.
- *
- * @param {[]} array: An E7 array [lat_e7, lng_e7, lat_e7, lng_e7, ...]
- * @return {[]} An array of points in degrees
- *              [ [lng_degrees, lat_degrees], [lng_degrees, lat_degrees], ...]
- */
-export function convertE7Array(array: number[]): Position[] {
-  const points: Position[] = [];
-  for (let i = 0; i < array.length; i += 2) {
-    const lat = array[i] * 1e-7;
-    const lng = array[i + 1] * 1e-7;
-    points.push([lng, lat]);
-  }
-  return points;
-}