geostyler/dist/Component/CardStyle/CardStyle.js

Framework for styling geodata

import { jsxs as g, jsx as h, Fragment as A } from "react/jsx-runtime";
import { useState as D } from "react";
import p from "lodash-es/cloneDeep.js";
import { isIconSymbolizer as V } from "geostyler-style";
/* empty css              */
import { Breadcrumb as M } from "../Breadcrumb/Breadcrumb.js";
import { StyleOverview as U } from "../StyleOverview/StyleOverview.js";
import { RuleOverview as k } from "../RuleOverview/RuleOverview.js";
import d from "../../Util/CardViewUtil.js";
import { Editor as P } from "../Symbolizer/Editor/Editor.js";
import { FilterTree as Y } from "../Filter/FilterTree/FilterTree.js";
import { RuleGenerator as K } from "../RuleGenerator/RuleGenerator.js";
import { BulkEditor as j } from "../BulkEditor/BulkEditor.js";
import { IconSelector as G } from "../Symbolizer/IconSelector/IconSelector.js";
import { Renderer as Z } from "../Renderer/Renderer/Renderer.js";
import { useGeoStylerLocale as _ } from "../../context/GeoStylerContext/GeoStylerContext.js";
const o = d.STYLEVIEW, u = d.RULEVIEW, f = d.CLASSIFICATIONVIEW, E = d.MULTIEDITVIEW, w = d.SYMBOLIZERVIEW, v = d.FILTEREDITVIEW, b = d.ICONLIBRARIESVIEW, me = ({
  style: n = { name: "My Style", rules: [] },
  onStyleChange: s
}) => {
  const l = _("CardStyle"), C = { view: o, title: l.styleTitle, indices: [] }, R = {
    view: o,
    props: [],
    path: [C]
  }, [e, T] = D(R), z = (i, t) => {
    var r, a, m, c;
    switch (i) {
      case o:
        return [{ view: o, title: l.styleTitle, indices: [] }];
      case u:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: u, title: (r = n.rules[t[0]]) == null ? void 0 : r.name, indices: [...t] }
        ];
      case f:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: f, title: l.classificationTitle, indices: [] }
        ];
      case E:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: E, title: l.multiEditTitle, indices: [...t] }
        ];
      case w:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: u, title: (a = n.rules[t[0]]) == null ? void 0 : a.name, indices: [t[0]] },
          { view: w, title: l.symbolizerTitle, indices: [...t] }
        ];
      case v:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: u, title: (m = n.rules[t[0]]) == null ? void 0 : m.name, indices: [t[0]] },
          { view: v, title: l.filterTitle, indices: [...t] }
        ];
      case b:
        return [
          { view: o, title: l.styleTitle, indices: [] },
          { view: u, title: (c = n.rules[t[0]]) == null ? void 0 : c.name, indices: [t[0]] },
          { view: w, title: l.symbolizerTitle, indices: [...t] },
          { view: w, title: l.iconLibrariesTitle, indices: [...t] }
        ];
      default:
        return [];
    }
  }, I = (i, t) => {
    const r = { view: i, props: t, path: [] };
    r.path = z(i, t), T(r);
  }, L = (i, t) => t.map((r) => (r.view === u && (r.title = i), r)), W = (i) => {
    const t = p(n), r = e.path[e.path.length - 1].indices[0];
    t.rules[r] = i;
    const a = p(e.path), m = L(i.name, a);
    T({ ...e, path: m }), s && s(t);
  }, S = (i) => {
    const t = p(n);
    t.rules = i, s && (s(t), I(o, e.path[0].indices));
  }, x = (i) => {
    const t = p(n), r = e.path[e.path.length - 1].indices[0], a = e.path[e.path.length - 1].indices[1];
    t.rules[r].symbolizers[a] = i, s && s(t);
  }, F = (i) => {
    const t = p(n), r = e.path[e.path.length - 1].indices[0];
    t.rules[r].filter = i, s && s(t);
  }, N = (i, t) => {
    const r = p(n), a = e.path[e.path.length - 1].indices;
    r.rules.filter((m, c) => a.includes(c)).forEach((m) => {
      m.symbolizers.forEach((c) => {
        c[i] = t, i === "image" && c.wellKnownName && (delete c.wellKnownName, c.kind = "Icon"), i === "wellKnownName" && c.image && delete c.image;
      });
    }), s && s(r);
  }, O = (i) => {
    const t = p(n), r = e.path[e.path.length - 1].indices[0], a = e.path[e.path.length - 1].indices[1], m = t.rules[r].symbolizers[a];
    V(m) && (m.image = i), s && s(t);
  }, y = () => {
    const i = n.rules[e.path[e.path.length - 1].indices[0]].symbolizers[e.path[e.path.length - 1].indices[1]];
    return V(i) && typeof i.image == "string" ? i.image : "";
  }, B = (i, t) => {
    const r = [e.path[e.path.length - 1].indices[0], ...t];
    I(i, r);
  };
  return /* @__PURE__ */ g("div", { className: "gs-card-style", children: [
    /* @__PURE__ */ h(
      M,
      {
        crumbs: e.path,
        onClick: I
      }
    ),
    e.view === o && /* @__PURE__ */ h(
      U,
      {
        style: n,
        onStyleChange: s,
        onChangeView: I
      }
    ),
    e.view === u && /* @__PURE__ */ h(
      k,
      {
        rule: n.rules[e.path[e.path.length - 1].indices[0]],
        onRuleChange: W,
        onChangeView: B
      }
    ),
    e.view === w && /* @__PURE__ */ g(A, { children: [
      /* @__PURE__ */ h(
        Z,
        {
          symbolizers: [
            n.rules[e.path[e.path.length - 1].indices[0]].symbolizers[e.path[e.path.length - 1].indices[1]]
          ]
        }
      ),
      /* @__PURE__ */ h(
        P,
        {
          symbolizer: n.rules[e.path[e.path.length - 1].indices[0]].symbolizers[e.path[e.path.length - 1].indices[1]],
          onSymbolizerChange: x
        }
      )
    ] }),
    e.view === v && /* @__PURE__ */ h(
      Y,
      {
        filter: n.rules[e.path[e.path.length - 1].indices[0]].filter,
        onFilterChange: F
      }
    ),
    e.view === f && /* @__PURE__ */ h(
      K,
      {
        onRulesChange: S
      }
    ),
    e.view === E && /* @__PURE__ */ h(
      j,
      {
        onStylePropChange: N
      }
    ),
    e.view === b && /* @__PURE__ */ h(
      G,
      {
        onIconSelect: O,
        selectedIconSrc: y()
      }
    )
  ] });
};
export {
  me as CardStyle
};