@element-editor/ui 0.0.0-stage → 0.2.0

package/dist/FeatureEditModal-BF-fGhVD.js

@@ -0,0 +1,77 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as g, useRef as x, useCallback as w, useEffect as y } from "react";
+import { u as v, e as k } from "./useAccentStyle-CPo2XqAn.js";
+import { readStorage as _, writeStorage as S } from "@element-editor/core";
+import { createPortal as E } from "react-dom";
+import { u as C, d as D } from "./useAdapterControls-DVjkwRZ_.js";
+import { u as N, a as F, C as W } from "./useWindowFocus-DGAWA1au.js";
+import { u as H } from "./useFocusTrap-CKxKT8De.js";
+import { F as M } from "./index-CtZterPc.js";
+const c = "elm_feature_win_size";
+function B({ dialogState: u }) {
+  const { pos: a, onHandleMouseDown: m } = N("elm_feature_win", { x: 80, y: 120 }), s = v(), { zIndex: d, focus: f } = F(), b = C((e) => e.closeDialog), [r] = g(() => {
+    try {
+      const e = _(c, s);
+      return e ? JSON.parse(e) : null;
+    } catch {
+      return null;
+    }
+  }), o = x(null), n = w(() => {
+    const e = o.current;
+    e && S(c, JSON.stringify({ w: e.offsetWidth, h: e.offsetHeight }), s);
+  }, [s]);
+  y(() => {
+    const e = o.current;
+    if (!e) return;
+    const l = new ResizeObserver(n);
+    return l.observe(e), () => l.disconnect();
+  }, [n]), H(o);
+  const h = k(), p = D();
+  return E(
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: o,
+        "data-elm-portal": !0,
+        "data-elm-theme": p,
+        onMouseDownCapture: f,
+        role: "dialog",
+        "aria-label": "Edit feature",
+        className: "absolute flex flex-col bg-elm-surface/95 backdrop-blur-md border border-elm-border/80 shadow-elm-raised rounded-elm-window overflow-hidden",
+        style: {
+          ...h,
+          left: a.x,
+          top: a.y,
+          zIndex: d,
+          resize: "both",
+          overflow: "hidden",
+          minWidth: 280,
+          minHeight: 200,
+          width: (r == null ? void 0 : r.w) ?? 320,
+          height: (r == null ? void 0 : r.h) ?? 600,
+          maxWidth: "90%",
+          maxHeight: "85%"
+        },
+        children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              onMouseDown: m,
+              className: "flex items-center justify-between px-4 py-2 border-b border-elm-border flex-shrink-0 select-none bg-(--elm-surface-sunken,color-mix(in_oklab,var(--color-gray-50)_50%,transparent)) dark:bg-(--elm-surface-sunken,color-mix(in_oklab,var(--color-gray-800)_50%,transparent))",
+              style: { cursor: "grab" },
+              children: [
+                /* @__PURE__ */ t("span", { className: "text-sm font-semibold text-(--elm-text,var(--color-gray-900)) dark:text-(--elm-text,var(--color-gray-100))", children: "Edit feature" }),
+                /* @__PURE__ */ t(W, { onClick: b, label: "Close editor" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden min-h-0 relative bg-elm-surface", children: /* @__PURE__ */ t(M, { dialogState: u }) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  B as default
+};

package/dist/FeatureEditModal-CM6BObUO.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),u=require("./useAccentStyle-hsGvyHZc.cjs"),d=require("@element-editor/core"),v=require("react-dom"),m=require("./useAdapterControls-BBObhzVX.cjs"),l=require("./useWindowFocus-D-_yEm_V.cjs"),S=require("./useFocusTrap-BBjPCfDR.cjs"),k=require("./index-BKdDZ4Y9.cjs"),f="elm_feature_win_size";function _({dialogState:b}){const{pos:a,onHandleMouseDown:h}=l.useDragWindow("elm_feature_win",{x:80,y:120}),n=u.useElementEditorConfig(),{zIndex:x,focus:g}=l.useWindowFocus(),w=m.useUIStore(e=>e.closeDialog),[r]=s.useState(()=>{try{const e=d.readStorage(f,n);return e?JSON.parse(e):null}catch{return null}}),o=s.useRef(null),c=s.useCallback(()=>{const e=o.current;e&&d.writeStorage(f,JSON.stringify({w:e.offsetWidth,h:e.offsetHeight}),n)},[n]);s.useEffect(()=>{const e=o.current;if(!e)return;const i=new ResizeObserver(c);return i.observe(e),()=>i.disconnect()},[c]),S.useFocusTrap(o);const y=u.useAccentStyle(),p=m.useTheme();return v.createPortal(t.jsxs("div",{ref:o,"data-elm-portal":!0,"data-elm-theme":p,onMouseDownCapture:g,role:"dialog","aria-label":"Edit feature",className:"absolute flex flex-col bg-elm-surface/95 backdrop-blur-md border border-elm-border/80 shadow-elm-raised rounded-elm-window overflow-hidden",style:{...y,left:a.x,top:a.y,zIndex:x,resize:"both",overflow:"hidden",minWidth:280,minHeight:200,width:(r==null?void 0:r.w)??320,height:(r==null?void 0:r.h)??600,maxWidth:"90%",maxHeight:"85%"},children:[t.jsxs("div",{onMouseDown:h,className:"flex items-center justify-between px-4 py-2 border-b border-elm-border flex-shrink-0 select-none bg-(--elm-surface-sunken,color-mix(in_oklab,var(--color-gray-50)_50%,transparent)) dark:bg-(--elm-surface-sunken,color-mix(in_oklab,var(--color-gray-800)_50%,transparent))",style:{cursor:"grab"},children:[t.jsx("span",{className:"text-sm font-semibold text-(--elm-text,var(--color-gray-900)) dark:text-(--elm-text,var(--color-gray-100))",children:"Edit feature"}),t.jsx(l.CloseButton,{onClick:w,label:"Close editor"})]}),t.jsx("div",{className:"flex-1 overflow-hidden min-h-0 relative bg-elm-surface",children:t.jsx(k.FeatureSidePanel,{dialogState:b})})]}),document.body)}exports.default=_;

package/dist/FeatureList-CQb2kTrV.js

@@ -0,0 +1,520 @@
+import { jsxs as B, Fragment as Me, jsx as S } from "react/jsx-runtime";
+import { e as Le, u as $, f as y, d as $e, g as We } from "./useAdapterControls-DVjkwRZ_.js";
+import { useMemo as ie, useState as U, useCallback as D, useRef as Ge, useEffect as ae, memo as Ye } from "react";
+import { clsx as Ke } from "clsx";
+import { createPortal as Xe } from "react-dom";
+import { DragDropContext as qe, Droppable as Pe, Draggable as Oe } from "@hello-pangea/dnd";
+import { useVirtualizer as Qe, elementScroll as Ze, observeElementOffset as et } from "@tanstack/react-virtual";
+import { u as tt } from "./useJumpToFeature-Bdz2hqOC.js";
+import { getGeometryBBox as nt } from "@element-editor/core";
+import { isMultiGeometry as de, getPartBBox as rt, getPartCount as He } from "@element-editor/core/internal";
+import { g as ot, d as st, N as it, G as lt, e as ke, P as at } from "./index-CtZterPc.js";
+import { F as dt } from "./FeatureRowContextMenu-BLt7VlUU.js";
+import { u as ct } from "./useContextMenu-DJ2Cti85.js";
+import { e as ut } from "./useAccentStyle-CPo2XqAn.js";
+const Z = 36, gt = 5, le = [];
+function mt(R, i) {
+  const o = R.scrollElement;
+  if (!o) return;
+  const I = new ResizeObserver(([h]) => {
+    var b;
+    const p = (b = h.borderBoxSize) == null ? void 0 : b[0];
+    i(p ? { width: Math.round(p.inlineSize), height: Math.round(p.blockSize) } : { width: Math.round(h.contentRect.width), height: Math.round(h.contentRect.height) });
+  });
+  return I.observe(o, { box: "border-box" }), () => I.disconnect();
+}
+function pt(R, i) {
+  const o = R.scrollElement;
+  if (!o) return;
+  const I = et(R, i), h = new ResizeObserver(() => {
+    h.disconnect(), i(o.scrollTop, !1);
+  });
+  return h.observe(o), () => {
+    h.disconnect(), I == null || I();
+  };
+}
+function ft(R, i, o) {
+  i.adjustments === void 0 && i.behavior === void 0 && R === o.scrollOffset || Ze(R, i, o);
+}
+function Ce({
+  droppableId: R,
+  features: i,
+  scrollElement: o,
+  listElement: I,
+  collapsed: h,
+  expandedIds: p,
+  renderItem: b,
+  renderClone: C,
+  scrollToId: E,
+  showEmptyAffordance: z = !0
+}) {
+  const j = h ? 0 : i.length, [M, H] = U(null), x = Ge(null), F = D((l) => {
+    var c;
+    (c = x.current) == null || c.call(x, l), H(l);
+  }, []), [P, O] = U(0);
+  ae(() => {
+    if (!M || !o) return;
+    const l = new ResizeObserver(() => {
+      const c = M.getBoundingClientRect().top - o.getBoundingClientRect().top - o.clientTop + o.scrollTop;
+      O(Math.round(c));
+    });
+    return l.observe(M), I && l.observe(I), () => l.disconnect();
+  }, [M, I, o]);
+  const k = D(
+    (l) => {
+      var c;
+      return ((c = i[l]) == null ? void 0 : c.id) ?? l;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, p]
+  ), G = Qe({
+    count: j,
+    getScrollElement: () => o,
+    estimateSize: (l) => {
+      const c = i[l];
+      return !c || !p.has(c.id) || !de(c.geometry) ? Z : Z * (1 + He(c.geometry)) + (l < i.length - 1 ? gt : 0);
+    },
+    overscan: 6,
+    getItemKey: k,
+    scrollMargin: P,
+    initialRect: { width: 0, height: typeof window > "u" ? 800 : window.innerHeight },
+    observeElementRect: mt,
+    observeElementOffset: pt,
+    scrollToFn: ft
+  }), A = E && !h ? i.findIndex((l) => l.id === E) : -1;
+  return ae(() => {
+    if (A < 0) return;
+    const l = G.getVirtualItems(), c = l.length > 0 && A > l[0].index - 50 && A < l[l.length - 1].index + 50;
+    G.scrollToIndex(A, { align: "auto", behavior: c ? "smooth" : "auto" });
+  }, [A, G]), /* @__PURE__ */ S(Pe, { droppableId: R, type: "feature", mode: "virtual", renderClone: C, children: (l, c) => {
+    x.current = l.innerRef;
+    const _ = !h && i.length === 0, ee = _ && z, W = h ? c.isDraggingOver ? 32 : 4 : _ ? z ? 48 : Z : G.getTotalSize() + (c.isDraggingOver ? Z : 0);
+    return /* @__PURE__ */ B(
+      "ul",
+      {
+        ref: F,
+        ...l.droppableProps,
+        className: "rounded-elm-control",
+        style: {
+          height: W,
+          position: "relative",
+          // The empty-state drop zone has its own dashed border, so skip the
+          // outer outline in that case to avoid a double border.
+          background: c.isDraggingOver && !_ ? "color-mix(in srgb, var(--color-primary-500) 8%, transparent)" : void 0,
+          outline: c.isDraggingOver && !_ ? "1px dashed color-mix(in srgb, var(--color-primary-500) 40%, transparent)" : void 0,
+          borderRadius: "6px",
+          overflow: "hidden"
+        },
+        children: [
+          h && c.isDraggingOver && /* @__PURE__ */ S("li", { style: { listStyle: "none" }, className: "px-2 py-1.5 text-xs text-primary-400 italic", children: "Drop here" }),
+          ee && /* @__PURE__ */ S(
+            "li",
+            {
+              style: { listStyle: "none" },
+              className: Ke(
+                "mx-1 my-1 h-9 flex items-center justify-center rounded-elm-control border border-dashed text-xs transition-colors",
+                c.isDraggingOver ? "border-primary-400 text-primary-500 bg-primary-50/40 dark:bg-white/5" : "border-(--elm-border-strong,var(--color-gray-300)) dark:border-(--elm-border-strong,var(--color-gray-700)) text-elm-text-subtle"
+              ),
+              children: c.isDraggingOver ? "Drop here" : "Drag here"
+            }
+          ),
+          !h && G.getVirtualItems().map((w) => {
+            const V = i[w.index];
+            return V ? /* @__PURE__ */ S(
+              "div",
+              {
+                "data-index": w.index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${w.start - P}px)`
+                },
+                children: b(V, w.index, w.index === i.length - 1, i[w.index - 1], i[w.index + 1])
+              },
+              V.id
+            ) : null;
+          })
+        ]
+      }
+    );
+  } });
+}
+function ht(R) {
+  if (R.length === 0) return null;
+  let i = 1 / 0, o = 1 / 0, I = -1 / 0, h = -1 / 0;
+  for (const p of R) {
+    const b = p.bbox || nt(p.geometry);
+    b[0] < i && (i = b[0]), b[1] < o && (o = b[1]), b[2] > I && (I = b[2]), b[3] > h && (h = b[3]);
+  }
+  return [i, o, I, h];
+}
+const bt = Ye(function({
+  feature: i,
+  index: o,
+  isLast: I,
+  isSelected: h,
+  isMultiSelected: p,
+  isContextMenuActive: b,
+  isGhosted: C,
+  renameActive: E,
+  isExpanded: z,
+  selectedPartIndex: j,
+  joinTop: M,
+  joinBottom: H,
+  h: x
+}) {
+  const F = i.id, P = D(() => x.onRenameEnd(F), [x, F]), O = D((T) => x.onRenameTab(F, T), [x, F]), k = $((T) => T.readonly);
+  return /* @__PURE__ */ S(Oe, { draggableId: F, index: o, isDragDisabled: k, children: (T, G) => /* @__PURE__ */ B(
+    "div",
+    {
+      ref: T.innerRef,
+      ...T.draggableProps,
+      ...T.dragHandleProps,
+      style: { outline: "none", ...T.draggableProps.style },
+      children: [
+        /* @__PURE__ */ S(
+          ke,
+          {
+            feature: i,
+            isDragging: G.isDragging,
+            isSelected: h,
+            onRowClick: x.onRowClick,
+            onRowSelectOnly: x.onRowSelectOnly,
+            onRowJump: x.onRowJump,
+            onEdit: x.onEdit,
+            onToggleHidden: x.onToggleHidden,
+            onRename: x.onRename,
+            isMultiSelected: p,
+            onMultiSelectToggle: x.onMultiSelectToggle,
+            onRangeSelect: x.onRangeSelect,
+            isContextMenuActive: b,
+            isGhosted: C,
+            renameActive: E,
+            onRenameEnd: P,
+            onRenameTab: O,
+            joinTop: M,
+            joinBottom: H
+          }
+        ),
+        z && !G.isDragging && /* @__PURE__ */ B(Me, { children: [
+          Array.from({ length: He(i.geometry) }, (A, l) => /* @__PURE__ */ S(
+            at,
+            {
+              geometry: i.geometry,
+              partIndex: l,
+              isSelected: j === l,
+              onClick: () => x.onPartClick(F, l)
+            },
+            `${F}:${l}`
+          )),
+          !I && /* @__PURE__ */ S("div", { className: "border-b border-elm-border mx-2 mt-1" })
+        ] })
+      ]
+    }
+  ) });
+});
+function Pt({
+  autoFocusGroupId: R,
+  scrollElement: i
+}) {
+  var Te;
+  const { dataStore: o, uiStore: I } = Le(), h = $((e) => e.readonly), p = y((e) => e.features), b = y((e) => e.groups), C = y((e) => e.selectedIds), E = ie(() => new Set(C), [C]), z = ut(), j = $e(), M = ie(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of p) {
+      const n = t.groupId || null, r = e.get(n);
+      r ? r.push(t) : e.set(n, [t]);
+    }
+    return e;
+  }, [p]), H = C.length === 1 ? C[0] : null, x = y((e) => e.selectedGroupId), F = y((e) => e.selectGroup), P = y((e) => e.selectFeature), O = y((e) => e.toggleSelection), k = y((e) => e.setSelection), T = y((e) => e.updateGroup), G = y((e) => e.deleteGroup), A = y((e) => e.toggleGroupCollapsed), l = y((e) => e.moveFeatureToGroup), c = y((e) => e.reorderFeatures), _ = y((e) => e.reorderGroups), ee = y((e) => e.toggleGroupHidden), W = $((e) => e.openEditDialog), { fitBounds: w } = We(), V = y((e) => e.updateFeature), ce = y((e) => e.toggleFeatureHidden), Ae = $((e) => e.selectedPartIndex), ue = $((e) => e.setSelectedPartIndex), [te, ze] = U(() => /* @__PURE__ */ new Set()), ge = D((e) => {
+    ze((t) => {
+      const n = new Set(t);
+      return n.has(e) ? n.delete(e) : n.add(e), n;
+    });
+  }, []), [J, me] = U(null), [ne, Y] = U(null), K = Ge(null), pe = D((e, t) => {
+    const n = o.getState(), r = ot(n.features, n.groups), u = r.indexOf(e);
+    if (u < 0) {
+      Y(null);
+      return;
+    }
+    const s = t === "next" ? u + 1 : u - 1;
+    if (s < 0 || s >= r.length) {
+      Y(null);
+      return;
+    }
+    Y(r[s]);
+  }, [o]), fe = D((e) => {
+    Y((t) => t === e ? null : t);
+  }, []), N = ct(), [X, Ne] = U(null), he = i ?? null;
+  ae(() => {
+    const e = X;
+    if (!e) return;
+    const t = (n) => {
+      let r = n.target;
+      for (; r && r !== e; ) {
+        const u = r.dataset.featureId;
+        if (u) {
+          n.preventDefault();
+          const s = o.getState().features.find((a) => a.id === u);
+          s && N.open(n.clientX, n.clientY, s);
+          return;
+        }
+        r = r.parentElement;
+      }
+    };
+    return e.addEventListener("contextmenu", t, { capture: !0 }), () => e.removeEventListener("contextmenu", t, { capture: !0 });
+  }, [N.open, o, X]);
+  const be = D((e) => {
+    const t = o.getState(), n = t.selectedIds.length === 1 ? t.selectedIds[0] : K.current;
+    if (K.current = e, !n) {
+      O(e);
+      return;
+    }
+    const r = st(t.features, t.groups), u = r.indexOf(n), s = r.indexOf(e);
+    if (u === -1 || s === -1) {
+      O(e);
+      return;
+    }
+    const a = Math.min(u, s), f = Math.max(u, s);
+    k(r.slice(a, f + 1));
+  }, [o, O, k]), xe = D((e, t) => {
+    const n = o.getState().features.find((r) => r.id === e);
+    n && V(e, { properties: { ...n.properties, name: t } });
+  }, [o, V]), Se = tt(), q = D((e) => {
+    const t = o.getState().features.find((n) => n.id === e);
+    t && Se(t);
+  }, [o, Se]), Q = D((e) => {
+    const t = o.getState().features.find((n) => n.id === e);
+    t && (K.current = e, P(e), de(t.geometry) && ge(e));
+  }, [o, P, ge]), Ie = D((e) => {
+    Q(e), q(e);
+  }, [Q, q]), ye = D((e) => {
+    O(e), K.current = e;
+  }, [O]);
+  function Be(e) {
+    me(e.draggableId);
+  }
+  function je(e) {
+    const { source: t, destination: n, draggableId: r, type: u } = e;
+    if (me(null), !n || t.droppableId === n.droppableId && t.index === n.index || I.getState().readonly) return;
+    if (o.getState().takeSnapshot(), u === "group") {
+      const f = [...b], [g] = f.splice(t.index, 1);
+      f.splice(n.index, 0, g), _(f.map((v) => v.id));
+      return;
+    }
+    const s = t.droppableId, a = n.droppableId;
+    if (s === a) {
+      const g = [...re(s)], [v] = g.splice(t.index, 1);
+      g.splice(n.index, 0, v), Re(s, g.map((d) => d.id));
+    } else {
+      const f = a === "ungrouped" ? null : a, v = E.has(r) && C.length > 1 ? re(s).filter((d) => E.has(d.id)).map((d) => d.id) : [r];
+      if (v.length === 1) {
+        l(r, f);
+        const d = re(a).filter((m) => m.id !== r);
+        d.splice(n.index, 0, p.find((m) => m.id === r)), Re(a, d.map((m) => m.id), r);
+      } else {
+        for (const d of v) l(d, f);
+        _e(a, v, n.index);
+      }
+    }
+  }
+  function _e(e, t, n) {
+    const r = new Set(t), u = t.map((d) => p.find((m) => m.id === d)), s = p.filter((d) => !r.has(d.id)), a = e === "ungrouped", f = s.filter((d) => a ? !d.groupId : d.groupId === e);
+    let g;
+    if (n < f.length)
+      g = s.findIndex((d) => d.id === f[n].id);
+    else {
+      const d = f[f.length - 1];
+      g = d ? s.findIndex((m) => m.id === d.id) + 1 : s.length;
+    }
+    const v = [
+      ...s.slice(0, g),
+      ...u,
+      ...s.slice(g)
+    ];
+    c(v.map((d) => d.id));
+  }
+  function re(e) {
+    return M.get(e === "ungrouped" ? null : e) ?? le;
+  }
+  function Re(e, t, n) {
+    const r = new Set(t), u = n ? p.find((m) => m.id === n) : null, s = p.filter((m) => m.id !== n), a = s.filter((m) => !r.has(m.id)), f = s.find((m) => r.has(m.id)), g = f ? a.findIndex((m) => m.id === f.id) : a.length, v = t.map(
+      (m) => m === n ? u : p.find((Ue) => Ue.id === m)
+    ), d = [
+      ...a.slice(0, g),
+      ...v,
+      ...a.slice(g)
+    ];
+    c(d.map((m) => m.id));
+  }
+  const oe = M.get(null) ?? le, Ve = (() => {
+    if (!J || !E.has(J) || C.length <= 1) return 1;
+    const e = p.find((n) => n.id === J), t = (e == null ? void 0 : e.groupId) ?? null;
+    return p.filter((n) => E.has(n.id) && (n.groupId ?? null) === t).length;
+  })(), L = ((Te = N.state) == null ? void 0 : Te.data) ?? null, we = D((e, t) => {
+    const n = o.getState().features.find((r) => r.id === e);
+    n && (P(e), ue(t), w == null || w(rt(n.geometry, t)));
+  }, [o, P, ue, w]), Je = ie(() => ({
+    onRowClick: Ie,
+    onRowSelectOnly: Q,
+    onRowJump: q,
+    onEdit: W,
+    onToggleHidden: ce,
+    onRename: xe,
+    onMultiSelectToggle: ye,
+    onRangeSelect: be,
+    onRenameEnd: fe,
+    onRenameTab: pe,
+    onPartClick: we
+  }), [
+    Ie,
+    Q,
+    q,
+    W,
+    ce,
+    xe,
+    ye,
+    be,
+    fe,
+    pe,
+    we
+  ]);
+  function Ee(e) {
+    return (t, n, r) => {
+      const u = e[r.source.index];
+      return u ? /* @__PURE__ */ S(
+        ke,
+        {
+          feature: u,
+          innerRef: t.innerRef,
+          containerProps: { ...t.draggableProps, "data-elm-portal": "", "data-elm-theme": j, style: { ...z, ...t.draggableProps.style } },
+          dragHandleProps: t.dragHandleProps,
+          isDragging: !0,
+          isSelected: E.has(u.id),
+          dragCountBadge: Ve,
+          onRowClick: () => {
+          },
+          onEdit: () => {
+          },
+          onToggleHidden: () => {
+          }
+        }
+      ) : /* @__PURE__ */ S("div", { ref: t.innerRef, ...t.draggableProps });
+    };
+  }
+  const se = (e) => !!e && !(e.groupId && x === e.groupId) && (e.id === H || E.has(e.id)), De = (e) => te.has(e.id) && de(e.geometry);
+  function ve(e, t, n = !1, r, u) {
+    const s = De(e), a = se(e), f = !!e.groupId && x === e.groupId, g = e.id === H;
+    return /* @__PURE__ */ S(
+      bt,
+      {
+        feature: e,
+        index: t,
+        isLast: n,
+        isSelected: !f && g,
+        isMultiSelected: !f && E.has(e.id),
+        isContextMenuActive: (L == null ? void 0 : L.id) === e.id,
+        isGhosted: J !== null && J !== e.id && E.has(e.id) && E.has(J),
+        renameActive: ne === e.id,
+        isExpanded: s,
+        selectedPartIndex: g && s ? Ae : null,
+        joinTop: a && se(r) && !De(r),
+        joinBottom: a && se(u) && !s,
+        h: Je
+      },
+      e.id
+    );
+  }
+  const Fe = p.length === 0 && b.length === 0;
+  return /* @__PURE__ */ B(Me, { children: [
+    N.state && L && /* @__PURE__ */ S(
+      dt,
+      {
+        x: N.state.x,
+        y: N.state.y,
+        feature: L,
+        onClose: N.close
+      }
+    ),
+    /* @__PURE__ */ S(qe, { onDragStart: Be, onDragEnd: je, children: /* @__PURE__ */ B("div", { ref: Ne, className: Fe ? "h-full" : "space-y-0.5", children: [
+      Fe && /* @__PURE__ */ S(it, {}),
+      /* @__PURE__ */ S(Pe, { droppableId: "groups-container", type: "group", children: (e) => /* @__PURE__ */ B("div", { ref: e.innerRef, ...e.droppableProps, children: [
+        b.map((t, n) => {
+          const r = M.get(t.id) ?? le, u = x === t.id;
+          return /* @__PURE__ */ S(Oe, { draggableId: `group:${t.id}`, index: n, isDragDisabled: h, children: (s, a) => {
+            const f = /* @__PURE__ */ B(
+              "div",
+              {
+                ref: s.innerRef,
+                ...s.draggableProps,
+                ...a.isDragging && { "data-elm-portal": "", "data-elm-theme": j },
+                style: { outline: "none", ...a.isDragging && z, ...s.draggableProps.style },
+                children: [
+                  /* @__PURE__ */ S(
+                    lt,
+                    {
+                      group: t,
+                      featureCount: r.length,
+                      autoFocus: t.id === R,
+                      isSelected: u,
+                      onToggleCollapse: () => A(t.id),
+                      onToggleHidden: () => ee(t.id),
+                      onRename: (g) => T(t.id, { name: g }),
+                      onDelete: (g) => G(t.id, g),
+                      onSelect: () => {
+                        if (r.length === 0) {
+                          k([]), F(t.id);
+                          return;
+                        }
+                        k(r.map((v) => v.id)), F(t.id);
+                        const g = ht(r);
+                        g && (w == null || w(g));
+                      },
+                      dragHandleProps: s.dragHandleProps,
+                      isDragging: a.isDragging
+                    }
+                  ),
+                  !a.isDragging && /* @__PURE__ */ S(
+                    Ce,
+                    {
+                      droppableId: t.id,
+                      features: r,
+                      scrollElement: he,
+                      listElement: X,
+                      expandedIds: te,
+                      collapsed: t.collapsed,
+                      renderItem: ve,
+                      renderClone: Ee(r),
+                      scrollToId: ne ?? H
+                    }
+                  ),
+                  !t.collapsed && (n < b.length - 1 || b.length > 0) && /* @__PURE__ */ S("div", { className: "border-b border-elm-border mx-2 mt-1" })
+                ]
+              }
+            );
+            return a.isDragging ? Xe(f, document.body) : f;
+          } }, t.id);
+        }),
+        e.placeholder
+      ] }) }),
+      (oe.length > 0 || b.length > 0) && /* @__PURE__ */ S(
+        Ce,
+        {
+          droppableId: "ungrouped",
+          features: oe,
+          scrollElement: he,
+          listElement: X,
+          expandedIds: te,
+          renderItem: ve,
+          renderClone: Ee(oe),
+          scrollToId: ne ?? H,
+          showEmptyAffordance: !1
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  Pt as default
+};

package/dist/FeatureList-Csr-anLA.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),p=require("./useAdapterControls-BBObhzVX.cjs"),i=require("react"),qe=require("clsx"),Ae=require("react-dom"),L=require("@hello-pangea/dnd"),ae=require("@tanstack/react-virtual"),ze=require("./useJumpToFeature-LwjxGzfy.cjs"),Ne=require("@element-editor/core"),_=require("@element-editor/core/internal"),z=require("./index-BKdDZ4Y9.cjs"),Ue=require("./FeatureRowContextMenu-Gwq3OMEA.cjs"),Be=require("./useContextMenu-DbxMvb1s.cjs"),Ve=require("./useAccentStyle-hsGvyHZc.cjs"),Z=36,_e=5,le=[];function Je(D,l){const o=D.scrollElement;if(!o)return;const R=new ResizeObserver(([h])=>{var I;const b=(I=h.borderBoxSize)==null?void 0:I[0];l(b?{width:Math.round(b.inlineSize),height:Math.round(b.blockSize)}:{width:Math.round(h.contentRect.width),height:Math.round(h.contentRect.height)})});return R.observe(o,{box:"border-box"}),()=>R.disconnect()}function Le(D,l){const o=D.scrollElement;if(!o)return;const R=ae.observeElementOffset(D,l),h=new ResizeObserver(()=>{h.disconnect(),l(o.scrollTop,!1)});return h.observe(o),()=>{h.disconnect(),R==null||R()}}function $e(D,l,o){l.adjustments===void 0&&l.behavior===void 0&&D===o.scrollOffset||ae.elementScroll(D,l,o)}function Me({droppableId:D,features:l,scrollElement:o,listElement:R,collapsed:h,expandedIds:b,renderItem:I,renderClone:F,scrollToId:w,showEmptyAffordance:q=!0}){const N=h?0:l.length,[v,P]=i.useState(null),y=i.useRef(null),M=i.useCallback(a=>{var g;(g=y.current)==null||g.call(y,a),P(a)},[]),[k,G]=i.useState(0);i.useEffect(()=>{if(!v||!o)return;const a=new ResizeObserver(()=>{const g=v.getBoundingClientRect().top-o.getBoundingClientRect().top-o.clientTop+o.scrollTop;G(Math.round(g))});return a.observe(v),R&&a.observe(R),()=>a.disconnect()},[v,R,o]);const O=i.useCallback(a=>{var g;return((g=l[a])==null?void 0:g.id)??a},[l,b]),j=a=>{const g=l[a];return!g||!b.has(g.id)||!_.isMultiGeometry(g.geometry)?Z:Z*(1+_.getPartCount(g.geometry))+(a<l.length-1?_e:0)},T=ae.useVirtualizer({count:N,getScrollElement:()=>o,estimateSize:j,overscan:6,getItemKey:O,scrollMargin:k,initialRect:{width:0,height:typeof window>"u"?800:window.innerHeight},observeElementRect:Je,observeElementOffset:Le,scrollToFn:$e}),H=w&&!h?l.findIndex(a=>a.id===w):-1;return i.useEffect(()=>{if(H<0)return;const a=T.getVirtualItems(),g=a.length>0&&H>a[0].index-50&&H<a[a.length-1].index+50;T.scrollToIndex(H,{align:"auto",behavior:g?"smooth":"auto"})},[H,T]),c.jsx(L.Droppable,{droppableId:D,type:"feature",mode:"virtual",renderClone:F,children:(a,g)=>{y.current=a.innerRef;const U=!h&&l.length===0,ee=U&&q,$=h?g.isDraggingOver?32:4:U?q?48:Z:T.getTotalSize()+(g.isDraggingOver?Z:0);return c.jsxs("ul",{ref:M,...a.droppableProps,className:"rounded-elm-control",style:{height:$,position:"relative",background:g.isDraggingOver&&!U?"color-mix(in srgb, var(--color-primary-500) 8%, transparent)":void 0,outline:g.isDraggingOver&&!U?"1px dashed color-mix(in srgb, var(--color-primary-500) 40%, transparent)":void 0,borderRadius:"6px",overflow:"hidden"},children:[h&&g.isDraggingOver&&c.jsx("li",{style:{listStyle:"none"},className:"px-2 py-1.5 text-xs text-primary-400 italic",children:"Drop here"}),ee&&c.jsx("li",{style:{listStyle:"none"},className:qe.clsx("mx-1 my-1 h-9 flex items-center justify-center rounded-elm-control border border-dashed text-xs transition-colors",g.isDraggingOver?"border-primary-400 text-primary-500 bg-primary-50/40 dark:bg-white/5":"border-(--elm-border-strong,var(--color-gray-300)) dark:border-(--elm-border-strong,var(--color-gray-700)) text-elm-text-subtle"),children:g.isDraggingOver?"Drop here":"Drag here"}),!h&&T.getVirtualItems().map(C=>{const B=l[C.index];return B?c.jsx("div",{"data-index":C.index,style:{position:"absolute",top:0,left:0,width:"100%",transform:`translateY(${C.start-k}px)`},children:I(B,C.index,C.index===l.length-1,l[C.index-1],l[C.index+1])},B.id):null})]})}})}function We(D){if(D.length===0)return null;let l=1/0,o=1/0,R=-1/0,h=-1/0;for(const b of D){const I=b.bbox||Ne.getGeometryBBox(b.geometry);I[0]<l&&(l=I[0]),I[1]<o&&(o=I[1]),I[2]>R&&(R=I[2]),I[3]>h&&(h=I[3])}return[l,o,R,h]}const Ye=i.memo(function({feature:l,index:o,isLast:R,isSelected:h,isMultiSelected:b,isContextMenuActive:I,isGhosted:F,renameActive:w,isExpanded:q,selectedPartIndex:N,joinTop:v,joinBottom:P,h:y}){const M=l.id,k=i.useCallback(()=>y.onRenameEnd(M),[y,M]),G=i.useCallback(j=>y.onRenameTab(M,j),[y,M]),O=p.useUIStore(j=>j.readonly);return c.jsx(L.Draggable,{draggableId:M,index:o,isDragDisabled:O,children:(j,T)=>c.jsxs("div",{ref:j.innerRef,...j.draggableProps,...j.dragHandleProps,style:{outline:"none",...j.draggableProps.style},children:[c.jsx(z.FeatureRow,{feature:l,isDragging:T.isDragging,isSelected:h,onRowClick:y.onRowClick,onRowSelectOnly:y.onRowSelectOnly,onRowJump:y.onRowJump,onEdit:y.onEdit,onToggleHidden:y.onToggleHidden,onRename:y.onRename,isMultiSelected:b,onMultiSelectToggle:y.onMultiSelectToggle,onRangeSelect:y.onRangeSelect,isContextMenuActive:I,isGhosted:F,renameActive:w,onRenameEnd:k,onRenameTab:G,joinTop:v,joinBottom:P}),q&&!T.isDragging&&c.jsxs(c.Fragment,{children:[Array.from({length:_.getPartCount(l.geometry)},(H,a)=>c.jsx(z.PartSubRow,{geometry:l.geometry,partIndex:a,isSelected:N===a,onClick:()=>y.onPartClick(M,a)},`${M}:${a}`)),!R&&c.jsx("div",{className:"border-b border-elm-border mx-2 mt-1"})]})]})})});function Ke({autoFocusGroupId:D,scrollElement:l}){var Ee;const{dataStore:o,uiStore:R}=p.useGeoStore(),h=p.useUIStore(e=>e.readonly),b=p.useDataStore(e=>e.features),I=p.useDataStore(e=>e.groups),F=p.useDataStore(e=>e.selectedIds),w=i.useMemo(()=>new Set(F),[F]),q=Ve.useAccentStyle(),N=p.useTheme(),v=i.useMemo(()=>{const e=new Map;for(const t of b){const n=t.groupId||null,r=e.get(n);r?r.push(t):e.set(n,[t])}return e},[b]),P=F.length===1?F[0]:null,y=p.useDataStore(e=>e.selectedGroupId),M=p.useDataStore(e=>e.selectGroup),k=p.useDataStore(e=>e.selectFeature),G=p.useDataStore(e=>e.toggleSelection),O=p.useDataStore(e=>e.setSelection),j=p.useDataStore(e=>e.updateGroup),T=p.useDataStore(e=>e.deleteGroup),H=p.useDataStore(e=>e.toggleGroupCollapsed),a=p.useDataStore(e=>e.moveFeatureToGroup),g=p.useDataStore(e=>e.reorderFeatures),U=p.useDataStore(e=>e.reorderGroups),ee=p.useDataStore(e=>e.toggleGroupHidden),$=p.useUIStore(e=>e.openEditDialog),{fitBounds:C}=p.useMapController(),B=p.useDataStore(e=>e.updateFeature),ie=p.useDataStore(e=>e.toggleFeatureHidden),je=p.useUIStore(e=>e.selectedPartIndex),ce=p.useUIStore(e=>e.setSelectedPartIndex),[te,Fe]=i.useState(()=>new Set),de=i.useCallback(e=>{Fe(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),[V,ue]=i.useState(null),[ne,W]=i.useState(null),Y=i.useRef(null),ge=i.useCallback((e,t)=>{const n=o.getState(),r=z.getTabbableFeatureIds(n.features,n.groups),f=r.indexOf(e);if(f<0){W(null);return}const s=t==="next"?f+1:f-1;if(s<0||s>=r.length){W(null);return}W(r[s])},[o]),pe=i.useCallback(e=>{W(t=>t===e?null:t)},[]),A=Be.useContextMenu(),[K,ve]=i.useState(null),fe=l??null;i.useEffect(()=>{const e=K;if(!e)return;const t=n=>{let r=n.target;for(;r&&r!==e;){const f=r.dataset.featureId;if(f){n.preventDefault();const s=o.getState().features.find(d=>d.id===f);s&&A.open(n.clientX,n.clientY,s);return}r=r.parentElement}};return e.addEventListener("contextmenu",t,{capture:!0}),()=>e.removeEventListener("contextmenu",t,{capture:!0})},[A.open,o,K]);const me=i.useCallback(e=>{const t=o.getState(),n=t.selectedIds.length===1?t.selectedIds[0]:Y.current;if(Y.current=e,!n){G(e);return}const r=z.getVisualFeatureOrder(t.features,t.groups),f=r.indexOf(n),s=r.indexOf(e);if(f===-1||s===-1){G(e);return}const d=Math.min(f,s),S=Math.max(f,s);O(r.slice(d,S+1))},[o,G,O]),xe=i.useCallback((e,t)=>{const n=o.getState().features.find(r=>r.id===e);n&&B(e,{properties:{...n.properties,name:t}})},[o,B]),be=ze.useJumpToFeature(),X=i.useCallback(e=>{const t=o.getState().features.find(n=>n.id===e);t&&be(t)},[o,be]),Q=i.useCallback(e=>{const t=o.getState().features.find(n=>n.id===e);t&&(Y.current=e,k(e),_.isMultiGeometry(t.geometry)&&de(e))},[o,k,de]),Se=i.useCallback(e=>{Q(e),X(e)},[Q,X]),he=i.useCallback(e=>{G(e),Y.current=e},[G]);function Te(e){ue(e.draggableId)}function ke(e){const{source:t,destination:n,draggableId:r,type:f}=e;if(ue(null),!n||t.droppableId===n.droppableId&&t.index===n.index||R.getState().readonly)return;if(o.getState().takeSnapshot(),f==="group"){const S=[...I],[m]=S.splice(t.index,1);S.splice(n.index,0,m),U(S.map(E=>E.id));return}const s=t.droppableId,d=n.droppableId;if(s===d){const m=[...re(s)],[E]=m.splice(t.index,1);m.splice(n.index,0,E),Ie(s,m.map(u=>u.id))}else{const S=d==="ungrouped"?null:d,E=w.has(r)&&F.length>1?re(s).filter(u=>w.has(u.id)).map(u=>u.id):[r];if(E.length===1){a(r,S);const u=re(d).filter(x=>x.id!==r);u.splice(n.index,0,b.find(x=>x.id===r)),Ie(d,u.map(x=>x.id),r)}else{for(const u of E)a(u,S);Ge(d,E,n.index)}}}function Ge(e,t,n){const r=new Set(t),f=t.map(u=>b.find(x=>x.id===u)),s=b.filter(u=>!r.has(u.id)),d=e==="ungrouped",S=s.filter(u=>d?!u.groupId:u.groupId===e);let m;if(n<S.length)m=s.findIndex(u=>u.id===S[n].id);else{const u=S[S.length-1];m=u?s.findIndex(x=>x.id===u.id)+1:s.length}const E=[...s.slice(0,m),...f,...s.slice(m)];g(E.map(u=>u.id))}function re(e){return v.get(e==="ungrouped"?null:e)??le}function Ie(e,t,n){const r=new Set(t),f=n?b.find(x=>x.id===n):null,s=b.filter(x=>x.id!==n),d=s.filter(x=>!r.has(x.id)),S=s.find(x=>r.has(x.id)),m=S?d.findIndex(x=>x.id===S.id):d.length,E=t.map(x=>x===n?f:b.find(He=>He.id===x)),u=[...d.slice(0,m),...E,...d.slice(m)];g(u.map(x=>x.id))}const oe=v.get(null)??le,Pe=(()=>{if(!V||!w.has(V)||F.length<=1)return 1;const e=b.find(n=>n.id===V),t=(e==null?void 0:e.groupId)??null;return b.filter(n=>w.has(n.id)&&(n.groupId??null)===t).length})(),J=((Ee=A.state)==null?void 0:Ee.data)??null,ye=i.useCallback((e,t)=>{const n=o.getState().features.find(r=>r.id===e);n&&(k(e),ce(t),C==null||C(_.getPartBBox(n.geometry,t)))},[o,k,ce,C]),Oe=i.useMemo(()=>({onRowClick:Se,onRowSelectOnly:Q,onRowJump:X,onEdit:$,onToggleHidden:ie,onRename:xe,onMultiSelectToggle:he,onRangeSelect:me,onRenameEnd:pe,onRenameTab:ge,onPartClick:ye}),[Se,Q,X,$,ie,xe,he,me,pe,ge,ye]);function Re(e){return(t,n,r)=>{const f=e[r.source.index];return f?c.jsx(z.FeatureRow,{feature:f,innerRef:t.innerRef,containerProps:{...t.draggableProps,"data-elm-portal":"","data-elm-theme":N,style:{...q,...t.draggableProps.style}},dragHandleProps:t.dragHandleProps,isDragging:!0,isSelected:w.has(f.id),dragCountBadge:Pe,onRowClick:()=>{},onEdit:()=>{},onToggleHidden:()=>{}}):c.jsx("div",{ref:t.innerRef,...t.draggableProps})}}const se=e=>!!e&&!(e.groupId&&y===e.groupId)&&(e.id===P||w.has(e.id)),De=e=>te.has(e.id)&&_.isMultiGeometry(e.geometry);function Ce(e,t,n=!1,r,f){const s=De(e),d=se(e),S=!!e.groupId&&y===e.groupId,m=e.id===P;return c.jsx(Ye,{feature:e,index:t,isLast:n,isSelected:!S&&m,isMultiSelected:!S&&w.has(e.id),isContextMenuActive:(J==null?void 0:J.id)===e.id,isGhosted:V!==null&&V!==e.id&&w.has(e.id)&&w.has(V),renameActive:ne===e.id,isExpanded:s,selectedPartIndex:m&&s?je:null,joinTop:d&&se(r)&&!De(r),joinBottom:d&&se(f)&&!s,h:Oe},e.id)}const we=b.length===0&&I.length===0;return c.jsxs(c.Fragment,{children:[A.state&&J&&c.jsx(Ue.FeatureRowContextMenu,{x:A.state.x,y:A.state.y,feature:J,onClose:A.close}),c.jsx(L.DragDropContext,{onDragStart:Te,onDragEnd:ke,children:c.jsxs("div",{ref:ve,className:we?"h-full":"space-y-0.5",children:[we&&c.jsx(z.NoFeaturesEmptyState,{}),c.jsx(L.Droppable,{droppableId:"groups-container",type:"group",children:e=>c.jsxs("div",{ref:e.innerRef,...e.droppableProps,children:[I.map((t,n)=>{const r=v.get(t.id)??le,f=y===t.id;return c.jsx(L.Draggable,{draggableId:`group:${t.id}`,index:n,isDragDisabled:h,children:(s,d)=>{const S=c.jsxs("div",{ref:s.innerRef,...s.draggableProps,...d.isDragging&&{"data-elm-portal":"","data-elm-theme":N},style:{outline:"none",...d.isDragging&&q,...s.draggableProps.style},children:[c.jsx(z.GroupRow,{group:t,featureCount:r.length,autoFocus:t.id===D,isSelected:f,onToggleCollapse:()=>H(t.id),onToggleHidden:()=>ee(t.id),onRename:m=>j(t.id,{name:m}),onDelete:m=>T(t.id,m),onSelect:()=>{if(r.length===0){O([]),M(t.id);return}O(r.map(E=>E.id)),M(t.id);const m=We(r);m&&(C==null||C(m))},dragHandleProps:s.dragHandleProps,isDragging:d.isDragging}),!d.isDragging&&c.jsx(Me,{droppableId:t.id,features:r,scrollElement:fe,listElement:K,expandedIds:te,collapsed:t.collapsed,renderItem:Ce,renderClone:Re(r),scrollToId:ne??P}),!t.collapsed&&(n<I.length-1||I.length>0)&&c.jsx("div",{className:"border-b border-elm-border mx-2 mt-1"})]});return d.isDragging?Ae.createPortal(S,document.body):S}},t.id)}),e.placeholder]})}),(oe.length>0||I.length>0)&&c.jsx(Me,{droppableId:"ungrouped",features:oe,scrollElement:fe,listElement:K,expandedIds:te,renderItem:Ce,renderClone:Re(oe),scrollToId:ne??P,showEmptyAffordance:!1})]})})]})}exports.default=Ke;