@deck.gl-community/editable-layers 9.2.0-beta.5 → 9.2.0-beta.8

package/dist/index.cjs

@@ -34,9 +34,8 @@ var __publicField = (obj, key, value) => {
 // dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
-  ArrowStyles: () => ArrowStyles,
   CompositeMode: () => CompositeMode,
-  DEFAULT_ARROWS: () => DEFAULT_ARROWS,
+  DeleteMode: () => DeleteMode,
   Draw90DegreePolygonMode: () => Draw90DegreePolygonMode,
   DrawCircleByDiameterMode: () => DrawCircleByDiameterMode,
   DrawCircleFromCenterMode: () => DrawCircleFromCenterMode,
@@ -59,29 +58,19 @@ __export(dist_exports, {
   ElevationMode: () => ElevationMode,
   ExtendLineStringMode: () => ExtendLineStringMode,
   ExtrudeMode: () => ExtrudeMode,
-  Feature: () => Feature,
   GeoJsonEditMode: () => GeoJsonEditMode,
   ImmutableFeatureCollection: () => ImmutableFeatureCollection,
   JunctionScatterplotLayer: () => JunctionScatterplotLayer,
-  JunctionsLayer: () => JunctionsLayer,
-  LayerMouseEvent: () => LayerMouseEvent,
-  MAX_ARROWS: () => MAX_ARROWS,
   MeasureAngleMode: () => MeasureAngleMode,
   MeasureAreaMode: () => MeasureAreaMode,
   MeasureDistanceMode: () => MeasureDistanceMode,
   ModifyMode: () => ModifyMode,
-  NebulaCore: () => NebulaCore,
-  NebulaLayer: () => NebulaLayer,
-  PROJECTED_PIXEL_SIZE_MULTIPLIER: () => PROJECTED_PIXEL_SIZE_MULTIPLIER,
   ResizeCircleMode: () => ResizeCircleMode,
   RotateMode: () => RotateMode,
-  SELECTION_TYPE: () => SELECTION_TYPE,
   ScaleMode: () => ScaleMode,
-  SegmentsLayer: () => SegmentsLayer,
   SelectionLayer: () => SelectionLayer,
   SnappableMode: () => SnappableMode,
   SplitPolygonMode: () => SplitPolygonMode,
-  TextsLayer: () => TextsLayer,
   TransformMode: () => TransformMode,
   TranslateMode: () => TranslateMode,
   ViewMode: () => ViewMode,
@@ -93,302 +82,6 @@ __export(dist_exports, {
 });
 module.exports = __toCommonJS(dist_exports);
 
-// dist/lib/style.js
-var ArrowStyles = {
-  NONE: 0,
-  FORWARD: 1,
-  BACKWARD: 2,
-  BOTH: 3
-};
-var DEFAULT_ARROWS = 1;
-var MAX_ARROWS = 3;
-var DEFAULT_STYLE = {
-  arrowColor: [0, 0, 0, 1],
-  arrowCount: DEFAULT_ARROWS,
-  arrowStyle: ArrowStyles.NONE,
-  fillColor: [0, 0, 0, 1],
-  lineColor: [0, 0, 0, 1],
-  lineWidthMeters: 5,
-  outlineRadiusMeters: 0,
-  opacity: 1,
-  zLevel: 0
-};
-
-// dist/lib/deck-renderer/deck-drawer.js
-var import_layers = require("@deck.gl/layers");
-var import_helpers = require("@turf/helpers");
-var import_bbox = __toESM(require("@turf/bbox"), 1);
-var import_bbox_polygon = __toESM(require("@turf/bbox-polygon"), 1);
-var import_buffer = __toESM(require("@turf/buffer"), 1);
-var import_difference = __toESM(require("@turf/difference"), 1);
-var import_distance = __toESM(require("@turf/distance"), 1);
-var POLYGON_LINE_COLOR = [0, 255, 0, 255];
-var POLYGON_FILL_COLOR = [255, 255, 255, 90];
-var POLYGON_LINE_WIDTH = 2;
-var POLYGON_THRESHOLD = 0.01;
-var EXPANSION_KM = 10;
-var LAYER_ID_VIEW = "DeckDrawerView";
-var LAYER_ID_PICK = "DeckDrawerPick";
-var SELECTION_TYPE = {
-  NONE: null,
-  RECTANGLE: "rectangle",
-  POLYGON: "polygon"
-};
-var DeckDrawer = class {
-  nebula;
-  usePolygon;
-  validPolygon;
-  landPoints;
-  mousePoints;
-  constructor(nebula) {
-    this.nebula = nebula;
-    this.usePolygon = false;
-    this.validPolygon = true;
-    this.landPoints = [];
-    this.mousePoints = [];
-  }
-  _getLayerIds() {
-    return this.nebula.deckgl.props.layers.filter((l) => l && l.props && l.props.nebulaLayer && l.props.nebulaLayer.enableSelection).map((l) => l.id);
-  }
-  _selectFromPickingInfos(pickingInfos) {
-    const objects = pickingInfos.map(({ layer, index, object }) => object.original || layer.props.nebulaLayer.deckCache.originals[index]);
-    this.nebula.props.onSelection(objects);
-  }
-  _getBoundingBox() {
-    const { mousePoints } = this;
-    const allX = mousePoints.map((mousePoint) => mousePoint[0]);
-    const allY = mousePoints.map((mousePoint) => mousePoint[1]);
-    const x = Math.min(...allX);
-    const y = Math.min(...allY);
-    const maxX = Math.max(...allX);
-    const maxY = Math.max(...allY);
-    return { x, y, width: maxX - x, height: maxY - y };
-  }
-  _selectRectangleObjects() {
-    if (this.landPoints.length !== 2)
-      return;
-    const [x1, y1] = this.mousePoints[0];
-    const [x2, y2] = this.mousePoints[1];
-    const pickingInfos = this.nebula.deckgl.pickObjects({
-      x: Math.min(x1, x2),
-      y: Math.min(y1, y2),
-      width: Math.abs(x2 - x1),
-      height: Math.abs(y2 - y1),
-      layerIds: this._getLayerIds()
-    });
-    this._selectFromPickingInfos(pickingInfos);
-  }
-  _selectPolygonObjects() {
-    const pickingInfos = this.nebula.deckgl.pickObjects({
-      ...this._getBoundingBox(),
-      layerIds: [LAYER_ID_PICK, ...this._getLayerIds()]
-    });
-    this._selectFromPickingInfos(pickingInfos.filter((item) => item.layer.id !== LAYER_ID_PICK));
-  }
-  _getMousePosFromEvent(event) {
-    const { offsetX, offsetY } = event;
-    return [offsetX, offsetY];
-  }
-  // eslint-disable-next-line max-statements, complexity
-  handleEvent(event, lngLat, selectionType) {
-    if (event.type !== "mouseup")
-      event.stopPropagation();
-    this.usePolygon = selectionType === SELECTION_TYPE.POLYGON;
-    let redraw = false;
-    let deactivate = false;
-    const { usePolygon, landPoints, mousePoints } = this;
-    if (event.type === "mousedown") {
-      if (usePolygon && landPoints.length) {
-        if (this.landPoints.length < 3 || this.validPolygon) {
-          landPoints.push(lngLat);
-          mousePoints.push(this._getMousePosFromEvent(event));
-        }
-      } else {
-        this.landPoints = [lngLat, lngLat];
-        const m = this._getMousePosFromEvent(event);
-        this.mousePoints = [m, m];
-      }
-      redraw = true;
-    } else if (event.type === "mousemove" && landPoints.length) {
-      landPoints[landPoints.length - 1] = lngLat;
-      mousePoints[mousePoints.length - 1] = this._getMousePosFromEvent(event);
-      redraw = true;
-    } else if (event.type === "mouseup") {
-      if (usePolygon) {
-        if (landPoints.length > 4 && (0, import_distance.default)(landPoints[0], landPoints[landPoints.length - 1]) < POLYGON_THRESHOLD && this.validPolygon) {
-          this._selectPolygonObjects();
-          this.reset();
-          redraw = true;
-          deactivate = true;
-        }
-      } else {
-        this._selectRectangleObjects();
-        this.reset();
-        redraw = true;
-        deactivate = true;
-      }
-    }
-    return { redraw, deactivate };
-  }
-  reset() {
-    this.landPoints = [];
-    this.mousePoints = [];
-  }
-  _makeStartPointHighlight(center) {
-    const buffer = (0, import_buffer.default)((0, import_helpers.point)(center), POLYGON_THRESHOLD / 4);
-    return (0, import_bbox_polygon.default)((0, import_bbox.default)(buffer)).geometry.coordinates;
-  }
-  render() {
-    const data = [];
-    const dataPick = [];
-    if (!this.usePolygon && this.landPoints.length === 2) {
-      const [[x1, y1], [x2, y2]] = this.mousePoints;
-      const selPolygon = [
-        [x1, y1],
-        [x1, y2],
-        [x2, y2],
-        [x2, y1],
-        [x1, y1]
-      ].map((mousePos) => this.nebula.unprojectMousePosition(mousePos));
-      data.push({
-        polygon: selPolygon,
-        lineColor: POLYGON_LINE_COLOR,
-        fillColor: POLYGON_FILL_COLOR
-      });
-    } else if (this.usePolygon && this.landPoints.length) {
-      data.push({
-        polygon: this.landPoints,
-        lineColor: POLYGON_LINE_COLOR,
-        fillColor: POLYGON_FILL_COLOR
-      });
-      if (this.landPoints.length >= 3) {
-        const landPointsPoly = (0, import_helpers.polygon)([[...this.landPoints, this.landPoints[0]]]);
-        const bigBuffer = (0, import_buffer.default)((0, import_helpers.point)(this.landPoints[0]), EXPANSION_KM);
-        let bigPolygon;
-        try {
-          bigPolygon = (0, import_difference.default)(bigBuffer, landPointsPoly);
-          dataPick.push({
-            polygon: bigPolygon.geometry.coordinates,
-            fillColor: [0, 0, 0, 1]
-          });
-          this.validPolygon = true;
-        } catch (e) {
-          this.validPolygon = false;
-        }
-      }
-    }
-    if (this.landPoints.length) {
-      data.push({
-        polygon: this._makeStartPointHighlight(this.landPoints[0]),
-        lineColor: [0, 0, 0, 0],
-        fillColor: POLYGON_LINE_COLOR
-      });
-    }
-    data.push({ polygon: [[0, 0]] });
-    dataPick.push({ polygon: [[0, 0]] });
-    return [
-      new import_layers.PolygonLayer({
-        id: LAYER_ID_VIEW,
-        data,
-        fp64: false,
-        opacity: 1,
-        pickable: false,
-        lineWidthMinPixels: POLYGON_LINE_WIDTH,
-        lineWidthMaxPixels: POLYGON_LINE_WIDTH,
-        lineDashJustified: true,
-        // TODO(v9) Add extension
-        // getLineDashArray: (x) => POLYGON_DASHES,
-        getLineColor: (obj) => obj.lineColor || [0, 0, 0, 255],
-        getFillColor: (obj) => obj.fillColor || [0, 0, 0, 255],
-        getPolygon: (o) => o.polygon
-      }),
-      new import_layers.PolygonLayer({
-        id: LAYER_ID_PICK,
-        data: dataPick,
-        getLineColor: (obj) => obj.lineColor || [0, 0, 0, 255],
-        getFillColor: (obj) => obj.fillColor || [0, 0, 0, 255],
-        fp64: false,
-        opacity: 1,
-        stroked: false,
-        pickable: true,
-        getPolygon: (o) => o.polygon
-      })
-    ];
-  }
-};
-
-// dist/lib/feature.js
-var Feature = class {
-  // geo json coordinates
-  geoJson;
-  style;
-  original;
-  metadata;
-  constructor(geoJson, style, original = null, metadata = {}) {
-    this.geoJson = geoJson;
-    this.style = style;
-    this.original = original;
-    this.metadata = metadata;
-  }
-  getCoords() {
-    return this.geoJson.geometry.coordinates;
-  }
-};
-
-// dist/lib/layer-mouse-event.js
-var LayerMouseEvent = class {
-  canceled = false;
-  // original item that this event is related to
-  data;
-  // internal nebula info about the object
-  metadata;
-  // the mouse [lng,lat] raycasted onto the ground
-  groundPoint;
-  // browser event
-  nativeEvent;
-  // reference to nebula
-  nebula;
-  constructor(nativeEvent, { data, groundPoint, nebula, metadata }) {
-    this.nativeEvent = nativeEvent;
-    this.data = data;
-    this.groundPoint = groundPoint;
-    this.nebula = nebula;
-    this.metadata = metadata;
-  }
-  stopPropagation() {
-    this.nativeEvent.stopPropagation();
-    this.canceled = true;
-  }
-};
-
-// dist/lib/nebula-layer.js
-var import_eventemitter3 = require("eventemitter3");
-var import_uuid = require("uuid");
-var NebulaLayer = class extends import_eventemitter3.EventEmitter {
-  getData;
-  toNebulaFeature;
-  id;
-  helperLayers;
-  // flags
-  usesMapEvents = false;
-  enablePicking = false;
-  enableSelection = false;
-  //
-  constructor({ getData, on, toNebulaFeature }) {
-    super();
-    this.id = (0, import_uuid.v4)();
-    this.getData = getData;
-    this.toNebulaFeature = toNebulaFeature;
-    this.helperLayers = [];
-    if (on) {
-      Object.keys(on).forEach((key) => this.on(key, on[key]));
-    }
-  }
-  render(config) {
-    return null;
-  }
-};
-
 // dist/utils/utils.js
 var utils_exports = {};
 __export(utils_exports, {
@@ -403,7 +96,7 @@ __export(utils_exports, {
 var import_destination = __toESM(require("@turf/destination"), 1);
 var import_bearing = __toESM(require("@turf/bearing"), 1);
 var import_point_to_line_distance = __toESM(require("@turf/point-to-line-distance"), 1);
-var import_helpers2 = require("@turf/helpers");
+var import_helpers = require("@turf/helpers");
 var import_viewport_mercator_project = require("viewport-mercator-project");
 function toDeckColor(color, defaultColor = [255, 0, 0, 255]) {
   if (!Array.isArray(color)) {
@@ -428,7 +121,7 @@ function generatePointsParallelToLinePoints(p1, p2, mapCoords2) {
     type: "LineString",
     coordinates: [p1, p2]
   };
-  const pt = (0, import_helpers2.point)(mapCoords2);
+  const pt = (0, import_helpers.point)(mapCoords2);
   const ddistance = (0, import_point_to_line_distance.default)(pt, lineString3);
   const lineBearing = (0, import_bearing.default)(p1, p2);
   const isPointToLeftOfLine = (mapCoords2[0] - p1[0]) * (p2[1] - p1[1]) - (mapCoords2[1] - p1[1]) * (p2[0] - p1[0]);
@@ -499,479 +192,13 @@ function insertBefore(base, insertBeforeText, toInsert) {
   return base.slice(0, at) + toInsert + base.slice(at);
 }
 
-// dist/lib/deck-renderer/deck-cache.js
-var DeckCache = class {
-  objects;
-  originals;
-  updateTrigger;
-  _idToPosition;
-  _getData;
-  _convert;
-  constructor(getData, convert) {
-    this.objects = [];
-    this.originals = [];
-    this.updateTrigger = 0;
-    this._idToPosition = /* @__PURE__ */ new Map();
-    this._getData = getData;
-    this._convert = convert;
-  }
-  updateAllDeckObjects() {
-    if (!this._getData || !this._convert)
-      return;
-    this.originals.length = 0;
-    this.objects.length = 0;
-    this._idToPosition.clear();
-    this._getData().forEach((d) => {
-      this._idToPosition.set(d.id, this.objects.length);
-      this.originals.push(d);
-      this.objects.push(this._convert(d));
-    });
-    this.triggerUpdate();
-  }
-  updateDeckObjectsByIds(ids) {
-    if (!this._getData || !this._convert)
-      return;
-    ids.forEach((id) => {
-      const p = this._idToPosition.get(id);
-      if (p !== void 0) {
-        this.objects[p] = this._convert(this.originals[p]);
-      }
-    });
-    this.triggerUpdate();
-  }
-  triggerUpdate() {
-    this.updateTrigger++;
-  }
-  getDeckObjectById(id) {
-    const p = this._idToPosition.get(id);
-    return p !== void 0 ? this.objects[p] : null;
-  }
-  getOriginalById(id) {
-    const p = this._idToPosition.get(id);
-    return p !== void 0 ? this.originals[p] : null;
-  }
-};
-
-// dist/editable-layers/junction-scatterplot-layer.js
-var import_core = require("@deck.gl/core");
-var import_layers2 = require("@deck.gl/layers");
-var JunctionScatterplotLayer = class extends import_core.CompositeLayer {
-  renderLayers() {
-    const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
-    return [
-      // the full circles
-      new import_layers2.ScatterplotLayer({
-        ...this.props,
-        id: `${id}-full`,
-        data: this.props.data,
-        getLineColor: getStrokeColor,
-        updateTriggers: {
-          ...updateTriggers,
-          getStrokeColor: updateTriggers.getStrokeColor
-        }
-      }),
-      // the inner part
-      new import_layers2.ScatterplotLayer({
-        ...this.props,
-        id: `${id}-inner`,
-        data: this.props.data,
-        getFillColor,
-        getRadius: getInnerRadius,
-        pickable: false,
-        updateTriggers: {
-          ...updateTriggers,
-          getFillColor: updateTriggers.getFillColor,
-          getRadius: updateTriggers.getInnerRadius
-        }
-      })
-    ];
-  }
-};
-__publicField(JunctionScatterplotLayer, "layerName", "JunctionScatterplotLayer");
-__publicField(JunctionScatterplotLayer, "defaultProps", {
-  ...import_layers2.ScatterplotLayer.defaultProps,
-  getFillColor: (d) => [0, 0, 0, 255],
-  getStrokeColor: (d) => [255, 255, 255, 255],
-  getInnerRadius: (d) => 1
-});
-
-// dist/lib/layers/junctions-layer.js
-var JunctionsLayer = class extends NebulaLayer {
-  deckCache;
-  constructor(config) {
-    super(config);
-    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
-    this.enablePicking = true;
-  }
-  render({ nebula }) {
-    const defaultColor = [0, 0, 0, 255];
-    const { objects, updateTrigger } = this.deckCache;
-    return new JunctionScatterplotLayer({
-      id: `junctions-${this.id}`,
-      data: objects,
-      opacity: 1,
-      pickable: true,
-      getPosition: (nf) => nf.geoJson.geometry.coordinates,
-      getFillColor: (nf) => toDeckColor(nf.style.fillColor) || defaultColor,
-      getStrokeColor: (nf) => toDeckColor(nf.style.outlineColor) || toDeckColor(nf.style.fillColor) || defaultColor,
-      getRadius: (nf) => nf.style.pointRadiusMeters + nf.style.outlineRadiusMeters || 1,
-      getInnerRadius: (nf) => nf.style.pointRadiusMeters || 0.5,
-      parameters: {
-        depthCompare: "always"
-      },
-      updateTriggers: { all: updateTrigger },
-      // @ts-expect-error TODO
-      nebulaLayer: this
-    });
-  }
-};
-
-// dist/lib/layers/texts-layer.js
-var import_layers3 = require("@deck.gl/layers");
-
-// dist/lib/constants.js
-var PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
-
-// dist/lib/layers/texts-layer.js
-var TextsLayer = class extends NebulaLayer {
-  deckCache;
-  constructor(config) {
-    super(config);
-    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
-  }
-  render({ nebula }) {
-    const defaultColor = [0, 0, 0, 255];
-    const { objects, updateTrigger } = this.deckCache;
-    const { zoom } = nebula.props.viewport;
-    return new import_layers3.TextLayer({
-      id: `texts-${this.id}`,
-      data: objects,
-      opacity: 1,
-      fp64: false,
-      pickable: false,
-      getText: (nf) => nf.style.text,
-      getPosition: (nf) => nf.geoJson.geometry.coordinates,
-      getColor: (nf) => toDeckColor(nf.style.fillColor) || defaultColor,
-      // TODO: layer should offer option to scale with zoom
-      sizeScale: 1 / Math.pow(2, 20 - zoom),
-      getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
-      updateTriggers: { all: updateTrigger },
-      nebulaLayer: this
-    });
-  }
-};
-
-// 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 },
-  [ArrowStyles.BACKWARD]: { forward: false, backward: true },
-  [ArrowStyles.BOTH]: { forward: true, backward: true }
-};
-var SegmentsLayer = class extends NebulaLayer {
-  deckCache;
-  noBlend;
-  highlightColor;
-  arrowSize;
-  jointRounded;
-  capRounded;
-  dashed;
-  markerLayerProps;
-  constructor(config) {
-    super(config);
-    this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
-    this.enableSelection = true;
-    this.enablePicking = config.enablePicking ?? true;
-    this.noBlend = config.noBlend ?? false;
-    this.jointRounded = config.jointRounded ?? true;
-    this.capRounded = config.capRounded ?? true;
-    this.dashed = config.dashed ?? false;
-    this.markerLayerProps = config.markerLayerProps ?? null;
-    this.highlightColor = [1, 1, 1, 1];
-    this.arrowSize = 1;
-  }
-  getMouseOverSegment() {
-    return null;
-  }
-  _calcMarkerPercentages(nf) {
-    const { arrowPercentages } = nf.style;
-    if (arrowPercentages) {
-      return arrowPercentages;
-    }
-    const arrowStyle = nf.style.arrowStyle || DEFAULT_STYLE.arrowStyle;
-    if (arrowStyle === ArrowStyles.NONE)
-      return [];
-    const arrowCount = Math.min(nf.style.arrowCount || DEFAULT_STYLE.arrowCount, MAX_ARROWS);
-    return [[0.5], [0.33, 0.66], [0.25, 0.5, 0.75]][arrowCount - 1];
-  }
-  _getHighlightedObjectIndex({ nebula }) {
-    const { deckglMouseOverInfo } = nebula;
-    if (deckglMouseOverInfo) {
-      const { originalLayer, index } = deckglMouseOverInfo;
-      if (originalLayer === this) {
-        return index;
-      }
-    }
-    return -1;
-  }
-  render({ nebula }) {
-    const defaultColor = [0, 0, 0, 255];
-    const { objects, updateTrigger } = this.deckCache;
-    return new import_layers4.PathMarkerLayer({
-      id: `segments-${this.id}`,
-      data: objects,
-      opacity: 1,
-      fp64: false,
-      jointRounded: this.jointRounded,
-      capRounded: this.capRounded,
-      pickable: true,
-      sizeScale: this.arrowSize || 6,
-      parameters: {
-        depthCompare: "always",
-        blendColorOperation: this.noBlend ? void 0 : "max"
-      },
-      getPath: (nf) => nf.geoJson.geometry.coordinates,
-      getColor: (nf) => toDeckColor(nf.style.lineColor, defaultColor),
-      getWidth: (nf) => nf.style.lineWidthMeters || 1,
-      getZLevel: (nf) => nf.style.zLevel * 255,
-      getDirection: (nf) => NEBULA_TO_DECK_DIRECTIONS[nf.style.arrowStyle],
-      getMarkerColor: (nf) => toDeckColor(nf.style.arrowColor, defaultColor),
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      getMarkerPercentages: this._calcMarkerPercentages,
-      updateTriggers: { all: updateTrigger },
-      highlightedObjectIndex: this._getHighlightedObjectIndex({ nebula }),
-      highlightColor: toDeckColor(this.highlightColor),
-      dashJustified: this.dashed,
-      getDashArray: this.dashed ? (nf) => nf.style.dashArray : void 0,
-      markerLayerProps: this.markerLayerProps || import_layers4.PathMarkerLayer.defaultProps.markerLayerProps,
-      nebulaLayer: this
-    });
-  }
-};
-
-// dist/lib/nebula-core.js
-var import_eventemitter32 = require("eventemitter3");
-var import_core2 = 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);
-    ["click", "mousemove", "mouseup", "mousedown"].forEach((name) => document.addEventListener(name, this._onMouseEvent, true));
-  }
-  detach() {
-    ["click", "mousemove", "mouseup", "mousedown"].forEach((name) => document.removeEventListener(name, this._onMouseEvent, true));
-  }
-  updateProps(newProps) {
-    this.props = newProps;
-    const { viewport } = this.props;
-    this.wmViewport = new import_core2.WebMercatorViewport(viewport);
-  }
-  props = null;
-  deckgl = null;
-  mainContainer = null;
-  deckglMouseOverInfo = null;
-  _deckDrawer = null;
-  _mouseWasDown = null;
-  wmViewport = null;
-  queryObjectEvents = new import_eventemitter32.EventEmitter();
-  forceUpdate = null;
-  inited = null;
-  log(message) {
-    const { logger } = this.props;
-    if (logger && logger.info) {
-      logger.info(LOGGER_PREFIX + message);
-    }
-  }
-  updateAllDeckObjects() {
-    this.getAllLayers().forEach((layer) => {
-      if (layer && layer.deckCache) {
-        layer.deckCache.updateAllDeckObjects();
-      }
-    });
-    this.forceUpdate();
-  }
-  updateDeckObjectsByIds(ids) {
-    this.getAllLayers().forEach((layer) => {
-      if (layer && layer.deckCache) {
-        layer.deckCache.updateDeckObjectsByIds(ids);
-      }
-    });
-    this.forceUpdate();
-  }
-  rerenderLayers() {
-    this.updateAllDeckObjects();
-  }
-  _isNebulaEvent({ buttons, target, type }) {
-    const { viewport } = this.props;
-    if (this._mouseWasDown && type === "mouseup") {
-      this._mouseWasDown = false;
-      return true;
-    }
-    if (type === "mousemove" && buttons > 0) {
-      return true;
-    }
-    if (!target.getBoundingClientRect) {
-      return false;
-    }
-    const rect = target.getBoundingClientRect();
-    return Math.round(rect.width) === Math.round(viewport.width) && Math.round(rect.height) === Math.round(viewport.height);
-  }
-  _onMouseEvent = (event) => {
-    if (!this._isNebulaEvent(event)) {
-      return;
-    }
-    if (event.type === "mousedown") {
-      this._mouseWasDown = true;
-    }
-    const { top = 0, left = 0 } = this.mainContainer ? this.mainContainer.getBoundingClientRect() : {};
-    const proxyEvent = new Proxy(event, {
-      get: (original, propertyName) => {
-        if (propertyName === "offsetX") {
-          return original.pageX - left;
-        }
-        if (propertyName === "offsetY") {
-          return original.pageY - top;
-        }
-        if (propertyName === "type") {
-          return original.type.replace("pointer", "mouse");
-        }
-        const result = original[propertyName];
-        if (typeof result === "function") {
-          return result.bind(original);
-        }
-        return result;
-      }
-    });
-    this._handleDeckGLEvent(proxyEvent);
-  };
-  getMouseGroundPosition(event) {
-    return this.wmViewport.unproject([event.offsetX, event.offsetY]);
-  }
-  unprojectMousePosition(mousePosition) {
-    return this.wmViewport.unproject(mousePosition);
-  }
-  // eslint-disable-next-line max-statements, complexity
-  _handleDeckGLEvent(event) {
-    const { deckgl, props: { onMapMouseEvent, selectionType, eventFilter } } = this;
-    let sendMapEvent = true;
-    let cursor = "auto";
-    if (event && deckgl && selectionType) {
-      if (!this._deckDrawer)
-        this._deckDrawer = new DeckDrawer(this);
-      const lngLat = this.getMouseGroundPosition(event);
-      if (eventFilter && !eventFilter(lngLat, event))
-        return;
-      const drawerResult = this._deckDrawer.handleEvent(event, lngLat, selectionType);
-      if (drawerResult.redraw)
-        this.forceUpdate();
-      return;
-    }
-    if (event && deckgl && (!event.buttons || event.type !== "mousemove")) {
-      const layerIds = deckgl.props.layers.filter((l) => l && l.props && l.props.nebulaLayer && l.props.nebulaLayer.enablePicking).map((l) => l.id);
-      const pickingInfo = deckgl.pickObject({
-        x: event.offsetX,
-        y: event.offsetY,
-        radius: 5,
-        layerIds
-      });
-      this.queryObjectEvents.emit("pick", { event, pickingInfo });
-      if (pickingInfo) {
-        sendMapEvent = false;
-        const { index, lngLat } = pickingInfo;
-        if (eventFilter && !eventFilter(lngLat, event))
-          return;
-        const { layer: deckLayer, object } = pickingInfo;
-        if (deckLayer && deckLayer.props && deckLayer.props.nebulaLayer && deckLayer.props.nebulaLayer.eventHandler) {
-          deckLayer.props.nebulaLayer.eventHandler(event, pickingInfo);
-        }
-        const original = object.original || deckLayer.props.nebulaLayer && deckLayer.props.nebulaLayer.deckCache && deckLayer.props.nebulaLayer.deckCache.originals[index];
-        if (original) {
-          this.deckglMouseOverInfo = { originalLayer: deckLayer.props.nebulaLayer, index };
-          const nebulaMouseEvent = new LayerMouseEvent(event, {
-            data: original,
-            metadata: object.metadata,
-            groundPoint: lngLat,
-            nebula: this
-          });
-          deckLayer.props.nebulaLayer.emit(event.type, nebulaMouseEvent);
-          this.forceUpdate();
-        }
-        cursor = "pointer";
-      }
-    }
-    if (document.documentElement) {
-      document.documentElement.style.cursor = cursor;
-    }
-    if (sendMapEvent) {
-      this.deckglMouseOverInfo = null;
-      const lngLat = this.getMouseGroundPosition(event);
-      if (eventFilter && !eventFilter(lngLat, event))
-        return;
-      const nebulaMouseEvent = new LayerMouseEvent(event, {
-        groundPoint: lngLat,
-        nebula: this
-      });
-      this.getAllLayers().filter((layer) => layer && layer.usesMapEvents).forEach((layer) => layer.emit("mapMouseEvent", nebulaMouseEvent));
-      this.getAllLayers().filter((layer) => layer && layer.props && layer.props.nebulaLayer && layer.props.nebulaLayer.mapMouseEvent).forEach((layer) => layer.props.nebulaLayer.mapMouseEvent(nebulaMouseEvent, layer));
-      if (onMapMouseEvent) {
-        onMapMouseEvent(event, lngLat);
-      }
-    }
-  }
-  getExtraDeckLayers() {
-    const result = [];
-    if (this._deckDrawer)
-      result.push(...this._deckDrawer.render());
-    return result;
-  }
-  renderDeckLayers() {
-    return this.getAllLayers().map((layer) => layer instanceof NebulaLayer ? layer.render({ nebula: this }) : layer).filter(Boolean);
-  }
-  getAllLayers() {
-    const result = [];
-    this.props.layers.filter(Boolean).forEach((layer) => {
-      result.push(layer);
-      if (layer instanceof NebulaLayer) {
-        result.push(...layer.helperLayers);
-      }
-    });
-    return result.filter(Boolean);
-  }
-  getRenderedLayers() {
-    return [...this.renderDeckLayers(), ...this.getExtraDeckLayers()];
-  }
-  updateAndGetRenderedLayers(layers, viewport, container) {
-    if (this.inited) {
-      this.updateProps({ layers, viewport });
-      this.forceUpdate = () => container.forceUpdate();
-    } else {
-      this.inited = true;
-      this.init({ layers, viewport });
-      this.forceUpdate = () => container.forceUpdate();
-      this.updateAllDeckObjects();
-    }
-    return this.getRenderedLayers();
-  }
-  setDeck(deckgl) {
-    if (deckgl) {
-      this.deckgl = deckgl;
-    }
-  }
-  setMainContainer(mainContainer) {
-    if (mainContainer) {
-      this.mainContainer = mainContainer;
-    }
-  }
-};
-
 // dist/editable-layers/editable-geojson-layer.js
-var import_layers6 = require("@deck.gl/layers");
+var import_layers2 = require("@deck.gl/layers");
 
 // dist/edit-modes/geojson-edit-mode.js
+var import_helpers3 = require("@turf/helpers");
 var import_union = __toESM(require("@turf/union"), 1);
-var import_difference2 = __toESM(require("@turf/difference"), 1);
+var import_difference = __toESM(require("@turf/difference"), 1);
 var import_intersect = __toESM(require("@turf/intersect"), 1);
 var import_rewind = __toESM(require("@turf/rewind"), 1);
 
@@ -980,7 +207,7 @@ var import_destination2 = __toESM(require("@turf/destination"), 1);
 var import_bearing2 = __toESM(require("@turf/bearing"), 1);
 var import_point_to_line_distance2 = __toESM(require("@turf/point-to-line-distance"), 1);
 var import_meta = require("@turf/meta");
-var import_helpers3 = require("@turf/helpers");
+var import_helpers2 = require("@turf/helpers");
 var import_invariant = require("@turf/invariant");
 var import_viewport_mercator_project2 = require("viewport-mercator-project");
 function recursivelyTraverseNestedArrays2(array, prefix, fn) {
@@ -1000,7 +227,7 @@ function generatePointsParallelToLinePoints2(p1, p2, coords) {
     type: "LineString",
     coordinates: [p1, p2]
   };
-  const pt = (0, import_helpers3.point)(coords);
+  const pt = (0, import_helpers2.point)(coords);
   const ddistance = (0, import_point_to_line_distance2.default)(pt, lineString3);
   const lineBearing = (0, import_bearing2.default)(p1, p2);
   const isPointToLeftOfLine = (coords[0] - p1[0]) * (p2[1] - p1[1]) - (coords[1] - p1[1]) * (p2[0] - p1[0]);
@@ -1069,7 +296,7 @@ function nearestPointOnLine(lines, inPoint, viewport) {
   if (viewport) {
     mercator = new import_viewport_mercator_project2.WebMercatorViewport(viewport);
   }
-  let closestPoint = (0, import_helpers3.point)([Infinity, Infinity], {
+  let closestPoint = (0, import_helpers2.point)([Infinity, Infinity], {
     dist: Infinity
   });
   if (!((_a = lines.geometry) == null ? void 0 : _a.coordinates.length) || ((_b = lines.geometry) == null ? void 0 : _b.coordinates.length) < 2) {
@@ -1143,7 +370,7 @@ function nearestPointOnLine(lines, inPoint, viewport) {
         from
       };
     }
-    closestPoint = (0, import_helpers3.point)([snapPoint.x, snapPoint.y], {
+    closestPoint = (0, import_helpers2.point)([snapPoint.x, snapPoint.y], {
       dist: Math.abs(snapPoint.from - snapPoint.to),
       index: snapPoint.idx
     });
@@ -1270,8 +497,8 @@ function shouldCancelPan(event) {
 // dist/edit-modes/immutable-feature-collection.js
 var ImmutableFeatureCollection = class {
   featureCollection;
-  constructor(featureCollection4) {
-    this.featureCollection = featureCollection4;
+  constructor(featureCollection7) {
+    this.featureCollection = featureCollection7;
   }
   getObject() {
     return this.featureCollection;
@@ -1506,9 +733,9 @@ function pruneGeometryIfNecessary(geometry) {
   }
 }
 function prunePolygonIfNecessary(geometry) {
-  const polygon3 = geometry.coordinates;
-  for (let holeIndex = 1; holeIndex < polygon3.length; holeIndex++) {
-    if (removeHoleIfNecessary(polygon3, holeIndex)) {
+  const polygon2 = geometry.coordinates;
+  for (let holeIndex = 1; holeIndex < polygon2.length; holeIndex++) {
+    if (removeHoleIfNecessary(polygon2, holeIndex)) {
       holeIndex--;
     }
   }
@@ -1524,23 +751,23 @@ function pruneMultiLineStringIfNecessary(geometry) {
 }
 function pruneMultiPolygonIfNecessary(geometry) {
   for (let polygonIndex = 0; polygonIndex < geometry.coordinates.length; polygonIndex++) {
-    const polygon3 = geometry.coordinates[polygonIndex];
-    const outerRing = polygon3[0];
+    const polygon2 = geometry.coordinates[polygonIndex];
+    const outerRing = polygon2[0];
     if (outerRing.length <= 3) {
       geometry.coordinates.splice(polygonIndex, 1);
       polygonIndex--;
     }
-    for (let holeIndex = 1; holeIndex < polygon3.length; holeIndex++) {
-      if (removeHoleIfNecessary(polygon3, holeIndex)) {
+    for (let holeIndex = 1; holeIndex < polygon2.length; holeIndex++) {
+      if (removeHoleIfNecessary(polygon2, holeIndex)) {
         holeIndex--;
       }
     }
   }
 }
-function removeHoleIfNecessary(polygon3, holeIndex) {
-  const hole = polygon3[holeIndex];
+function removeHoleIfNecessary(polygon2, holeIndex) {
+  const hole = polygon2[holeIndex];
   if (hole.length <= 3) {
-    polygon3.splice(holeIndex, 1);
+    polygon2.splice(holeIndex, 1);
     return true;
   }
   return false;
@@ -1667,11 +894,11 @@ var GeoJsonEditMode = class {
       };
       let updatedGeometry;
       if (modeConfig.booleanOperation === "union") {
-        updatedGeometry = (0, import_union.default)(selectedFeature, feature);
+        updatedGeometry = (0, import_union.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
       } else if (modeConfig.booleanOperation === "difference") {
-        updatedGeometry = (0, import_difference2.default)(selectedFeature, feature);
+        updatedGeometry = (0, import_difference.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
       } else if (modeConfig.booleanOperation === "intersection") {
-        updatedGeometry = (0, import_intersect.default)(selectedFeature, feature);
+        updatedGeometry = (0, import_intersect.default)((0, import_helpers3.featureCollection)([selectedFeature, feature]));
       } else {
         console.warn(`Invalid booleanOperation ${modeConfig.booleanOperation}`);
         return null;
@@ -1744,7 +971,7 @@ var ViewMode = class extends GeoJsonEditMode {
 
 // dist/edit-modes/translate-mode.js
 var import_bearing3 = __toESM(require("@turf/bearing"), 1);
-var import_distance2 = __toESM(require("@turf/distance"), 1);
+var import_distance = __toESM(require("@turf/distance"), 1);
 var import_clone = __toESM(require("@turf/clone"), 1);
 var import_helpers4 = require("@turf/helpers");
 var import_viewport_mercator_project3 = require("viewport-mercator-project");
@@ -1847,7 +1074,7 @@ var TranslateMode = class extends GeoJsonEditMode {
     } else {
       const p1 = (0, import_helpers4.point)(startDragPoint);
       const p2 = (0, import_helpers4.point)(currentPoint);
-      const distanceMoved = (0, import_distance2.default)(p1, p2);
+      const distanceMoved = (0, import_distance.default)(p1, p2);
       const direction = (0, import_bearing3.default)(p1, p2);
       const movedFeatures = this._geometryBeforeTranslate.features.map((feature) => translateFromCenter((0, import_clone.default)(feature), distanceMoved, direction));
       for (let i = 0; i < selectedIndexes.length; i++) {
@@ -1894,12 +1121,7 @@ var ModifyMode = class extends GeoJsonEditMode {
         const referencePoint = (0, import_helpers5.point)(mapCoords2);
         recursivelyTraverseNestedArrays2(featureAsPick.object.geometry.coordinates, [], (lineString3, prefix) => {
           const lineStringFeature = (0, import_helpers5.lineString)(lineString3);
-          const candidateIntermediatePoint = this.getNearestPoint(
-            // @ts-expect-error turf types too wide
-            lineStringFeature,
-            referencePoint,
-            props.modeConfig && props.modeConfig.viewport
-          );
+          const candidateIntermediatePoint = this.getNearestPoint(lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport);
           if (!intermediatePoint || candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist) {
             intermediatePoint = candidateIntermediatePoint;
             positionIndexPrefix = prefix;
@@ -2035,7 +1257,7 @@ var ModifyMode = class extends GeoJsonEditMode {
   }
   handleStopDragging(event, props) {
     const selectedFeatureIndexes = props.selectedIndexes;
-    const editHandle = getPickedEditHandle(event.picks);
+    const editHandle = getPickedEditHandle(event.pointerDownPicks);
     if (selectedFeatureIndexes.length && editHandle) {
       this._dragEditHandle("finishMovePosition", props, editHandle, event);
     }
@@ -2051,14 +1273,14 @@ var ModifyMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/scale-mode.js
-var import_bbox2 = __toESM(require("@turf/bbox"), 1);
+var import_bbox = __toESM(require("@turf/bbox"), 1);
 var import_centroid = __toESM(require("@turf/centroid"), 1);
 var import_bearing4 = __toESM(require("@turf/bearing"), 1);
-var import_bbox_polygon2 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_bbox_polygon = __toESM(require("@turf/bbox-polygon"), 1);
 var import_helpers6 = require("@turf/helpers");
 var import_polygon_to_line = require("@turf/polygon-to-line");
 var import_meta2 = require("@turf/meta");
-var import_distance3 = __toESM(require("@turf/distance"), 1);
+var import_distance2 = __toESM(require("@turf/distance"), 1);
 var import_transform_scale = __toESM(require("@turf/transform-scale"), 1);
 var import_invariant2 = require("@turf/invariant");
 var ScaleMode = class extends GeoJsonEditMode {
@@ -2107,12 +1329,7 @@ var ScaleMode = class extends GeoJsonEditMode {
     const oppositeHandle = this._getOppositeScaleHandle(this._selectedEditHandle);
     const origin = (0, import_invariant2.getCoord)(oppositeHandle);
     const scaleFactor = getScaleFactor(origin, startDragPoint, currentPoint);
-    const scaledFeatures = (0, import_transform_scale.default)(
-      // @ts-expect-error turf types diff
-      this._geometryBeingScaled,
-      scaleFactor,
-      { origin }
-    );
+    const scaledFeatures = (0, import_transform_scale.default)(this._geometryBeingScaled, scaleFactor, { origin });
     return {
       updatedData: this._getUpdatedData(props, scaledFeatures),
       editType,
@@ -2186,7 +1403,7 @@ var ScaleMode = class extends GeoJsonEditMode {
     if (this._isSinglePointGeometrySelected(selectedGeometry)) {
       return { type: "FeatureCollection", features: [] };
     }
-    const boundingBox = (0, import_bbox_polygon2.default)((0, import_bbox2.default)(selectedGeometry));
+    const boundingBox = (0, import_bbox_polygon.default)((0, import_bbox.default)(selectedGeometry));
     boundingBox.properties.mode = "scale";
     const cornerGuidePoints = [];
     (0, import_meta2.coordEach)(boundingBox, (coord, coordIndex) => {
@@ -2204,17 +1421,17 @@ var ScaleMode = class extends GeoJsonEditMode {
   }
 };
 function getScaleFactor(centroid, startDragPoint, currentPoint) {
-  const startDistance = (0, import_distance3.default)(centroid, startDragPoint);
-  const endDistance = (0, import_distance3.default)(centroid, currentPoint);
+  const startDistance = (0, import_distance2.default)(centroid, startDragPoint);
+  const endDistance = (0, import_distance2.default)(centroid, currentPoint);
   return endDistance / startDistance;
 }
 
 // dist/edit-modes/rotate-mode.js
-var import_bbox3 = __toESM(require("@turf/bbox"), 1);
+var import_bbox2 = __toESM(require("@turf/bbox"), 1);
 var import_centroid2 = __toESM(require("@turf/centroid"), 1);
 var import_bearing5 = __toESM(require("@turf/bearing"), 1);
-var import_bbox_polygon3 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance4 = __toESM(require("@turf/distance"), 1);
+var import_bbox_polygon2 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_distance3 = __toESM(require("@turf/distance"), 1);
 var import_meta3 = require("@turf/meta");
 var import_invariant3 = require("@turf/invariant");
 var import_helpers7 = require("@turf/helpers");
@@ -2241,7 +1458,7 @@ var RotateMode = class extends GeoJsonEditMode {
     if (this._isRotating) {
       return (0, import_helpers7.featureCollection)([(0, import_centroid2.default)(selectedGeometry)]);
     }
-    const boundingBox = (0, import_bbox_polygon3.default)((0, import_bbox3.default)(selectedGeometry));
+    const boundingBox = (0, import_bbox_polygon2.default)((0, import_bbox2.default)(selectedGeometry));
     let previousCoord = null;
     let topEdgeMidpointCoords = null;
     let longestEdgeLength = 0;
@@ -2251,7 +1468,7 @@ var RotateMode = class extends GeoJsonEditMode {
         if (!topEdgeMidpointCoords || edgeMidpoint[1] > topEdgeMidpointCoords[1]) {
           topEdgeMidpointCoords = edgeMidpoint;
         }
-        const edgeDistance = (0, import_distance4.default)(coord, previousCoord);
+        const edgeDistance = (0, import_distance3.default)(coord, previousCoord);
         longestEdgeLength = Math.max(longestEdgeLength, edgeDistance);
       }
       previousCoord = coord;
@@ -2315,15 +1532,10 @@ var RotateMode = class extends GeoJsonEditMode {
       return null;
     }
     const centroid = (0, import_centroid2.default)(this._geometryBeingRotated);
-    const angle = getRotationAngle(centroid, startDragPoint, currentPoint);
-    const rotatedFeatures = (0, import_transform_rotate.default)(
-      // @ts-expect-error turf types too wide
-      this._geometryBeingRotated,
-      angle,
-      {
-        pivot: centroid
-      }
-    );
+    const angle = getRotationAngle(centroid.geometry.coordinates, startDragPoint, currentPoint);
+    const rotatedFeatures = (0, import_transform_rotate.default)(this._geometryBeingRotated, angle, {
+      pivot: centroid
+    });
     let updatedData = new ImmutableFeatureCollection(props.data);
     const selectedIndexes = props.selectedIndexes;
     for (let i = 0; i < selectedIndexes.length; i++) {
@@ -2365,12 +1577,12 @@ var DuplicateMode = class extends TranslateMode {
 
 // dist/edit-modes/split-polygon-mode.js
 var import_boolean_point_in_polygon = __toESM(require("@turf/boolean-point-in-polygon"), 1);
-var import_difference3 = __toESM(require("@turf/difference"), 1);
-var import_buffer2 = __toESM(require("@turf/buffer"), 1);
+var import_difference2 = __toESM(require("@turf/difference"), 1);
+var import_buffer = __toESM(require("@turf/buffer"), 1);
 var import_line_intersect = __toESM(require("@turf/line-intersect"), 1);
 var import_helpers8 = require("@turf/helpers");
 var import_bearing6 = __toESM(require("@turf/bearing"), 1);
-var import_distance5 = __toESM(require("@turf/distance"), 1);
+var import_distance4 = __toESM(require("@turf/distance"), 1);
 var import_destination3 = __toESM(require("@turf/destination"), 1);
 var import_polygon_to_line3 = __toESM(require("@turf/polygon-to-line"), 1);
 var import_nearest_point_on_line = __toESM(require("@turf/nearest-point-on-line"), 1);
@@ -2389,7 +1601,7 @@ var SplitPolygonMode = class extends GeoJsonEditMode {
       let closestPoint = null;
       lines.forEach((line) => {
         const snapPoint = (0, import_nearest_point_on_line.default)(line, firstPoint);
-        const distanceFromOrigin = (0, import_distance5.default)(snapPoint, firstPoint);
+        const distanceFromOrigin = (0, import_distance4.default)(snapPoint, firstPoint);
         if (minDistance > distanceFromOrigin) {
           minDistance = distanceFromOrigin;
           closestPoint = snapPoint;
@@ -2397,7 +1609,7 @@ var SplitPolygonMode = class extends GeoJsonEditMode {
       });
       if (closestPoint) {
         const lastBearing = (0, import_bearing6.default)(firstPoint, closestPoint);
-        const currentDistance = (0, import_distance5.default)(firstPoint, mapCoords2, { units: "meters" });
+        const currentDistance = (0, import_distance4.default)(firstPoint, mapCoords2, { units: "meters" });
         return (0, import_destination3.default)(firstPoint, currentDistance, lastBearing, {
           units: "meters"
         }).geometry.coordinates;
@@ -2473,8 +1685,8 @@ var SplitPolygonMode = class extends GeoJsonEditMode {
       gap = 0.1;
       units = "centimeters";
     }
-    const buffer = (0, import_buffer2.default)(tentativeFeature, gap, { units });
-    const updatedGeometry = (0, import_difference3.default)(selectedGeometry, buffer);
+    const buffer = (0, import_buffer.default)(tentativeFeature, gap, { units });
+    const updatedGeometry = (0, import_difference2.default)((0, import_helpers8.featureCollection)([(0, import_helpers8.feature)(selectedGeometry), buffer]));
     if (!updatedGeometry) {
       console.warn("Canceling edit. Split Polygon erased");
       return null;
@@ -2749,7 +1961,7 @@ var DrawPointMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/draw-line-string-mode.js
-var import_distance6 = __toESM(require("@turf/distance"), 1);
+var import_distance5 = __toESM(require("@turf/distance"), 1);
 
 // dist/utils/memoize.js
 function isEqual(a, b) {
@@ -2906,7 +2118,7 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
   calculateInfoDraw(clickSequence) {
     if (clickSequence.length > 1) {
       this.position = clickSequence[clickSequence.length - 1];
-      this.dist += (0, import_distance6.default)(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]);
+      this.dist += (0, import_distance5.default)(clickSequence[clickSequence.length - 2], clickSequence[clickSequence.length - 1]);
     }
   }
   /**
@@ -2938,48 +2150,53 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
 // dist/edit-modes/draw-polygon-mode.js
 var import_line_intersect2 = __toESM(require("@turf/line-intersect"), 1);
 var import_helpers9 = require("@turf/helpers");
+var import_boolean_within = __toESM(require("@turf/boolean-within"), 1);
 var DrawPolygonMode = class extends GeoJsonEditMode {
+  holeSequence = [];
+  isDrawingHole = false;
   createTentativeFeature(props) {
     const { lastPointerMoveEvent } = props;
     const clickSequence = this.getClickSequence();
+    const holeSequence = this.holeSequence;
     const lastCoords = lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : [];
-    let tentativeFeature;
-    if (clickSequence.length === 1 || clickSequence.length === 2) {
-      tentativeFeature = {
-        type: "Feature",
-        properties: {
-          guideType: "tentative"
-        },
-        geometry: {
-          type: "LineString",
-          coordinates: [...clickSequence, ...lastCoords]
-        }
+    let geometry;
+    if (this.isDrawingHole && holeSequence.length > 1) {
+      geometry = {
+        type: "Polygon",
+        coordinates: [
+          [...clickSequence, clickSequence[0]],
+          [...holeSequence, ...lastCoords, holeSequence[0]]
+        ]
       };
     } else if (clickSequence.length > 2) {
-      tentativeFeature = {
-        type: "Feature",
-        properties: {
-          guideType: "tentative"
-        },
-        geometry: {
-          type: "Polygon",
-          coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]]
-        }
+      geometry = {
+        type: "Polygon",
+        coordinates: [[...clickSequence, ...lastCoords, clickSequence[0]]]
+      };
+    } else {
+      geometry = {
+        type: "LineString",
+        coordinates: [...clickSequence, ...lastCoords]
       };
     }
-    return tentativeFeature;
+    return {
+      type: "Feature",
+      properties: {
+        guideType: "tentative"
+      },
+      geometry
+    };
   }
   getGuides(props) {
-    const clickSequence = this.getClickSequence();
     const guides = {
       type: "FeatureCollection",
       features: []
     };
-    const tentativeFeature = this.createTentativeFeature(props);
-    if (tentativeFeature) {
-      guides.features.push(tentativeFeature);
-    }
-    const editHandles = clickSequence.map((clickedCoord, index) => ({
+    const tentative = this.createTentativeFeature(props);
+    if (tentative)
+      guides.features.push(tentative);
+    const sequence = this.isDrawingHole ? this.holeSequence : this.getClickSequence();
+    const handles = sequence.map((coord, index) => ({
       type: "Feature",
       properties: {
         guideType: "editHandle",
@@ -2989,51 +2206,55 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       },
       geometry: {
         type: "Point",
-        coordinates: clickedCoord
+        coordinates: coord
       }
     }));
-    guides.features.push(...editHandles);
+    guides.features.push(...handles);
     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
+  // eslint-disable-next-line complexity, max-statements
   handleClick(event, props) {
     const { picks } = event;
     const clickedEditHandle = getPickedEditHandle(picks);
     const clickSequence = this.getClickSequence();
-    let overlappingLines = false;
-    if (clickSequence.length > 2 && props.modeConfig && props.modeConfig.preventOverlappingLines) {
-      const currentLine = (0, import_helpers9.lineString)([
-        clickSequence[clickSequence.length - 1],
-        event.mapCoords
-      ]);
-      const otherLines = (0, import_helpers9.lineString)([...clickSequence.slice(0, clickSequence.length - 1)]);
-      const intersectingPoints = (0, import_line_intersect2.default)(currentLine, otherLines);
-      if (intersectingPoints.features.length > 0) {
-        overlappingLines = true;
+    const coords = event.mapCoords;
+    if (!this.isDrawingHole && clickSequence.length > 2 && clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && (clickedEditHandle.properties.positionIndexes[0] === 0 || clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)) {
+      this.finishDrawing(props);
+      return;
+    }
+    if (!this.isDrawingHole && clickSequence.length > 2) {
+      if (isNearFirstPoint(coords, clickSequence[0])) {
+        this.finishDrawing(props);
+        this.resetClickSequence();
+        return;
+      }
+    }
+    if (this.isDrawingHole) {
+      const current = this.holeSequence;
+      current.push(coords);
+      if (current.length > 2) {
+        const poly = {
+          type: "Polygon",
+          coordinates: [
+            [...clickSequence, clickSequence[0]],
+            [...current, current[0]]
+          ]
+        };
+        this.resetClickSequence();
+        this.holeSequence = [];
+        this.isDrawingHole = false;
+        const editAction = this.getAddFeatureOrBooleanPolygonAction(poly, props);
+        if (editAction)
+          props.onEdit(editAction);
       }
+      return;
     }
     let positionAdded = false;
-    if (!clickedEditHandle && !overlappingLines) {
+    if (!clickedEditHandle) {
       this.addClickSequence(event);
       positionAdded = true;
     }
-    if (clickSequence.length > 2 && clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && (clickedEditHandle.properties.positionIndexes[0] === 0 || clickedEditHandle.properties.positionIndexes[0] === clickSequence.length - 1)) {
-      this.finishDrawing(props);
-    } else if (positionAdded) {
+    if (positionAdded) {
       props.onEdit({
         // data is the same
         updatedData: props.data,
@@ -3044,16 +2265,19 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       });
     }
   }
-  handleDoubleClick(event, props) {
+  handleDoubleClick(_event, props) {
     this.finishDrawing(props);
+    this.resetClickSequence();
   }
   handleKeyUp(event, props) {
     if (event.key === "Enter") {
       this.finishDrawing(props);
+      this.resetClickSequence();
     } else if (event.key === "Escape") {
       this.resetClickSequence();
+      this.holeSequence = [];
+      this.isDrawingHole = false;
       props.onEdit({
-        // Because the new drawing feature is dropped, so the data will keep as the same.
         updatedData: props.data,
         editType: "cancelFeature",
         editContext: {}
@@ -3064,10 +2288,122 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
     props.onUpdateCursor("cell");
     super.handlePointerMove(event, props);
   }
+  // eslint-disable-next-line max-statements, complexity
+  finishDrawing(props) {
+    const clickSequence = this.getClickSequence();
+    const polygon2 = [...clickSequence, clickSequence[0]];
+    const newPolygon = (0, import_helpers9.polygon)([polygon2]);
+    const canAddHole = canAddHoleToPolygon(props);
+    const canOverlap = canPolygonOverlap(props);
+    if (!canOverlap) {
+      const overlapping = (0, import_line_intersect2.default)(newPolygon, newPolygon).features.filter((intersection) => !newPolygon.geometry.coordinates[0].some((coord) => coord[0] === intersection.geometry.coordinates[0] && coord[1] === intersection.geometry.coordinates[1]));
+      if (overlapping.length > 0) {
+        props.onEdit({
+          updatedData: props.data,
+          editType: "invalidPolygon",
+          editContext: { reason: "overlaps" }
+        });
+        this.resetClickSequence();
+        return;
+      }
+    }
+    if (canAddHole) {
+      const holeResult = this.tryAddHoleToExistingPolygon(newPolygon, polygon2, props);
+      if (holeResult.handled) {
+        this.resetClickSequence();
+        return;
+      }
+    }
+    const editAction = this.getAddFeatureOrBooleanPolygonAction({
+      type: "Polygon",
+      coordinates: [[...this.getClickSequence(), this.getClickSequence()[0]]]
+    }, props);
+    if (editAction)
+      props.onEdit(editAction);
+    this.resetClickSequence();
+    return;
+  }
+  tryAddHoleToExistingPolygon(newPolygon, polygon2, props) {
+    for (const [featureIndex, feature] of props.data.features.entries()) {
+      if (feature.geometry.type === "Polygon") {
+        const result = this.validateAndCreateHole(feature, featureIndex, newPolygon, polygon2, props);
+        if (result.handled) {
+          return result;
+        }
+      }
+    }
+    return { handled: false };
+  }
+  validateAndCreateHole(feature, featureIndex, newPolygon, polygon2, props) {
+    const outer = (0, import_helpers9.polygon)(feature.geometry.coordinates);
+    for (let i = 1; i < feature.geometry.coordinates.length; i++) {
+      const hole = (0, import_helpers9.polygon)([feature.geometry.coordinates[i]]);
+      const intersection = (0, import_line_intersect2.default)(hole, newPolygon);
+      if (intersection.features.length > 0) {
+        props.onEdit({
+          updatedData: props.data,
+          editType: "invalidHole",
+          editContext: { reason: "intersects-existing-hole" }
+        });
+        return { handled: true };
+      }
+      if ((0, import_boolean_within.default)(hole, newPolygon) || (0, import_boolean_within.default)(newPolygon, hole)) {
+        props.onEdit({
+          updatedData: props.data,
+          editType: "invalidHole",
+          editContext: { reason: "contains-or-contained-by-existing-hole" }
+        });
+        return { handled: true };
+      }
+    }
+    const intersectionWithOuter = (0, import_line_intersect2.default)(outer, newPolygon);
+    if (intersectionWithOuter.features.length > 0) {
+      props.onEdit({
+        updatedData: props.data,
+        editType: "invalidPolygon",
+        editContext: { reason: "intersects-existing-polygon" }
+      });
+      return { handled: true };
+    }
+    if ((0, import_boolean_within.default)(outer, newPolygon)) {
+      props.onEdit({
+        updatedData: props.data,
+        editType: "invalidPolygon",
+        editContext: { reason: "contains-existing-polygon" }
+      });
+      return { handled: true };
+    }
+    if ((0, import_boolean_within.default)(newPolygon, outer)) {
+      const updatedData = new ImmutableFeatureCollection(props.data).replaceGeometry(featureIndex, {
+        ...feature.geometry,
+        coordinates: [...feature.geometry.coordinates, polygon2]
+      }).getObject();
+      props.onEdit({
+        updatedData,
+        editType: "addHole",
+        editContext: { hole: newPolygon.geometry }
+      });
+      return { handled: true };
+    }
+    return { handled: false };
+  }
 };
+function isNearFirstPoint(click, first, threshold = 1e-4) {
+  const dx = click[0] - first[0];
+  const dy = click[1] - first[1];
+  return dx * dx + dy * dy < threshold * threshold;
+}
+function canAddHoleToPolygon(props) {
+  var _a;
+  return ((_a = props.modeConfig) == null ? void 0 : _a.allowHoles) ?? false;
+}
+function canPolygonOverlap(props) {
+  var _a;
+  return ((_a = props.modeConfig) == null ? void 0 : _a.allowSelfIntersection) ?? false;
+}
 
 // dist/edit-modes/draw-rectangle-mode.js
-var import_bbox_polygon4 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_bbox_polygon3 = __toESM(require("@turf/bbox-polygon"), 1);
 
 // dist/edit-modes/two-click-polygon-mode.js
 var import_lodash = __toESM(require("lodash.omit"), 1);
@@ -3124,15 +2460,15 @@ var TwoClickPolygonMode = class extends GeoJsonEditMode {
     }
     const corner1 = clickSequence[0];
     const corner2 = lastPointerMoveEvent.mapCoords;
-    const polygon3 = this.getTwoClickPolygon(corner1, corner2, modeConfig);
-    if (polygon3) {
+    const polygon2 = this.getTwoClickPolygon(corner1, corner2, modeConfig);
+    if (polygon2) {
       guides.features.push({
         type: "Feature",
         properties: {
-          ...polygon3.properties,
+          ...polygon2.properties,
           guideType: "tentative"
         },
-        geometry: polygon3.geometry
+        geometry: polygon2.geometry
       });
     }
     return guides;
@@ -3159,7 +2495,7 @@ var TwoClickPolygonMode = class extends GeoJsonEditMode {
 // dist/edit-modes/draw-rectangle-mode.js
 var DrawRectangleMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
-    const rectangle = (0, import_bbox_polygon4.default)([coord1[0], coord1[1], coord2[0], coord2[1]]);
+    const rectangle = (0, import_bbox_polygon3.default)([coord1[0], coord1[1], coord2[0], coord2[1]]);
     rectangle.properties = rectangle.properties || {};
     rectangle.properties.shape = "Rectangle";
     return rectangle;
@@ -3167,22 +2503,22 @@ var DrawRectangleMode = class extends TwoClickPolygonMode {
 };
 
 // dist/edit-modes/draw-square-mode.js
-var import_bbox_polygon5 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance7 = __toESM(require("@turf/distance"), 1);
+var import_bbox_polygon4 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_distance6 = __toESM(require("@turf/distance"), 1);
 var import_along = __toESM(require("@turf/along"), 1);
 var import_helpers10 = require("@turf/helpers");
 var DrawSquareMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
-    const distance1 = (0, import_distance7.default)((0, import_helpers10.point)(coord3), (0, import_helpers10.point)(coord1));
-    const distance22 = (0, import_distance7.default)((0, import_helpers10.point)(coord4), (0, import_helpers10.point)(coord1));
+    const distance1 = (0, import_distance6.default)((0, import_helpers10.point)(coord3), (0, import_helpers10.point)(coord1));
+    const distance22 = (0, import_distance6.default)((0, import_helpers10.point)(coord4), (0, import_helpers10.point)(coord1));
     const shortestDistance = distance1 <= distance22 ? distance1 : distance22;
     const closestPoint = distance1 <= distance22 ? coord3 : coord4;
     const line = (0, import_helpers10.lineString)([closestPoint, coord2]);
     const newPoint = (0, import_along.default)(line, shortestDistance);
     const corner = newPoint.geometry.coordinates;
-    const square = (0, import_bbox_polygon5.default)([coord1[0], coord1[1], corner[0], corner[1]]);
+    const square = (0, import_bbox_polygon4.default)([coord1[0], coord1[1], corner[0], corner[1]]);
     square.properties = square.properties || {};
     square.properties.shape = "Square";
     return square;
@@ -3190,12 +2526,12 @@ var DrawSquareMode = class extends TwoClickPolygonMode {
 };
 
 // dist/edit-modes/draw-rectangle-from-center-mode.js
-var import_bbox_polygon6 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_bbox_polygon5 = __toESM(require("@turf/bbox-polygon"), 1);
 var DrawRectangleFromCenterMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
     const longitude = coord1[0] > coord2[0] ? coord1[0] + Math.abs(coord1[0] - coord2[0]) : coord1[0] - Math.abs(coord1[0] - coord2[0]);
     const latitude = coord1[1] > coord2[1] ? coord1[1] + Math.abs(coord1[1] - coord2[1]) : coord1[1] - Math.abs(coord1[1] - coord2[1]);
-    const rectangle = (0, import_bbox_polygon6.default)([longitude, latitude, coord2[0], coord2[1]]);
+    const rectangle = (0, import_bbox_polygon5.default)([longitude, latitude, coord2[0], coord2[1]]);
     rectangle.properties = rectangle.properties || {};
     rectangle.properties.shape = "Rectangle";
     return rectangle;
@@ -3203,16 +2539,16 @@ var DrawRectangleFromCenterMode = class extends TwoClickPolygonMode {
 };
 
 // dist/edit-modes/draw-square-from-center-mode.js
-var import_bbox_polygon7 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance8 = __toESM(require("@turf/distance"), 1);
+var import_bbox_polygon6 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_distance7 = __toESM(require("@turf/distance"), 1);
 var import_along2 = __toESM(require("@turf/along"), 1);
 var import_helpers11 = require("@turf/helpers");
 var DrawSquareFromCenterMode = class extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1, coord2, modeConfig) {
     const coord3 = [coord2[0], coord1[1]];
     const coord4 = [coord1[0], coord2[1]];
-    const distance1 = (0, import_distance8.default)((0, import_helpers11.point)(coord3), (0, import_helpers11.point)(coord1));
-    const distance22 = (0, import_distance8.default)((0, import_helpers11.point)(coord4), (0, import_helpers11.point)(coord1));
+    const distance1 = (0, import_distance7.default)((0, import_helpers11.point)(coord3), (0, import_helpers11.point)(coord1));
+    const distance22 = (0, import_distance7.default)((0, import_helpers11.point)(coord4), (0, import_helpers11.point)(coord1));
     const shortestDistance = distance1 <= distance22 ? distance1 : distance22;
     const closestPoint = distance1 <= distance22 ? coord3 : coord4;
     const line = (0, import_helpers11.lineString)([closestPoint, coord2]);
@@ -3220,7 +2556,7 @@ var DrawSquareFromCenterMode = class extends TwoClickPolygonMode {
     const corner = newPoint.geometry.coordinates;
     const longitude = coord1[0] > corner[0] ? coord1[0] + Math.abs(coord1[0] - corner[0]) : coord1[0] - Math.abs(coord1[0] - corner[0]);
     const latitude = coord1[1] > corner[1] ? coord1[1] + Math.abs(coord1[1] - corner[1]) : coord1[1] - Math.abs(coord1[1] - corner[1]);
-    const square = (0, import_bbox_polygon7.default)([longitude, latitude, corner[0], corner[1]]);
+    const square = (0, import_bbox_polygon6.default)([longitude, latitude, corner[0], corner[1]]);
     square.properties = square.properties || {};
     square.properties.shape = "Square";
     return square;
@@ -3229,7 +2565,7 @@ var DrawSquareFromCenterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-circle-from-center-mode.js
 var import_circle = __toESM(require("@turf/circle"), 1);
-var import_distance9 = __toESM(require("@turf/distance"), 1);
+var import_distance8 = __toESM(require("@turf/distance"), 1);
 var import_area = __toESM(require("@turf/area"), 1);
 var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
   radius = null;
@@ -3243,7 +2579,7 @@ var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
       console.warn("Minimum steps to draw a circle is 4 ");
       options.steps = 4;
     }
-    this.radius = Math.max((0, import_distance9.default)(coord1, coord2), 1e-3);
+    this.radius = Math.max((0, import_distance8.default)(coord1, coord2), 1e-3);
     const geometry = (0, import_circle.default)(coord1, this.radius, options);
     geometry.properties = geometry.properties || {};
     geometry.properties.shape = "Circle";
@@ -3297,7 +2633,7 @@ var DrawCircleFromCenterMode = class extends TwoClickPolygonMode {
 
 // dist/edit-modes/draw-circle-by-diameter-mode.js
 var import_circle2 = __toESM(require("@turf/circle"), 1);
-var import_distance10 = __toESM(require("@turf/distance"), 1);
+var import_distance9 = __toESM(require("@turf/distance"), 1);
 var import_area2 = __toESM(require("@turf/area"), 1);
 var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
   radius = null;
@@ -3312,8 +2648,8 @@ var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
       options.steps = 4;
     }
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    this.radius = Math.max((0, import_distance10.default)(coord1, centerCoordinates), 1e-3);
-    this.diameter = Math.max((0, import_distance10.default)(coord1, coord2), 1e-3);
+    this.radius = Math.max((0, import_distance9.default)(coord1, centerCoordinates), 1e-3);
+    this.diameter = Math.max((0, import_distance9.default)(coord1, coord2), 1e-3);
     this.position = centerCoordinates;
     const geometry = (0, import_circle2.default)(centerCoordinates, this.radius, options);
     geometry.properties = geometry.properties || {};
@@ -3371,8 +2707,8 @@ var DrawCircleByDiameterMode = class extends TwoClickPolygonMode {
 };
 
 // dist/edit-modes/draw-ellipse-by-bounding-box-mode.js
-var import_bbox_polygon8 = __toESM(require("@turf/bbox-polygon"), 1);
-var import_distance11 = __toESM(require("@turf/distance"), 1);
+var import_bbox_polygon7 = __toESM(require("@turf/bbox-polygon"), 1);
+var import_distance10 = __toESM(require("@turf/distance"), 1);
 var import_ellipse = __toESM(require("@turf/ellipse"), 1);
 var import_helpers12 = require("@turf/helpers");
 var DrawEllipseByBoundingBoxMode = class extends TwoClickPolygonMode {
@@ -3381,11 +2717,11 @@ var DrawEllipseByBoundingBoxMode = class extends TwoClickPolygonMode {
     const minY = Math.min(coord1[1], coord2[1]);
     const maxX = Math.max(coord1[0], coord2[0]);
     const maxY = Math.max(coord1[1], coord2[1]);
-    const polygonPoints = (0, import_bbox_polygon8.default)([minX, minY, maxX, maxY]).geometry.coordinates[0];
+    const polygonPoints = (0, import_bbox_polygon7.default)([minX, minY, maxX, maxY]).geometry.coordinates[0];
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    const xSemiAxis = Math.max((0, import_distance11.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[1])), 1e-3);
-    const ySemiAxis = Math.max((0, import_distance11.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[3])), 1e-3);
-    const geometry = (0, import_ellipse.default)(centerCoordinates, xSemiAxis, ySemiAxis);
+    const xSemiAxis = Math.max((0, import_distance10.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[1])), 1e-3);
+    const ySemiAxis = Math.max((0, import_distance10.default)((0, import_helpers12.point)(polygonPoints[0]), (0, import_helpers12.point)(polygonPoints[3])), 1e-3);
+    const geometry = (0, import_ellipse.default)(centerCoordinates, xSemiAxis, ySemiAxis, {});
     geometry.properties = geometry.properties || {};
     geometry.properties.editProperties = geometry.properties.editProperties || {};
     geometry.properties.editProperties.shape = "Ellipse";
@@ -3435,15 +2771,15 @@ var ThreeClickPolygonMode = class extends GeoJsonEditMode {
         }
       });
     } else {
-      const polygon3 = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], hoveredCoord, modeConfig);
-      if (polygon3) {
+      const polygon2 = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], hoveredCoord, modeConfig);
+      if (polygon2) {
         guides.features.push({
           type: "Feature",
           properties: {
-            ...polygon3.properties,
+            ...polygon2.properties,
             guideType: "tentative"
           },
-          geometry: polygon3.geometry
+          geometry: polygon2.geometry
         });
       }
     }
@@ -3497,15 +2833,15 @@ var DrawRectangleUsingThreePointsMode = class extends ThreeClickPolygonMode {
 };
 
 // dist/edit-modes/draw-ellipse-using-three-points-mode.js
-var import_distance12 = __toESM(require("@turf/distance"), 1);
+var import_distance11 = __toESM(require("@turf/distance"), 1);
 var import_ellipse2 = __toESM(require("@turf/ellipse"), 1);
 var import_bearing8 = __toESM(require("@turf/bearing"), 1);
 var import_helpers13 = require("@turf/helpers");
 var DrawEllipseUsingThreePointsMode = class extends ThreeClickPolygonMode {
   getThreeClickPolygon(coord1, coord2, coord3, modeConfig) {
     const centerCoordinates = getIntermediatePosition(coord1, coord2);
-    const xSemiAxis = Math.max((0, import_distance12.default)(centerCoordinates, (0, import_helpers13.point)(coord3)), 1e-3);
-    const ySemiAxis = Math.max((0, import_distance12.default)(coord1, coord2), 1e-3) / 2;
+    const xSemiAxis = Math.max((0, import_distance11.default)(centerCoordinates, (0, import_helpers13.point)(coord3)), 1e-3);
+    const ySemiAxis = Math.max((0, import_distance11.default)(coord1, coord2), 1e-3) / 2;
     const options = { angle: (0, import_bearing8.default)(coord1, coord2) };
     const geometry = (0, import_ellipse2.default)(centerCoordinates, xSemiAxis, ySemiAxis, options);
     geometry.properties = geometry.properties || {};
@@ -3523,7 +2859,7 @@ var DrawEllipseUsingThreePointsMode = class extends ThreeClickPolygonMode {
 var import_destination4 = __toESM(require("@turf/destination"), 1);
 var import_bearing9 = __toESM(require("@turf/bearing"), 1);
 var import_line_intersect3 = __toESM(require("@turf/line-intersect"), 1);
-var import_distance13 = __toESM(require("@turf/distance"), 1);
+var import_distance12 = __toESM(require("@turf/distance"), 1);
 var import_helpers14 = require("@turf/helpers");
 var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
   createTentativeFeature(props) {
@@ -3594,13 +2930,13 @@ var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
       const lineString3 = tentativeFeature.geometry;
       clickSequence[clickSequence.length - 1] = lineString3.coordinates[lineString3.coordinates.length - 1];
     } else if (clickSequence.length > 3 && tentativeFeature.geometry.type === "Polygon") {
-      const polygon3 = tentativeFeature.geometry;
-      clickSequence[clickSequence.length - 1] = polygon3.coordinates[0][polygon3.coordinates[0].length - 2];
+      const polygon2 = tentativeFeature.geometry;
+      clickSequence[clickSequence.length - 1] = polygon2.coordinates[0][polygon2.coordinates[0].length - 2];
       const clickedEditHandle = getPickedEditHandle(picks);
-      if (clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && (clickedEditHandle.properties.positionIndexes[1] === 0 || clickedEditHandle.properties.positionIndexes[1] === polygon3.coordinates[0].length - 3)) {
+      if (clickedEditHandle && Array.isArray(clickedEditHandle.properties.positionIndexes) && (clickedEditHandle.properties.positionIndexes[1] === 0 || clickedEditHandle.properties.positionIndexes[1] === polygon2.coordinates[0].length - 3)) {
         const polygonToAdd = {
           type: "Polygon",
-          coordinates: this.finalizedCoordinates([...polygon3.coordinates[0]])
+          coordinates: this.finalizedCoordinates([...polygon2.coordinates[0]])
         };
         this.resetClickSequence();
         const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
@@ -3653,7 +2989,7 @@ var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
         const newAngle2 = angle2 + factor * 90;
         angles.second.push(newAngle2 > 180 ? newAngle2 - 360 : newAngle2);
       });
-      const distance7 = (0, import_distance13.default)((0, import_helpers14.point)(p1), (0, import_helpers14.point)(p3));
+      const distance7 = (0, import_distance12.default)((0, import_helpers14.point)(p1), (0, import_helpers14.point)(p3));
       [0, 1, 2].forEach((indexFirst) => {
         const line1 = (0, import_helpers14.lineString)([
           p1,
@@ -3983,12 +3319,12 @@ var DeleteMode = class extends GeoJsonEditMode {
 };
 
 // dist/constants.js
-var PROJECTED_PIXEL_SIZE_MULTIPLIER2 = 2 / 3;
+var PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;
 
 // dist/editable-layers/editable-layer.js
-var import_core3 = require("@deck.gl/core");
+var import_core = require("@deck.gl/core");
 var EVENT_TYPES = ["click", "pointermove", "panstart", "panmove", "panend", "keyup", "dblclick"];
-var EditableLayer = class extends import_core3.CompositeLayer {
+var EditableLayer = class extends import_core.CompositeLayer {
   state = void 0;
   // Overridable interaction event handlers
   onLayerClick(event) {
@@ -4181,7 +3517,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_layers = require("@deck.gl/layers");
 var uniformBlock = `uniform pickingLineWidthUniforms {
   float extraPixels;
 } pickingLineWidth;
@@ -4195,10 +3531,10 @@ var pickingUniforms = {
   }
 };
 var defaultProps = {
-  ...import_layers5.PathLayer.defaultProps,
+  ...import_layers.PathLayer.defaultProps,
   pickingLineWidthExtraPixels: { type: "number", min: 0, value: Number.MAX_SAFE_INTEGER }
 };
-var EditablePathLayer = class extends import_layers5.PathLayer {
+var EditablePathLayer = class extends import_layers.PathLayer {
   getShaders() {
     const shaders = super.getShaders();
     shaders.vs = insertBefore(shaders.vs, "vec3 width;", `
@@ -4236,7 +3572,7 @@ var DEFAULT_EDITING_POINT_OUTLINE_COLOR = [255, 255, 255, 255];
 var DEFAULT_EDITING_EXISTING_POINT_RADIUS = 5;
 var DEFAULT_EDITING_INTERMEDIATE_POINT_RADIUS = 3;
 var DEFAULT_EDITING_SNAP_POINT_RADIUS = 7;
-var DEFAULT_TOOLTIP_FONT_SIZE = 32 * PROJECTED_PIXEL_SIZE_MULTIPLIER2;
+var DEFAULT_TOOLTIP_FONT_SIZE = 32 * PROJECTED_PIXEL_SIZE_MULTIPLIER;
 var DEFAULT_EDIT_MODE = DrawPolygonMode;
 function guideAccessor(accessor) {
   if (!accessor || typeof accessor !== "function") {
@@ -4288,7 +3624,7 @@ var defaultProps2 = {
   fp64: false,
   filled: true,
   stroked: true,
-  lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER2,
+  lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER,
   lineWidthMinPixels: 1,
   lineWidthMaxPixels: Number.MAX_SAFE_INTEGER,
   pickingLineWidthExtraPixels: 0,
@@ -4403,13 +3739,13 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         }
       },
       updateTriggers: {
-        getLineColor: [this.props.selectedFeatureIndexes, this.props.mode],
-        getFillColor: [this.props.selectedFeatureIndexes, this.props.mode],
-        getPointRadius: [this.props.selectedFeatureIndexes, this.props.mode],
-        getLineWidth: [this.props.selectedFeatureIndexes, this.props.mode]
+        getLineColor: [this.props.updateTriggers.getLineColor, this.props.selectedFeatureIndexes, this.props.mode],
+        getFillColor: [this.props.updateTriggers.getFillColor, this.props.selectedFeatureIndexes, this.props.mode],
+        getPointRadius: [this.props.updateTriggers.getPointRadius, this.props.selectedFeatureIndexes, this.props.mode],
+        getLineWidth: [this.props.updateTriggers.getLineWidth, this.props.selectedFeatureIndexes, this.props.mode]
       }
     });
-    let layers = [new import_layers6.GeoJsonLayer(subLayerProps)];
+    let layers = [new import_layers2.GeoJsonLayer(subLayerProps)];
     layers = layers.concat(this.createGuidesLayers(), this.createTooltipsLayers());
     return layers;
   }
@@ -4523,7 +3859,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
     };
     if (this.props.editHandleType === "icon") {
       subLayerProps["points-icon"] = {
-        type: import_layers6.IconLayer,
+        type: import_layers2.IconLayer,
         iconAtlas: this.props.editHandleIconAtlas,
         iconMapping: this.props.editHandleIconMapping,
         sizeUnits: this.props.editHandleIconSizeUnits,
@@ -4536,7 +3872,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
       };
     } else {
       subLayerProps["points-circle"] = {
-        type: import_layers6.ScatterplotLayer,
+        type: import_layers2.ScatterplotLayer,
         radiusScale: this.props.editHandlePointRadiusScale,
         stroked: this.props.editHandlePointOutline,
         getLineWidth: this.props.editHandlePointStrokeWidth,
@@ -4549,7 +3885,7 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         billboard: this.props.billboard
       };
     }
-    const layer = new import_layers6.GeoJsonLayer(this.getSubLayerProps({
+    const layer = new import_layers2.GeoJsonLayer(this.getSubLayerProps({
       id: "guides",
       data: guides,
       fp64: this.props.fp64,
@@ -4572,7 +3908,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_layers2.TextLayer({
       getSize: DEFAULT_TOOLTIP_FONT_SIZE,
       ...this.getSubLayerProps({
         id: "tooltips",
@@ -4638,7 +3974,7 @@ var defaultProps3 = {
   selectedIndexes: [],
   filled: false,
   stroked: true,
-  lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER2,
+  lineWidthScale: PROJECTED_PIXEL_SIZE_MULTIPLIER,
   lineWidthMinPixels: 1,
   lineWidthMaxPixels: Number.MAX_SAFE_INTEGER,
   lineWidthUnits: "pixels",
@@ -4772,25 +4108,25 @@ __publicField(EditableH3ClusterLayer, "layerName", "EditableH3ClusterLayer");
 __publicField(EditableH3ClusterLayer, "defaultProps", defaultProps3);
 
 // dist/editable-layers/selection-layer.js
-var import_core4 = require("@deck.gl/core");
-var import_layers7 = require("@deck.gl/layers");
+var import_core2 = require("@deck.gl/core");
+var import_layers3 = 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);
-var SELECTION_TYPE2 = {
+var import_buffer2 = __toESM(require("@turf/buffer"), 1);
+var import_difference3 = __toESM(require("@turf/difference"), 1);
+var SELECTION_TYPE = {
   NONE: null,
   RECTANGLE: "rectangle",
   POLYGON: "polygon"
 };
 var MODE_MAP = {
-  [SELECTION_TYPE2.RECTANGLE]: DrawRectangleMode,
-  [SELECTION_TYPE2.POLYGON]: DrawPolygonMode
+  [SELECTION_TYPE.RECTANGLE]: DrawRectangleMode,
+  [SELECTION_TYPE.POLYGON]: DrawPolygonMode
 };
 var MODE_CONFIG_MAP = {
-  [SELECTION_TYPE2.RECTANGLE]: { dragToDraw: true }
+  [SELECTION_TYPE.RECTANGLE]: { dragToDraw: true }
 };
 var defaultProps4 = {
-  selectionType: SELECTION_TYPE2.RECTANGLE,
+  selectionType: SELECTION_TYPE.RECTANGLE,
   layerIds: [],
   onSelect: () => {
   }
@@ -4799,7 +4135,7 @@ var EMPTY_DATA = {
   type: "FeatureCollection",
   features: []
 };
-var EXPANSION_KM2 = 50;
+var EXPANSION_KM = 50;
 var LAYER_ID_GEOJSON = "selection-geojson";
 var LAYER_ID_BLOCKER = "selection-blocker";
 var PASS_THROUGH_PROPS = [
@@ -4824,7 +4160,7 @@ var PASS_THROUGH_PROPS = [
   "getTentativeFillColor",
   "getTentativeLineWidth"
 ];
-var SelectionLayer = class extends import_core4.CompositeLayer {
+var SelectionLayer = class extends import_core2.CompositeLayer {
   state = void 0;
   _selectRectangleObjects(coordinates) {
     const { layerIds, onSelect } = this.props;
@@ -4849,10 +4185,10 @@ var SelectionLayer = class extends import_core4.CompositeLayer {
     const maxX = Math.max(...allX);
     const maxY = Math.max(...allY);
     const landPointsPoly = (0, import_helpers16.polygon)(coordinates);
-    const bigBuffer = (0, import_buffer3.default)(landPointsPoly, EXPANSION_KM2);
+    const bigBuffer = (0, import_buffer2.default)(landPointsPoly, EXPANSION_KM);
     let bigPolygon;
     try {
-      bigPolygon = (0, import_difference4.default)(bigBuffer, landPointsPoly);
+      bigPolygon = (0, import_difference3.default)((0, import_helpers16.featureCollection)([bigBuffer, landPointsPoly]));
     } catch (e) {
       console.log("turfDifference() error", e);
       return;
@@ -4896,9 +4232,9 @@ var SelectionLayer = class extends import_core4.CompositeLayer {
         onEdit: ({ updatedData, editType }) => {
           if (editType === "addFeature") {
             const { coordinates } = updatedData.features[0].geometry;
-            if (this.props.selectionType === SELECTION_TYPE2.RECTANGLE) {
+            if (this.props.selectionType === SELECTION_TYPE.RECTANGLE) {
               this._selectRectangleObjects(coordinates);
-            } else if (this.props.selectionType === SELECTION_TYPE2.POLYGON) {
+            } else if (this.props.selectionType === SELECTION_TYPE.POLYGON) {
               this._selectPolygonObjects(coordinates);
             }
           }
@@ -4908,7 +4244,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_layers3.PolygonLayer(this.getSubLayerProps({
         id: LAYER_ID_BLOCKER,
         pickable: true,
         stroked: false,
@@ -4929,16 +4265,16 @@ __publicField(SelectionLayer, "layerName", "SelectionLayer");
 __publicField(SelectionLayer, "defaultProps", defaultProps4);
 
 // dist/editable-layers/elevated-edit-handle-layer.js
-var import_core5 = require("@deck.gl/core");
-var import_layers8 = require("@deck.gl/layers");
+var import_core3 = require("@deck.gl/core");
+var import_layers4 = require("@deck.gl/layers");
 var defaultProps5 = {};
-var ElevatedEditHandleLayer = class extends import_core5.CompositeLayer {
+var ElevatedEditHandleLayer = class extends import_core3.CompositeLayer {
   renderLayers() {
-    const handles = new import_layers8.ScatterplotLayer(Object.assign({}, this.props, {
+    const handles = new import_layers4.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_layers4.LineLayer(Object.assign({}, this.props, {
       id: `${this.props.id}-LineLayer`,
       data: this.props.data,
       pickable: false,
@@ -4956,7 +4292,7 @@ __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 import_core4 = require("@deck.gl/core");
 var ROOT_STYLE = {
   position: "absolute",
   display: "flex",
@@ -5000,7 +4336,7 @@ var BUTTON_LABEL_STYLE = {
   marginTop: "2px",
   lineHeight: "12px"
 };
-var _EditModeTrayWidget = class extends import_core6.Widget {
+var _EditModeTrayWidget = class extends import_core4.Widget {
   placement = "top-left";
   className = "deck-widget-edit-mode-tray";
   layout = "vertical";
@@ -5171,11 +4507,54 @@ __publicField(EditModeTrayWidget, "defaultProps", {
   className: ""
 });
 
+// dist/editable-layers/junction-scatterplot-layer.js
+var import_core5 = require("@deck.gl/core");
+var import_layers5 = require("@deck.gl/layers");
+var JunctionScatterplotLayer = class extends import_core5.CompositeLayer {
+  renderLayers() {
+    const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
+    return [
+      // the full circles
+      new import_layers5.ScatterplotLayer({
+        ...this.props,
+        id: `${id}-full`,
+        data: this.props.data,
+        getLineColor: getStrokeColor,
+        updateTriggers: {
+          ...updateTriggers,
+          getStrokeColor: updateTriggers.getStrokeColor
+        }
+      }),
+      // the inner part
+      new import_layers5.ScatterplotLayer({
+        ...this.props,
+        id: `${id}-inner`,
+        data: this.props.data,
+        getFillColor,
+        getRadius: getInnerRadius,
+        pickable: false,
+        updateTriggers: {
+          ...updateTriggers,
+          getFillColor: updateTriggers.getFillColor,
+          getRadius: updateTriggers.getInnerRadius
+        }
+      })
+    ];
+  }
+};
+__publicField(JunctionScatterplotLayer, "layerName", "JunctionScatterplotLayer");
+__publicField(JunctionScatterplotLayer, "defaultProps", {
+  ...import_layers5.ScatterplotLayer.defaultProps,
+  getFillColor: (d) => [0, 0, 0, 255],
+  getStrokeColor: (d) => [255, 255, 255, 255],
+  getInnerRadius: (d) => 1
+});
+
 // dist/edit-modes/resize-circle-mode.js
 var import_nearest_point_on_line2 = __toESM(require("@turf/nearest-point-on-line"), 1);
 var import_helpers17 = require("@turf/helpers");
 var import_circle3 = __toESM(require("@turf/circle"), 1);
-var import_distance14 = __toESM(require("@turf/distance"), 1);
+var import_distance13 = __toESM(require("@turf/distance"), 1);
 var import_center2 = __toESM(require("@turf/center"), 1);
 var ResizeCircleMode = class extends GeoJsonEditMode {
   _selectedEditHandle;
@@ -5195,12 +4574,7 @@ var ResizeCircleMode = class extends GeoJsonEditMode {
         const referencePoint = (0, import_helpers17.point)(mapCoords2);
         recursivelyTraverseNestedArrays2(featureAsPick.object.geometry.coordinates, [], (lineString3, prefix) => {
           const lineStringFeature = (0, import_helpers17.lineString)(lineString3);
-          const candidateIntermediatePoint = this.getNearestPoint(
-            // @ts-expect-error turf types too wide
-            lineStringFeature,
-            referencePoint,
-            props.modeConfig && props.modeConfig.viewport
-          );
+          const candidateIntermediatePoint = this.getNearestPoint(lineStringFeature, referencePoint, props.modeConfig && props.modeConfig.viewport);
           if (!intermediatePoint || candidateIntermediatePoint.properties.dist < intermediatePoint.properties.dist) {
             intermediatePoint = candidateIntermediatePoint;
             positionIndexPrefix = prefix;
@@ -5248,7 +4622,7 @@ var ResizeCircleMode = class extends GeoJsonEditMode {
       const feature = this.getSelectedFeature(props);
       const center = (0, import_center2.default)(feature).geometry.coordinates;
       const numberOfSteps = Object.entries(feature.geometry.coordinates[0]).length - 1;
-      const radius = Math.max((0, import_distance14.default)(center, event.mapCoords), 1e-3);
+      const radius = Math.max((0, import_distance13.default)(center, event.mapCoords), 1e-3);
       const { steps = numberOfSteps } = {};
       const options = { steps };
       const updatedFeature = (0, import_circle3.default)(center, radius, options);
@@ -5364,7 +4738,7 @@ var ExtendLineStringMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/measure-distance-mode.js
-var import_distance15 = __toESM(require("@turf/distance"), 1);
+var import_distance14 = __toESM(require("@turf/distance"), 1);
 var import_midpoint = __toESM(require("@turf/midpoint"), 1);
 var MeasureDistanceMode = class extends GeoJsonEditMode {
   _isMeasuringSessionFinished = false;
@@ -5372,7 +4746,7 @@ var MeasureDistanceMode = class extends GeoJsonEditMode {
   _currentDistance = 0;
   _calculateDistanceForTooltip = ({ positionA, positionB, modeConfig }) => {
     const { turfOptions, measurementCallback } = modeConfig || {};
-    const distance7 = (0, import_distance15.default)(positionA, positionB, turfOptions);
+    const distance7 = (0, import_distance14.default)(positionA, positionB, turfOptions);
     if (measurementCallback) {
       measurementCallback(distance7);
     }