seatmap-painter/dist/index.js

React-based UI tools for creating and painting groups on a provided SVG seatmap

import oe, { useState as g, useEffect as B, useMemo as se } from "react";
import { SeatmapInput as ce } from "react-svg-seatmap";
import { Select as le, MantineProvider as H, Button as Z, Flex as ue, Table as ie, ColorSwatch as fe } from "@mantine/core";
var C = { exports: {} }, y = {};
/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var J;
function de() {
  if (J) return y;
  J = 1;
  var c = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
  function i(f, l, u) {
    var b = null;
    if (u !== void 0 && (b = "" + u), l.key !== void 0 && (b = "" + l.key), "key" in l) {
      u = {};
      for (var a in l)
        a !== "key" && (u[a] = l[a]);
    } else u = l;
    return l = u.ref, {
      $$typeof: c,
      type: f,
      key: b,
      ref: l !== void 0 ? l : null,
      props: u
    };
  }
  return y.Fragment = s, y.jsx = i, y.jsxs = i, y;
}
var N = {};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var U;
function me() {
  return U || (U = 1, process.env.NODE_ENV !== "production" && function() {
    function c(e) {
      if (e == null) return null;
      if (typeof e == "function")
        return e.$$typeof === te ? null : e.displayName || e.name || null;
      if (typeof e == "string") return e;
      switch (e) {
        case w:
          return "Fragment";
        case E:
          return "Profiler";
        case n:
          return "StrictMode";
        case Q:
          return "Suspense";
        case K:
          return "SuspenseList";
        case re:
          return "Activity";
      }
      if (typeof e == "object")
        switch (typeof e.tag == "number" && console.error(
          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
        ), e.$$typeof) {
          case P:
            return "Portal";
          case k:
            return (e.displayName || "Context") + ".Provider";
          case x:
            return (e._context.displayName || "Context") + ".Consumer";
          case T:
            var r = e.render;
            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
          case ee:
            return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
          case F:
            r = e._payload, e = e._init;
            try {
              return c(e(r));
            } catch {
            }
        }
      return null;
    }
    function s(e) {
      return "" + e;
    }
    function i(e) {
      try {
        s(e);
        var r = !1;
      } catch {
        r = !0;
      }
      if (r) {
        r = console;
        var t = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
        return t.call(
          r,
          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
          d
        ), s(e);
      }
    }
    function f(e) {
      if (e === w) return "<>";
      if (typeof e == "object" && e !== null && e.$$typeof === F)
        return "<...>";
      try {
        var r = c(e);
        return r ? "<" + r + ">" : "<...>";
      } catch {
        return "<...>";
      }
    }
    function l() {
      var e = I.A;
      return e === null ? null : e.getOwner();
    }
    function u() {
      return Error("react-stack-top-frame");
    }
    function b(e) {
      if ($.call(e, "key")) {
        var r = Object.getOwnPropertyDescriptor(e, "key").get;
        if (r && r.isReactWarning) return !1;
      }
      return e.key !== void 0;
    }
    function a(e, r) {
      function t() {
        W || (W = !0, console.error(
          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
          r
        ));
      }
      t.isReactWarning = !0, Object.defineProperty(e, "key", {
        get: t,
        configurable: !0
      });
    }
    function o() {
      var e = c(this.type);
      return L[e] || (L[e] = !0, console.error(
        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
      )), e = this.props.ref, e !== void 0 ? e : null;
    }
    function _(e, r, t, d, h, R, M, Y) {
      return t = R.ref, e = {
        $$typeof: S,
        type: e,
        key: r,
        props: R,
        _owner: h
      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
        enumerable: !1,
        get: o
      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: 0
      }), Object.defineProperty(e, "_debugInfo", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: null
      }), Object.defineProperty(e, "_debugStack", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: M
      }), Object.defineProperty(e, "_debugTask", {
        configurable: !1,
        enumerable: !1,
        writable: !0,
        value: Y
      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
    }
    function O(e, r, t, d, h, R, M, Y) {
      var m = r.children;
      if (m !== void 0)
        if (d)
          if (ae(m)) {
            for (d = 0; d < m.length; d++)
              A(m[d]);
            Object.freeze && Object.freeze(m);
          } else
            console.error(
              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
            );
        else A(m);
      if ($.call(r, "key")) {
        m = c(e);
        var j = Object.keys(r).filter(function(ne) {
          return ne !== "key";
        });
        d = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", z[m + d] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
          `A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,
          d,
          m,
          j,
          m
        ), z[m + d] = !0);
      }
      if (m = null, t !== void 0 && (i(t), m = "" + t), b(r) && (i(r.key), m = "" + r.key), "key" in r) {
        t = {};
        for (var D in r)
          D !== "key" && (t[D] = r[D]);
      } else t = r;
      return m && a(
        t,
        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
      ), _(
        e,
        m,
        R,
        h,
        l(),
        t,
        M,
        Y
      );
    }
    function A(e) {
      typeof e == "object" && e !== null && e.$$typeof === S && e._store && (e._store.validated = 1);
    }
    var v = oe, S = Symbol.for("react.transitional.element"), P = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), n = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), k = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), K = Symbol.for("react.suspense_list"), ee = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), I = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, ae = Array.isArray, G = console.createTask ? console.createTask : function() {
      return null;
    };
    v = {
      "react-stack-bottom-frame": function(e) {
        return e();
      }
    };
    var W, L = {}, V = v["react-stack-bottom-frame"].bind(
      v,
      u
    )(), q = G(f(u)), z = {};
    N.Fragment = w, N.jsx = function(e, r, t, d, h) {
      var R = 1e4 > I.recentlyCreatedOwnerStacks++;
      return O(
        e,
        r,
        t,
        !1,
        d,
        h,
        R ? Error("react-stack-top-frame") : V,
        R ? G(f(e)) : q
      );
    }, N.jsxs = function(e, r, t, d, h) {
      var R = 1e4 > I.recentlyCreatedOwnerStacks++;
      return O(
        e,
        r,
        t,
        !0,
        d,
        h,
        R ? Error("react-stack-top-frame") : V,
        R ? G(f(e)) : q
      );
    };
  }()), N;
}
var X;
function be() {
  return X || (X = 1, process.env.NODE_ENV === "production" ? C.exports = de() : C.exports = me()), C.exports;
}
var p = be();
const pe = (c) => {
  const [s, i] = g(!0), [f, l] = g(null), [u, b] = g([]);
  return B(() => {
    if (!c) return;
    console.log("Generating seat data from SVG...");
    const a = new DOMParser();
    fetch(c).then((o) => o.text()).then((o) => {
      const _ = a.parseFromString(o, "image/svg+xml"), v = Array.from(
        _.querySelectorAll("circle, path, ellipse")
      ).filter((S) => S.id).map(
        (S, P) => ({
          id: P + 1,
          cssSelector: `#${S.id}`
        })
      );
      console.log(v), b(v), i(!1);
    }).catch((o) => {
      i(!1), l("Failed to fetch data"), console.error("Error fetching SVG:", o);
    });
  }, [c]), { loading: s, data: u, error: f };
}, Ee = ({
  svg: c,
  value: s,
  onChange: i,
  groups: f
}) => {
  const { loading: l, data: u } = pe(c), [b, a] = g([]), [o, _] = g("1");
  B(() => {
    !l && i && i({ "-1": u });
  }, [l, i, u]);
  const O = () => {
    const n = { ...s };
    for (const E of b)
      for (const x in n) {
        const k = n[x].findIndex(
          (T) => T.id === E
        );
        if (k !== -1) {
          const T = n[x][k];
          T.displayGroup = o, T.selectionGroups = {
            ...T.selectionGroups,
            section: o
          }, n[x].splice(k, 1), n[o] || (n[o] = []), n[o] = [
            ...n[o] || [],
            T
          ];
          break;
        }
      }
    i && i(n), a([]);
  }, A = (n) => {
    a(n);
  }, v = /* @__PURE__ */ p.jsx(
    le,
    {
      size: "xs",
      data: f == null ? void 0 : f.map((n) => ({
        value: n.value,
        label: n.label
      })),
      value: o,
      onChange: (n, E) => _(E.value)
    }
  ), S = /* @__PURE__ */ p.jsx(Z, { size: "xs", onClick: O, children: "Save" }), P = /* @__PURE__ */ p.jsxs("div", { className: "seatmap-painter__group-selection", children: [
    v,
    S
  ] }), w = se(() => {
    const n = [];
    for (const E in s) {
      const x = s[E].map((k) => ({
        ...k
      }));
      n.push(...x);
    }
    return n;
  }, [s]);
  return /* @__PURE__ */ p.jsx(H, { children: /* @__PURE__ */ p.jsx(
    ce,
    {
      svg: c,
      seats: w,
      value: b,
      onChange: A,
      rightControls: [P],
      displayGroupMapping: f == null ? void 0 : f.reduce(
        (n, E) => ({
          ...n,
          [E.value]: E.color
        }),
        {}
      )
    }
  ) });
}, Re = (c) => {
  const s = [
    "#5a8ef7",
    "#de5472",
    "#9b98e5",
    "#f8d376",
    "#e89171",
    "#72a588",
    "#abd0f1",
    "#61d4a4",
    "#f7b7a3",
    "#b5ead7",
    "#ffdac1",
    "#c7ceea",
    "#ffb7b2",
    "#b2f7ef",
    "#f6abb6",
    "#b5ead7",
    "#c9cba3",
    "#ffe156",
    "#6a0572",
    "#ab83a1",
    "#f67280",
    "#355c7d",
    "#99b898",
    "#f8b195",
    "#f6cd61",
    "#3ec300",
    "#f9d423",
    "#e27d60",
    "#85dcb0",
    "#e8a87c",
    "#c38d9e",
    "#41b3a3",
    "#f38181",
    "#a8e063",
    "#f7cac9",
    "#92a8d1",
    "#f9b7b7",
    "#b8a9c9",
    "#ffb347",
    "#b2d7e4"
  ];
  return s[c % s.length];
}, Te = ({ svg: c }) => {
  const [s, i] = g([]), f = {
    head: ["Id", "Color"],
    body: s
  }, l = () => {
    i((a) => {
      const o = a ? a.length + 1 : 0, _ = Re(o);
      return a == null ? void 0 : a.concat([[o, /* @__PURE__ */ p.jsx(fe, { color: _ }), _]]);
    });
  }, [u, b] = g({});
  return /* @__PURE__ */ p.jsx(H, { children: /* @__PURE__ */ p.jsxs(
    ue,
    {
      justify: "space-between",
      align: "center",
      gap: "2rem",
      className: "group-maker",
      children: [
        /* @__PURE__ */ p.jsx(
          Ee,
          {
            svg: c,
            value: u,
            onChange: b,
            groups: s == null ? void 0 : s.map((a) => {
              var o;
              return {
                value: a && a[0] ? a[0].toString() : "ERROR",
                label: `Group ${a[0]}`,
                color: ((o = a[2]) == null ? void 0 : o.toString()) || "#000000"
              };
            })
          }
        ),
        /* @__PURE__ */ p.jsxs("div", { className: "group-table", children: [
          /* @__PURE__ */ p.jsx(Z, { onClick: l, children: "Add Group" }),
          /* @__PURE__ */ p.jsx(ie, { data: f })
        ] })
      ]
    }
  ) });
};
export {
  Te as GroupMaker,
  Ee as SeatmapPainter
};