@deck.gl-community/editable-layers 9.1.1 → 9.2.0-beta.3

package/dist/index.cjs

@@ -52,6 +52,7 @@ __export(dist_exports, {
   DrawSquareFromCenterMode: () => DrawSquareFromCenterMode,
   DrawSquareMode: () => DrawSquareMode,
   DuplicateMode: () => DuplicateMode,
+  EditModeTrayWidget: () => EditModeTrayWidget,
   EditableGeoJsonLayer: () => EditableGeoJsonLayer,
   EditableH3ClusterLayer: () => EditableH3ClusterLayer,
   ElevatedEditHandleLayer: () => ElevatedEditHandleLayer,
@@ -660,8 +661,549 @@ var TextsLayer = class extends NebulaLayer {
   }
 };
 
+// ../layers/src/path-marker-layer/path-marker-layer.ts
+var import_core4 = require("@deck.gl/core");
+var import_layers5 = require("@deck.gl/layers");
+var import_mesh_layers = require("@deck.gl/mesh-layers");
+
+// ../layers/src/path-outline-layer/path-outline-layer.ts
+var import_layers4 = require("@deck.gl/layers");
+var import_constants2 = require("@luma.gl/constants");
+
+// ../layers/src/path-outline-layer/outline.ts
+var INITIAL_STATE = {
+  outlineEnabled: false,
+  outlineRenderShadowmap: false,
+  outlineShadowmap: null
+};
+function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
+  const uniforms = {};
+  if (outlineEnabled !== void 0) {
+    uniforms.outline_uEnabled = outlineEnabled;
+  }
+  if (outlineRenderShadowmap !== void 0) {
+    uniforms.outline_uRenderOutlines = outlineRenderShadowmap;
+  }
+  if (outlineShadowmap !== void 0) {
+    uniforms.outline_uShadowmap = outlineShadowmap;
+  }
+  return uniforms;
+}
+var 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);
+}
+`;
+var 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;
+}
+`;
+var outline = {
+  name: "outline",
+  vs,
+  fs,
+  getUniforms
+};
+
+// ../layers/src/path-outline-layer/path-outline-layer.ts
+var UNIT = {
+  common: 0,
+  meters: 1,
+  pixels: 2
+};
+function injectShaderCode({ source, code = "" }) {
+  const INJECT_CODE = /}[^{}]*$/;
+  return source.replace(INJECT_CODE, code.concat("\n}\n"));
+}
+var VS_CODE = `  outline_setUV(gl_Position);
+  outline_setZLevel(instanceZLevel);
+`;
+var FS_CODE = `  fragColor = outline_filterColor(fragColor);
+`;
+var OUTLINE_SHADOWMAP_PARAMETERS = {
+  blend: true,
+  blendColorSrcFactor: "one",
+  blendColorDstFactor: "one",
+  blendColorOperation: "max",
+  blendAlphaSrcFactor: "one",
+  blendAlphaDstFactor: "one",
+  blendAlphaOperation: "max",
+  depthWriteEnabled: false,
+  depthCompare: "always"
+};
+var OUTLINE_RENDER_PARAMETERS = {
+  blend: false,
+  depthWriteEnabled: false,
+  depthCompare: "always"
+};
+var defaultProps = {
+  getZLevel: () => 0
+};
+var PathOutlineLayer = class extends import_layers4.PathLayer {
+  state = void 0;
+  // 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) {
+    super.initializeState();
+    const outlineFramebuffer = context.device.createFramebuffer({
+      colorAttachments: ["rgba8unorm"]
+    });
+    this.setState({
+      outlineFramebuffer
+    });
+    this.state.attributeManager.addInstanced({
+      instanceZLevel: {
+        size: 1,
+        type: import_constants2.GL.UNSIGNED_BYTE,
+        accessor: "getZLevel"
+      }
+    });
+  }
+  // Override draw to add render module
+  draw({ moduleParameters = {}, parameters, uniforms, context }) {
+    var _a;
+    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
+    });
+    const { outlineFramebuffer } = this.state;
+    if (context == null ? void 0 : context.viewport) {
+      const viewportWidth = Math.max(1, Math.ceil(context.viewport.width));
+      const viewportHeight = Math.max(1, Math.ceil(context.viewport.height));
+      outlineFramebuffer.resize({ width: viewportWidth, height: viewportHeight });
+    } else {
+      outlineFramebuffer.resize();
+    }
+    const shadowmapTexture = (_a = outlineFramebuffer.colorAttachments[0]) == null ? void 0 : _a.texture;
+    if (!shadowmapTexture) {
+      return;
+    }
+    this.state.model.updateModuleSettings({
+      outlineEnabled: true,
+      outlineRenderShadowmap: true,
+      outlineShadowmap: shadowmapTexture
+    });
+    this.state.model.draw({
+      uniforms: Object.assign({}, uniforms, {
+        jointType: 0,
+        widthScale: this.props.widthScale * 1.3
+      }),
+      parameters: OUTLINE_SHADOWMAP_PARAMETERS,
+      framebuffer: outlineFramebuffer
+    });
+    this.state.model.updateModuleSettings({
+      outlineEnabled: true,
+      outlineRenderShadowmap: false,
+      outlineShadowmap: shadowmapTexture
+    });
+    this.state.model.draw({
+      uniforms: Object.assign({}, uniforms, {
+        jointType: Number(jointRounded),
+        capType: Number(capRounded),
+        widthScale: this.props.widthScale
+      }),
+      parameters: OUTLINE_RENDER_PARAMETERS
+    });
+  }
+};
+__publicField(PathOutlineLayer, "layerName", "PathOutlineLayer");
+__publicField(PathOutlineLayer, "defaultProps", defaultProps);
+
+// ../layers/src/path-marker-layer/arrow-2d-geometry.ts
+var import_engine = require("@luma.gl/engine");
+var Arrow2DGeometry = class extends import_engine.Geometry {
+  constructor(opts = {}) {
+    super(
+      Object.assign({}, opts, {
+        attributes: getArrowAttributes(opts),
+        topology: "triangle-list"
+      })
+    );
+  }
+};
+function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05 }) {
+  const texCoords = [
+    // HEAD
+    0.5,
+    1,
+    0,
+    0.5 - headSize / 2,
+    1 - headSize,
+    0,
+    0.5 + headSize / 2,
+    1 - headSize,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 + tailWidth / 2,
+    1 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    tailStart,
+    0,
+    0.5 - tailWidth / 2,
+    1 - headSize,
+    0,
+    0.5 + tailWidth / 2,
+    1 - headSize,
+    0
+  ];
+  const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];
+  const positions = new Array(texCoords.length);
+  for (let i = 0; i < texCoords.length / 3; i++) {
+    const i3 = i * 3;
+    positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;
+    positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;
+    positions[i3 + 2] = 0;
+  }
+  return {
+    positions: { size: 3, value: new Float32Array(positions) },
+    normals: { size: 3, value: new Float32Array(normals) },
+    texCoords: { size: 2, value: new Float32Array(texCoords) }
+  };
+}
+
+// ../layers/src/path-marker-layer/create-path-markers.ts
+var import_core2 = require("@math.gl/core");
+function getLineLength(vPoints) {
+  let lineLength = 0;
+  for (let i = 0; i < vPoints.length - 1; i++) {
+    lineLength += vPoints[i].distance(vPoints[i + 1]);
+  }
+  return lineLength;
+}
+var DEFAULT_COLOR = [0, 0, 0, 255];
+var DEFAULT_DIRECTION = { forward: true, backward: false };
+function createPathMarkers({
+  data,
+  getPath = (x, context) => x.path,
+  getDirection = (x) => x.direction,
+  getColor = (x) => DEFAULT_COLOR,
+  getMarkerPercentages = (x, info) => [0.5],
+  projectFlat
+}) {
+  const markers = [];
+  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 import_core2.Vector2(p));
+    const vPointsReverse = vPoints.slice(0).reverse();
+    const lineLength = getLineLength(vPoints);
+    const percentages = getMarkerPercentages(object, { lineLength });
+    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
+}) {
+  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 (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 import_core2.Vector2(along, along)).add(path[i]);
+  const vDirection2 = new import_core2.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 };
+}
+
+// ../layers/src/path-marker-layer/polyline.ts
+var import_core3 = require("@math.gl/core");
+function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
+  const lineVector = new import_core3.Vector3(p2).subtract(p1);
+  const pointVector = new import_core3.Vector3(p).subtract(p1);
+  let dotProduct = lineVector.dot(pointVector);
+  if (clampToLine) {
+    dotProduct = (0, import_core3.clamp)(dotProduct, 0, 1);
+  }
+  return lineVector.lerp(p1, p2, dotProduct);
+}
+function getClosestPointOnPolyline({ p, points }) {
+  p = new import_core3.Vector3(p);
+  let pClosest = 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,
+    index,
+    p1: points[index],
+    p2: points[index + 1],
+    distanceSquared,
+    distance: Math.sqrt(distanceSquared)
+  };
+}
+
+// ../layers/src/path-marker-layer/path-marker-layer.ts
+var DISTANCE_FOR_MULTI_ARROWS = 0.1;
+var ARROW_HEAD_SIZE = 0.2;
+var ARROW_TAIL_WIDTH = 0.05;
+var DEFAULT_MARKER_LAYER = import_mesh_layers.SimpleMeshLayer;
+var DEFAULT_MARKER_LAYER_PROPS = {
+  mesh: new Arrow2DGeometry({ headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH })
+};
+var defaultProps2 = 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]
+  }
+);
+var PathMarkerLayer = class extends import_core4.CompositeLayer {
+  state = void 0;
+  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 === import_core4.COORDINATE_SYSTEM.METER_OFFSETS) {
+      const [dx, dy] = viewport.metersToLngLatDelta(xyz);
+      const [x, y] = coordinateOrigin;
+      return viewport.projectFlat([x + dx, dy + y]);
+    } else if (coordinateSystem === import_core4.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);
+      const { point: point14 } = getClosestPointOnPolyline({ points, p: highlightPoint });
+      this.state.closestPoints = [{ position: point14 }];
+    } 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 import_layers5.ScatterplotLayer({
+        id: `${this.props.id}-highlight`,
+        data: this.state.closestPoints,
+        fp64: this.props.fp64
+      })
+    ];
+  }
+};
+__publicField(PathMarkerLayer, "layerName", "PathMarkerLayer");
+__publicField(PathMarkerLayer, "defaultProps", defaultProps2);
+
 // dist/lib/layers/segments-layer.js
