geostyler
Version:
Framework for styling geodata
249 lines (248 loc) • 7.08 kB
JavaScript
import { jsx as e, jsxs as p } from "react/jsx-runtime";
import { useState as n } from "react";
import { Form as l, Radio as R, InputNumber as J, Tooltip as Q, Button as D } from "antd";
import { AttributeCombo as X } from "../Filter/AttributeCombo/AttributeCombo.js";
/* empty css */
import g from "../../Util/RuleGeneratorUtil.js";
import { KindField as Y } from "../Symbolizer/Field/KindField/KindField.js";
import { WellKnownNameField as Z } from "../Symbolizer/Field/WellKnownNameField/WellKnownNameField.js";
import { brewer as ee } from "chroma-js";
import { ColorRampCombo as oe } from "./ColorRampCombo/ColorRampCombo.js";
import { ColorSpaceCombo as te } from "./ColorSpaceCombo/ColorSpaceCombo.js";
import { ColorsPreview as ne } from "./ColorsPreview/ColorsPreview.js";
import { ClassificationCombo as re } from "./ClassificationCombo/ClassificationCombo.js";
import le from "lodash-es/get.js";
import { PlusSquareOutlined as ie } from "@ant-design/icons";
import { useGeoStylerData as se, useGeoStylerComposition as ae, useGeoStylerLocale as ce } from "../../context/GeoStylerContext/GeoStylerContext.js";
import { getFormItemConfig as me } from "../../Util/FormItemUtil.js";
const ke = (K) => {
const u = se(), O = ae("RuleGenerator"), E = { ...K, ...O }, {
onRulesChange: y,
colorSpaces: S = ["hsl", "hsv", "hsi", "lab", "lch", "hcl", "rgb"],
// rgba, cmyk and gl crash
colorRamps: m = {
GeoStyler: ["#E7000E", "#F48E00", "#FFED00", "#00943D", "#272C82", "#611E82"],
GreenRed: ["#00FF00", "#FF0000"],
...ee
}
} = E, o = ce("RuleGenerator"), i = 2, [f, W] = n(
g.guessSymbolizerFromData(u)
), [C, G] = n("circle"), [b, $] = n(m && m.GeoStyler ? "GeoStyler" : void 0), [M, P] = n("hsl"), [s, v] = n(2), [F, V] = n(), [x, w] = n(), [z, A] = n(), [d, T] = n(), [a, I] = n(), [h, k] = n(), B = (t) => {
try {
const c = le(u, `schema.properties[${t}].type`);
let N = a;
c === "string" && a === "kmeans" && (N = void 0);
const _ = g.getDistinctValues(u, t) || [];
T(t), A(c), V(_), k(c === "string" ? "nominal" : "cardinal"), I(N);
} catch {
w(!0);
}
}, L = (t) => {
k(t.target.value);
}, j = () => {
v(F.length);
}, U = (t) => {
let c;
t === "Mark" && !C ? c = "circle" : c = void 0, G(c), W(t);
}, q = () => {
try {
const t = g.generateRules({
attributeName: d,
classificationMethod: a,
colors: m[b],
data: u,
levelOfMeasurement: h,
numberOfRules: s,
symbolizerKind: f,
wellKnownName: C
});
a === "kmeans" && v(t.length), y && y(t);
} catch {
w(!0);
}
};
if (x)
return /* @__PURE__ */ e("h1", { children: "An error occurred in the RuleGenerator UI." });
const H = g.generateColors(m[b], s, M), r = me();
return /* @__PURE__ */ p("div", { className: "gs-rule-generator", children: [
/* @__PURE__ */ e(
X,
{
value: d,
onAttributeChange: B,
validateStatus: d ? "success" : "warning"
}
),
/* @__PURE__ */ e(
l.Item,
{
...r,
label: o.levelOfMeasurement,
children: /* @__PURE__ */ p(
R.Group,
{
onChange: L,
value: h,
buttonStyle: "solid",
children: [
/* @__PURE__ */ e(
R.Button,
{
value: "nominal",
children: o.nominal
}
),
/* @__PURE__ */ e(
R.Button,
{
value: "cardinal",
disabled: z === "string",
children: o.cardinal
}
)
]
}
)
}
),
h !== "cardinal" ? null : /* @__PURE__ */ e(
l.Item,
{
...r,
label: o.classification,
children: /* @__PURE__ */ e(
re,
{
classification: a,
onChange: I
}
)
}
),
/* @__PURE__ */ e(
l.Item,
{
...r,
label: o.numberOfRules,
validateStatus: a === "kmeans" ? "warning" : s < i ? "error" : void 0,
help: a === "kmeans" ? o.numberOfRulesViaKmeans : s < i ? `${o.colorRampMinClassesWarningPre} ${i} ${o.colorRampMinClassesWarningPost}` : void 0,
children: /* @__PURE__ */ p("div", { children: [
/* @__PURE__ */ e(
J,
{
min: i,
max: 100,
value: s,
onChange: v
}
),
h === "nominal" && F.length > 0 && /* @__PURE__ */ e(Q, { title: o.allDistinctValues, children: /* @__PURE__ */ e(
D,
{
className: "all-distinct-values-button",
icon: /* @__PURE__ */ e(ie, {}),
onClick: j
}
) })
] })
}
),
/* @__PURE__ */ p("fieldset", { children: [
/* @__PURE__ */ e("legend", { children: o.symbolizer }),
/* @__PURE__ */ e(
l.Item,
{
...r,
children: /* @__PURE__ */ e(
Y,
{
value: f,
symbolizerKinds: [
"Fill",
"Mark",
"Line"
],
onChange: U
}
)
}
),
f !== "Mark" ? null : /* @__PURE__ */ e(
l.Item,
{
...r,
children: /* @__PURE__ */ e(
Z,
{
value: C,
onChange: G
}
)
}
),
/* @__PURE__ */ e(
l.Item,
{
...r,
label: o.colorRamp,
help: s < i ? `${o.colorRampMinClassesWarningPre} ${i} ${o.colorRampMinClassesWarningPost}` : void 0,
children: /* @__PURE__ */ e(
oe,
{
colorRamps: m,
colorRamp: b,
onChange: $
}
)
}
),
S.length > 0 ? /* @__PURE__ */ e(
l.Item,
{
...r,
label: o.colorSpace,
children: /* @__PURE__ */ e(
te,
{
colorSpace: M,
colorSpaces: S,
onChange: P
}
)
}
) : null,
/* @__PURE__ */ e(
l.Item,
{
...r,
label: o.preview,
children: /* @__PURE__ */ e(
ne,
{
colors: H
}
)
}
)
] }),
/* @__PURE__ */ e(
l.Item,
{
...r,
children: /* @__PURE__ */ e(
D,
{
className: "gs-rule-generator-submit-button",
type: "primary",
onClick: q,
disabled: s < i || !d,
children: o.generateButtonText
}
)
}
)
] });
};
export {
ke as RuleGenerator
};