UNPKG

@wandelbots/wandelbots-js-react-components

Version:

React UI toolkit for building applications on top of the Wandelbots platform

977 lines (976 loc) • 29.5 kB
import { j as t, e as q } from "./index-CAib4NKw.js"; import * as d from "three"; import { Matrix4 as G, Vector3 as L, Quaternion as ie } from "three"; import { ConvexGeometry as X } from "three-stdlib"; import { useThree as ae, useFrame as le, Canvas as W } from "@react-three/fiber"; import { Environment as ce, Lightformer as v, Line as Z, useGLTF as ue, Bounds as $ } from "@react-three/drei"; import { useTheme as fe, Card as de, Box as y, Typography as B, Divider as H, Button as U } from "@mui/material"; import { observer as he } from "mobx-react-lite"; import me, { useRef as R, useEffect as T, useCallback as _, useState as C, Suspense as pe } from "react"; import { useTranslation as xe } from "react-i18next"; import { V as ge, c as ye, b as J, M as j } from "./index-CxasuX80.js"; import { ErrorBoundary as je } from "react-error-boundary"; function we(e) { switch (e.shape_type) { case "convex_hull": return new X( e.vertices.map( (r) => new d.Vector3( r[0] / 1e3, r[1] / 1e3, r[2] / 1e3 ) ) ); case "box": return new d.BoxGeometry( e.size_x / 1e3, e.size_y / 1e3, e.size_z / 1e3 ); case "sphere": return new d.SphereGeometry(e.radius / 1e3); case "capsule": return new d.CapsuleGeometry( e.radius / 1e3, e.cylinder_height / 1e3 ); case "cylinder": return new d.CylinderGeometry( e.radius / 1e3, e.radius / 1e3, e.height / 1e3 ); case "rectangle": return new d.BoxGeometry(e.size_x / 1e3, e.size_y / 1e3, 0); default: return console.warn(`${e.shape_type} is not supported`), new d.BufferGeometry(); } } function be({ name: e, collider: n, children: r }) { var u, l; const s = ((u = n.pose) == null ? void 0 : u.position) ?? [0, 0, 0], o = ((l = n.pose) == null ? void 0 : l.orientation) ?? [0, 0, 0]; return n.margin && console.warn(`${e} margin is not supported`), /* @__PURE__ */ t.jsx( "mesh", { name: e, position: new d.Vector3( s[0], s[1], s[2] ).divideScalar(1e3), rotation: new d.Euler(o[0], o[1], o[2], "XYZ"), geometry: we(n.shape), children: r } ); } function Me({ name: e, colliders: n, meshChildrenProvider: r, ...s }) { return /* @__PURE__ */ t.jsx("group", { name: e, ...s, children: Object.entries(n).map(([o, u]) => /* @__PURE__ */ t.jsx( be, { name: o, collider: u, children: r(o, u) }, o )) }); } function Xe({ scene: e, meshChildrenProvider: n }) { const r = e.colliders; return /* @__PURE__ */ t.jsx("group", { children: r && /* @__PURE__ */ t.jsx( Me, { meshChildrenProvider: n, colliders: r } ) }); } function N() { return /* @__PURE__ */ t.jsx(ce, { children: /* @__PURE__ */ t.jsx(ve, {}) }); } function ve({ positions: e = [2, 0, 2, 0, 2, 0, 2, 0] }) { return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [ /* @__PURE__ */ t.jsx( v, { intensity: 5, "rotation-x": Math.PI / 2, position: [0, 5, -9], scale: [10, 10, 1] } ), /* @__PURE__ */ t.jsx("group", { rotation: [0, 0.5, 0], children: /* @__PURE__ */ t.jsx("group", { children: e.map((n, r) => /* @__PURE__ */ t.jsx( v, { form: "circle", intensity: 5, rotation: [Math.PI / 2, 0, 0], position: [n, 4, r * 4], scale: [3, 1, 1] }, r )) }) }), /* @__PURE__ */ t.jsx( v, { intensity: 40, "rotation-y": Math.PI / 2, position: [-5, 1, -1], scale: [20, 0.1, 1] } ), /* @__PURE__ */ t.jsx( v, { intensity: 20, "rotation-y": -Math.PI, position: [-5, -2, -1], scale: [20, 0.1, 1] } ), /* @__PURE__ */ t.jsx( v, { "rotation-y": Math.PI / 2, position: [-5, -1, -1], scale: [20, 0.5, 1], intensity: 5 } ), /* @__PURE__ */ t.jsx( v, { "rotation-y": -Math.PI / 2, position: [10, 1, 0], scale: [20, 1, 1], intensity: 10 } ), /* @__PURE__ */ t.jsx( v, { form: "ring", color: "white", intensity: 5, scale: 10, position: [-15, 4, -18], target: [0, 0, 0] } ) ] }); } function Re(e) { if (e.length < 3) return console.log("Not enough vertices to define a plane"), { isCoplanar: !1 }; const n = new d.Vector3(e[0].x, e[0].y, e[0].z), r = new d.Vector3(e[1].x, e[1].y, e[1].z), s = new d.Vector3(e[2].x, e[2].y, e[2].z), o = new d.Vector3().subVectors(r, n), u = new d.Vector3().subVectors(s, n), l = new d.Vector3().crossVectors(o, u).normalize(); for (let a = 3; a < e.length; a++) { const p = new d.Vector3(e[a].x, e[a].y, e[a].z), h = new d.Vector3().subVectors(p, n), f = l.dot(h); if (Math.abs(f) > 1e-6) return console.log("Vertices are not on the same plane"), { isCoplanar: !1 }; } return { isCoplanar: !0, normal: l }; } function Ze({ safetyZones: e, ...n }) { return /* @__PURE__ */ t.jsx("group", { ...n, children: e.map((r, s) => { let o = []; return r.geometry && (r.geometry.compound ? o = r.geometry.compound.child_geometries : r.geometry.convex_hull && (o = [r.geometry])), o.map((u, l) => { if (!u.convex_hull) return null; const a = u.convex_hull.vertices.map( (f) => new d.Vector3(f.x / 1e3, f.y / 1e3, f.z / 1e3) ), p = Re(a); if (p.isCoplanar && p.normal) { const i = new d.Vector3().addVectors( a[0], p.normal.multiplyScalar(1e-4) ); a.push(i); } let h; try { h = new X(a); } catch (f) { return console.log("Error creating ConvexGeometry:", f), null; } return /* @__PURE__ */ t.jsx("mesh", { geometry: h, children: /* @__PURE__ */ t.jsx( "meshStandardMaterial", { attach: "material", color: "#009f4d", opacity: 0.2, depthTest: !1, depthWrite: !1, transparent: !0, polygonOffset: !0, polygonOffsetFactor: -l }, s ) }, `${s}-${l}`); }); }) }); } function Qe({ trajectory: e, ...n }) { var s; const r = ((s = e.trajectory) == null ? void 0 : s.map((o) => o.tcp_pose ? new d.Vector3( o.tcp_pose.position.x / 1e3, o.tcp_pose.position.z / 1e3, -o.tcp_pose.position.y / 1e3 ) : null).filter((o) => o !== null)) || []; return /* @__PURE__ */ t.jsx("group", { ...n, children: r.length > 0 && /* @__PURE__ */ t.jsx( Z, { points: r, lineWidth: 3, polygonOffset: !0, polygonOffsetFactor: 10, polygonOffsetUnits: 10 } ) }); } const Y = "0.0.0-semantically-released"; function Q(e) { let n = Y; return Y.startsWith("0.") && (n = ""), `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${n ? `@${n}` : ""}/public/models/${e}.glb`; } function _e(e) { function n(r) { return r.children.length === 0 ? [r] : [r, ...r.children.flatMap((s) => n(s))]; } return n(e).filter((r) => te(r)); } function ee(e) { return e.name.endsWith("_FLG"); } function te(e) { return /_J[0-9]+$/.test(e.name); } function Ge(e, n) { let r; function s(o) { if (ee(o)) { if (r) throw Error( `Found multiple flange groups in robot model ${n}; first ${r.name} then ${o.name}. Only one _FLG group is allowed.` ); r = o; } te(o), o.children.map(s); } if (s(e.scene), !r) throw Error( `No flange group found in robot model ${n}. Flange must be identified with a name ending in _FLG.` ); return { gltf: e }; } function re({ rapidlyChangingMotionState: e, dhParameters: n, onRotationChanged: r, children: s }) { const o = R([]), u = R([]), l = R(null), { invalidate: a } = ae(); T(() => { const i = e.joint_position.filter( (c) => c !== void 0 ); return l.current = new ge(i, { 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 c; (c = l.current) == null || c.destroy(); }; }, []), le((i, c) => { if (l.current) { const m = l.current.update(c); f(), m || a(); } }); function p(i) { i && (u.current = _e(i), f(), a()); } function h(i) { var c; o.current = i, (c = l.current) == null || c.setTarget(i); } function f() { var c; const i = ((c = l.current) == null ? void 0 : c.getCurrentValues()) || []; if (r) r(u.current, i); else for (const [m, x] of u.current.entries()) { const g = n[m], b = g.theta || 0, M = g.reverse_rotation_direction ? -1 : 1; x.rotation.y = M * (i[m] || 0) + b; } } return ye(() => { const i = e.joint_position.filter( (c) => c !== void 0 ); requestAnimationFrame(() => h(i)); }), /* @__PURE__ */ t.jsx("group", { ref: p, children: s }); } const Ce = "line", Fe = "mesh"; function Ie({ rapidlyChangingMotionState: e, dhParameters: n, ...r }) { const s = new G(), o = R([]), u = R([]); me.useEffect(() => { o.current = new Array(n.length).fill(null), u.current = new Array(n.length).fill(null); }, [n.length]); function l(h, f) { const i = new L(), c = new ie(), m = new L(); s.decompose(i, c, m); const x = i.clone(), g = new G().makeRotationY( h.theta + f * (h.reverse_rotation_direction ? -1 : 1) ).multiply(new G().makeTranslation(0, h.d / 1e3, 0)).multiply(new G().makeTranslation(h.a / 1e3, 0, 0)).multiply(new G().makeRotationX(h.alpha)); return s.multiply(g), s.decompose(i, c, m), { a: x, b: i }; } function a(h, f, i, c) { if (!n) return; const m = n[h]; if (!m) return; const { a: x, b: g } = l(m, c); f.geometry.setPositions([x.toArray(), g.toArray()].flat()), i.position.set(g.x, g.y, g.z); } function p(h, f) { s.identity(); for (let i = 0; i < Math.min(h.length, f.length); i++) { const c = o.current[i], m = u.current[i]; c && m && a(i, c, m, f[i]); } } return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx( re, { rapidlyChangingMotionState: e, dhParameters: n, onRotationChanged: p, children: /* @__PURE__ */ t.jsxs("group", { ...r, name: "Scene", children: [ /* @__PURE__ */ t.jsxs("mesh", { children: [ /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.01, 32, 32] }), /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "black", depthTest: !0 }) ] }), n.map((h, f) => { const { a: i, b: c } = l( h, e.joint_position[f] ?? 0 ), m = `dhrobot_J0${f}`; return /* @__PURE__ */ t.jsxs("group", { name: m, children: [ /* @__PURE__ */ t.jsx( Z, { ref: (x) => { o.current[f] = x; }, name: Ce, points: [i, c], color: "white", lineWidth: 5 } ), /* @__PURE__ */ t.jsxs( "mesh", { ref: (x) => { u.current[f] = x; }, name: Fe, position: c, children: [ /* @__PURE__ */ t.jsx("sphereGeometry", { args: [0.01, 32, 32] }), /* @__PURE__ */ t.jsx("meshStandardMaterial", { color: "black", depthTest: !0 }) ] }, "mesh_" + f ) ] }, m); }) ] }) } ) }); } const Se = console.warn; function Ve() { return T(() => { console.warn = (e) => { e !== "Cannot call the manual advancement of rafz whilst frameLoop is not set as demand" && Se(e); }; }, []), /* @__PURE__ */ t.jsx(t.Fragment, {}); } function De(e) { return e.type === "Mesh"; } function Te({ modelURL: e, flangeRef: n, postModelRender: r, ...s }) { const { gltf: o } = Ge( ue(e), e.split("/").pop() || e ), u = _( (a) => { a && r && r(); }, [e] ); function l(a) { return De(a) ? /* @__PURE__ */ t.jsx( "mesh", { name: a.name, geometry: a.geometry, material: a.material, position: a.position, rotation: a.rotation }, a.uuid ) : /* @__PURE__ */ t.jsx( "group", { name: a.name, position: a.position, rotation: a.rotation, ref: ee(a) ? n : void 0, children: a.children.map(l) }, a.uuid ); } return /* @__PURE__ */ t.jsx("group", { ...s, dispose: null, ref: u, children: l(o.scene) }); } const Ae = (e, n) => { e.userData.isGhost || (e.traverse((r) => { if (r instanceof d.Mesh) { r.material instanceof d.Material && (r.material.colorWrite = !1); const s = r.clone(), o = r.clone(); s.material = new d.MeshStandardMaterial({ depthTest: !0, depthWrite: !0, colorWrite: !1, polygonOffset: !0, polygonOffsetFactor: -1, side: d.DoubleSide }), s.userData.isGhost = !0, o.material = new d.MeshStandardMaterial({ color: n, opacity: 0.3, depthTest: !0, depthWrite: !1, transparent: !0, polygonOffset: !0, polygonOffsetFactor: -2, side: d.DoubleSide }), o.userData.isGhost = !0, r.parent && (r.parent.add(s), r.parent.add(o)); } }), e.userData.isGhost = !0); }, ke = (e) => { if (!e.userData.isGhost) return; const n = []; e.traverse((r) => { var s; r instanceof d.Mesh && ((s = r.userData) != null && s.isGhost ? n.push(r) : r.material instanceof d.Material && (r.material.colorWrite = !0)); }), n.forEach((r) => { r.parent && r.parent.remove(r); }), e.userData.isGhost = !1; }, ze = q( ({ rapidlyChangingMotionState: e, modelFromController: n, dhParameters: r, getModel: s = Q, flangeRef: o, postModelRender: u, transparentColor: l, ...a }) => { const [p, h] = C(null), f = _((c) => { h(c); }, []); T(() => { p && (l ? Ae(p, l) : ke(p)); }, [p, l]); const i = /* @__PURE__ */ t.jsx( Ie, { rapidlyChangingMotionState: e, dhParameters: r, ...a } ); return /* @__PURE__ */ t.jsxs( je, { fallback: i, onError: (c) => { console.error(c); }, children: [ /* @__PURE__ */ t.jsx(pe, { fallback: i, children: /* @__PURE__ */ t.jsx("group", { ref: f, children: /* @__PURE__ */ t.jsx( re, { rapidlyChangingMotionState: e, dhParameters: r, children: /* @__PURE__ */ t.jsx( Te, { modelURL: s(n), postModelRender: u, flangeRef: o, ...a } ) } ) }) }), /* @__PURE__ */ t.jsx(Ve, {}) ] } ); } ); function Pe({ connectedMotionGroup: e, getModel: n = Q, flangeRef: r, transparentColor: s, postModelRender: o, ...u }) { return e.dhParameters ? /* @__PURE__ */ t.jsx( ze, { rapidlyChangingMotionState: e.rapidlyChangingMotionState, modelFromController: e.modelFromController || "", dhParameters: e.dhParameters, getModel: n, flangeRef: r, transparentColor: s, postModelRender: o, ...u } ) : null; } const et = q( he( ({ robotName: e, programState: n, safetyState: r, operationMode: s, driveToHomeEnabled: o = !1, onDriveToHomePress: u, onDriveToHomeRelease: l, connectedMotionGroup: a, robotComponent: p = Pe, customContentComponent: h, className: f }) => { var z; const i = fe(), { t: c } = xe(), [m, x] = C(!1), g = R(null), b = R(null), [M, ne] = C(!1), [F, oe] = C({ width: 400, height: 600 }), [Ee, se] = C(0); T(() => { const D = () => { if (b.current) { const { offsetWidth: O, offsetHeight: E } = b.current; ne(O > E), oe({ width: O, height: E }); } }; D(); const P = new ResizeObserver(D); return b.current && P.observe(b.current), () => { P.disconnect(); }; }, []); const A = _(() => { se((D) => D + 1); }, []), I = _(() => { !o || !u || (x(!0), u()); }, [o, u]), S = _(() => { !o || !l || (x(!1), l()); }, [o, l]), k = _(() => { m && l && (x(!1), l()); }, [m, l]), w = M ? F.width < 350 : F.height < 200, V = M ? F.height < 310 : F.height < 450; return /* @__PURE__ */ t.jsx( de, { ref: b, className: f, sx: { width: "100%", height: "100%", display: "flex", flexDirection: M ? "row" : "column", position: "relative", overflow: "hidden", minWidth: { xs: 180, sm: 220, md: 250 }, minHeight: M ? { xs: 200, sm: 240, md: 260 } : { xs: 150, sm: 180, md: 220 }, // Allow progressive hiding in portrait mode border: `1px solid ${i.palette.divider}`, borderRadius: "18px", boxShadow: "none", backgroundColor: ((z = i.palette.backgroundPaperElevation) == null ? void 0 : z[8]) || "#2A2A3F", backgroundImage: "none" // Override any gradient from elevation }, children: M ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [ /* @__PURE__ */ t.jsx( y, { 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: w ? "none" : "block" }, children: !w && /* @__PURE__ */ t.jsxs( W, { orthographic: !0, camera: { position: [3, 2, 3], zoom: 1 }, shadows: !0, frameloop: "demand", style: { borderRadius: i.shape.borderRadius, width: "100%", height: "100%", background: "transparent", position: "absolute", top: 0, left: 0 }, dpr: [1, 2], gl: { alpha: !0, antialias: !0 }, children: [ /* @__PURE__ */ t.jsx(N, {}), /* @__PURE__ */ t.jsx($, { fit: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ t.jsx( p, { connectedMotionGroup: a, postModelRender: A } ) }) ] } ) } ), /* @__PURE__ */ t.jsxs( y, { sx: { flex: "1", display: "flex", flexDirection: "column", justifyContent: "flex-start", width: w ? "100%" : "50%" }, children: [ /* @__PURE__ */ t.jsxs( y, { sx: { p: { xs: 1.5, sm: 2, md: 3 }, pb: { xs: 1, sm: 1.5, md: 2 }, textAlign: "left" }, children: [ /* @__PURE__ */ t.jsx(B, { variant: "h6", component: "h2", sx: { mb: 1 }, children: e }), /* @__PURE__ */ t.jsx( J, { programState: n, safetyState: r, operationMode: s } ) ] } ), /* @__PURE__ */ t.jsxs( y, { sx: { p: { xs: 1.5, sm: 2, md: 3 }, pt: 0, flex: "1", display: "flex", flexDirection: "column", justifyContent: "space-between" }, children: [ !V && h && /* @__PURE__ */ t.jsxs(y, { children: [ /* @__PURE__ */ t.jsx(h, {}), /* @__PURE__ */ t.jsx( H, { sx: { mt: 1, mb: 0, borderColor: i.palette.divider, opacity: 0.5 } } ) ] }), /* @__PURE__ */ t.jsx( y, { sx: { mt: !V && h ? "auto" : 0 }, children: /* @__PURE__ */ t.jsx( y, { 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__ */ t.jsx( U, { ref: g, variant: "contained", color: "secondary", size: "small", disabled: !o, onMouseDown: I, onMouseUp: S, onMouseLeave: k, onTouchStart: I, onTouchEnd: S, sx: { textTransform: "none", px: 1.5, py: 0.5 }, children: c("RobotCard.DriveToHome.bt") } ) } ) } ) ] } ) ] } ) ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs( y, { sx: { p: 3, height: "100%", display: "flex", flexDirection: "column" }, children: [ /* @__PURE__ */ t.jsxs(y, { children: [ /* @__PURE__ */ t.jsx(B, { variant: "h6", component: "h2", sx: { mb: 1 }, children: e }), /* @__PURE__ */ t.jsx( J, { programState: n, safetyState: r, operationMode: s } ) ] }), /* @__PURE__ */ t.jsx( y, { sx: { flex: w ? 0 : 1, position: "relative", minHeight: w ? 0 : { xs: 120, sm: 150, md: 200 }, height: w ? 0 : "auto", borderRadius: 1, overflow: "hidden", display: w ? "none" : "block" }, children: !w && /* @__PURE__ */ t.jsxs( W, { orthographic: !0, camera: { position: [3, 2, 3], zoom: 1 }, shadows: !0, frameloop: "demand", style: { borderRadius: i.shape.borderRadius, width: "100%", height: "100%", background: "transparent", position: "absolute" }, dpr: [1, 2], gl: { alpha: !0, antialias: !0 }, children: [ /* @__PURE__ */ t.jsx(N, {}), /* @__PURE__ */ t.jsx($, { fit: !0, clip: !0, observe: !0, margin: 1, maxDuration: 1, children: /* @__PURE__ */ t.jsx( p, { connectedMotionGroup: a, postModelRender: A } ) }) ] } ) } ), /* @__PURE__ */ t.jsxs(y, { children: [ !V && h && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [ /* @__PURE__ */ t.jsx(h, {}), /* @__PURE__ */ t.jsx( H, { sx: { mt: 1, mb: 0, borderColor: i.palette.divider, opacity: 0.5 } } ) ] }), /* @__PURE__ */ t.jsx( y, { sx: { display: "flex", justifyContent: "flex-start", mt: !V && h ? { xs: 1, sm: 2, md: 5 } : { xs: 0.5, sm: 1, md: 2 }, mb: { xs: 0.5, sm: 0.75, md: 1 } }, children: /* @__PURE__ */ t.jsx( U, { ref: g, variant: "contained", color: "secondary", size: "small", disabled: !o, onMouseDown: I, onMouseUp: S, onMouseLeave: k, onTouchStart: I, onTouchEnd: S, sx: { textTransform: "none", px: 1.5, py: 0.5 }, children: c("RobotCard.DriveToHome.bt") } ) } ) ] }) ] } ) }) } ); } ) ), tt = Array(6).fill(2 * Math.PI), K = { [j.Abb]: [0, 0, 0, 0, Math.PI / 2, 0, 0], [j.Fanuc]: [0, 0, 0, 0, -Math.PI / 2, 0, 0], [j.Yaskawa]: [0, 0, 0, 0, -Math.PI / 2, 0, 0], [j.Kuka]: [ 0, -Math.PI / 2, Math.PI / 2, 0, Math.PI / 2, 0, 0 ], [j.Universalrobots]: [ 0, -Math.PI / 2, -Math.PI / 2, -Math.PI / 2, Math.PI / 2, -Math.PI / 2, 0 ] }; function Oe(e) { const [n] = e.split("_"); switch (n) { case "ABB": return j.Abb; case "FANUC": return j.Fanuc; case "YASKAWA": return j.Yaskawa; case "KUKA": return j.Kuka; case "UniversalRobots": return j.Universalrobots; default: return null; } } function rt(e, n) { const r = Oe(e); return r && r in K ? K[r] : n || null; } export { Xe as C, K as M, N as P, et as R, Ze as S, Qe as T, tt as a, Pe as b, ze as c, Q as d, Oe as e, rt as g }; //# sourceMappingURL=manufacturerHomePositions-CgaG5vaK.js.map