Markup Editor Properties

A list of properties available to configure the markup editor.

Property	Default value	Description
`markupEditorToolbar`	`undefined`	An array of tools to render in the Markup Editor toolbar.
`markupEditorToolStyles`	`undefined`	The default shape style definitions to use for each tool in the toolbar.
`markupEditorToolRetainStyles`	`undefined`	Set to true to remember tool styles between edit sessions.
`markupEditorToolShareStyles`	`undefined`	Set to false to have each tool retain its own style settings.
`markupEditorShapeStyleControls`	`undefined`	The style control options available to change the appearance of shapes.
`markupEditorTextInputMode`	`'inline'`	Set to `'modal'` to offer text editing in a plain text modal instead of inline.
`markupEditorToolSelectRadius`	`0`	The radius around a select action to select shapes in.
`markupEditorWillStartInteraction`	`undefined`	A function that receives the current interaction position and image rectangle, should return `true` if interaction is allowed and `false` if not.
`markupEditorInteractionMode`	`'auto'`	Set to `'pan'` to force pan mode (spacebar + drag), set back to `'auto'` to switch to draw mode.
`markupEditorZoomLevels`	`undefined`	An array of zoom levels defined as fractions. Default value is `[0.25, 0.5, 1, 1.25, 1.5, 2, 3, 4, 6, 8, 16]`.
`markupEditorZoomAdjustStep`	`.25`	The speed at which pressing the zoom buttons increases or decreases zoom.
`markupEditorZoomAdjustFactor`	`.1`	The factor used to increase or decrease zoom speed when holding the zoom buttons. Increase speed is `1 + .1`, decrease speed is `1 - .1`.
`enableSelectToolToAddShape`	`false`	When set to `true` the editor will add a shape to the middle of the image when a shape tool is tapped.
`enableTapToAddText`	`false`	When set to `true` the editor will add an auto-width text shape when the text tool is active and an empty part of the canvas is tapped.
`enableViewTool`	`false`	When set to `true` a view tool will be added to the tools list, this tool enables dragging the canvas without holding spacebar.
`enableMoveTool`	`false`	When set to `true` a move tool will be added to the tools list, making it easier to move shapes.
`enableAutoSelectMoveTool`	`['path', 'line', 'arrow', 'rectangle', 'ellipse', 'text']`	Set to `false` to disable automatically switching back to the move tool, set to `true` to enable auto switch back for all shape tools, set to a list of tool keys to pick which tools have this behaviour.
`markupEditorSnapThreshold`	`0`	The distance in pixels at which shapes snap to grid or other shapes. When set to `0` snapping is disabled.
`markupEditorSnapToContext`	`true`	If enabled shapes snap to context edges and context center.
`markupEditorGridSize`	`0`	The size of the grid cells in pixels, when set to `0` the grid is disabled.
`beforeSelectShape`	`undefined`	Set to a function that runs before selecting a shape. Receives previously selected shape an targetted shape.
`beforeDeselectShape`	`undefined`	Set to a function that runs before deselecting a shape. Receives currently selected shape and targetted shape.
`beforeAddShape`	`undefined`	Set to a function that runs before adding a preset shape. Receives shape that is going to be added.
`beforeRemoveShape`	`undefined`	Set to a function that runs before removing a shape. Receives shape that is going to be removed. Return `true`
`beforeUpdateShape`	`undefined`	Set to a function that runs before updating a shape. Receives shape that is going to be updated. Additionally receives the `props` object that will be applied to the shape and the `context` rectangle in which the shape is rendered.
`willRenderShapePresetToolbar`	`undefined`	Can be set to a function to modify the markup editor preset toolbar.
`willRenderShapeControls`	`undefined`	Allows to inject custom shape controls or to edit the shape control menu.
`willRenderShapeTextControls`	`undefined`	Allows to inject custom shape text controls or to edit the shape text control menu.

markupEditorToolbar

Use the markupEditorToolbar property to update the tools in the Markup Editor toolbar. The property should be set to an array of tool item definitions.

By default the Markup Editor defines the following tools (in this order).

