@canplot/react 0.1.12 → 0.1.13

package/dist/canplot.mjs

@@ -1,5 +1,5 @@
 import { jsxs as lt, jsx as _, Fragment as _t } from "react/jsx-runtime";
-import Z, { createContext as vt, useContext as J, useRef as D, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
+import Z, { createContext as vt, useContext as J, useRef as U, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
 import { createStore as bt, useStore as St } from "zustand";
 const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e) => s + (e ?? 0), 0), ue = (t, s) => {
   let e = 0;
@@ -7,9 +7,9 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     Math.abs(t[o] - s) < Math.abs(t[e] - s) && (e = o);
   return e;
 }, Dt = (t, s, e, o) => {
-  const { min: n, max: c, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (c - n);
+  const { min: n, max: c, origin: a } = L(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (c - n);
   return s / d;
-}, I = (t, s) => {
+}, L = (t, s) => {
   const e = t.scales.find((o) => o.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
@@ -18,10 +18,10 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
   const e = window.devicePixelRatio || 1;
   t.lineCap = s?.lineCap ?? "butt", t.lineDashOffset = e * (s?.lineDashOffset ?? 0), t.lineJoin = s?.lineJoin ?? "miter", t.lineWidth = e * (s?.lineWidth ?? 1), t.miterLimit = e * (s?.miterLimit ?? 10), t.strokeStyle = s?.strokeStyle ?? "black", t.fillStyle = s?.fillStyle ?? t.strokeStyle, t.font = s?.font ?? `${10 * e}px sans-serif`, t.textAlign = s?.textAlign ?? "start", t.direction = s?.direction ?? "inherit", t.textBaseline = s?.textBaseline ?? "alphabetic", t.fontKerning = s?.fontKerning ?? "auto";
 }, ut = (t, s, e, o) => {
-  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: c, max: a, origin: r } = I(t, e), d = (r === "x" ? n.width : n.height) / (a - c);
+  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: c, max: a, origin: r } = L(t, e), d = (r === "x" ? n.width : n.height) / (a - c);
   return s * d;
 }, H = (t, s, e, o) => {
-  const { min: n, origin: c } = I(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
+  const { min: n, origin: c } = L(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
   return c === "x" ? j(
     a.x + r,
     a.x - 10 * a.width,
@@ -32,19 +32,19 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     a.y + 11 * a.height
   );
 }, de = (t, s, e) => {
-  const { min: o, max: n } = I(t, e);
+  const { min: o, max: n } = L(t, e);
   return j(s, o, n);
-}, O = (t, s, e) => {
+}, Y = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.x, o.x + o.width);
-}, B = (t, s, e) => {
+}, O = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.y, o.y + o.height);
 }, rt = (t, s, e) => {
-  const { min: o, max: n } = I(t, e);
+  const { min: o, max: n } = L(t, e);
   return s >= o && s <= n;
-}, L = (t, s, e, o) => {
-  const { min: n, max: c, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
+}, D = (t, s, e, o) => {
+  const { min: n, max: c, origin: a } = L(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
   return n + d * (c - n);
 }, Lt = (t) => {
   const { ctx: s, scales: e } = t;
@@ -80,8 +80,8 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
-    clampYPosToChartArea: (o, n) => B(e(), o, n ?? "canvas"),
+    clampXPosToChartArea: (o, n) => Y(e(), o, n ?? "canvas"),
+    clampYPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
     valToPos: (o, n, c) => H(e(), o, n, c ?? "canvas"),
     valToPxDistance: (o, n, c) => ut(
       e(),
@@ -90,18 +90,18 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
       c ?? "canvas"
     ),
     valFits: (o, n) => rt(e(), o, n),
-    getScale: (o) => I(e(), o)
+    getScale: (o) => L(e(), o)
   };
 }), Xt = () => bt((t) => ({
   notify: () => {
     t((s) => ({ version: s.version + 1 }));
   },
   version: 0
-})), dt = vt(null), Ct = vt(null), Y = (t, s) => {
+})), dt = vt(null), Ct = vt(null), z = (t, s) => {
   const e = J(dt), o = J(Ct);
   if (!e || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const n = D(t);
+  const n = U(t);
   n.current = t, N(() => {
     n.current(e.getState()), e.subscribe((c) => {
       c._frame && n.current(c);
@@ -142,7 +142,7 @@ function at(t, s) {
 }
 var zt = parseInt(Rt.split(".")[0], 10) >= 19 ? Ft : Kt;
 const he = At(({ configuration: t, children: s, style: e, className: o }, n) => {
-  const c = D(null), a = D(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
+  const c = U(null), a = U(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
   N(() => {
     d.setState({
       _frame: Bt(t, r, c.current)
@@ -315,7 +315,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   };
 }, $t = (t) => {
   t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Lt(t);
-}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(
+}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(
   ({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
     const d = n();
     d.save(), d.beginPath(), R(d, o);
@@ -326,7 +326,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     d.stroke(), d.restore();
   },
   [t, s, e, o]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (Y(({ getCtx: c, valToPos: a, valFits: r }) => {
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (z(({ getCtx: c, valToPos: a, valFits: r }) => {
   const d = c();
   d.save(), d.beginPath(), R(d, n);
   for (const u of t) {
@@ -344,7 +344,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   barWidth: n,
   xPositionOffset: c,
   radius: a
-}) => (Y(
+}) => (z(
   ({
     getCtx: r,
     valToPxDistance: d,
@@ -370,7 +370,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     m.closePath(), m.fill(), o?.strokeStyle && m.stroke(), m.restore();
   },
   [t, s, e, o, n, c, a]
-), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
+), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
   const d = [];
   for (const l of t) {
     const p = c(r(l.x, s)), m = a(r(l.y[0], e)), f = a(r(l.y[1], e));
@@ -383,7 +383,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       u.lineTo(l.x, l.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (Y(
+}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (z(
   ({ getCtx: c, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
     const u = [], l = c();
     for (const i of t) {
@@ -434,7 +434,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     return r;
   }
-), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (Y(
+), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "x") return;
@@ -462,7 +462,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     l.restore();
   },
   [c, t, s, e]
-), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (Y(
+), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "y") return;
@@ -538,13 +538,13 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     return;
   const r = t.clientX - s.left, d = {
     scaleId: c,
-    value: L(e, r, c, "css")
+    value: D(e, r, c, "css")
   }, u = t.clientY - s.top, l = {
     scaleId: a,
-    value: L(e, u, a, "css")
+    value: D(e, u, a, "css")
   };
   return { pointerSyncPosition: { x: d, y: l }, cssX: r, cssY: u };
-}, z = (t, s) => {
+}, F = (t, s) => {
   const e = t.x ? H(
     s,
     t.x.value,
@@ -562,7 +562,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     scaled: Object.fromEntries(
       s.scales.map((n) => {
         const c = n.origin === "y" ? o : e;
-        return [n.id, L(s, c, n.id, "css")];
+        return [n.id, D(s, c, n.id, "css")];
       })
     )
   };
@@ -581,7 +581,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     (a) => {
       if (a.origin !== t)
         return [];
-      const r = L(e, o, a.id, "css"), d = L(e, n, a.id, "css");
+      const r = D(e, o, a.id, "css"), d = D(e, n, a.id, "css");
       return [
         {
           scaleId: a.id,
@@ -640,9 +640,9 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     m
   ] });
 }, Vt = ({ className: t, style: s, sync: e }) => {
-  const o = D(null), n = ht(), c = D(n);
+  const o = U(null), n = ht(), c = U(n);
   c.current = n;
-  const a = J(ft), r = e?.key || a, d = D(null), u = D(null), l = D(null), p = () => {
+  const a = J(ft), r = e?.key || a, d = U(null), u = U(null), l = U(null), p = () => {
     const i = o.current?.parentElement;
     if (i) {
       if (i.dataset.canplotroot === void 0)
@@ -669,7 +669,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         metaKey: i.metaKey
       }
     );
-  }, f = D(m);
+  }, f = U(m);
   return f.current = m, wt(() => {
     const i = (g) => {
       const v = u.current;
@@ -715,44 +715,44 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         (v, { cssX: T, cssY: b }, C) => {
           const k = d.current;
           if (!k || !v.x || !v.y) return;
-          const A = c.current, P = k.xRangeCss.start, $ = T, F = k.yRangeCss.start, st = b, nt = I(A, v.x.scaleId), ot = I(A, v.y.scaleId);
+          const A = c.current, P = k.xRangeCss.start, B = T, K = k.yRangeCss.start, st = b, nt = L(A, v.x.scaleId), ot = L(A, v.y.scaleId);
           d.current = {
-            xRangeCss: { start: P, end: $ },
-            yRangeCss: { start: F, end: st }
+            xRangeCss: { start: P, end: B },
+            yRangeCss: { start: K, end: st }
           };
-          let U = "below_threshold";
-          const ct = Math.abs(F - st), it = Math.abs(P - $);
-          ct < 10 && it < 10 ? U = "below_threshold" : ct > 30 && it > 30 ? U = "box" : ct > it ? U = "y" : U = "x";
-          const Mt = U === "x" || U === "box" ? {
+          let $ = "below_threshold";
+          const ct = Math.abs(K - st), it = Math.abs(P - B);
+          ct < 10 && it < 10 ? $ = "below_threshold" : ct > 30 && it > 30 ? $ = "box" : ct > it ? $ = "y" : $ = "x";
+          const Mt = {
             scaleId: nt.id,
-            from: L(
+            from: D(
               A,
-              O(c.current, P, "css"),
+              Y(c.current, P, "css"),
               nt.id,
               "css"
             ),
-            to: L(
+            to: D(
               A,
-              O(c.current, $, "css"),
+              Y(c.current, B, "css"),
               nt.id,
               "css"
             )
-          } : void 0, Pt = U === "y" || U === "box" ? {
+          }, Pt = {
             scaleId: ot.id,
-            from: L(
+            from: D(
               A,
-              B(c.current, F, "css"),
+              O(c.current, K, "css"),
               ot.id,
               "css"
             ),
-            to: L(
+            to: D(
               A,
-              B(c.current, st, "css"),
+              O(c.current, st, "css"),
               ot.id,
               "css"
             )
-          } : void 0, yt = {
-            mode: U,
+          }, yt = {
+            mode: $,
             xRange: Mt,
             yRange: Pt,
             completed: !1,
@@ -787,7 +787,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       document.removeEventListener("mouseup", i), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
     };
   }, [c, r, f]), M("sync_dblclick", r, (i) => {
-    const h = z(
+    const h = F(
       i.positions,
       c.current
     );
@@ -797,7 +797,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       keys: i.keys
     });
   }), M("sync_click", r, (i) => {
-    const h = z(
+    const h = F(
       i.positions,
       c.current
     );
@@ -807,7 +807,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       keys: i.keys
     });
   }), M("sync_contextmenu", r, (i) => {
-    const h = z(
+    const h = F(
       i.positions,
       c.current
     );
@@ -817,7 +817,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       keys: i.keys
     });
   }), M("sync_move", r, (i) => {
-    const h = i.positions ? z(
+    const h = i.positions ? F(
       i.positions,
       c.current
     ) : null;
@@ -827,7 +827,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       keys: i.keys
     });
   }), M("sync_mousedown", r, (i) => {
-    const h = z(
+    const h = F(
       i.positions,
       c.current
     );
@@ -837,7 +837,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       keys: i.keys
     });
   }), M("sync_mouseup", r, (i) => {
-    const h = z(
+    const h = F(
       i.positions,
       c.current
     );
@@ -850,7 +850,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     "sync_pressandwheel",
     r,
     (i) => {
-      const h = z(
+      const h = F(
         i.positions,
         c.current
       );
@@ -1022,7 +1022,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     c(l);
   }), !n)
     return null;
-  const { frame: a, pointer: r } = n, d = O(a, r?.cssX ?? 0, "css"), u = B(a, r?.cssY ?? 0, "css");
+  const { frame: a, pointer: r } = n, d = Y(a, r?.cssX ?? 0, "css"), u = O(a, r?.cssY ?? 0, "css");
   return /* @__PURE__ */ lt(_t, { children: [
     /* @__PURE__ */ _(
       "div",
@@ -1072,19 +1072,19 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   const n = Q(() => {
     if (!e || e.mode === "below_threshold")
       return null;
-    const c = O(
+    const c = Y(
       e.frame,
       e.x.css?.from ?? -1 / 0,
       "css"
-    ), a = O(
+    ), a = Y(
       e.frame,
       e.x.css?.to ?? 1 / 0,
       "css"
-    ), r = B(
+    ), r = O(
       e.frame,
       e.y.css?.from ?? -1 / 0,
       "css"
-    ), d = B(
+    ), d = O(
       e.frame,
       e.y.css?.to ?? 1 / 0,
       "css"
@@ -1238,7 +1238,7 @@ const qt = 1, Et = 1e3 * qt, pt = 60 * Et, tt = 60 * pt, et = 24 * tt, Gt = 30 *
 }, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, K = (t, s) => {
+}, X = (t, s) => {
   const [e, o] = s;
   switch (o) {
     case "milliseconds":
@@ -1297,7 +1297,7 @@ const oe = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      n === "months" ? c.setUTCDate(1) : n === "years" && c.setUTCMonth(0, 1), a(), c.getTime() < t && (c = new Date(K(c, [1, n])));
+      n === "months" ? c.setUTCDate(1) : n === "years" && c.setUTCMonth(0, 1), a(), c.getTime() < t && (c = new Date(X(c, [1, n])));
       break;
   }
   return c.getTime();
@@ -1318,15 +1318,15 @@ const oe = (t, s, e = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        x = K(i, [y.length * m, f]);
+        x = X(i, [y.length * m, f]);
         break;
       }
       case "days": {
-        const w = K(i, [
+        const w = X(i, [
           y.length * m,
           f
         ]);
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1334,14 +1334,14 @@ const oe = (t, s, e = "UTC") => {
       }
       case "months":
       case "years": {
-        const w = K(
-          K(K(i, [h, "hours"]), [
+        const w = X(
+          X(X(i, [h, "hours"]), [
             y.length * m,
             f
           ]),
           [-h, "hours"]
         );
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1357,7 +1357,7 @@ const oe = (t, s, e = "UTC") => {
     showTimezone: n,
     timeZone: t
   }))(y);
-}, X = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ce = ({
+}, I = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ce = ({
   timeZone: t = kt,
   locale: s = Ht,
   showTimezone: e = !0
@@ -1377,15 +1377,15 @@ const oe = (t, s, e = "UTC") => {
   return (n) => {
     const c = n[1] - n[0], a = c < q([1, "days"]), r = c < q([1, "minutes"]), d = c < q([1, "seconds"]);
     return n.map((u) => ({ value: u, label: o.formatToParts(new Date(u)) })).map((u, l, p) => {
-      const m = p[l - 1], f = l === 0 || X(u.label, m.label, "year"), i = l === 0 || X(u.label, m.label, "day"), h = l === 0 || X(u.label, m.label, "month"), y = l === 0 || X(u.label, m.label, "hour"), x = l === 0 || X(u.label, m.label, "timeZoneName"), w = l === 0 || X(u.label, m.label, "minute"), g = l === 0 || X(u.label, m.label, "second"), v = l === 0 || X(u.label, m.label, "fractionalSecond"), T = [];
+      const m = p[l - 1], f = l === 0 || I(u.label, m.label, "year"), i = l === 0 || I(u.label, m.label, "day"), h = l === 0 || I(u.label, m.label, "month"), y = l === 0 || I(u.label, m.label, "hour"), x = l === 0 || I(u.label, m.label, "timeZoneName"), w = l === 0 || I(u.label, m.label, "minute"), g = l === 0 || I(u.label, m.label, "second"), v = l === 0 || I(u.label, m.label, "fractionalSecond"), T = [];
       if (a && (y || w || x || g || v)) {
         const b = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
         let A = "";
         if (r) {
-          const P = u.label.find((F) => F.type === "second")?.value, $ = u.label.find(
-            (F) => F.type === "fractionalSecond"
+          const P = u.label.find((K) => K.type === "second")?.value, B = u.label.find(
+            (K) => K.type === "fractionalSecond"
           )?.value;
-          A = `:${P}` + (d ? `.${$}` : "");
+          A = `:${P}` + (d ? `.${B}` : "");
         }
         T.push(
           `${b}:${C}${A}` + (e && x ? ` ${k}` : "")
@@ -1421,18 +1421,18 @@ export {
   R as applyStyles,
   j as clamp,
   de as clampUnfit,
-  O as clampXPosToChartArea,
-  B as clampYPosToChartArea,
+  Y as clampXPosToChartArea,
+  O as clampYPosToChartArea,
   Wt as defaultNumericalTicksFormatter,
   ue as findClosestIndex,
-  I as getScale,
+  L as getScale,
   Ee as makeLinearTicks,
   ce as makeTimeTickFormat,
   Me as makeTimeTicks,
-  L as posToVal,
+  D as posToVal,
   Dt as pxToValDistance,
   le as sum,
-  Y as useDrawEffect,
+  z as useDrawEffect,
   ht as useFrameState,
   mt as useInteractionsEvent,
   ge as useXPositioned,