[DISCUSSION] Version 2.0.0

[zHaytam]

Hello,

I have been thinking a lot about the future of the library and what path to take to ensure that the users get the best experience. It is time to start moving away from react-diagrams as the only inspiration and move forward.

My next plan is to rework some parts of the library and add some much needed functionalities to make Z.Blazor.Diagrams a usable library in many use cases. Here's what I'm planning:

• Add concepts of Link routers and Link path generators.
• Add on-the-fly markers (which would be a triangle/arrow by default).
• Represent the HTML and SVG layers separately and clearly.
• Optimize some hot paths.
• Add a Shapes library to help with more generic diagrams (e.g. Flowcharts).
• Make it easier to register components for models (maybe an attribute + scan).
• Review/Document the SubManagers concept.
• Add more events.
• Resolve all the issues inside the 2.0.0 milestone.
• Add some tests, at least unit tests.

I'm not sure how many actual users do we have, but seing all these changes that will be made, this version will have a lot of breaking changes, and that's why it's a major version.

Any feedback is very welcome!

[zHaytam]

A couple of extra points I'm still thinking about:

• Target .NET 5 and use CSS/JS isolation.
• Add mobile support 📱

[EugeneDelage]

Hello, I really like your component. The usage I intend to do with it in the future is very close to the visual programming software called grasshopper (you can find a tutorial here https://youtu.be/XHqiD-qXGA0 . It is all about connecting nodes together.
Thanks

[MichaelLant]

.NET 5 is very important

I am not sure what you mean by JS/CSS isolation

Managing the location of ports would be nice. IOW, say that a newly added port could be an input port (left side of the object) and or an output port (right side of the object) would be very helpful. This is important for workflow and implied directionality. Not sure if this already exists, but it is very useful.

[zHaytam]

Hello @MichaelLant, I have received a message from you in another repo but it seems it got deleted?

Thanks @zHaytam for the info.

What do you mean by CSS/JS isolation?

My key criteria for selecting a diagramming tool are:

Blazor - obviously
Minimial JS/CSS
Ability to style components and create customer renders
Contain elements within elements. This could be as simple as the entitites in an ERD: Table with its prescribed columns (represented as rows in the diagram element) and then the properties of each column that are exposed in an editor.
Ability to constrain link types, for example a column definition can only connect to a table, but not the individual columns.
Easy access to the underlying model of the diagram so that the layout definition can be mapped to data for processing
I have a bunch of other requirements, but those are the key ones.

I will be looking at Blazor.Diagrams over the weekend.

Thank you for you help with sorting out the other problems I encountered.

Michael

Is it okay if I post it again?

[zHaytam]

Just to answer you, all the requirements you need are available in Z.Blazor.Diagrams. It will surely get much better in 2.0.0, but it's still possible to do all of that with the current version.

What I mean by CSS/JS Isolation is what got added in Blazor (.NET 5). It can make a lot of things much easier and cleaner, especially the JS modules part.

Read more here:

• https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0
• https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#js-modules

[MichaelLant]

Hi Haytam, I am fine if you repost it. I am sorry for the confusion. I am looking at both diagraming components and I got the Git projects mixed up with the posts. Michael Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

…

________________________________ From: Haytam Zanid <notifications@github.com> Sent: Saturday, January 30, 2021 5:03:58 AM To: zHaytam/Blazor.Diagrams <Blazor.Diagrams@noreply.github.com> Cc: Michael Lant <mlant@sphere-data.com>; Mention <mention@noreply.github.com> Subject: Re: [zHaytam/Blazor.Diagrams] [DISCUSSION] Version 2.0.0 (#75) Hello @MichaelLant<https://github.com/MichaelLant>, I have received a message from you in another repo but it seems it got deleted? Thanks @zHaytam<https://github.com/zHaytam> for the info. What do you mean by CSS/JS isolation? My key criteria for selecting a diagramming tool are: Blazor - obviously Minimial JS/CSS Ability to style components and create customer renders Contain elements within elements. This could be as simple as the entitites in an ERD: Table with its prescribed columns (represented as rows in the diagram element) and then the properties of each column that are exposed in an editor. Ability to constrain link types, for example a column definition can only connect to a table, but not the individual columns. Easy access to the underlying model of the diagram so that the layout definition can be mapped to data for processing I have a bunch of other requirements, but those are the key ones. I will be looking at Blazor.Diagrams over the weekend. Thank you for you help with sorting out the other problems I encountered. Michael Is it okay if I post it again? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#75 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAFIKXXZWWILOIZZWJKVAJLS4PKQ5ANCNFSM4WWCH2AA>.

[MichaelLant]

Thanks for the info. I was unaware of the .css isolation in Blazor. Still so much to learn. Do you have a planned release date for 2.0? Michael Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

…

________________________________ From: Haytam Zanid <notifications@github.com> Sent: Saturday, January 30, 2021 5:10:15 AM To: zHaytam/Blazor.Diagrams <Blazor.Diagrams@noreply.github.com> Cc: Michael Lant <mlant@sphere-data.com>; Mention <mention@noreply.github.com> Subject: Re: [zHaytam/Blazor.Diagrams] [DISCUSSION] Version 2.0.0 (#75) Just to answer you, all the requirements you need are available in Z.Blazor.Diagrams. It will surely get much better in 2.0.0, but it's still possible to do all of that with the current version. What I mean by CSS/JS Isolation is what got added in Blazor (.NET 5). It can make a lot of things much easier and cleaner, especially the JS modules part. Read more here: * https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0 * https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#js-modules — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#75 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAFIKXSKRJZL5YMQLHBHPNDS4PLINANCNFSM4WWCH2AA>.

[zHaytam]

No problem haha!

Do you have a planned release date for 2.0?

I'm still thinking about the needed changes, so right now no.
Will add a date once I have everything thought of.

[zHaytam]

Changes done so far:

• Seperate Nodes/Links from DiagramManager, they are now layers (DiagramManager.Nodes and DiagramManager.Links)
• LinkAttached event removed (TargetPortChanged is the alternative)
• Node/Link Added/Removed events removed in favor of layer events (DiagramManager.Nodes.Added etc)
• Events are now batch-based, for example the Added event gives an array of added nodes, not a single one. This is to save some re-renders.
• It is now mandatory to add nodes to diagram before creating groups
• Remove links when group is removed
• Add GroupUngrouped event (not the greatest name 😄)
• Add RemoveGroup method to remove group and all its members
• Pressing DEL on a selected group will now remove it
• SelectionChanged event only contains the model now, use Selected property
• Removed SelectedModels in favor of GetSelectedModels(), this is because we don't hold a list of selected models anymore (unecessary)

Starting with all the breaking changes first, then enhancements/new functionalities.
There will be a guilde on how to upgrade to 2.0.0 from older versions.

[MAKolker]

Please add import/export layout to JSON (or xml)

[zHaytam]

Please add import/export layout to JSON (or xml)

For sure. There will be new methods for (de)serializing everything in the library. You can choose to/from what (json or xml or something else).

[Rickybarb5]

Serialization is a very good feature. I actually find myself in the situation where I need to clone nodes, in order to preserve state when editing the various properties, that would help quite a lot.

[zHaytam]

More work done:

• Rename DiagramSubManager to Behavior, it makes more sense
• RegisterBehavior now takes as an argument the behavior instance to add. No need to use Activator.CreateInstane for something like this, it just slows things down
• Add Router and PathGenerator concepts:
  • To be explained in the CHANGELOG
• Removed LinkType enum
• Removed DefaultLinkType link option
• Removed DefaultLinkModel link opption
• Added on-the-fly markers.
  • A link can either have a SourceMarker or TargetMarker
  • Link markers are SVG Paths with a known width (to calculate angle and where to cut the links)
  • Static markers are available (arrow, circle, square) as well as utility methods to create known shapes.

[zHaytam]

I just uploaded to NuGet a new Release Candidate!

• https://www.nuget.org/packages/Z.Blazor.Diagrams.Core/2.0.0-rc
• https://www.nuget.org/packages/Z.Blazor.Diagrams/2.0.0-rc

Alongside all the mentioned changes, here are the new important ones:

• Mobile support!
• Portless links (links between nodes directly)
• Routers & PathGenerators
• Orthogonal router
• Dynamic groups
• Lot of fixes
• Lot of other stuff

If any of you have the time, feel free to test the prerelease and tell me your thoughts!