### Setup Development Environment

Source: https://github.com/nhn/tui.image-editor/blob/master/README.md

Clone the repository, navigate to the directory, and install node modules to set up the development environment. Ensure there are no errors before proceeding.

```sh
$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Start the webpack-dev-server for local development.

```bash
npm run serve
```

--------------------------------

### Install Dependencies

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Install project dependencies using npm and bower.

```bash
npm install && bower install
```

--------------------------------

### Install TOAST UI Image Editor for React

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Install the TOAST UI Image Editor React component using npm.

```sh
npm install --save @toast-ui/react-image-editor
```

--------------------------------

### Example Code Placeholder

Source: https://github.com/nhn/tui.image-editor/blob/master/ISSUE_TEMPLATE.md

This is a placeholder for example code to describe the current behavior. Include relevant code snippets or links to external code-sharing platforms.

```javascript
// Write example code
```

--------------------------------

### Install ImageEditor with npm

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Install the latest version of TOAST UI Image Editor using npm. You can also install a specific version by appending the version number.

```sh
$ npm install --save tui-image-editor # Latest version
$ npm install --save tui-image-editor@<version> # Specific version
```

--------------------------------

### SVG Icon File Structure Example

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

An example of the structure within an SVG file, showing how the icon name is used to reference the symbol.

```svg
icon-a.svg file
submenu.activeIcon.name <-> iconName
...
<symbol id="${iconName}-ic-apply" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd">
        <path d="M0 0h24v24H0z"/>
        <path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
    </g>
</symbol>
...
```

--------------------------------

### Common Image Editor Usage Example

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Structure.md

Demonstrates the recommended sequence for setting a drawing mode, performing an action, and then resetting the mode. Use this pattern for typical operations.

```javascript
editor.setDrawingMode("cropper");
editor.crop(editor.getCropzoneRect());
editor.setDrawingMode("normal");
```

--------------------------------

### Accessing Instance Methods via Ref

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Get the Image Editor instance using `createRef` and the `getInstance()` method to call its methods, such as `flipX()`.

```javascript
const imageEditorOptions = {
  // sort of option properties.
};

class MyComponent extends React.Component {
  editorRef = React.createRef();

  handleClickButton = () => {
    const editorInstance = this.editorRef.current.getInstance();

    editorInstance.flipX();
  };

  render() {
    return (
      <>
        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
        <button onClick={this.handleClickButton}>Flip image by X Axis!</button>
      </>
    );
  }
}
```

--------------------------------

### Install ImageEditor with bower

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Install the latest version of TOAST UI Image Editor using bower. You can also install a specific version by appending the tag name.

```sh
$ bower install tui-image-editor # Latest version
$ bower install tui-image-editor#<tag> # Specific version
```

--------------------------------

### Install Vue Image Editor via npm

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Install the Vue wrapper for TOAST UI Image Editor using npm. If you install other packages, you might need to reinstall the fabric dependency.

```sh
npm install --save @toast-ui/vue-image-editor
```

--------------------------------

### Image Editor Usage Example (Not Recommended)

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Structure.md

Illustrates a discouraged usage pattern where a drawing mode is set, an operation from a different mode is performed, and then the mode is reset. This can lead to unexpected behavior.

```javascript
editor.setDrawingMode("cropper");
editor.rotate(90);
editor.setDrawingMode("normal");
```

--------------------------------

### HTML Container for Image Editor

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Add the container element where TOAST UI ImageEditor will be created. This is a basic HTML setup.

```html
<body>
  ...
  <div id="tui-image-editor"></div>
  ...
</body>
```

--------------------------------

### Crop Image and Stop Drawing Mode in ImageEditor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/ImageEditor-2.0.0-Migration-guide.md

Use `getCropzoneRect` to get the cropping area and `crop` to apply it. Then, `stopDrawingMode` to exit the cropping mode.

```javascript
var rect = imageEditor.getCropzoneRect();
imageEditor.crop(rect).then(() => {
  imageEditor.stopDrawingMode();
});
```

--------------------------------

### Crop Image and Stop Drawing Mode

Source: https://github.com/nhn/tui.image-editor/wiki/ImageEditor-2.0.0-Migration-guide

Use `getCropzoneRect` to get the cropping area and `crop` to apply it. `stopDrawingMode` is then called to exit the cropping mode.

```javascript
var rect = imageEditor.getCropzoneRect();
imageEditor.crop(rect).then(() => {
    imageEditor.stopDrawingMode();
});
```

--------------------------------

### Getting the Root Element

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

The wrapper component provides a `getRootElement()` method to directly access and manipulate the root DOM element of the image editor.

```APIDOC
## Getting the Root Element

