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

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

@@ -0,0 +1,108 @@
+import { ArrowStyles, DEFAULT_STYLE, MAX_ARROWS } from '../style';
+import NebulaLayer from '../nebula-layer';
+import { toDeckColor } from '../../utils';
+import DeckCache from '../deck-renderer/deck-cache';
+import PathMarkerLayer from '../../editable-layers/path-marker-layer/path-marker-layer';
+
+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 default 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

@@ -0,0 +1,43 @@
+import { TextLayer } from '@deck.gl/layers';
+import NebulaLayer from '../nebula-layer';
+import { toDeckColor } from '../../utils';
+import { PROJECTED_PIXEL_SIZE_MULTIPLIER } from '../constants';
+import DeckCache from '../deck-renderer/deck-cache';
+import { Color } from '../../types';
+
+export default 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

@@ -0,0 +1,26 @@
+import { Position } from '../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;
+}

package/src/lib/nebula-layer.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from 'eventemitter3';
+import { v4 } from 'uuid';
+
+import Feature from './feature';
+
+export default class NebulaLayer extends EventEmitter {
+  getData: () => Record<string, any>[];
+  toNebulaFeature: (data: Record<string, any>) => Feature;
+  id: string;
+  helperLayers: Record<string, any>[];
+
+  // flags
+  usesMapEvents = false;
+  enablePicking = false;
+  enableSelection = false;
+  //
+
+  constructor({ getData, on, toNebulaFeature }: Record<string, any>) {
+    super();
+    this.id = v4();
+    this.getData = getData;
+    this.toNebulaFeature = toNebulaFeature;
+    this.helperLayers = [];
+
+    if (on) {
+      Object.keys(on).forEach((key) => this.on(key, on[key]));
+    }
+  }
+
+  render(config: Record<string, any>): unknown {
+    return null;
+  }
+}

package/src/lib/nebula.ts

