geoiq-frontend-ui-kit/dist/index.es87.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import h, { useRef as E, useEffect as g } from "react";
import { Html as k } from "react-konva-utils";
const H = ({
  textNode: t,
  onClose: r,
  onChange: i,
  bgImagePosition: l,
  bgImageSize: c,
  dimensions: v
}) => {
  const o = E(null);
  return g(() => {
    if (!o.current || !t) return;
    const e = o.current;
    if (!t.getStage()) return;
    const s = t.getAbsoluteScale(), u = Math.min(400, c.width * 0.8), m = l.x + (c.width - u) / 2, w = l.y + 20;
    Object.assign(e.style, {
      position: "fixed",
      top: `${w}px`,
      left: `${m}px`,
      width: `${u}px`,
      minHeight: "60px",
      fontSize: `${t.fontSize() * s.x}px`,
      border: "2px solid black",
      padding: "4px",
      margin: "0px",
      background: t.fill() === "black" ? "#FFB82F" : "white",
      outline: "none",
      resize: "none",
      lineHeight: t.lineHeight().toString(),
      fontFamily: t.fontFamily(),
      textAlign: t.align(),
      color: t.fill(),
      boxSizing: "border-box",
      wordWrap: "break-word",
      whiteSpace: "normal",
      opacity: "10",
      pointerEvents: "auto",
      zIndex: "1000",
      overflow: "hidden",
      transformOrigin: "top center"
    }), e.value = t.text(), e.focus();
    const f = () => {
      e.style.height = "auto";
      const n = Math.max(
        e.scrollHeight,
        t.height() * s.y
      );
      e.style.height = `${n}px`, t.height(n / s.y), t.getLayer()?.batchDraw();
    }, a = (n) => {
      const y = n.target;
      e.contains(y) || (i(e.value), r());
    }, d = (n) => {
      if ((n.ctrlKey || n.metaKey) && n.key === "Enter") {
        n.preventDefault(), i(e.value), r();
        return;
      }
      if (n.key === "Escape") {
        n.preventDefault(), r();
        return;
      }
      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), document.execCommand("insertLineBreak"));
    }, p = () => {
      i(e.value), r();
    };
    return e.addEventListener("keydown", d), e.addEventListener("input", f), e.addEventListener("blur", p), setTimeout(() => {
      window.addEventListener("click", a), window.addEventListener("touchend", a);
    }), () => {
      e.removeEventListener("keydown", d), e.removeEventListener("input", f), e.removeEventListener("blur", p), window.removeEventListener("click", a), window.removeEventListener("touchend", a);
    };
  }, [t, r, i, l, c, v]), /* @__PURE__ */ h.createElement(k, null, t && /* @__PURE__ */ h.createElement("textarea", { ref: o }));
};
export {
  H as default
};
//# sourceMappingURL=index.es87.js.map