### Description
The `ImageEditor` React wrapper component offers a `getRootElement()` method that allows direct access to the main DOM element of the image editor. This can be useful for advanced DOM manipulations or integrations.

### Method
- **getRootElement()**: Returns the root DOM element of the image editor.

### Usage
1. Create a ref for the `ImageEditor` component.
2. Call `this.yourRef.current.getRootElement()` to get the DOM element.
3. Perform desired DOM operations on the returned element.

### Request Example
```javascript
class MyComponent extends React.Component {
  editorRef = React.createRef();

  handleClickButton = () => {
    this.editorRef.current.getRootElement().classList.add('image-editor-root');
  };

  render() {
    return (
      <>
        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
        <button onClick={this.handleClickButton}>Click!</button>
      </>
    );
  }
}
```
```

--------------------------------

### Get Image Data for Saving

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version-Image.md

Converts the current state of the image editor into a base64 encoded Data URL. This is the first step before sending the image data to a server for saving.

```javascript
var dataURL = imageEditor.toDataURL();
```

--------------------------------

### Handle Text Activation Event

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Reference.md

Listen for the 'activateText' event to get information about the text object when it's created or clicked on the canvas. Use this to control custom text palettes.

```javascript
imageEditor.on('activateText', function (obj) {
  console.log(obj.type); // Whether the current text object is new or aleady created
  console.log(obj.text); // Contents of the current text object
  console.log(obj.styles); // Styles of the current text object
  console.log(obj.originPosition); // Mouse position on the canvas
  console.log(obj.clientPosition); // Mouse position on browser - set the text palette's position
});
```

--------------------------------

### Getting the Root Element

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Retrieve the root DOM element of the Image Editor component using the `getRootElement()` method for direct manipulation.

```javascript
class MyComponent extends React.Component {
  editorRef = React.createRef();

  handleClickButton = () => {
    this.editorRef.current.getRootElement().classList.add('image-editor-root');
  };

  render() {
    return (
      <>
        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
        <button onClick={this.handleClickButton}>Click!</button>
      </>
    );
  }
}
```

--------------------------------

### Get Root Element of ImageEditor

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Use the getRootElement method via the ref to obtain the root DOM element of the ImageEditor.

```javascript
this.$refs.tuiImageEditor.getRootElement();
```

--------------------------------

### Reinstall Fabric Dependency

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

If installing other packages causes a dependency issue with fabric, reinstall it using npm with specific flags to ensure the correct version is used.

```sh
npm install --no-save --no-optional fabric@~4.2.0
```

--------------------------------

### Activate Text Event Listener

Source: https://github.com/nhn/tui.image-editor/wiki/v1.1.0-Features-Reference

Listen for the 'activateText' event to get information about the text object being created or modified. This is useful for controlling a custom text palette.

```javascript
imageEditor.on('activateText', function(obj) {
  console.log(obj.type); // Whether the current text object is new or aleady created
  console.log(obj.text); // Contents of the current text object
  console.log(obj.styles); // Styles of the current text object
  console.log(obj.originPosition); // Mouse position on the canvas
  console.log(obj.clientPosition); // Mouse position on browser - set the text palette's position
});
```

--------------------------------

### Event Handling

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

All events supported by the core TOAST UI Image Editor can be handled in the React component by using `on[EventName]` props, ensuring the event name starts with a capital letter.

```APIDOC
## Event Handling

### Description
The React `ImageEditor` component supports all events from the core TOAST UI Image Editor. To handle these events, you should use props named `on[EventName]`, where `[EventName]` is the capitalized version of the original event name.

### Usage
Map the desired event to a corresponding `on[EventName]` prop. For example, the `mousedown` event can be handled using the `onMousedown` prop.

