geostyler
Version:
Framework for styling geodata
291 lines (290 loc) • 9.45 kB
JavaScript
import { jsx as r, jsxs as g } from "react/jsx-runtime";
import { useState as p, useRef as _, useEffect as Re } from "react";
import { CqlParser as De } from "geostyler-cql-parser";
import Ee from "lodash-es/get.js";
import Ie from "lodash-es/set.js";
import ze from "lodash-es/cloneDeep.js";
import { Tooltip as k, Table as ve, Button as N, Popover as j, Input as F, Space as Te } from "antd";
/* empty css */
import { FilterEditorWindow as ke } from "../Filter/FilterEditorWindow/FilterEditorWindow.js";
import { SymbolizerEditorWindow as Ne } from "../Symbolizer/SymbolizerEditorWindow/SymbolizerEditorWindow.js";
import Oe from "../../Util/FilterUtil.js";
import M from "../../Util/DataUtil.js";
import { BgColorsOutlined as Ve, BlockOutlined as qe, EditOutlined as P, CopyOutlined as Ke, CloseOutlined as Ue } from "@ant-design/icons";
import { Renderer as Le } from "../Renderer/Renderer/Renderer.js";
import { useGeoStylerData as Be, useGeoStylerComposition as H, useGeoStylerLocale as We } from "../../context/GeoStylerContext/GeoStylerContext.js";
import { DndContext as Ge, closestCenter as _e } from "@dnd-kit/core";
import { useDragDropSensors as je } from "../../hook/UseDragDropSensors.js";
import { SortableContext as Fe, verticalListSortingStrategy as Me, arrayMove as O } from "@dnd-kit/sortable";
import { DraggableRow as Pe } from "../DraggableTableRow/DraggableTablerow.js";
import { InputScaleDenominator as He } from "../ScaleDenominator/InputScaleDenominator.js";
import { SelectScaleDenominator as Je } from "../ScaleDenominator/SelectScaleDenominator.js";
const yt = (J) => {
var L, B;
const s = Be(), V = s == null ? void 0 : s.scaleDenominators, Q = H("Rule"), X = H("Style"), Y = { ...J, ...Q }, {
amountField: S,
duplicateField: x,
filterField: w,
scalesField: R,
nameField: D,
/** show actions column by default if disableMultiEdit is true */
actionsField: y = {
visibility: X.disableMultiEdit === !0
},
onRulesChange: E,
rendererType: Z = "OpenLayers",
rules: i,
onCloneRule: I,
onRemoveRule: z,
// The composableProps include the antd table props
...a
} = Y, c = We("RuleTable"), [b, q] = p(), [$, v] = p(), [A, T] = p(), [ee, te] = p(), [re, ne] = p(), [oe, ie] = p(), K = () => i.map(() => crypto.randomUUID()), m = _(K()), le = je(), { current: se } = _(new De());
Re(() => {
let e = {};
try {
s && M.isVector(s) ? e = Oe.calculateCountAndDuplicates(i, s) : e = {};
} catch {
te(!0);
}
ne(e == null ? void 0 : e.counts), ie(e == null ? void 0 : e.duplicates);
}, [i, s]), m.current.length < i.length && (m.current = K());
const C = i == null ? void 0 : i.map((e, n) => ({
...e,
key: m.current[n]
})), ce = (e) => {
q(e), v(!0), T(!1);
}, ae = (e, n, o) => {
const t = () => {
ce(o);
};
return /* @__PURE__ */ g("div", { className: "gs-symbolizer-wrapper", children: [
/* @__PURE__ */ r(
Le,
{
rendererType: Z,
symbolizers: n.symbolizers
}
),
/* @__PURE__ */ r(
N,
{
className: "square-button",
type: "primary",
icon: /* @__PURE__ */ r(P, {}),
onClick: t
}
)
] });
}, me = (e, n, o) => /* @__PURE__ */ r(
j,
{
content: n.name,
title: c.nameColumnTitle,
children: /* @__PURE__ */ r(
F,
{
value: n.name,
name: "name-renderer",
onChange: (t) => {
const l = t.target;
h(o, "name", l.value);
}
}
)
}
), ue = (e, n, o) => {
const t = se.write(n.filter);
let l;
const d = /* @__PURE__ */ r(
F.Search,
{
className: "gs-rule-table-filter-cell",
name: "filter-renderer",
value: t,
onChange: () => {
},
enterButton: /* @__PURE__ */ r(P, {}),
onSearch: () => {
de(o);
}
}
);
return t && t.length > 0 ? l = /* @__PURE__ */ r(
j,
{
content: t,
title: c.filterColumnTitle,
children: d
}
) : l = d, l;
}, de = (e) => {
q(e), v(!1), T(!0);
}, fe = (e, n, o) => {
const t = Ee(n, "scaleDenominator");
return V ? /* @__PURE__ */ r(
Je,
{
scaleDenominators: V,
scaleDenominator: t,
onChange: (l) => {
h(o, "scaleDenominator", l);
}
}
) : /* @__PURE__ */ r(He, { scaleDenominator: t, onChange: (l) => {
h(o, "scaleDenominator", l);
} });
}, pe = (e, n, o) => {
let t = "-";
const l = n.filter;
if (s && l)
try {
t = re[o] || 0;
} catch {
t = "-";
}
else s && M.isVector(s) && (t = s.exampleFeatures.features.length);
return /* @__PURE__ */ r("div", { className: "ant-input gs-rule-table-numeric-cell amount-renderer", children: t });
}, ye = (e, n, o) => {
let t = "-";
if (s && i)
try {
t = oe[o];
} catch {
t = "-";
}
return /* @__PURE__ */ r("div", { className: "ant-input gs-rule-table-numeric-cell duplicates-renderer", children: t });
}, he = (e, n, o) => /* @__PURE__ */ g(Te.Compact, { block: !0, children: [
y.clone !== !1 && /* @__PURE__ */ r(
N,
{
className: "gs-rule-table-action-buttons",
icon: /* @__PURE__ */ r(Ke, {}),
title: c.actionCloneLabel,
color: "default",
variant: "text",
onClick: () => I == null ? void 0 : I(o)
}
),
y.remove !== !1 && /* @__PURE__ */ r(
N,
{
className: "gs-rule-table-action-buttons",
icon: /* @__PURE__ */ r(Ue, {}),
color: "default",
variant: "text",
title: c.actionRemoveLabel,
onClick: () => z == null ? void 0 : z(o),
disabled: i.length <= 1
}
)
] }), be = (e) => {
h(b, "symbolizers", e);
}, Ce = (e) => {
h(b, "filter", e);
}, h = (e, n, o) => {
const t = ze(i);
Ie(t[e], n, o), E && E(t);
}, ge = () => {
v(!1);
}, Se = () => {
T(!1);
}, u = [
{
title: /* @__PURE__ */ r(k, { title: c.symbolizersColumnTitle, children: /* @__PURE__ */ r(Ve, {}) }),
dataIndex: "symbolizers",
render: ae
}
];
(D == null ? void 0 : D.visibility) !== !1 && u.push({
title: c.nameColumnTitle,
dataIndex: "name",
render: me
}), (w == null ? void 0 : w.visibility) !== !1 && u.push({
title: c.filterColumnTitle,
dataIndex: "filter",
render: ue
}), (R == null ? void 0 : R.visibility) !== !1 && u.push({
title: c.scalesColumnTitle,
dataIndex: "scaleDenominator",
render: fe
}), (S == null ? void 0 : S.visibility) !== !1 && u.push({
title: /* @__PURE__ */ r(k, { title: c.amountColumnTitle, children: "Σ" }),
dataIndex: "amount",
render: pe
}), (x == null ? void 0 : x.visibility) !== !1 && u.push({
title: /* @__PURE__ */ r(k, { title: c.duplicatesColumnTitle, children: /* @__PURE__ */ r(qe, {}) }),
dataIndex: "duplicates",
render: ye
}), (y == null ? void 0 : y.visibility) !== !1 && u.push({
title: c.actionsColumnTitle,
render: he
});
const U = (e, n, o) => {
var t, l;
return (l = (t = a.rowSelection) == null ? void 0 : t.onChange) == null ? void 0 : l.call(t, e.map((d) => m.current.indexOf(d)), n, o);
}, xe = ({ active: e, over: n }) => {
var d, W, G;
if (e.id === (n == null ? void 0 : n.id))
return;
const o = C.findIndex((f) => f.key === e.id), t = C.findIndex((f) => f.key === (n == null ? void 0 : n.id)), l = (W = (d = a == null ? void 0 : a.rowSelection) == null ? void 0 : d.selectedRowKeys) == null ? void 0 : W.map(
(f) => m.current[f]
);
m.current = O(m.current, o, t), E(O(i, o, t)), !(!a.rowSelection || ((G = a.rowSelection.selectedRowKeys) == null ? void 0 : G.length) === 0) && U(
l,
O(C, o, t).filter((f) => l.includes(f.key)),
null
);
};
if (ee)
return /* @__PURE__ */ r("h1", { children: "An error occurred in the RuleTable UI." });
const we = a.rowSelection ? {
...a.rowSelection,
selectedRowKeys: a.rowSelection.selectedRowKeys.map((e) => m.current[e]),
onChange: U
} : void 0;
return /* @__PURE__ */ g("div", { className: "gs-rule-table", children: [
/* @__PURE__ */ r(Ge, { sensors: le, collisionDetection: _e, onDragEnd: xe, children: /* @__PURE__ */ r(Fe, { items: m.current, strategy: Me, children: /* @__PURE__ */ r(
ve,
{
columns: u,
dataSource: C,
pagination: !1,
rowKey: "key",
components: {
header: {
row: (e) => /* @__PURE__ */ g("tr", { children: [
/* @__PURE__ */ r("th", {}),
e.children
] })
},
body: {
row: Pe
}
},
...a,
rowSelection: we
}
) }) }),
/* @__PURE__ */ r(
Ne,
{
open: $,
onClose: ge,
symbolizers: (L = i == null ? void 0 : i[b]) == null ? void 0 : L.symbolizers,
onSymbolizersChange: be
}
),
/* @__PURE__ */ r(
ke,
{
open: A,
onClose: Se,
filter: (B = i == null ? void 0 : i[b]) == null ? void 0 : B.filter,
onFilterChange: Ce
}
)
] });
};
export {
yt as RuleTable
};