We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

XF Diagram functional parity and compatibility with Essential JS implementation

Presently we have a successful web implementation of the Essential JS diagram which works great. We've now begun work on a Xamarin Forms version of the application for use offline in remote locations.

In assessing the viability of implementing the same feature functionality within our mobile application as we have within our web application, I am assessing the gaps in implementation between the two and am seeking to understand where parity and compatibility fit within the Syncfusion product roadmap for the Xamarin Forms version.

The gaps that are of interest:

1.Tools, specifically free form drawing of lines
2. Compatibility ofJSON diagram expressionbetween implementations
3. CustomSVG node templatesleveraging, say, SkiaSharp within the template
4. Export of the Xamarin Formsdiagram to SVGwith aforementioned customization

Thank you.

Robert

8 Replies

SS Sathish Sivakumar Syncfusion Team May 13, 2019 10:59 AM UTC

Hi Robert, 
 
Greetings from Syncfusion. 
 
The following table illustrates  the solution for the reported queries.  
 
S. No 
Queries 
Solution 
Tools, specifically free form drawing of lines 
Tools – Xamarin Forms Diagram provides support for tools with two major tools options. i.e., Text Node tool and Connector tool like JS Diagram. The following explains more about Tools support in Xamarin Forms Diagram https://help.syncfusion.com/xamarin/sfdiagram/drawingmode  
 
Compatibility of JSON diagram expression between implementations 
SaveAsJson()  - Method to serialize (Save) diagram objects data in Json format.  
Custom SVG node templates leveraging, say, SkiaSharp within the template 
Custom SVG Template – We can handle SVG data from sample level and we can assign the template to diagram node template property to achieve the SVG template support in Xamarin Forms diagram. The Conversion for SVG stream to node template can be achieved through SkiaSharp support. Please find the sample for SVG template in the below mentioned link. 
 
Export of the Xamarin Forms diagram to SVG with aforementioned customization 
Currently we don’t provide support for svg export in Xamarin Forms diagram. Diagram can be exported in Image format (.png , .jpeg) and Json format. Kindly shares us your complete details/scenario in which this feature is required. So, we will check for other possibilities solution to achieve your requirement.  
 
Regards, 
Sathish 



RM Robert Mims May 13, 2019 11:23 AM UTC

Sathish,

Thank you for your reply.

Summarizing:

1. The Connector tool in the Xamarin Forms diagram is the entry point for the free form drawing experience of Essential JS. There, I can activate the tool and draw lines, straight or curved, any number, until deactivated. What I read from your link and here is that it might be possible with customization of the behaviors of the tool and assembling segments from captured gestures, but there is no Connector tool mode that would allow me to draw and create multiple segments for that line or connector within the Xamarin Forms Diagram.

If there is a means to achieve this, even if by customization on my part, I'm willing. If we can have functional parity with the Essential JS diagram - that is even better.

2. Yes, I am aware that I can save as JSON, however, I am specifically interested in the model compatibility between implementations. I understand there are some HTML/CSS specific annotations in the Essential JS version, however, if all other properties are similarly named and there is a development objective to retain compatibility with the other implementations, that is of interest to me.

This is not critical for our adoption, rather, a nice-to-have.

3. Thank you for the sample, I will review it.

4. Relative to exporting to SVG - in the Essential JS version I was able to export the diagram as SVG and then scale it to appropriately fit a customized report output, which had variability in content beyond the diagram SVG content. I used the same SVG export support of the chart to then assemble a rich report from the visuals that the Syncfusion controls created to a scalable report output. Using the exported image (and this was true in Essential JS early-on too) is not feasible as the quality degrades.

Having access to the SVG expressions along with layout is of high importance to our adoption as we seek functional parity with Essential JS here too.

Thank you.




SS Sathish Sivakumar Syncfusion Team May 14, 2019 09:27 AM UTC

Hi Robert,  
  
Greetings from Syncfusion.  
  
The following table illustrates the solution for the reported queries 
 
S.No 
Queries 
Solutions 
1. The Connector tool in the Xamarin Forms diagram is the entry point for the free form drawing experience of Essential JS. There, I can activate the tool and draw lines, straight or curved, any number, until deactivated. What I read from your link and here is that it might be possible with customization of the behaviors of the tool and assembling segments from captured gestures, but there is no Connector tool mode that would allow me to draw and create multiple segments for that line or connector within the Xamarin Forms Diagram. 
We have provided support for connector tool in Xamarin Forms Diagram. The connector tool can be enabled using following sample code . 
 