### Request Example
```javascript
class MyComponent extends React.Component {
  handleMousedown = () => {
    console.log('Mouse button is downed!');
  };

  render() {
    return <ImageEditor onMousedown={this.handleMousedown} />;
  }
}
```
```

--------------------------------

### Initialize Image Editor with Basic Options (JavaScript)

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Initialize the ImageEditor class with a specific element and basic configuration for maximum dimensions and selection style. Requires 'tui-image-editor' npm package.

```javascript
const ImageEditor = require('tui-image-editor');
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70,
  },
});
```

--------------------------------

### Load Dependencies for Image Editor

Source: https://github.com/nhn/tui.image-editor/wiki/Basic-Tutorial

Include these script tags to load the necessary libraries and the image editor itself. Ensure they are loaded in the correct order.

```html
<script src="libs/code-snippet.min.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/fabric.min.js"></script>
<script src="js/image-editor.js"></script>
```

--------------------------------

### Initialize Image Editor with UI

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/examples/example01-includeUi.html

Initializes the TUI Image Editor with UI components. Load an image, set a theme, specify the initial menu, and configure the menu bar position. Resize the editor on window resize.

```javascript
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage2.png',
      name: 'SampleImage',
    },
    theme: blackTheme, // or whiteTheme
    initMenu: 'filter',
    menuBarPosition: 'bottom',
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  usageStatistics: false,
});
window.onresize = function () {
  imageEditor.ui.resizeEditor();
};
```

--------------------------------

### Initialize and Load Image in TUI Image Editor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

Instantiate the Image Editor with a canvas selector and dimensions, then load an image from a URL.

```javascript
// Create image editor
var imageEditor = new tui.component.ImageEditor('#my-image-editor canvas', {
  cssMaxWidth: 1000, // Component default value: 1000
  cssMaxHeight: 800, // Component default value: 800
});

// Load image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image');
```

--------------------------------

### Initialize Image Editor with Basic Options (TypeScript)

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Initialize the ImageEditor class using TypeScript's module import syntax. Requires 'tui-image-editor' and 'file-saver' npm packages.

```typescript
import ImageEditor = require('tui-image-editor');
const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver

const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70,
  },
});
```

--------------------------------

### Initialize and Load Image with TUI Image Editor

Source: https://github.com/nhn/tui.image-editor/wiki/Basic-Tutorial

Instantiate the ImageEditor with a canvas selector and CSS dimensions. Then, load an image from a URL.

```javascript
// Create image editor
var imageEditor = new tui.ImageEditor('#my-image-editor canvas', {
    cssMaxWidth: 1000, // Component default value: 1000
    cssMaxHeight: 800  // Component default value: 800
});

// Load image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')
```

--------------------------------

### Create Image Editor with Mobile Optimization

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version.md

Instantiate the Image Editor with options optimized for mobile devices. `cssMaxWidth` and `cssMaxHeight` should dynamically adapt to the device's screen dimensions. `selectionStyle` options are crucial for usability on touch interfaces.

```javascript
var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', {
  cssMaxWidth: document.documentElement.clientWidth,
  cssMaxHeight: document.documentElement.clientHeight,
  selectionStyle: {
    cornerSize: 50,
    rotatingPointOffset: 100,
  },
});
```

--------------------------------

### Initialize Image Editor with UI and Customizations (JavaScript)

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Initialize the ImageEditor class with a specific element, including UI elements, custom locale, theme, and initial menu. Requires 'tui-image-editor' and 'file-saver' npm packages.

```javascript
const ImageEditor = require('tui-image-editor');
const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver
const blackTheme = require('./js/theme/black-theme.js');
const locale_ru_RU = {
  // override default English locale to your custom
  Crop: 'Обзрезать',
  'Delete-all': 'Удалить всё',
  // etc...
};
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage.jpg',
      name: 'SampleImage',
    },
    locale: locale_ru_RU,
    theme: blackTheme, // or whiteTheme
    initMenu: 'filter',
    menuBarPosition: 'bottom',
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70,
  },
});
```

--------------------------------

### Initialize Image Editor with Custom Localization

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

This snippet demonstrates how to initialize the Image Editor and override default English inscriptions with custom Russian ones. Ensure you have the necessary locale object defined.

```javascript
var locale_ru_RU = {
  // override default English locale to your custom
  Crop: 'Обзрезать', // as result default English inscription will be translated into Russian
  'Delete-all': 'Удалить всё',
  // etc...
};
// Image editor
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage.jpg',
      name: 'SampleImage',
    },
    locale: locale_ru_RU, // key-value object with localization
    theme: blackTheme, // or whiteTheme
    initMenu: 'filter',
    menuBarPosition: 'bottom',
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70,
  },
});
```

--------------------------------

### Create and Execute a Command

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Structure.md

Creates an instance of a registered command using the CommandFactory and executes it. The result of the execution is used to push the command onto the undo stack.

```javascript
const command = commandFactory.create('commandName', param1, param2);
command
  .execute(...command.args)
  .then((value) => {
    // push undo stack
    return value;
  })
  .catch((message) => {
    // do something
    return Promise.reject(message);
  });
