Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Styling the text of a ShapeNode in Canvas mode. (Read 3548 times)
LGK
YaBB Newbies
*
Offline



Posts: 30
Location: Boston, MA
Joined: Mar 29th, 2012
Styling the text of a ShapeNode in Canvas mode.
Mar 29th, 2012 at 2:57pm
Print Post  
I have downloaded the trial version of NetDiagram (for ASP.NET) and am in the process of evaluating the package. So far, I'm very impressed by the built-in features, stability of the product and flexibility/freedom to create all sorts of diagrams!

I did stumble across one particular challenge - styling a ShapeNode when my DiagramView.ClientSideMode is set to "Canvas". This is my code (the code block below is only styled as C++, but my actual code is in C#):

Code (C++)
Select All
Diagram diagram = MyDiagramView.Diagram;
Factory factory = diagram.Factory;

// this does NOT work in "Canvas" mode
diagram.LinkCrossings = LinkCrossings.Arcs;
...
ShapeNode node = factory.CreateShapeNode(0, 0, 40, 20);

// I'm dynamically setting the Id for each of the nodes in my graph (i.e. 'parentRecordId' is different for each node)
node.Id = parentRecordId;
node.Brush = new SolidBrush(System.Drawing.Color.WhiteSmoke);

// enabling styled text
node.PolygonalTextLayout = node.EnableStyledText = true;

// the diagram does NOT render when I set the "Text" property to a styled format
node.Text = String.Format("{0}\n\n<b>{1}</b>", parentRecordId, parentRecordName);
...
 



When I run this in "Canvas" mode, the diagram does not render at all. BUT this same code works just fine when in "ImageMap" mode. I did not find anything in the documentation stating that Styled Text is only compatible with "ImageMap" mode, that is why I need your help.

I also noticed that this does not work in "Canvas" mode:

Code (C++)
Select All
MyDiagramView.Diagram.LinkCrossings = LinkCrossings.Arcs;
 



One last thing - could you also guide me in how to change the mouse cursor on "NodeMouseEnterScript" client-side event (i.e. how can I change the mouse cursor when the user hovers over a node in the diagram)?

Many thanks!!
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the text of a ShapeNode in Canvas mode.
Reply #1 - Mar 29th, 2012 at 6:05pm
Print Post  
Hi,

The Canvas mode is quite new and unfortunately implements only a small subset of what's available in the .NET and Java code. You can use only features listed in the Canvas client side reference here:

http://www.mindfusion.eu/onlinehelp/netdiagram/index.htm?CC_refMindFusion_Diagra...

It will probably take an year until our developers port all types of nodes and more advanced visualization features to JavaScript.

In addition, Canvas mode does not implement the mouse enter event; available events are listed here:

http://www.mindfusion.eu/onlinehelp/netdiagram/index.htm?T_MindFusion_Diagrammin...

It should be possible to work around that by calling Diagram.getNodeAt from an ordinary mouse move listener:

Code
Select All
onMouseMove: function (e)
{
	var diagram = $find('diagramId');
	var devPoint = MindFusion.Diagramming.Utils.getCursorPos(e, diagram.get_element());
	var point = diagram.clientToDoc(devPoint);
	var node = diagram.getNodeAt(point);
} 



and then set the cursor according to the node by assigning the cursor name to diagram.get_element().style.cursor.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
LGK
YaBB Newbies
*
Offline



Posts: 30
Location: Boston, MA
Joined: Mar 29th, 2012
Re: Styling the text of a ShapeNode in Canvas mode.
Reply #2 - Mar 30th, 2012 at 2:15pm
Print Post  
Thank you for the quick response, Stoyan!

I'm looking to taking advantage of the canvas/SVG features that your product has to offer. From what you said, it sounds like I won't be able to style the nodes in C# code-behind. BUT, would I be able to achieve that client-side by using your JsDiagram library (+ some other tricks)?

Any suggestions are much appreciated. Thank you!

UPDATE: I have actually found what I was looking for here and here. Thanks
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Styling the text of a ShapeNode in Canvas mode.
Reply #3 - Mar 30th, 2012 at 2:52pm
Print Post  
Quote:
From what you said, it sounds like I won't be able to style the nodes in C# code-behind.


You can still style nodes by specifying background and border colors, font name and size, a bitmap icon etc in canvas mode. You just can't use the more complex text formatting provided via the EnableStyledText property, which is only available in ImageMap and Java modes at this time.

Our developers aren't sure if EnableStyledText will be implemented at all in Canvas mode, since the Canvas' text drawing API is very insufficient. Perhaps we could try drawing styled text by other means, such as DIV overlays displayed over the nodes, but that won't work well with the diagram's Z order.

Quote:
would I be able to achieve that client-side by using your JsDiagram library


If you mean drawing styled text, you could plug your own text rendering code by replacing the draw function in MindFusion.Drawing.Text.prototype with your own implementation, but parsing and drawing formatted text using the Canvas draw/measureString methods won't be an easy feat.

Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint