geoiq-frontend-ui-kit/dist/index148.es.js

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

import { ImageUp as x, Loader2 as d } from "lucide-react";
import e, { forwardRef as E } from "react";
import { cn as g } from "./index88.es.js";
const v = {
  backgroundImage: "linear-gradient(45deg,#e2e0d9 25%,transparent 25%),linear-gradient(-45deg,#e2e0d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e0d9 75%),linear-gradient(-45deg,transparent 75%,#e2e0d9 75%)",
  backgroundSize: "22px 22px",
  backgroundPosition: "0 0, 0 11px, 11px -11px, -11px 0",
  backgroundColor: "#eceae4"
}, R = E(function({ ui: t, onChooseImage: f, onDropFile: p }, u) {
  const l = e.useRef(null), s = e.useRef(null), o = e.useRef(null), c = e.useRef(null), r = e.useRef(null);
  return e.useImperativeHandle(u, () => ({
    stage: l.current,
    cwrap: s.current,
    canvas: o.current,
    overlay: c.current,
    textEditor: r.current
  })), e.useEffect(() => {
    if (!t.isEditingText) return;
    const a = r.current;
    if (!a) return;
    let n = 0, i = 0;
    const m = () => {
      document.activeElement !== a && (a.focus(), t.editingSelectAll && a.select()), n += 1, n < 3 && (i = requestAnimationFrame(m));
    };
    return m(), () => cancelAnimationFrame(i);
  }, [t.isEditingText, t.editingSelectAll]), /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: l,
      className: "relative flex flex-1 touch-none overflow-auto overscroll-contain",
      style: v,
      onDragOver: (a) => a.preventDefault(),
      onDragEnter: (a) => a.preventDefault(),
      onDrop: (a) => {
        if (a.preventDefault(), !t.canOpenImage) return;
        const n = a.dataTransfer.files[0];
        n && n.type.startsWith("image/") && p(n);
      }
    },
    !t.hasImage && !t.isLoadingImage && t.canOpenImage && /* @__PURE__ */ e.createElement("div", { className: "m-auto max-w-[340px] px-8 text-center text-light-4" }, /* @__PURE__ */ e.createElement(x, { className: "mx-auto mb-3 h-14 w-14 stroke-[1.2]" }), /* @__PURE__ */ e.createElement("h2", { className: "mb-2 text-lg font-semibold text-light-2" }, "Drop a picture in"), /* @__PURE__ */ e.createElement("p", { className: "text-sm leading-relaxed" }, "Open an image to crop, filter, rotate, and annotate. Text, shapes, and drawings become movable layers."), /* @__PURE__ */ e.createElement(
      "button",
      {
        type: "button",
        onClick: f,
        className: "mt-4 inline-block rounded-lg bg-rest-p1 px-5 py-2 text-sm text-white hover:bg-hover-p1"
      },
      "Choose an image"
    )),
    !t.hasImage && t.isLoadingImage && /* @__PURE__ */ e.createElement("div", { className: "m-auto flex flex-col items-center gap-3 text-light-4" }, /* @__PURE__ */ e.createElement(d, { className: "h-10 w-10 animate-spin" }), /* @__PURE__ */ e.createElement("p", { className: "text-sm" }, "Loading image…")),
    /* @__PURE__ */ e.createElement(
      "div",
      {
        ref: s,
        className: g(
          "relative m-auto bg-white shadow-lg",
          !t.hasImage && "hidden"
        )
      },
      /* @__PURE__ */ e.createElement("canvas", { ref: o, className: "image-editor-canvas block" }),
      /* @__PURE__ */ e.createElement(
        "canvas",
        {
          ref: c,
          className: "image-editor-canvas absolute inset-0"
        }
      ),
      /* @__PURE__ */ e.createElement(
        "textarea",
        {
          ref: r,
          rows: 1,
          className: g(
            "absolute z-30 resize-none overflow-hidden rounded-md border border-rest-p1 bg-white px-1.5 py-1 leading-[1.1] shadow-lg outline-none",
            !t.isEditingText && "hidden"
          )
        }
      ),
      t.isLoadingImage && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-40 flex flex-col items-center justify-center gap-3 bg-white text-light-4" }, /* @__PURE__ */ e.createElement(d, { className: "h-10 w-10 animate-spin" }), /* @__PURE__ */ e.createElement("p", { className: "text-sm" }, "Loading image…"))
    )
  );
});
export {
  R as Stage
};
//# sourceMappingURL=index148.es.js.map