v8.77.0

Markup Editor Events

A list of events which we can use to respond to the markup editor state appropriatly.

Name Description
'selectstyle' Fired when a style value is selected, receives style props and values.
'addshape' Fired when a shape is added, receives added shape.
'selectshape' Fired when a shape is selected, receives selected shape.
'tapshape' Fired when a selected shape is clicked or tapped, receives shape.
'updateshape' Fired when a shape is updated, receives updated shape.
'removeshape' Fired when a shape is removed, receives removed shape.
'markupzoom' Fired when markup editor zooms in or out on image.
'markuppan' Fired when markup editor pans image.
'markuptap' Fired when markup editor canvas is tapped.
'blurshape' Fired when a shape is blurred.
'selectiondown' Fired when a selection interaction starts.
'selectionup' Fired when selection interaction ends.
'selectionchange' Fired when selection updates.

selectstyle

Fired when a style is selected in a style control.

<!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' });

    editor.on('selectstyle', (shape) => {
        console.log('selectstyle', shape);
    });
</script>

addshape

Fired when a shape is added in the editor.

<!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' });

    editor.on('addshape', (shape) => {
        console.log('addshape', shape);
    });
</script>

selectshape

Fired when a shape is selected in the editor.

<!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' });

    editor.on('selectshape', (shape) => {
        console.log('selectshape', shape);
    });
</script>

tapshape

Fired when a selected shape is tapped or clicked in the editor.

<!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' });

    editor.on('tapshape', (shape) => {
        console.log('tapshape', shape);
    });
</script>

updateshape

Fired when a shape is updated in the editor.

<!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' });

    editor.on('updateshape', (shape) => {
        console.log('updateshape', shape);
    });
</script>

removeshape

Fired when a shape is removed in the editor.

<!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' });

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

markupzoom

Deprecated, please use generic editor 'zoom' event instead.

Fired when markup editor zooms in or out on image.

<!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' });

    editor.on('markupzoom', (value) => {
        console.log('zoom level', value);
    });
</script>

markuppan

Deprecated, please use generic editor 'pan' event instead.

Fired when markup editor pans image.

<!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' });

    editor.on('markuppan', (translation) => {
        console.log('translation', translation);
    });
</script>

markuptap

Fired when markup editor canvas is tapped. Receives the tap position in the image context and an optiontal target shape.

<!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' });

    editor.on('markuptap', (detail) => {
        console.log('detail', detail);
    });
</script>