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

package/dist/utils.js

@@ -0,0 +1,144 @@
+import destination from '@turf/destination';
+import bearing from '@turf/bearing';
+import pointToLineDistance from '@turf/point-to-line-distance';
+import { point } from '@turf/helpers';
+import WebMercatorViewport from 'viewport-mercator-project';
+export function toDeckColor(color, defaultColor = [255, 0, 0, 255]) {
+    if (!Array.isArray(color)) {
+        return defaultColor;
+    }
+    return [color[0] * 255, color[1] * 255, color[2] * 255, color[3] * 255];
+}
+//
+// a GeoJSON helper function that calls the provided function with
+// an argument that is the most deeply-nested array having elements
+// that are arrays of primitives as an argument, e.g.
+//
+// {
+//   "type": "MultiPolygon",
+//   "coordinates": [
+//       [
+//           [[30, 20], [45, 40], [10, 40], [30, 20]]
+//       ],
+//       [
+//           [[15, 5], [40, 10], [10, 20], [5, 10], [15, 5]]
+//       ]
+//   ]
+// }
+//
+// the function would be called on:
+//
+// [[30, 20], [45, 40], [10, 40], [30, 20]]
+//
+// and
+//
+// [[15, 5], [40, 10], [10, 20], [5, 10], [15, 5]]
+//
+export function recursivelyTraverseNestedArrays(array, prefix, fn) {
+    if (!Array.isArray(array[0])) {
+        return true;
+    }
+    for (let i = 0; i < array.length; i++) {
+        if (recursivelyTraverseNestedArrays(array[i], [...prefix, i], fn)) {
+            fn(array, prefix);
+            break;
+        }
+    }
+    return false;
+}
+export function generatePointsParallelToLinePoints(p1, p2, mapCoords) {
+    const lineString = {
+        type: 'LineString',
+        coordinates: [p1, p2],
+    };
+    const pt = point(mapCoords);
+    const ddistance = pointToLineDistance(pt, lineString);
+    const lineBearing = bearing(p1, p2);
+    // Check if current point is to the left or right of line
+    // Line from A=(x1,y1) to B=(x2,y2) a point P=(x,y)
+    // then (x−x1)(y2−y1)−(y−y1)(x2−x1)
+    const isPointToLeftOfLine = (mapCoords[0] - p1[0]) * (p2[1] - p1[1]) - (mapCoords[1] - p1[1]) * (p2[0] - p1[0]);
+    // Bearing to draw perpendicular to the line string
+    const orthogonalBearing = isPointToLeftOfLine < 0 ? lineBearing - 90 : lineBearing - 270;
+    // Get coordinates for the point p3 and p4 which are perpendicular to the lineString
+    // Add the distance as the current position moves away from the lineString
+    const p3 = destination(p2, ddistance, orthogonalBearing);
+    const p4 = destination(p1, ddistance, orthogonalBearing);
+    return [p3.geometry.coordinates, p4.geometry.coordinates];
+}
+export function distance2d(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+export function mix(a, b, ratio) {
+    return b * ratio + a * (1 - ratio);
+}
+export function nearestPointOnProjectedLine(line, inPoint, viewport) {
+    const wmViewport = new WebMercatorViewport(viewport);
+    // Project the line to viewport, then find the nearest point
+    const coordinates = line.geometry.coordinates;
+    const projectedCoords = coordinates.map(([x, y, z = 0]) => wmViewport.project([x, y, z]));
+    const [x, y] = wmViewport.project(inPoint.geometry.coordinates);
+    // console.log('projectedCoords', JSON.stringify(projectedCoords));
+    let minDistance = Infinity;
+    let minPointInfo = {};
+    projectedCoords.forEach(([x2, y2], index) => {
+        if (index === 0) {
+            return;
+        }
+        const [x1, y1] = projectedCoords[index - 1];
+        // line from projectedCoords[index - 1] to projectedCoords[index]
+        // convert to Ax + By + C = 0
+        const A = y1 - y2;
+        const B = x2 - x1;
+        const C = x1 * y2 - x2 * y1;
+        // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line
+        const div = A * A + B * B;
+        const distance = Math.abs(A * x + B * y + C) / Math.sqrt(div);
+        // TODO: Check if inside bounds
+        if (distance < minDistance) {
+            minDistance = distance;
+            minPointInfo = {
+                index,
+                x0: (B * (B * x - A * y) - A * C) / div,
+                y0: (A * (-B * x + A * y) - B * C) / div,
+            };
+        }
+    });
+    const { index, x0, y0 } = minPointInfo;
+    const [x1, y1, z1 = 0] = projectedCoords[index - 1];
+    const [x2, y2, z2 = 0] = projectedCoords[index];
+    // calculate what ratio of the line we are on to find the proper z
+    const lineLength = distance2d(x1, y1, x2, y2);
+    const startToPointLength = distance2d(x1, y1, x0, y0);
+    const ratio = startToPointLength / lineLength;
+    const z0 = mix(z1, z2, ratio);
+    return {
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            // @ts-expect-error Position type diff
+            coordinates: wmViewport.unproject([x0, y0, z0]),
+        },
+        properties: {
+            // TODO: calculate the distance in proper units
+            dist: minDistance,
+            index: index - 1,
+        },
+    };
+}
+/**
+ * Inserts toInsert string into base string before insertBefore string.
+ * @param base A string to insert into.
+ * @param insertBefore A sub string in `base` string to insert before.
+ * @param toInsert A string to insert.
+ * @returns Combined string. `base` string if `insertBefore` string isn't found.
+ */
+export function insertBefore(base, insertBefore, toInsert) {
+    const at = base.indexOf(insertBefore);
+    if (at < 0) {
+        return base;
+    }
+    return base.slice(0, at) + toInsert + base.slice(at);
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@deck.gl-community/editable-layers",
+  "description": "A suite of 3D-enabled data editing overlays, suitable for deck.gl",
+  "license": "MIT",
+  "version": "9.0.0-alpha.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visgl/deck.gl-community"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "keywords": [
+    "webgl",
+    "visualization",
+    "overlay",
+    "layer"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@turf/along": "^6.5.0",
+    "@turf/area": "^6.5.0",
+    "@turf/bbox": "^6.5.0",
+    "@turf/bbox-polygon": "^6.5.0",
+    "@turf/bearing": "^6.5.0",
+    "@turf/boolean-point-in-polygon": "^6.5.0",
+    "@turf/buffer": "^6.5.0",
+    "@turf/center": "^6.5.0",
+    "@turf/centroid": "^6.5.0",
+    "@turf/circle": "^6.5.0",
+    "@turf/clone": "^6.5.0",
+    "@turf/destination": "^6.5.0",
+    "@turf/difference": "^6.5.0",
+    "@turf/distance": "^6.5.0",
+    "@turf/ellipse": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
+    "@turf/intersect": "^6.5.0",
+    "@turf/invariant": "^6.5.0",
+    "@turf/line-intersect": "^6.5.0",
+    "@turf/meta": "^6.5.0",
+    "@turf/midpoint": "^6.5.0",
+    "@turf/nearest-point-on-line": "^6.5.0",
+    "@turf/point-to-line-distance": "^6.5.0",
+    "@turf/polygon-to-line": "^6.5.0",
+    "@turf/rewind": "^6.5.0",
+    "@turf/transform-rotate": "^6.5.0",
+    "@turf/transform-scale": "^6.5.0",
+    "@turf/transform-translate": "^6.5.0",
+    "@turf/union": "^6.5.0",
+    "cubic-hermite-spline": "^1.0.1",
+    "eventemitter3": "^5.0.0",
+    "geojson-types": "^2.0.1",
+    "lodash.throttle": "^4.1.1",
+    "uuid": "9.0.0",
+    "viewport-mercator-project": ">=6.2.3"
+  },
+  "peerDependencies": {
+    "@deck.gl/core": ">=9.0.5",
+    "@deck.gl/extensions": ">=9.0.5",
+    "@deck.gl/geo-layers": ">=9.0.5",
+    "@deck.gl/layers": ">=9.0.5",
+    "@deck.gl/mesh-layers": ">=9.0.6",
+    "@luma.gl/constants": ">=9.0.9",
+    "@luma.gl/core": ">=9.0.9",
+    "@luma.gl/engine": ">=9.0.9",
+    "@math.gl/core": ">=4.0.1"
+  },
+  "gitHead": "8374ab0ac62a52ae8a6b14276694cabced43de35"
+}

