A Bezier Line Tool - Possible?

[Jim Jacobs]

Hi,

I'm using the orthogonal and straight line tools.
I'd like to add a bezier tool to my toolbar in addition to these two.

Is this possible?

Any suggestions on how this would be accomplished?

Thanks in advance.

Jim

[Kameshwaran R]

Hi Jim,

Thanks for your interest in Syncfusion product

Currently we don’t have support for your requirement “add a bezier tool to my toolbar”. Please create an incident on behalf of this reported support from the following link for better assistance.

Here is the link: link

Please let me know if you have any queries.

Regards,

Kameshwaran R.

[Jim Jacobs]

Hi,

I decided to programmatically create a bezier connector based on the user clicking a toolbar button.
I used the sample from your online documentation.

Here's the function:

function CreateBezierConnector() {
    //Adding Bezier through vectors
    var segments = [{
        type: "bezier",
        //Length and angle between source point and control point 1
        vector1: { angle: 180, distance: 120 },
        //Length and angle between target point and control point 2
        vector2: { angle: 10, distance: 140 }
    }];
    var connectors = [{
        segments: segments,
        sourcePoint: { x: 310, y: 180 },
        targetPoint: { x: 190, y: 40 }
    }];
    $("#DiagramContent").ejDiagram({
        connectors: connectors
    });
}

The connector renders on the screen, but as soon as I try to do anything with it, I encounter errors.
See the attached video.

This is my first attempt at doing this type of thing, so I suspect I'm doing something wrong.

Please help.

Thanks

Jim

Attachment: Syncfusion__bezier_errors__06Fev2015_624caeed.zip

[Shyam G]

Hi Jim

Thanks for using Syncfusion products.

 We suggest you to set an “name” for an connector to resolve your reported issue. Please refer the sample and code snippet below.

Code snippet:

function bezierconnector() {            

            var diagram = $("#Diagram1").ejDiagram("instance");

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name:"bezier",

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 }

            }];

            //add the connectors

            diagram.add(connectors);

        }

Sample:http://www.syncfusion.com/downloads/support/directtrac/118147/WebApplication2-783540094.zip

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi,

Yep, the name property solved my issue.

Thanks

Jim

[Shyam G]

Hi Jim

Thanks for the update

Please let me know if you require further assistance on this.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

Looks like it was premature of me to say if was working.
Although the code will drop a bezier connector on the canvas if there are no connectors present, if there's already a connector there, it changes it to a bezier.

See the attached video.

Here's my code behind the toolbar button:

function CreateBezierConnector() {
    //Adding Bezier through vectors
    var segments = [{
        type: "bezier",
        //Length and angle between source point and control point 1
        vector1: { angle: 180, distance: 120 },
        //Length and angle between target point and control point 2
        vector2: { angle: 10, distance: 140 }
    }];
    var connectors = [{
        name: "bezier",
        segments: segments,
        sourcePoint: { x: 310, y: 180 },
        targetPoint: { x: 190, y: 40 }
    }];
    $("#DiagramContent").ejDiagram({
        connectors: connectors
    });
}

Any thoughts?

My thanks in advance.

Jim

Attachment: Syncfusion__Bexier_Issue__11Feb2015_561f409c.zip

[Shyam G]

Hi Jim

Thanks for the update.

We suggest you to use the “add” API in order to resolve your reported issue. Please refer the sample and code snippet below for your reference.

Code snippet:

function bezierconnector() {            

            var diagram = $("#Diagram1").ejDiagram("instance");

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name: "bezier",

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 },

 

            }];

            //add the connectors

            diagram.add(connectors);

           

        }

Sample: http://www.syncfusion.com/downloads/support/directtrac/118147/WebApplication2_(2)-1173037088.zip

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

I tried the 'add' APU but the with the same result.
See the attached video.

It seems that dropping a bezier connector from the palette works fine.

Any suggestions as to what to try next?

Thanks

Jim

Attachment: Syncfusion__Bexier_Issue__12Feb2015_3601c6fa.zip

[Shyam G]

Hi Jim

Thanks for the update.

Please note that the reported issue occurs due to the rendering of connectors with the same name. So, we suggest you to render the connector with the different name in order to resolve your reported issue. Please refer the code snippet below.

Code snippet:

function bezierconnector() {

            var diagram = $("#DiagramContent").ejDiagram("instance");

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name: "bezier" + ej.datavisualization.Diagram.Util.randomId(),

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 },               

            }];

            //add the connectors

            diagram.add(connectors);

        }

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

That works.
Thanks

Jim

[Shyam G]

Hi Jim

Thanks for the update.

Please let us know if you require further assistance on this.

Regards,

Shyam G