-var import_layers4 = require("@deck.gl-community/layers");
 var NEBULA_TO_DECK_DIRECTIONS = {
   [ArrowStyles.NONE]: { forward: false, backward: false },
   [ArrowStyles.FORWARD]: { forward: true, backward: false },
@@ -717,7 +1259,7 @@ var SegmentsLayer = class extends NebulaLayer {
   render({ nebula }) {
     const defaultColor = [0, 0, 0, 255];
     const { objects, updateTrigger } = this.deckCache;
-    return new import_layers4.PathMarkerLayer({
+    return new PathMarkerLayer({
       id: `segments-${this.id}`,
       data: objects,
       opacity: 1,
@@ -743,7 +1285,7 @@ var SegmentsLayer = class extends NebulaLayer {
       highlightColor: toDeckColor(this.highlightColor),
       dashJustified: this.dashed,
       getDashArray: this.dashed ? (nf) => nf.style.dashArray : void 0,
-      markerLayerProps: this.markerLayerProps || import_layers4.PathMarkerLayer.defaultProps.markerLayerProps,
+      markerLayerProps: this.markerLayerProps || PathMarkerLayer.defaultProps.markerLayerProps,
       nebulaLayer: this
     });
   }
@@ -751,12 +1293,12 @@ var SegmentsLayer = class extends NebulaLayer {
 
 // dist/lib/nebula-core.js
 var import_eventemitter32 = require("eventemitter3");
-var import_core2 = require("@deck.gl/core");
+var import_core5 = require("@deck.gl/core");
 var LOGGER_PREFIX = "Nebula: ";
 var NebulaCore = class {
   init(props) {
     this.props = props;
-    this.wmViewport = new import_core2.WebMercatorViewport(this.props.viewport);
+    this.wmViewport = new import_core5.WebMercatorViewport(this.props.viewport);
     ["click", "mousemove", "mouseup", "mousedown"].forEach((name) => document.addEventListener(name, this._onMouseEvent, true));
   }
   detach() {
@@ -765,7 +1307,7 @@ var NebulaCore = class {
   updateProps(newProps) {
     this.props = newProps;
     const { viewport } = this.props;
-    this.wmViewport = new import_core2.WebMercatorViewport(viewport);
+    this.wmViewport = new import_core5.WebMercatorViewport(viewport);
   }
   props = null;
   deckgl = null;
@@ -966,7 +1508,7 @@ var NebulaCore = class {
 };
 
 // dist/editable-layers/editable-geojson-layer.js
-var import_layers6 = require("@deck.gl/layers");
+var import_layers7 = require("@deck.gl/layers");
 
 // dist/edit-modes/geojson-edit-mode.js
 var import_union = __toESM(require("@turf/union"), 1);
@@ -1697,6 +2239,8 @@ var GeoJsonEditMode = class {
   }
   handleClick(event, props) {
   }
+  handleDoubleClick(event, props) {
+  }
   handlePointerMove(event, props) {
     const tentativeFeature = this.createTentativeFeature(props);
     if (tentativeFeature) {
@@ -2802,15 +3346,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
     }
     if (clickSequence.length > 1 && clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1) {
       this.dist = 0;
-      const lineStringToAdd = {
-        type: "LineString",
-        coordinates: [...clickSequence]
-      };
-      this.resetClickSequence();
-      const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
-      if (editAction) {
-        props.onEdit(editAction);
-      }
+      this.finishDrawing(props);
     } else if (positionAdded) {
       props.onEdit({
         // data is the same
@@ -2822,21 +3358,27 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
       });
     }
   }
+  handleDoubleClick(event, props) {
+    this.finishDrawing(props);
+  }
+  finishDrawing(props) {
+    const clickSequence = this.getClickSequence();
+    if (clickSequence.length > 1) {
+      const lineStringToAdd = {
+        type: "LineString",
+        coordinates: [...clickSequence]
+      };
+      this.resetClickSequence();
+      const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+  }
   handleKeyUp(event, props) {
     const { key } = event;
     if (key === "Enter") {
-      const clickSequence = this.getClickSequence();
-      if (clickSequence.length > 1) {
-        const lineStringToAdd = {
-          type: "LineString",
-          coordinates: [...clickSequence]
-        };
-        this.resetClickSequence();
-        const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
-        if (editAction) {
-          props.onEdit(editAction);
-        }
-      }
+      this.finishDrawing(props);
     } else if (key === "Escape") {
       this.resetClickSequence();
       props.onEdit({
@@ -2994,6 +3536,20 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
     guides.features.push(...editHandles);
     return guides;
   }
+  finishDrawing(props) {
+    const clickSequence = this.getClickSequence();
+    if (clickSequence.length > 2) {
+      const polygonToAdd = {
+        type: "Polygon",
+        coordinates: [[...clickSequence, clickSequence[0]]]
+      };
+      this.resetClickSequence();
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+      if (editAction) {
+        props.onEdit(editAction);
+      }
+    }
+  }
   // eslint-disable-next-line complexity
   handleClick(event, props) {
     const { picks } = event;
@@ -3017,15 +3573,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       positionAdded = true;
     }
     if (clickSequence.length > 2 && clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && (clickedEditHandle.properties.positionIndexes[0] === 0 || clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)) {
-      const polygonToAdd = {
-        type: "Polygon",
-        coordinates: [[...clickSequence, clickSequence[0]]]
-      };
-      this.resetClickSequence();
-      const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
-      if (editAction) {
-        props.onEdit(editAction);
-      }
+      this.finishDrawing(props);
     } else if (positionAdded) {
       props.onEdit({
         // data is the same
@@ -3037,20 +3585,12 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       });
     }
   }
+  handleDoubleClick(event, props) {
+    this.finishDrawing(props);
+  }
   handleKeyUp(event, props) {
     if (event.key === "Enter") {
-      const clickSequence = this.getClickSequence();
-      if (clickSequence.length > 2) {
-        const polygonToAdd = {
-          type: "Polygon",
-          coordinates: [[...clickSequence, clickSequence[0]]]
-        };
-        this.resetClickSequence();
-        const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
-        if (editAction) {
-          props.onEdit(editAction);
-        }
-      }
+      this.finishDrawing(props);
     } else if (event.key === "Escape") {
       this.resetClickSequence();
       props.onEdit({
@@ -3987,13 +4527,15 @@ var DeleteMode = class extends GeoJsonEditMode {
 var PROJECTED_PIXEL_SIZE_MULTIPLIER2 = 2 / 3;
 
 // dist/editable-layers/editable-layer.js
-var import_core3 = require("@deck.gl/core");
-var EVENT_TYPES = ["click", "pointermove", "panstart", "panmove", "panend", "keyup"];
-var EditableLayer = class extends import_core3.CompositeLayer {
+var import_core6 = require("@deck.gl/core");
+var EVENT_TYPES = ["click", "pointermove", "panstart", "panmove", "panend", "keyup", "dblclick"];
+var EditableLayer = class extends import_core6.CompositeLayer {
   state = void 0;
   // Overridable interaction event handlers
   onLayerClick(event) {
   }
+  onLayerDoubleClick(event) {
+  }
   onStartDragging(event) {
   }
   onStopDragging(event) {
@@ -4063,6 +4605,9 @@ var EditableLayer = class extends import_core3.CompositeLayer {
       sourceEvent: srcEvent
     });
   }
+  _ondblclick({ srcEvent }) {
+    this.onLayerDoubleClick(srcEvent);
+  }
   _onkeyup({ srcEvent }) {
     this.onLayerKeyUp(srcEvent);
   }
@@ -4177,7 +4722,7 @@ var EditableLayer = class extends import_core3.CompositeLayer {
 __publicField(EditableLayer, "layerName", "EditableLayer");
 
 // dist/editable-layers/editable-path-layer.js
-var import_layers5 = require("@deck.gl/layers");
+var import_layers6 = require("@deck.gl/layers");
 var uniformBlock = `uniform pickingLineWidthUniforms {
   float extraPixels;
 } pickingLineWidth;
@@ -4190,11 +4735,11 @@ var pickingUniforms = {
     extraPixels: "f32"
   }
 };
-var defaultProps = {
-  ...import_layers5.PathLayer.defaultProps,
+var defaultProps3 = {
+  ...import_layers6.PathLayer.defaultProps,
   pickingLineWidthExtraPixels: { type: "number", min: 0, value: Number.MAX_SAFE_INTEGER }
 };
-var EditablePathLayer = class extends import_layers5.PathLayer {
+var EditablePathLayer = class extends import_layers6.PathLayer {
   getShaders() {
     const shaders = super.getShaders();
     shaders.vs = insertBefore(shaders.vs, "vec3 width;", `
@@ -4215,7 +4760,7 @@ var EditablePathLayer = class extends import_layers5.PathLayer {
     super.draw(props);
   }
 };
-EditablePathLayer.defaultProps = defaultProps;
+EditablePathLayer.defaultProps = defaultProps3;
 EditablePathLayer.layerName = "EditablePathLayer";
 
 // dist/editable-layers/editable-geojson-layer.js
@@ -4273,7 +4818,7 @@ function getEditHandleRadius(handle) {
       return DEFAULT_EDITING_INTERMEDIATE_POINT_RADIUS;
   }
 }
-var defaultProps2 = {
+var defaultProps4 = {
   mode: DEFAULT_EDIT_MODE,
   // Edit and interaction events
   onEdit: () => {
@@ -4405,7 +4950,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         getLineWidth: [this.props.selectedFeatureIndexes, this.props.mode]
       }
     });
-    let layers = [new import_layers6.GeoJsonLayer(subLayerProps)];
+    let layers = [new import_layers7.GeoJsonLayer(subLayerProps)];
     layers = layers.concat(this.createGuidesLayers(), this.createTooltipsLayers());
     return layers;
   }
@@ -4519,7 +5064,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
     };
     if (this.props.editHandleType === "icon") {
       subLayerProps["points-icon"] = {
-        type: import_layers6.IconLayer,
+        type: import_layers7.IconLayer,
         iconAtlas: this.props.editHandleIconAtlas,
         iconMapping: this.props.editHandleIconMapping,
         sizeUnits: this.props.editHandleIconSizeUnits,
@@ -4532,7 +5077,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
       };
     } else {
       subLayerProps["points-circle"] = {
-        type: import_layers6.ScatterplotLayer,
+        type: import_layers7.ScatterplotLayer,
         radiusScale: this.props.editHandlePointRadiusScale,
         stroked: this.props.editHandlePointOutline,
         getLineWidth: this.props.editHandlePointStrokeWidth,
@@ -4545,7 +5090,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         billboard: this.props.billboard
       };
     }
-    const layer = new import_layers6.GeoJsonLayer(this.getSubLayerProps({
+    const layer = new import_layers7.GeoJsonLayer(this.getSubLayerProps({
       id: "guides",
       data: guides,
       fp64: this.props.fp64,
@@ -4568,7 +5113,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
   createTooltipsLayers() {
     const mode = this.getActiveMode();
     const tooltips = mode.getTooltips(this.getModeProps(this.props));
-    const layer = new import_layers6.TextLayer({
+    const layer = new import_layers7.TextLayer({
       getSize: DEFAULT_TOOLTIP_FONT_SIZE,
       ...this.getSubLayerProps({
         id: "tooltips",
@@ -4580,6 +5125,11 @@ var EditableGeoJsonLayer = class extends EditableLayer {
   onLayerClick(event) {
     this.getActiveMode().handleClick(event, this.getModeProps(this.props));
   }
+  onLayerDoubleClick(event) {
+    if (this.getActiveMode().handleDoubleClick) {
+      this.getActiveMode().handleDoubleClick(event, this.getModeProps(this.props));
+    }
+  }
   onLayerKeyUp(event) {
     this.getActiveMode().handleKeyUp(event, this.getModeProps(this.props));
   }
@@ -4611,7 +5161,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
   }
 };
 __publicField(EditableGeoJsonLayer, "layerName", "EditableGeoJsonLayer");
-__publicField(EditableGeoJsonLayer, "defaultProps", defaultProps2);
+__publicField(EditableGeoJsonLayer, "defaultProps", defaultProps4);
 
 // dist/editable-layers/editable-h3-cluster-layer.js
 var import_geo_layers = require("@deck.gl/geo-layers");
@@ -4621,7 +5171,7 @@ var EMPTY_FEATURE_COLLECTION = {
   type: "FeatureCollection",
   features: []
 };
-var defaultProps3 = {
+var defaultProps5 = {
   mode: DEFAULT_EDIT_MODE2,
   ...EditableGeoJsonLayer.defaultProps,
   // h3 layer
@@ -4760,11 +5310,11 @@ var EditableH3ClusterLayer = class extends EditableLayer {
   }
 };
 __publicField(EditableH3ClusterLayer, "layerName", "EditableH3ClusterLayer");
-__publicField(EditableH3ClusterLayer, "defaultProps", defaultProps3);
+__publicField(EditableH3ClusterLayer, "defaultProps", defaultProps5);
 
 // dist/editable-layers/selection-layer.js
-var import_core4 = require("@deck.gl/core");
-var import_layers7 = require("@deck.gl/layers");
+var import_core7 = require("@deck.gl/core");
+var import_layers8 = require("@deck.gl/layers");
 var import_helpers16 = require("@turf/helpers");
 var import_buffer3 = __toESM(require("@turf/buffer"), 1);
 var import_difference4 = __toESM(require("@turf/difference"), 1);
@@ -4780,7 +5330,7 @@ var MODE_MAP = {
 var MODE_CONFIG_MAP = {
   [SELECTION_TYPE2.RECTANGLE]: { dragToDraw: true }
 };
-var defaultProps4 = {
+var defaultProps6 = {
   selectionType: SELECTION_TYPE2.RECTANGLE,
   layerIds: [],
   onSelect: () => {
@@ -4815,7 +5365,7 @@ var PASS_THROUGH_PROPS = [
   "getTentativeFillColor",
   "getTentativeLineWidth"
 ];
-var SelectionLayer = class extends import_core4.CompositeLayer {
+var SelectionLayer = class extends import_core7.CompositeLayer {
   state = void 0;
   _selectRectangleObjects(coordinates) {
     const { layerIds, onSelect } = this.props;
@@ -4899,7 +5449,7 @@ var SelectionLayer = class extends import_core4.CompositeLayer {
     ];
     if (pendingPolygonSelection) {
       const { bigPolygon } = pendingPolygonSelection;
-      layers.push(new import_layers7.PolygonLayer(this.getSubLayerProps({
+      layers.push(new import_layers8.PolygonLayer(this.getSubLayerProps({
         id: LAYER_ID_BLOCKER,
         pickable: true,
         stroked: false,
@@ -4917,19 +5467,19 @@ var SelectionLayer = class extends import_core4.CompositeLayer {
   }
 };
 __publicField(SelectionLayer, "layerName", "SelectionLayer");
-__publicField(SelectionLayer, "defaultProps", defaultProps4);
+__publicField(SelectionLayer, "defaultProps", defaultProps6);
 
 // dist/editable-layers/elevated-edit-handle-layer.js
-var import_core5 = require("@deck.gl/core");
-var import_layers8 = require("@deck.gl/layers");
-var defaultProps5 = {};
-var ElevatedEditHandleLayer = class extends import_core5.CompositeLayer {
+var import_core8 = require("@deck.gl/core");
+var import_layers9 = require("@deck.gl/layers");
+var defaultProps7 = {};
+var ElevatedEditHandleLayer = class extends import_core8.CompositeLayer {
   renderLayers() {
-    const handles = new import_layers8.ScatterplotLayer(Object.assign({}, this.props, {
+    const handles = new import_layers9.ScatterplotLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-ScatterplotLayer`,
       data: this.props.data
     }));
-    const lines = new import_layers8.LineLayer(Object.assign({}, this.props, {
+    const lines = new import_layers9.LineLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-LineLayer`,
       data: this.props.data,
       pickable: false,
@@ -4942,7 +5492,225 @@ var ElevatedEditHandleLayer = class extends import_core5.CompositeLayer {
   }
 };
 __publicField(ElevatedEditHandleLayer, "layerName", "ElevatedEditHandleLayer");
-__publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps5);
+__publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps7);
+
+// dist/widgets/edit-mode-tray-widget.js
+var import_jsx_runtime = require("preact/jsx-runtime");
+var import_preact = require("preact");
+var import_core9 = require("@deck.gl/core");
+var ROOT_STYLE = {
+  position: "absolute",
+  display: "flex",
+  pointerEvents: "auto",
+  userSelect: "none",
+  zIndex: "99"
+};
+var TRAY_BASE_STYLE = {
+  display: "flex",
+  gap: "6px",
+  background: "rgba(36, 40, 41, 0.88)",
+  borderRadius: "999px",
+  padding: "6px",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+};
+var BUTTON_BASE_STYLE = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  color: "#f0f0f0",
+  width: "34px",
+  height: "34px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  cursor: "pointer",
+  padding: "0",
+  transition: "background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease"
+};
+var BUTTON_ACTIVE_STYLE = {
+  background: "#0071e3",
+  color: "#ffffff",
+  boxShadow: "0 0 0 2px rgba(255, 255, 255, 0.35)"
+};
+var BUTTON_LABEL_STYLE = {
+  fontSize: "10px",
+  marginTop: "2px",
+  lineHeight: "12px"
+};
+var _EditModeTrayWidget = class extends import_core9.Widget {
+  placement = "top-left";
+  className = "deck-widget-edit-mode-tray";
+  layout = "vertical";
+  selectedModeId = null;
+  deck = null;
+  appliedCustomClassName = null;
+  constructor(props = {}) {
+    super({ ..._EditModeTrayWidget.defaultProps, ...props });
+    this.placement = props.placement ?? _EditModeTrayWidget.defaultProps.placement;
+    this.layout = props.layout ?? _EditModeTrayWidget.defaultProps.layout;
+    this.selectedModeId = this.resolveSelectedModeId(props.modes ?? [], props);
+  }
+  setProps(props) {
+    if (props.placement !== void 0) {
+      this.placement = props.placement;
+    }
+    if (props.layout !== void 0) {
+      this.layout = props.layout;
+    }
+    const modes = props.modes ?? this.props.modes ?? [];
+    this.selectedModeId = this.resolveSelectedModeId(modes, props);
+    super.setProps(props);
+    this.renderTray();
+  }
+  onAdd({ deck }) {
+    this.deck = deck;
+  }
+  onRemove() {
+    this.deck = null;
+    const root = this.rootElement;
+    if (root) {
+      (0, import_preact.render)(null, root);
+    }
+    this.rootElement = null;
+  }
+  onRenderHTML(rootElement) {
+    const style = { ...ROOT_STYLE, ...this.props.style };
+    Object.assign(rootElement.style, style);
+    if (this.appliedCustomClassName && this.appliedCustomClassName !== this.props.className) {
+      rootElement.classList.remove(this.appliedCustomClassName);
+      this.appliedCustomClassName = null;
+    }
+    if (this.props.className) {
+      rootElement.classList.add(this.props.className);
+      this.appliedCustomClassName = this.props.className;
+    }
+    rootElement.classList.add(this.className);
+    this.renderTray();
+  }
+  renderTray() {
+    const root = this.rootElement;
+    if (!root) {
+      return;
+    }
+    const modes = this.props.modes ?? [];
+    const selectedId = this.selectedModeId;
+    const direction = this.layout === "horizontal" ? "row" : "column";
+    const trayStyle = {
+      ...TRAY_BASE_STYLE,
+      flexDirection: direction
+    };
+    const stopEvent = (event) => {
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+    };
+    const ui = (0, import_jsx_runtime.jsx)("div", { style: trayStyle, onPointerDown: stopEvent, onPointerMove: stopEvent, onPointerUp: stopEvent, onMouseDown: stopEvent, onMouseMove: stopEvent, onMouseUp: stopEvent, onTouchStart: stopEvent, onTouchMove: stopEvent, onTouchEnd: stopEvent, children: modes.map((option, index) => {
+      const id = this.getModeId(option, index);
+      const active = id === selectedId;
+      const label = option.label ?? "";
+      const title = option.title ?? label;
+      const buttonStyle = {
+        ...BUTTON_BASE_STYLE,
+        ...active ? BUTTON_ACTIVE_STYLE : {}
+      };
+      return (0, import_jsx_runtime.jsxs)("button", { type: "button", title: title || void 0, "aria-pressed": active, style: buttonStyle, onClick: (event) => {
+        stopEvent(event);
+        this.handleSelect(option, id);
+      }, children: [option.icon, label ? (0, import_jsx_runtime.jsx)("span", { style: BUTTON_LABEL_STYLE, children: label }) : null] }, id);
+    }) });
+    (0, import_preact.render)(ui, root);
+  }
+  handleSelect(option, id) {
+    var _a, _b;
+    if (this.selectedModeId !== id) {
+      this.selectedModeId = id;
+      this.renderTray();
+    }
+    (_b = (_a = this.props).onSelectMode) == null ? void 0 : _b.call(_a, {
+      id,
+      mode: option.mode,
+      option
+    });
+  }
+  resolveSelectedModeId(modes, props) {
+    var _a;
+    if (props.selectedModeId !== void 0) {
+      return props.selectedModeId;
+    }
+    const activeMode = props.activeMode ?? ((_a = this.props) == null ? void 0 : _a.activeMode) ?? null;
+    if (activeMode) {
+      const match = this.findOptionByMode(modes, activeMode);
+      if (match) {
+        return this.getModeId(match.option, match.index);
+      }
+    }
+    if (this.selectedModeId) {
+      const existing = this.findOptionById(modes, this.selectedModeId);
+      if (existing) {
+        return this.selectedModeId;
+      }
+    }
+    const first = modes[0];
+    return first ? this.getModeId(first, 0) : null;
+  }
+  findOptionByMode(modes, activeMode) {
+    for (let index = 0; index < modes.length; index++) {
+      const option = modes[index];
+      if (option.mode === activeMode) {
+        return { option, index };
+      }
+      if (this.isSameMode(option.mode, activeMode)) {
+        return { option, index };
+      }
+    }
+    return null;
+  }
+  findOptionById(modes, id) {
+    for (let index = 0; index < modes.length; index++) {
+      if (this.getModeId(modes[index], index) === id) {
+        return { option: modes[index], index };
+      }
+    }
+    return null;
+  }
+  getModeId(option, index) {
+    if (option.id) {
+      return option.id;
+    }
+    const mode = option.mode;
+    if (mode) {
+      if (typeof mode === "function" && mode.name) {
+        return mode.name;
+      }
+      if (mode && mode.constructor && mode.constructor.name) {
+        return mode.constructor.name;
+      }
+    }
+    return `mode-${index}`;
+  }
+  isSameMode(modeA, modeB) {
+    if (modeA === modeB) {
+      return true;
+    }
+    const constructorA = modeA == null ? void 0 : modeA.constructor;
+    const constructorB = modeB == null ? void 0 : modeB.constructor;
+    return Boolean(constructorA && constructorB && constructorA === constructorB);
+  }
+};
+var EditModeTrayWidget = _EditModeTrayWidget;
+__publicField(EditModeTrayWidget, "defaultProps", {
+  id: "edit-mode-tray",
+  placement: "top-left",
+  layout: "vertical",
+  modes: [],
+  style: {},
+  className: ""
+});
 
 // dist/edit-modes/resize-circle-mode.js
 var import_nearest_point_on_line2 = __toESM(require("@turf/nearest-point-on-line"), 1);