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

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

@@ -0,0 +1,110 @@
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import turfTransformTranslate from '@turf/transform-translate';
+import { point } from '@turf/helpers';
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class TranslateHandler extends ModeHandler {
+  _geometryBeforeTranslate: FeatureCollection | null | undefined;
+  _isTranslatable: boolean = undefined!;
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    let editAction: EditAction | null | undefined = null;
+
+    this._isTranslatable =
+      Boolean(this._geometryBeforeTranslate) || this.isSelectionPicked(event.picks);
+
+    if (!this._isTranslatable || !event.pointerDownMapCoords) {
+      // Nothing to do
+      return { editAction: null, cancelMapPan: false };
+    }
+
+    if (event.isDragging && this._geometryBeforeTranslate) {
+      // Translate the geometry
+      editAction = this.getTranslateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'translating'
+      );
+    }
+
+    return { editAction, cancelMapPan: true };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    if (!this._isTranslatable) {
+      return null;
+    }
+
+    this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection();
+    return null;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    if (this._geometryBeforeTranslate) {
+      // Translate the geometry
+      editAction = this.getTranslateAction(
+        event.pointerDownMapCoords,
+        event.mapCoords,
+        'translated'
+      );
+      this._geometryBeforeTranslate = null;
+    }
+
+    return editAction;
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    if (this._isTranslatable) {
+      return 'move';
+    }
+    return isDragging ? 'grabbing' : 'grab';
+  }
+
+  getTranslateAction(
+    startDragPoint: Position,
+    currentPoint: Position,
+    editType: string
+  ): EditAction | null | undefined {
+    if (!this._geometryBeforeTranslate) {
+      return null;
+    }
+    const p1 = point(startDragPoint);
+    const p2 = point(currentPoint);
+
+    const distanceMoved = turfDistance(p1, p2);
+    const direction = turfBearing(p1, p2);
+
+    // @ts-expect-error turf type diff
+    const movedFeatures: FeatureCollection = turfTransformTranslate(
+      // @ts-expect-error turf type diff
+      this._geometryBeforeTranslate,
+      distanceMoved,
+      direction
+    );
+
+    let updatedData = this.getImmutableFeatureCollection();
+
+    const selectedIndexes = this.getSelectedFeatureIndexes();
+    for (let i = 0; i < selectedIndexes.length; i++) {
+      const selectedIndex = selectedIndexes[i];
+      const movedFeature = movedFeatures.features[i];
+      updatedData = updatedData.replaceGeometry(selectedIndex, movedFeature.geometry);
+    }
+
+    return {
+      updatedData: updatedData.getObject(),
+      editType,
+      featureIndexes: selectedIndexes,
+      editContext: null,
+    };
+  }
+}

package/src/mode-handlers/two-click-polygon-handler.ts

@@ -0,0 +1,25 @@
+import { ClickEvent } from '../edit-modes/types';
+import { ModeHandler, EditAction } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class TwoClickPolygonHandler extends ModeHandler {
+  handleClick(event: ClickEvent): EditAction | null | undefined {
+    super.handleClick(event);
+
+    const tentativeFeature = this.getTentativeFeature();
+    const clickSequence = this.getClickSequence();
+
+    if (
+      clickSequence.length > 1 &&
+      tentativeFeature &&
+      tentativeFeature.geometry.type === 'Polygon'
+    ) {
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry);
+      this.resetClickSequence();
+      this._setTentativeFeature(null);
+      return editAction;
+    }
+
+    return null;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Position } from '../geojson-types';
+import { EditHandle, ModeHandler } from './mode-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ViewHandler extends ModeHandler {
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    return isDragging ? 'grabbing' : 'grab';
+  }
+
+  getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[] {
+    return [];
+  }
+}

package/src/shaderlib/color/color.ts

@@ -0,0 +1,56 @@
+// TODO - this module is a WIP
+
+/* eslint-disable camelcase */
+const INITIAL_STATE: Record<string, number> = {
+  color_uOpacity: 1.0,
+  color_uDesaturate: 0.0,
+  color_uBrightness: 1.0,
+};
+
+function getUniforms(opts = INITIAL_STATE) {
+  const uniforms: Record<string, number> = {};
+  if (opts.opacity) {
+    uniforms.color_uOpacity = opts.opacity;
+  }
+  return uniforms;
+}
+
+const vs = `\
+in vec4 color_vColor;
+
+color_setColor(vec4 color) {
+  color_vColor = color;
+}
+`;
+
+const fs = `\
+uniform float color_uOpacity;
+uniform float color_uDesaturate;
+uniform float color_uBrightness;
+
+in vec4 color_vColor;
+
+out vec4 fragColor;
+
+vec4 color_getColor() {
+  return color_vColor;
+}
+
+vec4 color_filterColor(vec4 color) {
+  // apply desaturation and brightness
+  if (color_uDesaturate > 0.01) {
+    float luminance = (color.r + color.g + color.b) * 0.333333333 + color_uBrightness;
+    color = vec4(mix(color.rgb, vec3(luminance), color_uDesaturate), color.a);
+
+  // Apply opacity
+  color = vec4(color.rgb, color.a * color_uOpacity);
+  return color;
+}
+`;
+
+export default {
+  name: 'color',
+  vs,
+  fs,
+  getUniforms,
+};