Name	Description
`'sharpie'`	Draw fine lines, this is a path based tool.
`'eraser'`	Erasing paths, lines, and arrows based lines. Does not have a default shape assigned.
`'path'`	Draw multi corner path or polygon, hold shift key to snap. Tap start point to close polygon. Tap end point to end path.
`'line'`	For drawing straight lines, hold shift key to snap.
`'arrow'`	For drawing arrows, hold shift key to snap.
`'rectangle'`	For drawing rectangles.
`'ellipse'`	For drawing ellipses.
`'text'`	For drawing text boxes.
`'preset'`	For selecting presets / stickers, only shown if presets have been defined.

The 'eraser' and 'preset' tool are special. Where other tools have a default shape declaration, the preset and eraser tools do not.

The preset tool will show a list of preset stickers, if defined, if not, the preset tool won't be visible. The eraser tool can be used to erase line and path based shapes.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        markupEditorToolbar: [
            ['sharpie', 'Sharpie', { disabled: true }],
            ['eraser', 'Eraser', { disabled: false }],
            ['rectangle', 'Rectangle', { disabled: false }],
        ],
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                markupEditorToolbar={[
                    ['sharpie', 'Sharpie', { disabled: true }],
                    ['eraser', 'Eraser', { disabled: false }],
                    ['rectangle', 'Rectangle', { disabled: false }],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :markupEditorToolbar="markupEditorToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorToolbar: [
                ['sharpie', 'Sharpie', { disabled: true }],
                ['eraser', 'Eraser', { disabled: false }],
                ['rectangle', 'Rectangle', { disabled: false }],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        markupEditorToolbar={[
            ['sharpie', 'Sharpie', { disabled: true }],
            ['eraser', 'Eraser', { disabled: false }],
            ['rectangle', 'Rectangle', { disabled: false }],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorToolbar: any = [
        ['sharpie', 'Sharpie', { disabled: true }],
        ['eraser', 'Eraser', { disabled: false }],
        ['rectangle', 'Rectangle', { disabled: false }],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorToolbar: [
                ['sharpie', 'Sharpie', { disabled: true }],
                ['eraser', 'Eraser', { disabled: false }],
                ['rectangle', 'Rectangle', { disabled: false }],
            ],
        });
    });
</script>

We can use the createMarkupEditorToolbar helper function to generate the default toolbar items and make it easier to add our own toolbar items.

If we want to reorder the items but want to retain all default settings we can only use the tool key. In the example below we'll move the Text tool to the first position and have removed the Sharpie and Eraser tools. For more information see the createMarkupEditorToolbar docs.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        createMarkupEditorToolbar,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        markupEditorToolbar: createMarkupEditorToolbar([
            'text',
            'line',
            'arrow',
            'rectangle',
            'ellipse',
            'preset',
        ]),
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                markupEditorToolbar={createMarkupEditorToolbar([
                    'text',
                    'line',
                    'arrow',
                    'rectangle',
                    'ellipse',
                    'preset',
                ])}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :markupEditorToolbar="markupEditorToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorToolbar: createMarkupEditorToolbar([
                'text',
                'line',
                'arrow',
                'rectangle',
                'ellipse',
                'preset',
            ]),
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        getEditorDefaults,
        createMarkupEditorToolbar,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        markupEditorToolbar={createMarkupEditorToolbar([
            'text',
            'line',
            'arrow',
            'rectangle',
            'ellipse',
            'preset',
        ])}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, createMarkupEditorToolbar } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorToolbar: any = createMarkupEditorToolbar([
        'text',
        'line',
        'arrow',
        'rectangle',
        'ellipse',
        'preset',
    ]);
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createMarkupEditorToolbar } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorToolbar: createMarkupEditorToolbar([
                'text',
                'line',
                'arrow',
                'rectangle',
                'ellipse',
                'preset',
            ]),
        });
    });
</script>

