v8.38.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.

selectstyle

Fired when a style is selected in a style control.

<!DOCTYPE html>

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

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

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

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

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

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

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

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

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

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

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

<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

Fired when markup editor zooms in or out on image.

<!DOCTYPE html>

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

<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

Fired when markup editor zooms in or out on image.

<!DOCTYPE html>

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

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