@wandelbots/wandelbots-js-react-components 1.13.4 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wandelbots/wandelbots-js-react-components",
3
- "version": "1.13.4",
3
+ "version": "1.14.0",
4
4
  "description": "React UI toolkit for building applications on top of the Wandelbots platform",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -23,7 +23,7 @@
23
23
  "dev:pack": "nodemon -V -w src -e '*' -x \"npm run build && npm pack\"",
24
24
  "dev:build": "nodemon -V -w src -e '*' -x \"vite build && tsc --declaration --emitDeclarationOnly\"",
25
25
  "dev:wbjs": "nodemon --watch $WBJS_PATH -e tgz --exec 'npm install file:$WBJS_PATH && storybook dev -p 6006 --no-open'",
26
- "tsc": "tsc --pretty --noEmit",
26
+ "tsc": "tsc --pretty --noEmit -p stories/tsconfig.json",
27
27
  "test": "npm run build",
28
28
  "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
29
29
  "build-storybook": "storybook build"
@@ -55,19 +55,20 @@
55
55
  "@storybook/react-vite": "^8.2.9",
56
56
  "@storybook/test": "^8.2.9",
57
57
  "@storybook/test-runner": "^0.19.1",
58
+ "@storybook/types": "^8.2.9",
58
59
  "@svgr/rollup": "^8.1.0",
59
60
  "@types/lodash-es": "^4.17.12",
60
- "@types/react": "^18.3.4",
61
- "@types/three": "^0.167.2",
61
+ "@types/react": "^18.3.5",
62
+ "@types/three": "^0.168.0",
62
63
  "@vitejs/plugin-react": "^4.3.1",
63
64
  "nodemon": "^3.1.4",
64
- "postcss": "^8.4.41",
65
+ "postcss": "^8.4.44",
65
66
  "prettier-eslint": "^16.3.0",
66
67
  "prop-types": "^15.8.1",
67
68
  "react": "^18.3.1",
68
69
  "react-dom": "^18.3.1",
69
70
  "rimraf": "^6.0.1",
70
- "rollup": "^4.21.0",
71
+ "rollup": "^4.21.2",
71
72
  "rollup-plugin-dts": "^6.1.1",
72
73
  "rollup-plugin-gltf": "^4.0.0",
73
74
  "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -90,7 +91,7 @@
90
91
  "@react-three/fiber": ">=8",
91
92
  "react": "^18.2.0",
92
93
  "react-dom": "^18.2.0",
93
- "three": ">=0.167",
94
+ "three": ">=0.168",
94
95
  "three-stdlib": ">=2"
95
96
  },
96
97
  "peerDependenciesMeta": {
@@ -102,14 +103,14 @@
102
103
  "@monaco-editor/react": "^4.6.0",
103
104
  "@mui/icons-material": "^5.16.7",
104
105
  "@mui/lab": "^5.0.0-alpha.173",
105
- "@shikijs/monaco": "^1.14.1",
106
- "@wandelbots/wandelbots-js": "^1.8.3",
106
+ "@shikijs/monaco": "^1.16.1",
107
+ "@wandelbots/wandelbots-js": "^1.8.6",
107
108
  "i18next-browser-languagedetector": "^8.0.0",
108
109
  "lodash-es": "^4.17.21",
109
110
  "mobx": "^6.13.1",
110
111
  "mobx-react-lite": "^4.0.7",
111
112
  "react-error-boundary": "^4.0.13",
112
113
  "react-i18next": "^15.0.1",
113
- "shiki": "^1.14.1"
114
+ "shiki": "^1.16.1"
114
115
  }
115
116
  }
