Erasing shapes with the eraser

By default only the sharpie tool and lines/arrows can be erased with the eraser.

To enable erasing other shapes we can override default shape properties. We can use the createMarkupEditorShapeStyles function and override or extend the default styles and settings for a shape.

In the example below we enable erasing the 'rectangle' 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,
        createMarkupEditorToolStyle,
        createMarkupEditorToolStyles,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        util: 'annotate',
        markupEditorToolStyles: createMarkupEditorToolStyles({
            text: createMarkupEditorToolStyle('rectangle', {
                disableErase: false,
            }),
        }),
    });
</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'}
                util={'annotate'}
                markupEditorToolStyles={createMarkupEditorToolStyles({
                    text: createMarkupEditorToolStyle('rectangle', {
                        disableErase: false,
                    }),
                })}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            util="annotate"
            :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({
                text: createMarkupEditorToolStyle('rectangle', {
                    disableErase: 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,
        createMarkupEditorToolStyle,
        createMarkupEditorToolStyles,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        util={'annotate'}
        markupEditorToolStyles={createMarkupEditorToolStyles({
            text: createMarkupEditorToolStyle('rectangle', {
                disableErase: false,
            }),
        })}
    />
</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({
        text: createMarkupEditorToolStyle('rectangle', {
            disableErase: false,
        }),
    });
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    util="annotate"
    [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',
            util: 'annotate',
            markupEditorToolStyles: createMarkupEditorToolStyles({
                text: createMarkupEditorToolStyle('rectangle', {
                    disableErase: false,
                }),
            }),
        });
    });
</script>