geostyler
Version:
Framework for styling geodata
249 lines (248 loc) • 7 kB
JavaScript
import { jsxs as z, jsx as c } from "react/jsx-runtime";
import { useState as b, useEffect as ee } from "react";
import le from "lodash-es/get.js";
import f from "lodash-es/cloneDeep.js";
import { Form as oe, Button as se, Menu as te } from "antd";
import { NameField as ne } from "../NameField/NameField.js";
import { BulkEditModals as re } from "../Symbolizer/BulkEditModals/BulkEditModals.js";
import ae from "../../Util/SymbolizerUtil.js";
import { RuleTable as ie } from "../RuleTable/RuleTable.js";
import { RuleGeneratorWindow as ce } from "../RuleGenerator/RuleGeneratorWindow.js";
import { PlusOutlined as ue, CopyOutlined as de, MinusOutlined as me, MenuUnfoldOutlined as be } from "@ant-design/icons";
import { useGeoStylerData as fe, useGeoStylerComposition as ye, useGeoStylerLocale as pe } from "../../context/GeoStylerContext/GeoStylerContext.js";
/* empty css */
const xe = (N) => {
const L = fe(), T = ye("Style"), B = { ...N, ...T }, {
nameField: h,
disableClassification: I = !1,
disableMultiEdit: p = !1,
style: k = {
name: "My Style",
rules: []
},
onStyleChange: a
} = B, d = pe("Style"), [s, m] = b(k), [i, R] = b([]), [O, w] = b(!1), [W, C] = b(!1), [F, g] = b(!1), [K, v] = b(!1), [_, E] = b(!1);
ee(() => {
m(k);
}, [k]);
const P = (l) => {
const e = f(s);
e.name = l, a && a(e), m(e);
}, V = (l) => {
const e = f(s);
e.rules = l, a && a(e), m(e);
}, j = () => {
const l = f(s), e = Math.floor(Math.random() * 1e4), o = le(l, "rules[0].symbolizers[0].kind"), n = {
name: "rule_" + e,
symbolizers: [ae.generateSymbolizer(o)]
};
l.rules = [...l.rules, n], a && a(l), R([]), m(l);
}, G = (...l) => {
const e = f(s), o = [];
e.rules.forEach((n, t) => {
if (l.includes(t)) {
const u = f(n), r = Math.floor(Math.random() * 1e4);
u.name = "rule_" + r, o.push(u);
}
}), e.rules = [...e.rules, ...o], a && a(e), m(e);
}, x = (...l) => {
const e = f(s), o = e.rules.filter((n, t) => !l.includes(t));
e.rules = o, a && a(e), R([]), m(e);
}, D = (l) => {
R(l);
}, U = (l) => {
switch (l.key) {
case "addRule":
j();
break;
case "cloneRules":
G(...i);
break;
case "removeRule":
x(...i);
break;
case "color":
w(!0);
break;
case "size":
C(!0);
break;
case "opacity":
g(!0);
break;
case "symbol":
v(!0);
break;
}
}, y = (l) => {
const e = f(s);
e.rules.filter((n, t) => i.includes(t)).forEach((n) => {
n.symbolizers.forEach((t) => {
l.forEach((u) => {
const r = u.property, S = u.value;
t[r] = S, r === "kind" && S === "Icon" && t.wellKnownName && delete t.wellKnownName, r === "kind" && S === "Mark" && t.image && delete t.image;
});
});
}), a && a(e), m(e);
}, A = (l) => {
y([{ value: l, property: "color" }]);
}, q = (l) => {
y([{ value: l, property: "radius" }]);
}, H = (l) => {
y([{ value: l, property: "opacity" }]);
}, J = (l, e) => {
y(e === "Mark" ? [
{ value: l, property: "wellKnownName" },
{ value: e, property: "kind" }
] : [
{ value: l, property: "image" },
{ value: e, property: "kind" }
]);
}, Q = () => {
E(!0);
}, X = () => {
E(!1);
}, Y = () => {
w(!1), C(!1), g(!1), v(!1);
}, M = (l, e) => {
let o = !0;
switch (l) {
case "size":
return e.forEach((n) => {
s.rules[n].symbolizers.forEach((u) => {
const r = u.kind;
(r === "Fill" || r === "Text" || r === "Line") && (o = !1);
});
}), !o;
case "symbol":
return e.forEach((n) => {
s.rules[n].symbolizers.forEach((u) => {
const r = u.kind;
r !== "Mark" && r !== "Icon" && (o = !1);
});
}), !o;
case "color":
return e.forEach((n) => {
s.rules[n].symbolizers.forEach((u) => {
u.kind === "Icon" && (o = !1);
});
}), !o;
default:
return !o;
}
}, Z = () => {
const l = i.length > 0 && i.length < s.rules.length, e = i.length > 0, o = [{
key: "addRule",
label: d.addRuleBtnText,
icon: /* @__PURE__ */ c(ue, {})
}, !p && {
key: "cloneRules",
label: d.cloneRulesBtnText,
disabled: !e,
icon: /* @__PURE__ */ c(de, {})
}, !p && {
key: "removeRule",
label: d.removeRulesBtnText,
disabled: !l,
icon: /* @__PURE__ */ c(me, {})
}, !p && {
key: "multi-edit",
label: /* @__PURE__ */ z("span", { children: [
/* @__PURE__ */ c(be, {}),
/* @__PURE__ */ c("span", { children: d.multiEditLabel })
] }),
disabled: i.length <= 1,
children: [{
key: "color",
label: d.colorLabel,
disabled: M("color", i)
}, {
key: "size",
label: d.radiusLabel,
disabled: M("size", i)
}, {
key: "symbol",
label: d.symbolLabel,
disabled: M("symbol", i)
}]
}];
return /* @__PURE__ */ c(
te,
{
mode: "horizontal",
onClick: U,
selectable: !1,
items: o
}
);
}, $ = (s == null ? void 0 : s.rules) || [];
return /* @__PURE__ */ z("div", { className: "gs-style", children: [
/* @__PURE__ */ z("div", { className: "gs-style-name-classification-row", children: [
(h == null ? void 0 : h.visibility) === !1 ? null : /* @__PURE__ */ c(
oe.Item,
{
label: d.nameFieldLabel,
children: /* @__PURE__ */ c(
ne,
{
value: s.name,
onChange: P,
placeholder: d.nameFieldPlaceholder
}
)
}
),
// TODO: Rule GeneratorWindow should only be available if data is VectorData
!I && /* @__PURE__ */ c(
se,
{
className: "gs-style-rulegenerator",
onClick: Q,
disabled: !L,
children: d.ruleGeneratorWindowBtnText
}
)
] }),
/* @__PURE__ */ c(
ce,
{
open: _,
onClose: X,
onRulesChange: V
}
),
/* @__PURE__ */ c(
ie,
{
rules: $,
onRulesChange: V,
rowSelection: !p && {
selectedRowKeys: i,
onChange: D
},
onCloneRule: G,
onRemoveRule: x,
footer: Z
}
),
/* @__PURE__ */ c(
re,
{
colorModalVisible: O,
sizeModalVisible: W,
opacityModalVisible: F,
symbolModalVisible: K,
selectedRowKeys: i,
updateMultiColors: A,
updateMultiSizes: q,
updateMultiOpacities: H,
updateMultiSymbols: J,
style: s,
modalsClosed: Y
}
)
] });
};
export {
xe as Style
};