@@ -0,0 +1,323 @@
+import {EventEmitter} from 'eventemitter3';
+import {WebMercatorViewport} from '@deck.gl/core';
+
+import DeckDrawer from './deck-renderer/deck-drawer';
+import LayerMouseEvent from './layer-mouse-event';
+import NebulaLayer from './nebula-layer';
+
+const LOGGER_PREFIX = 'Nebula: ';
+
+export default class Nebula {
+  init(props: Record<string, any>) {
+    this.props = props;
+    this.wmViewport = new WebMercatorViewport(this.props.viewport);
+
+    // TODO: Properly use pointer events: ['click', 'pointermove', 'pointerup', 'pointerdown']
+    ['click', 'mousemove', 'mouseup', 'mousedown'].forEach((name) =>
+      document.addEventListener(name, this._onMouseEvent as any, true)
+    );
+  }
+
+  detach() {
+    // TODO: Properly use pointer events: ['click', 'pointermove', 'pointerup', 'pointerdown']
+    ['click', 'mousemove', 'mouseup', 'mousedown'].forEach((name) =>
+      document.removeEventListener(name, this._onMouseEvent as any, true)
+    );
+  }
+
+  updateProps(newProps: Record<string, any>) {
+    this.props = newProps;
+    const {viewport} = this.props;
+
+    this.wmViewport = new WebMercatorViewport(viewport);
+  }
+
+  props: Record<string, any> = null!;
+  deckgl: Record<string, any> | null = null;
+  mainContainer: Record<string, any> | null = null;
+  deckglMouseOverInfo: Record<string, any> | null | undefined = null;
+  _deckDrawer: DeckDrawer = null!;
+  _mouseWasDown: boolean = null!;
+  wmViewport: WebMercatorViewport = null!;
+  queryObjectEvents = new EventEmitter();
+  forceUpdate: () => any = null!;
+  inited: boolean = null!;
+
+  log(message: string) {
+    const {logger} = this.props;
+    if (logger && logger.info) {
+      logger.info(LOGGER_PREFIX + message);
+    }
+  }
+
+  updateAllDeckObjects() {
+    this.getAllLayers().forEach((layer) => {
+      if (layer && layer.deckCache) {
+        layer.deckCache.updateAllDeckObjects();
+      }
+    });
+    this.forceUpdate();
+  }
+
+  updateDeckObjectsByIds(ids: string[]) {
+    this.getAllLayers().forEach((layer) => {
+      if (layer && layer.deckCache) {
+        layer.deckCache.updateDeckObjectsByIds(ids);
+      }
+    });
+    this.forceUpdate();
+  }
+
+  rerenderLayers() {
+    this.updateAllDeckObjects();
+  }
+
+  _isNebulaEvent({buttons, target, type}: Record<string, any>) {
+    const {viewport} = this.props;
+
+    // allow mouseup event aggressively to cancel drag properly
+    // TODO: use pointer capture setPointerCapture() to capture mouseup properly after deckgl
+    if (this._mouseWasDown && type === 'mouseup') {
+      this._mouseWasDown = false;
+      return true;
+    }
+
+    // allow mousemove event while dragging
+    if (type === 'mousemove' && buttons > 0) {
+      return true;
+    }
+
+    if (!target.getBoundingClientRect) {
+      return false;
+    }
+
+    const rect = target.getBoundingClientRect();
+    // Only listen to events coming from the basemap
+    // identified by the canvas of the same size as viewport.
+    // Need to round the rect dimension as some monitors
+    // have some sub-pixel difference with viewport.
+    return (
+      Math.round(rect.width) === Math.round(viewport.width) &&
+      Math.round(rect.height) === Math.round(viewport.height)
+    );
+  }
+
+  _onMouseEvent = (event: MouseEvent) => {
+    if (!this._isNebulaEvent(event)) {
+      return;
+    }
+
+    if (event.type === 'mousedown') {
+      this._mouseWasDown = true;
+    }
+
+    // offsetX/Y of the MouseEvent provides the offset in the X/Y coordinate
+    // of the mouse pointer between that event and the padding edge of the target node.
+    // We set our listener to document so we need to adjust offsetX/Y
+    // in case the target is not be our WebGL canvas.
+    const {top = 0, left = 0} = this.mainContainer
+      ? this.mainContainer.getBoundingClientRect()
+      : {};
+    const proxyEvent = new Proxy(event, {
+      get: (original: any, propertyName: string) => {
+        if (propertyName === 'offsetX') {
+          return original.pageX - left;
+        }
+
+        if (propertyName === 'offsetY') {
+          return original.pageY - top;
+        }
+
+        // TODO: Properly use pointer events
+        if (propertyName === 'type') {
+          return original.type.replace('pointer', 'mouse');
+        }
+
+        const result = original[propertyName];
+        if (typeof result === 'function') {
+          return result.bind(original);
+        }
+        return result;
+      }
+    });
+
+    this._handleDeckGLEvent(proxyEvent);
+  };
+
+  getMouseGroundPosition(event: Record<string, any>) {
+    return this.wmViewport.unproject([event.offsetX, event.offsetY]) as [number, number];
+  }
+
+  unprojectMousePosition(mousePosition: [number, number]): [number, number] {
+    return this.wmViewport.unproject(mousePosition) as [number, number];
+  }
+
+  // eslint-disable-next-line max-statements, complexity
+  _handleDeckGLEvent(event: Record<string, any>) {
+    const {
+      deckgl,
+      props: {onMapMouseEvent, selectionType, eventFilter}
+    } = this;
+    let sendMapEvent = true;
+    let cursor = 'auto';
+
+    if (event && deckgl && selectionType) {
+      if (!this._deckDrawer) this._deckDrawer = new DeckDrawer(this);
+
+      const lngLat = this.getMouseGroundPosition(event);
+      if (eventFilter && !eventFilter(lngLat, event)) return;
+      const drawerResult = this._deckDrawer.handleEvent(event, lngLat, selectionType);
+      if (drawerResult.redraw) this.forceUpdate();
+      return;
+    }
+
+    if (event && deckgl && (!event.buttons || event.type !== 'mousemove')) {
+      // TODO: sort by mouse priority
+      const layerIds = deckgl.props.layers
+        .filter(
+          (l: any) => l && l.props && l.props.nebulaLayer && l.props.nebulaLayer.enablePicking
+        )
+        .map((l: any) => l.id);
+
+      const pickingInfo = deckgl.pickObject({
+        x: event.offsetX,
+        y: event.offsetY,
+        radius: 5,
+        layerIds
+      });
+      this.queryObjectEvents.emit('pick', {event, pickingInfo});
+      if (pickingInfo) {
+        sendMapEvent = false;
+
+        const {index, lngLat} = pickingInfo;
+        if (eventFilter && !eventFilter(lngLat, event)) return;
+
+        const {layer: deckLayer, object} = pickingInfo;
+
+        if (
+          deckLayer &&
+          deckLayer.props &&
+          deckLayer.props.nebulaLayer &&
+          deckLayer.props.nebulaLayer.eventHandler
+        ) {
+          deckLayer.props.nebulaLayer.eventHandler(event, pickingInfo);
+        }
+
+        const original =
+          object.original ||
+          (deckLayer.props.nebulaLayer &&
+            deckLayer.props.nebulaLayer.deckCache &&
+            deckLayer.props.nebulaLayer.deckCache.originals[index]);
+
+        if (original) {
+          this.deckglMouseOverInfo = {originalLayer: deckLayer.props.nebulaLayer, index};
+          // @ts-expect-error narrow event type
+          const nebulaMouseEvent = new LayerMouseEvent(event, {
+            data: original,
+            metadata: object.metadata,
+            groundPoint: lngLat,
+            nebula: this
+          });
+          deckLayer.props.nebulaLayer.emit(event.type, nebulaMouseEvent);
+          this.forceUpdate();
+        }
+
+        cursor = 'pointer';
+      }
+    }
+
+    if (document.documentElement) {
+      document.documentElement.style.cursor = cursor;
+    }
+
+    if (sendMapEvent) {
+      this.deckglMouseOverInfo = null;
+
+      const lngLat = this.getMouseGroundPosition(event);
+      if (eventFilter && !eventFilter(lngLat, event)) return;
+
+      // send to layers first
+      // @ts-expect-error narrow event type
+      const nebulaMouseEvent = new LayerMouseEvent(event, {
+        groundPoint: lngLat,
+        nebula: this
+      });
+      this.getAllLayers()
+        .filter((layer) => layer && layer.usesMapEvents)
+        .forEach((layer) => layer.emit('mapMouseEvent', nebulaMouseEvent));
+
+      this.getAllLayers()
+        .filter(
+          (layer) =>
+            layer && layer.props && layer.props.nebulaLayer && layer.props.nebulaLayer.mapMouseEvent
+        )
+        .forEach((layer) => layer.props.nebulaLayer.mapMouseEvent(nebulaMouseEvent, layer));
+
+      if (onMapMouseEvent) {
+        onMapMouseEvent(event, lngLat);
+      }
+    }
+  }
+
+  getExtraDeckLayers(): Record<string, any>[] {
+    const result: Record<string, any>[] = [];
+
+    if (this._deckDrawer) result.push(...this._deckDrawer.render());
+
+    return result;
+  }
+
+  renderDeckLayers() {
+    return this.getAllLayers()
+      .map((layer) => (layer instanceof NebulaLayer ? layer.render({nebula: this}) : layer))
+      .filter(Boolean);
+  }
+
+  getAllLayers() {
+    const result: Record<string, any>[] = [];
+
+    this.props.layers.filter(Boolean).forEach((layer) => {
+      result.push(layer);
+      // Only NebulaLayers have helpers, Deck GL layers don't.
+      if (layer instanceof NebulaLayer) {
+        result.push(...layer.helperLayers);
+      }
+    });
+
+    return result.filter(Boolean);
+  }
+
+  getRenderedLayers() {
+    return [...this.renderDeckLayers(), ...this.getExtraDeckLayers()];
+  }
+
+  updateAndGetRenderedLayers(
+    layers: Record<string, any>[],
+    viewport: WebMercatorViewport,
+    container: Record<string, any>
+  ) {
+    if (this.inited) {
+      this.updateProps({layers, viewport});
+      this.forceUpdate = () => container.forceUpdate();
+    } else {
+      this.inited = true;
+      this.init({layers, viewport});
+      this.forceUpdate = () => container.forceUpdate();
+      this.updateAllDeckObjects();
+    }
+
+    return this.getRenderedLayers();
+  }
+
+  setDeck(deckgl: Record<string, any> | null) {
+    if (deckgl) {
+      this.deckgl = deckgl;
+    }
+  }
+
+  setMainContainer(mainContainer: Record<string, any> | null) {
+    if (mainContainer) {
+      this.mainContainer = mainContainer;
+    }
+  }
+}

