# Markup Editor Events
A list of events which we can use to respond to the markup editor state appropriatly.
| Name | Description |
| ----------------------------- | ---------------------------------------------------------------------- |
| ['selectstyle'](#selectstyle) | Fired when a style value is selected, receives style props and values. |
| ['addshape'](#addshape) | Fired when a shape is added, receives added shape. |
| ['selectshape'](#selectshape) | Fired when a shape is selected, receives selected shape. |
| ['tapshape'](#tapshape) | Fired when a selected shape is clicked or tapped, receives shape. |
| ['updateshape'](#updateshape) | Fired when a shape is updated, receives updated shape. |
| ['removeshape'](#removeshape) | Fired when a shape is removed, receives removed shape. |
| ['markupzoom'](#markupzoom) | Fired when markup editor zooms in or out on image. |
| ['markuppan'](#markuppan) | Fired when markup editor pans image. |
| ['markuptap'](#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.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
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 handleEditorSelectstyle = (shape) => {
console.log('selectstyle', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-0)
```html
```
* [App.svelte](#App-svelte-panel-0)
```svelte
```
* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)
```javascript
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();
handleEditorSelectstyle(shape: any): void {
console.log('selectstyle', shape);
}
}
```
```html
```
## addshape
Fired when a shape is added in the editor.
* [ JavaScript](#javascript-panel-1)
* [ React](#react-panel-1)
* [ Vue](#vue-panel-1)
* [ Svelte](#svelte-panel-1)
* [ Angular](#angular-panel-1)
* [ jQuery](#jquery-panel-1)
* [index.html](#index-html-panel-1)
```html
```
* [App.jsx](#App-jsx-panel-1)
* [App.css](#App-css-panel-1)
```jsx
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 handleEditorAddshape = (shape) => {
console.log('addshape', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-1)
```html
```
* [App.svelte](#App-svelte-panel-1)
```svelte
```
* [app.component.ts](#app-component-ts-panel-1)
* [app.component.html](#app-component-html-panel-1)
* [app.component.css](#app-component-css-panel-1)
* [app.module.ts](#app-module-ts-panel-1)
```javascript
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();
handleEditorAddshape(shape: any): void {
console.log('addshape', shape);
}
}
```
```html
```
## selectshape
Fired when a shape is selected in the editor.
* [ JavaScript](#javascript-panel-2)
* [ React](#react-panel-2)
* [ Vue](#vue-panel-2)
* [ Svelte](#svelte-panel-2)
* [ Angular](#angular-panel-2)
* [ jQuery](#jquery-panel-2)
* [index.html](#index-html-panel-2)
```html
```
* [App.jsx](#App-jsx-panel-2)
* [App.css](#App-css-panel-2)
```jsx
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 handleEditorSelectshape = (shape) => {
console.log('selectshape', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-2)
```html
```
* [App.svelte](#App-svelte-panel-2)
```svelte
```
* [app.component.ts](#app-component-ts-panel-2)
* [app.component.html](#app-component-html-panel-2)
* [app.component.css](#app-component-css-panel-2)
* [app.module.ts](#app-module-ts-panel-2)
```javascript
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();
handleEditorSelectshape(shape: any): void {
console.log('selectshape', shape);
}
}
```
```html
```
## tapshape
Fired when a selected shape is tapped or clicked in the editor.
* [ JavaScript](#javascript-panel-3)
* [ React](#react-panel-3)
* [ Vue](#vue-panel-3)
* [ Svelte](#svelte-panel-3)
* [ Angular](#angular-panel-3)
* [ jQuery](#jquery-panel-3)
* [index.html](#index-html-panel-3)
```html
```
* [App.jsx](#App-jsx-panel-3)
* [App.css](#App-css-panel-3)
```jsx
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 handleEditorTapshape = (shape) => {
console.log('tapshape', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-3)
```html
```
* [App.svelte](#App-svelte-panel-3)
```svelte
```
* [app.component.ts](#app-component-ts-panel-3)
* [app.component.html](#app-component-html-panel-3)
* [app.component.css](#app-component-css-panel-3)
* [app.module.ts](#app-module-ts-panel-3)
```javascript
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();
handleEditorTapshape(shape: any): void {
console.log('tapshape', shape);
}
}
```
```html
```
## updateshape
Fired when a shape is updated in the editor.
* [ JavaScript](#javascript-panel-4)
* [ React](#react-panel-4)
* [ Vue](#vue-panel-4)
* [ Svelte](#svelte-panel-4)
* [ Angular](#angular-panel-4)
* [ jQuery](#jquery-panel-4)
* [index.html](#index-html-panel-4)
```html
```
* [App.jsx](#App-jsx-panel-4)
* [App.css](#App-css-panel-4)
```jsx
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 handleEditorUpdateshape = (shape) => {
console.log('updateshape', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-4)
```html
```
* [App.svelte](#App-svelte-panel-4)
```svelte
```
* [app.component.ts](#app-component-ts-panel-4)
* [app.component.html](#app-component-html-panel-4)
* [app.component.css](#app-component-css-panel-4)
* [app.module.ts](#app-module-ts-panel-4)
```javascript
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();
handleEditorUpdateshape(shape: any): void {
console.log('updateshape', shape);
}
}
```
```html
```
## removeshape
Fired when a shape is removed in the editor.
* [ JavaScript](#javascript-panel-5)
* [ React](#react-panel-5)
* [ Vue](#vue-panel-5)
* [ Svelte](#svelte-panel-5)
* [ Angular](#angular-panel-5)
* [ jQuery](#jquery-panel-5)
* [index.html](#index-html-panel-5)
```html
```
* [App.jsx](#App-jsx-panel-5)
* [App.css](#App-css-panel-5)
```jsx
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 handleEditorRemoveshape = (shape) => {
console.log('removeshape', shape);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-5)
```html
```
* [App.svelte](#App-svelte-panel-5)
```svelte
```
* [app.component.ts](#app-component-ts-panel-5)
* [app.component.html](#app-component-html-panel-5)
* [app.component.css](#app-component-css-panel-5)
* [app.module.ts](#app-module-ts-panel-5)
```javascript
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();
handleEditorRemoveshape(shape: any): void {
console.log('removeshape', shape);
}
}
```
```html
```
## markupzoom
Deprecated, please use generic editor `'zoom'` event instead.
Fired when markup editor zooms in or out on image.
* [ JavaScript](#javascript-panel-6)
* [ React](#react-panel-6)
* [ Vue](#vue-panel-6)
* [ Svelte](#svelte-panel-6)
* [ Angular](#angular-panel-6)
* [ jQuery](#jquery-panel-6)
* [index.html](#index-html-panel-6)
```html
```
* [App.jsx](#App-jsx-panel-6)
* [App.css](#App-css-panel-6)
```jsx
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 handleEditorMarkupzoom = (value) => {
console.log('zoom level', value);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-6)
```html
```
* [App.svelte](#App-svelte-panel-6)
```svelte
```
* [app.component.ts](#app-component-ts-panel-6)
* [app.component.html](#app-component-html-panel-6)
* [app.component.css](#app-component-css-panel-6)
* [app.module.ts](#app-module-ts-panel-6)
```javascript
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();
handleEditorMarkupzoom(value: any): void {
console.log('zoom level', value);
}
}
```
```html
```
## markuppan
Deprecated, please use generic editor `'pan'` event instead.
Fired when markup editor pans image.
* [ JavaScript](#javascript-panel-7)
* [ React](#react-panel-7)
* [ Vue](#vue-panel-7)
* [ Svelte](#svelte-panel-7)
* [ Angular](#angular-panel-7)
* [ jQuery](#jquery-panel-7)
* [index.html](#index-html-panel-7)
```html
```
* [App.jsx](#App-jsx-panel-7)
* [App.css](#App-css-panel-7)
```jsx
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 handleEditorMarkuppan = (translation) => {
console.log('translation', translation);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-7)
```html
```
* [App.svelte](#App-svelte-panel-7)
```svelte
```
* [app.component.ts](#app-component-ts-panel-7)
* [app.component.html](#app-component-html-panel-7)
* [app.component.css](#app-component-css-panel-7)
* [app.module.ts](#app-module-ts-panel-7)
```javascript
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();
handleEditorMarkuppan(translation: any): void {
console.log('translation', translation);
}
}
```
```html
```
## markuptap
Fired when markup editor canvas is tapped. Receives the tap position in the image context and an optiontal target shape.
* [ JavaScript](#javascript-panel-8)
* [ React](#react-panel-8)
* [ Vue](#vue-panel-8)
* [ Svelte](#svelte-panel-8)
* [ Angular](#angular-panel-8)
* [ jQuery](#jquery-panel-8)
* [index.html](#index-html-panel-8)
```html
```
* [App.jsx](#App-jsx-panel-8)
* [App.css](#App-css-panel-8)
```jsx
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 handleEditorMarkuptap = (detail) => {
console.log('detail', detail);
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-8)
```html
```
* [App.svelte](#App-svelte-panel-8)
```svelte
```
* [app.component.ts](#app-component-ts-panel-8)
* [app.component.html](#app-component-html-panel-8)
* [app.component.css](#app-component-css-panel-8)
* [app.module.ts](#app-module-ts-panel-8)
```javascript
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();
handleEditorMarkuptap(detail: any): void {
console.log('detail', detail);
}
}
```
```html
```