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

package/dist/mode-handlers/split-polygon-handler.js

@@ -0,0 +1,154 @@
+import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
+import turfDifference from '@turf/difference';
+import turfBuffer from '@turf/buffer';
+import lineIntersect from '@turf/line-intersect';
+import { lineString } from '@turf/helpers';
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import turfDestination from '@turf/destination';
+import turfPolygonToLine from '@turf/polygon-to-line';
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import { generatePointsParallelToLinePoints } from '../utils';
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class SplitPolygonHandler extends ModeHandler {
+    calculateMapCoords(clickSequence, mapCoords) {
+        const modeConfig = this.getModeConfig();
+        if (!modeConfig || !modeConfig.lock90Degree || !clickSequence.length) {
+            return mapCoords;
+        }
+        if (clickSequence.length === 1) {
+            // if first point is clicked, then find closest polygon point and build ~90deg vector
+            const firstPoint = clickSequence[0];
+            const selectedGeometry = this.getSelectedGeometry();
+            // @ts-expect-error turf type diff
+            const feature = turfPolygonToLine(selectedGeometry);
+            const lines = feature.type === 'FeatureCollection' ? feature.features : [feature];
+            let minDistance = Number.MAX_SAFE_INTEGER;
+            let closestPoint = null;
+            // If Multipolygon, then we should find nearest polygon line and stick split to it.
+            lines.forEach((line) => {
+                const snapPoint = nearestPointOnLine(line, firstPoint);
+                const distanceFromOrigin = turfDistance(snapPoint, firstPoint);
+                if (minDistance > distanceFromOrigin) {
+                    minDistance = distanceFromOrigin;
+                    closestPoint = snapPoint;
+                }
+            });
+            if (closestPoint) {
+                // closest point is used as 90degree entry to the polygon
+                const lastBearing = turfBearing(firstPoint, closestPoint);
+                const currentDistance = turfDistance(firstPoint, mapCoords, { units: 'meters' });
+                return turfDestination(firstPoint, currentDistance, lastBearing, {
+                    units: 'meters',
+                }).geometry.coordinates;
+            }
+            return mapCoords;
+        }
+        // Allow only 90 degree turns
+        const lastPoint = clickSequence[clickSequence.length - 1];
+        const [approximatePoint] = generatePointsParallelToLinePoints(clickSequence[clickSequence.length - 2], lastPoint, mapCoords);
+        // align point with current ground
+        const nearestPt = nearestPointOnLine(lineString([lastPoint, approximatePoint]), mapCoords)
+            .geometry.coordinates;
+        return nearestPt;
+    }
+    handleClick(event) {
+        super.handleClick({
+            ...event,
+            mapCoords: this.calculateMapCoords(this.getClickSequence(), event.mapCoords),
+        });
+        const editAction = null;
+        const tentativeFeature = this.getTentativeFeature();
+        const selectedGeometry = this.getSelectedGeometry();
+        const clickSequence = this.getClickSequence();
+        if (!selectedGeometry) {
+            // eslint-disable-next-line no-console,no-undef
+            console.warn('A polygon must be selected for splitting');
+            this._setTentativeFeature(null);
+            return editAction;
+        }
+        const pt = {
+            type: 'Point',
+            coordinates: clickSequence[clickSequence.length - 1],
+        };
+        // @ts-expect-error turf type diff
+        const isPointInPolygon = booleanPointInPolygon(pt, selectedGeometry);
+        if (clickSequence.length > 1 && tentativeFeature && !isPointInPolygon) {
+            this.resetClickSequence();
+            // @ts-expect-error turf type diff
+            const isLineInterectingWithPolygon = lineIntersect(tentativeFeature, selectedGeometry);
+            if (isLineInterectingWithPolygon.features.length === 0) {
+                this._setTentativeFeature(null);
+                return editAction;
+            }
+            return this.splitPolygon();
+        }
+        return editAction;
+    }
+    handlePointerMove({ mapCoords }) {
+        const clickSequence = this.getClickSequence();
+        const result = { editAction: null, cancelMapPan: false };
+        if (clickSequence.length === 0) {
+            // nothing to do yet
+            return result;
+        }
+        this._setTentativeFeature({
+            type: 'Feature',
+            geometry: {
+                type: 'LineString',
+                coordinates: [...clickSequence, this.calculateMapCoords(clickSequence, mapCoords)],
+            },
+        });
+        return result;
+    }
+    splitPolygon() {
+        const selectedGeometry = this.getSelectedGeometry();
+        const tentativeFeature = this.getTentativeFeature();
+        const featureIndex = this.getSelectedFeatureIndexes()[0];
+        const modeConfig = this.getModeConfig() || {};
+        // Default gap in between the polygon
+        let { gap = 0.1, units = 'centimeters' } = modeConfig;
+        if (gap === 0) {
+            gap = 0.1;
+            units = 'centimeters';
+        }
+        // @ts-expect-error turf type diff
+        const buffer = turfBuffer(tentativeFeature, gap, { units });
+        // @ts-expect-error turf type diff
+        const updatedGeometry = turfDifference(selectedGeometry, buffer);
+        this._setTentativeFeature(null);
+        if (!updatedGeometry) {
+            // eslint-disable-next-line no-console,no-undef
+            console.warn('Canceling edit. Split Polygon erased');
+            return null;
+        }
+        const { type, coordinates } = updatedGeometry.geometry;
+        let updatedCoordinates = []; // TODO
+        if (type === 'Polygon') {
+            // Update the coordinates as per Multipolygon
+            updatedCoordinates = coordinates.map((c) => [c]);
+        }
+        else {
+            // Handle Case when Multipolygon has holes
+            updatedCoordinates = coordinates.reduce((agg, prev) => {
+                prev.forEach((p) => {
+                    agg.push([p]);
+                });
+                return agg;
+            }, []);
+        }
+        // Update the type to Mulitpolygon
+        const updatedData = this.getImmutableFeatureCollection().replaceGeometry(featureIndex, {
+            type: 'MultiPolygon',
+            coordinates: updatedCoordinates,
+        });
+        const editAction = {
+            updatedData: updatedData.getObject(),
+            editType: 'split',
+            featureIndexes: [featureIndex],
+            editContext: null,
+        };
+        return editAction;
+    }
+}

