I am using custom stencils like in the example "stencils.htmls" and it work great for creating the shapes on screen. I would like to highlight my shapes on mouse hover. mxCellTracker works but creates "only" a rectangle. I would like the shape of my highlight to match the real shape. Question of aesthetic.

Here is how I have registered the custom shape, no problem there

var req = mxUtils.load('shape.y.xml');
var root = req.getDocumentElement();
var shape = root.firstChild;
  while (shape != null) {
    if (shape.nodeType == mxConstants.NODETYPE_ELEMENT){
      mxStencilRegistry.addStencil(shape.getAttribute('name'), new mxStencil(shape));
  shape = shape.nextSibling;

and I use them like that :

graph.insertVertex(graph.getDefaultParent(), null, value, x, y, 140, 90, "shape=y;");

Now, I would like to have a highlight that matches the custom shape. Here are my various trials

Trial 1

// i'm here: graph.addMouseListener({ mouseMove:function(sender, event) ...

event.getState().style.strokeColor = "#00ff00"; graph.cellRenderer.redraw( event.getState ); // alternative: event.state.shape.redraw();

This doesn't work. The "strokeColor" is saved against the state, but no way to reflect it on the screen ?! any idea why this "straightforward" method doesn't work?

Trial 2

I have realised that the mxCellTracker use the mxCellHighlight so I tried to hack this function:

// again, this is triggered from a mouseMove event handler:
var createShape_backup = mxCellHighlight.prototype.createShape;
mxCellHighlight.prototype.createShape = function() {

// executes the original function for normal shapes and lines
  var shape = createShape_backup.apply(this, arguments);

// exception for y shape
  if (this.state.style.shape == "y") {
    // creates a new shape and applies the style of the current shape ("y")
    shape = new mxShape();

// apply green stroke
    this.state.style.strokeColor = "#00FF00";
    // apply current shape to the new shape
    shape.apply (this.state.style);

// copy the code from the original source...
    shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;
    mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);

  return shape;

And here is what I have in firebug:

TypeError: this.createSvg is not a function
[Break On This Error] 

It's like it cannot render my shape from the mxCellHighlight? Any ideas on why it doesn't work ?

Note: I am using the xml-defined stencils for my shapes because I couldn't get such a nice results trying to code the shape manually from a mxCylinder like in markers.html.

Thanks for your precious help.

asked 17 Dec '12, 05:58

coclav's gravatar image

accept rate: 50%


answered 17 Dec '12, 07:23

Gaudenz's gravatar image

accept rate: 39%

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](http://url.com/ "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: 17 Dec '12, 05:58

Seen: 3,908 times

Last updated: 17 Dec '12, 07:23