@canplot/react 0.5.2 → 0.5.3

package/dist/canplot.mjs

@@ -1,8 +1,8 @@
-var Ye = Object.defineProperty;
-var Be = (e, t, n) => t in e ? Ye(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var F = (e, t, n) => Be(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsxs as pe, jsx as R, Fragment as ze } from "react/jsx-runtime";
-import D, { version as Ne, createContext as ye, forwardRef as $e, useRef as k, useState as B, useMemo as Z, useLayoutEffect as $, useCallback as je, useContext as q, useId as Ve, useEffect as He } from "react";
+var Be = Object.defineProperty;
+var ze = (e, t, n) => t in e ? Be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var F = (e, t, n) => ze(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsxs as pe, jsx as R, Fragment as Ne } from "react/jsx-runtime";
+import D, { version as $e, createContext as ye, forwardRef as je, useRef as k, useState as B, useMemo as Z, useLayoutEffect as $, useCallback as Ve, useContext as q, useEffect as ke, useId as He } from "react";
 const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
   let n = 0;
   for (let s = 0; s < e.length; s++)
@@ -124,8 +124,8 @@ function me(e, t) {
     return e(t);
   e && (e.current = t);
 }
-var Je = parseInt(Ne.split(".")[0], 10) >= 19 ? Ze : Ge;
-const ke = ye({
+var Je = parseInt($e.split(".")[0], 10) >= 19 ? Ze : Ge;
+const Re = ye({
   listeners: [],
   subscribe: () => () => {
   },
@@ -140,14 +140,14 @@ const ke = ye({
     for (const [, s] of e)
       s();
   } };
-}, ve = ye(null), Re = ye(() => {
-}), De = {
+}, ve = ye(null), De = ye(() => {
+}), Ie = {
   TOP: 400,
   MIDDLE: 300,
   BOTTOM: 200,
   BACKGROUND: 100
 };
-class Ie {
+class Le {
   constructor() {
     F(this, "_frame", null);
     F(this, "clampXPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
@@ -169,7 +169,7 @@ class Ie {
     return this.frame.ctx;
   }
 }
-const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) => {
+const Dt = je(({ configuration: e, children: t, style: n, className: s }, o) => {
   const r = k(null), i = k(null), c = tt(i), [l, u] = B(null), f = Z(
     () => nt(e, c, l),
     [e, c, l]
@@ -220,7 +220,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   r.current = e, $(() => {
     n.subscribe(() => {
       r.current && qe(r.current);
-    }, De.BOTTOM);
+    }, Ie.BOTTOM);
   }, [n]), $(() => {
     let c = null;
     return c = window.requestAnimationFrame(() => {
@@ -229,10 +229,10 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       c && cancelAnimationFrame(c);
     };
   }, [s, e, n]);
-  const i = je(() => {
+  const i = Ve(() => {
     o((c) => c + 1);
   }, [o]);
-  return /* @__PURE__ */ R(ke.Provider, { value: n, children: /* @__PURE__ */ R(Re.Provider, { value: i, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: i, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
 }, tt = (e) => {
   const [t, n] = B({
     width: 0,
@@ -350,28 +350,35 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     chartAreaCanvasPX: r
   };
 }, j = (e, t, n) => {
-  const s = q(ve), o = q(Re), r = q(ke);
+  const s = q(ve), o = q(De), r = q(Re);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const [i] = B(() => new Ie());
+  const [i] = B(() => new Le());
   i._updateFrame(s);
   const c = k(i);
   c.current = i;
   const l = k(t);
-  l.current = t, $(() => r.subscribe(
-    () => {
-      l.current(i);
-    },
-    typeof e == "number" ? e : De[e]
-  ), [r, e, i]), $(() => {
+  l.current = t, $(() => {
+    const u = r.subscribe(
+      () => {
+        l.current(i);
+      },
+      typeof e == "number" ? e : Ie[e]
+    );
+    return () => {
+      u();
+    };
+  }, [r, e, i]), $(() => {
     o();
-  }, [o, ...n]);
-}, Le = () => {
+  }, [o, ...n]), ke(() => () => {
+    o();
+  }, [o]);
+}, Ue = () => {
   const e = q(ve);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
   return Z(() => {
-    const t = new Ie();
+    const t = new Le();
     return t._updateFrame(e), t;
   }, [e]);
 }, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
@@ -564,7 +571,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       ...n,
       ...s,
       // alter font size for DPR
-      font: Ue(s?.font ?? n?.font)
+      font: _e(s?.font ?? n?.font)
     });
     for (const { value: b, label: v } of x) {
       const T = l(b, t, "canvas");
@@ -603,7 +610,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       ...n,
       ...s,
       // alter font size for DPR
-      font: Ue(s?.font ?? n?.font)
+      font: _e(s?.font ?? n?.font)
     });
     for (const { value: x, label: b } of w) {
       const v = l(x, t, "canvas");
@@ -617,7 +624,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     c.restore();
   },
   [i, t, n, s]
-), null), Ft = D.memo(lt, O), Ue = (e) => {
+), null), Ft = D.memo(lt, O), _e = (e) => {
   if (e)
     try {
       return e.replace(/(\d+)px/, (t, n) => `${parseInt(n) * window.devicePixelRatio || 1}px`);
@@ -732,7 +739,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   innerChildren: a,
   children: p
 }) => {
-  const h = Ve();
+  const h = He();
   return L("dblclick", h, (y) => {
     n?.(y);
   }), L("click", h, (y) => {
@@ -763,7 +770,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     p
   ] });
 }, ht = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const r = k(null), i = Le().frame, c = k(i);
+  const r = k(null), i = Ue().frame, c = k(i);
   c.current = i;
   const l = q(we), u = s?.key || l, f = k(null), m = k(null), a = k(null), p = () => {
     const d = r.current?.parentElement;
@@ -793,7 +800,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       }
     );
   }, y = k(h);
-  return y.current = h, He(() => {
+  return y.current = h, ke(() => {
     const d = (v) => {
       const T = m.current;
       T && M.spanselect.dispatchEvent(l, {
@@ -882,7 +889,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
             "y",
             { scaleId: Q.id, from: Se, to: Pe },
             c.current
-          ), Fe = ee?.scaled, Ke = te?.scaled, Me = {
+          ), Ke = ee?.scaled, Ye = te?.scaled, Me = {
             mode: W,
             frame: c.current,
             completed: !1,
@@ -891,14 +898,14 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
                 from: ee.fromCSS,
                 to: ee.toCSS
               } : void 0,
-              scaled: Fe ?? []
+              scaled: Ke ?? []
             },
             y: {
               css: te ? {
                 from: te.fromCSS,
                 to: te.toCSS
               } : void 0,
-              scaled: Ke ?? []
+              scaled: Ye ?? []
             },
             keys: S
           };
@@ -1114,7 +1121,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   }), !o)
     return null;
   const { frame: i, pointer: c } = o, l = c?.cssX ?? null, u = c?.cssY ?? null, f = l ? V(i, l, "css") : 0, m = u ? H(i, u, "css") : 0;
-  return /* @__PURE__ */ pe(ze, { children: [
+  return /* @__PURE__ */ pe(Ne, { children: [
     /* @__PURE__ */ R(
       "div",
       {
@@ -1187,7 +1194,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
   );
 }, Nt = ({ style: e, children: t, scaleId: n, ...s }) => {
-  const o = Le().getScale(n)?.axis;
+  const o = Ue().getScale(n)?.axis;
   return o ? /* @__PURE__ */ R(
     "div",
     {
@@ -1204,12 +1211,12 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       children: t
     }
   ) : null;
-}, _e = 60, dt = 30, Xe = "UTC", ft = "en-GB", $t = ({
+}, Xe = 60, dt = 30, Oe = "UTC", ft = "en-GB", $t = ({
   space: e,
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: r, max: i } = s, c = [], l = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? _e : dt)) * l, f = We(
+  const { min: r, max: i } = s, c = [], l = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? Xe : dt)) * l, f = We(
     o,
     u,
     s.id,
@@ -1232,7 +1239,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
 }, ne = [];
 for (let e = -12; e <= 12; e++)
   ne.push(1 * 10 ** e), ne.push(2 * 10 ** e), ne.push(5 * 10 ** e);
-const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 * ce, gt = 365 * ce, vt = [
+const pt = 1, Fe = 1e3 * pt, be = 60 * Fe, ie = 60 * be, ce = 24 * ie, yt = 30 * ce, gt = 365 * ce, vt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1290,7 +1297,7 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
     case "milliseconds":
       return t;
     case "seconds":
-      return t * Oe;
+      return t * Fe;
     case "minutes":
       return t * be;
     case "hours":
@@ -1384,8 +1391,8 @@ const St = (e, t, n = "UTC") => {
   }
   return r.getTime();
 }, jt = ({
-  timeZone: e = Xe,
-  space: t = _e,
+  timeZone: e = Oe,
+  space: t = Xe,
   formatter: n,
   locale: s,
   showTimezone: o
@@ -1440,7 +1447,7 @@ const St = (e, t, n = "UTC") => {
     timeZone: e
   }))(d);
 }, K = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, Pt = ({
-  timeZone: e = Xe,
+  timeZone: e = Oe,
   locale: t = ft,
   showTimezone: n = !0
 }) => {
@@ -1490,11 +1497,11 @@ export {
   _t as AreaPlot,
   Nt as AxisOverlay,
   Ut as BarPlot,
-  De as CANPLOT_LAYER,
+  Ie as CANPLOT_LAYER,
   Dt as CanPlot,
   Kt as ChartAreaInteractions,
   Bt as Crosshair,
-  Ie as FrameDrawer,
+  Le as FrameDrawer,
   It as LinePlot,
   Lt as ScatterPlot,
   zt as SelectBox,
@@ -1517,7 +1524,7 @@ export {
   We as pxToValDistance,
   kt as sum,
   j as useDrawEffect,
-  Le as useFrameState,
+  Ue as useFrameState,
   xe as useInteractionsEvent,
   fe as valFits,
   G as valToPos,