@@ -0,0 +1,212 @@
1
+ import { useGLTF } from "@react-three/drei"
2
+ import type * as THREE from "three"
3
+ import type { RobotProps } from "./SupportedRobot"
4
+ import { animated } from "@react-spring/three"
5
+ import RobotAnimator from "./RobotAnimator"
6
+ import type { GLTF } from "three-stdlib"
7
+
8
+ type GLTFResult = GLTF & {
9
+ nodes: {
10
+ visuals_0: THREE.Mesh
11
+ visuals_0_1: THREE.Mesh
12
+ visuals_0_2: THREE.Mesh
13
+ link_6: THREE.Mesh
14
+ link_5: THREE.Mesh
15
+ link_4: THREE.Mesh
16
+ visuals_3: THREE.Mesh
17
+ visuals_3_1: THREE.Mesh
18
+ visuals_3_2: THREE.Mesh
19
+ visuals_2: THREE.Mesh
20
+ visuals_2_1: THREE.Mesh
21
+ visuals_1: THREE.Mesh
22
+ visuals_1_1: THREE.Mesh
23
+ visuals_1_2: THREE.Mesh
24
+ }
25
+ materials: {
26
+ material_Material_Metall: THREE.MeshStandardMaterial
27
+ material_Material_Farbe__2_: THREE.MeshPhysicalMaterial
28
+ material_Material_Farbe: THREE.MeshStandardMaterial
29
+ }
30
+ }
31
+
32
+ export function KUKA_KR16_R2010_2({
33
+ modelURL,
34
+ rapidlyChangingMotionState,
35
+ ...props
36
+ }: RobotProps) {
37
+ const { nodes, materials } = useGLTF(modelURL) as GLTFResult
38
+
39
+ const rotationOffsets = [0, 0, -Math.PI / 2, 0, 0, 0]
40
+
41
+ function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
42
+ jointObjects.forEach(
43
+ (object, index) =>
44
+ (object.rotation.y = jointValues[index]! + rotationOffsets[index]!),
45
+ )
46
+ }
47
+
48
+ return (
49
+ <>
50
+ <RobotAnimator
51
+ rapidlyChangingMotionState={rapidlyChangingMotionState}
52
+ robotRootObjectName="Scene"
53
+ onRotationChanged={setRotation}
54
+ />
55
+ <group {...props} dispose={null}>
56
+ <group name="Scene">
57
+ <group name="link_0">
58
+ <mesh
59
+ name="visuals_0"
60
+ castShadow
61
+ receiveShadow
62
+ geometry={nodes.visuals_0.geometry}
63
+ material={materials.material_Material_Metall}
64
+ />
65
+ <mesh
66
+ name="visuals_0_1"
67
+ castShadow
68
+ receiveShadow
69
+ geometry={nodes.visuals_0_1.geometry}
70
+ material={materials.material_Material_Farbe__2_}
71
+ />
72
+ <mesh
73
+ name="visuals_0_2"
74
+ castShadow
75
+ receiveShadow
76
+ geometry={nodes.visuals_0_2.geometry}
77
+ material={materials.material_Material_Metall}
78
+ />
79
+ </group>
80
+ <group name="KUKA_KR16R2010_2_J00">
81
+ <group
82
+ name="KUKA_KR16R2010_2_J01"
83
+ position={[0.16, 0.52, 0]}
84
+ rotation={[-Math.PI / 2, 0, 0]}
85
+ >
86
+ <group
87
+ name="KUKA_KR16R2010_2_J02"
88
+ position={[0.98, 0, 0]}
89
+ rotation={[0, -Math.PI / 2, 0]}
90
+ >
91
+ <group
92
+ name="KUKA_KR16R2010_2_J03"
93
+ position={[0.15, 0, 0]}
94
+ rotation={[Math.PI / 2, 0, 0]}
95
+ >
96
+ <group
97
+ name="KUKA_KR16R2010_2_J04"
98
+ position={[0, -0.86, 0]}
99
+ rotation={[-Math.PI / 2, 0, 0]}
100
+ >
101
+ <group
102
+ name="KUKA_KR16R2010_2_J05"
103
+ rotation={[-Math.PI / 2, 0, -Math.PI]}
104
+ >
105
+ <mesh
106
+ name="link_6"
107
+ castShadow
108
+ receiveShadow
109
+ geometry={nodes.link_6.geometry}
110
+ material={materials.material_Material_Farbe__2_}
111
+ position={[0.67, 2, 0]}
112
+ rotation={[-Math.PI, 0, Math.PI / 2]}
113
+ />
114
+ </group>
115
+ <mesh
116
+ name="link_5"
117
+ castShadow
118
+ receiveShadow
119
+ geometry={nodes.link_5.geometry}
120
+ material={materials.material_Material_Farbe}
121
+ position={[-0.67, 0, 2]}
122
+ rotation={[Math.PI / 2, 0, -Math.PI / 2]}
123
+ />
124
+ </group>
125
+ <mesh
126
+ name="link_4"
127
+ castShadow
128
+ receiveShadow
129
+ geometry={nodes.link_4.geometry}
130
+ material={materials.material_Material_Farbe}
131
+ position={[-0.67, 1.14, 0]}
132
+ rotation={[0, 0, -Math.PI / 2]}
133
+ />
134
+ </group>
135
+ <group
136
+ name="link_3"
137
+ position={[-0.52, 0, 1.14]}
138
+ rotation={[Math.PI / 2, 0, -Math.PI / 2]}
139
+ >
140
+ <mesh
141
+ name="visuals_3"
142
+ castShadow
143
+ receiveShadow
144
+ geometry={nodes.visuals_3.geometry}
145
+ material={materials.material_Material_Farbe}
146
+ />
147
+ <mesh
148
+ name="visuals_3_1"
149
+ castShadow
150
+ receiveShadow
151
+ geometry={nodes.visuals_3_1.geometry}
152
+ material={materials.material_Material_Metall}
153
+ />
154
+ <mesh
155
+ name="visuals_3_2"
156
+ castShadow
157
+ receiveShadow
158
+ geometry={nodes.visuals_3_2.geometry}
159
+ material={materials.material_Material_Farbe__2_}
160
+ />
161
+ </group>
162
+ </group>
163
+ <group
164
+ name="link_2"
165
+ position={[-0.16, 0, -0.52]}
166
+ rotation={[Math.PI / 2, 0, 0]}
167
+ >
168
+ <mesh
169
+ name="visuals_2"
170
+ castShadow
171
+ receiveShadow
172
+ geometry={nodes.visuals_2.geometry}
173
+ material={materials.material_Material_Farbe}
174
+ />
175
+ <mesh
176
+ name="visuals_2_1"
177
+ castShadow
178
+ receiveShadow
179
+ geometry={nodes.visuals_2_1.geometry}
180
+ material={materials.material_Material_Metall}
181
+ />
182
+ </group>
183
+ </group>
184
+ <group name="link_1">
185
+ <mesh
186
+ name="visuals_1"
187
+ castShadow
188
+ receiveShadow
189
+ geometry={nodes.visuals_1.geometry}
190
+ material={materials.material_Material_Farbe}
191
+ />
192
+ <mesh
193
+ name="visuals_1_1"
194
+ castShadow
195
+ receiveShadow
196
+ geometry={nodes.visuals_1_1.geometry}
197
+ material={materials.material_Material_Farbe__2_}
198
+ />
199
+ <mesh
200
+ name="visuals_1_2"
201
+ castShadow
202
+ receiveShadow
203
+ geometry={nodes.visuals_1_2.geometry}
204
+ material={materials.material_Material_Metall}
205
+ />
206
+ </group>
207
+ </group>
208
+ </group>
209
+ </group>
210
+ </>
211
+ )
212
+ }
@@ -18,6 +18,7 @@ import { FANUC_CRX25iA } from "./FANUC_CRX25iA"
18
18
  import { FANUC_CRX25iAL } from "./FANUC_CRX25iAL"
