KristofferStrube / Blazor.SVGEditor

A basic SVG editor written in Blazor.
https://kristofferstrube.github.io/Blazor.SVGEditor/
MIT License
306 stars 51 forks source link

Access to internal instructions (and adding new elements by instructions) #8

Closed ABIOLI-COM closed 2 years ago

ABIOLI-COM commented 2 years ago

Kristoffer, really a good job, in creating this library. It's very clear and useful out of the box, but I'm wondering if it would be possible to make it even more flexible, giving access to the internal instructions. I went quickly through the inner code, and I feel that your work on the internal representation is even more interesting than the front end side. For what I see, in this moment I can only work passing and receiving the svg representation, with the cumbersome syntax. For scientific drawing, for example, it would be much more flexible to be able to pass and receive the list of instructions of a path. ...or maybe I'm missing something, here... :-) Congratulations again, I would like to have your opinion, when you can, of course. Thank you. AB

KristofferStrube commented 2 years ago

Hey @ABIOLI-COM,

Thanks a lot. You are right that a lot of the internal structure that parses the SVGs isn't available which would make it tough to extend for others.

And you are correct that you currently can't add elements to the editor without having the same element defined in SVG first since all the components for editing each individual SVG element type uses that as its backing storage. I have tinkered with using the editor in a distributed setting with multiple clients and here it becomes especially clear that it could be smart to have the components have their own storage so that they are not dependent on the SVG DOM tree. For now, it isn't really a flaw since the goal of the project is to edit SVG definitions so storing every change in an SVG definition suits this need.

Thanks for your interest in the project.

ABIOLI-COM commented 2 years ago

It's surely not a flaw, of course! :-)
I'm still spending the day playing with it, and there are really many interesting things. For the moment, it could be enough if I could obtain the list of instructions from the 'Input' string.
I'm making progresses, but I'm still not there: if I can get this working, then recreating the 'Input' string from that would be easy, and I could work more properly with the data outside the editor.
Do you have any ideas? :-)
Thanks again.

KristofferStrube commented 2 years ago

If you just want to parse a list of path instructions then take a look at this: https://github.com/KristofferStrube/Blazor.SVGEditor/blob/main/src/KristofferStrube.Blazor.SVGEditor/PathDataSequences/PathData.cs#L8

KristofferStrube commented 2 years ago

I likewise have this helper method that takes a list of path instructions and turns them into a string. https://github.com/KristofferStrube/Blazor.SVGEditor/blob/main/src/KristofferStrube.Blazor.SVGEditor/PathDataSequences/PathData.cs#L166

KristofferStrube commented 2 years ago

If you want to parse actual SVG elements and then get the instructions from the ones that are paths then you would need to change the list of ISVGElements in the SVG class to be public. https://github.com/KristofferStrube/Blazor.SVGEditor/blob/main/src/KristofferStrube.Blazor.SVGEditor/SVG.razor.cs#L17

ABIOLI-COM commented 2 years ago

Thank you again, I'm wasting your time. But actually, I have the opposite need. When the user interacts with the editor, the only thing I can explore is the 'Input' string, that is now the actual svg representation. From that, I would like to have the original list of instructions, to manipulate/store/whatever them...

ABIOLI-COM commented 2 years ago

Oh, easy solution! Your last comment was what I was looking for! :-) Thanks, now I think I have everything! :-) Really thank you again!