Example JavaScript for implementing a hover style for vertices in mxGraph.

asked 28 Aug '12, 07:38

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

edited 28 Aug '12, 07:47


graph.addMouseListener(
{
    currentState: null,
    previousFill: null,
    mouseDown: function(sender, me)
    {
        if (this.currentState != null)
        {
                this.dragLeave(me.getEvent(), this.currentState);
                this.currentState = null;
        }
    },
    mouseMove: function(sender, me)
    {
        if (this.currentState != null && me.getState() == this.currentState)
        {
            return;
        }

        var tmp = graph.view.getState(me.getCell());

        // Ignores everything but vertices
        if (graph.isMouseDown || (tmp != null && !
            graph.getModel().isVertex(tmp.cell)))
        {
            tmp = null;
        }

        if (tmp != this.currentState)
        {
            if (this.currentState != null)
            {
                this.dragLeave(me.getEvent(), this.currentState);
            }

            this.currentState = tmp;

            if (this.currentState != null)
            {
                this.dragEnter(me.getEvent(), this.currentState);
            }
        }
    },
    mouseUp: function(sender, me) { },
    dragEnter: function(evt, state)
    {
        if (state != null)
        {
          this.previousFill = state.shape.fill;
          state.shape.fill = 'red';
          state.shape.reconfigure();
        }
    },
    dragLeave: function(evt, state)
    {
        if (state != null)
        {
          state.shape.fill = this.previousFill;
          state.shape.reconfigure();
        }
    }
});
link

answered 28 Aug '12, 07:47

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

Thank you Gaudenz,

I have implemented that and it works great for "standard" shapes though it doesn't not do anything for shape created from stencil (xml file).

Though the fill and stroke colors seem to be "saved" on the javascript state object, i can't get the view to refresh and show the new colors.

excerpt from console with console.log at the beginning of each function:

dragEnter; current shape stroke : #6482B9 // default color
dragLeave; current shape stroke : red

any on how to force the render of the stencil shape with the new stroke color

link

answered 17 Dec '12, 09:55

coclav's gravatar image

coclav
1616
accept rate: 50%

1

Replacing reconfigure with redraw fixes it in quirks mode (IE).

(17 Dec '12, 10:00) Gaudenz

Thanks !

(17 Dec '12, 10:02) coclav
Your answer
toggle preview

Follow this question

By Email:

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

By RSS:

Answers

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

Tags:

×228
×50
×5
×1

Asked: 28 Aug '12, 07:38

Seen: 1,865 times

Last updated: 17 Dec '12, 10:02