Wanted to understand is there an event support when drag the segment thumb ?
if not what's the workaround ? could you please share some code snippet to help me understand , I want to capture the segments final properties once the drag is complete. Also please help me understand what are details I need to store about connectors/segments .
My intension is to save the segment details after state of movement is completed, so that later I can use this information to load the diagram with connectors having it's user managed coordinate, instead of default position.
We have logged a feature “Support to add event for segment points editing in connector”. We have planned to implement this feature in our volume 1, 2023 release, which is scheduled to release by the month of March, 2022. You can track the status of the feature from the below feedback link.
Did you mean - it's scheduled to be released by March'23? can you please update when it's available for consumption?
Sorry sourangsu,
Volume 1 will be released at the end of March 2023. You can track the status of the feature by using the above link, which was mentioned in the previous update.
Thanks, on a related topic- can you please give an example of ISegmentCollectionChangeEventArgs API in JavaScript (ES5) Diagram API control - Syncfusion handle? and what is the trigger for this event?
We created a sample for your requirement. Whenever a new segment is added or removed on moving the connector end points, the segmentCollection event will trigger. Refer to the below-mentioned video recording, code example and sample.
Code Snippet
diagram.segmentCollectionChange = function (args) { console.log("SegmentCollection") } |
Sample
https://stackblitz.com/edit/duuspv-gwhbbq?file=index.html,index.js |
Hi Sourangu,
We are happy to inform you that we have successfully implemented the "Support to add event for segment points editing in connector" feature, which has been included in Essential Studio 2023 Volume 1 Main Release v21.1.35. We have prepared a word document that explains when the event will be triggered and how it works, along with a code example and sample.
Sample: https://stackblitz.com/edit/a5gf97?file=index.js,index.html
Hi -
Thanks for providing the support to support event for segment points editing, after consuming the 21.1.37 V I am able to use this feature.
However, in my original post, I mentioned that we were trying to save movement of connectors and save it, so that later when we open the diagram , we can automatically load the connectors with user saved coordinates.
For example, we are moving the nodes, we are saving the offsetX and offsetY , and later when we open the diagram, after loading we override the nodes coordinates from saved values.
Similarly I want to achieve the same for connectors.
My problem, for example when I drag segments it adds more segments, but I am unable to bind extra segments/modified segments with diagram on load.
Could you please give an example on how to
Hi,
You can retain the segments by using our save and load method itself, why are you trying to store it separately.
Regards,
Vivisa
the saveDiagram api fails throughout with below error:
we tried to understand the issue using your non minified js , and apparently it tries to iterate through each property for every element and while doing this - somewhere we get call stack size exceeded error for array.
I have posted this earlier in forum, but didn't get any solution.
We are not sure since we are using custom html template to design nodes we are facing issue or not. As an alternative , we are storing json data for all nodes and it's user defined x,y coordinates, we plan on doing the same connector since saveDiagram api fails.
Please let us know , if there is any alternative way to store/save the connectors position and later load diagram using those modified position.
or how we can troubleshoot saveDiagram api to understand the nature of the problem
Hi,
We have created the sample by enabling serializationSettings property of the diagram. You can avoid the call stack size exceeded error by enabling this property. Refer the below sample and code snippet for reference. Still, if you face any issues, please share us more details such as modify the below sample or JSON.
Code-snippet:
serializationSettings: { preventDefaults: true },
|
Sample:
https://stackblitz.com/edit/ajawdm-yznbcr?file=index.ts,index.html
Regards,
Vivisa