# Interface properties A list of properties to read from and write to the current state of the editor UI. * [Editor properties](#editor-properties) * [Modal properties](#modal-properties) ## Editor properties These read only properties are available on the editor instance. | Property | Description | | -------- | -------------------------------------------------------------------------------------- | | element | The root element of the editor. | | history | Used to access history state. See [history methods](../methods/) for more information. | These read/write properties are available on the editor instance. | Property | Default value | Description | | ------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | undefined | The id attribute set to the editor root element. | | class | undefined | The class attribute set to the editor root element. | | [locale](#locale) | undefined | The locale object to use for the editor labels. | | [csp](#csp) | undefined | Content security policy configuration, currently only supports nonce for use with inline styles. | | [utils](#utils) | undefined | The enabled utils and their order in the menu. | | [util](#util) | undefined | The active util, is automatically set to first util in utils array. | | [layoutDirectionPreference](#layoutdirectionpreference) | 'auto' | The direction preference of the editor layout, when is 'auto' the editor will automatically set it to 'vertical' for when the editor root is in portrait aspect ratio and 'horizontal' for landscape aspect ratio. | | [layoutHorizontalUtilsPreference](#layouthorizontalutilspreference) | 'left' | The horizontal location of the utils menu, set to either 'left' or 'right' to move the main navigation to the that side of the image. | | [layoutVerticalUtilsPreference](#layoutverticalutilspreference) | 'bottom' | The vertical location of the utils menu, set to either 'bottom' or 'top' to move the main navigation to the that side of the image. Will not affect mobile presentation where the menu will always stick to the bottom. | | [layoutVerticalToolbarPreference](#layoutverticaltoolbarpreference) | 'top' | The vertical location of the toolbar menu, set to either 'bottom' or 'top' to move the toolbar to the that side of the image. | | [layoutVerticalControlGroupsPreference](#layoutverticalcontrolgroupspreference) | 'bottom' | The vertical position of the util controls, set to 'top' to show the controls at the top of the image instead of below. | | [layoutVerticalControlTabsPreference](#layoutverticalcontroltabspreference) | 'bottom' | The position of the util control tabs, set to 'top' to show tabs above the controls instead of below. | | [textDirection](#textdirection) | 'ltr' | The direction of text on UI controls, set to 'rtl' to switch to right to left text. | | [fixScrollDirection](#fixscrolldirection) | false | Set to true to fix scroll direction on MacOS, by default the scroll direction is inverted. | | [animations](#animations) | 'auto' | Control if and when animations are shown. | | disabled | false | Set to true to disable any interaction with the editor. | | [status](#status) | undefined | Set to a string to show a status message. | | elasticityMultiplier | 10 | Controls the elasticity force of the interface. | | [previewUpscale](#previewupscale) | false | Should the image preview be upscaled to fit the editor stage. | | previewPad | false | Should the image preview add padding around the image when a frame is rendered on the outside of the image bounds. | | previewMaskOpacity | .95 | The opacity of the overlay applied to frames when rendered outside of the image bounds. | | previewImageData | undefined | The current data used for the image preview. Can be an ImageBitmap, ImageData, or HTMLCanvasElement. Available after ['loadpreview'](../../image-editor/events/#loadpreview) event. | | [previewImageDataMaxSize](#previewimagedatamaxsize) | undefined | Maximum texture size to use for the preview image. Will default to browser max texture size. | | previewImageTextPixelRatio | undefined | The pixel density to use for rendering text shapes, will default to window.devicePixelRatio | | [willSetMediaInitialTimeOffset](#willsetmediainitialtimeoffset) | undefined | A hook to set the intial time offset shown when loading a video. Defaults to mid point of first clip. | | [muteAudio](#muteaudio) | true | Set to false to enable audio by default. | | [imageSourceToImageData](#imagesourcetoimagedata) | undefined | The function the editor uses to read preview image data. | | [enableTransparencyGrid](#enabletransparencygrid) | false | When set to true renders a grid behind the image to reveal transparent areas. | | [enableCanvasAlpha](#enablecanvasalpha) | false | Set to true to make canvas transparent. | | [enableToolbar](#enabletoolbar) | true | Set to false to disable the toolbar. | | [enableUtils](#enableutils) | true | Set to false to disable the util tabs. | | [enableButtonClose](#enablebuttonclose) | false | Set to true to show a close button, automatically set to true when using openModal. | | [enableButtonExport](#enablebuttonexport) | true | Set to false to disable the export button. | | [enableButtonRevert](#enablebuttonrevert) | true | Set to false to disable the history revert button. | | [enableNavigateHistory](#enablenavigatehistory) | true | Set to false to disable the undo and redo buttons. | | [enableDropImage](#enabledropimage) | false | Set to true to allow loading a new image by dropping it on the editor. | | [enablePasteImage](#enablepasteimage) | false | Set to true to allow pasting a new image. Editor will accept a pasted image if it's at least 75% in view. | | [enableBrowseImage](#enablebrowseimage) | false | Set to true to allow clicking the editor to browse for an image when the editor is in "waiting for image" state. | | [accept](#accept) | 'image/\*' | The media formats that are accepted when using dropping, browsing, or pasting media. Set to 'video/\*' to only accept video. Set to 'image/\* ,video/\*' to accept images and videos. | | [enablePan](#enablepan) | true | Set to false to disable the panning the image. | | [enablePanInput](#enablepaninput) | undefined | Set to true to force enable pan mode. | | [pan](#pan) | null | Set to a position to pan to, set to null to reset. | | [enableZoom](#enablezoom) | true | Set to false to disable the zooming the image. | | [enableZoomControls](#enablezoomcontrols) | true | Set to false to disable the zoom controls. | | [zoomLevel](#zoomlevel) | null | Set to a number to force a zoom level, set to undefined to fit to view, set to null to have editor handle zoom. | | [zoomPresetOptions](#zoompresetoptions) | 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\]. | | [zoomAdjustStep](#zoomadjuststep) | .25 | The speed at which pressing the zoom buttons increases or decreases zoom. | | [zoomAdjustFactor](#zoomadjustfactor) | .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. | | [zoomAdjustWheelFactor](#zoomadjustwheelfactor) | 1 | The factor used to convert scroll wheel interactions to zoom steps, higher is faster. | | [zoomMaskOpacity](#zoommaskopacity) | .85 | The maximum opacity of the overlay rendered behind UI controls when zooming in. | | [handleEvent](#handleevent) | undefined | A function that is called for each event. Receives event type and detail. | | [willRenderCanvas](#willrendercanvas) | undefined | Inject shapes or adjust shapes in the image preview. | | [willRenderToolbar](#willrendertoolbar) | undefined | Inject custom buttons into the editor toolbar. | | [willRenderUtilTabs](#willrenderutiltabs) | undefined | Inject custom tabs, or reorder existing tabs. | | [willClose](#willclose) | undefined | Prevent close action from user. Only available when using modal. | | [willRevert](#willrevert) | undefined | Prevent revert action from user. | | [willProcessImage](#willprocessimage) | undefined | Prevent image processing action from user. | | [willRequest](#willrequest) | undefined | Called before requesting a resource. | | [willRequestResource](#willrequestresource) | undefined | Called before requesting a remote resource. Deprecated use willRequest instead. | | willSetHistoryInitialState | undefined | Receives initial history state that is about to be set, return modified state. | ### locale When not using one of the default factories the editor requires the locale property to be set to a valid [locale object](../exports/#locale). In the example below we assign the core editor locale and the crop plugin locale object. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-60) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-60) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-60) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-60) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-60) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-60) * [index.html](#index-html-panel-60) `
` * [App.jsx](#App-jsx-panel-60) * [App.css](#App-css-panel-60) `import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { createDefaultImageReader, createDefaultImageWriter, createDefaultImageOrienter, setPlugins, plugin_crop, locale_en_gb, plugin_crop_locale_en_gb, } from '@pqina/pintura'; setPlugins(plugin_crop); const editorDefaults = { imageReader: createDefaultImageReader(), imageWriter: createDefaultImageWriter(), imageOrienter: createDefaultImageOrienter(), locale: { ...locale_en_gb, ...plugin_crop_locale_en_gb, }, }; function App() { return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-60) ` ` * [App.svelte](#App-svelte-panel-60) `
` * [app.component.ts](#app-component-ts-panel-60) * [app.component.html](#app-component-html-panel-60) * [app.component.css](#app-component-css-panel-60) * [app.module.ts](#app-module-ts-panel-60) `import { Component } from '@angular/core'; import { createDefaultImageReader, createDefaultImageWriter, createDefaultImageOrienter, setPlugins, plugin_crop, locale_en_gb, plugin_crop_locale_en_gb, } from '@pqina/pintura'; setPlugins(plugin_crop); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = { imageReader: createDefaultImageReader(), imageWriter: createDefaultImageWriter(), imageOrienter: createDefaultImageOrienter(), locale: { ...locale_en_gb, ...plugin_crop_locale_en_gb, }, }; } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-60) `
` See below for example content of the `locale_en_gb` object exported by the editor module. ```js { labelDefault: 'Default', labelReset: 'Reset', labelAuto: 'Auto', labelNone: 'None', labelEdit: 'Edit', labelClose: 'Close', // etc... } ``` To change a label we can update one of the properties in the locale object. ```js // Merge the locale objects const myLocale = { ...locale_en_gb, ...plugin_crop_locale_en_gb, }; // Change label of export button to 'Save' myLocale.labelButtonExport = 'Save'; ``` When we're using one of the default factories we can set the label directly on the `locale` property. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-63) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-63) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-63) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-63) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-63) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-63) * [index.html](#index-html-panel-63) `
` * [App.jsx](#App-jsx-panel-63) * [App.css](#App-css-panel-63) `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 (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-63) ` ` * [App.svelte](#App-svelte-panel-63) `
` * [app.component.ts](#app-component-ts-panel-63) * [app.component.html](#app-component-html-panel-63) * [app.component.css](#app-component-css-panel-63) * [app.module.ts](#app-module-ts-panel-63) `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(); locale: any = { ...getEditorDefaults().locale, labelButtonExport: 'Save', }; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-63) `
` The code below logs all locale properties to the developer console so we can easily see which property to edit if we need to change labels or icons. ```js import { // core locale locale_en_gb, // plugin locale plugin_crop_locale_en_gb, plugin_finetune_locale_en_gb, plugin_filter_locale_en_gb, plugin_annotate_locale_en_gb, plugin_decorate_locale_en_gb, plugin_redact_locale_en_gb, plugin_resize_locale_en_gb, plugin_sticker_locale_en_gb, plugin_frame_locale_en_gb, // markup editor locale markup_editor_locale_en_gb, } from './pintura.js'; // log merged objects to console console.log({ ...locale_en_gb, ...plugin_crop_locale_en_gb, ...plugin_finetune_locale_en_gb, ...plugin_filter_locale_en_gb, ...plugin_annotate_locale_en_gb, ...plugin_decorate_locale_en_gb, ...plugin_resize_locale_en_gb, ...plugin_sticker_locale_en_gb, ...markup_editor_locale_en_gb, }); ``` The [product package](../../../package/) includes additional locale files for other languages. To load one of the other locales, copy the package `locale` folder to your project directory and import the locale like shown below. ```js import { openEditor } from './pintura.js'; import Core, { MarkupEditor } from './locale/de_DE/core/de_DE.js'; import Annotate from './locale/de_DE/annotate/de_DE.js'; openEditor({ src: 'image.jpeg', locale: { ...Core, ...MarkupEditor, ...Annotate, }, }); ``` When using the `@pqina/pintura` package we can import the locale from the package. ```js import Core, { MarkupEditor } from '@pqina/pintura/locale/de_DE/core'; import Annotate from '@pqina/pintura/locale/de_DE/annotate'; ``` Or we can import all locale objects at once like shown below. ```js import locale_de_DE from '@pqina/pintura/locale/de_DE'; ``` ### csp Configure [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy). At this time this prop only accepts an object with `styleNonce` property. When set this will add a [nonce](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) attribute to generated `
` * [App.jsx](#App-jsx-panel-68) * [App.css](#App-css-panel-68) `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 (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-68) ` ` * [App.svelte](#App-svelte-panel-68) `
` * [app.component.ts](#app-component-ts-panel-68) * [app.component.html](#app-component-html-panel-68) * [app.component.css](#app-component-css-panel-68) * [app.module.ts](#app-module-ts-panel-68) `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(); csp: any = { styleNonce: 'ABCD1234' }; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-68) `
` ### util Updates the current active util and will trigger the editor to show the corresponding view. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-69) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-69) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-69) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-69) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-69) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-69) * [index.html](#index-html-panel-69) `
` * [App.jsx](#App-jsx-panel-69) * [App.css](#App-css-panel-69) `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 (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-69) ` ` * [App.svelte](#App-svelte-panel-69) `
` * [app.component.ts](#app-component-ts-panel-69) * [app.component.html](#app-component-html-panel-69) * [app.component.css](#app-component-css-panel-69) * [app.module.ts](#app-module-ts-panel-69) ```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(); } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-69) `
` ### utils Use to set which utils are shown and in what order they appear in the editor menu. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-70) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-70) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-70) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-70) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-70) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-70) * [index.html](#index-html-panel-70) `
` * [App.jsx](#App-jsx-panel-70) * [App.css](#App-css-panel-70) `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 (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-70) ` ` * [App.svelte](#App-svelte-panel-70) `
` * [app.component.ts](#app-component-ts-panel-70) * [app.component.html](#app-component-html-panel-70) * [app.component.css](#app-component-css-panel-70) * [app.module.ts](#app-module-ts-panel-70) ```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(); } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-70) `
` ### layoutDirectionPreference The direction preference of the editor layout, when is `'auto'` the editor will automatically set it to `'vertical'` for when the editor root is in portrait aspect ratio and `'horizontal'` for landscape aspect ratio. Defaults to `'auto'`. ### layoutHorizontalUtilsPreference The horizontal location of the utils menu, set to either `'left'` or `'right'` to move the main navigation to the that side of the image. Defaults to `'left'`. ### layoutVerticalUtilsPreference The vertical location of the utils menu, set to either `'bottom'` or `'top'` to move the main navigation to the that side of the image. Will not affect mobile presentation where the menu will always stick to the bottom. Defaults to `'bottom'`. ### layoutVerticalToolbarPreference The vertical location of the toolbar menu, set to either `'bottom'` or `'top'` to move the toolbar to the that side of the image. Defaults to `'top'`. ### layoutVerticalControlGroupsPreference The vertical position of the util controls, set to `'top'` to show the controls at the top of the image instead of below. Defaults to `'bottom'`. ### layoutVerticalControlTabsPreference The position of the util control tabs, set to `'top'` to show tabs above the controls instead of below. Defaults to `'bottom'`. ### textDirection Toggle text direction in the editor interface. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-71) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-71) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-71) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-71) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-71) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-71) * [index.html](#index-html-panel-71) `
` * [App.jsx](#App-jsx-panel-71) * [App.css](#App-css-panel-71) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-71) ` ` * [App.svelte](#App-svelte-panel-71) `
` * [app.component.ts](#app-component-ts-panel-71) * [app.component.html](#app-component-html-panel-71) * [app.component.css](#app-component-css-panel-71) * [app.module.ts](#app-module-ts-panel-71) ```javascript import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-71) `
` ### fixScrollDirection Defaults to `false`. Set to `true` to fix scroll direction on MacOS. By default the scroll direction on MacOS is incorrectly inverted. This will be addressed in the next major release. ### animations Toggle if and when the editor runs animations. | 'auto' | Will enable animations if user hasn't specified [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) in system settings. | | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 'never' | Disables all animations. | | 'always' | Will set the editor to ignore user preferences and always run animations. | ### status Set to a string to show a custom status message. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-75) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-75) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-75) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-75) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-75) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-75) * [index.html](#index-html-panel-75) `
` * [App.jsx](#App-jsx-panel-75) * [App.css](#App-css-panel-75) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const handleEditorLoad = () => (editorRef.current.editor.status = 'Doing something...'); return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-75) ` ` * [App.svelte](#App-svelte-panel-75) `
` * [app.component.ts](#app-component-ts-panel-75) * [app.component.html](#app-component-html-panel-75) * [app.component.css](#app-component-css-panel-75) * [app.module.ts](#app-module-ts-panel-75) `import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); handleEditorLoad(): void { this.editor.editor.status = 'Doing something...'; } } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-75) ```html
``` Pass a number between `0` and `1` as second argument to show and update a progress indicator. Pass `Infinity` to show a spinning progress indicator. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-76) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-76) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-76) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-76) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-76) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-76) * [index.html](#index-html-panel-76) `
` * [App.jsx](#App-jsx-panel-76) * [App.css](#App-css-panel-76) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const handleEditorLoad = () => (editorRef.current.editor.status = ['Busy bee', Infinity]); return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-76) ` ` * [App.svelte](#App-svelte-panel-76) `
` * [app.component.ts](#app-component-ts-panel-76) * [app.component.html](#app-component-html-panel-76) * [app.component.css](#app-component-css-panel-76) * [app.module.ts](#app-module-ts-panel-76) `import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); handleEditorLoad(): void { this.editor.editor.status = ['Busy bee', Infinity]; } } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-76) ```html
``` Set second argument to `false` to switch to error state. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-77) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-77) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-77) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-77) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-77) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-77) * [index.html](#index-html-panel-77) `
` * [App.jsx](#App-jsx-panel-77) * [App.css](#App-css-panel-77) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const handleEditorLoad = () => (editorRef.current.editor.status = ['Something went wrong', false]); return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-77) ` ` * [App.svelte](#App-svelte-panel-77) `
` * [app.component.ts](#app-component-ts-panel-77) * [app.component.html](#app-component-html-panel-77) * [app.component.css](#app-component-css-panel-77) * [app.module.ts](#app-module-ts-panel-77) `import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); handleEditorLoad(): void { this.editor.editor.status = ['Something went wrong', false]; } } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-77) ```html
``` Pass function as third argument to handle click on error state close button. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-78) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-78) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-78) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-78) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-78) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-78) * [index.html](#index-html-panel-78) `
` * [App.jsx](#App-jsx-panel-78) * [App.css](#App-css-panel-78) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const handleEditorLoad = () => { editorRef.current.editor.status = [ 'Something went wrong', false, () => { /* clicked close button */ }, ]; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-78) ` ` * [App.svelte](#App-svelte-panel-78) `
` * [app.component.ts](#app-component-ts-panel-78) * [app.component.html](#app-component-html-panel-78) * [app.component.css](#app-component-css-panel-78) * [app.module.ts](#app-module-ts-panel-78) `import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); handleEditorLoad(): void { this.editor.editor.status = [ 'Something went wrong', false, () => { /* clicked close button */ }, ]; } } ` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-78) ```html
``` ### previewUpscale If set to `true` the preview image will be scaled to fit the editor stage. If `false` the preview image will only be scaled down to fit the stage, if the preview image is smaller than the stage it will not be upscaled. This only affects the preview of the image in the editor, this won't affect the size of the output image. ### previewImageDataMaxSize Set to an object with a `width` and `height` value. Pintura will scale down the preview image (respecting the image aspect ratio) to fit the defined size. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-79) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-79) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-79) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-79) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-79) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-79) * [index.html](#index-html-panel-79) `
` * [App.jsx](#App-jsx-panel-79) * [App.css](#App-css-panel-79) `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 (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-79) ` ` * [App.svelte](#App-svelte-panel-79) `
` * [app.component.ts](#app-component-ts-panel-79) * [app.component.html](#app-component-html-panel-79) * [app.component.css](#app-component-css-panel-79) * [app.module.ts](#app-module-ts-panel-79) `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(); previewImageDataMaxSize: any = { width: 1024, height: 1024 }; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-79) `
` ### willSetMediaInitialTimeOffset A hook to set the intial time shown when loading a video. Because video's can have a black first frame this currently defaults to the mid point of first clip. To move the video current time to the first first we can use `willSetMediaInitialTimeOffset` * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-80) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-80) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-80) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-80) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-80) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-80) * [index.html](#index-html-panel-80) ```html ``` * [App.jsx](#App-jsx-panel-80) ```jsx import '@pqina/pintura/pintura.css'; import { useState } from 'react'; import { PinturaEditorModal } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const [editorEnabled, setEditorEnabled] = useState(false); const handleButtonClick = () => setEditorEnabled(true); const willSetMediaInitialTimeOffset = () => { // set to 0 seconds return 0; }; const handleEditorHide = () => setEditorEnabled(false); return (
{editorEnabled && ( )}
); } export default App; ``` * [App.vue](#App-vue-panel-80) ```html ``` * [App.svelte](#App-svelte-panel-80) ```svelte
{#if editorEnabled} {/if}
``` * [app.component.ts](#app-component-ts-panel-80) * [app.component.html](#app-component-html-panel-80) * [app.module.ts](#app-module-ts-panel-80) ```javascript import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('buttonOpenEditor') buttonOpenEditor?: any; editorEnabled: boolean = false; editorDefaults: any = getEditorDefaults(); willSetMediaInitialTimeOffset = (): number => { // set to 0 seconds return 0; }; handleButtonClick(): void { this.editorEnabled = true; } handleEditorHide(): void { this.editorEnabled = false; } } ``` ```html ``` ```javascript 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](#index-html-panel-80) ```html ``` ### muteAudio Toggles audio on video's on/off. By default Pintura mutes videos. ### imageSourceToImageData A helper method to correctly read custom preview image data. The image formats that Pintura Image Editor can read and write depend on which [images are supported by the clients browser](https://en.wikipedia.org/wiki/Comparison%5Fof%5Fweb%5Fbrowsers#Image%5Fformat%5Fsupport). In general these image types are supported by all major browsers. * `image/gif` * `image/png` * `image/jpeg` * `image/webp` * `image/bmp` * `image/svg` If we want to be able to read additional image formats (for example HEIC/HEIF) **inside the editor** we can supply our own image reader using the `imageSourceToImageData` property. Please note that this function is used for all image resources inside the editor, if we only need to load additional image formats for editing it's better to set the `preprocessImageFile` hook of the [imageReader](../../image-editor/properties/#imagereader) property. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-81) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-81) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-81) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-81) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-81) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-81) * [index.html](#index-html-panel-81) ` ` * [App.jsx](#App-jsx-panel-81) `import '@pqina/pintura/pintura.css'; import { useState } from 'react'; import { PinturaEditorModal } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const [editorEnabled, setEditorEnabled] = useState(false); const handleButtonClick = () => setEditorEnabled(true); const imageSourceToImageData = (src) => { return fetch(src) .then((res) => res.blob()) .then( (blob) => new Promise((resolve, reject) => { // Turn blob into image data here // resolve with ImageData object resolve(imageData); }) ); }; const handleEditorHide = () => setEditorEnabled(false); return (
{editorEnabled && ( )}
); } export default App; ` * [App.vue](#App-vue-panel-81) ` ` * [App.svelte](#App-svelte-panel-81) `
{#if editorEnabled} {/if}
` * [app.component.ts](#app-component-ts-panel-81) * [app.component.html](#app-component-html-panel-81) * [app.module.ts](#app-module-ts-panel-81) `import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('buttonOpenEditor') buttonOpenEditor?: any; editorEnabled: boolean = false; editorDefaults: any = getEditorDefaults(); imageSourceToImageData = (src: any): Promise => { return fetch(src) .then((res) => res.blob()) .then( (blob) => new Promise((resolve, reject) => { // Turn blob into image data here // resolve with ImageData object resolve(imageData); }) ); }; handleButtonClick(): void { this.editorEnabled = true; } handleEditorHide(): void { this.editorEnabled = false; } } ` ` ` ```javascript 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](#index-html-panel-81) ` ` ### enableTransparencyGrid Set to `true` to render a grid behind the image to reveal transparent areas. Use `--grid-color-even`, `--grid-color-odd`, and `--grid-size` on the `.pintura-editor` element to style the grid. ```css .pintura-editor { /* even cell color */ --grid-color-even: rgba(0, 0, 0, 0.1); /* odd cell color */ --grid-color-odd: rgba(1, 1, 1, 0.1); /* cell size */ --grid-size: 32; } ``` ### enableCanvasAlpha Set to `true` to make editor background transparent. This is an experimental feature, the API isn't final yet and might be changed in a future release. ### enableToolbar Defaults to `true`, set to `false` to disable the toolbar. ### enableUtils Defaults to `true`, set to `false` to disable the util tabs. ### enableButtonClose Defaults to `false`, set to `true` to show a close button, automatically set to `true` when using `openModal`. ### enableButtonExport Defaults to `true`, set to `false` to disable the export button. ### enableButtonRevert Defaults to `true`, set to `false` to disable the history revert button. ### enableNavigateHistory Defaults to `true`, set to `false` to disable the undo and redo buttons. ### enableDropImage Default to `false`, set to `true` to allow loading a new image by dropping it on the editor. ### enablePasteImage Default to `false`, set to `true` to allow pasting a new image. Editor will accept a pasted image if it's at least 75% in view. ### enableBrowseImage Default to `false`, set to `true` to allow clicking the editor to browse for an image when the editor is in "waiting for image" state. ### accept The media formats that are accepted when using dropping, browsing, or pasting media. Defaults to `'image/*'`. Set to `'video/*'` to only accept video. Set to 'image/\_ ,video/\_' to accept images and videos. ### enablePan Set to `false` to disable panning the image in the markup editor. ### enablePanInput Set to `true` to force enable pan mode. ### pan Set to a position (for example `{ x: 100, y: 100 }`) to pan to, set to `null` to reset. ### enableZoom Set to `false` to disable zooming the image in the markup editor. ### enableZoomControls Set to `false` to disable the zoom controls. true ### zoomLevel Set to a number to force a zoom level, set to `undefined` to fit to view, set to `null` to have editor handle zoom. ### zoomPresetOptions 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]`. ### zoomAdjustStep The speed at which pressing the zoom buttons increases or decreases zoom. Defaults to `.25` ### zoomAdjustFactor 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`. ### zoomAdjustWheelFactor The factor used to convert scroll wheel interactions to zoom steps, higher is faster, defaults to `1`. ### zoomMaskOpacity The maximum opacity of the overlay rendered behind UI controls when zooming in, value between `0` and `1`, defaults to `.85`. ### handleEvent Set to a function to route events. The `handleEvent` callback runs for each public event the editor dispatches, it receives the event type and detail. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-83) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-83) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-83) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-83) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-83) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-83) * [index.html](#index-html-panel-83) `
` * [App.jsx](#App-jsx-panel-83) * [App.css](#App-css-panel-83) `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 handleEvent = (type, detail) => { // Log all editor events to console console.log(type, detail); }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-83) ` ` * [App.svelte](#App-svelte-panel-83) `
` * [app.component.ts](#app-component-ts-panel-83) * [app.component.html](#app-component-html-panel-83) * [app.component.css](#app-component-css-panel-83) * [app.module.ts](#app-module-ts-panel-83) `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(); handleEvent = (type: string, detail: any): void => { // Log all editor events to console console.log(type, detail); }; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-83) `
` ### willClose Set to an async method. Resolve with `false` to prevent closing the modal, resolve with `true` to continue closing the modal. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-84) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-84) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-84) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-84) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-84) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-84) * [index.html](#index-html-panel-84) ```html ``` * [App.jsx](#App-jsx-panel-84) `import '@pqina/pintura/pintura.css'; import { useState } from 'react'; import { PinturaEditorModal } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const [editorEnabled, setEditorEnabled] = useState(false); const handleButtonClick = () => setEditorEnabled(true); const willClose = async () => { // return false to prevent closing modal return false; }; const handleEditorHide = () => setEditorEnabled(false); return (
{editorEnabled && ( )}
); } export default App; ` * [App.vue](#App-vue-panel-84) ` ` * [App.svelte](#App-svelte-panel-84) ```svelte
{#if editorEnabled} {/if}
``` * [app.component.ts](#app-component-ts-panel-84) * [app.component.html](#app-component-html-panel-84) * [app.module.ts](#app-module-ts-panel-84) ```javascript import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('buttonOpenEditor') buttonOpenEditor?: any; editorEnabled: boolean = false; editorDefaults: any = getEditorDefaults(); willClose = async (): Promise => { // return false to prevent closing modal return false; }; handleButtonClick(): void { this.editorEnabled = true; } handleEditorHide(): void { this.editorEnabled = false; } } ``` ` ` ```javascript 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](#index-html-panel-84) ```html ``` ### willRevert Set to an async method. Resolve with `false` to prevent the revert of all user actions, resolve with `true` to revert the editor to the initial state. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-85) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-85) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-85) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-85) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-85) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-85) * [index.html](#index-html-panel-85) ```html
``` * [App.jsx](#App-jsx-panel-85) * [App.css](#App-css-panel-85) `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 willRevert = async () => { // return false to prevent revert action return false; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-85) ` ` * [App.svelte](#App-svelte-panel-85) ```svelte
``` * [app.component.ts](#app-component-ts-panel-85) * [app.component.html](#app-component-html-panel-85) * [app.component.css](#app-component-css-panel-85) * [app.module.ts](#app-module-ts-panel-85) ```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(); willRevert = async (): Promise => { // return false to prevent revert action return false; }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-85) ```html
``` ### willProcessImage Set to an async method. Resolve with `false` to prevent the image processing action, resolve with `true` to continue processing the image. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-86) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-86) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-86) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-86) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-86) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-86) * [index.html](#index-html-panel-86) ```html
``` * [App.jsx](#App-jsx-panel-86) * [App.css](#App-css-panel-86) `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 willProcessImage = async () => { // return false to prevent image processing action return false; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-86) ` ` * [App.svelte](#App-svelte-panel-86) ```svelte
``` * [app.component.ts](#app-component-ts-panel-86) * [app.component.html](#app-component-html-panel-86) * [app.component.css](#app-component-css-panel-86) * [app.module.ts](#app-module-ts-panel-86) ```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(); willProcessImage = async (): Promise => { // return false to prevent image processing action return false; }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-86) ```html
``` Optionally use the [status](#status) property to update the editor status text. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-87) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-87) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-87) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-87) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-87) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-87) * [index.html](#index-html-panel-87) ```html
``` * [App.jsx](#App-jsx-panel-87) * [App.css](#App-css-panel-87) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const willProcessImage = async () => { // show a status message editorRef.current.editor.status = 'waiting for user input'; // wait for a second before showing dialog await new Promise((r) => setTimeout(r, 1000)); // show some sort of dialog to request user input const shouldProcess = confirm('Should we process the image?'); // hide the status after we got user input editorRef.current.editor.status = undefined; // ready to process? return shouldProcess; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-87) ` ` * [App.svelte](#App-svelte-panel-87) ```svelte
``` * [app.component.ts](#app-component-ts-panel-87) * [app.component.html](#app-component-html-panel-87) * [app.component.css](#app-component-css-panel-87) * [app.module.ts](#app-module-ts-panel-87) ```javascript import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); willProcessImage = async (): Promise => { // show a status message this.editor.editor.status = 'waiting for user input'; // wait for a second before showing dialog await new Promise((r) => setTimeout(r, 1000)); // show some sort of dialog to request user input const shouldProcess = confirm('Should we process the image?'); // hide the status after we got user input this.editor.editor.status = undefined; // ready to process? return shouldProcess; }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-87) ```html
``` ### willRequest Use to alter request objects or prevent requests. Requests include images like the main images and images used to render shapes, additionally the editor loads stylesheets to determine font resources. Please note this hook is only used for resources like stylesheets, stickers, and shape background images. To pass custom headers to the request that loads the main image you can use the [request](../../image-editor/exports/#request) property on the `imageReader`. Receives request `url` and request `info` object. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-88) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-88) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-88) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-88) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-88) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-88) * [index.html](#index-html-panel-88) `
` * [App.jsx](#App-jsx-panel-88) * [App.css](#App-css-panel-88) `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 willRequest = (url, info) => { const { resourceType } = info; // add custom request header to image requests if (resourceType === 'image') { return { headers: { myRequestHeader: 'Hello World', }, }; } // only load stylesheets if is absolute URL to pqina.nl if (resourceType === 'stylesheet' && !url.includes('pqina.nl')) { return false; } // don't alter other requests }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-88) ` ` * [App.svelte](#App-svelte-panel-88) `
` * [app.component.ts](#app-component-ts-panel-88) * [app.component.html](#app-component-html-panel-88) * [app.component.css](#app-component-css-panel-88) * [app.module.ts](#app-module-ts-panel-88) ```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(); willRequest = ( url: string, info: { resourceType: 'image' | 'stylesheet' } ): undefind | false | RequestInit => { const { resourceType } = info; // add custom request header to image requests if (resourceType === 'image') { return { headers: { myRequestHeader: 'Hello World', }, }; } // only load stylesheets if is absolute URL to pqina.nl if (resourceType === 'stylesheet' && !url.includes('pqina.nl')) { return false; } // don't alter other requests }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-88) `
` ### willRequestResource Deprecated, use [willRequest](#willrequest) instead. Use to prevent loading remote resources. Receives remote stylesheet URL, return false to prevent loading the resource. ### willRenderCanvas We can use the `willRenderCanvas` hook to alter what Pintura Image Editor renders to the screen. The `willRenderCanvas` hook receives two parameters, the `shapes` that are about to be drawn, and the current `state`. Example draw `state` object. ```js { // is user currently interacting isInteracting: false, // will animate from 0 to 1 when interacting isInteractingFraction: 0, // opacity of the image from 0 to 1 opacity: 1, // rotation of image rotation: { x: 0, y: 0, z: 0, }, // scale of image scale: 0.615625, // size of canvas size: { width: 1040, height: 510, }, // foreground color of canvas foregroundColor: [0, 0, 0], // background color of canvas backgroundColor: [1, 1, 1], // line color used in canvas lineColor: [0, 0, 0], // rectangle of editor root rootRect: { x: 0, y: 0, width: 1040, height: 510, }, // rectangle of crop selection selectionRect: { x: 322, y: 60, height: 394, width: 522, }, // rectangle of util stageRect: { x: 144, y: 60, width: 880, height: 394, }, // opacity of each util, from 0 to 1 utilVisibility: { annotate: 0, crop: 1, decorate: 0, filter: 0, finetune: 0, resize: 0, sticker: 0, }, }; ``` Example `shapes` object. ```js { // these are drawn relative to the preview image annotationShapes: [ { backgroundColor: [0, 1, 1], cornerRadius: 0, disableErase: true, height: 200, id: 'dgyf5b4cu', opacity: 1, rotation: 0, strokeColor: [0, 0, 0], strokeWidth: 0, width: 200, x: 20, y: 20, }, ], // these are drawn relative to the crop selection decorationShapes: [], // these are drawn on top of the user interface interfaceShapes: [ { id: 'image-selection-guide-row-0', opacity: 1, points: [ { x: 322.475, y: 60 }, { x: 844.525, y: 60 }, ], strokeColor: [0, 0, 0], strokeWidth: 1, }, // ...and some more shapes ], }; ``` In the snippet below we draw a circular overlay on top of the crop selection, see [crop overlay example](../../../examples/circular-crop-overlay/) for a live preview. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-91) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-91) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-91) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-91) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-91) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-91) * [index.html](#index-html-panel-91) `
` * [App.jsx](#App-jsx-panel-91) * [App.css](#App-css-panel-91) `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 willRenderCanvas = (shapes, state) => { const { utilVisibility, selectionRect, backgroundColor, lineColor } = state; // exit if crop utils is not visible if (utilVisibility.crop <= 0) return shapes; // shortcuts to selection rect const { x, y, width, height } = selectionRect; // return updated shapes return { // copy props from shapes param ...shapes, // add an 'ellipse' shape interfaceShapes: [ { x: x + width * 0.5, y: y + height * 0.5, rx: width * 0.5, ry: height * 0.5, opacity: utilVisibility.crop, inverted: true, backgroundColor: [...backgroundColor, 0.5], strokeWidth: 1, strokeColor: [...lineColor], }, ...shapes.interfaceShapes, ], }; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-91) ` ` * [App.svelte](#App-svelte-panel-91) `
` * [app.component.ts](#app-component-ts-panel-91) * [app.component.html](#app-component-html-panel-91) * [app.component.css](#app-component-css-panel-91) * [app.module.ts](#app-module-ts-panel-91) `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(); willRenderCanvas = (shapes: any, state: any): any => { const { utilVisibility, selectionRect, backgroundColor, lineColor } = state; // exit if crop utils is not visible if (utilVisibility.crop <= 0) return shapes; // shortcuts to selection rect const { x, y, width, height } = selectionRect; // return updated shapes return { // copy props from shapes param ...shapes, // add an 'ellipse' shape interfaceShapes: [ { x: x + width * 0.5, y: y + height * 0.5, rx: width * 0.5, ry: height * 0.5, opacity: utilVisibility.crop, inverted: true, backgroundColor: [...backgroundColor, 0.5], strokeWidth: 1, strokeColor: [...lineColor], }, ...shapes.interfaceShapes, ], }; }; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-91) `
` ### willRenderToolbar The `willRenderToolbar` hook receives the current toolbar definition and editor environment parameters. The hook allows injecting custom controls into the toolbar using the [createNode](../../ui/exports/#createnode) helper function. The `willRenderToolbar` hook should always return an array. If the returned array is empty the toolbar is hidden. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-92) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-92) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-92) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-92) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-92) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-92) * [index.html](#index-html-panel-92) `
` * [App.jsx](#App-jsx-panel-92) * [App.css](#App-css-panel-92) `import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults, createNode } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const willRenderToolbar = (toolbar, env, redraw) => { console.log(toolbar); // logs: [ Array(4), Array(4), Array(4) ] console.log(env); // logs: { orientation: "landscape", verticalSpace: "short", … } // call redraw to trigger a redraw of the editor state // insert your item return [ createNode('div', 'my-div', { textContent: 'Hello world' }), ...toolbar, ]; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-92) ` ` * [App.svelte](#App-svelte-panel-92) `
` * [app.component.ts](#app-component-ts-panel-92) * [app.component.html](#app-component-html-panel-92) * [app.component.css](#app-component-css-panel-92) * [app.module.ts](#app-module-ts-panel-92) ```javascript import { Component } from '@angular/core'; import { getEditorDefaults, createNode, PinturaNode } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = getEditorDefaults(); willRenderToolbar = ( toolbar: PinturaNode[], env: any, redraw: () => void ): PinturaNode[] => { console.log(toolbar); // logs: [ Array(4), Array(4), Array(4) ] console.log(env); // logs: { orientation: "landscape", verticalSpace: "short", … } // call redraw to trigger a redraw of the editor state // insert your item return [ createNode('div', 'my-div', { textContent: 'Hello world' }), ...toolbar, ]; }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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](#index-html-panel-92) `
` ### willRenderUtilTabs Use to customize the util tabs. Allows ordering, removing, or updating the received array of tab objects. Return either the tab objects or a `PinturaNode` array to render instead of the default tabs. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-93) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-93) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-93) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-93) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-93) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-93) * [index.html](#index-html-panel-93) `
` * [App.jsx](#App-jsx-panel-93) * [App.css](#App-css-panel-93) `import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); function App() { const editorRef = useRef(null); const willRenderUtilTabs = (tabs, env, redraw) => { console.log(tabs); // logs: [ { id: 'crop', … }, … ] console.log(env); // logs: { orientation: "landscape", … } // call redraw to trigger a redraw of the editor state // returns custom node menu return [ [ // node to use for tab group 'div', // unique id for the group node 'tab-group', // so tab direction switches with view orientation change { class: 'my-tab-group', style: 'display:flex; flex-direction:' + (env.orientation === 'landscape' ? 'column' : 'row'), }, // map tabs to child nodes tabs.map((tab) => [ 'Button', tab.id, { // add * if is selected tab label: tab.label + (tab.selected ? ' *' : ''), // handle clicks on this button onclick: () => { // change active tab on click editorRef.current.editor.util = tab.id; }, }, ]), ], ]; }; return (
); } export default App; ` ```css .pintura-editor { height: 600px; } .my-tab-group button span { font-size: 1em; visibility: visible !important; } ``` * [App.vue](#App-vue-panel-93) ` ` * [App.svelte](#App-svelte-panel-93) `
` * [app.component.ts](#app-component-ts-panel-93) * [app.component.html](#app-component-html-panel-93) * [app.component.css](#app-component-css-panel-93) * [app.module.ts](#app-module-ts-panel-93) ```javascript import { Component, ViewChild } from '@angular/core'; import { getEditorDefaults, PinturaNode } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { @ViewChild('editor') editor?: any; editorDefaults: any = getEditorDefaults(); willRenderUtilTabs = ( tabs: { id: string; icon: string; selected: boolean; label: string }[], env: any, redraw: () => void ): | { id: string; icon: string; selected: boolean; label: string }[] | PinturaNode[] => { console.log(tabs); // logs: [ { id: 'crop', … }, … ] console.log(env); // logs: { orientation: "landscape", … } // call redraw to trigger a redraw of the editor state // returns custom node menu return [ [ // node to use for tab group 'div', // unique id for the group node 'tab-group', // so tab direction switches with view orientation change { class: 'my-tab-group', style: 'display:flex; flex-direction:' + (env.orientation === 'landscape' ? 'column' : 'row'), }, // map tabs to child nodes tabs.map((tab) => [ 'Button', tab.id, { // add * if is selected tab label: tab.label + (tab.selected ? ' *' : ''), // handle clicks on this button onclick: () => { // change active tab on click this.editor.editor.util = tab.id; }, }, ]), ], ]; }; } ``` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } .my-tab-group button span { font-size: 1em; visibility: visible !important; } ``` ```javascript 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](#index-html-panel-93) `
` ## Modal properties Additional to the default editor properties these read only properties are available on an editor instance opened with `openEditor` or `openDefaultEditor`. | Property | Description | | --------------- | ----------------------------------------------------------------------------------------------------- | | [modal](#modal) | The root element of the modal. Only available when the editor was created with the openEditor method. | Additional to the default editor properties these read/write properties are available on an editor instance opened with `openEditor` or `openDefaultEditor`. | Property | Default value | Description | | ---------------------------- | ------------- | -------------------------------------------------------------------------------------- | | enableAutoDestroy | true | Set to false to prevent the modal from cleaning up its HTML elements after hiding. | | enableAutoHide | true | Set to false to prevent the modal from automatically hiding after processing an image. | | preventScrollBodyIfNeeded | true | Set to false to prevent adding iOS document lock. Isn't needed in mobile app context. | | preventFooterOverlapIfNeeded | true | Set to false to prevent adding iOS footer spacing. Isn't needed in mobile app context. | ### modal A reference to the modal wrapping the editor. This property is only available when the editor is created with `openEditor`.