package/src/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * 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;
+
+/**
+ * Unit literal to shader unit number conversion.
+ */
+export const UNIT = {
+  common: 0,
+  meters: 1,
+  pixels: 2,
+};

package/src/curve-utils.ts

@@ -0,0 +1,77 @@
+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-ignore
+  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-ignore
+    const A = calculateSingleTangent(coords[i], coords[i + 1], knots[i + 1] - knots[i]);
+    // @ts-ignore
+    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-ignore
+    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);
+}

package/src/edit-modes/composite-mode.ts

@@ -0,0 +1,74 @@
+import { FeatureCollection } from '../geojson-types';
+import {
+  ModeProps,
+  ClickEvent,
+  PointerMoveEvent,
+  StartDraggingEvent,
+  StopDraggingEvent,
+  DraggingEvent,
+  GuideFeatureCollection,
+  GuideFeature,
+} from './types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class CompositeMode extends GeoJsonEditMode {
+  _modes: Array<GeoJsonEditMode>;
+
+  constructor(modes: Array<GeoJsonEditMode>) {
+    super();
+    this._modes = modes;
+  }
+
+  _coalesce<T>(
+    callback: (arg0: GeoJsonEditMode) => T,
+    resultEval: ((arg0: T) => boolean | null | undefined) | null = null
+  ): T {
+    let result: T | null = null;
+
+    for (let i = 0; i < this._modes.length; i++) {
+      // eslint-disable-next-line callback-return
+      result = callback(this._modes[i]);
+      if (resultEval ? resultEval(result) : result) {
+        break;
+      }
+    }
+
+    return result!;
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>): void {
+    this._coalesce((handler) => handler.handleClick(event, props));
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>): void {
+    return this._coalesce((handler) => handler.handlePointerMove(event, props));
+  }
+
+  handleStartDragging(event: StartDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    return this._coalesce((handler) => handler.handleStartDragging(event, props));
+  }
+
+  handleStopDragging(event: StopDraggingEvent, props: ModeProps<FeatureCollection>): void {
+    return this._coalesce((handler) => handler.handleStopDragging(event, props));
+  }
+
+  handleDragging(event: DraggingEvent, props: ModeProps<FeatureCollection>): void {
+    return this._coalesce((handler) => handler.handleDragging(event, props));
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    // TODO: Combine the guides *BUT* make sure if none of the results have
+    // changed to return the same object so that "guides !== this.state.guides"
+    // in editable-geojson-layer works.
+
+    const allGuides: GuideFeature[] = [];
+    for (const mode of this._modes) {
+      allGuides.push(...mode.getGuides(props).features);
+    }
+
+    return {
+      type: 'FeatureCollection',
+      features: allGuides,
+    };
+  }
+}