package/src/shaderlib/outline/outline.ts

@@ -0,0 +1,101 @@
+/* eslint-disable camelcase */
+const INITIAL_STATE: Record<string, any> = {
+  outlineEnabled: false,
+  outlineRenderShadowmap: false,
+  outlineShadowmap: null,
+};
+
+function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
+  const uniforms: Record<string, any> = {};
+  if (outlineEnabled !== undefined) {
+    // ? 1.0 : 0.0;
+    uniforms.outline_uEnabled = outlineEnabled;
+  }
+  if (outlineRenderShadowmap !== undefined) {
+    // ? 1.0 : 0.0;
+    uniforms.outline_uRenderOutlines = outlineRenderShadowmap;
+  }
+  if (outlineShadowmap !== undefined) {
+    uniforms.outline_uShadowmap = outlineShadowmap;
+  }
+  return uniforms;
+}
+
+const vs = `\
+#version 300 es
+in float instanceZLevel;
+out float outline_vzLevel;
+out vec4 outline_vPosition;
+
+// Set the z level for the outline shadowmap rendering
+void outline_setZLevel(float zLevel) {
+  outline_vzLevel = zLevel;
+}
+
+// Store an adjusted position for texture2DProj
+void outline_setUV(vec4 position) {
+  // mat4(
+  //   0.5, 0.0, 0.0, 0.0,
+  //   0.0, 0.5, 0.0, 0.0,
+  //   0.0, 0.0, 0.5, 0.0,
+  //   0.5, 0.5, 0.5, 1.0
+  // ) * position;
+  outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);
+}
+`;
+
+const fs = `\
+uniform bool outline_uEnabled;
+uniform bool outline_uRenderOutlines;
+uniform sampler2D outline_uShadowmap;
+
+in float outline_vzLevel;
+// in vec2 outline_vUV;
+in vec4 outline_vPosition;
+
+out vec4 fragColor;
+
+const float OUTLINE_Z_LEVEL_ERROR = 0.01;
+
+// Return a darker color in shadowmap
+vec4 outline_filterShadowColor(vec4 color) {
+  return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);
+}
+
+// Return a darker color if in shadowmap
+vec4 outline_filterDarkenColor(vec4 color) {
+  if (outline_uEnabled) {
+    float maxZLevel;
+    if (outline_vPosition.q > 0.0) {
+      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;
+    } else {
+      discard;
+    }
+    if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {
+      vec4(color.rgb * 0.5, color.a);
+    } else {
+      discard;
+    }
+  }
+  return color;
+}
+
+// if enabled and rendering outlines - Render depth to shadowmap
+// if enabled and rendering colors - Return a darker color if in shadowmap
+// if disabled, just return color
+vec4 outline_filterColor(vec4 color) {
+  if (outline_uEnabled) {
+    return outline_uRenderOutlines ?
+      outline_filterShadowColor(color) :
+      outline_filterDarkenColor(color);
+  }
+  return color;
+}
+`;
+
+export default {
+  name: 'outline',
+  vs,
+  fs,
+  getUniforms,
+};

package/src/shaderlib/utils/utils.ts

@@ -0,0 +1,33 @@
+// TODO - this module is a WIP
+
+/* eslint-disable camelcase */
+const INITIAL_STATE = {};
+
+function getUniforms({} = INITIAL_STATE) {}
+
+const vs = `\
+// Note - fairly generic, move to a UV or screen package, or even project?
+vec2 project_clipspace_to_uv(vec4 position) {
+  vec2 p = vec2(position.x / position.w, position.y / position.w);
+  return vec2((p.x + 1.0) / 2.0, (p.y + 1.0) / 2.0);
+}
+
+vec2 project_clipspace_to_projective_uv(vec4 position) {
+  // outline_vPosition = mat4(
+  //   0.5, 0.0, 0.0, 0.0,
+  //   0.0, 0.5, 0.0, 0.0,
+  //   0.0, 0.0, 0.5, 0.0,
+  //   0.5, 0.5, 0.5, 1.0
+  // ) * position;
+  return vec4(position.xyz * 0.5 + position.w * 0.5, position.w);
+}
+`;
+
+const fs = vs;
+
+export default {
+  name: 'outline',
+  vs,
+  fs,
+  getUniforms,
+};

