Class ImageEditor`Abstract`

Image Editor component.

This component provides two editors for image editing that can be used within the FileSelection.
The editors are available for image files that have already been uploaded and for which at least one editor is activated in the options of the file upload control.

The editor for drawing, labeling and annotating is called Marker
The editor for cropping, rotating and scaling is called Cropro

Both editors can be used independently from each other.

To use the editor API, you must first obtain the instance of an editor by following the steps below:

Retrieve the instance of FileSelection in which the image file to be edited is located
Determine the ID of the file for which you want to call up the image editor:
- You can use the FileSelection's getFilesInfo method to determine the file ID
- The Image Editor is only available for image files
Get the editor instance of the file you want to edit.
The FileSelection provides two methods for this:
- getImageEditors to get all available editors.
- getImageEditor to get a specific editor by file ID.
Use the editor's API to customize the editor to your needs.
Further information can be found in the examples and methods below.

Element

ix-image-editor

Example

Getting the image editor instance

// get the file upload control
const fileUpload = ix.api.dom.getControl("<FILEUPLOAD-GUID>");

// determine the file ID you want to get the image editor for
// you can use the `fileUpload.getValue(true)` or `fileUpload.getFilesInfo()` method to get the ID of an file
// in this example we use the first file (assuming it is an image)
const fileId = fileUpload.getFilesInfo()[0].id;

// get the image editor with the given file id
const imageEditor = fileUpload.getImageEditor(fileId);

Note

This control operates the same way on both edit and view pages. Refer to this documentation for guidance on its use on view pages as well.

Hierarchy

ImageEditor

Index

Accessors

disabled

Methods

addCroproEventListener addMarkerEventListener closeCropro closeMarker createCustomMarker openCropro openMarker

Accessors

`Abstract` disabled

get disabled(): boolean
Retrieves the current state of the edit trigger button, indicating if it is enabled or disabled.

Returns boolean
Whether the edit trigger button is disabled (true) or enabled (false).
Example
```
imageEditor.disabled;
```
set disabled(disabled): void
Sets the state of the edit trigger button, enabling or disabling its functionality.
Parameters
- disabled: boolean
  
  Whether to disable (true) or enable (false) the edit trigger button.
Returns void
Example
```
imageEditor.disabled = <true|false>;
```

Methods

`Abstract` addCroproEventListener

addCroproEventListener(event, callbackFn): void
Adds an eventlistener to Cropro to listen to the following events:
- render: Is triggered when rendering (saving changes) is completed after the user has pressed the OK button.
- close: Is triggered after the user interface has been closed.
Parameters
- event: "render" | "close"
  
  Event to be listened to.
- callbackFn: Function
  
  Callback function to be executed after the event was fired.
Returns void
Example
```
// example to listen to the `close` event
imageEditor.addCroproEventListener("close", () => {
    // your logic goes here
    console.log("Editor closed!");
});
```

`Abstract` addMarkerEventListener

addMarkerEventListener(eventName, callbackFn): void
Adds an eventlistener to Marker to listen to the following events:
- show: Is triggered after the user interface has been opened.
- render: Is triggered when rendering (saving changes) is completed after the user has pressed the OK button.
- beforeclose: Is triggered before the user interface closes.
- close: Is triggered after the user interface has been closed.
Parameters
- eventName: "render" | "close" | "show" | "beforeclose"
  
  Event to be listened to.
- callbackFn: Function
  
  Callback function to be executed after the event was fired.
Returns void
Example
```
// example to listen to the `beforeclose` event
imageEditor.addMarkerEventListener("beforeclose", (event) => {
    // display a confirmation dialog to prevent accidental closing of the editor without saving
    if (!confirm("Do you want to discard changes?")) {
        event.preventDefault();
    }
});
```

`Abstract` closeCropro

closeCropro(saveChanges?): void
Close Cropro user interface.
Parameters
- Optional saveChanges: boolean
  
  Indicates whether the current editing state should be saved (true) or if the editor should close without saving changes (false).
Returns void
Default
saveChanges = false

Example
```
// close without saving changes
imageEditor.closeCropro();

// close and save changes
imageEditor.closeCropro(true);
```

`Abstract` closeMarker

closeMarker(saveChanges?): void
Close Marker user interface.
Parameters
- Optional saveChanges: boolean
  
  Indicates whether the current editing state should be saved (true) or if the editor should close without saving changes (false).
Returns void
Default
saveChanges = false

Example
```
// close without saving changes
imageEditor.closeMarker();

// close and save changes
imageEditor.closeMarker(true);
```

`Abstract` createCustomMarker

createCustomMarker(baseMarkerType, customMarkerName, customMarkerIcon, customMarkerSettings): void
Adds a new custom marker to the Marker editor with user-defined settings.

This method seamlessly integrates a personalized marker into the image editor, allowing users to specify the marker type, assign a unique name, choose an icon and configure custom default settings. The custom marker is then conveniently added to the Marker Editor's toolbar.
Parameters
- baseMarkerType: string
  The foundation marker type for the custom marker.
  - Refer to the Marker Reference for a comprehensive list of available marker types.
- customMarkerName: string
  
  A unique identifier for the custom marker.
- customMarkerIcon: string
  The icon representing the custom marker.
  - The icon must be a valid SVG file.
  - Supported icons are part of Intrexx's icon54 set
    
    Icons can be found in the <portal>/external/htmlroot/thirdparty folder of your Intrexx installation.
    
    The icon path must be relative to the thirdparty folder, e.g., "icon54/svg/line/BasicIcons/Rocket.svg".
    
    Refer to the <portal>/external/htmlroot/thirdparty/icon54/README.md file or check the online help for more details.
  - Also supported are any other SVG icon, which can be used by providing the SVG code as a string.
    
    The default icons of the editor are from Material UI
    
    It's possible to copy the SVG code there.
    
    Note: When using a SVG string with a <title> tag, the title will be override the customMarkerName parameter, so it's recommended to omit the <title> tag.
- customMarkerSettings: Settings
  Customized settings for the custom marker.
  - See the Settings Reference for comprehensive information on available settings.
  - Settings not overridden by the user will be inherited from the base marker type.
  - Not all settings are universally applicable to every marker type; users are encouraged to refer to the respective documentation for compatibility details.
Returns void
Note
This functionality is exclusive to the Marker editor, specifically designed for drawing, labeling, and annotating images.

Example
```
// EXAMPLE 1
// Adding a custom "Rejected Marker" based on the "CaptionFrameMarker" with a `defaultColor` of red and a `defaultCaptionText` of "rejected"
imageEditor.createCustomMarker(
  "CaptionFrameMarker",
  "Rejected Marker",
  "icon54/svg/line/BasicIcons/ThumbsDown.svg",
  { defaultCaptionText: "Rejected!", defaultColor: "red" }
);

// EXAMPLE 2
// Adding a custom "Approved Marker" based on the "TextMarker" with a `defaultText` of "Approved" and a `defaultColor` of "green"
// Using an SVG string of any source instead of an icon from the icon54 set
imageEditor.createCustomMarker(
  "TextMarker",
  "Approved Marker",
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" />
   </svg>`,
  { defaultText: "Approved!", defaultColor: "green" }
);
```

`Abstract` openCropro

openCropro(): void
Opens the Cropro user interface.

Returns void
Example
```
imageEditor.openCropro();
```

`Abstract` openMarker

openMarker(): void
Opens the Marker user interface.

Returns void
Example
```
imageEditor.openMarker();
```

Class ImageEditorAbstract

Element

Example

Note

Hierarchy

Index

Accessors

Methods

Accessors

Abstract disabled

Returns boolean

Example

Parameters

disabled: boolean

Returns void

Example

Methods

Abstract addCroproEventListener

Parameters

event: "render" | "close"

callbackFn: Function

Returns void

Example

Abstract addMarkerEventListener

Parameters

eventName: "render" | "close" | "show" | "beforeclose"

callbackFn: Function

Returns void

Example

Abstract closeCropro

Parameters

Optional saveChanges: boolean

Returns void

Default

Example

Abstract closeMarker

Parameters

Optional saveChanges: boolean

Returns void

Default

Example

Abstract createCustomMarker

Parameters

baseMarkerType: string

customMarkerName: string

customMarkerIcon: string

customMarkerSettings: Settings

Returns void

Note

Example

Abstract openCropro

Returns void

Example

Abstract openMarker

Returns void

Example

Settings

Member Visibility

Theme

On This Page

Class ImageEditor`Abstract`

`Abstract` disabled

`Abstract` addCroproEventListener

`Abstract` addMarkerEventListener

`Abstract` closeCropro

`Optional` saveChanges: boolean

`Abstract` closeMarker

`Optional` saveChanges: boolean

`Abstract` createCustomMarker

`Abstract` openCropro

`Abstract` openMarker