geostyler/dist/Component/Renderer/OlRenderer/OlRenderer.js

Framework for styling geodata

import { jsx as a } from "react/jsx-runtime";
import { useRef as s, useState as L, useCallback as w, useEffect as m } from "react";
import T from "ol/Map";
import P from "ol/layer/Vector";
import b from "ol/source/Vector";
import y from "ol/geom/Point";
import z from "ol/geom/LineString";
import E from "ol/geom/Polygon";
import M from "ol/Feature";
import R from "ol/View";
import { OlStyleParser as V } from "geostyler-openlayers-parser";
import { isGeoStylerFunction as W } from "geostyler-style";
/* empty css               */
import "ol/ol.css";
import j from "lodash-es/get.js";
import u from "./placeholder.js";
import { InfoCircleTwoTone as N } from "@ant-design/icons";
import { Tooltip as Z } from "antd";
import { useGeoStylerLocale as _ } from "../../../context/GeoStylerContext/GeoStylerContext.js";
const ce = ({
  onClick: f,
  symbolizerKind: p,
  symbolizers: t
}) => {
  const o = s(void 0), n = s(null), r = s(void 0), [h, O] = L(!1), v = _("Renderer"), d = w(() => {
    switch (p || j(t, "[0].kind")) {
      case "Mark":
      case "Icon":
      case "Text":
        return new y([7, 50]);
      case "Fill":
        return new E([[
          [7, 50],
          [8, 51],
          [9, 51],
          [10, 50],
          [9, 49],
          [8, 48],
          [7, 48],
          [6, 49],
          [6, 50],
          [7, 50]
        ]]);
      case "Line":
        return new z([
          [7, 50],
          [8, 50],
          [8.4, 50.75],
          [9, 49],
          [9.5, 52],
          [10, 49.5],
          [10.2, 50],
          [12, 50]
        ]);
      default:
        return new y([7.10066, 50.735851]);
    }
  }, [p, t]), F = w(() => {
    r.current.getSource().clear();
    const e = new M({
      geometry: d(),
      Name: "Sample Feature"
    });
    r.current.getSource().addFeature(e);
    const l = r.current.getSource().getExtent();
    o.current.getView().fit(l, {
      maxZoom: 20,
      padding: [10, 10, 10, 10]
    });
  }, [d]);
  m(() => {
    if (n.current)
      return r.current = new P({
        source: new b()
      }), o.current = new T({
        layers: [r.current],
        controls: [],
        interactions: [],
        target: n.current,
        view: new R({
          projection: "EPSG:4326"
        })
      }), () => {
        o.current && o.current.setTarget(void 0);
      };
  }, [n]), m(() => {
    F();
  }, [F]), m(() => {
    x(t);
  }, [t]);
  const x = async (e) => {
    if (!e)
      return;
    const l = new V();
    let i = structuredClone(e), g = !1;
    for (const k of e)
      for (const C of Object.values(k))
        if (W(C)) {
          g = !0;
          const c = k.kind;
          ["Mark", "Icon", "Text"].includes(c) && (i = [{
            kind: "Mark",
            wellKnownName: "circle",
            strokeColor: "#000000",
            strokeWidth: 2,
            color: "#FFFFFF",
            radius: 20
          }, {
            kind: "Icon",
            image: u,
            size: 24,
            offset: [24, -24]
          }]), c === "Fill" && (i = [{
            kind: "Fill",
            outlineColor: "#000000",
            outlineWidth: 2,
            graphicFill: {
              kind: "Icon",
              image: u,
              size: 24
            }
          }]), c === "Line" && (i = [{
            kind: "Line",
            width: 2
          }, {
            kind: "Icon",
            image: u,
            size: 24
          }]);
          break;
        }
    O(g);
    const G = {
      name: "WrapperStyle4Symbolizer",
      rules: [{
        name: "WrapperRule4Symbolizer",
        symbolizers: i
      }]
    }, { output: S, errors: I = [] } = await l.writeStyle(G);
    if (!(I.length > 0))
      return r.current.setStyle(S), S;
  };
  return /* @__PURE__ */ a(
    "div",
    {
      ref: n,
      className: "gs-symbolizer-olrenderer",
      role: "presentation",
      onClick: (e) => {
        f && f(t, e);
      },
      children: h && /* @__PURE__ */ a(Z, { title: v.placeholderInfo, children: /* @__PURE__ */ a(N, {}) })
    }
  );
};
export {
  ce as OlRenderer
};