Code example: 
<diagram:SfDiagram  
x:Name="diagram"  
DrawingMode="Connector"> 
</diagram:SfDiagram> 
 
 
Please refer the link for UG documentation:  
Yes, I am aware that I can save as JSON, however, I am specifically interested in the model compatibility between implementations. I understand there are some HTML/CSS specific annotations in the Essential JS version, however, if all other properties are similarly named and there is a development objective to retain compatibility with the other implementations, that is of interest to me. 
The JSON saved data from Xamarin forms Diagram can be retrieved only by using Xamarin forms Diagram.  
Thank you for the sample, I will review it. 
Please let us know if you have any queries in the sample. 
Relative to exporting to SVG - in the Essential JS version I was able to export the diagram as SVG and then scale it to appropriately fit a customized report output, which had variability in content beyond the diagram SVG content. I used the same SVG export support of the chart to then assemble a rich report from the visuals that the Syncfusion controls created to a scalable report output. Using the exported image (and this was true in Essential JS early-on too) is not feasible as the quality degrades. 
Can you please provide us more information about the issue which is reproduced at your end? So, we can provide a prompt solution for the mentioned issue / behaviors. 
 
Regards, 
Sathish


RM Robert Mims May 14, 2019 01:43 PM UTC

Sathish,

I'll try explaining some of the concepts again and include better examples - I think we're just missing each other.

1. In Essential JS 1 I could set the tool and drawType properties as follows to be able to free form draw lines, without caps or shapes (connecting to nothing):

tool: ej.datavisualization.Diagram.Tool.DrawOnce | ej.datavisualization.Diagram.Tool.SingleSelect | ej.datavisualization.Diagram.Tool.MultipleSelect
drawType: , { type: 'connector', segments: [ { type: ej.datavisualization.Diagram.ConnectorType.Polyline} ]}

This functionality with introduced by Shyam and was tracked in ticket #176645

Allowing users to define a boundary within a diagram that describes a physical location for mining activities (pictured, the dashed line was drawn with this tool introduced by Shyam in Essential JS 1 using the tool and drawType configuration above.)



The difference in the Connector Tool for Xamarin Forms is that it only provides for segment types and connections between shapes and ports of nodes. Activating the Connector Tool mode (using the SampleBrowser.SfDiagram Drawing Tool sample shipped in 17.1.0.38) does not allow me to draw a line on the diagram as I did with Essential JS (activate the connector tool in the sample, draw a line that does not connect any other nodes or ports to simulate recreating the behavior above.)




2. Serializing the sample (using the SampleBrowser.SfDiagram Organization Chart sample shipped in 17.1.0.38) results in an exception (toggle the Overview to trigger image save and JSON output.) - using the same method in a sample not using a custom model worked. There are some similarities to the Essentials JS model that might help with building a translation bridge for my application.

