Visual feedback for black connectors on mouse over

Tags: , , ,
Add comments

One of my DSLs uses many black connectors laying all over the screen. Every time I try to follow one connector I select it to change the border and to see a difference between all connectors. A colleague saw this design and asks me to implement a mouse over feedback for these connectors since all shapes have already such a visual feedback. The color of shapes changes a little bit if the mouse is over the shape. I had no idea how this should work for connectors…

First I take a look on the properties of the connector in the DSL designer and while searching I observed something: The DSL designer has this behavior on all connectors! I don’t have to write code for the MouseOver-event, but I have to figure out how to activate this behavior on my DSL editor.

For my surprise, the connectors on a newly created example language have a mouse over feedback, too. After playing around with some properties I was faced to a interesting fact: The mouse over feedback works pretty good for all connectors but black ones. I had no idea what’s going on.

Long story short: With Reflector I found one interesting method in the ShapeElement class: ModifyLuminosity(). The documentation is very clear:

"Calculates the luminosity of the highlight for the shape."

"The formula that creates luminosity. By default, the formula is: if luminosity is >= 160, then luminosity = luminosity * 0.9; otherwise, luminosity = luminosity + 40."

The luminosity of a black connector is 0 so the new luminosity will be 40. But for the color black you hardly see a difference between 0 and 40. But with this knowledge you can override the method in the connector class like this:

protected override int ModifyLuminosity
              (int currentLuminosity, DiagramClientView view)
{
  if(!view.HighlightedShapes.Contains(new DiagramItem(this)))
     return currentLuminosity;
        
 return 130;
}

The value 130 on a black connector works pretty good for me. Just try a few values und find a value you like.

HighlightedConnector

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in