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

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

import { pushHistory as x } from "./index153.es.js";
import { emitChange as v } from "./index151.es.js";
import { onRotateHandle as I, layerCenter as a, onResizeHandle as C, DIRECTIONAL_SHAPES as S, layerBounds as w, rotatePoint as M, clampBoxWidth as E, clampTextSize as b, renderOverlay as p, paintLayer as z, render as s, normRect as k, toLayerSpace as P } from "./index152.es.js";
import { selectLayer as g, setMode as R } from "./index155.es.js";
import { openTextEditor as O } from "./index156.es.js";
function f(r, l) {
  const e = r.dragMode && r.dragRect ? r.dragRect : r.overlayEl.getBoundingClientRect(), o = (l.clientX - e.left) / e.width * r.sourceCanvas.width, n = (l.clientY - e.top) / e.height * r.sourceCanvas.height;
  return {
    x: Math.min(Math.max(o, 0), r.sourceCanvas.width),
    y: Math.min(Math.max(n, 0), r.sourceCanvas.height)
  };
}
function A(r, l) {
  if (!l) return r;
  const e = l * Math.PI / 180, o = Math.abs(Math.cos(e)), n = Math.abs(Math.sin(e)), d = r.w * o + r.h * n, i = r.w * n + r.h * o, c = r.x + r.w / 2, h = r.y + r.h / 2;
  return { x: c - d / 2, y: h - i / 2, w: d, h: i };
}
function W(r) {
  return r.type !== "shape" ? 0 : S.includes(r.shape) || r.fill !== "fill" ? (r.width || 0) / 2 : 0;
}
function T(r, l) {
  const e = A(w(r, l), l.rotation), o = W(l), n = {
    x: e.x - o,
    y: e.y - o,
    w: e.w + o * 2,
    h: e.h + o * 2
  }, d = Math.min(Math.max(n.x, 0), r.sourceCanvas.width - n.w) - n.x, i = Math.min(Math.max(n.y, 0), r.sourceCanvas.height - n.h) - n.y;
  !d && !i || (l.type === "stroke" ? l.points = l.points.map((c) => ({ x: c.x + d, y: c.y + i })) : (l.x += d, l.y += i));
}
function u(r, l) {
  const { layers: e } = r;
  for (let o = e.length - 1; o >= 0; o--) {
    const n = w(r, e[o]), d = P(r, e[o], l);
    if (d.x >= n.x - 6 && d.x <= n.x + n.w + 6 && d.y >= n.y - 6 && d.y <= n.y + n.h + 6)
      return e[o];
  }
  return null;
}
function F(r, l) {
  if (!r.sourceCanvas.width || r.dragMode) return;
  r.overlayEl.setPointerCapture(l.pointerId), r.activePointerId = l.pointerId, r.dragRect = r.overlayEl.getBoundingClientRect();
  const e = f(r, l);
  if (r.mode === "select") {
    const o = r.selectedId != null ? r.layers.find((i) => i.id === r.selectedId) : null;
    if (o && I(r, e, o)) {
      const i = a(r, o);
      r.dragMode = "rotate", r.rotateStart = {
        center: i,
        angle: Math.atan2(e.y - i.y, e.x - i.x),
        rotation: o.rotation || 0
      }, x(r);
      return;
    }
    const n = o ? C(r, e, o) : null;
    if (n) {
      if (r.dragMode = "resize", r.resizeCorner = n, r.dragStart = e, r.dragOrig = JSON.parse(JSON.stringify(o)), o.type === "shape" && S.includes(o.shape))
        r.resizeAnchor = n === "start" ? { x: o.x + o.w, y: o.y + o.h } : { x: o.x, y: o.y };
      else {
        const i = w(r, o), c = n === "tl" || n === "bl";
        r.resizeAnchor = {
          x: c ? i.x + i.w : i.x,
          // Text keeps its top edge: its height follows the wrapping.
          y: o.type === "text" ? i.y : n === "tl" || n === "tr" ? i.y + i.h : i.y
        };
      }
      r.resizeCenter = a(r, o), r.resizeAnchorWorld = M(
        r.resizeAnchor,
        r.resizeCenter,
        o.rotation || 0
      ), x(r);
      return;
    }
    const d = u(r, e);
    d ? (g(r, d.id), r.dragMode = "move", r.dragStart = e, r.dragOrig = JSON.parse(JSON.stringify(d)), x(r)) : g(r, null);
  } else if (r.mode === "text") {
    x(r);
    const o = {
      id: r.nextId++,
      type: "text",
      text: "Text",
      x: e.x,
      y: e.y,
      size: r.textSize,
      font: r.textFont,
      color: r.textColor,
      rotation: 0,
      flipH: !1,
      flipV: !1,
      boxWidth: 10
    };
    r.octx.font = `${o.size}px ${o.font}`;
    const n = r.octx.measureText(o.text).width;
    o.boxWidth = Math.round(Math.max(700, n + 40)), E(r, o), b(r, o), r.layers.push(o), R(r, "select"), g(r, o.id), O(r, o, !0);
  } else r.mode === "draw" ? (x(r), r.pendingStroke = {
    id: r.nextId++,
    type: "stroke",
    color: r.drawColor,
    width: r.brushSize,
    style: r.brushStyle,
    points: [e]
  }, r.dragMode = "draw") : r.mode === "shape" ? (x(r), r.pendingShape = {
    id: r.nextId++,
    type: "shape",
    shape: r.selectedShapeType,
    fill: r.shapeFill,
    width: r.shapeWidth,
    color: r.shapeColor,
    x: e.x,
    y: e.y,
    w: 0,
    h: 0,
    rotation: 0,
    flipH: !1,
    flipV: !1
  }, r.dragMode = "newshape", r.dragStart = e) : r.mode === "crop" && (r.dragMode = "crop", r.cropStart = e, r.cropRect = { x: e.x, y: e.y, w: 0, h: 0 });
}
function _(r, l) {
  if (r.dragMode && r.activePointerId != null && l.pointerId !== r.activePointerId)
    return;
  if (!r.dragMode) {
    if (r.mode === "select") {
      const o = f(r, l), n = r.selectedId != null ? r.layers.find((i) => i.id === r.selectedId) : null, d = n ? C(r, o, n) : null;
      n && I(r, o, n) ? r.overlayEl.style.cursor = "grab" : d === "start" || d === "end" ? r.overlayEl.style.cursor = n.w >= 0 == n.h >= 0 ? "nwse-resize" : "nesw-resize" : d ? r.overlayEl.style.cursor = d === "tl" || d === "br" ? "nwse-resize" : "nesw-resize" : n && u(r, o) === n ? r.overlayEl.style.cursor = "move" : u(r, o) ? r.overlayEl.style.cursor = "pointer" : r.overlayEl.style.cursor = "default";
    }
    return;
  }
  const e = f(r, l);
  if (r.dragMode === "move") {
    const o = e.x - r.dragStart.x, n = e.y - r.dragStart.y, d = r.layers.find((i) => i.id === r.selectedId);
    d.type === "text" || d.type === "shape" || d.type === "sticker" ? (d.x = r.dragOrig.x + o, d.y = r.dragOrig.y + n) : d.type === "stroke" && (d.points = r.dragOrig.points.map((i) => ({
      x: i.x + o,
      y: i.y + n
    }))), T(r, d), p(r);
  } else if (r.dragMode === "resize") {
    const o = r.layers.find((i) => i.id === r.selectedId), n = o.rotation || 0, d = n ? M(e, r.resizeCenter, -n) : e;
    if (o.type === "text") {
      const i = r.resizeCorner === "tl" || r.resizeCorner === "bl";
      if (o.y = r.dragOrig.y, o.size = r.dragOrig.size, i) {
        const c = r.dragOrig.x + r.dragOrig.boxWidth;
        o.boxWidth = Math.max(20, c - d.x), o.x = c - o.boxWidth;
      } else
        o.x = r.dragOrig.x, o.boxWidth = Math.max(20, d.x - r.dragOrig.x);
      E(r, o), b(r, o), r.notify();
    } else if (o.type === "shape" && S.includes(o.shape)) {
      const i = r.resizeAnchor, c = 8;
      let h = d.x - i.x, y = d.y - i.y;
      if (Math.hypot(h, y) < c) {
        const m = Math.atan2(y || 1, h || 1);
        h = c * Math.cos(m), y = c * Math.sin(m);
      }
      r.resizeCorner === "start" ? (o.x = i.x + h, o.y = i.y + y, o.w = -h, o.h = -y) : (o.x = i.x, o.y = i.y, o.w = h, o.h = y);
    } else if (o.type === "shape" || o.type === "sticker") {
      const i = r.resizeAnchor, c = 8;
      let h = d.x - i.x, y = d.y - i.y;
      Math.abs(h) < c && (h = i.x + c <= r.sourceCanvas.width ? c : -c), Math.abs(y) < c && (y = i.y + c <= r.sourceCanvas.height ? c : -c), o.x = Math.min(i.x, i.x + h), o.y = Math.min(i.y, i.y + y), o.w = Math.abs(h), o.h = Math.abs(y);
    }
    if (n) {
      const i = M(r.resizeAnchor, a(r, o), n);
      o.x += r.resizeAnchorWorld.x - i.x, o.y += r.resizeAnchorWorld.y - i.y;
    }
    p(r);
  } else if (r.dragMode === "rotate") {
    const o = r.layers.find((y) => y.id === r.selectedId), { center: n, angle: d, rotation: i } = r.rotateStart, c = Math.atan2(e.y - n.y, e.x - n.x) - d, h = i + c * 180 / Math.PI;
    o.rotation = (h % 360 + 360) % 360, p(r);
  } else if (r.dragMode === "draw")
    r.pendingStroke.points.push(e), r.octx.clearRect(0, 0, r.overlayEl.width, r.overlayEl.height), r.layers.forEach((o) => z(r, r.octx, o)), z(r, r.octx, r.pendingStroke);
  else if (r.dragMode === "newshape")
    r.pendingShape.w = e.x - r.dragStart.x, r.pendingShape.h = e.y - r.dragStart.y, p(r);
  else if (r.dragMode === "crop") {
    let o = e.x - r.cropStart.x, n = e.y - r.cropStart.y;
    if (r.cropRatio !== "free") {
      const d = parseFloat(r.cropRatio);
      n = Math.sign(n || 1) * Math.abs(o) / d;
      const i = n >= 0 ? r.sourceCanvas.height - r.cropStart.y : r.cropStart.y;
      Math.abs(n) > i && (n = Math.sign(n) * i, o = Math.sign(o || 1) * Math.abs(n) * d);
    }
    r.cropRect = { x: r.cropStart.x, y: r.cropStart.y, w: o, h: n }, p(r);
  }
}
function $(r, l) {
  if (!(l && r.dragMode && r.activePointerId != null && l.pointerId !== r.activePointerId)) {
    if (r.dragMode === "draw" && r.pendingStroke)
      r.pendingStroke.points.length >= 1 && (r.layers.push(r.pendingStroke), g(r, r.pendingStroke.id)), r.pendingStroke = null, s(r), r.statusText = "Stroke added", v(r);
    else if (r.dragMode === "newshape" && r.pendingShape)
      if (Math.abs(r.pendingShape.w) > 3 || Math.abs(r.pendingShape.h) > 3) {
        r.layers.push(r.pendingShape);
        const e = r.pendingShape.id;
        r.pendingShape = null, R(r, "select"), g(r, e), r.statusText = "Shape added", v(r);
      } else
        r.pendingShape = null, p(r), r.notify();
    else if (r.dragMode === "crop")
      r.cropRect && (r.cropRect = k(r.cropRect)), p(r), r.notify();
    else if (r.dragMode === "move" || r.dragMode === "resize" || r.dragMode === "rotate") {
      if (r.dragMode === "rotate") {
        const e = r.layers.find((o) => o.id === r.selectedId);
        e && (r.statusText = `Rotated to ${Math.round(e.rotation)}°`);
      }
      s(r), r.notify();
    }
    r.activePointerId != null && (r.overlayEl.hasPointerCapture(r.activePointerId) && r.overlayEl.releasePointerCapture(r.activePointerId), r.activePointerId = null), r.dragMode = null, r.dragStart = null, r.dragOrig = null, r.dragRect = null, r.resizeAnchor = null, r.resizeCenter = null, r.resizeAnchorWorld = null, r.rotateStart = null;
  }
}
function q(r, l) {
  if (r.mode !== "select") return;
  const e = f(r, l), o = u(r, e);
  o && o.type === "text" && (g(r, o.id), O(r, o, !1));
}
export {
  u as hitLayer,
  q as onDbl,
  F as onDown,
  _ as onMove,
  $ as onUp,
  f as toSource
};
//# sourceMappingURL=index163.es.js.map