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

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

import { supportsContextFilter as k } from "./index162.es.js";
import { FILTER_CSS as T } from "./index150.es.js";
function C(t) {
  const { adj: e } = t;
  let n = `brightness(${e.brightness}%) contrast(${e.contrast}%) saturate(${e.saturate}%) sepia(${e.sepia}%) blur(${e.blur}px) hue-rotate(${e.hue}deg)`;
  return e.filter !== "none" && (n += " " + T[e.filter]), n.trim();
}
const R = 0.25, A = 4, m = 1.25;
function v(t) {
  const n = Math.min(
    (t.stageEl.clientWidth - 48) / t.sourceCanvas.width,
    (t.stageEl.clientHeight - 48) / t.sourceCanvas.height,
    1
  );
  t.fitScale = n;
  const o = n * t.zoom;
  t.viewScale = o;
  const a = Math.round(t.sourceCanvas.width * o), r = Math.round(t.sourceCanvas.height * o);
  t.canvasEl.style.width = t.overlayEl.style.width = a + "px", t.canvasEl.style.height = t.overlayEl.style.height = r + "px";
}
function u(t, e) {
  if (t.zoom = Math.min(A, Math.max(R, e)), !t.mounted || !t.sourceCanvas.width) {
    t.notify();
    return;
  }
  v(t), I(t), t.notify();
}
function J(t) {
  u(t, t.zoom * m);
}
function V(t) {
  u(t, t.zoom / m);
}
function j(t) {
  u(t, 1);
}
function q(t) {
  t.canvasEl.width = t.overlayEl.width = t.sourceCanvas.width, t.canvasEl.height = t.overlayEl.height = t.sourceCanvas.height, v(t);
}
function H(t) {
  const { ctx: e, canvasEl: n, sourceCanvas: o } = t;
  e.clearRect(0, 0, n.width, n.height);
  const a = C(t);
  if (k()) {
    n.style.filter = "", e.filter = a, e.drawImage(o, 0, 0), e.filter = "none";
    return;
  }
  n.style.filter = a, e.drawImage(o, 0, 0);
}
function U(t) {
  !t.mounted || !t.sourceCanvas.width || (H(t), I(t));
}
const g = 1.1;
function S(t, e) {
  t.octx.font = `${e.size}px ${e.font}`;
  const n = Math.max(e.boxWidth, 1), o = [];
  return e.text.split(`
`).forEach((a) => {
    const r = a.split(" ");
    let i = "";
    r.forEach((h) => {
      const s = i ? i + " " + h : h;
      i && t.octx.measureText(s).width > n ? (o.push(i), i = h) : i = s;
    }), o.push(i);
  }), o;
}
function c(t, e) {
  if (e.type === "text") {
    const n = S(t, e);
    return {
      x: e.x,
      y: e.y,
      w: e.boxWidth,
      h: n.length * e.size * g
    };
  }
  if (e.type === "shape" || e.type === "sticker")
    return {
      x: Math.min(e.x, e.x + e.w),
      y: Math.min(e.y, e.y + e.h),
      w: Math.abs(e.w),
      h: Math.abs(e.h)
    };
  if (e.type === "stroke") {
    let n = 1 / 0, o = 1 / 0, a = -1 / 0, r = -1 / 0;
    e.points.forEach((h) => {
      n = Math.min(n, h.x), o = Math.min(o, h.y), a = Math.max(a, h.x), r = Math.max(r, h.y);
    });
    const i = e.width / 2;
    return { x: n - i, y: o - i, w: a - n + i * 2, h: r - o + i * 2 };
  }
  return { x: 0, y: 0, w: 0, h: 0 };
}
function K(t, e) {
  if (e.type !== "text") return;
  const n = t.sourceCanvas.height - e.y;
  for (; e.size > 10 && c(t, e).h > n && n > 0; )
    e.size -= 1;
}
function Q(t, e) {
  if (e.type !== "text") return;
  const n = t.sourceCanvas.width - e.x;
  e.boxWidth = Math.round(Math.max(20, Math.min(e.boxWidth, n)));
}
function E(t) {
  return [
    { corner: "tl", x: t.x, y: t.y },
    { corner: "tr", x: t.x + t.w, y: t.y },
    { corner: "bl", x: t.x, y: t.y + t.h },
    { corner: "br", x: t.x + t.w, y: t.y + t.h }
  ];
}
const w = [
  "line",
  "dashedLine",
  "arrow",
  "dashedArrow",
  "doubleArrow",
  "dashedDoubleArrow"
], z = ["dashedLine", "dashedArrow", "dashedDoubleArrow"], D = {
  arrow: ["end"],
  dashedArrow: ["end"],
  doubleArrow: ["end", "start"],
  dashedDoubleArrow: ["end", "start"]
};
function W(t) {
  const e = Math.max(1, t || 1);
  return [Math.max(6, e * 2.5), Math.max(4, e * 1.75)];
}
function M(t, e, n, o, a) {
  t.beginPath(), t.moveTo(e, n), t.lineTo(
    e - a * Math.cos(o - Math.PI / 6),
    n - a * Math.sin(o - Math.PI / 6)
  ), t.moveTo(e, n), t.lineTo(
    e - a * Math.cos(o + Math.PI / 6),
    n - a * Math.sin(o + Math.PI / 6)
  ), t.stroke();
}
const _ = 26, O = 6;
function y(t, e) {
  const n = c(t, e);
  return { x: n.x + n.w / 2, y: n.y + n.h / 2 };
}
function d(t, e, n) {
  if (!n) return { x: t.x, y: t.y };
  const o = n * Math.PI / 180, a = Math.cos(o), r = Math.sin(o), i = t.x - e.x, h = t.y - e.y;
  return { x: e.x + i * a - h * r, y: e.y + i * r + h * a };
}
function X(t, e, n, o) {
  const a = e.rotation || 0;
  if (!a) {
    o();
    return;
  }
  const r = d(n, y(t, e), a);
  o();
  const i = d(n, y(t, e), a);
  e.x += r.x - i.x, e.y += r.y - i.y;
}
function $(t, e, n) {
  return d(n, y(t, e), -(e.rotation || 0));
}
function b(t, e) {
  const n = c(t, e);
  return {
    x: n.x + n.w / 2,
    y: n.y + n.h + _ / t.viewScale
  };
}
function N(t, e) {
  const n = b(t, e);
  return d(n, y(t, e), e.rotation || 0);
}
function Y(t, e, n) {
  const o = N(t, n);
  return Math.hypot(e.x - o.x, e.y - o.y) <= 14 / t.viewScale;
}
function L(t, e, n) {
  if (n.type === "stroke") return null;
  const o = 12 / t.viewScale, a = $(t, n, e);
  if (n.type === "shape" && w.includes(n.shape)) {
    const s = [
      { corner: "start", x: n.x, y: n.y },
      { corner: "end", x: n.x + n.w, y: n.y + n.h }
    ].find(
      (l) => Math.abs(a.x - l.x) < o && Math.abs(a.y - l.y) < o
    );
    return s ? s.corner : null;
  }
  const r = c(t, n), i = E(r).find(
    (h) => Math.abs(a.x - h.x) < o && Math.abs(a.y - h.y) < o
  );
  return i ? i.corner : null;
}
function p(t, e, n) {
  if (!n._editing) {
    if (e.save(), n.type !== "stroke" || n.rotation) {
      const o = c(t, n), a = o.x + o.w / 2, r = o.y + o.h / 2;
      e.translate(a, r), n.rotation && e.rotate(n.rotation * Math.PI / 180), (n.flipH || n.flipV) && e.scale(n.flipH ? -1 : 1, n.flipV ? -1 : 1), e.translate(-a, -r);
    }
    if (n.type === "text") {
      e.font = `${n.size}px ${n.font}`, e.fillStyle = n.color, e.textBaseline = "top", e.shadowColor = "rgba(0,0,0,.22)", e.shadowBlur = n.size * 0.05, e.shadowOffsetY = n.size * 0.02;
      const o = n.size * g;
      S(t, n).forEach((a, r) => {
        e.fillText(a, n.x, n.y + r * o);
      });
    } else if (n.type === "shape") {
      e.strokeStyle = n.color, e.fillStyle = n.color, e.lineWidth = n.width, e.lineCap = "round", e.lineJoin = "round";
      const o = n.x, a = n.y, r = n.w, i = n.h;
      if (n.shape === "rect")
        n.fill === "fill" ? e.fillRect(o, a, r, i) : e.strokeRect(o, a, r, i);
      else if (n.shape === "ellipse")
        e.beginPath(), e.ellipse(
          o + r / 2,
          a + i / 2,
          Math.abs(r / 2),
          Math.abs(i / 2),
          0,
          0,
          Math.PI * 2
        ), n.fill === "fill" ? e.fill() : e.stroke();
      else if (n.shape === "circle") {
        const h = Math.min(Math.abs(r), Math.abs(i)) / 2;
        e.beginPath(), e.arc(o + r / 2, a + i / 2, h, 0, Math.PI * 2), n.fill === "fill" ? e.fill() : e.stroke();
      } else if (w.includes(n.shape)) {
        const h = o + r, s = a + i, l = z.includes(n.shape);
        l && (e.lineCap = "butt", e.setLineDash(W(n.width))), e.beginPath(), e.moveTo(o, a), e.lineTo(h, s), e.stroke(), l && (e.setLineDash([]), e.lineCap = "round");
        const x = Math.atan2(i, r), f = Math.max(14, n.width * 3);
        (D[n.shape] || []).forEach((P) => {
          P === "end" ? M(e, h, s, x, f) : M(e, o, a, x + Math.PI, f);
        });
      }
    } else if (n.type === "stroke")
      e.strokeStyle = n.color, e.lineWidth = n.width, e.lineCap = "round", e.lineJoin = "round", e.globalAlpha = n.style === "highlight" ? 0.35 : 1, e.beginPath(), n.points.forEach(
        (o, a) => a === 0 ? e.moveTo(o.x, o.y) : e.lineTo(o.x, o.y)
      ), n.points.length === 1 && e.lineTo(n.points[0].x + 0.1, n.points[0].y + 0.1), e.stroke();
    else if (n.type === "sticker") {
      const o = t.stickerImageCache.get(n.src);
      o && o.complete && o.naturalWidth && e.drawImage(o, n.x, n.y, n.w, n.h);
    }
    e.restore();
  }
}
function B(t) {
  return {
    x: Math.min(t.x, t.x + t.w),
    y: Math.min(t.y, t.y + t.h),
    w: Math.abs(t.w),
    h: Math.abs(t.h)
  };
}
function F(t) {
  const { cropRect: e, overlayEl: n, octx: o, sourceCanvas: a } = t;
  if (!e) return;
  const r = B(e), i = n.width, h = n.height;
  o.save(), o.fillStyle = "rgba(0,0,0,.45)", o.fillRect(0, 0, i, Math.max(0, r.y)), o.fillRect(0, Math.min(h, r.y + r.h), i, Math.max(0, h - (r.y + r.h))), o.fillRect(0, r.y, Math.max(0, r.x), r.h), o.fillRect(Math.min(i, r.x + r.w), r.y, Math.max(0, i - (r.x + r.w)), r.h), o.strokeStyle = "#fff", o.lineWidth = Math.max(1, a.width / 500), o.setLineDash([8, 6]), o.strokeRect(r.x, r.y, r.w, r.h), o.restore();
}
function I(t) {
  const { octx: e, overlayEl: n, layers: o, mode: a, selectedId: r } = t;
  if (e.clearRect(0, 0, n.width, n.height), o.forEach((i) => {
    try {
      p(t, e, i);
    } catch (h) {
      console.error("[image-editor] failed to paint layer", i.id, i.type, h);
    }
  }), a === "select" && r != null) {
    const i = o.find((h) => h.id === r);
    if (i) {
      const h = c(t, i);
      if (e.save(), i.rotation) {
        const l = y(t, i);
        e.translate(l.x, l.y), e.rotate(i.rotation * Math.PI / 180), e.translate(-l.x, -l.y);
      }
      if (e.strokeStyle = "#2f5fd2", e.lineWidth = Math.max(1.2, 1.5 / t.viewScale), e.setLineDash([6 / t.viewScale, 4 / t.viewScale]), e.strokeRect(h.x - 4, h.y - 4, h.w + 8, h.h + 8), e.setLineDash([]), i.type !== "stroke") {
        const l = 9 / t.viewScale;
        e.fillStyle = "#fff", e.strokeStyle = "#2f5fd2", (i.type === "shape" && w.includes(i.shape) ? [
          { x: i.x, y: i.y },
          { x: i.x + i.w, y: i.y + i.h }
        ] : E(h)).forEach((f) => {
          e.fillRect(f.x - l / 2, f.y - l / 2, l, l), e.strokeRect(f.x - l / 2, f.y - l / 2, l, l);
        });
      }
      const s = b(t, i);
      e.strokeStyle = "#2f5fd2", e.fillStyle = "#fff", e.beginPath(), e.moveTo(s.x, h.y + h.h + 4), e.lineTo(s.x, s.y), e.stroke(), e.beginPath(), e.arc(
        s.x,
        s.y,
        O / t.viewScale,
        0,
        Math.PI * 2
      ), e.fill(), e.stroke(), e.restore();
    }
  }
  t.pendingShape && p(t, e, t.pendingShape), a === "crop" && t.cropRect && F(t);
}
export {
  w as DIRECTIONAL_SHAPES,
  g as TEXT_LINE_HEIGHT,
  A as ZOOM_MAX,
  R as ZOOM_MIN,
  u as applyZoom,
  C as baseFilter,
  Q as clampBoxWidth,
  K as clampTextSize,
  E as cornerPoints,
  F as drawCropOverlay,
  v as fitStage,
  X as keepingFixed,
  c as layerBounds,
  y as layerCenter,
  B as normRect,
  L as onResizeHandle,
  Y as onRotateHandle,
  p as paintLayer,
  U as render,
  H as renderBase,
  I as renderOverlay,
  d as rotatePoint,
  q as syncCanvasSize,
  $ as toLayerSpace,
  S as wrapTextLines,
  J as zoomIn,
  V as zoomOut,
  j as zoomToFit
};
//# sourceMappingURL=index152.es.js.map