package/src/lib/style.ts

@@ -0,0 +1,22 @@
+// Describes the arrow style of polylines
+export const ArrowStyles = {
+  NONE: 0,
+  FORWARD: 1,
+  BACKWARD: 2,
+  BOTH: 3,
+};
+
+export const DEFAULT_ARROWS = 1;
+export const MAX_ARROWS = 3;
+
+export const DEFAULT_STYLE = {
+  arrowColor: [0, 0, 0, 1],
+  arrowCount: DEFAULT_ARROWS,
+  arrowStyle: ArrowStyles.NONE,
+  fillColor: [0, 0, 0, 1],
+  lineColor: [0, 0, 0, 1],
+  lineWidthMeters: 5,
+  outlineRadiusMeters: 0,
+  opacity: 1,
+  zLevel: 0,
+};

package/src/memoize.ts

@@ -0,0 +1,43 @@
+// port from @deck.gl/core
+function isEqual(a: any, b: any) {
+  if (a === b) {
+    return true;
+  }
+  if (Array.isArray(a)) {
+    // Special treatment for arrays: compare 1-level deep
+    // This is to support equality of matrix/coordinate props
+    const len = a.length;
+    if (!b || b.length !== len) {
+      return false;
+    }
+
+    for (let i = 0; i < len; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Speed up consecutive function calls by caching the result of calls with identical input
+ * https://en.wikipedia.org/wiki/Memoization
+ * @param {function} compute - the function to be memoized
+ */
+export default function memoize(compute: Function) {
+  let cachedArgs = {};
+  let cachedResult;
+
+  return (args: any) => {
+    for (const key in args) {
+      if (!isEqual(args[key], cachedArgs[key])) {
+        cachedResult = compute(args);
+        cachedArgs = args;
+        break;
+      }
+    }
+    return cachedResult;
+  };
+}

package/src/mode-handlers/composite-mode-handler.ts

@@ -0,0 +1,89 @@
+import { FeatureCollection, Feature, Position } from '../geojson-types';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+} from '../edit-modes/types';
+import { ModeHandler, EditAction, EditHandle } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class CompositeModeHandler extends ModeHandler {
+  handlers: Array<ModeHandler>;
+  options: Record<string, any>;
+
+  constructor(handlers: Array<ModeHandler>, options: Record<string, any> = {}) {
+    super();
+    this.handlers = handlers;
+    this.options = options;
+  }
+
+  _coalesce<T>(
+    callback: (arg0: ModeHandler) => T,
+    resultEval: ((arg0: T) => boolean | null | undefined) | null = null
+  ): T | undefined {
+    let result: T | undefined;
+
+    for (let i = 0; i < this.handlers.length; i++) {
+      // eslint-disable-next-line callback-return
+      result = callback(this.handlers[i]);
+      if (resultEval ? resultEval(result) : result) {
+        break;
+      }
+    }
+
+    return result as T;
+  }
+
+  setFeatureCollection(featureCollection: FeatureCollection): void {
+    this.handlers.forEach((handler) => handler.setFeatureCollection(featureCollection));
+  }
+
+  setModeConfig(modeConfig: any): void {
+    this.handlers.forEach((handler) => handler.setModeConfig(modeConfig));
+  }
+
+  setSelectedFeatureIndexes(indexes: number[]): void {
+    this.handlers.forEach((handler) => handler.setSelectedFeatureIndexes(indexes));
+  }
+
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    return this._coalesce((handler) => handler.handleClick(event));
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    return this._coalesce(
+      (handler) => handler.handlePointerMove(event),
+      (result) => result && Boolean(result.editAction)
+    ) as any; // TODO
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    return this._coalesce((handler) => handler.handleStartDragging(event));
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    return this._coalesce((handler) => handler.handleStopDragging(event));
+  }
+
+  getTentativeFeature(): Feature | null | undefined {
+    return this._coalesce((handler) => handler.getTentativeFeature());
+  }
+
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    // TODO: Combine the handles *BUT* make sure if none of the results have
+    // changed to return the same object so that "editHandles !== this.state.editHandles"
+    // in editable-geojson-layer works.
+    return this._coalesce(
+      (handler) => handler.getEditHandles(picks, mapCoords),
+      (handles) => Array.isArray(handles) && handles.length > 0
+    ) as any; // TODO
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    return this._coalesce((handler) => handler.getCursor({ isDragging })) as any; // TODO
+  }
+}