OpenSeaDragon with D3 svg-overlay draggable elements

Question

I use OpenSeaDragon (OSD) 2.3.1 with D3v4 to plot points on top of images. This points are drawn when the user clicks on the image.

The question is how to make those d3 objects draggable within OSD.

The problem arises with the fact that OSD has to handle all the mouse activities for the interaction with the image viewer.

Currently my mouse handler for capturing the event is

var click_handler= function(event) {        
    if(event.quick){
        drawMarker(...); //this works fine     
    }else{            
        ...
    }
};

Then I use OSD MouseTracker to set the handler

var fixed_mouse_tracker = new OpenSeadragon.MouseTracker({
    element: OSDviewer.canvas,
    clickHandler: click_handler
}).setTracking(true);

This works fine if I didn't need to drag the elements. Since now all the clicks will be handled by OSD while D3 objects have no idea they are being clicked. I tried using

d3.select("elementclass").on('mouseup', function(){console.log(d3.mouse(this)[0], d3.mouse(this)[1])});

but it doesn't work.

Another possibility is using OSD's event.originalEvent. And I would need to know how to capture the this pointer that points to the d3 element being clicked.

I found this exmaple of D3 but I don't know how to apply it

Answer 1

I've not tried to do such a thing, but I imagine it'll work better if you allow OSD to do the event tracking and not try to use D3's event tracking. Looking at the SVG overlay plugin's onClick it looks like it's just a thin wrapper around MouseTracker, so you can probably just go around it like so:

function addTracking(node) {
  new $.MouseTracker({
    element: node,
    dragHandler: function(event) {
      var viewportDelta = viewer.viewport.deltaPointsFromPixels(event.delta);
      // Move node by viewportDelta
    }
  }).setTracking(true);
}

d3.selectAll(".aClass").each(function() {
  addTracking(this); 
});

This issue is also discussed in https://github.com/openseadragon/openseadragon/issues/1425