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');

The second way to define the layout is to make a call using the API :

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

instance.layout().updateLayout([...]);

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

[
    {
		id: 'main',
		target: 'left',
		category: 'menu',
		multiple: false,
		collapsed: true,
		collapsible: true,
		items:[
			{
				name: 'Views',
				icon: 'bars'
			},
			{
				name: 'Elements',
				icon: 'puzzle-piece',
			},
			{
				name: 'Templates',
				icon: 'template',
			},
		]
    },
    {
        id: 'second',
		target: 'right',
		category: 'menu',
		multiple: false,
		collapsed: true,
		collapsible: true,
		items:[
			{
				name: 'Layers',
				icon: 'layer-group',
			},
			{
				name: 'Drawing areas',
				icon: 'vector-square',
			},
			{
				name: 'Designs',
				icon: 'pencil-alt',
			},
		]
    },
]
  • id : unique block identifier
  • target : the target container of the block
  • category : 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: '<i class="my-icon-class"></i>',
},
Was this article helpful to you? Yes No

How can we help?