The markup editor toolbar also supports tool groups.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        markupEditorToolbar: [
            [
                'Draw',
                [
                    ['sharpie', 'Sharpie', { disabled: true }],
                    ['eraser', 'Eraser', { disabled: false }],
                ],
            ],
            [
                'Shape',
                [
                    ['rectangle', 'Rectangle', { disabled: false }][
                        ('ellipse', 'Ellipse', { disabled: false })
                    ],
                ],
            ],
        ],
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                markupEditorToolbar={[
                    [
                        'Draw',
                        [
                            ['sharpie', 'Sharpie', { disabled: true }],
                            ['eraser', 'Eraser', { disabled: false }],
                        ],
                    ],
                    [
                        'Shape',
                        [
                            ['rectangle', 'Rectangle', { disabled: false }][
                                ('ellipse', 'Ellipse', { disabled: false })
                            ],
                        ],
                    ],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :markupEditorToolbar="markupEditorToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorToolbar: [
                [
                    'Draw',
                    [
                        ['sharpie', 'Sharpie', { disabled: true }],
                        ['eraser', 'Eraser', { disabled: false }],
                    ],
                ],
                [
                    'Shape',
                    [
                        ['rectangle', 'Rectangle', { disabled: false }][
                            ('ellipse', 'Ellipse', { disabled: false })
                        ],
                    ],
                ],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        markupEditorToolbar={[
            [
                'Draw',
                [
                    ['sharpie', 'Sharpie', { disabled: true }],
                    ['eraser', 'Eraser', { disabled: false }],
                ],
            ],
            [
                'Shape',
                [
                    ['rectangle', 'Rectangle', { disabled: false }][
                        ('ellipse', 'Ellipse', { disabled: false })
                    ],
                ],
            ],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorToolbar: any = [
        [
            'Draw',
            [
                ['sharpie', 'Sharpie', { disabled: true }],
                ['eraser', 'Eraser', { disabled: false }],
            ],
        ],
        [
            'Shape',
            [
                ['rectangle', 'Rectangle', { disabled: false }][
                    ('ellipse', 'Ellipse', { disabled: false })
                ],
            ],
        ],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [markupEditorToolbar]="markupEditorToolbar"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorToolbar: [
                [
                    'Draw',
                    [
                        ['sharpie', 'Sharpie', { disabled: true }],
                        ['eraser', 'Eraser', { disabled: false }],
                    ],
                ],
                [
                    'Shape',
                    [
                        ['rectangle', 'Rectangle', { disabled: false }][
                            ('ellipse', 'Ellipse', { disabled: false })
                        ],
                    ],
                ],
            ],
        });
    });
</script>

markupEditorToolStyles

The markupEditorToolStyles property should be set to an object that describes the default styles for each tool. Each key in this object correlates with a tool key in the toolbar array.

We can use the createMarkupEditorToolStyle and createMarkupEditorToolStyles helper function to set the default tool styles and to make it easier to generate custom style objects.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        createMarkupEditorToolStyle,
        createMarkupEditorToolStyles,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        markupEditorToolStyles: createMarkupEditorToolStyles({
            // create the text tool style and override fontSize property
            text: createMarkupEditorToolStyle('text', {
                fontSize: '10%',
            }),
        }),
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createMarkupEditorToolStyle,
    createMarkupEditorToolStyles,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                markupEditorToolStyles={createMarkupEditorToolStyles({
                    // create the text tool style and override fontSize property
                    text: createMarkupEditorToolStyle('text', {
                        fontSize: '10%',
                    }),
                })}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :markupEditorToolStyles="markupEditorToolStyles"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    getEditorDefaults,
    createMarkupEditorToolStyle,
    createMarkupEditorToolStyles,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorToolStyles: createMarkupEditorToolStyles({
                // create the text tool style and override fontSize property
                text: createMarkupEditorToolStyle('text', {
                    fontSize: '10%',
                }),
            }),
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        getEditorDefaults,
        createMarkupEditorToolStyle,
        createMarkupEditorToolStyles,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        markupEditorToolStyles={createMarkupEditorToolStyles({
            // create the text tool style and override fontSize property
            text: createMarkupEditorToolStyle('text', {
                fontSize: '10%',
            }),
        })}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createMarkupEditorToolStyle,
    createMarkupEditorToolStyles,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorToolStyles: any = createMarkupEditorToolStyles({
        // create the text tool style and override fontSize property
        text: createMarkupEditorToolStyle('text', {
            fontSize: '10%',
        }),
    });
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [markupEditorToolStyles]="markupEditorToolStyles"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createMarkupEditorToolStyle, createMarkupEditorToolStyles } =
            $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorToolStyles: createMarkupEditorToolStyles({
                // create the text tool style and override fontSize property
                text: createMarkupEditorToolStyle('text', {
                    fontSize: '10%',
                }),
            }),
        });
    });
</script>

markupEditorToolRetainStyles

Set markupEditorToolRetainStyles to true to retain style settings between image editing sessions.

Note that when the editor is destroyed the tool styles are lost, this only works when editing and loading images in the same editor instance.

To retain tool styles accross editing sessions we can read out the current tool styles using the 'selectcontrol' and 'selectstyle' events and then set these as default styles using the markupEditorToolStyles property.

markupEditorShapeStyleControls

The markupEditorShapeStyleControls contains the definitions for the style controls to which are used to adjust the appearance of an active shape.

Each key in the object correlates with a shape style property. The value of the key is set to the component to render and the parameters to send to the component.

{
    backgroundColor: [
        ColorPicker,
        {
            // settings
        },
    ],
    fontFamily: [
        Dropdown,
        {
            // settings
        },
    ],
    // etc
};

Below we use the createMarkupEditorShapeStyleControls helper function to create the default controls.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        createMarkupEditorShapeStyleControls,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        markupEditorShapeStyleControls: createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
                ['arial', 'Arial'],
                ['open-sans', 'Open Sans'],
                ['courier', 'Courier'],
            ],
        }),
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls(
                    {
                        fontFamilyOptions: [
                            ['arial', 'Arial'],
                            ['open-sans', 'Open Sans'],
                            ['courier', 'Courier'],
                        ],
                    }
                )}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :markupEditorShapeStyleControls="markupEditorShapeStyleControls"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    getEditorDefaults,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            markupEditorShapeStyleControls:
                createMarkupEditorShapeStyleControls({
                    fontFamilyOptions: [
                        ['arial', 'Arial'],
                        ['open-sans', 'Open Sans'],
                        ['courier', 'Courier'],
                    ],
                }),
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        getEditorDefaults,
        createMarkupEditorShapeStyleControls,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        markupEditorShapeStyleControls={createMarkupEditorShapeStyleControls({
            fontFamilyOptions: [
                ['arial', 'Arial'],
                ['open-sans', 'Open Sans'],
                ['courier', 'Courier'],
            ],
        })}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createMarkupEditorShapeStyleControls,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    markupEditorShapeStyleControls: any = createMarkupEditorShapeStyleControls({
        fontFamilyOptions: [
            ['arial', 'Arial'],
            ['open-sans', 'Open Sans'],
            ['courier', 'Courier'],
        ],
    });
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [markupEditorShapeStyleControls]="markupEditorShapeStyleControls"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createMarkupEditorShapeStyleControls } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorShapeStyleControls:
                createMarkupEditorShapeStyleControls({
                    fontFamilyOptions: [
                        ['arial', 'Arial'],
                        ['open-sans', 'Open Sans'],
                        ['courier', 'Courier'],
                    ],
                }),
        });
    });
</script>

willRenderShapePresetToolbar

Use to add custom buttons to the markup editor preset toolbar.

The hook receives 4 parameters:

The list of nodes the editor is about to draw.
The addPreset callback to add a shape to the current context.
The env parameter containing the current environment state.
The redraw callback to manually trigger redrawing of the editor UI.

In the example below we create a custom smile button, but this functionality can also be used to import images from third party sources like Dropbox, show modals with custom sticker sources, or open additional editors.

The willRenderShapePresetToolbar hook should always return an array of nodes or an empty array.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, createNode, appendNode } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        willRenderShapePresetToolbar: (nodes, addPreset) => {
            // create smile button
            const smileButton = createNode('Button', 'smile-button', {
                label: 'Add smile',
                onclick: () => addPreset('😄'),
            });

            // add it to the node tree
            appendNode(smileButton, nodes);

            // return the new node tree
            return nodes;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createNode, appendNode } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const willRenderShapePresetToolbar = (nodes, addPreset) => {
        // create smile button
        const smileButton = createNode('Button', 'smile-button', {
            label: 'Add smile',
            onclick: () => addPreset('😄'),
        });

        // add it to the node tree
        appendNode(smileButton, nodes);

        // return the new node tree
        return nodes;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                willRenderShapePresetToolbar={willRenderShapePresetToolbar}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :willRenderShapePresetToolbar="willRenderShapePresetToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, createNode, appendNode } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            willRenderShapePresetToolbar: (nodes, addPreset) => {
                // create smile button
                const smileButton = createNode('Button', 'smile-button', {
                    label: 'Add smile',
                    onclick: () => addPreset('😄'),
                });

                // add it to the node tree
                appendNode(smileButton, nodes);

                // return the new node tree
                return nodes;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults, createNode, appendNode } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const willRenderShapePresetToolbar = (nodes, addPreset) => {
        // create smile button
        const smileButton = createNode('Button', 'smile-button', {
            label: 'Add smile',
            onclick: () => addPreset('😄'),
        });

        // add it to the node tree
        appendNode(smileButton, nodes);

        // return the new node tree
        return nodes;
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        {willRenderShapePresetToolbar}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createNode,
    appendNode,
    PinturaNode,
    Sticker,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    willRenderShapePresetToolbar = (
        nodes: PinturaNode[],
        addPreset: (sticker: Sticker) => void
    ): PinturaNode[] => {
        // create smile button
        const smileButton = createNode('Button', 'smile-button', {
            label: 'Add smile',
            onclick: () => addPreset('😄'),
        });

        // add it to the node tree
        appendNode(smileButton, nodes);

        // return the new node tree
        return nodes;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [willRenderShapePresetToolbar]="willRenderShapePresetToolbar"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createNode, appendNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderShapePresetToolbar: (nodes, addPreset) => {
                // create smile button
                const smileButton = createNode('Button', 'smile-button', {
                    label: 'Add smile',
                    onclick: () => addPreset('😄'),
                });

                // add it to the node tree
                appendNode(smileButton, nodes);

                // return the new node tree
                return nodes;
            },
        });
    });
</script>

markupEditorTextInputMode

Set to 'modal' to offer text editing in a plain text modal instead of 'inline'.

markupEditorInteractionMode

Deprecated, use enablePanInput instead.

Set to 'pan' to force pan mode (spacebar + drag), set to 'auto' to switch to draw mode.

markupEditorToolSelectRadius

The radius around a select action to select shapes in, defaults to 0.

markupEditorZoomLevels

Deprecated, use zoomPresetOptions instead.

An array of zoom levels defined as fractions. Default value is [0.25, 0.5, 1, 1.25, 1.5, 2, 3, 4, 6, 8, 16].

markupEditorZoomAdjustStep

Deprecated, use zoomAdjustStep instead.

The speed at which pressing the zoom buttons increases or decreases zoom. Defaults to .25

markupEditorZoomAdjustFactor

Deprecated, use zoomAdjustFactor instead.

The factor used to increase or decrease zoom speed when holding the zoom buttons. Default value is .1, increase speed is 1 + .1, decrease speed is 1 - .1.

enableSelectToolToAddShape

When set to true the editor will add a shape to the middle of the image when a shape tool is tapped.

enableTapToAddText

When set to true the editor will add an auto-width text shape when the text tool is active and an empty part of the canvas is tapped.

enableViewTool

When set to true a view tool will be added to the tools list, this tool enables dragging the canvas without holding spacebar.

enableMoveTool

When set to true a move tool will be added to the tools list, making it easier to move shapes.

enableAutoSelectMoveTool

Set to false to disable automatically switching back to the move tool, set to true to enable auto switch back for all shape tools, set to a list of tool keys to pick which tools have this behaviour. Defaults to ['line', 'arrow', 'rectangle', 'ellipse', 'text'].

markupEditorSnapThreshold

The distance in pixels at which shapes snap to grid or other shapes. When set to 0 snapping is disabled.

markupEditorSnapToContext

If enabled shapes snap to context edges and context center.

Use annotateSnapToContext and decorateSnapToContext to alter context snapping per util.

markupEditorGridSize

The size of the grid cells in pixels, when set to 0 the grid is disabled.

Use annotateGridSize and decorateGridSize to alter the grid size per util.

beforeSelectShape

Runs before a shape is selected. Return false to prevent selecting the shape. Receives current selected shape and about to be selected target shape.

If current is undefined it means no shape is currently selected.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeSelectShape: (current, target) => {
            console.log('beforeSelectShape', current, target);
            return true;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const beforeSelectShape = (current, target) => {
        console.log('beforeSelectShape', current, target);
        return true;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeSelectShape={beforeSelectShape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeSelectShape="beforeSelectShape"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            beforeSelectShape: (current, target) => {
                console.log('beforeSelectShape', current, target);
                return true;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const beforeSelectShape = (current, target) => {
        console.log('beforeSelectShape', current, target);
        return true;
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} {beforeSelectShape} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    beforeSelectShape = (current: Shape, target: Shape): boolean => {
        console.log('beforeSelectShape', current, target);
        return true;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeSelectShape]="beforeSelectShape"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeSelectShape: (current, target) => {
                console.log('beforeSelectShape', current, target);
                return true;
            },
        });
    });
</script>

We can use the beforeSelectShape hook combined with the removeshape event to prevent auto selection of the next shape when a shape was removed.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    let removedShape = undefined;

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeSelectShape: (current) => {
            // if currently selected shape is the shape that was
            // just removed prevent selection of next shape
            return current === removedShape;
        },
    });

    editor.on('removeshape', (shape) => {
        removedShape = shape;
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const [removedShape, setRemovedShape] = useState(undefined);

    const beforeSelectShape = (current) => {
        // if currently selected shape is the shape that was
        // just removed prevent selection of next shape
        return current === removedShape;
    };

    const handleEditorRemoveshape = (shape) => {
        setRemovedShape(shape);
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeSelectShape={beforeSelectShape}
                onRemoveshape={handleEditorRemoveshape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeSelectShape="beforeSelectShape"
            v-on:pintura:removeshape="handleEditorRemoveshape($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            removedShape: undefined,

            beforeSelectShape: (current) => {
                // if currently selected shape is the shape that was
                // just removed prevent selection of next shape
                return current === this.removedShape;
            },
        };
    },

    methods: {
        handleEditorRemoveshape: function (shape) {
            this.removedShape = shape;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    let removedShape = undefined;

    const beforeSelectShape = (current) => {
        // if currently selected shape is the shape that was
        // just removed prevent selection of next shape
        return current === removedShape;
    };

    const handleEditorRemoveshape = (event) => {
        const shape = event.detail;

        removedShape = shape;
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        {beforeSelectShape}
        on:removeshape={handleEditorRemoveshape}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    removedShape?: Shape = undefined;

    beforeSelectShape = (current: Shape): boolean => {
        // if currently selected shape is the shape that was
        // just removed prevent selection of next shape
        return current === this.removedShape;
    };

    handleEditorRemoveshape(shape: Shape): void {
        this.removedShape = shape;
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeSelectShape]="beforeSelectShape"
    (removeshape)="handleEditorRemoveshape($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var removedShape = undefined;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeSelectShape: (current) => {
                // if currently selected shape is the shape that was
                // just removed prevent selection of next shape
                return current === removedShape;
            },
        });

        editor.on('pintura:removeshape', function (event) {
            const shape = event.detail;
            removedShape = shape;
        });
    });
</script>

beforeDeselectShape

Runs before a shape is deselected. Return false to prevent deselecting the shape. Receives current selected shape and about to be selected target shape.

If target is undefined it means no shape is targetted.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeDeselectShape: (current, target) => {
            console.log('beforeDeselectShape', current, target);
            return true;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const beforeDeselectShape = (current, target) => {
        console.log('beforeDeselectShape', current, target);
        return true;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeDeselectShape={beforeDeselectShape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeDeselectShape="beforeDeselectShape"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            beforeDeselectShape: (current, target) => {
                console.log('beforeDeselectShape', current, target);
                return true;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const beforeDeselectShape = (current, target) => {
        console.log('beforeDeselectShape', current, target);
        return true;
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        {beforeDeselectShape}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    beforeDeselectShape = (current: Shape, target: Shape): boolean => {
        console.log('beforeDeselectShape', current, target);
        return true;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeDeselectShape]="beforeDeselectShape"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeDeselectShape: (current, target) => {
                console.log('beforeDeselectShape', current, target);
                return true;
            },
        });
    });
</script>

beforeAddShape

Runs before a shape preset is added. Return false to prevent adding the shape.

Instead of using this hook, consider instead disabling the shape tools and sticker items using the disabled property.

This hook only runs when adding shape presets / stickers.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeAddShape: (shape) => {
            console.log('beforeAddShape', shape);
            return true;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const beforeAddShape = (shape) => {
        console.log('beforeAddShape', shape);
        return true;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeAddShape={beforeAddShape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeAddShape="beforeAddShape"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            beforeAddShape: (shape) => {
                console.log('beforeAddShape', shape);
                return true;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const beforeAddShape = (shape) => {
        console.log('beforeAddShape', shape);
        return true;
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} {beforeAddShape} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    beforeAddShape = (shape: Shape): boolean => {
        console.log('beforeAddShape', shape);
        return true;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeAddShape]="beforeAddShape"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeAddShape: (shape) => {
                console.log('beforeAddShape', shape);
                return true;
            },
        });
    });
</script>

beforeRemoveShape

Runs before a shape is removed.

Return false to prevent removal of a shape.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeRemoveShape: (shape) => {
            console.log('beforeRemoveShape', shape);
            return true;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const beforeRemoveShape = (shape) => {
        console.log('beforeRemoveShape', shape);
        return true;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeRemoveShape={beforeRemoveShape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeRemoveShape="beforeRemoveShape"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            beforeRemoveShape: (shape) => {
                console.log('beforeRemoveShape', shape);
                return true;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const beforeRemoveShape = (shape) => {
        console.log('beforeRemoveShape', shape);
        return true;
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} {beforeRemoveShape} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    beforeRemoveShape = (shape: Shape): boolean => {
        console.log('beforeRemoveShape', shape);
        return true;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeRemoveShape]="beforeRemoveShape"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeRemoveShape: (shape) => {
                console.log('beforeRemoveShape', shape);
                return true;
            },
        });
    });
</script>

beforeUpdateShape

Runs before a shape is updated.

Return adjusted props to make changes to shape update.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        beforeUpdateShape: (shape, props, context) => {
            console.log('beforeUpdateShape', shape, props, context);
            return props;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const beforeUpdateShape = (shape, props, context) => {
        console.log('beforeUpdateShape', shape, props, context);
        return props;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                beforeUpdateShape={beforeUpdateShape}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :beforeUpdateShape="beforeUpdateShape"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            beforeUpdateShape: (shape, props, context) => {
                console.log('beforeUpdateShape', shape, props, context);
                return props;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const beforeUpdateShape = (shape, props, context) => {
        console.log('beforeUpdateShape', shape, props, context);
        return props;
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} {beforeUpdateShape} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, Shape } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    beforeUpdateShape = (shape: Shape, props: any, context: Rect): any => {
        console.log('beforeUpdateShape', shape, props, context);
        return props;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [beforeUpdateShape]="beforeUpdateShape"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            beforeUpdateShape: (shape, props, context) => {
                console.log('beforeUpdateShape', shape, props, context);
                return props;
            },
        });
    });
</script>

willRenderShapeControls

Runs before the shape controls popup is rendered above a selected shape. Allows manipulating the shape controls popup element tree.

The willRenderShapeControls hook receives the current structure of the shape controls popup. The hook allows injecting custom controls into the toolbar using the createNode helper function.

The willRenderShapeControls hook should always return an array. If the returned array is empty the controls are hidden.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        willRenderShapeControls: (controls, selectedShapeId) => {
            console.log('willRenderShapeControls', selectedShapeId);

            // Manipulate or add controls here

            return controls;
        },
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const willRenderShapeControls = (controls, selectedShapeId) => {
        console.log('willRenderShapeControls', selectedShapeId);

        // Manipulate or add controls here

        return controls;
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                willRenderShapeControls={willRenderShapeControls}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :willRenderShapeControls="willRenderShapeControls"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            willRenderShapeControls: (controls, selectedShapeId) => {
                console.log('willRenderShapeControls', selectedShapeId);

                // Manipulate or add controls here

                return controls;
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const willRenderShapeControls = (controls, selectedShapeId) => {
        console.log('willRenderShapeControls', selectedShapeId);

        // Manipulate or add controls here

        return controls;
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        {willRenderShapeControls}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults, PinturaNode } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    willRenderShapeControls = (
        controls: PinturaNode[],
        selectedShapeId: string
    ): PinturaNode[] => {
        console.log('willRenderShapeControls', selectedShapeId);

        // Manipulate or add controls here

        return controls;
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [willRenderShapeControls]="willRenderShapeControls"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderShapeControls: (controls, selectedShapeId) => {
                console.log('willRenderShapeControls', selectedShapeId);

                // Manipulate or add controls here

                return controls;
            },
        });
    });
</script>