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

package/src/mode-handlers/draw-rectangle-using-three-points-handler.ts

@@ -0,0 +1,60 @@
+import { LineString } from '../geojson-types';
+import { generatePointsParallelToLinePoints } from '../utils';
+import { PointerMoveEvent } from '../edit-modes/types';
+import { EditAction } from './mode-handler';
+import { ThreeClickPolygonHandler } from './three-click-polygon-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DrawRectangleUsingThreePointsHandler extends ThreeClickPolygonHandler {
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const result = { editAction: null, cancelMapPan: false };
+    const clickSequence = this.getClickSequence();
+
+    if (clickSequence.length === 0) {
+      // nothing to do yet
+      return result;
+    }
+
+    const mapCoords = event.mapCoords;
+
+    if (clickSequence.length === 1) {
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [clickSequence[0], mapCoords],
+        },
+      });
+    } else if (clickSequence.length === 2) {
+      const lineString: LineString = {
+        type: 'LineString',
+        coordinates: clickSequence,
+      };
+      const [p1, p2] = clickSequence;
+      const [p3, p4] = generatePointsParallelToLinePoints(p1, p2, mapCoords);
+
+      this._setTentativeFeature({
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              // Draw a polygon containing all the points of the LineString,
+              // then the points orthogonal to the lineString,
+              // then back to the starting position
+              ...lineString.coordinates,
+              p3,
+              p4,
+              p1,
+            ],
+          ],
+        },
+      });
+    }
+
+    return result;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { StartDraggingEvent } from '../edit-modes/types';
+import { EditAction } from './mode-handler';
+import { TranslateHandler } from './translate-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class DuplicateHandler extends TranslateHandler {
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    if (!this._isTranslatable) {
+      return null;
+    }
+
+    this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection();
+
+    return this._geometryBeforeTranslate
+      ? this.getAddManyFeaturesAction(this._geometryBeforeTranslate)
+      : null;
+  }
+
+  getCursor({ isDragging }: { isDragging: boolean }): string {
+    if (this._isTranslatable) {
+      return 'copy';
+    }
+    return isDragging ? 'grabbing' : 'grab';
+  }
+}

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

@@ -0,0 +1,88 @@
+import { Position } from '../geojson-types';
+import { PointerMoveEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, getPickedEditHandle } from './mode-handler';
+
+import { ModifyHandler } from './modify-handler';
+
+function defaultCalculateElevationChange({
+  pointerDownScreenCoords,
+  screenCoords,
+}: {
+  pointerDownScreenCoords: Position;
+  screenCoords: Position;
+}) {
+  return 10 * (pointerDownScreenCoords[1] - screenCoords[1]);
+}
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ElevationHandler extends ModifyHandler {
+  makeElevatedEvent<T extends PointerMoveEvent | StopDraggingEvent>(
+    event: T,
+    position: Position
+  ): T {
+    if (!event.pointerDownScreenCoords) {
+      return event;
+    }
+
+    const {
+      minElevation = 0,
+      maxElevation = 20000,
+      calculateElevationChange = defaultCalculateElevationChange,
+    } = this._modeConfig || {};
+
+    // $FlowFixMe - really, I know it has something at index 2
+    let elevation = position.length === 3 ? position[2] : 0;
+
+    // calculateElevationChange is configurable becase (at this time) modes are not aware of the viewport
+    elevation += calculateElevationChange({
+      pointerDownScreenCoords: event.pointerDownScreenCoords,
+      screenCoords: event.screenCoords,
+    });
+    elevation = Math.min(elevation, maxElevation);
+    elevation = Math.max(elevation, minElevation);
+
+    return Object.assign({}, event, {
+      mapCoords: [position[0], position[1], elevation],
+    });
+  }
+
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+    const position = editHandle ? editHandle.position : event.mapCoords;
+    return super.handlePointerMove(this.makeElevatedEvent(event, position));
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    const editHandle = getPickedEditHandle(event.picks);
+    const position = editHandle ? editHandle.position : event.mapCoords;
+    return super.handleStopDragging(this.makeElevatedEvent(event, position));
+  }
+
+  getCursor(params: { isDragging: boolean }): string {
+    let cursor = super.getCursor(params);
+    if (cursor === 'cell') {
+      cursor = 'ns-resize';
+    }
+    return cursor;
+  }
+
+  static calculateElevationChangeWithViewport(
+    viewport: any,
+    {
+      pointerDownScreenCoords,
+      screenCoords,
+    }: {
+      pointerDownScreenCoords: Position;
+      screenCoords: Position;
+    }
+  ): number {
+    // Source: https://gis.stackexchange.com/a/127949/111804
+    const metersPerPixel =
+      (156543.03392 * Math.cos((viewport.latitude * Math.PI) / 180)) / Math.pow(2, viewport.zoom);
+
+    return (metersPerPixel * (pointerDownScreenCoords[1] - screenCoords[1])) / 2;
+  }
+}

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

