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 had to update the function in your main component and to keep your code clean you should ideally add it to the respective barrel.

(Add links to everything when branch merged)

(in progress...)