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

package/src/editable-layers/path-marker-layer/create-path-markers.ts

@@ -0,0 +1,107 @@
+import { Vector2 } from '@math.gl/core';
+import { Position } from '../../geojson-types';
+import { Color } from '../../types';
+
+export interface PathMarker {
+  position: Position,
+  angle: number,
+  color: Color,
+  object: unknown
+}
+
+function getLineLength(vPoints) {
+  // calculate total length
+  let lineLength = 0;
+  for (let i = 0; i < vPoints.length - 1; i++) {
+    lineLength += vPoints[i].distance(vPoints[i + 1]);
+  }
+  return lineLength;
+}
+
+const DEFAULT_COLOR = [0, 0, 0, 255];
+const DEFAULT_DIRECTION = { forward: true, backward: false };
+
+export default function createPathMarkers({
+  data,
+  getPath = (x, context) => x.path,
+  getDirection = (x) => x.direction,
+  getColor = (x) => DEFAULT_COLOR,
+  getMarkerPercentages = (x, info) => [0.5],
+  projectFlat,
+}): PathMarker[] {
+  const markers: PathMarker[] = [];
+
+  for (const object of data) {
+    const path = getPath(object, null);
+    const direction = getDirection(object) || DEFAULT_DIRECTION;
+    const color = getColor(object);
+
+    const vPoints = path.map((p) => new Vector2(p));
+    const vPointsReverse = vPoints.slice(0).reverse();
+
+    // calculate total length
+    const lineLength = getLineLength(vPoints);
+
+    // Ask for where to put markers
+    const percentages = getMarkerPercentages(object, { lineLength });
+
+    // Create the markers
+    for (const percentage of percentages) {
+      if (direction.forward) {
+        const marker = createMarkerAlongPath({
+          path: vPoints,
+          percentage,
+          lineLength,
+          color,
+          object,
+          projectFlat,
+        });
+        markers.push(marker);
+      }
+
+      if (direction.backward) {
+        const marker = createMarkerAlongPath({
+          path: vPointsReverse,
+          percentage,
+          lineLength,
+          color,
+          object,
+          projectFlat,
+        });
+        markers.push(marker);
+      }
+    }
+  }
+
+  return markers;
+}
+
+function createMarkerAlongPath({ path, percentage, lineLength, color, object, projectFlat }): PathMarker {
+  const distanceAlong = lineLength * percentage;
+  let currentDistance = 0;
+  let previousDistance = 0;
+  let i = 0;
+  for (i = 0; i < path.length - 1; i++) {
+    currentDistance += path[i].distance(path[i + 1]);
+    if (currentDistance > distanceAlong) {
+      break;
+    }
+    previousDistance = currentDistance;
+  }
+
+  // If reached the end of the loop without exiting early,
+  // undo the final increment to avoid a null-pointer exception
+  if (i === path.length - 1) {
+    i -= 1;
+  }
+
+  const vDirection = path[i + 1].clone().subtract(path[i]).normalize();
+  const along = distanceAlong - previousDistance;
+  const vCenter = vDirection.clone().multiply(new Vector2(along, along)).add(path[i]);
+
+  const vDirection2 = new Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));
+
+  const angle = (vDirection2.verticalAngle() * 180) / Math.PI;
+
+  return { position: [vCenter.x, vCenter.y, 0], angle, color, object };
+}

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

