dynascale/dist/dynascale.js

   

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynascale{display:flex;align-items:center;justify-content:center;position:relative;max-width:100%;max-height:100%;overflow:hidden}.dynascale__content{transform-origin:center;transition:transform .2s ease}.dynascale__debug{position:absolute;top:10px;right:10px;background-color:#000000b3;color:#fff;padding:8px;border-radius:4px;font-size:12px;z-index:10}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { jsxs as f, jsx as r } from "react/jsx-runtime";
import { useRef as g, useState as a, useCallback as H, useEffect as R } from "react";
const N = ({
  defaultScale: b = 0,
  minScale: h = 0.1,
  margin: s = 0,
  className: w = "",
  debug: S = !1,
  children: m
}) => {
  const e = g(null), t = g(null), [c, p] = a(b), [l, v] = a({
    width: 0,
    height: 0
  }), [i, F] = a({
    width: 0,
    height: 0
  }), o = H(() => {
    if (!e.current || !t.current) return;
    const n = e.current.clientWidth, d = e.current.clientHeight, u = t.current.clientWidth, x = t.current.clientHeight, z = n / u, C = d / x, y = Math.max(Math.min(z, C) * (1 - s), h);
    p(y), v({ width: n, height: d }), F({ width: u, height: x });
  }, [s, h]);
  return R(() => {
    if (!e.current || !t.current) return;
    o();
    const n = new ResizeObserver(o);
    return n.observe(e.current), n.observe(t.current), () => {
      n.disconnect();
    };
  }, [s, o]), /* @__PURE__ */ f("div", { ref: e, className: `dynascale ${w}`, children: [
    /* @__PURE__ */ r(
      "div",
      {
        ref: t,
        className: "dynascale__content",
        style: {
          transform: `scale(${c})`
        },
        children: m
      }
    ),
    S && /* @__PURE__ */ f("div", { className: "dynascale__debug", children: [
      "Scale: ",
      c.toFixed(2),
      /* @__PURE__ */ r("br", {}),
      "Container: ",
      l.width.toFixed(),
      "×",
      l.height.toFixed(),
      "px",
      /* @__PURE__ */ r("br", {}),
      "Content: ",
      i.width.toFixed(),
      "×",
      i.height.toFixed(),
      "px",
      /* @__PURE__ */ r("br", {}),
      "Actual: ",
      (i.width * c).toFixed(),
      "×",
      (i.height * c).toFixed(),
      "px"
    ] })
  ] });
};
export {
  N as Dynascale
};