@@ -0,0 +1,245 @@
+import bearing from '@turf/bearing';
+import { generatePointsParallelToLinePoints } from '../utils';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, getPickedEditHandle } from './mode-handler';
+
+import { ModifyHandler } from './modify-handler';
+
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ExtrudeHandler extends ModifyHandler {
+  isPointAdded = false;
+  handlePointerMove(event: PointerMoveEvent): {
+    editAction: EditAction | null | undefined;
+    cancelMapPan: boolean;
+  } {
+    this._lastPointerMovePicks = event.picks;
+
+    let editAction: EditAction | null | undefined = null;
+
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
+
+    if (event.isDragging && editHandle) {
+      const size = this.coordinatesSize(editHandle.positionIndexes, editHandle.featureIndex);
+      const positionIndexes = this.isPointAdded
+        ? this.nextPositionIndexes(editHandle.positionIndexes, size)
+        : editHandle.positionIndexes;
+      // p1 and p1 are end points for edge
+      const p1 = this.getPointForPositionIndexes(
+        this.prevPositionIndexes(positionIndexes, size),
+        editHandle.featureIndex
+      );
+      const p2 = this.getPointForPositionIndexes(positionIndexes, editHandle.featureIndex);
+      if (p1 && p2) {
+        // p3 and p4 are end points for moving (extruding) edge
+        const [p3, p4] = generatePointsParallelToLinePoints(p1, p2, event.mapCoords);
+
+        const updatedData = this.getImmutableFeatureCollection()
+          .replacePosition(
+            editHandle.featureIndex,
+            this.prevPositionIndexes(positionIndexes, size),
+            p4
+          )
+          .replacePosition(editHandle.featureIndex, positionIndexes, p3)
+          .getObject();
+
+        editAction = {
+          updatedData,
+          editType: 'extruding',
+          featureIndexes: [editHandle.featureIndex],
+          editContext: {
+            positionIndexes: this.nextPositionIndexes(editHandle.positionIndexes, size),
+            position: p3,
+          },
+        };
+      }
+    }
+
+    // Cancel map panning if pointer went down on an edit handle
+    const cancelMapPan = Boolean(editHandle);
+
+    return { editAction, cancelMapPan };
+  }
+
+  handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+
+    const editHandle = getPickedEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle && editHandle.type === 'intermediate') {
+      const size = this.coordinatesSize(editHandle.positionIndexes, editHandle.featureIndex);
+      // p1 and p1 are end points for edge
+      const p1 = this.getPointForPositionIndexes(
+        this.prevPositionIndexes(editHandle.positionIndexes, size),
+        editHandle.featureIndex
+      );
+      const p2 = this.getPointForPositionIndexes(
+        editHandle.positionIndexes,
+        editHandle.featureIndex
+      );
+
+      if (p1 && p2) {
+        let updatedData = this.getImmutableFeatureCollection();
+        if (!this.isOrthogonal(editHandle.positionIndexes, editHandle.featureIndex, size)) {
+          updatedData = updatedData.addPosition(
+            editHandle.featureIndex,
+            editHandle.positionIndexes,
+            p2
+          );
+        }
+        if (
+          !this.isOrthogonal(
+            this.prevPositionIndexes(editHandle.positionIndexes, size),
+            editHandle.featureIndex,
+            size
+          )
+        ) {
+          updatedData = updatedData.addPosition(
+            editHandle.featureIndex,
+            editHandle.positionIndexes,
+            p1
+          );
+          this.isPointAdded = true;
+        }
+
+        editAction = {
+          updatedData: updatedData.getObject(),
+          editType: 'startExtruding',
+          featureIndexes: [editHandle.featureIndex],
+          editContext: {
+            positionIndexes: editHandle.positionIndexes,
+            position: p1,
+          },
+        };
+      }
+    }
+
+    return editAction;
+  }
+
+  handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined {
+    let editAction: EditAction | null | undefined = null;
+
+    const selectedFeatureIndexes = this.getSelectedFeatureIndexes();
+    const editHandle = getPickedEditHandle(event.picks);
+    if (selectedFeatureIndexes.length && editHandle) {
+      const size = this.coordinatesSize(editHandle.positionIndexes, editHandle.featureIndex);
+      const positionIndexes = this.isPointAdded
+        ? this.nextPositionIndexes(editHandle.positionIndexes, size)
+        : editHandle.positionIndexes;
+      // p1 and p1 are end points for edge
+      const p1 = this.getPointForPositionIndexes(
+        this.prevPositionIndexes(positionIndexes, size),
+        editHandle.featureIndex
+      );
+      const p2 = this.getPointForPositionIndexes(positionIndexes, editHandle.featureIndex);
+
+      if (p1 && p2) {
+        // p3 and p4 are end points for new moved (extruded) edge
+        const [p3, p4] = generatePointsParallelToLinePoints(p1, p2, event.mapCoords);
+
+        const updatedData = this.getImmutableFeatureCollection()
+          .replacePosition(
+            editHandle.featureIndex,
+            this.prevPositionIndexes(positionIndexes, size),
+            p4
+          )
+          .replacePosition(editHandle.featureIndex, positionIndexes, p3)
+          .getObject();
+
+        editAction = {
+          updatedData,
+          editType: 'extruded',
+          featureIndexes: [editHandle.featureIndex],
+          editContext: {
+            positionIndexes: editHandle.positionIndexes,
+            position: p3,
+          },
+        };
+      }
+    }
+    this.isPointAdded = false;
+
+    return editAction;
+  }
+
+  coordinatesSize(positionIndexes: number[], featureIndex: number) {
+    let size = 0;
+    const feature = this.getImmutableFeatureCollection().getObject().features[featureIndex];
+    const coordinates: any = feature.geometry.coordinates;
+    // for Multi polygons, length will be 3
+    if (positionIndexes.length === 3) {
+      const [a, b] = positionIndexes;
+      if (coordinates.length && coordinates[a].length) {
+        size = coordinates[a][b].length;
+      }
+    } else {
+      const [b] = positionIndexes;
+      if (coordinates.length && coordinates[b].length) {
+        size = coordinates[b].length;
+      }
+    }
+    return size;
+  }
+
+  getBearing(p1: any, p2: any) {
+    const angle = bearing(p1, p2);
+    if (angle < 0) {
+      return Math.floor(360 + angle);
+    }
+    return Math.floor(angle);
+  }
+
+  isOrthogonal(positionIndexes: number[], featureIndex: number, size: number) {
+    if (positionIndexes[positionIndexes.length - 1] === size - 1) {
+      positionIndexes[positionIndexes.length - 1] = 0;
+    }
+    const prevPoint = this.getPointForPositionIndexes(
+      this.prevPositionIndexes(positionIndexes, size),
+      featureIndex
+    );
+    const nextPoint = this.getPointForPositionIndexes(
+      this.nextPositionIndexes(positionIndexes, size),
+      featureIndex
+    );
+    const currentPoint = this.getPointForPositionIndexes(positionIndexes, featureIndex);
+    const prevAngle = this.getBearing(currentPoint, prevPoint);
+    const nextAngle = this.getBearing(currentPoint, nextPoint);
+    return [89, 90, 91, 269, 270, 271].includes(Math.abs(prevAngle - nextAngle));
+  }
+
+  nextPositionIndexes(positionIndexes: number[], size: number): number[] {
+    const next = [...positionIndexes];
+    if (next.length) {
+      next[next.length - 1] = next[next.length - 1] === size - 1 ? 0 : next[next.length - 1] + 1;
+    }
+    return next;
+  }
+
+  prevPositionIndexes(positionIndexes: number[], size: number): number[] {
+    const prev = [...positionIndexes];
+    if (prev.length) {
+      prev[prev.length - 1] = prev[prev.length - 1] === 0 ? size - 2 : prev[prev.length - 1] - 1;
+    }
+    return prev;
+  }
+
+  getPointForPositionIndexes(positionIndexes: number[], featureIndex: number) {
+    let p1;
+    const feature = this.getImmutableFeatureCollection().getObject().features[featureIndex];
+    const coordinates: any = feature.geometry.coordinates;
+    // for Multi polygons, length will be 3
+    if (positionIndexes.length === 3) {
+      const [a, b, c] = positionIndexes;
+      if (coordinates.length && coordinates[a].length) {
+        p1 = coordinates[a][b][c];
+      }
+    } else {
+      const [b, c] = positionIndexes;
+      if (coordinates.length && coordinates[b].length) {
+        p1 = coordinates[b][c];
+      }
+    }
+    return p1;
+  }
+}