Open kabachello opened 1 day ago
This is actually a really nice request. I think it would be useful for users to let them add custom shapes to the menu. There is already a way to design new shapes and export them with Schemio, but I implemented that just for myself, so that I can easily create new shapes for Schemio. I will add it to my backlog but it might be a bit more complicated, since I need to make it work for the cloud version of Schemio (https://schem.io) where any diagram can be made public.
But isn't the sidebar loaded from a JSON already
There is already a way to design new shapes and export them with Schemio, but I implemented that just for myself
Where to find this?
Isn't the sidebar loaded from a JSON file? If there already is a way to design new shapes, how can I embed them into the sidebar? If the sidebar really is a JSON, then adding shapes will not require a custom build, right?
But isn't the sidebar loaded from a JSON already And yes and no. The majority of the shapes are hardcoded in Shape.js file and are loaded in the
CreateItemMenu
component by callingShape.getRegistry()
function: https://github.com/ishubin/schemio/blob/master/src/ui/components/editor/CreateItemMenu.vue#L359
The Shape.js file loads all hardcoded Schemio shape like rect
, ellipse
, all uml_*
shapes, tables etc.
However there is a concept of "external shapes". Whenever Schemio loads a diagram document, it traverses through all of its items and loads dynamically any external shape groups that are referenced in the items. These shapes are managed in the https://github.com/ishubin/schemio/blob/master/assets/shapes folder and are registered in the https://github.com/ishubin/schemio/blob/master/assets/shapes/shapes.json index file. So, for example, the Electronic Circuit shape group is stored in https://github.com/ishubin/schemio/blob/master/assets/shapes/electronic-circuit.json and it is not hard-coded in the js code and is not loaded automatically until it is used.
Where to find this?
Here is an example of how to use shape designer https://www.youtube.com/watch?v=-NpLN3m6jmY. This is a very quick demo and it does not go in details of how to design custom shape outlines, pins and text slots. Also keep in mind that you can't use any existing shapes (rect, ellipse) inside of it. The only one that is allowed is path
shape. For the primitives you need to use the primitives shapes that are part of the "Shape Designer" group
Is there a way to add shapes to the left-side menu? I see, there is a way to reuse drawings via "external templates" button. But can I modify the sidebar?
As far as I understand, the sidebar is loaded from a JSON file. Is there a documentation of its structure?