search

ishubin / schemio

Web based diagramming app that lets you build interactive diagrams and prototypes
https://schem.io
Mozilla Public License 2.0
89 stars 3 forks source link

How to add shapes to the sidebar? #707

Open kabachello opened 1 day ago

kabachello commented 1 day ago

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 commented 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.

kabachello commented 14 hours ago

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 commented 3 hours ago

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