package/dist/mode-handlers/three-click-polygon-handler.d.ts

@@ -0,0 +1,5 @@
+import { ClickEvent } from '../edit-modes/types';
+import { ModeHandler, EditAction } from './mode-handler';
+export declare class ThreeClickPolygonHandler extends ModeHandler {
+    handleClick(event: ClickEvent): EditAction | null | undefined;
+}

package/dist/mode-handlers/three-click-polygon-handler.js

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

package/dist/mode-handlers/translate-handler.d.ts

@@ -0,0 +1,17 @@
+import { FeatureCollection, Position } from '../geojson-types';
+import { PointerMoveEvent, StartDraggingEvent, StopDraggingEvent } from '../edit-modes/types';
+import { EditAction, ModeHandler } from './mode-handler';
+export declare class TranslateHandler extends ModeHandler {
+    _geometryBeforeTranslate: FeatureCollection | null | undefined;
+    _isTranslatable: boolean;
+    handlePointerMove(event: PointerMoveEvent): {
+        editAction: EditAction | null | undefined;
+        cancelMapPan: boolean;
+    };
+    handleStartDragging(event: StartDraggingEvent): EditAction | null | undefined;
+    handleStopDragging(event: StopDraggingEvent): EditAction | null | undefined;
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): string;
+    getTranslateAction(startDragPoint: Position, currentPoint: Position, editType: string): EditAction | null | undefined;
+}

package/dist/mode-handlers/translate-handler.js

