v8.41.3

Finetune plugin

The Finetune plugin enables us to add controls to update color effect values.

We can import the default finetune control set or define our own controls.

Property Default value Description
finetuneControlConfiguration
undefined
An object with control configurations to render in the finetune menu.
finetuneOptions
undefined
A list of key label pairs describing which finetune controls to render.

finetuneControlConfiguration

An object with control configurations to render in the Finetune footer.

The key brightness matches the brightness key used in the finetuneOptions array, that's how Pintura Image Editor determines which control to render for each button.


{
    brightness: {
        // the base value of the range input
        base: 0,

        // the minimum range input value
        min: -0.25,

        // the maximum range input value
        max: 0.25,

        // override the label value to render
        getLabel: (value) => Math.round(value * 100),

        // called to request access to an internal store
        getStore: ({ imageColorMatrix }) => imageColorMatrix,

        // called to read out a value of the store,
        // receives store returned by `getStore`
        getValue: (store) => {
            if (!store.brightness) return;
            return store.brightness[4];
        },

        // updates `store` value based on range input value `v`
        // receives store returned by `getStore`
        setValue: (store, v: number) =>
            store.update((matrices) => ({
                // the `imageColorMatrix` store contains multiple matrices,
                // we need to keep these intact and then overwrite the
                // brightness matrix
                ...matrices,

                // prettier-ignore
                brightness: [
                    1, 0, 0, 0, v,
                    0, 1, 0, 0, v,
                    0, 0, 1, 0, v,
                    0, 0, 0, 1, 0
                ],
            })),
    }
}

finetuneOptions

A list of key label pairs describing which finetune controls to render. Label can be a string but in most cases is a function, the function is then passed the current locale and can select the correct locale key.

[
    ['brightness', (locale) => locale.finetuneLabelBrightness],
    ['contrast', (locale) => locale.finetuneLabelContrast],
    ['exposure', (locale) => locale.finetuneLabelExposure],
];

Finetune plugin exports

The core editor module exports the following Finetune plugin objects.

Export Description
plugin_finetune The finetune util view.
plugin_finetune_defaults A default finetune util configuration object exposing a selection of the color adjustment controls below.
plugin_finetune_locale_en_gb The finetune util locales.
effectBrightness The Brightness effect control.
effectContrast The Contrast effect control.
effectSaturation The Saturation effect control.
effectExposure The Exposure effect control.
effectGamma The Gamma effect control.
effectVignette The Vignette effect control.
effectClarity The Clarity effect control.
effectTemperature The Temperature effect control.