geostyler/dist/Component/CodeEditor/CodeEditor.js

Framework for styling geodata

import { jsx as s, jsxs as r } from "react/jsx-runtime";
import { useRef as de, useState as p, useMemo as me, useEffect as C, useCallback as pe } from "react";
import { useMonaco as fe, Editor as ue } from "@monaco-editor/react";
import { saveAs as ge } from "file-saver";
/* empty css               */
import { UploadOutlined as he, WarningTwoTone as be, ExclamationCircleTwoTone as ye } from "@ant-design/icons";
import { Select as M, Upload as xe, Button as S, message as Ce } from "antd";
import D from "geostyler-style/schema.json";
import P from "lodash-es/isEqual.js";
import Se from "lodash-es/isString.js";
import { SldStyleParser as J } from "geostyler-sld-parser";
import { SLDUnitsSelect as ve } from "../Symbolizer/SLDUnitsSelect/SLDUnitsSelect.js";
import { usePrevious as B } from "../../hook/UsePrevious.js";
import { ParserFeedback as H } from "../ParserFeedback/ParserFeedback.js";
import { QGISStyleParser as ke } from "geostyler-qgis-parser";
import { MapboxStyleParser as I } from "geostyler-mapbox-parser";
import { useGeoStylerLocale as Fe } from "../../context/GeoStylerContext/GeoStylerContext.js";
const $ = M.Option, G = "geostyler.json", Ne = D.$id, u = (m) => {
  let c = {
    extension: ".txt",
    language: "plaintext",
    mimeType: "text/plain"
  };
  return m instanceof J ? c = {
    extension: ".sld",
    language: "xml",
    mimeType: "text/xml"
  } : m instanceof ke ? c = {
    extension: ".qml",
    language: "xml",
    mimeType: "text/xml"
  } : m instanceof I ? c = {
    extension: ".json",
    language: "json",
    mimeType: "application/json"
  } : m === void 0 && (c = {
    extension: ".json",
    language: "json",
    mimeType: "application/json"
  }), c;
}, Ve = ({
  defaultParser: m,
  delay: c = 500,
  onStyleChange: v = () => {
  },
  onActiveParserChange: V = () => {
  },
  parsers: k = [],
  showUploadButton: W = !1,
  showCopyButton: q = !1,
  showSaveButton: _ = !1,
  style: l
}) => {
  const d = Fe("CodeEditor"), F = de(void 0), [o, z] = p(m), [g, f] = p(""), [n, N] = p(), [a, h] = p(), [T, Q] = p(!1), [K, X] = p(!1), w = B(l), j = B(o), b = fe(), Y = me(() => u(o).extension, [o]);
  C(() => {
    if (n != null && n.output) {
      const t = u(o);
      Se(n.output) ? f(n.output) : t.language === "json" ? f(JSON.stringify(n.output, null, 2)) : f(n.output.toString());
    }
  }, [n, o]), C(() => {
    b && b.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: !0,
      schemas: [{
        uri: Ne,
        fileMatch: [G],
        schema: D
      }]
    });
  }, [b]);
  const y = pe(async (t) => {
    X(!1);
    try {
      o ? N(await o.writeStyle(t)) : f(JSON.stringify(t, null, 2));
    } catch (e) {
      N({
        errors: [e.message]
      });
    }
  }, [o]);
  if (C(() => {
    (!P(w, l) || !P(j, o)) && y(l);
  }, [o, l, y, w, j]), K)
    return /* @__PURE__ */ s("h1", { children: "An error occurred in the CodeEditor UI." });
  const E = async (t) => {
    f(t), h(void 0);
    try {
      let e;
      if (o) {
        let i;
        o instanceof I ? i = await o.readStyle(JSON.parse(t)) : i = await o.readStyle(t), h(i), v(i.output);
      } else
        e = JSON.parse(t), v(e);
    } catch (e) {
      h({
        errors: [e == null ? void 0 : e.message]
      });
    }
  }, Z = (t) => {
    const e = k.find((i) => i.title === t);
    V(e), z(e);
  }, R = (t) => {
    if (o) {
      const e = o;
      e.symbolizerUnits = t, y(l);
    }
  }, ee = (t) => {
    clearTimeout(F.current), F.current = window.setTimeout(
      () => {
        E(t);
      },
      c
    );
  };
  let x = [
    /* @__PURE__ */ s($, { value: "GeoStyler Style", children: "Geostyler Style" }, "GeoStyler Style")
  ];
  const oe = k.map((t) => {
    const e = t.title;
    return /* @__PURE__ */ s($, { value: e, children: e }, e);
  });
  x = [...x, ...oe];
  const te = (t) => {
    const e = new FileReader();
    e.onload = () => {
      const i = e.result;
      E(i);
    }, e.readAsText(t.fileList[0].originFileObj);
  }, ne = () => {
    if (l) {
      const t = u(o);
      let e = l.name;
      e += t.extension;
      const i = `${t.mimeType};charset=utf-8`, le = new Blob([g], { type: i });
      ge(le, e);
    }
  }, se = (t) => {
    const e = document.createElement("textarea");
    e.value = t, e.setAttribute("readonly", ""), e.style.position = "absolute", e.style.left = "-9999px", document.body.appendChild(e);
    const i = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : !1;
    e.select(), document.execCommand("copy"), document.body.removeChild(e), Ce.info(d.styleCopied), i && (document.getSelection().removeAllRanges(), document.getSelection().addRange(i));
  }, ae = () => {
    se(g);
  }, O = () => {
    Q(!T);
  }, ie = o && o instanceof J && o.sldVersion !== "1.0.0", A = (n == null ? void 0 : n.errors) || (n == null ? void 0 : n.warnings) || (n == null ? void 0 : n.unsupportedProperties), L = (a == null ? void 0 : a.errors) || (a == null ? void 0 : a.warnings) || (a == null ? void 0 : a.unsupportedProperties), U = (n == null ? void 0 : n.errors) || (a == null ? void 0 : a.errors), re = L || A && !U, ce = T ? "feedback-visible" : "feedback-hidden";
  return /* @__PURE__ */ r("div", { className: "gs-code-editor", children: [
    /* @__PURE__ */ r("div", { className: "gs-code-editor-toolbar", children: [
      d.formatSelectLabel,
      ": ",
      /* @__PURE__ */ s(
        M,
        {
          className: "gs-code-editor-format-select",
          onSelect: Z,
          value: o ? o.title : "GeoStyler Style",
          children: x
        }
      ),
      ie && /* @__PURE__ */ s(ve, { changeHandler: R }),
      W && /* @__PURE__ */ s(
        xe,
        {
          accept: Y,
          showUploadList: !1,
          maxCount: 1,
          onChange: te,
          children: /* @__PURE__ */ s(
            S,
            {
              className: "gs-code-editor-upload-button",
              icon: /* @__PURE__ */ s(he, {}),
              type: "primary",
              children: d.uploadButtonLabel
            }
          )
        }
      )
    ] }),
    /* @__PURE__ */ s(
      ue,
      {
        className: "gs-code-editor-monaco",
        value: g,
        path: o === void 0 ? G : void 0,
        language: u(o).language,
        onChange: ee
      }
    ),
    /* @__PURE__ */ r("div", { className: `gs-code-editor-feedback ${ce}`, children: [
      A && /* @__PURE__ */ r("div", { className: "write-feedback", children: [
        /* @__PURE__ */ s("span", { children: `${d.writeFeedback} ${o == null ? void 0 : o.title}` }),
        /* @__PURE__ */ s(H, { feedback: n })
      ] }),
      L && /* @__PURE__ */ r("div", { className: "read-feedback", children: [
        /* @__PURE__ */ s("span", { children: `${d.readFeedback} ${o == null ? void 0 : o.title}` }),
        /* @__PURE__ */ s(H, { feedback: a })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: "gs-code-editor-bottombar", children: [
      /* @__PURE__ */ r("div", { className: "left-items", children: [
        U && /* @__PURE__ */ s(be, { twoToneColor: "#ff4d4f", onClick: O }),
        re && /* @__PURE__ */ s(ye, { twoToneColor: "#faad14", onClick: O })
      ] }),
      /* @__PURE__ */ r("div", { className: "center-items", children: [
        q && /* @__PURE__ */ s(
          S,
          {
            className: "gs-code-editor-copy-button",
            type: "primary",
            onClick: ae,
            children: d.copyButtonLabel
          }
        ),
        _ && /* @__PURE__ */ s(
          S,
          {
            className: "gs-code-editor-download-button",
            type: "primary",
            onClick: ne,
            children: d.downloadButtonLabel
          }
        )
      ] }),
      /* @__PURE__ */ s("div", { className: "right-items" })
    ] })
  ] });
};
export {
  Ve as CodeEditor
};