(UTC)
  MindFusion Forums › Archived Boards › ASP.NET WebForms › Two Seperate Text in Shape
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Two Seperate Text in Shape (Read 11691 times)
Puneet Jain
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Two Seperate Text in Shape
Mar 18th, 2013 at 6:51pm
Print Post  
Hi,

Can we have two different types of text properties in the same shape. Please see the image attached. On the caption we have "Safety Engineer" and below it description.

Please suggest.
  
Container.jpg (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #1 - Mar 18th, 2013 at 7:10pm
Print Post  
Hi,

You have several options:

- create a TableNode with a single cell, and set table.Rows[0].Height = table.Bounds.Height - table.CaptionHeight. To show the first text, set table.Caption. To show the second text, set table[0,0].Text.

- use a group of attached ShapeNodes to display the texts.

- if using ImageMap mode, create a derived node class that calls DrawString twice from the DrawLocal override. For an example, check the IconNodes sample project.

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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #2 - Mar 20th, 2013 at 6:40am
Print Post  
Hi,

I was able to create the TableNode programmatically using the first option. That is exactly what I want however I want the this shape to be available as a drag and drop shape and available in the pallet with other shapes. How can I achieve that.

Appreciate the help.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #3 - Mar 20th, 2013 at 7:16am
Print Post  
Hi,

The server-side ShapeListBox can only contain Shape objects for creating ShapeNodes. What you could do is add a similar looking shape (e.g. check DividedProcess), and replace it with a TableNode from the nodeCreated handler when you detect that the ShapeNode.Shape is the one representing a table. I.e. call diagram.Factory.CreateTableNode(e.Node.Bounds) and remove e.Node to replace the newly create ShapeNode.

In case you are using Canvas mode, the ShapeListBox there is implemented using a JavaScript NodeListView control that can contain any kind of nodes (http://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?T_MindFusion_Diagramming...). So you could access the underlying NodeListView from JavaScript and add the table to it:

Code
Select All
var nodelist = $find('ShapeListBox1');
var node = new MindFusion.Diagramming.TableNode();
nodelist.addNode(node, 'table');


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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #4 - Mar 23rd, 2013 at 12:05pm
Print Post  
Hi,

Sorry I am a bit lost now. I am using JavaApplet mode. In onNodeCreated javascript method I am trying to identify if the node created is DividedProcess, remove it and create a TableNode instead however the method is only called once when the applet is loaded and not called again when any shape is dragged and dropped on the cavas. The code I was trying is provided below :

function onNodeCreated (sender, args)
      {
          var scriptHelper = <%= diagramView.AppletElement %>.getScriptHelper();

          var node = args.getNode();
          var t = sender.Factory.CreateShapeNode(node.Bounds);
          t.Caption = string.Empty;
          t.RedimTable(1, 1);
          t.OffsetHeaderRows = true;
          t.Rows[0].Height = t.Bounds.Height - t.CaptionHeight;
          t.Rows[0].Header = false;
          t[0, 0].Text = "Client data";
          sender.Diagram.Nodes.Remove(node);
}

Please guide what am I missing. Also is there a server side method that I can call everytime a node is dragged and dropped on the canvas.

Thanks for your help so far.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #5 - Mar 25th, 2013 at 7:41am
Print Post  
Hi,

Quote:
I am using JavaApplet mode. In onNodeCreated javascript method I am trying to identify if the node created is DividedProcess, remove it and create a TableNode instead


The .NET property syntax you are using will not work in JavaApplet mode, you will have to call get/set methods from the Java reference shown at http://mindfusion.eu/onlinehelp/netdiagram/index.htm?refcom_mindfusion_diagrammi.... Below you can find onCreatedHandler that works in Java mode. Also note it calls createTableNode instead of createShapeNode.

Code
Select All
function onNodeCreated(sender, args)
{
	var scriptHelper = <%= diagramView.AppletElement %>.getScriptHelper();

	var node = args.getNode();
	var t = sender.getFactory().createTableNode(node.getBounds());
	t.setCaption("");
	t.redimTable(1, 1);
	t.setOffsetHeaderRows(true);
	t.getRows().get(0).setHeight(t.getBounds().getHeight() - t.getCaptionHeight());
	t.getRows().get(0).setHeader(false);
	t.getCell(0, 0).setText("Client data");
	sender.getNodes().remove(node);
}


Quote:
however the method is only called once when the applet is loaded and not called again when any shape is dragged and dropped on the cavas


It sounds as if you have set AppletStartedScript="onNodeCreated". Assign it to NodeCreatedScript instead.

Quote:
Also is there a server side method that I can call everytime a node is dragged and dropped on the canvas.


With version 5 of NetDiagram, you can enable AutoPostback and will get DiagramView.NodeCreated events raised on server. Better handle it on the client side though, the applet is large and takes some time to reload after postback.

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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #6 - Mar 31st, 2013 at 7:10am
Print Post  
Hello,

This code works like a charm however I need to replace only one node with tablenode. How can I detect on runtime which node is being dropped on the canvas?
I tried to retrieve the getId however it is always retured null.

I have couple of more questions :

1. How can we change the color of the shapes in the shapebox? I am using custom shapes.

2. Is it possible to assign images outside the node created but tied to the particular node [Please see the screen shot attached]

3. Increase the default size of the node, when they are dropped on the canvas.
  
Image_001.jpg (Attachment deleted)
Back to top
 
IP Logged
 
Puneet Jain
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #7 - Mar 31st, 2013 at 7:12am
Print Post  
Also please confirm this trial is valid for how many days and how can I go about the purchase?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #8 - Apr 1st, 2013 at 8:45am
Print Post  
Hi,

Quote:
How can I detect on runtime which node is being dropped on the canvas?


Try this:
Code
Select All
if (node.getShape().getId() == "DividedProcess")
{
    var t = sender.getFactory().createTableNode(node.getBounds());
    ...
}


Quote:
1. How can we change the color of the shapes in the shapebox? I am using custom shapes.


Set the ShapeListBox.ShapeFillColor property.

Quote:
2. Is it possible to assign images outside the node created but tied to the particular node [Please see the screen shot attached]


It's possible by creating a separate ShapeNode at that position to display the image, and calling its attachTo method to make it follow the main node. You could also set its Transparent property to leave only the image visible, and Locked to prevent users from selecting it.

Another option in JavaApplet mode is to set nodes' CustomDraw property to Additional and draw the icon using Java Graphics2D API's from the DrawNodeScript handler.

Quote:
3. Increase the default size of the node, when they are dropped on the canvas.


Set ShapeListBox.DefaultShapeSize.

Quote:
Also please confirm this trial is valid for how many days and how can I go about the purchase?


The trial does not expire. You can purchase from http://mindfusion.eu/buy-netdiagram.html, or contact sales at mindfusion.eu email address if you need to follow a more involved purchase process.

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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #9 - Aug 10th, 2013 at 1:30am
Print Post  
Hi Stoyan,

I have added hyperlink to the first shape [Ellipse] attached to the main node. However it does not work. I need help with following :

1. User should not be able to select and delete the attached shapes
2. User should be able to click the attached shape which has hyperlink specified and Navigate.

In onNodeCreated function I am using following piece of code :

var annotationNode = sender.getFactory().createShapeNode(0, 0, 5, 5);
var shape = scriptHelper.shapeFromId("Ellipse");
annotationNode.setShape(shape);
annotationNode.ToolTip = "This is an annotation";
annotationNode.setIgnoreLayout(true);
annotationNode.setHyperLink ("http://www.google.com");
annotationNode.moveTo(t.getBounds().x, t.getBounds().y-6);
annotationNode.AttachTo(t,3);

Thanks for your help.
  
Mindfusion_Shapes.jpg (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #10 - Aug 13th, 2013 at 4:32pm
Print Post  
Hi,

1. Call annotationNode.setLocked(true) to prevent the user from selecting and modifying it.

2. You could navigate from the nodeClicked handler:

Code
Select All
<ndiag:DiagramView NodeClickedScript="onNodeClicked" ...

function onNodeClicked(sender, args)
{
	document.location = args.getNode().getHyperLink(); // or window.open ...
}


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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #11 - Aug 13th, 2013 at 6:50pm
Print Post  
Hi Stoyan,

Thanks for your reply. Your suggestion about setting annotationNode.setLocked(true) does work however this brings another challenge. When I delete the main node, it does not delete the child/attached nodes however before this setting, the attached nodes use to get deleted when the main node was deleted. Please suggest how to tackle this situation.

Also how can I cancel the execution of onNodeClicked event?

I have noticed that if you have very long text to display in tooltip, it display that in a single line. I have tried adding carriage return/ new line character in the saved XML [Flowchart] without any luck to format the tooltip to breakdown the single line in multiple rows. Any suggestions?
« Last Edit: Aug 14th, 2013 at 7:28am by Puneet Jain »  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #12 - Aug 14th, 2013 at 7:31am
Print Post  
Hi,

Set the AutoDeleteItems property of groups to true to delete attached nodes along with their master node:

Code
Select All
annotationNode.AttachTo(t,3);
annotationNode.getMasterGroup().setAutoDeleteItems(true);


Just return from the event handler function if you need to ignore click events for some nodes.

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


I Love MindFusion!

Posts: 9
Joined: Mar 18th, 2013
Re: Two Seperate Text in Shape
Reply #13 - Sep 22nd, 2013 at 2:26pm
Print Post  
Hi Stoyan,

Thanks for your reply.

Can you please answer this  : I have noticed that if you have very long text to display in tooltip, it display that in a single line. I have tried adding carriage return/ new line character in the saved XML [Flowchart] without any luck to format the tooltip to breakdown the single line in multiple rows.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Two Seperate Text in Shape
Reply #14 - Sep 23rd, 2013 at 6:08am
Print Post  
Hi Puneet,

Java supports html tags in tooltips, and in JavaApplet mode you can set tooltip strings to "<html>line 1<br>line 2<br>line 3 ... </html>" to show them in multiple lines. You could also use elements such as tables and images to display richer tooltips.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge