@deck.gl-community/editable-layers 9.2.0-beta.2 → 9.2.0-beta.4

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,525 +661,8 @@ 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 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();
-    this.setState({
-      outlineFramebuffer: context.device.createFramebuffer({}),
-      dummyTexture: context.device.createTexture({ width: 1, height: 1 })
-    });
-    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 }) {
-    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, dummyTexture } = this.state;
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: true,
-      outlineShadowmap: dummyTexture
-    });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: 0,
-        widthScale: this.props.widthScale * 1.3
-      }),
-      parameters: {
-        depthTest: false,
-        // Biggest value needs to go into buffer
-        blendEquation: import_constants2.GL.MAX
-      },
-      framebuffer: outlineFramebuffer
-    });
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: false,
-      outlineShadowmap: outlineFramebuffer
-    });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: Number(jointRounded),
-        capType: Number(capRounded),
-        widthScale: this.props.widthScale
-      }),
-      parameters: {
-        depthTest: false
-      }
-    });
-  }
-};
-__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 },
@@ -1234,7 +718,7 @@ var SegmentsLayer = class extends NebulaLayer {
   render({ nebula }) {
     const defaultColor = [0, 0, 0, 255];
     const { objects, updateTrigger } = this.deckCache;
-    return new PathMarkerLayer({
+    return new import_layers4.PathMarkerLayer({
       id: `segments-${this.id}`,
       data: objects,
       opacity: 1,
@@ -1260,7 +744,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 || PathMarkerLayer.defaultProps.markerLayerProps,
+      markerLayerProps: this.markerLayerProps || import_layers4.PathMarkerLayer.defaultProps.markerLayerProps,
       nebulaLayer: this
     });
   }
@@ -1268,12 +752,12 @@ var SegmentsLayer = class extends NebulaLayer {
 
 // dist/lib/nebula-core.js
 var import_eventemitter32 = require("eventemitter3");
-var import_core5 = require("@deck.gl/core");
+var import_core2 = require("@deck.gl/core");
 var LOGGER_PREFIX = "Nebula: ";
 var NebulaCore = class {
   init(props) {
     this.props = props;
-    this.wmViewport = new import_core5.WebMercatorViewport(this.props.viewport);
+    this.wmViewport = new import_core2.WebMercatorViewport(this.props.viewport);
     ["click", "mousemove", "mouseup", "mousedown"].forEach((name) => document.addEventListener(name, this._onMouseEvent, true));
   }
   detach() {
@@ -1282,7 +766,7 @@ var NebulaCore = class {
   updateProps(newProps) {
     this.props = newProps;
     const { viewport } = this.props;
-    this.wmViewport = new import_core5.WebMercatorViewport(viewport);
+    this.wmViewport = new import_core2.WebMercatorViewport(viewport);
   }
   props = null;
   deckgl = null;
@@ -1483,7 +967,7 @@ var NebulaCore = class {
 };
 
 // dist/editable-layers/editable-geojson-layer.js
-var import_layers7 = require("@deck.gl/layers");
+var import_layers6 = require("@deck.gl/layers");
 
 // dist/edit-modes/geojson-edit-mode.js
 var import_union = __toESM(require("@turf/union"), 1);
@@ -4502,9 +3986,9 @@ var DeleteMode = class extends GeoJsonEditMode {
 var PROJECTED_PIXEL_SIZE_MULTIPLIER2 = 2 / 3;
 
 // dist/editable-layers/editable-layer.js
-var import_core6 = require("@deck.gl/core");
+var import_core3 = require("@deck.gl/core");
 var EVENT_TYPES = ["click", "pointermove", "panstart", "panmove", "panend", "keyup", "dblclick"];
-var EditableLayer = class extends import_core6.CompositeLayer {
+var EditableLayer = class extends import_core3.CompositeLayer {
   state = void 0;
   // Overridable interaction event handlers
   onLayerClick(event) {
@@ -4697,7 +4181,7 @@ var EditableLayer = class extends import_core6.CompositeLayer {
 __publicField(EditableLayer, "layerName", "EditableLayer");
 
 // dist/editable-layers/editable-path-layer.js
-var import_layers6 = require("@deck.gl/layers");
+var import_layers5 = require("@deck.gl/layers");
 var uniformBlock = `uniform pickingLineWidthUniforms {
   float extraPixels;
 } pickingLineWidth;
@@ -4710,11 +4194,11 @@ var pickingUniforms = {
     extraPixels: "f32"
   }
 };
-var defaultProps3 = {
-  ...import_layers6.PathLayer.defaultProps,
+var defaultProps = {
+  ...import_layers5.PathLayer.defaultProps,
   pickingLineWidthExtraPixels: { type: "number", min: 0, value: Number.MAX_SAFE_INTEGER }
 };
-var EditablePathLayer = class extends import_layers6.PathLayer {
+var EditablePathLayer = class extends import_layers5.PathLayer {
   getShaders() {
     const shaders = super.getShaders();
     shaders.vs = insertBefore(shaders.vs, "vec3 width;", `
@@ -4735,7 +4219,7 @@ var EditablePathLayer = class extends import_layers6.PathLayer {
     super.draw(props);
   }
 };
-EditablePathLayer.defaultProps = defaultProps3;
+EditablePathLayer.defaultProps = defaultProps;
 EditablePathLayer.layerName = "EditablePathLayer";
 
 // dist/editable-layers/editable-geojson-layer.js
@@ -4793,7 +4277,7 @@ function getEditHandleRadius(handle) {
       return DEFAULT_EDITING_INTERMEDIATE_POINT_RADIUS;
   }
 }
-var defaultProps4 = {
+var defaultProps2 = {
   mode: DEFAULT_EDIT_MODE,
   // Edit and interaction events
   onEdit: () => {
@@ -4925,7 +4409,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         getLineWidth: [this.props.selectedFeatureIndexes, this.props.mode]
       }
     });
-    let layers = [new import_layers7.GeoJsonLayer(subLayerProps)];
+    let layers = [new import_layers6.GeoJsonLayer(subLayerProps)];
     layers = layers.concat(this.createGuidesLayers(), this.createTooltipsLayers());
     return layers;
   }
@@ -5039,7 +4523,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
     };
     if (this.props.editHandleType === "icon") {
       subLayerProps["points-icon"] = {
-        type: import_layers7.IconLayer,
+        type: import_layers6.IconLayer,
         iconAtlas: this.props.editHandleIconAtlas,
         iconMapping: this.props.editHandleIconMapping,
         sizeUnits: this.props.editHandleIconSizeUnits,
@@ -5052,7 +4536,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
       };
     } else {
       subLayerProps["points-circle"] = {
-        type: import_layers7.ScatterplotLayer,
+        type: import_layers6.ScatterplotLayer,
         radiusScale: this.props.editHandlePointRadiusScale,
         stroked: this.props.editHandlePointOutline,
         getLineWidth: this.props.editHandlePointStrokeWidth,
@@ -5065,7 +4549,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         billboard: this.props.billboard
       };
     }
-    const layer = new import_layers7.GeoJsonLayer(this.getSubLayerProps({
+    const layer = new import_layers6.GeoJsonLayer(this.getSubLayerProps({
       id: "guides",
       data: guides,
       fp64: this.props.fp64,
@@ -5088,7 +4572,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
   createTooltipsLayers() {
     const mode = this.getActiveMode();
     const tooltips = mode.getTooltips(this.getModeProps(this.props));
-    const layer = new import_layers7.TextLayer({
+    const layer = new import_layers6.TextLayer({
       getSize: DEFAULT_TOOLTIP_FONT_SIZE,
       ...this.getSubLayerProps({
         id: "tooltips",
@@ -5136,7 +4620,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
   }
 };
 __publicField(EditableGeoJsonLayer, "layerName", "EditableGeoJsonLayer");
-__publicField(EditableGeoJsonLayer, "defaultProps", defaultProps4);
+__publicField(EditableGeoJsonLayer, "defaultProps", defaultProps2);
 
 // dist/editable-layers/editable-h3-cluster-layer.js
 var import_geo_layers = require("@deck.gl/geo-layers");
@@ -5146,7 +4630,7 @@ var EMPTY_FEATURE_COLLECTION = {
   type: "FeatureCollection",
   features: []
 };
-var defaultProps5 = {
+var defaultProps3 = {
   mode: DEFAULT_EDIT_MODE2,
   ...EditableGeoJsonLayer.defaultProps,
   // h3 layer
@@ -5285,11 +4769,11 @@ var EditableH3ClusterLayer = class extends EditableLayer {
   }
 };
 __publicField(EditableH3ClusterLayer, "layerName", "EditableH3ClusterLayer");
-__publicField(EditableH3ClusterLayer, "defaultProps", defaultProps5);
+__publicField(EditableH3ClusterLayer, "defaultProps", defaultProps3);
 
 // dist/editable-layers/selection-layer.js
-var import_core7 = require("@deck.gl/core");
-var import_layers8 = require("@deck.gl/layers");
+var import_core4 = require("@deck.gl/core");
+var import_layers7 = 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);
@@ -5305,7 +4789,7 @@ var MODE_MAP = {
 var MODE_CONFIG_MAP = {
   [SELECTION_TYPE2.RECTANGLE]: { dragToDraw: true }
 };
-var defaultProps6 = {
+var defaultProps4 = {
   selectionType: SELECTION_TYPE2.RECTANGLE,
   layerIds: [],
   onSelect: () => {
@@ -5340,7 +4824,7 @@ var PASS_THROUGH_PROPS = [
   "getTentativeFillColor",
   "getTentativeLineWidth"
 ];
-var SelectionLayer = class extends import_core7.CompositeLayer {
+var SelectionLayer = class extends import_core4.CompositeLayer {
   state = void 0;
   _selectRectangleObjects(coordinates) {
     const { layerIds, onSelect } = this.props;
@@ -5424,7 +4908,7 @@ var SelectionLayer = class extends import_core7.CompositeLayer {
     ];
     if (pendingPolygonSelection) {
       const { bigPolygon } = pendingPolygonSelection;
-      layers.push(new import_layers8.PolygonLayer(this.getSubLayerProps({
+      layers.push(new import_layers7.PolygonLayer(this.getSubLayerProps({
         id: LAYER_ID_BLOCKER,
         pickable: true,
         stroked: false,
@@ -5442,19 +4926,19 @@ var SelectionLayer = class extends import_core7.CompositeLayer {
   }
 };
 __publicField(SelectionLayer, "layerName", "SelectionLayer");
-__publicField(SelectionLayer, "defaultProps", defaultProps6);
+__publicField(SelectionLayer, "defaultProps", defaultProps4);
 
 // dist/editable-layers/elevated-edit-handle-layer.js
-var import_core8 = require("@deck.gl/core");
-var import_layers9 = require("@deck.gl/layers");
-var defaultProps7 = {};
-var ElevatedEditHandleLayer = class extends import_core8.CompositeLayer {
+var import_core5 = require("@deck.gl/core");
+var import_layers8 = require("@deck.gl/layers");
+var defaultProps5 = {};
+var ElevatedEditHandleLayer = class extends import_core5.CompositeLayer {
   renderLayers() {
-    const handles = new import_layers9.ScatterplotLayer(Object.assign({}, this.props, {
+    const handles = new import_layers8.ScatterplotLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-ScatterplotLayer`,
       data: this.props.data
     }));
-    const lines = new import_layers9.LineLayer(Object.assign({}, this.props, {
+    const lines = new import_layers8.LineLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-LineLayer`,
       data: this.props.data,
       pickable: false,
@@ -5467,7 +4951,225 @@ var ElevatedEditHandleLayer = class extends import_core8.CompositeLayer {
   }
 };
 __publicField(ElevatedEditHandleLayer, "layerName", "ElevatedEditHandleLayer");
-__publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps7);
+__publicField(ElevatedEditHandleLayer, "defaultProps", defaultProps5);
+
+// dist/widgets/edit-mode-tray-widget.js
+var import_jsx_runtime = require("preact/jsx-runtime");
+var import_preact = require("preact");
+var import_core6 = 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_core6.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);