Problem with dragging points


there is an error when I try to drag points on the screen. The ID is always the same so it keeps dragging the wrong value. The sphereID is always 2 after I add 3 points.

var dragCallback = function(event) {

let dataOutput = api.scene.getData({
name: “ProjectedPoints”
if (!Array.isArray(dataOutput)) dataOutput=[dataOutput];
points = ;
for (let i = 0; i < dataOutput.length; i++) {
// find which sphere was selected
let sphereID = event.scenePath.split(".")[1];


let sphereAsset = api.scene.get({
id: sphereID
}, “CommPlugin_1”);
selectedSphere =[0].name.split("_")[1];


let newPos = event.dragPosAbs;
points[selectedSphere][0] += newPos.x;
points[selectedSphere][1] += newPos.y;
points[selectedSphere][2] += newPos.z;
name: “Points”,
value: JSON.stringify({
‘points’: points


In the above code, consider the following line:

selectedSphere =[0].name.split("_")[1];

It assumes that you have a Grasshopper model with several ShapeDiverDisplayGeometry components representing different spheres. For example, “Sphere_0”, “Sphere_1”, “Sphere_2”, etc… The line above gives you the ID of the sphere that was selected.

Now if I inspect your model using the API, this is what I see:

It means that the Grasshopper model contains several sphere components, all with the same name: “Sphere_2”. Therefore I’m not surprised that you’re only getting this value using your code…
This should be solved by updating your Grasshopper model with proper names for the objects that you want to select in the viewer.