@wandelbots/wandelbots-js-react-components 4.7.2-pr.feat-RB-3348-remove-v1-usage.553.1cbc99f → 4.7.2-pr.v4.554.f8a153d

package/dist/MotionGroupVisualizer-CPEIGXUC.js

@@ -0,0 +1,1407 @@
+import { j as e, d as Te, v as Z, o as Se, e as U } from "./externalizeComponent-BOqKMZMc.js";
+import * as g from "three";
+import { Matrix4 as R, Vector3 as k, Quaternion as B } from "three";
+import { ConvexGeometry as W, RoundedBoxGeometry as Ge } from "three-stdlib";
+import { useThree as ae, useFrame as le, Canvas as z } from "@react-three/fiber";
+import ke, { useEffect as M, useMemo as C, useRef as _, useCallback as G, useState as A, Suspense as ce } from "react";
+import { Environment as Ae, Lightformer as L, Line as $, useGLTF as Le, Bounds as ee } from "@react-three/drei";
+import { useTheme as Fe, Card as Pe, Box as v, Typography as te, Divider as re, Button as ne } from "@mui/material";
+import { observer as Ve } from "mobx-react-lite";
+import { useTranslation as Ie } from "react-i18next";
+import { N as De, V as ue, c as pe, b as se, M as T, J as O } from "./interpolation-B8AcxfdD.js";
+import { ErrorBoundary as de } from "react-error-boundary";
+function Oe(t) {
+  switch (t.shape_type) {
+    case "convex_hull":
+      return new W(
+        t.vertices.map(
+          (r) => new g.Vector3(
+            r[0] / 1e3,
+            r[1] / 1e3,
+            r[2] / 1e3
+          )
+        )
+      );
+    case "box":
+      return new g.BoxGeometry(
+        t.size_x / 1e3,
+        t.size_y / 1e3,
+        t.size_z / 1e3
+      );
+    case "sphere":
+      return new g.SphereGeometry(t.radius / 1e3);
+    case "capsule":
+      return new g.CapsuleGeometry(
+        t.radius / 1e3,
+        t.cylinder_height / 1e3
+      );
+    case "cylinder":
+      return new g.CylinderGeometry(
+        t.radius / 1e3,
+        t.radius / 1e3,
+        t.height / 1e3
+      );
+    case "rectangle":
+      return new g.BoxGeometry(t.size_x / 1e3, t.size_y / 1e3, 0);
+    default:
+      return console.warn(`${t.shape_type} is not supported`), new g.BufferGeometry();
+  }
+}
+function Ce({
+  name: t,
+  collider: n,
+  children: r
+}) {
+  var f, u;
+  const l = ((f = n.pose) == null ? void 0 : f.position) ?? [0, 0, 0], s = ((u = n.pose) == null ? void 0 : u.orientation) ?? [0, 0, 0];
+  return n.margin && console.warn(`${t} margin is not supported`), /* @__PURE__ */ e.jsx(
+    "mesh",
+    {
+      name: t,
+      position: new g.Vector3(
+        l[0],
+        l[1],
+        l[2]
+      ).divideScalar(1e3),
+      rotation: new g.Euler(s[0], s[1], s[2], "XYZ"),
+      geometry: Oe(n.shape),
+      children: r
+    }
+  );
+}
+function Ue({
+  name: t,
+  colliders: n,
+  meshChildrenProvider: r,
+  ...l
+}) {
+  return /* @__PURE__ */ e.jsx("group", { name: t, ...l, children: Object.entries(n).map(([s, f]) => /* @__PURE__ */ e.jsx(
+    Ce,
+    {
+      name: s,
+      collider: f,
+      children: r(s, f)
+    },
+    s
+  )) });
+}
+function at({
+  scene: t,
+  meshChildrenProvider: n
+}) {
+  const r = t.colliders;
+  return /* @__PURE__ */ e.jsx("group", { children: r && /* @__PURE__ */ e.jsx(
+    Ue,
+    {
+      meshChildrenProvider: n,
+      colliders: r
+    }
+  ) });
+}
+function oe() {
+  return /* @__PURE__ */ e.jsx(Ae, { children: /* @__PURE__ */ e.jsx(Ee, {}) });
+}
+function Ee({ positions: t = [2, 0, 2, 0, 2, 0, 2, 0] }) {
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        intensity: 5,
+        "rotation-x": Math.PI / 2,
+        position: [0, 5, -9],
+        scale: [10, 10, 1]
+      }
+    ),
+    /* @__PURE__ */ e.jsx("group", { rotation: [0, 0.5, 0], children: /* @__PURE__ */ e.jsx("group", { children: t.map((n, r) => /* @__PURE__ */ e.jsx(
+      L,
+      {
+        form: "circle",
+        intensity: 5,
+        rotation: [Math.PI / 2, 0, 0],
+        position: [n, 4, r * 4],
+        scale: [3, 1, 1]
+      },
+      r
+    )) }) }),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        intensity: 40,
+        "rotation-y": Math.PI / 2,
+        position: [-5, 1, -1],
+        scale: [20, 0.1, 1]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        intensity: 20,
+        "rotation-y": -Math.PI,
+        position: [-5, -2, -1],
+        scale: [20, 0.1, 1]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        "rotation-y": Math.PI / 2,
+        position: [-5, -1, -1],
+        scale: [20, 0.5, 1],
+        intensity: 5
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        "rotation-y": -Math.PI / 2,
+        position: [10, 1, 0],
+        scale: [20, 1, 1],
+        intensity: 10
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      L,
+      {
+        form: "ring",
+        color: "white",
+        intensity: 5,
+        scale: 10,
+        position: [-15, 4, -18],
+        target: [0, 0, 0]
+      }
+    )
+  ] });
+}
+function lt({
+  safetyZones: t,
+  dhParameters: n,
+  ...r
+}) {
+  const l = {
+    attach: "material",
+    color: "#009f4d",
+    opacity: 0.2,
+    depthTest: !1,
+    depthWrite: !1,
+    transparent: !0,
+    polygonOffset: !0
+  }, s = Te(n ?? []);
+  M(() => {
+    Array.isArray(t) && console.warn(
+      "SafetyZonesRenderer: The support of V1 safety zones is deprecated. Please migrate to V2 safety zones."
+    );
+  }, [t]);
+  const f = (p, i) => {
+    var m, j;
+    if (!((m = i == null ? void 0 : i.pose) != null && m.position) || !((j = i == null ? void 0 : i.pose) != null && j.orientation))
+      return null;
+    const o = new g.Vector3(
+      i.pose.position[0] / 1e3,
+      i.pose.position[1] / 1e3,
+      i.pose.position[2] / 1e3
+    ), a = new g.Vector3(
+      i.pose.orientation[0],
+      i.pose.orientation[1],
+      i.pose.orientation[2]
+    );
+    let c;
+    const y = i.shape.shape_type === "plane" ? { ...l, side: g.DoubleSide } : { ...l, side: g.FrontSide };
+    switch (i.shape.shape_type) {
+      /**
+       * Plane shape, uses DH parameters to calculate the size of the plane (reach distance of a robot)
+       */
+      case "plane":
+        c = /* @__PURE__ */ e.jsx("planeGeometry", { args: [s, s] });
+        break;
+      /**
+       * Sphere shape
+       */
+      case "sphere": {
+        const x = (i == null ? void 0 : i.shape).radius / 1e3;
+        c = /* @__PURE__ */ e.jsx("sphereGeometry", { args: [x] });
+        break;
+      }
+      /**
+       * Capsule shape
+       */
+      case "capsule": {
+        const x = (i == null ? void 0 : i.shape).radius / 1e3, w = (i == null ? void 0 : i.shape).cylinder_height / 1e3;
+        c = /* @__PURE__ */ e.jsx("capsuleGeometry", { args: [x, w] });
+        break;
+      }
+      /**
+       * Convex hull, checks at first if the vertices are coplanar - if yes, adds a small offset for
+       * renderer to be able to visualize the convex hull.
+       */
+      case "convex_hull": {
+        const x = (i == null ? void 0 : i.shape).vertices.map(
+          (b) => new g.Vector3(b[0] / 1e3, b[1] / 1e3, b[2] / 1e3)
+        ), w = Z(x);
+        if (w.isCoplanar && w.normal) {
+          const F = new g.Vector3().addVectors(
+            x[0],
+            w.normal.multiplyScalar(1e-4)
+          );
+          x.push(F);
+        }
+        try {
+          c = /* @__PURE__ */ e.jsx(
+            "primitive",
+            {
+              object: new W(x),
+              attach: "geometry"
+            }
+          );
+        } catch (b) {
+          return console.log("Error creating ConvexGeometry:", b), null;
+        }
+        break;
+      }
+      /**
+       * Convex hull around four spheres. Sphere center points in x/y-plane,
+       * offset by either combination "+/- sizeX" or "+/- sizeY".
+       * Alternative description: Rectangle in x/y-plane with a 3D padding (source: nova-api docs)
+       *
+       * Basically a rounded box with a rectangular cross-section.
+       */
+      case "rectangular_capsule": {
+        const x = i.shape, w = x.radius / 1e3, b = x.sphere_center_distance_x / 1e3, F = x.sphere_center_distance_y / 1e3, H = w * 2;
+        c = /* @__PURE__ */ e.jsx(
+          "primitive",
+          {
+            object: new Ge(b, F, H, 2, w),
+            attach: "geometry"
+          }
+        );
+        break;
+      }
+      default:
+        console.warn(
+          "Unsupported safety zone shape type:",
+          i.shape.shape_type
+        ), c = null;
+    }
+    return /* @__PURE__ */ e.jsxs(
+      "mesh",
+      {
+        renderOrder: p,
+        position: o,
+        quaternion: Se(a),
+        children: [
+          c,
+          /* @__PURE__ */ e.jsx("meshStandardMaterial", { ...y, polygonOffsetFactor: -p })
+        ]
+      },
+      `safety-zone-${i.shape.shape_type}-${p}`
+    );
+  }, u = () => Object.values(t ?? {}).map(
+    (p, i) => f(i, p)
+  ), h = () => Array.isArray(t) ? t.map(
+    (p, i) => {
+      let o = [];
+      return p.geometry && (p.geometry.compound ? o = p.geometry.compound.child_geometries : p.geometry.convex_hull && (o = [p.geometry])), o.map((a, c) => {
+        if (!a.convex_hull) return null;
+        const y = a.convex_hull.vertices.map(
+          (x) => new g.Vector3(x.x / 1e3, x.y / 1e3, x.z / 1e3)
+        ), m = Z(y);
+        if (m.isCoplanar && m.normal) {
+          const w = new g.Vector3().addVectors(
+            y[0],
+            m.normal.multiplyScalar(1e-4)
+          );
+          y.push(w);
+        }
+        let j;
+        try {
+          j = new W(y);
+        } catch (x) {
+          return console.log("Error creating ConvexGeometry:", x), null;
+        }
+        return /* @__PURE__ */ e.jsx(
+          "mesh",
+          {
+            position: new g.Vector3(
+              a.init_pose.position.x,
+              a.init_pose.position.y,
+              a.init_pose.position.z
+            ),
+            quaternion: new g.Quaternion(
+              a.init_pose.orientation.x,
+              a.init_pose.orientation.y,
+              a.init_pose.orientation.z,
+              a.init_pose.orientation.w
+            ),
+            geometry: j,
+            children: /* @__PURE__ */ e.jsx(
+              "meshStandardMaterial",
+              {
+                attach: "material",
+                color: "#009f4d",
+                opacity: 0.2,
+                depthTest: !1,
+                depthWrite: !1,
+                transparent: !0,
+                polygonOffset: !0,
+                polygonOffsetFactor: -c
+              },
+              i
+            )
+          },
+          `${i}-${c}`
+        );
+      });
+    }
+  ) : null, d = C(() => Array.isArray(t) ? h() : u(), [t, h, u]);
+  return /* @__PURE__ */ e.jsx("group", { ...r, children: d });
+}
+function ct({
+  trajectory: t,
+  ...n
+}) {
+  var l;
+  const r = ((l = t.trajectory) == null ? void 0 : l.map((s) => s.tcp_pose ? new g.Vector3(
+    s.tcp_pose.position.x / 1e3,
+    s.tcp_pose.position.z / 1e3,
+    -s.tcp_pose.position.y / 1e3
+  ) : null).filter((s) => s !== null)) || [];
+  return /* @__PURE__ */ e.jsx("group", { ...n, children: r.length > 0 && /* @__PURE__ */ e.jsx(
+    $,
+    {
+      points: r,
+      lineWidth: 3,
+      polygonOffset: !0,
+      polygonOffsetFactor: 10,
+      polygonOffsetUnits: 10
+    }
+  ) });
+}
+const J = /* @__PURE__ */ new Map();
+async function E(t, n) {
+  if (J.has(t))
+    return J.get(t);
+  const r = (async () => {
+    var u;
+    const l = n || "", s = new De({ instanceUrl: l }), f = s.api.motionGroupModels;
+    (u = f.axios) != null && u.interceptors && f.axios.interceptors.request.use((h) => {
+      var d;
+      return (d = h.url) != null && d.includes("/glb") && (h.responseType = "blob"), h;
+    });
+    try {
+      const h = await s.api.motionGroupModels.getMotionGroupGlbModel(t);
+      return URL.createObjectURL(h);
+    } catch (h) {
+      throw console.error("Failed to fetch model:", h), h;
+    }
+  })();
+  return J.set(t, r), r;
+}
+function fe(t) {
+  function n(r) {
+    return r.children.length === 0 ? [r] : [r, ...r.children.flatMap((l) => n(l))];
+  }
+  return n(t).filter((r) => me(r));
+}
+function he(t) {
+  return t.name.endsWith("_FLG");
+}
+function me(t) {
+  return /_J[0-9]+$/.test(t.name);
+}
+function Je(t, n) {
+  let r;
+  function l(s) {
+    if (he(s)) {
+      if (r)
+        throw Error(
+          `Found multiple flange groups in robot model ${n}; first ${r.name} then ${s.name}. Only one _FLG group is allowed.`
+        );
+      r = s;
+    }
+    me(s), s.children.map(l);
+  }
+  if (l(t.scene), !r)
+    throw Error(
+      `No flange group found in robot model ${n}. Flange must be identified with a name ending in _FLG.`
+    );
+  return { gltf: t };
+}
+function xe({
+  rapidlyChangingMotionState: t,
+  dhParameters: n,
+  onRotationChanged: r,
+  children: l
+}) {
+  const s = _([]), f = _([]), u = _(null), { invalidate: h } = ae();
+  M(() => {
+    const o = t.joint_position.filter(
+      (a) => a !== void 0
+    );
+    return u.current = new ue(o, {
+      tension: 120,
+      // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20,
+      // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 1e-3
+    }), () => {
+      var a;
+      (a = u.current) == null || a.destroy();
+    };
+  }, []), le((o, a) => {
+    if (u.current) {
+      const c = u.current.update(a);
+      p(), c || h();
+    }
+  });
+  function d(o) {
+    o && (f.current = fe(o), p(), h());
+  }
+  function p() {
+    var a;
+    const o = ((a = u.current) == null ? void 0 : a.getCurrentValues()) || [];
+    if (r)
+      r(f.current, o);
+    else
+      for (const [c, y] of f.current.entries()) {
+        const m = n[c], j = m.theta || 0, x = m.reverse_rotation_direction ? -1 : 1;
+        y.rotation.y = x * (o[c] || 0) + j;
+      }
+  }
+  const i = G(() => {
+    const o = t.joint_position.filter(
+      (a) => a !== void 0
+    );
+    requestAnimationFrame(() => {
+      var a;
+      s.current = o, (a = u.current) == null || a.setTarget(o);
+    });
+  }, [t]);
+  return M(() => {
+    i();
+  }, [t, i]), pe(() => {
+    i();
+  }), /* @__PURE__ */ e.jsx("group", { ref: d, children: l });
+}
+const Be = "line", We = "mesh";
+function $e({
+  rapidlyChangingMotionState: t,
+  dhParameters: n,
+  ...r
+}) {
+  const l = new R(), s = _([]), f = _([]);
+  ke.useEffect(() => {
+    s.current = new Array(n.length).fill(null), f.current = new Array(n.length).fill(null);
+  }, [n.length]);
+  function u(p, i) {
+    const o = new k(), a = new B(), c = new k();
+    l.decompose(o, a, c);
+    const y = o.clone(), m = new R().makeRotationY(
+      p.theta + i * (p.reverse_rotation_direction ? -1 : 1)
+    ).multiply(new R().makeTranslation(0, p.d / 1e3, 0)).multiply(new R().makeTranslation(p.a / 1e3, 0, 0)).multiply(new R().makeRotationX(p.alpha));
+    return l.multiply(m), l.decompose(o, a, c), { a: y, b: o };
+  }
+  function h(p, i, o, a) {
+    if (!n)
+      return;
+    const c = n[p];
+    if (!c)
+      return;
+    const { a: y, b: m } = u(c, a);
+    i.geometry.setPositions([y.toArray(), m.toArray()].flat()), o.position.set(m.x, m.y, m.z);
+  }
+  function d(p, i) {
+    l.identity();
+    for (let o = 0; o < Math.min(p.length, i.length); o++) {
+      const a = s.current[o], c = f.current[o];
+      a && c && h(o, a, c, i[o]);
+    }
+  }
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      rapidlyChangingMotionState: t,
+      dhParameters: n,
+      onRotationChanged: d,
+      children: /* @__PURE__ */ e.jsxs("group", { ...r, name: "Scene", children: [
+        /* @__PURE__ */ e.jsxs("mesh", { children: [
+          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
+          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
+        ] }),
+        n.map((p, i) => {
+          const { a: o, b: a } = u(
+            p,
+            t.joint_position[i] ?? 0
+          ), c = `dhrobot_J0${i}`;
+          return /* @__PURE__ */ e.jsxs("group", { name: c, children: [
+            /* @__PURE__ */ e.jsx(
+              $,
+              {
+                ref: (y) => {
+                  s.current[i] = y;
+                },
+                name: Be,
+                points: [o, a],
+                color: "white",
+                lineWidth: 5
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "mesh",
+              {
+                ref: (y) => {
+                  f.current[i] = y;
+                },
+                name: We,
+                position: a,
+                children: [
+                  /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.01, 32, 32] }),
+                  /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "black", depthTest: !0 })
+                ]
+              },
+              "mesh_" + i
+            )
+          ] }, c);
+        })
+      ] })
+    }
+  ) });
+}
+const He = console.warn;
+function ye() {
+  return M(() => {
+    console.warn = (t) => {
+      t !== "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand" && He(t);
+    };
+  }, []), /* @__PURE__ */ e.jsx(e.Fragment, {});
+}
+function Ne(t) {
+  return t.type === "Mesh";
+}
+function qe({
+  url: t,
+  flangeRef: n,
+  postModelRender: r,
+  ...l
+}) {
+  const s = Le(t);
+  let f;
+  try {
+    f = Je(s, "robot.glb").gltf;
+  } catch (d) {
+    throw d;
+  }
+  const u = G(
+    (d) => {
+      d && r && r();
+    },
+    [r]
+  );
+  function h(d) {
+    try {
+      return Ne(d) ? d.geometry ? /* @__PURE__ */ e.jsx(
+        "mesh",
+        {
+          name: d.name,
+          geometry: d.geometry,
+          material: d.material,
+          position: d.position,
+          rotation: d.rotation
+        },
+        d.uuid
+      ) : /* @__PURE__ */ e.jsx("group", { name: d.name, position: d.position, rotation: d.rotation }, d.uuid) : /* @__PURE__ */ e.jsx(
+        "group",
+        {
+          name: d.name,
+          position: d.position,
+          rotation: d.rotation,
+          ref: he(d) ? n : void 0,
+          children: d.children.map(h)
+        },
+        d.uuid
+      );
+    } catch (p) {
+      return console.warn("Error rendering node", d.name, p), null;
+    }
+  }
+  return /* @__PURE__ */ e.jsx("group", { ...l, dispose: null, ref: u, children: h(f.scene) });
+}
+function ge({
+  modelURL: t,
+  flangeRef: n,
+  postModelRender: r,
+  ...l
+}) {
+  const [s, f] = A(null);
+  return M(() => {
+    (async () => {
+      try {
+        if (typeof t == "string")
+          f(t);
+        else {
+          const h = await t;
+          f(h);
+        }
+      } catch (h) {
+        console.error("Failed to resolve model URL:", h);
+      }
+    })();
+  }, [t]), s ? /* @__PURE__ */ e.jsx(
+    qe,
+    {
+      url: s,
+      flangeRef: n,
+      postModelRender: r,
+      ...l
+    }
+  ) : null;
+}
+const je = (t, n) => {
+  t.userData.isGhost || (t.traverse((r) => {
+    if (r instanceof g.Mesh) {
+      r.material instanceof g.Material && (r.material.colorWrite = !1);
+      const l = r.clone(), s = r.clone();
+      l.material = new g.MeshStandardMaterial({
+        depthTest: !0,
+        depthWrite: !0,
+        colorWrite: !1,
+        polygonOffset: !0,
+        polygonOffsetFactor: -1,
+        side: g.DoubleSide
+      }), l.userData.isGhost = !0, s.material = new g.MeshStandardMaterial({
+        color: n,
+        opacity: 0.3,
+        depthTest: !0,
+        depthWrite: !1,
+        transparent: !0,
+        polygonOffset: !0,
+        polygonOffsetFactor: -2,
+        side: g.DoubleSide
+      }), s.userData.isGhost = !0, r.parent && (r.parent.add(l), r.parent.add(s));
+    }
+  }), t.userData.isGhost = !0);
+}, we = (t) => {
+  if (!t.userData.isGhost) return;
+  const n = [];
+  t.traverse((r) => {
+    var l;
+    r instanceof g.Mesh && ((l = r.userData) != null && l.isGhost ? n.push(r) : r.material instanceof g.Material && (r.material.colorWrite = !0));
+  }), n.forEach((r) => {
+    r.parent && r.parent.remove(r);
+  }), t.userData.isGhost = !1;
+}, be = U(
+  ({
+    rapidlyChangingMotionState: t,
+    modelFromController: n,
+    dhParameters: r,
+    getModel: l = E,
+    flangeRef: s,
+    postModelRender: f,
+    transparentColor: u,
+    instanceUrl: h,
+    ...d
+  }) => {
+    const [p, i] = A(null), o = G((c) => {
+      i(c);
+    }, []);
+    M(() => {
+      p && (u ? je(p, u) : we(p));
+    }, [p, u]);
+    const a = /* @__PURE__ */ e.jsx(
+      $e,
+      {
+        rapidlyChangingMotionState: t,
+        dhParameters: r,
+        ...d
+      }
+    );
+    return /* @__PURE__ */ e.jsxs(
+      de,
+      {
+        fallback: a,
+        onError: (c) => {
+          console.warn(c);
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(ce, { fallback: a, children: /* @__PURE__ */ e.jsx("group", { ref: o, children: /* @__PURE__ */ e.jsx(
+            xe,
+            {
+              rapidlyChangingMotionState: t,
+              dhParameters: r,
+              children: /* @__PURE__ */ e.jsx(
+                ge,
+                {
+                  modelURL: (() => {
+                    const c = l(n, h);
+                    if (!c) {
+                      const y = new Blob([], { type: "model/gltf-binary" }), m = new File([y], `${n}.glb`, { type: "model/gltf-binary" });
+                      return Promise.resolve(URL.createObjectURL(m));
+                    }
+                    return c;
+                  })(),
+                  postModelRender: f,
+                  flangeRef: s,
+                  ...d
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ e.jsx(ye, {})
+        ]
+      }
+    );
+  }
+);
+function Ye({
+  connectedMotionGroup: t,
+  getModel: n = E,
+  flangeRef: r,
+  transparentColor: l,
+  postModelRender: s,
+  ...f
+}) {
+  return t.dhParameters ? /* @__PURE__ */ e.jsx(
+    be,
+    {
+      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
+      modelFromController: t.modelFromController || "",
+      dhParameters: t.dhParameters,
+      getModel: n,
+      flangeRef: r,
+      transparentColor: l,
+      postModelRender: s,
+      ...f
+    }
+  ) : null;
+}
+const ut = U(
+  Ve(
+    ({
+      robotName: t,
+      programState: n,
+      safetyState: r,
+      operationMode: l,
+      driveToHomeEnabled: s = !1,
+      onDriveToHomePress: f,
+      onDriveToHomeRelease: u,
+      connectedMotionGroup: h,
+      robotComponent: d = Ye,
+      customContentComponent: p,
+      className: i
+    }) => {
+      var Y;
+      const o = Fe(), { t: a } = Ie(), [c, y] = A(!1), m = _(null), j = _(null), [x, w] = A(!1), [b, F] = A({ width: 400, height: 600 }), [H, Me] = A(0);
+      M(() => {
+        const D = () => {
+          if (j.current) {
+            const { offsetWidth: K, offsetHeight: Q } = j.current;
+            w(K > Q), F({ width: K, height: Q });
+          }
+        };
+        D();
+        const X = new ResizeObserver(D);
+        return j.current && X.observe(j.current), () => {
+          X.disconnect();
+        };
+      }, []);
+      const N = G(() => {
+        Me((D) => D + 1);
+      }, []), P = G(() => {
+        !s || !f || (y(!0), f());
+      }, [s, f]), V = G(() => {
+        !s || !u || (y(!1), u());
+      }, [s, u]), q = G(() => {
+        c && u && (y(!1), u());
+      }, [c, u]), S = x ? b.width < 350 : b.height < 200, I = x ? b.height < 310 : b.height < 450;
+      return /* @__PURE__ */ e.jsx(
+        Pe,
+        {
+          ref: j,
+          className: i,
+          sx: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: x ? "row" : "column",
+            position: "relative",
+            overflow: "hidden",
+            minWidth: { xs: 180, sm: 220, md: 250 },
+            minHeight: x ? { xs: 200, sm: 240, md: 260 } : { xs: 150, sm: 180, md: 220 },
+            // Allow progressive hiding in portrait mode
+            border: `1px solid ${o.palette.divider}`,
+            borderRadius: "18px",
+            boxShadow: "none",
+            backgroundColor: ((Y = o.palette.backgroundPaperElevation) == null ? void 0 : Y[8]) || "#2A2A3F",
+            backgroundImage: "none"
+            // Override any gradient from elevation
+          },
+          children: x ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(
+              v,
+              {
+                sx: {
+                  flex: "0 0 50%",
+                  position: "relative",
+                  height: "100%",
+                  minHeight: "100%",
+                  maxHeight: "100%",
+                  borderRadius: 1,
+                  m: { xs: 1.5, sm: 2, md: 3 },
+                  mr: { xs: 0.75, sm: 1, md: 1.5 },
+                  overflow: "hidden",
+                  // Prevent content from affecting container size
+                  display: S ? "none" : "block"
+                },
+                children: !S && /* @__PURE__ */ e.jsxs(
+                  z,
+                  {
+                    orthographic: !0,
+                    camera: {
+                      position: [3, 2, 3],
+                      zoom: 1
+                    },
+                    shadows: !0,
+                    frameloop: "demand",
+                    style: {
+                      borderRadius: o.shape.borderRadius,
+                      width: "100%",
+                      height: "100%",
+                      background: "transparent",
+                      position: "absolute",
+                      top: 0,
+                      left: 0
+                    },
+                    dpr: [1, 2],
+                    gl: { alpha: !0, antialias: !0 },
+                    children: [
+                      /* @__PURE__ */ e.jsx(oe, {}),
+                      /* @__PURE__ */ e.jsx(ee, { fit: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ e.jsx(
+                        d,
+                        {
+                          connectedMotionGroup: h,
+                          postModelRender: N
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              v,
+              {
+                sx: {
+                  flex: "1",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "flex-start",
+                  width: S ? "100%" : "50%"
+                },
+                children: [
+                  /* @__PURE__ */ e.jsxs(
+                    v,
+                    {
+                      sx: {
+                        p: { xs: 1.5, sm: 2, md: 3 },
+                        pb: { xs: 1, sm: 1.5, md: 2 },
+                        textAlign: "left"
+                      },
+                      children: [
+                        /* @__PURE__ */ e.jsx(te, { variant: "h6", component: "h2", sx: { mb: 1 }, children: t }),
+                        /* @__PURE__ */ e.jsx(
+                          se,
+                          {
+                            programState: n,
+                            safetyState: r,
+                            operationMode: l
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsxs(
+                    v,
+                    {
+                      sx: {
+                        p: { xs: 1.5, sm: 2, md: 3 },
+                        pt: 0,
+                        flex: "1",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "space-between"
+                      },
+                      children: [
+                        !I && p && /* @__PURE__ */ e.jsxs(v, { children: [
+                          /* @__PURE__ */ e.jsx(p, {}),
+                          /* @__PURE__ */ e.jsx(
+                            re,
+                            {
+                              sx: {
+                                mt: 1,
+                                mb: 0,
+                                borderColor: o.palette.divider,
+                                opacity: 0.5
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e.jsx(
+                          v,
+                          {
+                            sx: {
+                              mt: !I && p ? "auto" : 0
+                            },
+                            children: /* @__PURE__ */ e.jsx(
+                              v,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  justifyContent: "flex-start",
+                                  mt: { xs: 1, sm: 1.5, md: 2 },
+                                  mb: { xs: 0.5, sm: 0.75, md: 1 }
+                                },
+                                children: /* @__PURE__ */ e.jsx(
+                                  ne,
+                                  {
+                                    ref: m,
+                                    variant: "contained",
+                                    color: "secondary",
+                                    size: "small",
+                                    disabled: !s,
+                                    onMouseDown: P,
+                                    onMouseUp: V,
+                                    onMouseLeave: q,
+                                    onTouchStart: P,
+                                    onTouchEnd: V,
+                                    sx: {
+                                      textTransform: "none",
+                                      px: 1.5,
+                                      py: 0.5
+                                    },
+                                    children: a("RobotCard.DriveToHome.bt")
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(
+            v,
+            {
+              sx: {
+                p: 3,
+                height: "100%",
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ e.jsxs(v, { children: [
+                  /* @__PURE__ */ e.jsx(te, { variant: "h6", component: "h2", sx: { mb: 1 }, children: t }),
+                  /* @__PURE__ */ e.jsx(
+                    se,
+                    {
+                      programState: n,
+                      safetyState: r,
+                      operationMode: l
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsx(
+                  v,
+                  {
+                    sx: {
+                      flex: S ? 0 : 1,
+                      position: "relative",
+                      minHeight: S ? 0 : { xs: 120, sm: 150, md: 200 },
+                      height: S ? 0 : "auto",
+                      borderRadius: 1,
+                      overflow: "hidden",
+                      display: S ? "none" : "block"
+                    },
+                    children: !S && /* @__PURE__ */ e.jsxs(
+                      z,
+                      {
+                        orthographic: !0,
+                        camera: {
+                          position: [3, 2, 3],
+                          zoom: 1
+                        },
+                        shadows: !0,
+                        frameloop: "demand",
+                        style: {
+                          borderRadius: o.shape.borderRadius,
+                          width: "100%",
+                          height: "100%",
+                          background: "transparent",
+                          position: "absolute"
+                        },
+                        dpr: [1, 2],
+                        gl: { alpha: !0, antialias: !0 },
+                        children: [
+                          /* @__PURE__ */ e.jsx(oe, {}),
+                          /* @__PURE__ */ e.jsx(ee, { fit: !0, clip: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ e.jsx(
+                            d,
+                            {
+                              connectedMotionGroup: h,
+                              postModelRender: N
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e.jsxs(v, { children: [
+                  !I && p && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                    /* @__PURE__ */ e.jsx(p, {}),
+                    /* @__PURE__ */ e.jsx(
+                      re,
+                      {
+                        sx: {
+                          mt: 1,
+                          mb: 0,
+                          borderColor: o.palette.divider,
+                          opacity: 0.5
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e.jsx(
+                    v,
+                    {
+                      sx: {
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        mt: !I && p ? { xs: 1, sm: 2, md: 5 } : { xs: 0.5, sm: 1, md: 2 },
+                        mb: { xs: 0.5, sm: 0.75, md: 1 }
+                      },
+                      children: /* @__PURE__ */ e.jsx(
+                        ne,
+                        {
+                          ref: m,
+                          variant: "contained",
+                          color: "secondary",
+                          size: "small",
+                          disabled: !s,
+                          onMouseDown: P,
+                          onMouseUp: V,
+                          onMouseLeave: q,
+                          onTouchStart: P,
+                          onTouchEnd: V,
+                          sx: {
+                            textTransform: "none",
+                            px: 1.5,
+                            py: 0.5
+                          },
+                          children: a("RobotCard.DriveToHome.bt")
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) })
+        }
+      );
+    }
+  )
+), pt = Array(6).fill(2 * Math.PI);
+function Re({
+  rapidlyChangingMotionState: t,
+  dhParameters: n,
+  onTranslationChanged: r,
+  children: l
+}) {
+  const s = _([]), f = _([]), u = _(null), { invalidate: h } = ae();
+  M(() => {
+    const o = t.joint_position.filter(
+      (a) => a !== void 0
+    );
+    return u.current = new ue(o, {
+      tension: 120,
+      // Controls spring stiffness - higher values create faster, more responsive motion
+      friction: 20,
+      // Controls damping - higher values reduce oscillation and create smoother settling
+      threshold: 1e-3
+    }), () => {
+      var a;
+      (a = u.current) == null || a.destroy();
+    };
+  }, []), le((o, a) => {
+    if (u.current) {
+      const c = u.current.update(a);
+      p(), c || h();
+    }
+  });
+  function d(o) {
+    o && (f.current = fe(o), p(), h());
+  }
+  function p() {
+    var a;
+    const o = ((a = u.current) == null ? void 0 : a.getCurrentValues()) || [];
+    if (r)
+      r(f.current, o);
+    else
+      for (const [c, y] of f.current.entries()) {
+        const j = n[c].reverse_rotation_direction ? -1 : 1;
+        y.position.y = j * (o[c] || 0) / 1e3;
+      }
+  }
+  const i = G(() => {
+    const o = t.joint_position.filter(
+      (a) => a !== void 0
+    );
+    requestAnimationFrame(() => {
+      var a;
+      s.current = o, (a = u.current) == null || a.setTarget(o);
+    });
+  }, [t]);
+  return M(() => {
+    i();
+  }, [t, i]), pe(() => {
+    i();
+  }), /* @__PURE__ */ e.jsx("group", { ref: d, children: l });
+}
+function ve({
+  rapidlyChangingMotionState: t,
+  dhParameters: n,
+  ...r
+}) {
+  const l = new R(), s = _(null), f = _(null);
+  function u(p) {
+    const i = new R();
+    for (let y = 0; y < n.length; y++) {
+      const m = n[y], j = p[y] ?? 0, x = new R().makeRotationY(m.theta).multiply(
+        new R().makeTranslation(
+          m.a / 1e3,
+          (m.d + j * (m.reverse_rotation_direction ? -1 : 1)) / 1e3,
+          0
+        )
+      ).multiply(new R().makeRotationX(m.alpha));
+      i.multiply(x);
+    }
+    const o = new k(), a = new B(), c = new k();
+    return i.decompose(o, a, c), o;
+  }
+  const h = u(t.joint_position);
+  function d(p, i) {
+    l.identity();
+    let o = new k();
+    for (let m = 0; m < n.length; m++) {
+      const j = i[m] ?? 0, x = n[m], w = new R().makeRotationY(x.theta).multiply(
+        new R().makeTranslation(
+          x.a / 1e3,
+          (x.d + j * (x.reverse_rotation_direction ? -1 : 1)) / 1e3,
+          0
+        )
+      ).multiply(new R().makeRotationX(x.alpha));
+      l.multiply(w);
+    }
+    const a = new k(), c = new B(), y = new k();
+    if (l.decompose(a, c, y), o = a, s.current && s.current.position.set(o.x, o.y, o.z), f.current) {
+      const m = f.current.geometry;
+      m && m.setPositions && m.setPositions([0, 0, 0, o.x, o.y, o.z]);
+    }
+  }
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
+    Re,
+    {
+      rapidlyChangingMotionState: t,
+      dhParameters: n,
+      onTranslationChanged: d,
+      children: /* @__PURE__ */ e.jsxs("group", { ...r, name: "Scene", children: [
+        /* @__PURE__ */ e.jsxs("mesh", { name: "Base", position: [0, 0, 0], children: [
+          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.02, 32, 32] }),
+          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "green", depthTest: !0 })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          $,
+          {
+            ref: f,
+            points: [new k(0, 0, 0), h],
+            color: "White",
+            lineWidth: 5
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("mesh", { ref: s, name: "TCP", position: h, children: [
+          /* @__PURE__ */ e.jsx("sphereGeometry", { args: [0.025, 32, 32] }),
+          /* @__PURE__ */ e.jsx("meshStandardMaterial", { color: "red", depthTest: !0 })
+        ] })
+      ] })
+    }
+  ) });
+}
+const _e = U(
+  ({
+    rapidlyChangingMotionState: t,
+    modelFromController: n,
+    dhParameters: r,
+    getModel: l = E,
+    flangeRef: s,
+    postModelRender: f,
+    transparentColor: u,
+    instanceUrl: h,
+    ...d
+  }) => {
+    const [p, i] = A(null), o = G((c) => {
+      i(c);
+    }, []);
+    M(() => {
+      p && (u ? je(p, u) : we(p));
+    }, [p, u]);
+    const a = /* @__PURE__ */ e.jsx(
+      ve,
+      {
+        rapidlyChangingMotionState: t,
+        dhParameters: r,
+        ...d
+      }
+    );
+    return /* @__PURE__ */ e.jsxs(
+      de,
+      {
+        fallback: a,
+        onError: (c) => {
+          console.warn(c);
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(ce, { fallback: a, children: /* @__PURE__ */ e.jsx("group", { ref: o, children: /* @__PURE__ */ e.jsx(
+            Re,
+            {
+              rapidlyChangingMotionState: t,
+              dhParameters: r,
+              children: /* @__PURE__ */ e.jsx(
+                ge,
+                {
+                  modelURL: (() => {
+                    const c = l(n, h);
+                    if (!c) {
+                      const y = new Blob([], { type: "model/gltf-binary" }), m = new File([y], `${n}.glb`, { type: "model/gltf-binary" });
+                      return Promise.resolve(URL.createObjectURL(m));
+                    }
+                    return c;
+                  })(),
+                  postModelRender: f,
+                  flangeRef: s,
+                  ...d
+                }
+              )
+            }
+          ) }) }),
+          /* @__PURE__ */ e.jsx(ye, {})
+        ]
+      }
+    );
+  }
+);
+function dt({
+  connectedMotionGroup: t,
+  getModel: n = E,
+  flangeRef: r,
+  transparentColor: l,
+  postModelRender: s,
+  ...f
+}) {
+  if (!t.dhParameters)
+    return null;
+  const u = t.modelFromController || "";
+  return u && n(u) ? /* @__PURE__ */ e.jsx(
+    _e,
+    {
+      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
+      modelFromController: u,
+      dhParameters: t.dhParameters,
+      getModel: n,
+      flangeRef: r,
+      transparentColor: l,
+      postModelRender: s,
+      ...f
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    ve,
+    {
+      rapidlyChangingMotionState: t.rapidlyChangingMotionState,
+      dhParameters: t.dhParameters,
+      ...f
+    }
+  );
+}
+const ie = {
+  [T.Abb]: [0, 0, 0, 0, Math.PI / 2, 0, 0],
+  [T.Fanuc]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
+  [T.Yaskawa]: [0, 0, 0, 0, -Math.PI / 2, 0, 0],
+  [T.Kuka]: [
+    0,
+    -Math.PI / 2,
+    Math.PI / 2,
+    0,
+    Math.PI / 2,
+    0,
+    0
+  ],
+  [T.Universalrobots]: [
+    0,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    Math.PI / 2,
+    -Math.PI / 2,
+    0
+  ]
+};
+function Xe(t) {
+  const [n] = t.split("_");
+  switch (n) {
+    case "ABB":
+      return T.Abb;
+    case "FANUC":
+      return T.Fanuc;
+    case "YASKAWA":
+      return T.Yaskawa;
+    case "KUKA":
+      return T.Kuka;
+    case "UniversalRobots":
+      return T.Universalrobots;
+    default:
+      return null;
+  }
+}
+function ft(t, n) {
+  const r = Xe(t);
+  return r && r in ie ? ie[r] : n || null;
+}
+const ht = U((t) => {
+  const {
+    inverseSolver: n,
+    dhParameters: r,
+    ...l
+  } = t, [s, f] = A(O.RevoluteJoint);
+  M(() => {
+    r.length && f(r[0].type ?? O.RevoluteJoint);
+  }, [r]);
+  const u = C(() => n === null && s === O.RevoluteJoint, [n, s]), h = C(() => n === null && s === O.PrismaticJoint, [n, s]);
+  return C(() => !!n, [n]) || u ? /* @__PURE__ */ e.jsx(be, { dhParameters: r, ...l }) : h ? /* @__PURE__ */ e.jsx(_e, { dhParameters: r, ...l }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+});
+export {
+  at as C,
+  dt as L,
+  ie as M,
+  oe as P,
+  Ye as R,
+  lt as S,
+  ct as T,
+  ht as a,
+  ut as b,
+  _e as c,
+  be as d,
+  pt as e,
+  E as f,
+  Xe as g,
+  ft as h
+};
+//# sourceMappingURL=MotionGroupVisualizer-CPEIGXUC.js.map