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

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

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.

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

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!

Locate your shape destination in the project

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.

Create the main component for your 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.

star-shape.tsx (Enlazar cuando esté lista)

Add the new ShapeType in core model

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

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

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

Create the Renderer for your new shape`

You can take the following renderer 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.

Update the renderShapeComponent function

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.

(Add links to everything when branch merged)