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

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

import { useState as I, useEffect as c, useCallback as u } from "react";
const p = (r, g, a) => {
  const [s, o] = I(r), [b, n] = I({
    past: [],
    present: {
      images: [],
      squares: [],
      textBoxes: [],
      lines: [],
      bgRotation: 0,
      bgImage: null,
      bgImageSize: { width: 0, height: 0 },
      bgImagePosition: { x: 0, y: 0 }
    },
    future: []
  }), [l, h] = I(!1);
  c(() => {
    if (s.bgImage && !l) {
      const e = {
        images: [],
        squares: [],
        textBoxes: [],
        lines: [],
        bgRotation: g.bgRotation,
        bgImage: null,
        bgImageSize: { ...g.bgImageSize },
        bgImagePosition: { ...g.bgImagePosition }
      };
      n({
        past: [],
        present: e,
        future: []
      }), h(!0);
    }
  }, [s.bgImage, g, l]);
  const f = u(() => {
    const e = {
      images: [...s.images],
      squares: [...s.squares],
      textBoxes: [...s.textBoxes],
      lines: [...s.lines],
      bgImage: null,
      // We don't store the actual image in history
      bgImageSize: { ...g.bgImageSize },
      bgImagePosition: { ...g.bgImagePosition }
    };
    n((t) => z(e, t.present) ? t : {
      past: [...t.past, t.present].slice(-100),
      present: e,
      future: []
      // Clear future when making new changes
    });
  }, [s, g]), x = u(() => {
    n((e) => {
      if (e.past.length === 0) return e;
      const t = e.past[e.past.length - 1], m = e.past.slice(0, -1);
      return o((i) => ({
        ...t,
        bgImage: i.bgImage
      })), a((i) => ({
        ...i,
        bgImageSize: { ...t.bgImageSize },
        bgImagePosition: { ...t.bgImagePosition }
      })), {
        past: m,
        present: t,
        future: [e.present, ...e.future]
      };
    });
  }, [a]), P = u(() => {
    n((e) => {
      if (e.future.length === 0) return e;
      const t = e.future[0], m = e.future.slice(1);
      return o((i) => ({
        ...t,
        bgImage: i.bgImage
      })), a((i) => ({
        ...i,
        bgImageSize: { ...t.bgImageSize },
        bgImagePosition: { ...t.bgImagePosition }
      })), {
        past: [...e.past, e.present],
        present: t,
        future: m
      };
    });
  }, [a]), z = (e, t) => e.images.length === t.images.length && e.squares.length === t.squares.length && e.textBoxes.length === t.textBoxes.length && e.lines.length === t.lines.length && e.bgImageSize.width === t.bgImageSize.width && e.bgImageSize.height === t.bgImageSize.height && e.bgImagePosition.x === t.bgImagePosition.x && e.bgImagePosition.y === t.bgImagePosition.y;
  return {
    canvasElements: s,
    setCanvasElements: o,
    history: b,
    setHistory: n,
    saveStateToHistory: f,
    undo: x,
    redo: P
  };
};
export {
  p as useCanvasState
};
//# sourceMappingURL=index.es99.js.map