Question: Adding a free form drawing tool to the Diagram

[Robert Mims]

I've been asked to provide the ability for the user to draw free form lines within the diagram in order to annotate topographic anomalies within the physical environment being represented.

To my question:

Are there any plans to introduce a drawing tool to the diagram? 

If not, I plan to proceed to introduce the functionality as follows:

1. Add mouse capture events to the diagram canvas and a tool state to the diagram for the purpose of building up the path for the free form line

2. Use the resultant path to add a node (of type Path) to the diagram - it needs to be image exportable.

Any suggestions or insight in to the road-map would be appreciated.

Thank you.

[Shyam G]

Hi Robert, 

Please use polygon tool to achieve your requirement. Please refer to the code example and JSplayground link. 

Code example: 

function drawpolygon() { 

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

//draw polygon points dynamically 

            diagram.model.drawType = { type: "basic", shape: "polygon" }; 

            var tool = diagram.tool(); 

            diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce }) 

        } 

 

JSPlayground link: http://jsplayground.syncfusion.com/p5ivptql 

 

Help documentation:https://help.syncfusion.com/js/diagram/tools#drawing-tools 

 

Online drawing tool sample:http://js.syncfusion.com/demos/web/#!/bootstrap/diagram/gettingstarted/drawingtools 

Regards, 

Shyam G 

[Robert Mims]

Thank you, Shyam, I believe that gives me a good start.

The nuance in the request relative to this is that a polygon is a closed shape whereas the types of lines they are after are not.

[Shyam G]

Hi Robert, 

We don’t have option to draw an straight connector with intermediate segments using tools(drawing tools). Please check the below sample and confirm us whether it satisfies your requirement? 

Sample:http://jsplayground.syncfusion.com/qcd0jzes 

In the above sample, we draw the polygon shape using drawing tools, After completion of polygon shape, we get the polygon points and add it to segments collection and render it as a connector. Please refer to the video below. 

Video:http://www.syncfusion.com/downloads/support/directtrac/general/ze/polgontostraightvideo-18647837 

If you are not satisfied with our requirement, we will consider it as a feature and will draw the polyline using tools(drawing tools) as shown in the below video. 

Video:http://www.syncfusion.com/downloads/support/directtrac/general/ze/PolyLineVideo712273836 

Regards, 

Shyam G 

[Robert Mims]

Shyam, 

Thank you for the clever idea, however, I believe the best solution is what you pictured in the video where there isn't the remnant segment while drawing.

Please consider this as a feature request for the JavaScript implementation of the Diagram.

Thank you.

Robert

[Shyam G]

Hi Robert, 

 

We considered this “Need to provide polyline support in our diagram control ” as an usability feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

                                                                                                                                     

Regards, 

Shyam G