```

--------------------------------

### Run Tests

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Execute all project tests. New features or functionality changes require corresponding tests.

```bash
npm run test
```

--------------------------------

### Check Code Style

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Run ESLint to check code style and ensure it adheres to project standards.

```bash
npm run eslint
```

--------------------------------

### Command Class Constructor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Structure.md

The constructor for the Command class, initializing properties like name, arguments, execute and undo functions, and callbacks.

```javascript
class Command {
  constructor(actions, args) {
    this.name = actions.name;
    this.args = args;
    this.execute = actions.execute;
    this.undo = actions.undo;
    this.executeCallback = actions.executeCallback || null;
    this.undoCallback = actions.undoCallback || null;
    this.undoData = {};
  }
}
```

--------------------------------

### Load ImageEditor using Namespace

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Import the ImageEditor component using its namespace when not using modules.

```javascript
const ImageEditor = toastui.ImageEditor;
```

--------------------------------

### Importing Toast UI Image Editor (ES Module)

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Import the necessary CSS and the ImageEditor component when using ECMAScript modules.

```javascript
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';
```

--------------------------------

### Define and Register a Command

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Structure.md

Defines a command with execute and undo functions and registers it with the CommandFactory. Ensure the command is registered when imported.

```javascript
import commandFactory from '../factory/command';
const command = {
  name: 'commandName',
  execute(graphics, ...args) {},
  undo(graphics, ...args) {},
};

CommandFactory.register(command);
module.export = command;
```

--------------------------------

### Locate SVG Icon Files for Image Editor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

Instructions on how to find or access the SVG icon files used by the TUI Image Editor, either locally within the project or via CDN.

```bash
// or use cdn (https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg)
$ cd node_modules/tui-image-editor/dist/svg
```

--------------------------------

### Configure Image Editor UI with Custom SVG Paths

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

Set custom SVG file paths and names for menu and submenu icons to completely reconfigure their appearance. Note that colors must be modified within the SVG files themselves.

```javascript
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         ...,
         theme: {
            'menu.normalIcon.path': '../dist/svg/icon-d.svg',
            'menu.normalIcon.name': 'icon-d',
            'menu.activeIcon.path': '../dist/svg/icon-b.svg',
            'menu.activeIcon.name': 'icon-b',
            'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
            'menu.disabledIcon.name': 'icon-a',
            'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
            'menu.hoverIcon.name': 'icon-c',
            'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
            'submenu.normalIcon.name': 'icon-a',
            'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
            'submenu.activeIcon.name': 'icon-c'
         },
         ...
     }
 });
```

--------------------------------

### Add Image Editor Markup

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version.md

Add this markup to the body tag to create the image editor container. This is the same as the PC version.

```html
<div class="tui-image-editor">
  <canvas></canvas>
</div>
```

--------------------------------

### Include ImageEditor via CDN

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

Include the TOAST UI Image Editor stylesheet and script files in your HTML using CDN links. Replace 'latest' with a specific version tag if needed.

```html
<link
  rel="stylesheet"
  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
/>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
```

--------------------------------

### Use Vue Wrapper Component

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Import and use the Vue wrapper component directly if only the component is needed.

```javascript
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue';
```

--------------------------------

### Lint and Test

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Ensure code passes linting and all tests before making a pull request.

```bash
npm run lint
npm run test
```

--------------------------------

### Load ImageEditor using CommonJS

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Import the ImageEditor component using CommonJS require syntax.

```javascript
// commonjs require
const { ImageEditor } = require('@toast-ui/vue-image-editor');
```

--------------------------------

### Add Mobile UI CSS File

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version.md

Link this CSS file to configure the UI specifically for the mobile version of the image editor. This file is used in the sample page and can be customized.

```html
<link type="text/css" href="css/service-mobile.css" rel="stylesheet" />
```

--------------------------------

### Configuring Image Editor Props

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Configure the Image Editor component using props, including UI settings, theme, and dimensions. All options from the core TOAST UI Image Editor are supported.

```javascript
const myTheme = {
  // Theme object to extends default dark theme.
};

const MyComponent = () => (
  <ImageEditor
    includeUI={{
      loadImage: {
        path: 'img/sampleImage.jpg',
        name: 'SampleImage',
      },
      theme: myTheme,
      menu: ['shape', 'filter'],
      initMenu: 'filter',
      uiSize: {
        width: '1000px',
        height: '700px',
      },
      menuBarPosition: 'bottom',
    }}
    cssMaxHeight={500}
    cssMaxWidth={700}
    selectionStyle={{
      cornerSize: 20,
      rotatingPointOffset: 70,
    }}
    usageStatistics={true}
  />
);
```

--------------------------------

### Importing Toast UI Image Editor (CommonJS)

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Import the necessary CSS and the ImageEditor component when using CommonJS modules.

```javascript
require('tui-image-editor/dist/tui-image-editor.css');
const ImageEditor = require('@toast-ui/react-image-editor');
```

--------------------------------

### Standard Commit Message Format

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md

Follow this format for all commit messages on the main branch. Ensure no line exceeds 100 characters.

```text
<Type>: short description (fix #1234)

Longer description here if necessary

BREAKING CHANGE: only contain breaking change
```

--------------------------------

### Load ImageEditor using ES Modules

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Import the ImageEditor component using ES modules syntax.

```javascript
// es modules
import { ImageEditor } from '@toast-ui/vue-image-editor';
```

--------------------------------

### Accessing Instance Methods

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

You can access the underlying TOAST UI Image Editor instance methods by creating a ref to the ImageEditor wrapper component and calling `getInstance()` on its current instance.

```APIDOC
## Accessing Instance Methods

### Description
To utilize the instance methods provided by the TOAST UI Image Editor, you need to obtain a reference to the editor's instance. This is achieved by creating a ref for the `ImageEditor` wrapper component in React and then calling the `getInstance()` method on the current ref object.

### Method
- **getInstance()**: Returns the instance of the TOAST UI Image Editor.

### Usage
1. Create a ref using `React.createRef()`.
2. Assign the ref to the `ImageEditor` component.
3. In an event handler or lifecycle method, access the instance via `yourRef.current.getInstance()`.
4. Call any available instance methods on the obtained instance (e.g., `editorInstance.flipX()`).

### Request Example
```javascript
const imageEditorOptions = {
  // sort of option properties.
};

class MyComponent extends React.Component {
  editorRef = React.createRef();

  handleClickButton = () => {
    const editorInstance = this.editorRef.current.getInstance();

    editorInstance.flipX(); // Example: Call the flipX instance method
  };

  render() {
    return (
      <>
        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
        <button onClick={this.handleClickButton}>Flip image by X Axis!</button>
      </>
    );
  }
}
```
```

--------------------------------

### Input for File Upload

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version-Image.md

Use this HTML input element to allow users to select image files from their device. Ensure the 'accept' attribute is set to 'image/*' to filter for image types.

```html
<input type="file" accept="image/*" id="input-image-file" />
```

--------------------------------

### Access ImageEditor Methods via Ref

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Assign a ref to the tui-image-editor component to access its methods through $refs.

```html
<tui-image-editor ref="tuiImageEditor" :options="options"></tui-image-editor>
```

--------------------------------

### Configure Image Editor UI with Default SVG Colors

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md

Customize the colors of menu and submenu icons using the built-in SVG icons. This method allows easy color changes but not shape modifications.

```javascript
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
     includeUI: {
         ...,
         theme: {
            'menu.normalIcon.color': '#8a8a8a',
            'menu.activeIcon.color': '#555555',
            'menu.disabledIcon.color': '#434343',
            'menu.hoverIcon.color': '#e9e9e9',
            'submenu.normalIcon.color': '#8a8a8a',
            'submenu.activeIcon.color': '#e9e9e9',
         },
         ...
     }
 });
