Viewer Interaction documentation

Grasshopper ShapeDiver
1

Hello!

I’ve been trying in the last week to add customized interaction within the viewer v3 using the InteractionEngine but, outside of the three part tutorial I couldn’t find any documentation for @shapediver/viewer.features.interaction specifically. For example, I know I can use InteractionEngine.addInteractionManager(manager), but I can’t find an answer as to where the interactionEngine itself is saved, nor what token:string is used with removeInteractionManager(). Also, to reduce size file I moved the addition of interactions in an other file and passing through callback functions seems to break functionnality.

Snippet from file:


const addDragToInteractionEngine = (
  interactionEngine: InteractionEngine,
  onDownEvent:
    | ((ray: IRay, intersections: IIntersection[]) => void)
    | undefined = onDownBase,
  onEndEvent:
    | ((ray: IRay, intersections: IIntersection[]) => void)
    | undefined = onEndBase
) => {
  const dragManager = new DragManager();
  const planeConstraint = new PlaneConstraint([0, 0, 1]);
  dragManager.effectMaterial = new SDV.MaterialData({ color: "#DF0F090" });
  dragManager.addDragConstraint(planeConstraint);

  dragManager.onDown = onDownEvent;
  dragManager.onEnd = onEndEvent;

  interactionEngine.addInteractionManager(dragManager);
  return interactionEngine;
};

Any help on the matter would be greatly appreciated!
Thanks!

2

Hello @Antoine_Bouchard,
so here is a larger example. Please have a look and play around with it a bit. It should cover a lot of cases.

The InteractionEngine does not have to be added anywhere. On creation you provide the viewer instance, this creates the connection between the elements.

Regarding token:string, when you call addInteractionManager you receive a token in return, to remove the InteractionManager again, call removeInteractionManager with that token.

Regarding the addition of interactions, I added another example. This seems to work for me. See here

Cheers, Michael

3

Thank you for the response, it cleared out the question I had about the tokens.

I’ve already seen one of the two examples (the dragging and hover one, where the interaction data is pushed), and based on the other one you sent, I should be using api.addListener to add functionnality instead of overriding the OnDown methods found in IInteractionManager (since Hover, Drag and Select manager are using those methods with private accessors).

I am ashamed to admit that it took me a while to check (and read) index.html in order to realise that the two profile pictures are inputs to add shelves. Anyway, this example is great and I’ll learn a lot from it!

Thanks!