As you see the attached pic i need draw a custom from container 1 to container 2 ( which can be any where inside my diagram) I need to give user flexibility to choose the link from nodelist view first click on container is it's origin and second click is its destination. We have 3 to 4 kinds of links.

In the attached pic Arrow is shape node and we are not able connect to another container node.
Can you please suggest something what should i try to achieve this kind of functionality?

I was checking that example but could not find similar api in java script.

Hi,

To create the custom shape you can use the ShapeDesigner.exe tool (provided with the package) to save shapes you want to use and load them via the ShapeLibrary API. Or you can use the following code to create the shape definitions directly in code:

MindFusion.Diagramming.Shape.registerDefaultShape(
    new MindFusion.Diagramming.Shape({ id: "Connector", outline: "", decoration: "M10,10 L10,50 L90,50 L90,90" })); 

Then you can use this shape like all the other predefined ones:

var shape = MindFusion.Diagramming.Shape.fromId("Connector"); 

Regards,
Lyubo

Hi,

Indeed this method and the ShapeLibrary class are not part of the typescript definitions file at the moment, we will add them in a later release.

To add your custom shape, use the ShapeDesigner.exe tool and save a xml library with it. You can then assign that xml library file to the Diagram/NodeListView ShapeLibraryLocation property to use in your project.

If you want to use the svg-like path syntax to define your shapes, you can add the registerDefaultShape and the Shape constructor to your local definitions file as a workaround:

//jsdiag.d.ts

//...

class Shape
{
    // ...
   constructor(params?: any)
   static registerDefaultShape(shape: Shape): void;
}

//... 

Regards,
Lyubo

Hi,

Please find the updated definitions files attached to this post. It won't be necessary to call the registerDefaultShapeMethod to use the shape. Calling the constructor is enough:

var shape = new MindFusion.Diagramming.Shape({ id: "Connector", outline: "", decoration: "M10,10 L10,50 L90,50 L90,90" });  

Regards,
Lyubo

Hi,

Please, post here the shape definition you're trying to use, so that we can investigate. If you're using only decoration elements, make sure the definition includes an empty string outline parameter too, like in the above example.

Also, just noticed that the example above has one closing parenthesis than needed and that will cause a syntax error. I've modified the example to be correct now.

Regards,
Lyubo