@@ -0,0 +1,179 @@
+import {CompositeLayer, COORDINATE_SYSTEM, DefaultProps} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
+import PathOutlineLayer, {PathOutlineLayerProps} from '../path-outline-layer/path-outline-layer';
+import Arrow2DGeometry from './arrow-2d-geometry';
+
+import createPathMarkers from './create-path-markers';
+import {getClosestPointOnPolyline} from './polyline';
+import {Vector3} from '@math.gl/core';
+
+const DISTANCE_FOR_MULTI_ARROWS = 0.1;
+const ARROW_HEAD_SIZE = 0.2;
+const ARROW_TAIL_WIDTH = 0.05;
+// const ARROW_CENTER_ADJUST = -0.8;
+
+const DEFAULT_MARKER_LAYER = SimpleMeshLayer;
+
+export type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {
+  getDirection?: (x) => any;
+  getMarkerColor?: (x) => number[];
+  getMarkerPercentages?: (x: any, info: any) => number[];
+  highlightPoint?: any;
+  highlightIndex?: number;
+  MarkerLayer?: any;
+  markerLayerProps?: any;
+  sizeScale?: number;
+  fp64?: boolean;
+  nebulaLayer?: any;
+};
+
+const DEFAULT_MARKER_LAYER_PROPS = {
+  mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH})
+};
+
+const defaultProps: DefaultProps<PathMarkerLayerProps<any>> = Object.assign(
+  {},
+  PathOutlineLayer.defaultProps,
+  {
+    MarkerLayer: DEFAULT_MARKER_LAYER,
+    markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,
+
+    sizeScale: 100,
+    fp64: false,
+
+    highlightIndex: -1,
+    highlightPoint: null,
+
+    getPath: (x) => x.path,
+    getColor: (x) => x.color,
+    getMarkerColor: (x) => [0, 0, 0, 255],
+    getDirection: (x) => x.direction,
+    getMarkerPercentages: (object, {lineLength}) =>
+      lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]
+  }
+);
+
+export default class PathMarkerLayer<
+  DataT = any,
+  ExtraPropsT = Record<string, unknown>
+> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {
+  static layerName = 'PathMarkerLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    closestPoint: Vector3 | null;
+    closestPoints?: {position: Vector3}[];
+    markers: any[];
+    mesh: Arrow2DGeometry;
+  } = undefined!;
+
+  initializeState() {
+    this.state = {
+      markers: [],
+      mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH}),
+      closestPoint: null,
+      closestPoints: []
+    };
+  }
+
+  projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {
+    if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
+      const [dx, dy] = viewport.metersToLngLatDelta(xyz);
+      const [x, y] = coordinateOrigin;
+      return viewport.projectFlat([x + dx, dy + y]);
+    } else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
+      const [dx, dy] = xyz;
+      const [x, y] = coordinateOrigin;
+      return viewport.projectFlat([x + dx, dy + y]);
+    }
+
+    return viewport.projectFlat(xyz);
+  }
+
+  updateState({props, oldProps, changeFlags}) {
+    if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {
+      const {
+        data,
+        getPath,
+        getDirection,
+        getMarkerColor,
+        getMarkerPercentages,
+        coordinateSystem,
+        coordinateOrigin
+      } = this.props;
+
+      const {viewport} = this.context;
+      const projectFlat = (o) => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);
+      this.state.markers = createPathMarkers({
+        data,
+        getPath,
+        getDirection,
+        getColor: getMarkerColor,
+        getMarkerPercentages,
+        projectFlat
+      });
+      this._recalculateClosestPoint();
+    }
+    if (changeFlags.propsChanged) {
+      if (props.point !== oldProps.point) {
+        this._recalculateClosestPoint();
+      }
+    }
+  }
+
+  _recalculateClosestPoint() {
+    const {highlightPoint, highlightIndex} = this.props;
+    if (highlightPoint && highlightIndex >= 0) {
+      const object = this.props.data![highlightIndex];
+      const points = this.props.getPath(object, null as any);
+      const {point} = getClosestPointOnPolyline({points, p: highlightPoint});
+      this.state.closestPoints = [{position: point}];
+    } else {
+      this.state.closestPoints = [];
+    }
+  }
+
+  getPickingInfo({info}) {
+    return Object.assign(info, {
+      // override object with picked feature
+      object: (info.object && info.object.path) || info.object
+    });
+  }
+
+  renderLayers() {
+    return [
+      new PathOutlineLayer(
+        this.props,
+        this.getSubLayerProps({
+          id: 'paths',
+          // Note: data has to be passed explicitly like this to avoid being empty
+          data: this.props.data
+        })
+      ),
+      new this.props.MarkerLayer(
+        this.getSubLayerProps(
+          Object.assign({}, this.props.markerLayerProps, {
+            id: 'markers',
+            data: this.state.markers,
+            getOrientation: (x) => [0, -x.angle, 0],
+            getColor: (x) => x.color,
+            sizeScale: this.props.sizeScale,
+            fp64: this.props.fp64,
+            pickable: false,
+            parameters: {
+              blend: false,
+              depthTest: false
+            }
+          })
+        )
+      ),
+      this.state.closestPoints &&
+        new ScatterplotLayer({
+          id: `${this.props.id}-highlight`,
+          data: this.state.closestPoints,
+          fp64: this.props.fp64
+        })
+    ];
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Vector3, clamp } from '@math.gl/core';
+
+// Return the closest point on a line segment
+export function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
+  const lineVector = new Vector3(p2).subtract(p1);
+  const pointVector = new Vector3(p).subtract(p1);
+  let dotProduct = lineVector.dot(pointVector);
+  if (clampToLine) {
+    dotProduct = clamp(dotProduct, 0, 1);
+  }
+
+  return lineVector.lerp(p1, p2, dotProduct);
+}
+
+// Return the closest point on a line segment
+export function getClosestPointOnPolyline({ p, points }) {
+  p = new Vector3(p);
+  let pClosest: Vector3 | null = null;
+  let distanceSquared = Infinity;
+  let index = -1;
+  for (let i = 0; i < points.length - 1; ++i) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const pClosestOnLine = getClosestPointOnLine({ p, p1, p2 });
+    const distanceToLineSquared = p.distanceSquared(pClosestOnLine);
+    if (distanceToLineSquared < distanceSquared) {
+      distanceSquared = distanceToLineSquared;
+      pClosest = pClosestOnLine;
+      index = i;
+    }
+  }
+  return {
+    point: pClosest as Vector3,
+    index,
+    p1: points[index],
+    p2: points[index + 1],
+    distanceSquared,
+    distance: Math.sqrt(distanceSquared),
+  };
+}

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

@@ -0,0 +1,147 @@
+import { PathLayer, PathLayerProps } from '@deck.gl/layers';
+import type { DefaultProps, LayerContext } from '@deck.gl/core';
+import {GL} from '@luma.gl/constants';
+import { Framebuffer, Texture } from '@luma.gl/core';
+import outline from '../../shaderlib/outline/outline';
+import { UNIT } from '../../constants';
+
+// TODO - this should be built into assembleShaders
+function injectShaderCode({ source, code = '' }) {
+  const INJECT_CODE = /}[^{}]*$/;
+  return source.replace(INJECT_CODE, code.concat('\n}\n'));
+}
+
+const VS_CODE = `\
+  outline_setUV(gl_Position);
+  outline_setZLevel(instanceZLevel);
+`;
+
+const FS_CODE = `\
+  fragColor = outline_filterColor(fragColor);
+`;
+
+export type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {
+  dashJustified?: boolean;
+  getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);
+  getZLevel?: (d: DataT, index: number) => number;
+};
+
+const defaultProps: DefaultProps<PathOutlineLayerProps<any>> = {
+  getZLevel: () => 0,
+};
+
+export default class PathOutlineLayer<
+  DataT = any,
+  ExtraPropsT = Record<string, unknown>
+> extends PathLayer<DataT, ExtraPropsT & Required<PathOutlineLayerProps<DataT>>> {
+  static layerName = 'PathOutlineLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    model?: any;
+    pathTesselator: any;
+    outlineFramebuffer: Framebuffer;
+    dummyTexture: Texture;
+  } = undefined!;
+
+  // Override getShaders to inject the outline module
+  getShaders() {
+    const shaders = super.getShaders();
+    return Object.assign({}, shaders, {
+      modules: shaders.modules.concat([outline]),
+      vs: injectShaderCode({ source: shaders.vs, code: VS_CODE }),
+      fs: injectShaderCode({ source: shaders.fs, code: FS_CODE }),
+    });
+  }
+
+  // @ts-expect-error PathLayer is missing LayerContext arg
+  initializeState(context: LayerContext) {
+    super.initializeState();
+
+    // Create an outline "shadow" map
+    // TODO - we should create a single outlineMap for all layers
+    this.setState({
+      outlineFramebuffer: context.device.createFramebuffer({}),
+      dummyTexture: context.device.createTexture({}),
+    });
+
+    // Create an attribute manager
+    // @ts-expect-error check whether this.getAttributeManager works here
+    this.state.attributeManager.addInstanced({
+      instanceZLevel: {
+        size: 1,
+        type: GL.UNSIGNED_BYTE,
+        accessor: 'getZLevel',
+      },
+    });
+  }
+
+  // Override draw to add render module
+  draw({ moduleParameters = {}, parameters, uniforms, context }) {
+    // Need to calculate same uniforms as base layer
+    const {
+      jointRounded,
+      capRounded,
+      billboard,
+      miterLimit,
+      widthUnits,
+      widthScale,
+      widthMinPixels,
+      widthMaxPixels,
+    } = this.props;
+
+    uniforms = Object.assign({}, uniforms, {
+      jointType: Number(jointRounded),
+      capType: Number(capRounded),
+      billboard,
+      widthUnits: UNIT[widthUnits],
+      widthScale,
+      miterLimit,
+      widthMinPixels,
+      widthMaxPixels,
+    });
+
+    // Render the outline shadowmap (based on segment z orders)
+    const { outlineFramebuffer, dummyTexture } = this.state;
+    // TODO(v9): resize, see 'sf' example.
+    // outlineFramebuffer.resize();
+    // TODO(v9) clear FBO
+    // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });
+
+    this.state.model.updateModuleSettings({
+      outlineEnabled: true,
+      outlineRenderShadowmap: true,
+      outlineShadowmap: dummyTexture,
+    });
+
+    this.state.model.draw({
+      uniforms: Object.assign({}, uniforms, {
+        jointType: 0,
+        widthScale: this.props.widthScale * 1.3,
+      }),
+      parameters: {
+        depthTest: false,
+        // Biggest value needs to go into buffer
+        blendEquation: GL.MAX,
+      },
+      framebuffer: outlineFramebuffer,
+    });
+
+    // Now use the outline shadowmap to render the lines (with outlines)
+    this.state.model.updateModuleSettings({
+      outlineEnabled: true,
+      outlineRenderShadowmap: false,
+      outlineShadowmap: outlineFramebuffer,
+    });
+    this.state.model.draw({
+      uniforms: Object.assign({}, uniforms, {
+        jointType: Number(jointRounded),
+        capType: Number(capRounded),
+        widthScale: this.props.widthScale,
+      }),
+      parameters: {
+        depthTest: false,
+      },
+    });
+  }
+}

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

@@ -0,0 +1,209 @@
+/* eslint-env browser */
+
+import {CompositeLayer, CompositeLayerProps, DefaultProps} from '@deck.gl/core';
+import {PolygonLayer} from '@deck.gl/layers';
+import {polygon} from '@turf/helpers';
+import turfBuffer from '@turf/buffer';
+import turfDifference from '@turf/difference';
+
+import EditableGeoJsonLayer from './editable-geojson-layer';
+import {DrawRectangleMode} from '../edit-modes/draw-rectangle-mode';
+import {DrawPolygonMode} from '../edit-modes/draw-polygon-mode';
+import {ViewMode} from '../edit-modes/view-mode';
+
+export const SELECTION_TYPE = {
+  NONE: null,
+  RECTANGLE: 'rectangle',
+  POLYGON: 'polygon'
+};
+
+const MODE_MAP = {
+  [SELECTION_TYPE.RECTANGLE]: DrawRectangleMode,
+  [SELECTION_TYPE.POLYGON]: DrawPolygonMode
+};
+
+const MODE_CONFIG_MAP = {
+  [SELECTION_TYPE.RECTANGLE]: {dragToDraw: true}
+};
+
+interface SelectionLayerProps<DataT> extends CompositeLayerProps {
+  layerIds: any[];
+  onSelect: (info: any) => any;
+  selectionType: string | null;
+}
+
+const defaultProps: DefaultProps<SelectionLayerProps<any>> = {
+  selectionType: SELECTION_TYPE.RECTANGLE,
+  layerIds: [],
+  onSelect: () => {}
+};
+
+const EMPTY_DATA = {
+  type: 'FeatureCollection',
+  features: []
+};
+
+const EXPANSION_KM = 50;
+const LAYER_ID_GEOJSON = 'selection-geojson';
+const LAYER_ID_BLOCKER = 'selection-blocker';
+
+const PASS_THROUGH_PROPS = [
+  'lineWidthScale',
+  'lineWidthMinPixels',
+  'lineWidthMaxPixels',
+  'lineWidthUnits',
+  'lineJointRounded',
+  'lineCapRounded',
+  'lineMiterLimit',
+  'pointRadiusScale',
+  'pointRadiusMinPixels',
+  'pointRadiusMaxPixels',
+  'lineDashJustified',
+  'getLineColor',
+  'getFillColor',
+  'getRadius',
+  'getLineWidth',
+  'getLineDashArray',
+  'getTentativeLineDashArray',
+  'getTentativeLineColor',
+  'getTentativeFillColor',
+  'getTentativeLineWidth'
+];
+export default class SelectionLayer<DataT, ExtraPropsT> extends CompositeLayer<
+  ExtraPropsT & Required<SelectionLayerProps<DataT>>
+> {
+  static layerName = 'SelectionLayer';
+  static defaultProps = defaultProps;
+
+  state: {
+    pendingPolygonSelection: {
+      bigPolygon: ReturnType<typeof turfDifference>;
+    };
+  } = undefined!;
+
+  _selectRectangleObjects(coordinates: any) {
+    const {layerIds, onSelect} = this.props;
+    const [x1, y1] = this.context.viewport.project(coordinates[0][0]);
+    const [x2, y2] = this.context.viewport.project(coordinates[0][2]);
+    const pickingInfos = this.context.deck!.pickObjects({
+      x: Math.min(x1, x2),
+      y: Math.min(y1, y2),
+      width: Math.abs(x2 - x1),
+      height: Math.abs(y2 - y1),
+      layerIds
+    });
+
+    onSelect({pickingInfos});
+  }
+
+  _selectPolygonObjects(coordinates: any) {
+    const {layerIds, onSelect} = this.props;
+    const mousePoints = coordinates[0].map((c) => this.context.viewport.project(c));
+
+    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);
+
+    // Use a polygon to hide the outside, because pickObjects()
+    // does not support polygons
+    const landPointsPoly = polygon(coordinates);
+    const bigBuffer = turfBuffer(landPointsPoly, EXPANSION_KM);
+    let bigPolygon;
+    try {
+      // turfDifference throws an exception if the polygon
+      // intersects with itself (TODO: check if true in all versions)
+      bigPolygon = turfDifference(bigBuffer, landPointsPoly);
+    } catch (e) {
+      // invalid selection polygon
+      console.log('turfDifference() error', e); // eslint-disable-line
+      return;
+    }
+
+    this.setState({
+      pendingPolygonSelection: {
+        bigPolygon
+      }
+    });
+
+    const blockerId = `${this.props.id}-${LAYER_ID_BLOCKER}`;
+
+    // HACK, find a better way
+    setTimeout(() => {
+      const pickingInfos = this.context.deck!.pickObjects({
+        x,
+        y,
+        width: maxX - x,
+        height: maxY - y,
+        layerIds: [blockerId, ...layerIds]
+      });
+
+      onSelect({
+        pickingInfos: pickingInfos.filter((item) => item.layer!.id !== this.props.id)
+      });
+    }, 250);
+  }
+
+  renderLayers() {
+    const {pendingPolygonSelection} = this.state;
+
+    const mode = MODE_MAP[this.props.selectionType!] || ViewMode;
+    const modeConfig = MODE_CONFIG_MAP[this.props.selectionType!];
+
+    const inheritedProps = {};
+    PASS_THROUGH_PROPS.forEach((p) => {
+      if (this.props[p] !== undefined) inheritedProps[p] = this.props[p];
+    });
+
+    const layers: any[] = [
+      new EditableGeoJsonLayer(
+        this.getSubLayerProps({
+          id: LAYER_ID_GEOJSON,
+          pickable: true,
+          mode,
+          modeConfig,
+          selectedFeatureIndexes: [],
+          data: EMPTY_DATA,
+          onEdit: ({updatedData, editType}) => {
+            if (editType === 'addFeature') {
+              const {coordinates} = updatedData.features[0].geometry;
+
+              if (this.props.selectionType === SELECTION_TYPE.RECTANGLE) {
+                this._selectRectangleObjects(coordinates);
+              } else if (this.props.selectionType === SELECTION_TYPE.POLYGON) {
+                this._selectPolygonObjects(coordinates);
+              }
+            }
+          },
+          ...inheritedProps
+        })
+      )
+    ];
+
+    if (pendingPolygonSelection) {
+      const {bigPolygon} = pendingPolygonSelection as any;
+      layers.push(
+        new PolygonLayer(
+          this.getSubLayerProps({
+            id: LAYER_ID_BLOCKER,
+            pickable: true,
+            stroked: false,
+            opacity: 1.0,
+            data: [bigPolygon],
+            getLineColor: (obj) => [0, 0, 0, 1],
+            getFillColor: (obj) => [0, 0, 0, 1],
+            getPolygon: (o) => o.geometry.coordinates
+          })
+        )
+      );
+    }
+
+    return layers;
+  }
+
+  shouldUpdateState({changeFlags: {stateChanged, propsOrDataChanged}}: Record<string, any>) {
+    return stateChanged || propsOrDataChanged;
+  }
+}