System.Runtime.Serialization.SerializationException: Type 'DiagramEmployee' with data contract name 'DiagramEmployee:http://schemas.datacontract.org/2004/07/' is not expected. Add any types not known statically to the list of known types - for example, by using the KnownTypeAttribute attribute or by adding them to the list of known types passed to DataContractSerializer.
   at System.Runtime.Serialization.XmlObjectSerializerWriteContext.SerializeAndVerifyType(DataContract dataContract, XmlWriterDelegator x...

3. Using your sample for SVG - I think I can make that work, though I'll probably use more templates. Related to 2., I see when serializing the sample node that the pathData property can be found in the JSON expression of the node. That would be more inline with SVG template support within Essential JS Diagram - is custom SVG node support then on the roadmap?

Exporting the sample, you can see the backing model has the property:

{"connectors":[],"height":862,"nodes":[{"borderColor":"rgb(0,0,0)","borderWidth":2,"content":"svg","height":500,"isDraggingEnabled":"True","isExpanded":true,"isResizingEnabled":"True","isRotationEnabled":"True","isTextEditingEnabled":"True","labels":[{"annotationPositions":"Alignment","fontFamily":".SF UI Text","fontSize":12,"horizontalAlignment":"Center","isAligned":false,"offsetX":0,"offsetY":0,"text":"","textBrush":"rgb(0,0,0)","verticalAlignment":"Center"}],"name":"1","offsetX":25,"offsetY":25,"opacity":1,"pathData":"","ports":[],"solidBrushColor":"rgb(1,1,1)","type":"basic","width":500}],"pagesettings":{"backgroundColor":"rgb(1,1,1)","pageHeight":0,"pageWidth":0},"width":1200}

4. Using your sample I added a few dozen circle shapes with labels and then exported - you'll see the attached screenshot and then the exported image. If you view each and zoom in 30 percent you'll see the image quality difference (the simplest example for me) - for the diagrams that we export from Essential JS using SVG, we're able to crop dead space, fit to the page and also adjust the print preview/view window of the SVG document to ensure best fit and visibility of the diagram shapes and annotations - the XF Diagram image export doesn't retain the quality - hence the need for SVG in XF as we have in Essential JS.

To recap:

1. We want to draw lines that are free form paths of points that do not connect to ports or nodes - as we can within Essential JS.
2. There may be an issue with serializing diagrams that use custom models - this can be reproduced from the XF Sample Browser using the Organization Chart.
3. Your sample appears viable, thank you.
4. SVG support in nodes and export is an issue. The Essential JS support for it is great and should be a high priority for porting to the XF implementation. An image export does not retain the quality of the original and does not scale without image quality loss.

Thank you.

Robert

Attachment: SampleUpdated_7d342005.7z


RM Robert Mims May 14, 2019 01:44 PM UTC

Looks like the image attachment didn't come through, here it is.

Attachment: Images_b614908a.7z


SS Sathish Sivakumar Syncfusion Team May 16, 2019 03:13 AM UTC

Hi Robert,  
  
Thank you for your update. 
  
The following table illustrates the solution for the reported queries 
 
S.no 
Queries 
Solutions 
The difference in the Connector Tool for Xamarin Forms is that it only provides for segment types and connections between shapes and ports of nodes. Activating the Connector Tool mode (using the SampleBrowser.SfDiagram Drawing Tool sample shipped in 17.1.0.38) does not allow me to draw a line on the diagram as I did with Essential JS (activate the connector tool in the sample, draw a line that does not connect any other nodes or ports to simulate recreating the behavior above.) 
We are regret to let you know that SfDiagram doesn’t provide support for Freeform / Polyline connector tool.  
There may be an issue with serializing diagrams that use custom models - this can be reproduced from the XF Sample Browser using the Organization Chart. 
We can reproduce the same issue from our side as mentioned. Currently we don’t provide support to serialize (save as JSON data) for custom model in Xamarin forms Diagram layout 
I see when serializing the sample node that the pathData property can be found in the JSON expression of the node. That would be more inline with SVG template support within Essential JS Diagram - is custom SVG node support then on the roadmap? 
In the given sample, we are adding the SVG path to node as a template using SkiaSharp conversion. The path data property holds the value of SfGraphics path so SVG data from the sample is not preserved. We have logged a feedback report for importing SVG data as a custom node. The feedback report link is available below. 
 
SVG support in nodes and export is an issue. The Essential JS support for it is great and should be a high priority for porting to the XF implementation. An image export does not retain the quality of the original and does not scale without image quality loss. 
SfDiagram supported image support (.png and .jpeg) are raster image format so if you zoom on the saved image, the images will get pixelate which is a default behavior of .png and .jpeg. But SVG format is vector image file format which will not have pixels or grain effects like .png and .jpeg.  We have logged this requirement as feature request. Once the feature is implemented (Importing and Exporting SVG for Diagram) this issue will be resolved. We don’t have any immediate plans to implement this feature.   At the planning stage for every release cycle, we review all open features.  We will let you know when this feature is implemented. 
 
Feedback report link:  
 
 
 
Regards, 
Sathish 



RM Robert Mims May 16, 2019 06:33 AM UTC

Sathish,

Would you please add #1 as a feature request and #2 as a feature request/bug fix?

Thank you.

Robert


SS Sathish Sivakumar Syncfusion Team May 17, 2019 02:14 PM UTC

Hi Robert, 

Please find the feedback reports for the requested features. Currently, we don’t have any immediate plans to implement this feature.   At the planning stage for every release cycle, we review all open features.  We will let you know when this feature is implemented.  
 
Support for Serializing (save as JSON data) the custom model in SfDiagram - https://www.syncfusion.com/feedback/6375/support-for-serializing-save-as-json-data-the-custom-model-in-sfdiagram  


Regards, 
Sathish 


Loader.
Live Chat Icon For mobile
Up arrow icon