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

package/dist/index.cjs

@@ -54,6 +54,7 @@ __export(dist_exports, {
   EditModeTrayWidget: () => EditModeTrayWidget,
   EditableGeoJsonLayer: () => EditableGeoJsonLayer,
   EditableH3ClusterLayer: () => EditableH3ClusterLayer,
+  EditorToolbarWidget: () => EditorToolbarWidget,
   ElevatedEditHandleLayer: () => ElevatedEditHandleLayer,
   ElevationMode: () => ElevationMode,
   ExtendLineStringMode: () => ExtendLineStringMode,
@@ -97,7 +98,7 @@ 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_helpers = require("@turf/helpers");
-var import_viewport_mercator_project = require("viewport-mercator-project");
+var import_web_mercator = require("@math.gl/web-mercator");
 function toDeckColor(color, defaultColor = [255, 0, 0, 255]) {
   if (!Array.isArray(color)) {
     return defaultColor;
@@ -139,7 +140,7 @@ function mix(a, b, ratio) {
   return b * ratio + a * (1 - ratio);
 }
 function nearestPointOnProjectedLine(line, inPoint, viewport) {
-  const wmViewport = new import_viewport_mercator_project.WebMercatorViewport(viewport);
+  const wmViewport = new import_web_mercator.WebMercatorViewport(viewport);
   const coordinates = line.geometry.coordinates;
   const projectedCoords = coordinates.map(([x3, y3, z = 0]) => wmViewport.project([x3, y3, z]));
   const [x, y] = wmViewport.project(inPoint.geometry.coordinates);
@@ -209,7 +210,7 @@ var import_point_to_line_distance2 = __toESM(require("@turf/point-to-line-distan
 var import_meta = require("@turf/meta");
 var import_helpers2 = require("@turf/helpers");
 var import_invariant = require("@turf/invariant");
-var import_viewport_mercator_project2 = require("viewport-mercator-project");
+var import_web_mercator2 = require("@math.gl/web-mercator");
 function recursivelyTraverseNestedArrays2(array, prefix, fn) {
   if (!Array.isArray(array[0])) {
     return true;
@@ -245,7 +246,7 @@ function mix2(a, b, ratio) {
   return b * ratio + a * (1 - ratio);
 }
 function nearestPointOnProjectedLine2(line, inPoint, viewport) {
-  const wmViewport = new import_viewport_mercator_project2.WebMercatorViewport(viewport);
+  const wmViewport = new import_web_mercator2.WebMercatorViewport(viewport);
   const coordinates = line.geometry.coordinates;
   const projectedCoords = coordinates.map(([x3, y3, z = 0]) => wmViewport.project([x3, y3, z]));
   const [x, y] = wmViewport.project(inPoint.geometry.coordinates);
@@ -294,7 +295,7 @@ function nearestPointOnLine(lines, inPoint, viewport) {
   var _a, _b;
   let mercator;
   if (viewport) {
-    mercator = new import_viewport_mercator_project2.WebMercatorViewport(viewport);
+    mercator = new import_web_mercator2.WebMercatorViewport(viewport);
   }
   let closestPoint = (0, import_helpers2.point)([Infinity, Infinity], {
     dist: Infinity
@@ -974,7 +975,7 @@ var import_bearing3 = __toESM(require("@turf/bearing"), 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");
+var import_web_mercator3 = require("@math.gl/web-mercator");
 
 // dist/utils/translate-from-center.js
 var import_center = __toESM(require("@turf/center"), 1);
@@ -1046,7 +1047,7 @@ var TranslateMode = class extends GeoJsonEditMode {
     const selectedIndexes = props.selectedIndexes;
     const { viewport: viewportDesc, screenSpace } = props.modeConfig || {};
     if (viewportDesc && screenSpace) {
-      const viewport = viewportDesc.project ? viewportDesc : new import_viewport_mercator_project3.WebMercatorViewport(viewportDesc);
+      const viewport = viewportDesc.project ? viewportDesc : new import_web_mercator3.WebMercatorViewport(viewportDesc);
       const from = viewport.project(startDragPoint);
       const to = viewport.project(currentPoint);
       const dx = to[0] - from[0];
@@ -1162,31 +1163,35 @@ var ModifyMode = class extends GeoJsonEditMode {
     return nearestPointOnLine(line, inPoint, viewport);
   }
   handleClick(event, props) {
-    var _a;
+    var _a, _b;
     const pickedExistingHandle = getPickedExistingEditHandle(event.picks);
     const pickedIntermediateHandle = getPickedIntermediateEditHandle(event.picks);
     if (pickedExistingHandle) {
       const { featureIndex, positionIndexes } = pickedExistingHandle.properties;
-      let updatedData;
-      try {
-        updatedData = new ImmutableFeatureCollection(props.data).removePosition(featureIndex, positionIndexes).getObject();
-      } catch (ignored) {
-      }
-      if (updatedData) {
-        props.onEdit({
-          updatedData,
-          editType: "removePosition",
-          editContext: {
-            featureIndexes: [featureIndex],
-            positionIndexes,
-            position: pickedExistingHandle.geometry.coordinates
-          }
-        });
+      const feature = props.data.features[featureIndex];
+      const canRemovePosition = !(((_a = props.modeConfig) == null ? void 0 : _a.lockRectangles) && (feature == null ? void 0 : feature.properties.shape) === "Rectangle");
+      if (canRemovePosition) {
+        let updatedData;
+        try {
+          updatedData = new ImmutableFeatureCollection(props.data).removePosition(featureIndex, positionIndexes).getObject();
+        } catch (ignored) {
+        }
+        if (updatedData) {
+          props.onEdit({
+            updatedData,
+            editType: "removePosition",
+            editContext: {
+              featureIndexes: [featureIndex],
+              positionIndexes,
+              position: pickedExistingHandle.geometry.coordinates
+            }
+          });
+        }
       }
     } else if (pickedIntermediateHandle) {
       const { featureIndex, positionIndexes } = pickedIntermediateHandle.properties;
       const feature = props.data.features[featureIndex];
-      const canAddPosition = !(((_a = props.modeConfig) == null ? void 0 : _a.lockRectangles) && (feature == null ? void 0 : feature.properties.shape) === "Rectangle");
+      const canAddPosition = !(((_b = props.modeConfig) == null ? void 0 : _b.lockRectangles) && (feature == null ? void 0 : feature.properties.shape) === "Rectangle");
       if (canAddPosition) {
         const updatedData = new ImmutableFeatureCollection(props.data).addPosition(featureIndex, positionIndexes, pickedIntermediateHandle.geometry.coordinates).getObject();
         if (updatedData) {
@@ -2148,9 +2153,10 @@ var DrawLineStringMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/draw-polygon-mode.js
-var import_line_intersect2 = __toESM(require("@turf/line-intersect"), 1);
+var import_line_intersect2 = require("@turf/line-intersect");
 var import_helpers9 = require("@turf/helpers");
-var import_boolean_within = __toESM(require("@turf/boolean-within"), 1);
+var import_boolean_within = require("@turf/boolean-within");
+var import_kinks = require("@turf/kinks");
 var DrawPolygonMode = class extends GeoJsonEditMode {
   holeSequence = [];
   isDrawingHole = false;
@@ -2296,7 +2302,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
     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]));
+      const overlapping = (0, import_kinks.kinks)(newPolygon).features;
       if (overlapping.length > 0) {
         props.onEdit({
           updatedData: props.data,
@@ -2338,7 +2344,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
     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);
+      const intersection = (0, import_line_intersect2.lineIntersect)(hole, newPolygon);
       if (intersection.features.length > 0) {
         props.onEdit({
           updatedData: props.data,
@@ -2347,7 +2353,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
         });
         return { handled: true };
       }
-      if ((0, import_boolean_within.default)(hole, newPolygon) || (0, import_boolean_within.default)(newPolygon, hole)) {
+      if ((0, import_boolean_within.booleanWithin)(hole, newPolygon) || (0, import_boolean_within.booleanWithin)(newPolygon, hole)) {
         props.onEdit({
           updatedData: props.data,
           editType: "invalidHole",
@@ -2356,7 +2362,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
         return { handled: true };
       }
     }
-    const intersectionWithOuter = (0, import_line_intersect2.default)(outer, newPolygon);
+    const intersectionWithOuter = (0, import_line_intersect2.lineIntersect)(outer, newPolygon);
     if (intersectionWithOuter.features.length > 0) {
       props.onEdit({
         updatedData: props.data,
@@ -2365,7 +2371,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       });
       return { handled: true };
     }
-    if ((0, import_boolean_within.default)(outer, newPolygon)) {
+    if ((0, import_boolean_within.booleanWithin)(outer, newPolygon)) {
       props.onEdit({
         updatedData: props.data,
         editType: "invalidPolygon",
@@ -2373,7 +2379,7 @@ var DrawPolygonMode = class extends GeoJsonEditMode {
       });
       return { handled: true };
     }
-    if ((0, import_boolean_within.default)(newPolygon, outer)) {
+    if ((0, import_boolean_within.booleanWithin)(newPolygon, outer)) {
       const updatedData = new ImmutableFeatureCollection(props.data).replaceGeometry(featureIndex, {
         ...feature.geometry,
         coordinates: [...feature.geometry.coordinates, polygon2]
@@ -2734,14 +2740,14 @@ var DrawEllipseByBoundingBoxMode = class extends TwoClickPolygonMode {
 };
 
 // dist/edit-modes/three-click-polygon-mode.js
-var import_lodash2 = __toESM(require("lodash.omit"), 1);
 var ThreeClickPolygonMode = class extends GeoJsonEditMode {
   handleClick(event, props) {
     this.addClickSequence(event);
+    const { modeConfig } = props;
     const clickSequence = this.getClickSequence();
-    const tentativeFeature = this.getTentativeGuide(props);
-    if (clickSequence.length > 2 && tentativeFeature && tentativeFeature.geometry.type === "Polygon") {
-      const editAction = this.getAddFeatureOrBooleanPolygonAction(tentativeFeature.geometry, props, (0, import_lodash2.default)(tentativeFeature.properties, "guideType"));
+    if (clickSequence.length > 2) {
+      const { geometry, properties } = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], clickSequence[2], modeConfig);
+      const editAction = this.getAddFeatureOrBooleanPolygonAction(geometry, props, properties);
       this.resetClickSequence();
       if (editAction) {
         props.onEdit(editAction);
@@ -2755,11 +2761,11 @@ var ThreeClickPolygonMode = class extends GeoJsonEditMode {
       type: "FeatureCollection",
       features: []
     };
-    if (clickSequence.length === 0) {
-      return guides;
-    }
-    const hoveredCoord = lastPointerMoveEvent.mapCoords;
-    if (clickSequence.length === 1) {
+    const coords = [
+      ...clickSequence,
+      ...lastPointerMoveEvent ? [lastPointerMoveEvent.mapCoords] : []
+    ];
+    if (coords.length === 2) {
       guides.features.push({
         type: "Feature",
         properties: {
@@ -2767,19 +2773,18 @@ var ThreeClickPolygonMode = class extends GeoJsonEditMode {
         },
         geometry: {
           type: "LineString",
-          coordinates: [clickSequence[0], hoveredCoord]
+          coordinates: [coords[0], coords[1]]
         }
       });
-    } else {
-      const polygon2 = this.getThreeClickPolygon(clickSequence[0], clickSequence[1], hoveredCoord, modeConfig);
+    } else if (coords.length > 2) {
+      const polygon2 = this.getThreeClickPolygon(coords[0], coords[1], coords[2], modeConfig);
       if (polygon2) {
         guides.features.push({
-          type: "Feature",
+          ...polygon2,
           properties: {
             ...polygon2.properties,
             guideType: "tentative"
-          },
-          geometry: polygon2.geometry
+          }
         });
       }
     }
@@ -3012,7 +3017,7 @@ var Draw90DegreePolygonMode = class extends GeoJsonEditMode {
 };
 
 // dist/edit-modes/draw-polygon-by-dragging-mode.js
-var import_lodash3 = __toESM(require("lodash.throttle"), 1);
+var import_lodash2 = __toESM(require("lodash.throttle"), 1);
 var DrawPolygonByDraggingMode = class extends DrawPolygonMode {
   handleDraggingThrottled = null;
   handleClick(event, props) {
@@ -3020,7 +3025,7 @@ var DrawPolygonByDraggingMode = class extends DrawPolygonMode {
   handleStartDragging(event, props) {
     event.cancelPan();
     if (props.modeConfig && props.modeConfig.throttleMs) {
-      this.handleDraggingThrottled = (0, import_lodash3.default)(this.handleDraggingAux, props.modeConfig.throttleMs);
+      this.handleDraggingThrottled = (0, import_lodash2.default)(this.handleDraggingAux, props.modeConfig.throttleMs);
     } else {
       this.handleDraggingThrottled = this.handleDraggingAux;
     }
@@ -3739,10 +3744,26 @@ var EditableGeoJsonLayer = class extends EditableLayer {
         }
       },
       updateTriggers: {
-        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]
+        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_layers2.GeoJsonLayer(subLayerProps)];
@@ -4500,6 +4521,7 @@ var _EditModeTrayWidget = class extends import_core4.Widget {
 var EditModeTrayWidget = _EditModeTrayWidget;
 __publicField(EditModeTrayWidget, "defaultProps", {
   id: "edit-mode-tray",
+  _container: null,
   placement: "top-left",
   layout: "vertical",
   modes: [],
@@ -4507,10 +4529,179 @@ __publicField(EditModeTrayWidget, "defaultProps", {
   className: ""
 });
 
-// dist/editable-layers/junction-scatterplot-layer.js
+// dist/widgets/editor-toolbar-widget.js
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+var import_preact2 = require("preact");
 var import_core5 = require("@deck.gl/core");
+var ROOT_STYLE2 = {
+  position: "absolute",
+  display: "flex",
+  flexDirection: "column",
+  gap: "6px",
+  pointerEvents: "auto",
+  userSelect: "none",
+  zIndex: "99"
+};
+var TRAY_STYLE = {
+  display: "flex",
+  gap: "4px",
+  background: "rgba(36, 40, 41, 0.88)",
+  borderRadius: "999px",
+  padding: "5px 8px",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+};
+var BUTTON_STYLE = {
+  appearance: "none",
+  background: "transparent",
+  border: "none",
+  color: "#f0f0f0",
+  height: "30px",
+  padding: "0 8px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "4px",
+  borderRadius: "15px",
+  cursor: "pointer",
+  fontSize: "11px",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontWeight: "500",
+  transition: "background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease",
+  whiteSpace: "nowrap"
+};
+var BUTTON_ACTIVE_STYLE2 = {
+  background: "#0071e3",
+  color: "#ffffff",
+  boxShadow: "0 0 0 2px rgba(255, 255, 255, 0.35)"
+};
+var DIVIDER_STYLE = {
+  width: "1px",
+  height: "20px",
+  background: "rgba(255, 255, 255, 0.2)",
+  margin: "0 2px",
+  flexShrink: "0"
+};
+var BADGE_STYLE = {
+  color: "rgba(255, 255, 255, 0.6)",
+  fontSize: "11px",
+  padding: "0 6px",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  whiteSpace: "nowrap"
+};
+function PencilIcon() {
+  return (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, import_jsx_runtime2.jsx)("path", { d: "M10 1.5l2.5 2.5L4.5 12H2v-2.5z" }) });
+}
+function SubtractIcon() {
+  return (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.1", children: [(0, import_jsx_runtime2.jsx)("rect", { x: "1", y: "1", width: "8", height: "8", rx: "1.5" }), (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", fill: "rgba(36,40,41,0.88)" })] });
+}
+function UnionIcon() {
+  return (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.1", children: [(0, import_jsx_runtime2.jsx)("rect", { x: "1", y: "1", width: "8", height: "8", rx: "1.5" }), (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" })] });
+}
+function IntersectIcon() {
+  return (0, import_jsx_runtime2.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", strokeWidth: "1.1", children: [(0, import_jsx_runtime2.jsx)("rect", { x: "1", y: "1", width: "8", height: "8", rx: "1.5", stroke: "currentColor", opacity: "0.4" }), (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5", stroke: "currentColor", opacity: "0.4" }), (0, import_jsx_runtime2.jsx)("rect", { x: "5", y: "5", width: "4", height: "4", fill: "currentColor", opacity: "0.6" })] });
+}
+function TrashIcon() {
+  return (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", children: (0, import_jsx_runtime2.jsx)("path", { d: "M2.5 4h9M5.5 4V2.5h3V4M3.5 4l.5 8h6l.5-8" }) });
+}
+function DownloadIcon() {
+  return (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round", children: (0, import_jsx_runtime2.jsx)("path", { d: "M7 2v7M4.5 6.5L7 9l2.5-2.5M2.5 11.5h9" }) });
+}
+var BOOLEAN_OPS = [
+  { op: null, icon: PencilIcon, label: "Edit", title: "Draw new features" },
+  { op: "difference", icon: SubtractIcon, label: "Sub", title: "Subtract from selection" },
+  { op: "union", icon: UnionIcon, label: "Union", title: "Union with selection" },
+  { op: "intersection", icon: IntersectIcon, label: "Sect", title: "Intersect with selection" }
+];
+var _EditorToolbarWidget = class extends import_core5.Widget {
+  placement = "bottom-left";
+  className = "deck-widget-editor-toolbar";
+  deck = null;
+  appliedCustomClassName = null;
+  constructor(props = {}) {
+    super({ ..._EditorToolbarWidget.defaultProps, ...props });
+    this.placement = props.placement ?? _EditorToolbarWidget.defaultProps.placement;
+  }
+  setProps(props) {
+    if (props.placement !== void 0) {
+      this.placement = props.placement;
+    }
+    super.setProps(props);
+    this.renderToolbar();
+  }
+  onAdd({ deck }) {
+    this.deck = deck;
+  }
+  onRemove() {
+    this.deck = null;
+    const root = this.rootElement;
+    if (root) {
+      (0, import_preact2.render)(null, root);
+    }
+    this.rootElement = null;
+  }
+  onRenderHTML(rootElement) {
+    const style = { ...ROOT_STYLE2, ...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.renderToolbar();
+  }
+  renderToolbar() {
+    const root = this.rootElement;
+    if (!root) {
+      return;
+    }
+    const booleanOp = this.props.booleanOperation ?? null;
+    const featureCount = this.props.featureCount ?? 0;
+    const stopEvent = (event) => {
+      event.stopPropagation();
+      if (typeof event.stopImmediatePropagation === "function") {
+        event.stopImmediatePropagation();
+      }
+    };
+    const ui = (0, import_jsx_runtime2.jsxs)("div", { style: TRAY_STYLE, onPointerDown: stopEvent, onPointerMove: stopEvent, onPointerUp: stopEvent, onMouseDown: stopEvent, onMouseMove: stopEvent, onMouseUp: stopEvent, onTouchStart: stopEvent, onTouchMove: stopEvent, onTouchEnd: stopEvent, children: [BOOLEAN_OPS.map(({ op, icon: Icon, label, title }) => {
+      const active = booleanOp === op;
+      return (0, import_jsx_runtime2.jsxs)("button", { type: "button", title, "aria-pressed": active, style: { ...BUTTON_STYLE, ...active ? BUTTON_ACTIVE_STYLE2 : {} }, onClick: (event) => {
+        var _a, _b;
+        stopEvent(event);
+        (_b = (_a = this.props).onSetBooleanOperation) == null ? void 0 : _b.call(_a, op);
+      }, children: [(0, import_jsx_runtime2.jsx)(Icon, {}), (0, import_jsx_runtime2.jsx)("span", { children: label })] }, label);
+    }), (0, import_jsx_runtime2.jsx)("div", { style: DIVIDER_STYLE }), (0, import_jsx_runtime2.jsx)("button", { type: "button", title: "Clear all features", style: BUTTON_STYLE, onClick: (event) => {
+      var _a, _b;
+      stopEvent(event);
+      (_b = (_a = this.props).onClear) == null ? void 0 : _b.call(_a);
+    }, children: (0, import_jsx_runtime2.jsx)(TrashIcon, {}) }), (0, import_jsx_runtime2.jsx)("button", { type: "button", title: "Download as GeoJSON", style: BUTTON_STYLE, onClick: (event) => {
+      var _a, _b;
+      stopEvent(event);
+      (_b = (_a = this.props).onExport) == null ? void 0 : _b.call(_a);
+    }, children: (0, import_jsx_runtime2.jsx)(DownloadIcon, {}) }), (0, import_jsx_runtime2.jsx)("div", { style: DIVIDER_STYLE }), (0, import_jsx_runtime2.jsxs)("span", { style: BADGE_STYLE, children: [featureCount, " feature", featureCount !== 1 ? "s" : ""] })] });
+    (0, import_preact2.render)(ui, root);
+  }
+};
+var EditorToolbarWidget = _EditorToolbarWidget;
+__publicField(EditorToolbarWidget, "defaultProps", {
+  id: "editor-toolbar",
+  _container: null,
+  placement: "bottom-left",
+  booleanOperation: null,
+  featureCount: 0,
+  style: {},
+  className: ""
+});
+
+// dist/editable-layers/junction-scatterplot-layer.js
+var import_core6 = require("@deck.gl/core");
 var import_layers5 = require("@deck.gl/layers");
-var JunctionScatterplotLayer = class extends import_core5.CompositeLayer {
+var JunctionScatterplotLayer = class extends import_core6.CompositeLayer {
   renderLayers() {
     const { id, getFillColor, getStrokeColor, getInnerRadius, updateTriggers } = this.props;
     return [