Class: DesktopUI

PhotoEditorSDK.UI~ DesktopUI

The Desktop UI

new DesktopUI(options)

ui/desktop-ui/core/ui.jsx, line 124

Creates an UI instance

Name Type Description
options Object
Name Type Default Description
license String

Your license
container DOMElement

The container that the UI should be rendered to
language String 'en' optional

Currently en and de are supported
logLevel String optional

trace, info, warn, error or log
responsive Boolean false optional

Should the editor re-render on window resize?
preloader Boolean true optional

Enables or disables the preloader
crossOrigin String 'anonymous' optional

'anonymous', 'use-credentials' or 'none'
editor Object optional
Name Type Default Description
image Image | string optional

The image that the user can edit
watermarkImage Image optional

An image that should be placed on top as a watermark
preferredRenderer String 'webgl' optional

webgl or canvas
pixelRatio Number 1 optional

If none is given, PhotoEditorSDK automatically detects the current device's pixel ratio
enableDrag Boolean true optional

Should dragging the canvas be enabled?
enableZoom Boolean true optional

Should zooming be enabled?
enableExport Boolean true optional

Should zooming be enabled?
enableKeyboardControls Boolean true optional

Should keyboard controls be enabled?
enablePositionSnapping Boolean true optional

Should snapping be enabled when positioning sprites?
enableRotationSnapping Boolean true optional

Should snapping be enabled when rotating sprites?
enableSave Boolean false optional

Should zooming be enabled?
enableLoad Boolean false optional

Should zooming be enabled?
smoothDownscaling Boolean false optional

Toggles smooth downscaling
smoothUpscaling Boolean false optional

Toggles smooth upscaling
displayResizeMessage Boolean true optional

Should a message be displayed when the image has been scaled down for performance?
defaultControl String 'filter' optional

The tool that is initially loaded
controlsOrder Array.<String> | Array.<Array> optional

The order in which the controls are displayed. Available are transform, filter, adjustments, text, sticker, brush, focus, frame. Can be grouped in arrays which will be displayed with separators.
operationsOrder Array.<String> optional

The order in which operations are added to the stack. Changing this may affect the performance.
controlsOptions Object optional

Options that are passed to specific controls, with the controls identifiers as keys. See the documentation for each control to learn more about available values.
forceCrop Array.<Object> optional

If true, the editor will lauch to the transform tool for cropping, before any other tool is allowed.
maxMegaPixels Object optional

Maximum amount of megapixels per device type

Name Type Default Description
desktop Number 10 optional
mobile Number 5 optional
transparent Boolean true optional
clearColor Array | String | PhotoEditorSDK.Color [0, 0, 0, 0] optional
snappingOptions Object optional

Options that control the snapping behaviour of sprites

Name Type Description
position Object optional

Options that control the positional snapping of sprites

Name Type Default Description
threshold Number 20 optional

At which threshold should sprites snap to the canvas snapping guides? (value in px)
padding Object optional

Defines the inset between the canvas frame and the corresponding snapping guides. The values are specified relative to the smaller side of the image. Setting left, right, top and bottom to 0 allows sprites to snap to the edges of the canvas.

Name Type Default Description
left Number 0.1 optional
right Number 0.1 optional
top Number 0.1 optional
left Number 0.1 optional
rotation Object optional

Options that control the rotational snapping of sprites

Name Type Default Description
angles Array.<Number> [0, 45, 90, 135, 180, 225, 270, 315] optional

Angles to snap to while rotating a sprite
threshold Number 20 optional

At which threshold should the sprites snap to the next rotation snap point (value in pixels)
export Object optional
Name Type Default Description
format String 'image/png' optional

The export format. Available formats
type PhotoEditorSDK.RenderType optional

The export type (image or data url)
download Boolean optional

Should the result be presented as a download?
fileBasename String 'photoeditorsdk-export' optional

The basename of the exported file (file extension will be added automatically)
quality Number 0.8 optional

The export quality (0...1, only supported for JPG images)
save Object optional
Name Type Default Description
format String 'text/jsom' optional

The export format. Available formats
download Boolean optional

Should the result be presented as a download?
fileBasename String 'photoeditorsdk-save' optional

The basename of the exported file (file extension will be added automatically)
assets Object optional
Name Type Default Description
baseUrl String '/assets' optional

Path that is prepended to all asset paths
resolver function optional

A function resolving a path to another path.

Extends

Classes

BaseControls
Editor
ReactComponent

Namespaces

Controls

Members

identifierString

A unique string that represents this UI

Methods

deserialize(data){Promise}

ui/desktop-ui/core/ui.jsx, line 216

