Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic how to set style for shape or link on diagram (Read 2804 times)
chieh
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 64
Joined: Aug 18th, 2010
how to set style for shape or link on diagram
Aug 26th, 2010 at 9:30am
Print Post  
Hi,
I am a beginner and using Java Applet mode for DiagramView. I want to have a button to switch shape and link’s look like on DiagramView.
So is there any ways to define line and shape’s style, for examples, solid line, dash line etc….?
Is it possible to have buttons to trigger Javascript to enable dash or solid for the shape and line?
For an example,
There are three shapes and two lines which connect these together on diagram. It will be presented as following,
Shape A‘s outline is dot.
Shape B‘s outline is solid.
Shape C‘s outline is custom.
Link D (connect A and B) is dot
Link E (connect B and C) is solid

Thanks for any hints or suggestions
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: how to set style for shape or link on diagram
Reply #1 - Aug 26th, 2010 at 10:53am
Print Post  
Hi,

Try this way:

Code
Select All
function onSetPen()
{
	var applet = <%= diagramView.AppletElement %>;
	var diagram = applet.getDiagram();
	var script = applet.getScriptHelper();
	var activeItem = diagram.getActiveItem();
	if (activeItem)
	{
		var dash = script.getConstant("DashStyle", "Dash");
		var pen = activeItem.getPen();
		pen.setDashStyle(dash);
		activeItem.setPen(pen);
	}
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
chieh
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 64
Joined: Aug 18th, 2010
Re: how to set style for shape or link on diagram
Reply #2 - Aug 26th, 2010 at 1:55pm
Print Post  
Hi Stoyan,
Thanks for your valuable example, I had tested that and added this into a simple project,
So currently I added two buttons, one is dash and another is Solid shown in the following,
<input id="DashButton" type="button" value="Dash" onclick="onSetPen()" />
<input id="SolidButton" type="button" value="Solid" onclick="onSetSolidPen()" />
Javascript is in the below

function onSetPen()
{
var applet = <%= DiagramView1.AppletElement %>;
var diagram = applet.getDiagram();
var script = applet.getScriptHelper();
var activeItem = diagram.getActiveItem();
if (activeItem)
{
var dash = script.getConstant("DashStyle", "Dash");
var pen = activeItem.getPen();
pen.setDashStyle(dash);
activeItem.setPen(pen);
}
}
function onSetSolidPen()
{
var applet = <%= DiagramView1.AppletElement %>;
var diagram = applet.getDiagram();
var script = applet.getScriptHelper();
var activeItem = diagram.getActiveItem();
if (activeItem)
{
var Solid = script.getConstant("DashStyle", "Solid");
var pen = activeItem.getPen();
pen.setDashStyle(Solid);
activeItem.setPen(pen);
}
}

When I select a link between two shapes and click ‘Dash’ button, it works perfectly. However, when I click button named Solid, style of link cannot be changed to solid. All items on diagram cannot be edited even create a new node or link on diagram, all I have to do is close browser and start it again.

In addition, in this solution if user clicks dash, all links or all shapes’ outline will be dash,is it possible to have dash and solid within all links? E.g. there are two links on the diagram. One is solid and another is dash. Is it achievable?
I use latest version of netdiagram to test that.
Do you have any suggestions?
Thanks
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: how to set style for shape or link on diagram
Reply #3 - Aug 26th, 2010 at 2:23pm
Print Post  
Ok, pens are shared by default, so try replacing

var pen = activeItem.getPen();

with

var pen = script.createPen(1, 0, 0, 0);

to create a Pen instance just for this item.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint