Mouse events not updating notebook

Community Help
1

I’m trying to retrieve new locations for objects dragged and dropped. Observable’s magic updating everywhere doesn’t seem to occur. When I examine the object after the object is dropped, it updates, but not until then. I can’t see the changes in the object during the dragging. I’ve forked Mike Bostock’s drag/drop example with circles, simplified to one circle and moved the construction of the circles outside the chart generator so that I can inspect its values. It illustrates the problem. See Drag Experiments in Observable and Plot / Seeing Statistics | Observable

thanks for any tips. do I need to somehow force updates in the notebook inside the drag function?

2 Likes
2

There’s a few things you need to do to turn on “Observable’s magic updating”

  1. The DOM element returned by the cell needs a value property. You could do something along the lines of

    svg.node().value = circles

  2. The drag function needs to update the value and dispatch an event indicating that the value has been changed. Something like the following within the drag:

    svg.node().value = [{ x: event.x, y: event.y }];
svg.node().dispatchEvent(new CustomEvent("input"));

  3. chart needs to be defined with the viewof operator.

Here it all is in action:

1 Like
3

Wow, thanks for your clear and detailed response. I guess that is one of the advantages of passing notebooks around. My actual project was a clumsy attempt to make a 2-dimensional input. Using viewof and the dispatch makes it an “official” input. Thanks!