Deserializes the given data

Name Type Description
data Object
Returns:
Type Description
Promise

dispose()

ui/desktop-ui/core/ui.jsx, line 544

Disposes the UI

export(download){Promise}

ui/desktop-ui/core/ui.jsx, line 190

Exports an image

Name Type Description
download Boolean

= false
Returns:
Type Description
Promise

getAssetPath(asset, uiAsset, disableRetina){String}

ui/desktop-ui/core/ui.jsx, line 488

Returns the resolved asset path for the given asset name

Name Type Default Description
asset String
uiAsset Boolean false

= false
disableRetina Boolean false

= false
Returns:
Type Description
String

getEditor(){PhotoEditorSDK.UI.DesktopUI.Editor}

ui/desktop-ui/core/ui.jsx, line 224

Returns the editor

Returns:
Type Description
PhotoEditorSDK.UI.DesktopUI.Editor

getFontLoader(){PhotoEditorSDK.UI.DesktopUI.FontLoader}

ui/desktop-ui/core/ui.jsx, line 529

Returns the font loader

Returns:
Type Description
PhotoEditorSDK.UI.DesktopUI.FontLoader

getPreloader(){PhotoEditorSDK.Preloader}

ui/desktop-ui/core/ui.jsx, line 537

Returns the preloader

Returns:
Type Description
PhotoEditorSDK.Preloader

getTheme(){Object}

ui/desktop-ui/core/ui.jsx, line 521

Returns the theme

Returns:
Type Description
Object

isReady(){Boolean}

ui/desktop-ui/core/ui.jsx, line 234

Returns true if the editor is ready for doing operations, e.g., serializing, deserializing and exporting.

Returns:
Type Description
Boolean

onReady(cb)

ui/desktop-ui/core/ui.jsx, line 244

Calls a callback when the editor is ready, or immeditially if it's already in a ready state.

Name Type Description
cb function

run()

ui/desktop-ui/core/ui.jsx, line 151

Main entry point for the UI

save(download){Promise}

ui/desktop-ui/core/ui.jsx, line 199

Exports an image

Name Type Description
download Boolean

= false
Returns:
Type Description
Promise

serialize(){Promise}

ui/desktop-ui/core/ui.jsx, line 207

Serializes the editor state

Returns:
Type Description
Promise

setImage(image)

ui/desktop-ui/core/ui.jsx, line 476

Sets the image to the given one

Name Type Description
image Image

translate(key, interpolationOptions){String}

ui/desktop-ui/core/ui.jsx, line 468

Returns the translation for key

Name Type Description
key String
interpolationOptions Object optional
Returns:
Type Description
String

Type Definitions

EventsObject

Events used by the UI

Properties:
Name Type Description
EXPORT String

Emitted when an image is exported from the editor
LOAD String

Emitted when a previously saved editor serialization is loaded
SAVE String

Emitted when the current editor configuration was serialized to a document
CLOSE String

Emitted when the editor is closed
OPERATION_CREATED String

Emitted when an Operation is created
OPERATION_UPDATED String

Emitted when an Operation is updated
OPERATION_REMOVED String

Emitted when an Operation is removed
EDITOR_READY String

Emitted when the editor has finished loading and is ready to be used
WINDOW_RESIZE String

Emitted when the window (not the editor) is resized
EDITOR_RESIZE String

Emitted when the editor is resized
ZOOM String

Emitted when the editor image zoom level starts changing
ZOOM_CHANGED String

Emitted every time the editor image zoom level changes
ZOOM_DONE String

Emitted when the zoom level has finished changing
HISTORY_UNDO String

Emitted after the last edit operation is undone
HISTORY_UPDATED String

Emitted when the edit history is updated with a new snapshot
HISTORY_REDO String

Emitted after the previously undone operation is reapplied
HISTORY_BEFORE_REDO String

Emitted before the previously undone operation is reapplied
FEATURES_DISABLED String

Emitted when editor features have been disabled
FEATURES_ENABLED String

Emitted when editor features have been enabled
FEATURES_UPDATED String

Emitted when the available editor features have changed
TEXT_SCALED String

Emitted when text is scaled in the editor
TRANSFORM_RESIZE String

Emitted when the image has been resized using the dimension inputs
TRANSFORM_REAPPLY_RATIO String

Emitted when the original transform ratio has been reapplied
TRANSFORM_AFTER_EDIT String

Emitted after the transform has been edited (resized or shifted)
ADDED_STICKER String

Emitted when a new sticker has been added to the image
SPRITES_DESELECTED String

Emitted when the selected sprite has been manually deselected in the editor (and no other sprite is selected afterwards)