Interface

Pixie's interface is very flexible and allows you to easily adapt it to your specific application requirements.

Modes

Pixie has two modes, inline and overlay. They can be freely switched between without a page reload via ui.mode config option.

• Inline mode will display pixie in the specified container, expanding to fill container's width and height.
• Overlay mode will display pixie as a modal above other page content. A close button will be visible by default in this mode which allows to close pixie modal.

var pixie = new Pixie({
    ui: {
        mode: 'overlay'
    },
    onLoad: function() {
        //can be called at any time to change editor mode
        pixie.setConfig({ui: {mode: 'overlay'}});
    }
});

Themes

Pixie includes light and dark themes by default. Active theme can be changed via  ui.activeTheme option. More on creating a custom theme here.

var pixie = new Pixie({
    ui: {
        activeTheme: 'light'
    },
    onLoad: function() {
        //can be called at any time to change editor theme
        pixie.setConfig({ui: {activeTheme: 'dark'}});
    }
});

Export Panel

A dialog that will appear after clicking done button. It lets user select file name, format and quality. Enable or disable it via ui.showExportPanel option.

var pixie = new Pixie({
    ui: {
        showExportPanel: true
    },
});

Navigation

Navigation bar position can be changed via ui.nav.position option, it has three possible options top, bottom and none. Top and bottom will display navigation bar either above or below the photo, while none will hide it completely.

Navigation items are also completely configurable via ui.nav.items config option.

Navigation item's action can either be a string matching a tool name, or a custom function.

var pixie = new Pixie({
    ui: {
        nav: {
            position: 'bottom',
            replaceDefault: true,
            items: [
                {name: 'filter', icon: 'filter-custom', action: 'filter'},
                {name: 'my button', icon: 'remove', action: function() {
                    alert('custom action');
                }}
            ],
        }
    }
});

Toolbar

Toolbar can be fully customized or hidden completely via toolbar configuration.

Object controls

Drag and rotate handles, border around objects and other controls can be styled via objectDefaults config option.

var pixie = new Pixie({
    objectDefaults: {
        transparentCorners: false,
        borderOpacityWhenMoving: 1,
        cornerStyle: 'circle', //rect or circle
        cornerColor: '#ccc',
        cornerStrokeColor: '#fff',
        cornerSize: 16,
        strokeWidth: 0.05,
        lockUniScaling: true, //preserver aspect ratio when resizing via handle
    }
});

Color presets

Presets for various color pickers in pixie interface can be specified via ui.colorPresets option.

var pixie = new Pixie({
    ui: {
        colorPresets: [
           '#000',
	       '#fff',
	       'rgb(242, 38, 19)',
	       'rgb(249, 105, 14)',
        ],
    }
});

Keybinds