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

package/src/lib/nebula-core.ts

@@ -1,327 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-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 class NebulaCore {
-  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/nebula-layer.ts

@@ -1,37 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {EventEmitter} from 'eventemitter3';
-import {v4} from 'uuid';
-
-import {Feature} from './feature';
-
-export 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/style.ts

@@ -1,26 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-// 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/utils/curve-utils.ts

@@ -1,81 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import hermite from 'cubic-hermite-spline';
-import turfDistance from '@turf/distance';
-import {lineString} from '@turf/helpers';
-import type {Feature, MultiLineString, LineString, Position} from '@turf/helpers';
-
-const INTERPOLATION_INTERVAL = 0.005;
-const INTERPOLATION_THRESHOLD = 0.001;
-
-function calculateSingleTangent(p0: [number, number], p1: [number, number], d: number): number[] {
-  const x = (p1[0] - p0[0]) / d;
-  const y = (p1[1] - p0[1]) / d;
-  return [x, y];
-}
-
-// eslint-disable-next-line max-statements
-export function generateCurveFromControlPoints(
-  line: Feature<MultiLineString>
-): Feature<LineString> {
-  // calculate knots
-  const knots = [0];
-  let prev: Position[] | null = null;
-  let totalDistance = 0;
-
-  const {coordinates: coords} = line.geometry;
-
-  for (let i = 0; i < coords.length; i++) {
-    const cur = coords[i];
-    if (prev !== null) {
-      // @ts-expect-error turf types diff
-      totalDistance += turfDistance(prev, cur);
-      knots.push(totalDistance);
-    }
-    prev = cur;
-  }
-
-  // calculate tangents
-  const tangents: number[][] = [];
-
-  // first tangent
-  // @ts-expect-error TODO
-  tangents.push(calculateSingleTangent(coords[0], coords[1], knots[1] - knots[0]));
-
-  // second to before last
-  for (let i = 1; i < coords.length - 1; i++) {
-    // @ts-expect-error TODO
-    const A = calculateSingleTangent(coords[i], coords[i + 1], knots[i + 1] - knots[i]);
-    // @ts-expect-error TODO
-    const B = calculateSingleTangent(coords[i - 1], coords[i], knots[i] - knots[i - 1]);
-    const x = (A[0] + B[0]) / 2.0;
-    const y = (A[1] + B[1]) / 2.0;
-    tangents.push([x, y]);
-  }
-
-  // last tangent
-  const last = coords.length - 1;
-  tangents.push(
-    // @ts-expect-error TODO
-    calculateSingleTangent(coords[last - 1], coords[last], knots[last] - knots[last - 1])
-  );
-
-  // generate curve
-  const result: any[] = [];
-  for (let i = 0; i < coords.length; i++) {
-    // add control point
-    result.push(coords[i]);
-
-    // add interpolated values
-    for (let t = knots[i] + INTERPOLATION_INTERVAL; t < knots[i + 1]; t += INTERPOLATION_INTERVAL) {
-      if (knots[i + 1] - t > INTERPOLATION_THRESHOLD) {
-        // Only add if not too close to a control point (knot = control point)
-        result.push(hermite(t, coords, tangents, knots));
-      }
-    }
-  }
-
-  return lineString(result);
-}