Not opening child nodes on click of .relatedBox. Node moves instead

[SamLoy]

When you click one of a node's .relatedBox circles it doesn't open the child node.

On the demo page: it causes the whole parent node to move instead.

I've done some digging, as i'm getting a similar problem on my own extension.

It seems draggable.js is hooving up all the clicks.

container.on('mousedown', draggableSelector, function(event) {

    // mark the node as being dragged using event-delegation
    dragState.target = $(this);
    dragState.panning = false;

    // store offset of event so node moves properly
    dragState.offsetX = event.offsetX;
    dragState.offsetY = event.offsetY;
    event.stopPropagation();
    event.preventDefault();
  });

Could this be a packaging error? As i assume this works fine on ml-lodlive?

[SamLoy]

I have seen this problem intermittently, which makes this problem very confusing.

However I believe adding the following to ml-lodlive fixes the issue.
draggable.js

container.on('mousedown', draggableSelector, function(event) {
    // mark the node as being dragged using event-delegation
    dragState.target = $(this).parent(); // UPDATED to use the parent so the drag works as normal
    dragState.panning = false;

    // store offset of event so node moves properly
    dragState.offsetX = event.offsetX;
    dragState.offsetY = event.offsetY;

    event.stopPropagation();
    event.preventDefault();
  });

renderer.js

LodLiveRenderer.prototype.init = function(inst, container) {
  var renderer = this;

  if (typeof container === 'string') {
    container = $(container);
  }
  if (!container.length) {
    throw new Error('LodLive: no container found');
  }

  // TODO: move styles to external sheet
  this.container = container.css('position', 'relative');
  this.context = $('<div class="lodlive-graph-context"></div>');

  var graphContainer = $('<div class="lodlive-graph-container"></div>');

  this.context.appendTo(this.container).wrap(graphContainer);

    
  var draggable = require('./draggable.js');

 // UPDATED .lodlive-node to .lodlive-node-label stops the parent swallowing all the events 
  draggable(this.container, this.context, '.lodlive-node-label', function(dragState) {
    return renderer.reDrawLines(dragState.target);
  });
    
  this.initHover();
  this.initClicks(inst);
};

I'll raise a PR on ml-lodlive but i'd be surprised if it gets considered as i'm still convinced the problem is packaging/dependency related.

[grtjn]

Thanks for the report! I'm sure @withjam and @joemfb are interested, and we'll discuss what would be the best place for a fix. Might need to be bit of both..