package/src/translateFromCenter.ts

@@ -0,0 +1,48 @@
+import turfCenter from '@turf/center';
+import turfRhumbBearing from '@turf/rhumb-bearing';
+import turfRhumbDistance from '@turf/rhumb-distance';
+import turfRhumbDestination from '@turf/rhumb-destination';
+import type {
+  Position as TurfPosition,
+  Feature as TurfFeature,
+  Geometry as TurfGeometry,
+} from '@turf/helpers';
+import { mapCoords } from './edit-modes/utils';
+import type { AnyCoordinates, Position } from './';
+
+// This function takes feature's center, moves it,
+// and builds new feature around it keeping the proportions
+export function translateFromCenter(
+  feature: TurfFeature<TurfGeometry>,
+  distance: number,
+  direction: number
+) {
+  const initialCenterPoint = turfCenter(feature as TurfFeature);
+
+  const movedCenterPoint = turfRhumbDestination(initialCenterPoint, distance, direction);
+
+  const movedCoordinates = mapCoords(
+    feature.geometry.coordinates as AnyCoordinates,
+    (coordinate) => {
+      const distance = turfRhumbDistance(
+        initialCenterPoint.geometry.coordinates,
+        coordinate as TurfPosition
+      );
+      const direction = turfRhumbBearing(
+        initialCenterPoint.geometry.coordinates,
+        coordinate as TurfPosition
+      );
+
+      const movedPosition = turfRhumbDestination(
+        movedCenterPoint.geometry.coordinates,
+        distance,
+        direction
+      ).geometry.coordinates;
+      return movedPosition as Position;
+    }
+  );
+
+  feature.geometry.coordinates = movedCoordinates;
+
+  return feature;
+}

package/src/types.ts

@@ -0,0 +1,39 @@
+export type LayerMouseEventResult = {
+  eventConsumed?: boolean;
+  eventSoftConsumed?: boolean;
+  mousePointer?: string | null | undefined;
+  shouldRedraw?: boolean | string[];
+};
+
+// [red, green, blue, alpha] in premultiplied alpha format
+export type Color = [number, number, number, number];
+
+export type Style = {
+  dashArray?: number[];
+  fillColor?: Color;
+  lineColor?: Color;
+  lineWidthMeters?: number;
+  pointRadiusMeters?: number;
+  outlineRadiusMeters?: number;
+  outlineColor?: Color;
+  mousePriority?: number;
+  arrowColor?: Color;
+  arrowStyle?: number;
+  arrowCount?: number;
+  iconNumber?: number;
+  text?: string;
+  tooltip?: string;
+  zLevel?: number;
+};
+
+export type Viewport = {
+  width: number;
+  height: number;
+  longitude: number;
+  latitude: number;
+  zoom: number;
+  isDragging?: boolean;
+  isMoving?: boolean;
+  bearing?: number;
+  pitch?: number;
+};

package/src/utils.ts

@@ -0,0 +1,185 @@
+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';
+import { FeatureOf, FeatureWithProps, LineString, Point, Position } from './geojson-types';
+import { Viewport } from './types';
+
+// TODO edit-modes: delete and use edit-modes/utils instead
+
+export type NearestPointType = FeatureWithProps<Point, { dist: number; index: number }>;
+
+export function toDeckColor(
+  color?: [number, number, number, number] | number,
+  defaultColor: [number, number, number, number] = [255, 0, 0, 255]
+): [number, number, number, number] {
+  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: Array<any>,
+  prefix: Array<number>,
+  fn: Function
+) {
+  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: Position,
+  p2: Position,
+  mapCoords: Position
+): Position[] {
+  const lineString: 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] as [Position, Position];
+}
+
+export function distance2d(x1: number, y1: number, x2: number, y2: number): number {
+  const dx = x1 - x2;
+  const dy = y1 - y2;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function mix(a: number, b: number, ratio: number): number {
+  return b * ratio + a * (1 - ratio);
+}
+
+export function nearestPointOnProjectedLine(
+  line: FeatureOf<LineString>,
+  inPoint: FeatureOf<Point>,
+  viewport: Viewport
+): NearestPointType {
+  const wmViewport = new WebMercatorViewport(viewport);
+  // Project the line to viewport, then find the nearest point
+  const coordinates: Array<Array<number>> = line.geometry.coordinates as any;
+  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 as any;
+  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: string, insertBefore: string, toInsert: string): string {
+  const at = base.indexOf(insertBefore);
+  if (at < 0) {
+    return base;
+  }
+  return base.slice(0, at) + toInsert + base.slice(at);
+}