Another question about my mxGraph graph that implements ports as child vertices with relative positions, similar to the Ports example. Is it possible to make the port hotspot larger than the size of the port itself? The idea is to make the ports easier for the user to hit. I tried adjusting the defaultHotspot param but it didn't seem to work.

asked 11 Feb '13, 10:22

lannie's gravatar image

accept rate: 22%

You can override a few methods to change the implementation of the tolerance and then use a larger default value for the hotspot, eg.

mxConstants.DEFAULT_HOTSPOT = 2;
mxGraph.prototype.tolerance = 10;

var graphUpdateMouseEvent = mxGraph.prototype.updateMouseEvent;
mxGraph.prototype.updateMouseEvent = function(me)
  graphUpdateMouseEvent.apply(this, arguments);

  if (me.getState() == null)
    me.state = this.view.getState(this.getCellAt(me.graphX, me.graphY));

var graphIntersects = mxGraph.prototype.intersects;
mxGraph.prototype.intersects = function(state, x, y)
  var result = graphIntersects.apply(arguments);

  if (!result && state.absolutePoints == null)
    var tol = this.tolerance;
    var tmp = new mxRectangle(x - tol, y - tol, 2 * tol, 2 * tol);

    result = mxUtils.intersects(state, tmp);

  return result;

Or you can use the idea from here where an icon is shown with a larger tolerance. You can start the connection using the following code as shown here:

  mxEvent.getClientX(evt), mxEvent.getClientY(evt));
graph.graphHandler.cellWasClicked = true;
graph.isMouseDown = true;

answered 14 Feb '13, 15:43

Gaudenz's gravatar image

accept rate: 39%

edited 14 Feb '13, 15:44

Thank you. I got what I need using the override code you suggested. However, I had to override mxCellMarker.prototype.intersects() as well. Turns out there is already and override for mxConnectionHandler.prototype.createMarker() in editor.js. I fixed it there like this. The only cells I want to affect are styled as "terminal", so I did this, following your example:

var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
mxConnectionHandler.prototype.createMarker = function()
    var marker = mxConnectionHandlerCreateMarker.apply(this, arguments);

// Overrides to ignore hotspot only for target terminal
    marker.intersects = mxUtils.bind(this, function(state, evt)
        if (this.isConnecting())
            return true;

// return mxCellMarker.prototype.intersects.apply(marker, arguments); <== CHANGED TO 
    var result = mxCellMarker.prototype.intersects.apply(marker, arguments);
    if (!result && arguments[0] && arguments[0]'terminal'))
        return true;

return result;

return marker; };

Works great!

(15 Feb '13, 00:55) lannie

Found a bug in the code. In mxGraph.prototype.intersects(),

var result = graphIntersects.apply(arguments);

must be

var result = graphIntersects.apply(this, arguments);

(15 Feb '13, 14:41) lannie
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 11 Feb '13, 10:22

Seen: 1,265 times

Last updated: 15 Feb '13, 14:41