Tutorial for adding new shapes

First of all, remember to create the git branch by referring to the #issue assigned in its name. Example: feature/#148-create-star-basic-shape

1. Create the .svg of your figure and place it in the /public/ folder

public

Normally you will find the .svg in the description of your issue, this element allows the figure can be listed in the shape containers.

You will have to be careful where you place the file, as each subfolder corresponds to a different shapes gallery.

2. Let's make the new figure visible in the gallery

Now we will navigate to the gallery-data of our target container and update the collection with the new .svg

src/pods/basic-shapes-gallery/basic-gallery-data/index.ts

export const mockBasicShapesCollection: ItemInfo[] = [
	{ thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
	{ thumbnailSrc: '/shapes/diamond.svg', type: 'diamond' },
	{ thumbnailSrc: '/shapes/line.svg', type: 'line' },
	{ thumbnailSrc: '/shapes/star.svg', type: 'star' }, // New
];

Wow!

3. Locate your shape destination and Create the main component

You can take the following examples as a guide: src/common/components

Right now, the shapes are divided thematically. In our example case, we want to add a "star" shape so we should place the main component under the front-basic-shapes folder but this could change depending on the nature of the shape.

In the issue description you will find an "approximation" of the code, which at least, will make the shape be displayed on the screen. Be careful! You will have to adapt this code so that the shape responds correctly to the transformations or logic requested in the issue.

4. Add the new ShapeType in core model

We need to define the type of the new figure and we will do so from: src/core/model/index.ts

export type ShapeType =
	| 'combobox'
	| 'input'
	| 'button'
	| 'checkbox'
	| 'textarea'
	| 'star'; // New

5. Update the getDefaultSizeFromShape function in the Canvas Model for your new shape

src/pods/canvas/canvas.model.ts

To do this you will have to update and export the function in your main component before, and to keep your code clean you should ideally add it to the respective barrel.

6. Create the Renderer for your new shape`

src/pods/canvas/shape-renderer

You can take the following renderers as a starting point, but remember that there may be shapes that require more values, for example if they need the text prop.

Then remember to add it to the corresponding barrel.

7. Update the renderShapeComponent function

src/pods/canvas/shape-renderer/index.tsx

Finally import the new render you just created and place it in the main renderShapeComponent function like this:

With this you should be able to drag the new figure from the component gallery to the main canvas. But this is just the beginning, you'll need to adjust the code to make the figure respond correctly.