# 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](#finetunecontrolconfiguration) | undefined     | An object with control configurations to render in the finetune menu.   |
| [finetuneOptions](#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](#finetuneoptions) array, that's how Pintura Image Editor determines which control to render for each button.

```js

{
    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.

```js
[
    ['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.                                                                           |