@@ -0,0 +1,72 @@
+import turfBearing from '@turf/bearing';
+import turfDistance from '@turf/distance';
+import turfTransformTranslate from '@turf/transform-translate';
+import { point } from '@turf/helpers';
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class TranslateHandler extends ModeHandler {
+    _geometryBeforeTranslate;
+    _isTranslatable = undefined;
+    handlePointerMove(event) {
+        let editAction = 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) {
+        if (!this._isTranslatable) {
+            return null;
+        }
+        this._geometryBeforeTranslate = this.getSelectedFeaturesAsFeatureCollection();
+        return null;
+    }
+    handleStopDragging(event) {
+        let editAction = null;
+        if (this._geometryBeforeTranslate) {
+            // Translate the geometry
+            editAction = this.getTranslateAction(event.pointerDownMapCoords, event.mapCoords, 'translated');
+            this._geometryBeforeTranslate = null;
+        }
+        return editAction;
+    }
+    getCursor({ isDragging }) {
+        if (this._isTranslatable) {
+            return 'move';
+        }
+        return isDragging ? 'grabbing' : 'grab';
+    }
+    getTranslateAction(startDragPoint, currentPoint, editType) {
+        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 = 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/dist/mode-handlers/two-click-polygon-handler.d.ts

@@ -0,0 +1,5 @@
+import { ClickEvent } from '../edit-modes/types';
+import { ModeHandler, EditAction } from './mode-handler';
+export declare class TwoClickPolygonHandler extends ModeHandler {
+    handleClick(event: ClickEvent): EditAction | null | undefined;
+}

package/dist/mode-handlers/two-click-polygon-handler.js

@@ -0,0 +1,18 @@
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class TwoClickPolygonHandler extends ModeHandler {
+    handleClick(event) {
+        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/dist/mode-handlers/view-handler.d.ts

@@ -0,0 +1,8 @@
+import { Position } from '../geojson-types';
+import { EditHandle, ModeHandler } from './mode-handler';
+export declare class ViewHandler extends ModeHandler {
+    getCursor({ isDragging }: {
+        isDragging: boolean;
+    }): string;
+    getEditHandles(picks?: Array<Record<string, any>>, mapCoords?: Position): EditHandle[];
+}

package/dist/mode-handlers/view-handler.js

@@ -0,0 +1,10 @@
+import { ModeHandler } from './mode-handler';
+// TODO edit-modes: delete handlers once EditMode fully implemented
+export class ViewHandler extends ModeHandler {
+    getCursor({ isDragging }) {
+        return isDragging ? 'grabbing' : 'grab';
+    }
+    getEditHandles(picks, mapCoords) {
+        return [];
+    }
+}

package/dist/shaderlib/color/color.d.ts

@@ -0,0 +1,8 @@
+declare function getUniforms(opts?: Record<string, number>): Record<string, number>;
+declare const _default: {
+    name: string;
+    vs: string;
+    fs: string;
+    getUniforms: typeof getUniforms;
+};
+export default _default;

package/dist/shaderlib/color/color.js

@@ -0,0 +1,51 @@
+// TODO - this module is a WIP
+/* eslint-disable camelcase */
+const INITIAL_STATE = {
+    color_uOpacity: 1.0,
+    color_uDesaturate: 0.0,
+    color_uBrightness: 1.0,
+};
+function getUniforms(opts = INITIAL_STATE) {
+    const uniforms = {};
+    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/dist/shaderlib/outline/outline.d.ts

@@ -0,0 +1,8 @@
+declare function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap }?: Record<string, any>): Record<string, any>;
+declare const _default: {
+    name: string;
+    vs: string;
+    fs: string;
+    getUniforms: typeof getUniforms;
+};
+export default _default;

package/dist/shaderlib/outline/outline.js

@@ -0,0 +1,97 @@
+/* eslint-disable camelcase */
+const INITIAL_STATE = {
+    outlineEnabled: false,
+    outlineRenderShadowmap: false,
+    outlineShadowmap: null,
+};
+function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
+    const uniforms = {};
+    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/dist/shaderlib/utils/utils.d.ts

@@ -0,0 +1,8 @@
+declare function getUniforms({}?: {}): void;
+declare const _default: {
+    name: string;
+    vs: string;
+    fs: string;
+    getUniforms: typeof getUniforms;
+};
+export default _default;

package/dist/shaderlib/utils/utils.js

@@ -0,0 +1,28 @@
+// 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/dist/translateFromCenter.d.ts

@@ -0,0 +1,4 @@
+import type { Feature as TurfFeature, Geometry as TurfGeometry } from '@turf/helpers';
+export declare function translateFromCenter(feature: TurfFeature<TurfGeometry>, distance: number, direction: number): TurfFeature<TurfGeometry, {
+    [name: string]: any;
+}>;

package/dist/translateFromCenter.js

@@ -0,0 +1,19 @@
+import turfCenter from '@turf/center';
+import turfRhumbBearing from '@turf/rhumb-bearing';
+import turfRhumbDistance from '@turf/rhumb-distance';
+import turfRhumbDestination from '@turf/rhumb-destination';
+import { mapCoords } from './edit-modes/utils';
+// This function takes feature's center, moves it,
+// and builds new feature around it keeping the proportions
+export function translateFromCenter(feature, distance, direction) {
+    const initialCenterPoint = turfCenter(feature);
+    const movedCenterPoint = turfRhumbDestination(initialCenterPoint, distance, direction);
+    const movedCoordinates = mapCoords(feature.geometry.coordinates, (coordinate) => {
+        const distance = turfRhumbDistance(initialCenterPoint.geometry.coordinates, coordinate);
+        const direction = turfRhumbBearing(initialCenterPoint.geometry.coordinates, coordinate);
+        const movedPosition = turfRhumbDestination(movedCenterPoint.geometry.coordinates, distance, direction).geometry.coordinates;
+        return movedPosition;
+    });
+    feature.geometry.coordinates = movedCoordinates;
+    return feature;
+}

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+export type LayerMouseEventResult = {
+    eventConsumed?: boolean;
+    eventSoftConsumed?: boolean;
+    mousePointer?: string | null | undefined;
+    shouldRedraw?: boolean | string[];
+};
+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/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,20 @@
+import { FeatureOf, FeatureWithProps, LineString, Point, Position } from './geojson-types';
+import { Viewport } from './types';
+export type NearestPointType = FeatureWithProps<Point, {
+    dist: number;
+    index: number;
+}>;
+export declare function toDeckColor(color?: [number, number, number, number] | number, defaultColor?: [number, number, number, number]): [number, number, number, number];
+export declare function recursivelyTraverseNestedArrays(array: Array<any>, prefix: Array<number>, fn: Function): boolean;
+export declare function generatePointsParallelToLinePoints(p1: Position, p2: Position, mapCoords: Position): Position[];
+export declare function distance2d(x1: number, y1: number, x2: number, y2: number): number;
+export declare function mix(a: number, b: number, ratio: number): number;
+export declare function nearestPointOnProjectedLine(line: FeatureOf<LineString>, inPoint: FeatureOf<Point>, viewport: Viewport): NearestPointType;
+/**
+ * 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 declare function insertBefore(base: string, insertBefore: string, toInsert: string): string;