base-script-for-decking-for-testing-08-01-2025.gh (5.0 MB)
Hey @mathieu1
I want to select the plus icon, apply a hover effect, and perform a click action on it to update the model. However, I’m having trouble getting it to select. Can you explain, with code examples, how to perform the hover and click actions on the plus icons using web interaction?
this is my code "const getNodesByNameWithRegex = (node: ITreeNode, regex: RegExp) => {
let nodes: ITreeNode[] = [];
node.traverse((n) => {
if (regex.test(n.name)) nodes.push(n);
});
return nodes;
};
const interactionEngine = new InteractionEngine(viewport);
// create the drag manager and add a place constraint
// add a hover manager
const hoverManager = new HoverManager();
hoverManager.effectMaterial = new MaterialUnlitData({ color: “green” });
interactionEngine.addInteractionManager(hoverManager);
const plusiconOutput = globalSession.getOutputByName(“remove”)[0];
console.log(plusicon)
let webicon: ITreeNode = ;
// callback to assign interaction data
const cb = (newNode?: ITreeNode) => {
if (!newNode) return;
webicon = getNodesByNameWithRegex(newNode, /^name/);
webicon.forEach((n) => {
if (!n.data.find((d) => d instanceof InteractionData)) {
n.addData(new InteractionData({ hover: true, drag: true }));
n.updateVersion();
}
n.updateVersion();
});
};
plusiconOutput.updateCallback = cb;
// and call it once at the start
cb(plusiconOutput.node);
" I don’t know much about how to select a node for web interaction according to the script. Can you also share some documentation and examples so I can learn these concepts?"
Hello @logic_shala,
In your code, you specify { hover: true, drag: true } while it should be { hover: true, select: true }. This is very likely the issue here.
Here is our complete documentation for this feature from the API side.
Please not that by now, we this feature is also available with App Builder. You can read more about App Builder here, and about the specific feature here.
Cheers, Michael
Hi @MajorMeerkatThe3rd , I followed your instructions, but the hover and select interaction on the plus icon is still not showing. Additionally, how can I extract attributes from the script into web configuratior for use ?
Hello @logic_shala,
please provide a CodeSandBox example that highlights this problem properly. Please also use the uploaded model with which you expect it to work.
Once that is done, we can have a closer look and determine what’s the issue.
Cheers, Michael
hi @MajorMeerkatThe3rd I am sharing both the uploaded GH file and my code for handling selection and hover interactions. My issue is that the hover and select functions are currently affecting all the plus and minus icons. I would like these interactions to only target a single icon at a time. Additionally, I need to know how to retrieve the attributes during these interactions, such as when hovering or selecting. Below are my code, the GH file, and a screenshot.
cube.gh (17.8 KB)
index.zip (4.9 KB)
you can see in the screenshot that all icons is getting selected.
Hello @logic_shala,
there is an issue in the GrassHopper file. The attributes are injected, but are never connected to a display component. Only the initial geometry data, without the attributes, is connected to the display component.
Once you fix that, the name property of the scene tree nodes will correspond to the name that was given as the name attribute. You can read more about that here. With that, you can search for the separate icons by their name as specified on the GrassHopper side.
Cheers, Michael
hi @MajorMeerkatThe3rd I apologize for the misunderstanding. I shared the wrong Gh file earlier; this is the correct file. can you please look into this
for selection json_22-01-02024.gh (34.3 KB)
Hello @logic_shala,
once again I have to insist on a CodeSandBox (or a similar online code editor) in which you provide the example with the correct ShapeDiver model. Then I can look into this issue further.
Thank you!
Cheers, Michael
