How to add shapes to the sidebar?

[kabachello]

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?

[ishubin]

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.

[kabachello]

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?

[ishubin]

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 calling Shape.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

[kabachello]

Thank you for the detailed information! I like the idea of having an "external" shape collection like that for electronic cirquits. The idea of loading it on-demand fits really well into my use case. I would probably need multiple sets of such shapes.

If I create a regular button, change it's colors, give it a default title, etc. and save it. Can I than copy the saved JSON and place it in a file like electronic-cirquit.json? Or does this only work for shapes created via shape designer?

[ishubin]

Unfortunately that is not going to work. The item's JSON structure in the document is different from the one that is used by the shape itself. When you are using a particular shape to create an item, it uses JSON to store the reference to the shape's id and the values of the public properties of that shape. While the structure used in electronic-circuit.json is different as it specifies how the shape should render a particular item either by using shape primitives or by using path. That is what that shape designer exports.

So, for you to use your own shapes, you would first have to design them in Schemio and export into shape group JSON file. Then you would have to store that exported JSON in assets/shapes/ folder and update assets/shapes/shapes.json file, by adding a reference to your shape group.