@wandelbots/wandelbots-js-react-components 3.5.1 → 3.6.0-pr.feat-model-retrieval-from-rdp.463.3cb7d2e

package/dist/wandelscript.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-Dj7TBCkF.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-D6_vS5Uk.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
 //# sourceMappingURL=wandelscript.cjs.js.map

package/dist/wandelscript.es.js

@@ -1,4 +1,4 @@
-import { W as t } from "./WandelscriptEditor-DnJvITTA.js";
+import { W as t } from "./WandelscriptEditor-7eN-Yw7m.js";
 export {
   t as WandelscriptEditor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "3.5.1",
+  "version": "3.6.0-pr.feat-model-retrieval-from-rdp.463.3cb7d2e",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -50,7 +50,8 @@
     "ci:test:runner": "wait-on tcp:127.0.0.1:9009 && test-storybook --url http://127.0.0.1:9009 --index-json --browsers chromium",
     "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build-storybook": "storybook build",
-    "prepare": "husky || true"
+    "prepare": "husky || true",
+    "td": "tsx scripts/test-deploy.ts"
   },
   "repository": {
     "type": "git",
@@ -63,6 +64,10 @@
   ],
   "author": "Wandelbots",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.14.0",
+    "npm": ">=8.0.0"
+  },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -88,7 +93,7 @@
     "@types/react": "^19.1.8",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^3.4.1",
+    "@wandelbots/nova-js": "^3.5.0",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",
@@ -119,6 +124,7 @@
     "three": "^0.182.0",
     "three-stdlib": "^2.35.14",
     "ts-dedent": "^2.2.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.8.2",
     "unplugin": "^1.15.0",
     "vite": "^6.2.0",
