The default designer layout may not meet your expectations. But it is possible to modify it at your convenience.

In order to properly build your layout, let’s see how it works first.

The designer is made up of 4 containers: top, bottom, left and right, which can each contain several blocks and these blocks contain the different modules.

To define the layout, you just have to add the array containing its configuration directly to the default options when the plugin is initialized :

var options = {
	layout : {...}
}

var instance = new AsukaDesigner('#myId', options);

Here is an example configuration which will produce two blocks, one in the left container and one in the right container :

const defaultOptions = {
	type: 'menu',
	multiple: false,
	collapsed: true,
	collapsible: true,
	draggable: true
}

const state = {
	left: [
		{
            ...defaultOptions,
            collapsed: false,
            draggable: false,
            items: [
				{
					name: 'Views',
					icon: 'menu-dots'
				},
				{
					name: 'Elements',
					icon: 'puzzle-piece',
				},
				{
					name: 'Designs',
					icon: 'paint-brush',
				},
				{
					name: 'Image',
					icon: 'images',
				},
				{
					name: 'Layers',
					icon: 'layers',
				},
				{
					name: 'Text',
					icon: 'font',
				}
            ]
        },
	],
	right: [
		{
            ...defaultOptions,
            items: [
				{
					name: 'Snap grid',
					icon: 'magnet',
				},
				{
					name: 'Ruler',
					icon: 'ruler'
				},
				{
					name: 'Print',
					icon: 'print',
				},
				{
					name: 'Magnifying glass',
					icon: 'magnifying-glass',
                    display: 'popover'
				},
				{
					name: 'Download',
					icon: 'download'
				},
				{
					name: 'Reset',
					icon: 'reset',
				},
            ]
        },
	]
} 

• type: block display type
• multiple : if several menu of the block can be opened at the same time
• collapsed : default expansion state of the block
• collapsible : whether the collapsed state can be changed
• items : an array containing the different modules of the block

Here is the list of the different modules that can be used :

Views, Elements, Templates, Layers, Drawing areas, Designs, Markers, Text, Image, Qr code, Snap grid, Ruler, Print, Magnifying glass, Zoom, Download, Reset.

As well as the list of default icons that can be used:

low-vision, times, file-upload, ellipsis-h, layer-group, bar, undo-alt, redo-alt, eye, puzzle-piece, vector-square, pencil-alt, font, upload, file, qrcode, save, caret-down, trash, magnet, ruler-combined, print, binoculars, search, download, sync-alt, tag, heading, arrows-alt-v, arrows-alt-h, edit, copy, crosshairs, bold, italic, underline, bezier-curve, folder-open, spinner, camera-retro, chevron-left, palette, plus, minus, filter, mask, cog, eraser, eye-dropper, thumbtack, facebook-square, instagram, position-top, position-left, position-bottom, position-right, pixabay, deposit-photos, template, customize.

If you want to use your own icons, you can directly write html instead of the name of the icon :

{
   name: 'Designs',
   icon: '<img class="https://myurl" />',
},