@vincentt-xr/sdk 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/product.js

@@ -0,0 +1,414 @@
+import { jsx as C, jsxs as J, Fragment as T } from "react/jsx-runtime";
+import { forwardRef as Z, useRef as j, useState as S, useCallback as w, useEffect as N, createElement as tt, useMemo as F } from "react";
+import { z as et, A as rt, B as nt } from "./index-CIe7eCMH.js";
+import { u as ot } from "./useXRCapabilities-Cxmlmpbd.js";
+let O = null;
+const st = () => typeof customElements < "u" && customElements.get("model-viewer") !== void 0, it = () => st() ? Promise.resolve() : (O || (O = import("@google/model-viewer").then(() => {
+}).catch((t) => {
+  throw O = null, new Error(
+    `@google/model-viewer could not be loaded (install it as a dependency to use <ProductViewer>): ${t instanceof Error ? t.message : String(t)}`
+  );
+})), O), U = [
+  "webxr",
+  "scene-viewer",
+  "quick-look"
+], at = Z(
+  ({
+    src: t,
+    iosSrc: o,
+    alt: e = "3D product",
+    poster: s,
+    arModes: r = U,
+    ar: n = !0,
+    placement: i = "floor",
+    scale: l = "auto",
+    cameraControls: d = !0,
+    autoRotate: A = !1,
+    loading: g = "auto",
+    environmentImage: x,
+    shadowIntensity: u = 1,
+    exposure: a,
+    attributes: f,
+    className: p,
+    style: y,
+    children: v,
+    onLoad: b,
+    onError: L,
+    onArStatus: V,
+    onReady: _
+  }, c) => {
+    const E = j(null), [P, K] = S(!1), R = j({ onLoad: b, onError: L, onArStatus: V, onReady: _ });
+    R.current = { onLoad: b, onError: L, onArStatus: V, onReady: _ };
+    const Q = w(
+      (m) => {
+        E.current = m, typeof c == "function" ? c(m) : c && (c.current = m);
+      },
+      [c]
+    );
+    N(() => {
+      let m = !0;
+      return it().then(() => {
+        m && K(!0);
+      }).catch((H) => {
+        var k, D;
+        m && ((D = (k = R.current).onError) == null || D.call(k, H));
+      }), () => {
+        m = !1;
+      };
+    }, []), N(() => {
+      var X, q;
+      const m = E.current;
+      if (!P || !m) return;
+      const H = () => {
+        var z, h;
+        return (h = (z = R.current).onLoad) == null ? void 0 : h.call(z);
+      }, k = (z) => {
+        var M, W;
+        const h = z.detail;
+        (W = (M = R.current).onError) == null || W.call(
+          M,
+          (h == null ? void 0 : h.sourceError) ?? new Error(`model-viewer ${(h == null ? void 0 : h.type) ?? "error"} for ${t}`)
+        );
+      }, D = (z) => {
+        var h, M;
+        return (M = (h = R.current).onArStatus) == null ? void 0 : M.call(
+          h,
+          z.detail.status
+        );
+      };
+      return m.addEventListener("load", H), m.addEventListener("error", k), m.addEventListener("ar-status", D), (q = (X = R.current).onReady) == null || q.call(X, m), () => {
+        m.removeEventListener("load", H), m.removeEventListener("error", k), m.removeEventListener("ar-status", D);
+      };
+    }, [P, t]);
+    const Y = {
+      src: t,
+      alt: e,
+      ...o ? { "ios-src": o } : {},
+      ...s ? { poster: s } : {},
+      ...n ? { ar: "", "ar-modes": r.join(" "), "ar-placement": i, "ar-scale": l } : {},
+      ...d ? { "camera-controls": "" } : {},
+      ...A ? { "auto-rotate": "" } : {},
+      loading: g,
+      ...x ? { "environment-image": x } : {},
+      "shadow-intensity": String(u),
+      ...a !== void 0 ? { exposure: String(a) } : {},
+      ...f ?? {},
+      class: p,
+      style: y,
+      ref: Q
+    };
+    return tt("model-viewer", Y, v);
+  }
+);
+at.displayName = "ProductViewer";
+const ct = (t, o) => {
+  if (!t) return [];
+  const e = {
+    webxr: t.webxr,
+    "scene-viewer": t.sceneViewer,
+    "quick-look": t.quickLook
+  };
+  return o.filter((s) => e[s]);
+}, ut = async (t, o = "webxr") => {
+  if (!t || o !== "webxr") return async () => {
+  };
+  const e = t.store.getSnapshot(), s = e.lifecycle === "paused";
+  if (e.lifecycle !== "running" && !s) return async () => {
+  };
+  if (e.source !== et.WEBCAM) return async () => {
+  };
+  const r = e.cameraFacing ?? "user";
+  return await t.stop(), async () => {
+    await t.switchCamera({ facingMode: r }), s && t.pause();
+  };
+}, Rt = (t = {}) => {
+  var _;
+  const { handoffCamera: o = !0 } = t, e = (t.modes ?? U).join(","), s = F(() => e.split(","), [e]), r = ot({ queryPermission: !1 }), n = rt(), [i, l] = S(null), [d, A] = S("not-presenting"), [g, x] = S(!1), [u, a] = S(null), f = j(null), p = j(t.onStatus);
+  p.current = t.onStatus;
+  const y = F(
+    () => {
+      var c;
+      return ct(((c = r.capabilities) == null ? void 0 : c.placement) ?? null, s);
+    },
+    [r.capabilities, s]
+  ), v = r.status === "ready" && y.length === 0 ? ((_ = r.capabilities) == null ? void 0 : _.placement.reason) ?? nt("placement-unsupported") : null, b = w((c) => {
+    var E;
+    if (A(c), (E = p.current) == null || E.call(p, c), c === "not-presenting" || c === "failed") {
+      const P = f.current;
+      f.current = null, P && P().catch(() => {
+      });
+    }
+  }, []), L = w((c) => {
+    l(c);
+  }, []);
+  N(() => {
+    if (!i) return;
+    const c = (P) => b(P.detail.status), E = () => x(!!i.canActivateAR);
+    return i.addEventListener("ar-status", c), i.addEventListener("load", E), x(!!i.canActivateAR), () => {
+      i.removeEventListener("ar-status", c), i.removeEventListener("load", E);
+    };
+  }, [i, b]);
+  const V = w(async () => {
+    if (!i) throw new Error("useProductAr: bind the <ProductViewer> first");
+    a(null);
+    try {
+      o && (f.current = await ut(
+        (n == null ? void 0 : n.session) ?? null,
+        y[0] ?? null
+      )), await i.activateAR();
+    } catch (c) {
+      const E = c instanceof Error ? c : new Error(String(c));
+      throw a(E), b("failed"), E;
+    }
+  }, [i, o, n, b, y]);
+  return F(
+    () => ({
+      status: v ? "unavailable" : d,
+      supportedModes: y,
+      canActivate: g,
+      reason: v,
+      loading: r.status === "checking" || r.status === "idle",
+      error: u,
+      bind: L,
+      activate: V,
+      handleStatus: b
+    }),
+    [
+      v,
+      d,
+      y,
+      g,
+      r.status,
+      u,
+      L,
+      V,
+      b
+    ]
+  );
+}, I = (t, o = 4) => t.map((e) => Number(e.toFixed(o))).join(" "), lt = (t) => ({
+  slot: `hotspot-${t.id}`,
+  "data-position": I(t.position),
+  "data-normal": I(t.normal)
+}), dt = /[^a-z0-9-]+/g, ft = (t, o) => {
+  let e = (o ?? "").toLowerCase().replace(dt, "-").replace(/^-+|-+$/g, "") || "hotspot";
+  e.startsWith("__") && (e = e.replace(/^_+/, "") || "hotspot");
+  const s = new Set(t.map((n) => n.id));
+  if (!s.has(e)) return e;
+  let r = 2;
+  for (; s.has(`${e}-${r}`); ) r += 1;
+  return `${e}-${r}`;
+}, B = (t) => {
+  if (!Array.isArray(t)) return [];
+  const o = [], e = /* @__PURE__ */ new Set();
+  for (const s of t) {
+    if (!s || typeof s != "object") continue;
+    const r = s, n = Array.isArray(r.position) ? r.position : null, i = Array.isArray(r.normal) ? r.normal : [0, 0, 1];
+    typeof r.id != "string" || !r.id || e.has(r.id) || r.id.startsWith("__") || !n || n.length !== 3 || n.some((l) => typeof l != "number" || !Number.isFinite(l)) || i.length !== 3 || i.some((l) => typeof l != "number" || !Number.isFinite(l)) || (e.add(r.id), o.push({
+      id: r.id,
+      position: [n[0], n[1], n[2]],
+      normal: [i[0], i[1], i[2]],
+      ...typeof r.label == "string" ? { label: r.label } : {},
+      ...typeof r.description == "string" ? { description: r.description } : {}
+    }));
+  }
+  return o;
+}, pt = (t) => JSON.stringify(B(t), null, 2), mt = (t, o = "metric") => {
+  if (!Number.isFinite(t)) return "–";
+  if (o === "imperial") {
+    const e = t / 0.0254;
+    return e >= 12 ? `${(e / 12).toFixed(2)} ft` : `${e.toFixed(1)} in`;
+  }
+  return t >= 1 ? `${t.toFixed(2)} m` : `${(t * 100).toFixed(1)} cm`;
+}, yt = ({ size: t, center: o }) => {
+  const [e, s, r] = t, [n, i, l] = o, d = n - e / 2, A = n + e / 2, g = i - s / 2, x = i + s / 2, u = l - r / 2, a = l + r / 2, f = (p, y, v, b) => ({
+    axis: p,
+    start: y,
+    end: v,
+    mid: [(y[0] + v[0]) / 2, (y[1] + v[1]) / 2, (y[2] + v[2]) / 2],
+    length: b
+  });
+  return [
+    f("x", [d, g, a], [A, g, a], e),
+    f("y", [d, g, a], [d, x, a], s),
+    f("z", [d, g, u], [d, g, a], r)
+  ];
+}, $ = (t) => t, G = (t, o) => (t.loaded && o(), t.addEventListener("load", o), () => t.removeEventListener("load", o)), zt = (t) => {
+  const [o, e] = S([]), [s, r] = S(null);
+  N(() => {
+    if (t)
+      return G(t, () => {
+        e([...$(t).availableVariants ?? []]), r($(t).variantName ?? null);
+      });
+  }, [t]);
+  const n = w(
+    (i) => {
+      t && ($(t).variantName = i, r(i));
+    },
+    [t]
+  );
+  return F(() => ({ variants: o, variant: s, setVariant: n }), [o, s, n]);
+}, Ft = (t) => {
+  const [o, e] = S(null);
+  return N(() => {
+    if (t)
+      return G(t, () => {
+        var n, i, l, d;
+        const s = (i = (n = $(t)).getDimensions) == null ? void 0 : i.call(n), r = (d = (l = $(t)).getBoundingBoxCenter) == null ? void 0 : d.call(l);
+        !s || !r || e({ size: [s.x, s.y, s.z], center: [r.x, r.y, r.z] });
+      });
+  }, [t]), o;
+}, $t = (t, o = {}) => {
+  const [e, s] = S(
+    () => B(o.initial ?? [])
+  ), r = j(o.initial);
+  N(() => {
+    o.initial !== r.current && (r.current = o.initial, s(B(o.initial ?? [])));
+  }, [o.initial]);
+  const n = w(
+    (u) => {
+      var a;
+      s(u), (a = o.onChange) == null || a.call(o, u);
+    },
+    // onChange identity is the caller's business.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [o.onChange]
+  ), i = w(
+    (u) => {
+      const a = {
+        ...u,
+        id: u.id ?? ft(e, u.label)
+      };
+      return n([...e, a]), a;
+    },
+    [e, n]
+  ), l = w(
+    (u, a, f) => {
+      var b, L;
+      const p = t ? (L = (b = $(t)).positionAndNormalFromPoint) == null ? void 0 : L.call(b, u, a) : null;
+      if (!p) return null;
+      const y = [p.position.x, p.position.y, p.position.z], v = [p.normal.x, p.normal.y, p.normal.z];
+      return i({ position: y, normal: v, ...f ? { label: f } : {} });
+    },
+    [t, i]
+  ), d = w(
+    (u, a) => n(e.map((f) => f.id === u ? { ...f, ...a } : f)),
+    [e, n]
+  ), A = w(
+    (u) => n(e.filter((a) => a.id !== u)),
+    [e, n]
+  ), g = w(() => n([]), [n]), x = w(
+    (u) => {
+      try {
+        n(B(JSON.parse(u)));
+      } catch {
+      }
+    },
+    [n]
+  );
+  return F(
+    () => ({
+      hotspots: e,
+      placeFromPointer: l,
+      add: i,
+      update: d,
+      remove: A,
+      clear: g,
+      json: pt(e),
+      importJson: x
+    }),
+    [e, l, i, d, A, g, x]
+  );
+}, bt = (t) => F(() => t ? yt(t) : [], [t]), gt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "4px 8px",
+  borderRadius: 999,
+  background: "rgba(8, 15, 28, 0.85)",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,0.3)",
+  fontSize: 12,
+  fontFamily: "system-ui, sans-serif",
+  whiteSpace: "nowrap",
+  cursor: "pointer"
+}, vt = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  transform: "translate(-50%, -50%)"
+}, ht = { background: "none", border: 0, padding: 0, margin: 0 }, Nt = ({
+  hotspot: t,
+  children: o,
+  onClick: e,
+  style: s,
+  className: r
+}) => /* @__PURE__ */ C(
+  "button",
+  {
+    type: "button",
+    ...lt(t),
+    className: r,
+    style: ht,
+    onClick: (n) => {
+      n.stopPropagation(), e == null || e(t);
+    },
+    "aria-label": t.label ?? t.id,
+    "data-visibility-attribute": "visible",
+    children: /* @__PURE__ */ C("span", { style: { ...gt, ...vt, ...s }, children: o ?? /* @__PURE__ */ J(T, { children: [
+      /* @__PURE__ */ C("span", { style: { width: 8, height: 8, borderRadius: 4, background: "#22d3ee" } }),
+      t.label
+    ] }) })
+  }
+), wt = {
+  padding: "2px 6px",
+  borderRadius: 4,
+  background: "rgba(8, 15, 28, 0.85)",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,0.3)",
+  fontSize: 11,
+  fontFamily: "ui-monospace, monospace",
+  whiteSpace: "nowrap",
+  transform: "translate(-50%, -50%)"
+}, Et = "hotspot-__dim-", xt = { x: "W", y: "H", z: "D" }, Vt = ({
+  dimensions: t,
+  unit: o = "metric",
+  axes: e = ["x", "y", "z"],
+  style: s
+}) => {
+  const r = bt(t);
+  return /* @__PURE__ */ C(T, { children: r.filter((n) => e.includes(n.axis)).map((n) => /* @__PURE__ */ C(
+    "div",
+    {
+      slot: `${Et}${n.axis}`,
+      "data-position": I(n.mid),
+      "data-normal": n.axis === "y" ? "-1 0 0" : "0 0 1",
+      children: /* @__PURE__ */ J("span", { style: { ...wt, ...s }, children: [
+        xt[n.axis],
+        " ",
+        mt(n.length, o)
+      ] })
+    },
+    n.axis
+  )) });
+};
+export {
+  U as DEFAULT_PRODUCT_AR_MODES,
+  Vt as ProductDimensions,
+  Nt as ProductHotspot,
+  at as ProductViewer,
+  yt as dimensionLines,
+  mt as formatLength,
+  lt as hotspotAttributes,
+  st as isModelViewerDefined,
+  it as loadModelViewer,
+  ft as nextHotspotId,
+  B as parseHotspots,
+  ut as releaseSessionForAr,
+  pt as serializeHotspots,
+  ct as supportedProductArModes,
+  bt as useDimensionLines,
+  Rt as useProductAr,
+  Ft as useProductDimensions,
+  $t as useProductHotspots,
+  zt as useProductVariants
+};