How to define stickers

Stickers can be used in the Annotate, Decorate, and the Sticker plugins.

Creating stickers

We can set up stickers with 3 different methods.

• Emoji
• Image URL
• Configuration object

Emoji

This is the easiest way we can define a sticker.

The size of the emoji will automatically be set to '10%' width of the parent context (image size or crop rectangle) and the aspectRatio of the Emoji is automatically set so the sticker can't be skewed.

import { openEditor } from './doka.js';

openEditor({
    stickers: ['🎉', '😄', '👍', '👎', '🍕'],
});

Image URL

Using an image URL as a sticker the editor will automatically use the width and height of the image as the initial size.

The aspectRatio of the sticker will be locked to the image aspect ratio.

import { openEditor } from './doka.js';

openEditor({
    stickers: [
        './images/logo.png',
        './stickers/one.svg',
        './stickers/two.svg',
        './stickers/three.svg',
    ],
});

Configuration object

A third option to define a sticker is to use the sticker configuration object.

The sticker configuration object supports the following properties.

import { openEditor } from './doka.js';

openEditor({
    stickers: [
        {
            src: './stickers/one.svg',
            width: 100,
            height: 100,
            alt: 'Number one',
        },
    ],
});

Altering the sticker thumbnail

The mount property enables us to update the HTML of the sticker thumbnail. It receives the sticker thumbnail element and the sticker configuration object.

import { openEditor } from './doka.js';

const onMountSticker = (element, sticker) => {
    // runs when the sticker thumbnail `element` is added
    return {
        update: (sticker) => {
            // runs when the `sticker` parameter is updated
        },
        destroy: () => {
            // runs when the sticker thumbnail `element` is removed
        },
    };
};

openEditor({
    stickers: [
        {
            src: './stickers/one.svg',
            width: 100,
            height: 100,
            alt: 'Number one',
            mount: onMountSticker,
        },
    ],
});

Instead of having the editor handle generating the sticker shape we can define the sticker shape ourselves by setting the shape property.

import { openEditor } from './doka.js';

openEditor({
    stickers: [
        // Advanced Sticker configuration
        // - Thumb is used as the thumbnail for the sticker list
        // - BackgroundImage is used for the sticker
        // - The editor will use the shape width, height, and aspect ratio
        {
            thumb: './stickers/logo.png', // can also be an Emoji
            alt: 'Firefox logo',
            shape: {
                // a shape description, position will be set by the editor
                width: 100,
                height: 100,
                aspectRatio: 1,
                backgroundImage: './stickers/logo-high-resolution.png',
            },
        },
    ],
});

Grouping stickers

Stickers can be grouped. When grouping stickers the editor will automatically render tabs for each sticker group.

The following options can be supplied to a group

import { openEditor } from './doka.js';

openEditor({
    stickers: [
        [
            // required group label
            'Numbers',

            // group stickers, can be an empty array
            ['one.svg', 'two.svg', 'three.svg'],

            // optional group properties
            {},
        ],
        [
            // group label
            'Emoji',

            // group stickers
            ['🎉', '😄', '👍', '👎', '🍕'],

            // group properties
            {
                // a group icon
                icon: '<g><!-- SVG here --></g>',

                // hide the group label
                hideLabel: true,

                // disable the group
                disabled: true,
            },
        ],
    ],
});