package/src/edit-modes/draw-90degree-polygon-mode.ts

@@ -0,0 +1,220 @@
+import destination from '@turf/destination';
+import bearing from '@turf/bearing';
+import lineIntersect from '@turf/line-intersect';
+import turfDistance from '@turf/distance';
+import { point, lineString as turfLineString } from '@turf/helpers';
+import {
+  generatePointsParallelToLinePoints,
+  getPickedEditHandle,
+  getEditHandlesForGeometry,
+} from './utils';
+import {
+  ClickEvent,
+  PointerMoveEvent,
+  ModeProps,
+  GuideFeatureCollection,
+  TentativeFeature,
+} from './types';
+import { Polygon, LineString, Position, FeatureCollection } from '../geojson-types';
+import { GeoJsonEditMode } from './geojson-edit-mode';
+
+export class Draw90DegreePolygonMode extends GeoJsonEditMode {
+  createTentativeFeature(props: ModeProps<FeatureCollection>): TentativeFeature {
+    const clickSequence = this.getClickSequence();
+
+    const { mapCoords } = props.lastPointerMoveEvent;
+
+    let p3;
+    if (clickSequence.length === 1) {
+      p3 = mapCoords;
+    } else {
+      const p1 = clickSequence[clickSequence.length - 2];
+      const p2 = clickSequence[clickSequence.length - 1];
+      [p3] = generatePointsParallelToLinePoints(p1, p2, mapCoords);
+    }
+
+    let tentativeFeature;
+
+    if (clickSequence.length < 3) {
+      // Draw a LineString connecting all the clicked points with the hovered point
+      tentativeFeature = {
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [...clickSequence, p3],
+        },
+      };
+    } else {
+      // Draw a Polygon connecting all the clicked points with the hovered point
+      tentativeFeature = {
+        type: 'Feature',
+        properties: {
+          guideType: 'tentative',
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[...clickSequence, p3, clickSequence[0]]],
+        },
+      };
+    }
+
+    return tentativeFeature;
+  }
+
+  getGuides(props: ModeProps<FeatureCollection>): GuideFeatureCollection {
+    const guides: GuideFeatureCollection = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0 || !props.lastPointerMoveEvent) {
+      return guides;
+    }
+    const tentativeFeature = this.createTentativeFeature(props);
+
+    guides.features.push(tentativeFeature);
+
+    guides.features = guides.features.concat(
+      getEditHandlesForGeometry(tentativeFeature.geometry, -1)
+    );
+
+    // Slice off the handles that are are next to the pointer
+    guides.features = guides.features.slice(0, -1);
+
+    return guides;
+  }
+
+  handlePointerMove(event: PointerMoveEvent, props: ModeProps<FeatureCollection>) {
+    props.onUpdateCursor('cell');
+    super.handlePointerMove(event, props);
+  }
+
+  handleClick(event: ClickEvent, props: ModeProps<FeatureCollection>) {
+    const { picks } = event;
+    const tentativeFeature = this.getTentativeGuide(props);
+    this.addClickSequence(event);
+    const clickSequence = this.getClickSequence();
+
+    if (!tentativeFeature) {
+      // nothing else to do
+      return;
+    }
+
+    if (clickSequence.length === 3 && tentativeFeature.geometry.type === 'LineString') {
+      const lineString: LineString = tentativeFeature.geometry;
+
+      // Tweak the clicked position to be the snapped 90 degree point along the polygon
+      clickSequence[clickSequence.length - 1] =
+        lineString.coordinates[lineString.coordinates.length - 1];
+    } else if (clickSequence.length > 3 && tentativeFeature.geometry.type === 'Polygon') {
+      const polygon: Polygon = tentativeFeature.geometry;
+
+      // Tweak the clicked position to be the snapped 90 degree point along the polygon
+      clickSequence[clickSequence.length - 1] =
+        polygon.coordinates[0][polygon.coordinates[0].length - 2];
+
+      const clickedEditHandle = getPickedEditHandle(picks);
+
+      if (
+        clickedEditHandle &&
+        Array.isArray(clickedEditHandle.properties.positionIndexes) &&
+        (clickedEditHandle.properties.positionIndexes[1] === 0 ||
+          clickedEditHandle.properties.positionIndexes[1] === polygon.coordinates[0].length - 3)
+      ) {
+        // They clicked the first or last point (or double-clicked), so complete the polygon
+        const polygonToAdd: Polygon = {
+          type: 'Polygon',
+          coordinates: this.finalizedCoordinates([...polygon.coordinates[0]]),
+        };
+
+        this.resetClickSequence();
+
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+        if (editAction) {
+          props.onEdit(editAction);
+        }
+      }
+    }
+
+    // Trigger pointer move right away in order for it to update edit handles (to support double-click)
+    const fakePointerMoveEvent: PointerMoveEvent = {
+      screenCoords: [-1, -1],
+      mapCoords: event.mapCoords,
+      picks: [],
+      pointerDownPicks: null,
+      pointerDownScreenCoords: null,
+      pointerDownMapCoords: null,
+      cancelPan: () => {},
+      sourceEvent: null,
+    };
+
+    this.handlePointerMove(fakePointerMoveEvent, props);
+  }
+
+  finalizedCoordinates(coords: Position[]) {
+    // Remove the hovered position
+    let coordinates = [[...coords.slice(0, -2), coords[0]]];
+    let pt = this.getIntermediatePoint([...coords]);
+    if (!pt) {
+      // if intermediate point with 90 degree not available
+      // try remove the last clicked point and get the intermediate point.
+      const tc = [...coords];
+      tc.splice(-3, 1);
+      pt = this.getIntermediatePoint([...tc]);
+      if (pt) {
+        coordinates = [[...coords.slice(0, -3), pt, coords[0]]];
+      }
+    } else {
+      coordinates = [[...coords.slice(0, -2), pt, coords[0]]];
+    }
+    return coordinates;
+  }
+
+  getIntermediatePoint(coordinates: Position[]): Position | null {
+    let pt: Position | null = null;
+    if (coordinates.length > 4) {
+      const [p1, p2] = [...coordinates];
+      const angle1 = bearing(p1, p2);
+      const p3 = coordinates[coordinates.length - 3];
+      const p4 = coordinates[coordinates.length - 4];
+      const angle2 = bearing(p3, p4);
+
+      const angles = { first: [] as number[], second: [] as number[] };
+      // calculate 3 right angle points for first and last points in lineString
+      [1, 2, 3].forEach((factor) => {
+        const newAngle1 = angle1 + factor * 90;
+        // convert angles to 0 to -180 for anti-clock and 0 to 180 for clock wise
+        angles.first.push(newAngle1 > 180 ? newAngle1 - 360 : newAngle1);
+        const newAngle2 = angle2 + factor * 90;
+        angles.second.push(newAngle2 > 180 ? newAngle2 - 360 : newAngle2);
+      });
+
+      const distance = turfDistance(point(p1), point(p3));
+      // Draw imaginary right angle lines for both first and last points in lineString
+      // If there is intersection point for any 2 lines, will be the 90 degree point.
+      [0, 1, 2].forEach((indexFirst) => {
+        const line1 = turfLineString([
+          p1,
+          destination(p1, distance, angles.first[indexFirst]).geometry.coordinates,
+        ]);
+        [0, 1, 2].forEach((indexSecond) => {
+          const line2 = turfLineString([
+            p3,
+            destination(p3, distance, angles.second[indexSecond]).geometry.coordinates,
+          ]);
+          const fc = lineIntersect(line1, line2);
+          if (fc && fc.features.length) {
+            // found the intersect point
+            pt = fc.features[0].geometry.coordinates as Position;
+          }
+        });
+      });
+    }
+    return pt;
+  }
+}