19
19
  import { KUKA_KR210_R2700 } from "./KUKA_KR210_R2700"
20
20
  import { KUKA_KR270_R2700 } from "./KUKA_KR270_R2700"
21
+ import { KUKA_KR16_R2010_2 } from "./KUKA_KR16_R2010_2"
21
22
  import { FANUC_ARC_Mate_100iD } from "./FANUC_ARC_Mate_100iD"
22
23
  import { FANUC_ARC_Mate_120iD } from "./FANUC_ARC_Mate_120iD"
23
24
  import { ABB_1200_07_7 } from "./ABB_1200_07_7"
@@ -236,6 +237,9 @@ export const SupportedRobot = externalizeComponent(
236
237
  case "KUKA_KR270_R2700":
237
238
  Robot = KUKA_KR270_R2700
238
239
  break
240
+ case "KUKA_KR16_R2010_2":
241
+ Robot = KUKA_KR16_R2010_2
242
+ break
239
243
  case "ABB_1200_07_7":
240
244
  Robot = ABB_1200_07_7
241
245
  break
@@ -11,6 +11,7 @@ export function UniversalRobots_UR5({
11
11
  }: RobotProps) {
12
12
  const gltf = useGLTF(modelURL) as any
13
13
  const nodes = gltf.nodes
14
+ const materials = gltf.materials
14
15
 
15
16
  function setRotation(jointObjects: THREE.Object3D[], jointValues: number[]) {
16
17
  jointObjects.forEach(
@@ -27,83 +28,236 @@ export function UniversalRobots_UR5({
27
28
  />
28
29
  <group {...props} dispose={null}>
29
30
  <group name="Scene">
30
- <group name="UR5" rotation={[Math.PI / 2, 0, 0]}>
31
- <animated.group name="UR5_J01" rotation={[-Math.PI / 2, 0, 0]}>
31
+ <animated.group name="UNIVERSALROBOTS_UR5CB3_J00">
32
+ <animated.group name="link_1">
33
+ <mesh
34
+ name="visuals_1"
35
+ castShadow
36
+ receiveShadow
37
+ geometry={nodes.visuals_1.geometry}
38
+ material={materials.universalrobots_darkgrey}
39
+ />
40
+ <mesh
41
+ name="visuals_1_1"
42
+ castShadow
43
+ receiveShadow
44
+ geometry={nodes.visuals_1_1.geometry}
45
+ material={materials.universalrobots_black}
46
+ />
47
+ <mesh
48
+ name="visuals_1_2"
49
+ castShadow
50
+ receiveShadow
51
+ geometry={nodes.visuals_1_2.geometry}
52
+ material={materials.universalrobots_aluminum}
53
+ />
54
+ <mesh
55
+ name="visuals_1_3"
56
+ castShadow
57
+ receiveShadow
58
+ geometry={nodes.visuals_1_3.geometry}
59
+ material={materials.universalrobots_lightblue}
60
+ />
61
+ </animated.group>
62
+ <animated.group
63
+ name="UNIVERSALROBOTS_UR5CB3_J01"
64
+ position={[0, 0.089, 0]}
65
+ rotation={[Math.PI / 2, 0, 0]}
66
+ >
32
67
  <animated.group
33
- name="UR5_J02"
34
- position={[0, 0.089, 0]}
35
- rotation={[Math.PI / 2, 0, 0]}
68
+ name="link_2"
69
+ position={[0, 0, 0.089]}
70
+ rotation={[-Math.PI / 2, 0, 0]}
36
71
  >
37
- <animated.group name="UR5_J03" position={[-0.425, 0, 0]}>
38
- <animated.group name="UR5_J04" position={[-0.392, 0, 0]}>
72
+ <mesh
73
+ name="visuals_2"
74
+ castShadow
75
+ receiveShadow
76
+ geometry={nodes.visuals_2.geometry}
77
+ material={materials.universalrobots_stainlesssteel}
78
+ />
79
+ <mesh
80
+ name="visuals_2_1"
81
+ castShadow
82
+ receiveShadow
83
+ geometry={nodes.visuals_2_1.geometry}
84
+ material={materials.universalrobots_lightblue}
85
+ />
86
+ <mesh
87
+ name="visuals_2_2"
88
+ castShadow
89
+ receiveShadow
90
+ geometry={nodes.visuals_2_2.geometry}
91
+ material={materials.universalrobots_aluminum}
92
+ />
93
+ <mesh
94
+ name="visuals_2_3"
95
+ castShadow
96
+ receiveShadow
97
+ geometry={nodes.visuals_2_3.geometry}
98
+ material={materials.universalrobots_black}
99
+ />
100
+ <mesh
101
+ name="visuals_2_4"
102
+ castShadow
103
+ receiveShadow
104
+ geometry={nodes.visuals_2_4.geometry}
105
+ material={materials.universalrobots_darkgrey}
106
+ />
107
+ </animated.group>
108
+ <animated.group
109
+ name="UNIVERSALROBOTS_UR5CB3_J02"
110
+ position={[-0.425, 0, 0]}
111
+ >
112
+ <animated.group
113
+ name="link_3"
114
+ position={[0.425, 0, 0.089]}
115
+ rotation={[-Math.PI / 2, 0, 0]}
116
+ >
117
+ <mesh
118
+ name="visuals_3"
119
+ castShadow
120
+ receiveShadow
121
+ geometry={nodes.visuals_3.geometry}
122
+ material={materials.universalrobots_lightblue}
123
+ />
124
+ <mesh
125
+ name="visuals_3_1"
126
+ castShadow
127
+ receiveShadow
128
+ geometry={nodes.visuals_3_1.geometry}
129
+ material={materials.universalrobots_black}
130
+ />
131
+ <mesh
132
+ name="visuals_3_2"
133
+ castShadow
134
+ receiveShadow
135
+ geometry={nodes.visuals_3_2.geometry}
136
+ material={materials.universalrobots_aluminum}
137
+ />
138
+ <mesh
139
+ name="visuals_3_3"
140
+ castShadow
141
+ receiveShadow
142
+ geometry={nodes.visuals_3_3.geometry}
143
+ material={materials.universalrobots_darkgrey}
144
+ />
145
+ <mesh
146
+ name="visuals_3_4"
147
+ castShadow
148
+ receiveShadow
149
+ geometry={nodes.visuals_3_4.geometry}
150
+ material={materials.universalrobots_stainlesssteel}
151
+ />
152
+ </animated.group>
153
+ <animated.group
154
+ name="UNIVERSALROBOTS_UR5CB3_J03"
155
+ position={[-0.392, 0, 0]}
156
+ >
157
+ <animated.group
158
+ name="link_4"
159
+ position={[0.817, 0, 0.089]}
160
+ rotation={[-Math.PI / 2, 0, 0]}
161
+ >
162
+ <mesh
163
+ name="visuals_4"
164
+ castShadow
165
+ receiveShadow
166
+ geometry={nodes.visuals_4.geometry}
167
+ material={materials.universalrobots_darkgrey}
168
+ />
169
+ <mesh
170
+ name="visuals_4_1"
171
+ castShadow
172
+ receiveShadow
173
+ geometry={nodes.visuals_4_1.geometry}
174
+ material={materials.universalrobots_aluminum}
175
+ />
176
+ <mesh
177
+ name="visuals_4_2"
178
+ castShadow
179
+ receiveShadow
180
+ geometry={nodes.visuals_4_2.geometry}
181
+ material={materials.universalrobots_lightblue}
182
+ />
183
+ <mesh
184
+ name="visuals_4_3"
185
+ castShadow
186
+ receiveShadow
187
+ geometry={nodes.visuals_4_3.geometry}
188
+ material={materials.universalrobots_black}
189
+ />
190
+ </animated.group>
191
+ <animated.group
192
+ name="UNIVERSALROBOTS_UR5CB3_J04"
193
+ position={[0, 0.109, 0]}
194
+ rotation={[Math.PI / 2, 0, 0]}
195
+ >
39
196
  <animated.group
40
- name="UR5_J05"
41
- position={[0, 0.109, 0]}
42
- rotation={[Math.PI / 2, 0, 0]}
197
+ name="link_5"
198
+ position={[0.817, 0.089, 0.109]}
199
+ rotation={[Math.PI, 0, 0]}
43
200
  >
44
- <animated.group
45
- name="UR5_J06"
46
- position={[0, 0.095, 0]}
47
- rotation={[-Math.PI / 2, 0, 0]}
48
- >
49
- <group name="UR5_FLG" position={[0, 0.082, 0]} />
50
- <mesh
51
- name="UR5_L06"
52
- castShadow
53
- receiveShadow
54
- geometry={nodes.UR5_L06.geometry}
55
- material={nodes.UR5_L06.material}
56
- />
57
- </animated.group>
58
201
  <mesh
59
- name="UR5_L05"
202
+ name="visuals_5"
60
203
  castShadow
61
204
  receiveShadow
62
- geometry={nodes.UR5_L05.geometry}
63
- material={nodes.UR5_L05.material}
205
+ geometry={nodes.visuals_5.geometry}
206
+ material={materials.universalrobots_darkgrey}
207
+ />
208
+ <mesh
209
+ name="visuals_5_1"
210
+ castShadow
211
+ receiveShadow
212
+ geometry={nodes.visuals_5_1.geometry}
213
+ material={materials.universalrobots_lightblue}
214
+ />
215
+ <mesh
216
+ name="visuals_5_2"
217
+ castShadow
218
+ receiveShadow
219
+ geometry={nodes.visuals_5_2.geometry}
220
+ material={materials.universalrobots_aluminum}
221
+ />
222
+ <mesh
223
+ name="visuals_5_3"
224
+ castShadow
225
+ receiveShadow
226
+ geometry={nodes.visuals_5_3.geometry}
227
+ material={materials.universalrobots_black}
228
+ />
229
+ </animated.group>
230
+ <animated.group
231
+ name="UNIVERSALROBOTS_UR5CB3_J05"
232
+ position={[0, 0.095, 0]}
233
+ rotation={[-Math.PI / 2, 0, 0]}
234
+ >
235
+ <mesh
236
+ name="link_6"
237
+ castShadow
238
+ receiveShadow
239
+ geometry={nodes.link_6.geometry}
240
+ material={materials.universalrobots_stainlesssteel}
241
+ position={[0.817, -0.109, -0.005]}
242
+ rotation={[-Math.PI / 2, 0, 0]}
243
+ />
244
+ <animated.group
245
+ name="UNIVERSALROBOTS_UR5CB3_FLG"
246
+ position={[0, 0.082, 0]}
64
247
  />
65
248
  </animated.group>
66
- <mesh
67
- name="UR5_L04"
68
- castShadow
69
- receiveShadow
70
- geometry={nodes.UR5_L04.geometry}
71
- material={nodes.UR5_L04.material}
72
- />
73
249
  </animated.group>
74
- <mesh
75
- name="UR5_L03"
76
- castShadow
77
- receiveShadow
78
- geometry={nodes.UR5_L03.geometry}
79
- material={nodes.UR5_L03.material}
80
- />
81
250
  </animated.group>
82
- <mesh
83
- name="UR5_L02"
84
- castShadow
85
- receiveShadow
86
- geometry={nodes.UR5_L02.geometry}
87
- material={nodes.UR5_L02.material}
88
- />
89
251
  </animated.group>
90
- <mesh
91
- name="UR5_L01"
92
- castShadow
93
- receiveShadow
94
- geometry={nodes.UR5_L01.geometry}
95
- material={nodes.UR5_L01.material}
96
- />
97
252
  </animated.group>
98
- <mesh
99
- name="UR5_L00"
100
- castShadow
101
- receiveShadow
102
- geometry={nodes.UR5_L00.geometry}
103
- material={nodes.UR5_L00.material}
104
- rotation={[-Math.PI / 2, 0, 0]}
105
- />
106
- </group>
253
+ </animated.group>
254
+ <mesh
255
+ name="link_0"
256
+ castShadow
257
+ receiveShadow
258
+ geometry={nodes.link_0.geometry}
259
+ material={materials.universalrobots_aluminum}
260
+ />
107
261
  </group>
108
262
  </group>
109
263
  </>