(UTC)
  The MindFusion Forums › Flow Diagramming Components › ASP.NET MVC › How to draw custom shapes in diagramming
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to draw custom shapes in diagramming (Read 4885 times)
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
How to draw custom shapes in diagramming
Oct 2nd, 2013 at 7:46pm
Print Post  
Hi,

How can i draw a custom shape in Diagramming in js/server side.
I need to draw a square inside a circle.

Thanks
Kiran B
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to draw custom shapes in diagramming
Reply #1 - Oct 3rd, 2013 at 10:38am
Print Post  
Hi,

There is no official support for custom shapes yet in the MVC control, but this should work:

Code
Select All
// on client side
Sys.Application.add_init(function (sender, args)
    {
        new MindFusion.Diagramming.Shape({
            outline: 'A50,50,50,0,6.28318530717959,0 Z',
            decoration: 'M15,15 L85,15 L85,85 L15,85 L15,15 Z',
            id: 'CircledRect' });
    });

// on the server
Shape shape = new Shape(
new ElementTemplate[]
    {
        new ArcTemplate(0, 0, 100, 100, 0f, 360f)
    },
new ElementTemplate[]
    {
        new LineTemplate(15, 15, 85, 15),
        new LineTemplate(85, 15, 85, 85),
        new LineTemplate(85, 85, 15, 85),
        new LineTemplate(15, 85, 15, 15)
    },
new ElementTemplate[]
    {
        new LineTemplate(-20, 100, 140, 100),
        new LineTemplate(140, 100, 140, 140),
        new LineTemplate(140, 140, -20, 140),
        new LineTemplate(-20, 140, -20, 100)
    },
FillMode.Winding, "CircledRect"
);


Make sure the server-side shape definition comes before any FromJson calls.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: How to draw custom shapes in diagramming
Reply #2 - Oct 19th, 2013 at 6:24am
Print Post  
Hi Stoyan,

I tried the below code to add the new shape to nodelist view , but i am getting some JavaScript exception

var newShape = new MindFusion.Diagramming.Shape({
                     outline: 'A50,50,50,0,6.28318530717959,0 Z',
                     decoration: 'M15,15 L85,15 L85,85 L15,85 L15,15 Z',
                     id: 'newShape'
                 });

                 $find("nodelist1").addItem(newShape);

Exception:
Uncaught TypeError: Cannot read property 'outlinePath' of undefined

Thanks
Kiran B
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to draw custom shapes in diagramming
Reply #3 - Oct 19th, 2013 at 11:04am
Print Post  
Hi,

You must add a ShapeNode instance to the NodeListView, and not a Shape:

Code
Select All
var newNode = new MindFusion.Diagramming.ShapeNode();
newNode.setShape(newShape);
nodeListView.addItem(newNode);


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: How to draw custom shapes in diagramming
Reply #4 - Oct 19th, 2013 at 7:52pm
Print Post  
Hi Stoyan,

Now the new item is coming in nodelistview, but i am not able to drag and drop that item to diagram canvas.

Thanks
kiran B
  
Back to top
 
IP Logged
 
Kiran B
Full Member
***
Offline


I Love MindFusion!

Posts: 102
Joined: Apr 19th, 2013
Re: How to draw custom shapes in diagramming
Reply #5 - Oct 19th, 2013 at 11:51pm
Print Post  
Hi Stoyan,

I got the solution.
Need to add the below code also.

nodeListView.addBox(newNode);

Thanks
Kiran B
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to draw custom shapes in diagramming
Reply #6 - Oct 21st, 2013 at 6:23am
Print Post  
My mistake, sorry, addItem is actually a private method, you should call the documented addNode method:

nodeListView.addNode(newNode);

It calls several other methods internally: addItem, addBox and addCaption.

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

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

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge