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

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

import { useState as q, useCallback as D } from "react";
const j = ({
  editorState: s,
  setEditorState: w,
  canvasElements: M,
  setCanvasElements: c,
  backgroundState: L,
  getRotatedPointerPosition: g,
  isPointInImage: a,
  selectImage: F,
  saveStateToHistory: d
}) => {
  const [x, z] = q("#FFB82F"), [b, N] = q(!1), T = D(
    (e) => {
      const t = e.target.getStage(), o = t?.getPointerPosition();
      if (!t || !o) return;
      if (s.isEraseMode) {
        const n = g(o);
        c((h) => {
          const u = h.lines.filter((f) => !f.points.some((p, l) => {
            if (l % 2 === 0) {
              const y = f.points[l], k = f.points[l + 1];
              return Math.sqrt(
                Math.pow(n.x - y, 2) + Math.pow(n.y - k, 2)
              ) < 10;
            }
            return !1;
          }));
          return { ...h, lines: u };
        });
        return;
      }
      if (!s.isDrawingMode || !M.bgImage || s.isEditingText)
        return;
      const i = g(o);
      if (!a(i.x, i.y)) return;
      w((n) => ({ ...n, drawing: !0 }));
      const r = {
        points: [i.x, i.y],
        stroke: x,
        strokeWidth: Math.max(3, L.bgImageSize.width * 5e-3),
        id: Math.random().toString(36).substring(2, 9)
      };
      c((n) => ({
        ...n,
        lines: [...n.lines, r]
      })), F(null);
    },
    [
      s.isEraseMode,
      s.isDrawingMode,
      s.isEditingText,
      M.bgImage,
      g,
      a,
      w,
      x,
      L.bgImageSize.width,
      c,
      F
    ]
  ), _ = D(
    (e) => {
      const t = e.target.getStage(), o = t?.getPointerPosition();
      if (!t || !o) return;
      if (s.isEraseMode && b) {
        const r = g(o);
        c((n) => {
          const h = n.lines.map((u) => {
            const f = u.points.filter((B, p) => {
              if (p % 2 === 0) {
                const l = u.points[p], y = u.points[p + 1];
                return Math.sqrt(
                  Math.pow(r.x - l, 2) + Math.pow(r.y - y, 2)
                ) > 10;
              }
              return !0;
            });
            return { ...u, points: f };
          });
          return { ...n, lines: h };
        });
        return;
      }
      if (!s.drawing || !s.isDrawingMode || !M.bgImage || s.isEditingText)
        return;
      const i = g(o);
      a(i.x, i.y) && c((r) => {
        if (r.lines.length === 0) return r;
        const n = r.lines[r.lines.length - 1];
        return {
          ...r,
          lines: [
            ...r.lines.slice(0, -1),
            {
              ...n,
              points: [...n.points, i.x, i.y]
            }
          ]
        };
      });
    },
    [
      s.drawing,
      s.isDrawingMode,
      s.isEditingText,
      M.bgImage,
      g,
      a
    ]
  ), m = D(() => {
    if (s.isEraseMode && b) {
      N(!1), d();
      return;
    }
    s.drawing && d(), w((e) => ({ ...e, drawing: !1 }));
  }, [s.drawing, d, b, w]);
  return {
    handleMouseDown: T,
    handleMouseMove: _,
    handleMouseUp: m,
    selectedColor: x,
    setSelectedColor: z
    // Expose color state
  };
};
export {
  j as useDrawingHandlers
};
//# sourceMappingURL=index.es102.js.map