@@ -170,7 +176,11 @@
   "dependencies": {
     "@mui/x-charts": "8.24.0",
     "@mui/x-data-grid": "8.24.0",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "@wandelbots/nova-api": "26.1.0-rc.2",
+    "@wandelbots/nova-js": "3.5.0",
+    "axios": "^1.13.2",
+    "dotenv": "^17.2.3",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",

package/src/components/RobotCard.tsx

@@ -52,7 +52,7 @@ export interface RobotCardProps {
     flangeRef?: React.Ref<Group>
     postModelRender?: () => void
     transparentColor?: string
-    getModel?: (modelFromController: string) => string
+    getModel?: (modelFromController: string) => Promise<string>
   }>
   /** Custom component to render in the content area (optional) */
   customContentComponent?: React.ComponentType<Record<string, unknown>>

package/src/components/robots/GenericRobot.tsx

@@ -1,12 +1,12 @@
 import { useGLTF } from "@react-three/drei"
 import type { ThreeElements } from "@react-three/fiber"
-import React, { useCallback } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
 import { isFlange, parseRobotModel } from "./robotModelLogic"
 
 export type RobotModelProps = {
-  modelURL: string
+  modelURL: string | Promise<string>
   /**
    * Called after a robot model has been loaded and
    * rendered into the threejs scene
@@ -19,16 +19,19 @@ function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
 }
 
-export function GenericRobot({
-  modelURL,
-  flangeRef,
-  postModelRender,
-  ...props
-}: RobotModelProps) {
-  const { gltf } = parseRobotModel(
-    useGLTF(modelURL),
-    modelURL.split("/").pop() || modelURL,
-  )
+// Separate component that only renders when we have a valid URL
+function LoadedRobotModel({ 
+  url, 
+  flangeRef, 
+  postModelRender, 
+  ...props 
+}: { 
+  url: string
+  flangeRef?: React.Ref<Group>
+  postModelRender?: () => void
+} & ThreeElements["group"]) {
+  const gltfResult = useGLTF(url)
+  const { gltf } = parseRobotModel(gltfResult, 'robot.glb')
 
   const groupRef: React.RefCallback<Group> = useCallback(
     (group) => {
@@ -36,7 +39,7 @@ export function GenericRobot({
         postModelRender()
       }
     },
-    [modelURL],
+    [postModelRender],
   )
 
   function renderNode(node: Object3D): React.ReactNode {
@@ -72,3 +75,43 @@ export function GenericRobot({
     </group>
   )
 }
+
+export function GenericRobot({
+  modelURL,
+  flangeRef,
+  postModelRender,
+  ...props
+}: RobotModelProps) {
+  const [resolvedURL, setResolvedURL] = useState<string | null>(null)
+  
+  useEffect(() => {
+    const resolveURL = async () => {
+      try {
+        if (typeof modelURL === 'string') {
+          setResolvedURL(modelURL)
+        } else {
+          const url = await modelURL
+          setResolvedURL(url)
+        }
+      } catch (error) {
+        console.error('Failed to resolve model URL:', error)
+      }
+    }
+    
+    resolveURL()
+  }, [modelURL])
+
+  // Don't render until we have a resolved URL
+  if (!resolvedURL) {
+    return null // Loading state
+  }
+  
+  return (
+    <LoadedRobotModel 
+      url={resolvedURL}
+      flangeRef={flangeRef}
+      postModelRender={postModelRender}
+      {...props}
+    />
+  )
+}

package/src/components/robots/Robot.tsx

@@ -7,7 +7,7 @@ import { SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
-  getModel?: (modelFromController: string) => string
+  getModel?: (modelFromController: string) => Promise<string>
   flangeRef?: React.Ref<Group>
   transparentColor?: string
   postModelRender?: () => void

package/src/components/robots/SupportedRobot.tsx

@@ -22,7 +22,7 @@ export type SupportedRobotProps = {
   modelFromController: string
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
-  getModel?: (modelFromController: string) => string
+  getModel?: (modelFromController: string) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -77,7 +77,15 @@ export const SupportedRobot = externalizeComponent(
               dhParameters={dhParameters}
             >
               <GenericRobot
-                modelURL={getModel(modelFromController)}
+                modelURL={(() => {
+                  const result = getModel(modelFromController)
+                  if (!result) {
+                    const mockBlob = new Blob([], { type: 'model/gltf-binary' })
+                    const mockFile = new File([mockBlob], `${modelFromController}.glb`, { type: 'model/gltf-binary' })
+                    return Promise.resolve(URL.createObjectURL(mockFile))
+                  }
+                  return result
+                })()}
                 postModelRender={postModelRender}
                 flangeRef={flangeRef}
                 {...props}

package/src/components/robots/robotModelLogic.ts

@@ -1,13 +1,47 @@
+import { NovaClient } from "@wandelbots/nova-js/v2"
 import type { Object3D } from "three"
 import type { GLTF } from "three-stdlib"
-import { version } from "../../../package.json"
 
-export function defaultGetModel(modelFromController: string): string {
-  let useVersion = version
-  if (version.startsWith("0.")) {
-    useVersion = ""
+const modelCache = new Map<string, Promise<string>>()
+
+export async function defaultGetModel(modelFromController: string): Promise<string> {
+  // Check cache first
+  if (modelCache.has(modelFromController)) {
+    return modelCache.get(modelFromController)!
   }
-  return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${useVersion ? `@${useVersion}` : ""}/public/models/${modelFromController}.glb`
+  
+  // Create the promise and cache it immediately to prevent duplicate calls
+  const modelPromise = (async () => {
+    const instanceUrl = import.meta.env.WANDELAPI_BASE_URL || import.meta.env.VITE_NOVA_INSTANCE_URL
+    
+    const nova = new NovaClient({ instanceUrl })
+    
+    // Configure axios to handle binary responses for GLB files
+    const apiInstance = nova.api.motionGroupModels as any
+    if (apiInstance.axios?.interceptors) {
+      apiInstance.axios.interceptors.request.use((config: any) => {
+        if (config.url?.includes('/glb')) {
+          config.responseType = 'blob'
+        }
+        return config
+      })
+    }
+    
+    try {
+      const file = await nova.api.motionGroupModels.getMotionGroupGlbModel(modelFromController)
+      
+      // Create object URL from the file and return it
+      const url = URL.createObjectURL(file)
+      return url
+    } catch (error) {
+      console.error("Failed to fetch model:", error)
+      throw error
+    }
+  })()
+  
+  // Cache the promise
+  modelCache.set(modelFromController, modelPromise)
+  return modelPromise
 }
 
 /**

package/src/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+// Ensure ImportMeta.env types from Vite are available to TypeScript.

package/src/lib/JoggerConnection.ts

@@ -390,14 +390,14 @@ export class JoggerConnection {
     axis: "x" | "y" | "z"
     direction: "-" | "+"
     motion:
-      | {
-          type: "rotate"
-          distanceRads: number
-        }
-      | {
-          type: "translate"
-          distanceMm: number
-        }
+    | {
+      type: "rotate"
+      distanceRads: number
+    }
+    | {
+      type: "translate"
+      distanceMm: number
+    }
   }) {
     const commands: MotionCommand[] = []
 
@@ -559,8 +559,8 @@ export class JoggerConnection {
         } else {
           throw new Error(
             result?.add_trajectory_error?.message ||
-              result?.message ||
-              "Failed to execute trajectory, unknown error",
+            result?.message ||
+            "Failed to execute trajectory, unknown error",
           )
         }
       }

package/src/lib/MotionStreamConnection.ts

@@ -31,7 +31,7 @@ export class MotionStreamConnection {
     const controller =
       await nova.api.controller.getCurrentRobotControllerState(controllerId)
     const motionGroup = controller?.motion_groups.find(
-      (mg) => mg.motion_group === motionGroupId,
+      (mg: MotionGroupState) => mg.motion_group === motionGroupId,
     )
     if (!controller || !motionGroup) {
       throw new Error(

package/dist/LoadingCover-r2yhJZF9.cjs

@@ -1,2 +0,0 @@
-"use strict";const t=require("./index-DxwppshT.cjs"),n=require("@mui/material"),x=require("lodash-es"),a=require("react");function l(e){try{return JSON.stringify(e)}catch{return}}function m(e,s){throw new Error(s+` ${JSON.stringify(e)}`)}function g(e){var s,r,o,i;return e instanceof t.AxiosError&&e.code==="ERR_NETWORK"?"Failed to connect to the server. Please check your internet connection.":e instanceof t.AxiosError&&e.response?`${(s=e.response)==null?void 0:s.status} ${(r=e.response)==null?void 0:r.statusText} from ${(o=e.response)==null?void 0:o.config.url}: ${JSON.stringify((i=e.response)==null?void 0:i.data)}`:e instanceof Error?e.message:`Unexpected error: ${l(e)||e}`}const d=e=>{const s=e.softTimeout||3e3,[r,o]=a.useState(!1),i=n.useTheme();return a.useEffect(()=>{const u=setTimeout(()=>{o(!0)},s);return()=>clearTimeout(u)}),t.jsxRuntimeExports.jsx(n.Stack,{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",sx:{color:i.palette.text.primary},children:e.error?t.jsxRuntimeExports.jsx(c,{loadingMessage:e.message,error:e.error}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(n.CircularProgress,{sx:{marginBottom:"24px"}}),!!e.message&&t.jsxRuntimeExports.jsx("div",{children:e.message}),t.jsxRuntimeExports.jsx(n.Stack,{sx:{visibility:r?"visible":"hidden",marginTop:"1rem",color:i.palette.text.secondary},children:"This is taking longer than expected..."})]})})},c=e=>{const s=g(e.error),r=e.error instanceof Error?e.error.stack:null,o=n.useTheme();return t.jsxRuntimeExports.jsxs(n.Stack,{sx:{maxHeight:"100%",maxWidth:"min(100%, 800px)",padding:2,overflow:"auto",color:o.palette.error.main,"& pre":{whiteSpace:"pre-wrap",wordBreak:"break-word",paddingBottom:"3rem"}},children:[(e.loadingMessage?`Error while ${x.lowerFirst(n.capitalize(e.loadingMessage))} - `:"")+s,t.jsxRuntimeExports.jsx("br",{}),r&&t.jsxRuntimeExports.jsx("pre",{children:r})]})};exports.LoadingCover=d;exports.LoadingErrorMessage=c;exports.assertUnreachable=m;
-//# sourceMappingURL=LoadingCover-r2yhJZF9.cjs.map

package/dist/WandelscriptEditor-Dj7TBCkF.cjs

@@ -1,2 +0,0 @@
-"use strict";var w=Object.create;var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!b.call(e,i)&&i!==n&&p(e,i,{get:()=>t[i],enumerable:!(s=k(t,i))||s.enumerable});return e};var c=(e,t,n)=>(n=e!=null?w(x(e)):{},v(t||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));const r=require("./index-DxwppshT.cjs"),u=require("react"),T=require("@mui/material"),y=require("./LoadingCover-r2yhJZF9.cjs"),C={$schema:"https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",name:"wandelscript",patterns:[{include:"#keywords"},{include:"#strings"},{include:"#comments"},{include:"#functions"}],repository:{keywords:{patterns:[{name:"keyword.control.flow.wandelscript",match:"\\b(move|via|to|interrupt|def|False|True|for|if|else|elif|while|return|switch|activate|deactivate|print|and|or|not)\\b"}]},strings:{name:"string.quoted.double.wandelscript",begin:'"',end:'"',patterns:[{name:"constant.character.escape.wandelscript",match:"\\\\."}]},comments:{patterns:[{begin:"#",beginCaptures:{0:{name:"punctuation.definition.comment.wandelscript"}},end:"$",name:"comment.line.number-sign.wandelscript"}]},functions:{patterns:[{match:"[a-zA-Z_-]+\\(",name:"entity.name.function.wandelscript"}]}},scopeName:"source.wandelscript"},E=u.lazy(()=>import("@monaco-editor/react"));let l=null;async function S(){if(!l){const[{createHighlighter:e},{shikiToMonaco:t}]=await Promise.all([import("shiki"),import("@shikijs/monaco")]);l={shiki:await e({langs:[C],themes:["dark-plus","light-plus"]}),shikiToMonaco:t}}return l}const j=r.externalizeComponent(e=>{const t=T.useTheme(),[n,s]=u.useState("dark-plus"),i=t.palette.mode==="dark"?"dark-plus":"light-plus";async function g(a){var m,d;a.languages.register({id:"wandelscript"}),a.languages.setLanguageConfiguration("wandelscript",{comments:{lineComment:"#"},brackets:[["(",")"],["[","]"]],autoClosingPairs:[{open:"[",close:"]"},{open:"(",close:")"}],surroundingPairs:[{open:"[",close:"]"},{open:"(",close:")"}]});const{shiki:o,shikiToMonaco:h}=await S();h(o,a),a.editor.defineTheme(i,((d=(m=t.componentsExt)==null?void 0:m.WandelscriptEditor)==null?void 0:d.monacoTheme)??{base:t.palette.mode==="dark"?"vs-dark":"vs",inherit:!0,rules:[],colors:{}}),e.monacoSetup&&e.monacoSetup(a),s(i)}return r.jsxRuntimeExports.jsx(u.Suspense,{fallback:r.jsxRuntimeExports.jsx(y.LoadingCover,{}),children:r.jsxRuntimeExports.jsx(E,{value:e.code,onMount:(a,o)=>{g(o)},onChange:e.onChange,defaultLanguage:"wandelscript",theme:n,options:{minimap:{enabled:!1},wordWrap:"on",automaticLayout:!0,...e.monacoOptions}})})});exports.WandelscriptEditor=j;
-//# sourceMappingURL=WandelscriptEditor-Dj7TBCkF.cjs.map