```

--------------------------------

### Set Viewport Meta Tag

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version.md

Add this meta tag to the head section to configure the viewport for mobile devices, ensuring proper scaling and user scalability.

```html
<meta name="viewport" content="width=device-width, user-scalable=no" />
```

--------------------------------

### Revert Commit Message Format

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md

Use this format when reverting a previous commit. Include the short and full hash of the commit being reverted.

```text
revert: commit <short-hash>

This reverts commit <full-hash>
More description if needed
```

--------------------------------

### Handling Image Editor Events

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Attach event listeners to the Image Editor component using `on[EventName]` props, like `onMousedown` for handling mouse down events.

```javascript
class MyComponent extends React.Component {
  handleMousedown = () => {
    console.log('Mouse button is downed!');
  };

  render() {
    return <ImageEditor onMousedown={this.handleMousedown} />;
  }
}
```

--------------------------------

### Customize Selection Style Options

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version.md

Further customize the appearance and behavior of object selection on mobile. These options are compatible with `fabric.js` customization.

```javascript
var options = {
  //...
  selectionStyle: {
    borderColor: 'red', // Selection line color
    cornerColor: 'green', // Selection corner color
    cornerSize: 6, // Selection corner size
    rotatingPointOffset: 100, // Distance from selection area to rotation corner
    transparentCorners: false, // Selection corner Transparency
  },
};
```

--------------------------------

### Invoke ImageEditor Methods

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Use the invoke method via the ref to call methods of the underlying tui.ImageEditor instance.

```javascript
const drawingMode = this.$refs.tuiImageEditor.invoke('getDrawingMode');

this.$refs.tuiImageEditor.invoke('loadImageFromURL', './sampleImage.png', 'My sample image');

this.$refs.tuiImageEditor.invoke('startDrawingMode', 'FREE_DRAWING', {
    width: 10,
    color: 'rgba(255, 0, 0, 0.5)',
});
```

--------------------------------

### Load ImageEditor using Script Tag

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Include the ImageEditor JavaScript file in your HTML using a script tag.

```html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="path/to/toastui-vue-image-editor.js"></script>
```

--------------------------------

### Handle High-Resolution Image Uploads

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version-Image.md

This JavaScript code checks the resolution of an uploaded image before loading it into the editor. It prevents images exceeding a predefined maximum resolution to ensure usability, especially for actions like cropping or drawing. It requires the 'supportingFileAPI' variable to be defined and accessible.

```javascript
var MAX_RESOLUTION = 3264 * 2448;

$("#input-image-file").on('change', function (event) {
  var file;
  var img;
  var resolution;

  if (!supportingFileAPI) {
    alert('This browser does not support file-api');
  }

  file = event.target.files[0];

  if (file) {
    img = new Image();

    img.onload = function () {
      resolution = this.width * this.height;

      if (resolution <= MAX_RESOLUTION) {
        imageEditor.loadImageFromFile(file);
      } else {
        alert("Loaded image's resolution is too large!\nRecommended resolution is 3264 * 2448!");
      }

      URL.revokeObjectURL(file);
    };

    img.src = URL.createObjectURL(file);
  }
});
```

--------------------------------

### HTML Markup for Image Editor

Source: https://github.com/nhn/tui.image-editor/wiki/Basic-Tutorial

A division element with a canvas is required. The division element must have a defined CSS height for the image editor to render correctly.

```html
<!-- This division element needs the css height -->
<div id="my-image-editor" style="height: 800px">
    <canvas></canvas>
</div>
```

--------------------------------

### Pull Request Title Format

Source: https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md

Follow the specified format for pull request titles, including type and a short description. Use present tense for the description.

```text
<Type>: Short Description (fix #111)
<Type>: Short Description (fix #123, #111, #122)
<Type>: Short Description (ref #111)
```

--------------------------------

### Handle ImageEditor Events

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Listen for and handle events emitted by the tui-image-editor component in your Vue methods.

```html
<tui-image-editor ... @addText="onAddText" @objectMoved="onObjectMoved"> </tui-image-editor>
```

--------------------------------

### Define Event Handlers for ImageEditor

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Implement methods in your Vue component to handle events from the tui-image-editor.

```javascript
...
methods: {
    onAddText(pos) {
        ...
    },
    onObjectMoved(props) {
        ...
    }
}
...
```

--------------------------------

### Implement ImageEditor in Vue Component

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Register the tui-image-editor component and configure its props within a Vue component.

```javascript
import 'tui-color-picker/dist/tui-color-picker.css';
import 'tui-image-editor/dist/tui-image-editor.css';
import { ImageEditor } from '@toast-ui/vue-image-editor';

export default {
  components: {
    'tui-image-editor': ImageEditor,
  },
  data() {
    return {
      useDefaultUI: true,
      options: {
        // for tui-image-editor component's "options" prop
        cssMaxWidth: 700,
        cssMaxHeight: 500,
      },
    };
  },
};
```

--------------------------------

### Add and Change Shape with Object ID

Source: https://github.com/nhn/tui.image-editor/wiki/ImageEditor-2.0.0-Migration-guide

Add a shape and then modify its properties using the returned object ID. This demonstrates the use of Promise-based APIs for asynchronous operations like adding and changing shapes.

```javascript
imageEditor.addShape('circle', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(function(props) {
    console.log(props.id);

    imageEditor.changeShape(props.id, { // change circle
        fill: '#FFFF00',
        strokeWidth: 10
    });
});
```

--------------------------------

### Object Activation Event Listener

Source: https://github.com/nhn/tui.image-editor/wiki/ImageEditor-2.0.0-Migration-guide

Listen for the `objectActivated` event to receive properties of the activated object, including its type and unique ID. This is useful for manipulating objects, especially non-selected ones.

```javascript
/*
{
    id: number
    type: type
    left: number,
    top: number,
    width: number,
    fill: string
    stroke: string
    strokeWidth: number
    opacity: number,

    // text object
    text: string,
    fontFamily: string,
    fontSize: number,
    fontStyle: string,
    fontWeight: string,
    textAlign: string,
    textDecoration: string
}
*/
imageEditor.on('objectActivated', function(props) {
    console.log(props);
    console.log(props.type);
    console.log(props.id);
});
```

--------------------------------

### Handle Object Activation Events in ImageEditor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/ImageEditor-2.0.0-Migration-guide.md

Listen for the 'objectActivated' event to receive properties of the activated object, including its type and unique ID. This is useful for manipulating non-selected objects.

```javascript
/*
{
    id: number
    type: type
    left: number,
    top: number,
    width: number,
    fill: string
    stroke: string
    strokeWidth: number
    opacity: number,

    // text object
    text: string,
    fontFamily: string,
    fontSize: number,
    fontStyle: string,
    fontWeight: string,
    textAlign: string,
    textDecoration: string
}
*/
imageEditor.on('objectActivated', function (props) {
  console.log(props);
  console.log(props.type);
  console.log(props.id);
});
```

--------------------------------

### Send Image Data to Server via Ajax

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Apply-Mobile-Version-Image.md

Sends the base64 encoded image data to a specified server URL using an Ajax POST request. This is typically used to save the edited image.

```javascript
$.ajax({
  type: 'POST',
  url: serverUrl,
  data: {
    imgBase64: dataURL, // Data from Step 1.
  },
}).done(function () {
  console.log('saved!');
});
```

--------------------------------

### Adjust Object Event Listener

Source: https://github.com/nhn/tui.image-editor/wiki/v1.1.0-Features-Reference

Use the 'adjustObject' event to detect when a text object is moved or resized. This allows for dynamic updates to the text palette's state.

```javascript
imageEditor.on('adjustObject', function(obj) {
  console.log(obj.type); // Whether the selected object's type is "text" or others - control the the text palette's view state
});
```

--------------------------------

### ImageEditor Component Props

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

The React ImageEditor component supports all options of the TOAST UI Image Editor as props. This includes configuration for UI, image loading, theming, menu options, and styling.

```APIDOC
## ImageEditor Component Props

### Description
The `ImageEditor` component for React accepts props that directly correspond to the configuration options available in the core TOAST UI Image Editor. This allows for extensive customization of the editor's appearance and behavior within a React application.

### Props

- **includeUI** (object) - Required - Configuration for the UI, including `loadImage`, `theme`, `menu`, `initMenu`, `uiSize`, and `menuBarPosition`.
  - **loadImage** (object) - Optional - Specifies the initial image to load.
    - **path** (string) - Required - The path to the image file.
    - **name** (string) - Required - The name of the image file.
  - **theme** (object) - Optional - A theme object to customize the editor's appearance. Can extend the default dark theme or be a custom white theme.
  - **menu** (array) - Optional - An array of strings specifying which menu items to display (e.g., 'shape', 'filter').
  - **initMenu** (string) - Optional - The menu item to be active initially (e.g., 'filter').
  - **uiSize** (object) - Optional - Defines the width and height of the UI.
    - **width** (string) - Required - The width of the UI (e.g., '1000px').
    - **height** (string) - Required - The height of the UI (e.g., '700px').
  - **menuBarPosition** (string) - Optional - The position of the menu bar (e.g., 'bottom').
- **cssMaxHeight** (number) - Optional - Maximum height for the editor's CSS.
- **cssMaxWidth** (number) - Optional - Maximum width for the editor's CSS.
- **selectionStyle** (object) - Optional - Styles for the image selection.
  - **cornerSize** (number) - Optional - Size of the selection corners.
  - **rotatingPointOffset** (number) - Optional - Offset for the rotating point.
- **usageStatistics** (boolean) - Optional - Whether to enable usage statistics.

### Request Example
```javascript
const myTheme = {
  // Theme object to extends default dark theme.
};

const MyComponent = () => (
  <ImageEditor
    includeUI={{
      loadImage: {
        path: 'img/sampleImage.jpg',
        name: 'SampleImage',
      },
      theme: myTheme,
      menu: ['shape', 'filter'],
      initMenu: 'filter',
      uiSize: {
        width: '1000px',
        height: '700px',
      },
      menuBarPosition: 'bottom',
    }}
    cssMaxHeight={500}
    cssMaxWidth={700}
    selectionStyle={{
      cornerSize: 20,
      rotatingPointOffset: 70,
    }}
    usageStatistics={true}
  />
);
```
```

--------------------------------

### Implement ImageEditor in Vue Template

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

Use the tui-image-editor component in your Vue template, passing required props.

```html
<tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>
```

--------------------------------

### Add and Change Shape Properties in ImageEditor

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/ImageEditor-2.0.0-Migration-guide.md

Use `addShape` to create a new shape and then `changeShape` with the object's ID to modify its properties. The `then` block provides the ID of the newly created shape.

```javascript
imageEditor
  .addShape('circle', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false,
  })
  .then(function (props) {
    console.log(props.id);

    imageEditor.changeShape(props.id, {
      // change circle
      fill: '#FFFF00',
      strokeWidth: 10,
    });
  });
```

--------------------------------

### Handle Object Adjustment Event

Source: https://github.com/nhn/tui.image-editor/blob/master/docs/Reference.md

Use the 'adjustObject' event to detect when a text object is moved or resized on the canvas. This can be used to update the state of a text palette.

```javascript
imageEditor.on('adjustObject', function (obj) {
  console.log(obj.type); // Whether the selected object's type is "text" or others - control the the text palette's view state
});
```

--------------------------------

### Disable Usage Statistics with Options

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/image-editor/README.md

To disable Google Analytics for usage statistics, set the `usageStatistics` option to `false` when creating a new ImageEditor instance.

```javascript
const options = {
  //...
  usageStatistics: false
};

const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);
```

--------------------------------

### Disable Usage Statistics Globally

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

Alternatively, you can disable usage statistics globally by including `tui-code-snippet.js` (v1.4.0 or later) and setting `tui.usageStatistics` to `false`.

```javascript
tui.usageStatistics = false;
```

--------------------------------

### Disable Usage Statistics with Props

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/react-image-editor/README.md

To disable Google Analytics for collecting usage statistics, use the `usageStatistics` prop and set it to `false` when rendering the ImageEditor component.

```jsx
<ImageEditor usageStatistics={false} />
```

--------------------------------

### Disable Usage Statistics in Image Editor

Source: https://github.com/nhn/tui.image-editor/blob/master/apps/vue-image-editor/README.md

To disable Google Analytics for usage statistics, set `usageStatistics` to `false` in the options when creating the Image Editor instance. Alternatively, if `tui-code-snippet` v1.4.0 or later is included, you can set `tui.usageStatistics` to `false` globally.

```javascript
const options = {
    ...
    usageStatistics: false
}

const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);
```

```javascript
tui.usageStatistics = false;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.