setting react ui

-{
-  "presets": ["es2015"],
-  "plugins": [
-    ["transform-es2015-destructuring", { "loose": true }],
-    ["transform-es2015-for-of", { "loose": true }],
-    ["transform-es2015-spread", { "loose": true }]
-  ]
-}

-[*]
-charset = utf-8
-indent_style = space
-indent_size = 4
-end_of_line = lf
\ No newline at end of file

-# Ignore polyfill
-src/js/polyfill.js

 module.exports = {
-  extends: ['tui/es6', 'plugin:prettier/recommended'],
-  plugins: ['prettier'],
-  env: {
-    browser: true,
-    amd: true,
-    node: true,
-    jasmine: true,
-    jquery: true,
-    es6: true,
-  },
-  globals: {
-    fabric: true,
-    tui: true,
-    loadFixtures: true,
-  },
+  parser: 'babel-eslint',
   parserOptions: {
+    ecmaVersion: 7,
     sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
   },
+  extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  plugins: ['react', 'prettier'],
   rules: {
-    'prefer-destructuring': [
-      'error',
-      {
-        VariableDeclarator: { array: true, object: true },
-        AssignmentExpression: { array: false, object: false },
-      },
-    ],
-    'prettier/prettier': 'error',
+    'react/prop-types': 0
   },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
 };
\ No newline at end of file

-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# Deployed apps should consider commenting this line out:
-# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
 node_modules
-
-# Bower Components
-bower_components
-lib
-
-# IDEA
-.idea
-*.iml
-
-# Window
+.DS_Store
 Thumbs.db
 Desktop.ini
-
-# MAC
-.DS_Store
-
-# SVN
-.svn
-
-# eclipse
-.project
-.metadata
-
-# etc
-temp
-doc
-demo
-report
-*.vim
-test.html
-
-# Compiled files
 dist
+.idea
+storybook-static
\ No newline at end of file

 {
-  "singleQuote": true,
   "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
-  "quoteProps": "as-needed",
-  "trailingComma": "es5",
-  "arrowParens": "always",
-  "endOfLine": "lf",
-  "bracketSpacing": true,
-  "proseWrap": "preserve"
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "always"
 }
\ No newline at end of file

+import {configure} from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

+module.exports = {
+  plugins: [],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+};

@@ -14,21 +14,21 @@ religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
+* The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities

@@ -5,103 +5,87 @@ First off, thanks for taking the time to contribute! 🎉 😘 ✨
 The following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
 
 ## Reporting Bugs
-
 Bugs are tracked as GitHub issues. Search the list and try reproduce on [demo][demo] before you create an issue. When you create an issue, please provide the following information by filling in the template.
 
 Explain the problem and include additional details to help maintainers reproduce the problem:
 
-- **Use a clear and descriptive title** for the issue to identify the problem.
-- **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
-- **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
-- **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
-- **Explain which behavior you expected to see instead and why.**
-- **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
+* **Use a clear and descriptive title** for the issue to identify the problem.
+* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
+* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
+* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
+* **Explain which behavior you expected to see instead and why.**
+* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
 
 ## Suggesting Enhancements
-
 In case you want to suggest for TOAST UI ImageEditor, please follow this guideline to help maintainers and the community understand your suggestion.
-Before creating suggestions, please check [issue list](../../labels/enhancement) if there's already a request.
+Before creating suggestions, please check [issue list](../../labels/feature%20request) if there's already a request.
 
 Create an issue and provide the following information:
 
-- **Use a clear and descriptive title** for the issue to identify the suggestion.
-- **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
-- **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
-- **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI ImageEditor which the suggestion is related to.
-- **Explain why this enhancement would be useful** to most TOAST UI users.
-- **List some other image editors or applications where this enhancement exists.**
+* **Use a clear and descriptive title** for the issue to identify the suggestion.
+* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
+* **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
+* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI ImageEditor which the suggestion is related to.
+* **Explain why this enhancement would be useful** to most TOAST UI users.
+* **List some other image editors or applications where this enhancement exists.**
 
 ## First Code Contribution
 
 Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues:
 
-- **document issues**: issues which should be reviewed or improved.
-- **good first issues**: issues which should only require a few lines of code, and a test or two.
-- **help wanted issues**: issues which should be a bit more involved than beginner issues.
+* **document issues**: issues which should be reviewed or improved.
+* **good first issues**: issues which should only require a few lines of code, and a test or two.
+* **help wanted issues**: issues which should be a bit more involved than beginner issues.
 
 ## Pull Requests
 
 ### Development WorkFlow
-
 - Set up your development environment
 - Make change from a right branch
 - Be sure the code passes `npm run lint`, `npm run test`
 - Make a pull request
 
 ### Development environment
-
 - Prepare your machine node and it's packages installed.
 - Checkout our repository
 - Install dependencies by `npm install && bower install`
 - Start webpack-dev-server by `npm run serve`
 
 ### Make changes
-
 #### Checkout a branch
-
 - **develop**: PR base branch. merge features, updates for next minor or major release
 - **master**: bug fix or document update for next patch release. develop branch will rebase every time master branch update. so keep code change to a minimum.
 - **production**: lastest release branch with distribution files. never make a PR on this
 - **gh-pages**: API docs, examples and demo
 
 #### Check Code Style
-
 Run `npm run eslint` and make sure all the tests pass.
 
 #### Test
-
 Run `npm run test` and verify all the tests pass.
 If you are adding new commands or features, they must include tests.
 If you are changing functionality, update the tests if you need to.
 
 #### Commit
-
 Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).
 
 ### Yes! Pull request
-
 Make your pull request, then describe your changes.
-
 #### Title
-
 Follow other PR title format on below.
-
 ```
     <Type>: Short Description (fix #111)
     <Type>: Short Description (fix #123, #111, #122)
     <Type>: Short Description (ref #111)
 ```
-
-- capitalize first letter of Type
-- use present tense: 'change' not 'changed' or 'changes'
+* capitalize first letter of Type
+* use present tense: 'change' not 'changed' or 'changes'
 
 #### Description
-
 If it has related to issues, add links to the issues(like `#123`) in the description.
 Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case.
 
 ## Code of Conduct
-
 This project and everyone participating in it is governed by the [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@nhn.com.
 
 > This Guide is base on [atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests)

-<!--
-Thank you for your contribution.
-
-When it comes to write an issue, please, use the template below.
-To use the template is mandatory for submit new issue and we won't reply the issue that without the template.
-
-And you can write template's contents in Korean also.
--->
-
-<!-- TEMPLATE -->
-
-## Version
-
-<!-- Write the version of the grid you are currently using. -->
-
-## Development Environment
-
-<!-- Write the browser type, OS and so on -->
-
-## Current Behavior
-
-<!-- Write a description of the current operation. You can add example code, 'CodePen' or 'jsfiddle' links. -->
-
-```js
-// Write example code
-```
-
-## Expected Behavior
-
-<!-- Write a description of the future action. -->

-
-The MIT License
+MIT License
 
 Copyright (c) 2019 NHN Corp.
 

+module.exports = (api) => {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: false,
+          useBuiltIns: 'entry'
+        }
+      ],
+      '@babel/preset-react'
+    ],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-object-rest-spread'
+    ]
+  };
+};
\ No newline at end of file

-{
-  "name": "tui-image-editor",
-  "authors": ["NHN FE Dev Lab <dl_javascript@nhn.com>"],
-  "license": "MIT",
-  "main": ["dist/tui-image-editor.js"],
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests",
-    "src",
-    "server",
-    "data.js",
-    "Gruntfile.js",
-    "gulpfile.js",
-    "karma.*.js",
-    "conf.json",
-    "package.json",
-    ".gitignore",
-    "samples",
-    "index.js",
-    "jsdoc.conf.json",
-    "webpack.*.js"
-  ],
-  "dependencies": {
-    "fabric": "4.2.0",
-    "tui-code-snippet": "^1.5.0",
-    "tui-color-picker": "^2.2.0"
-  },
-  "devDependencies": {
-    "tui-component-colorpicker": "~1.0.1",
-    "filesaver": "*"
-  },
-  "resolutions": {
-    "tui-code-snippet": "^1.5.0",
-    "tui-color-picker": "^2.2.0"
-  }
-}

-const fs = require('fs');
-const path = require('path');
-const config = require(path.resolve(process.cwd(), 'tuidoc.config.json'));
-const examples = config.examples || {};
-const { filePath, globalErrorLogVariable } = examples;
-
-/**
- * Get Examples Url
- */
-function getTestUrls() {
-  if (!filePath) {
-    throw Error('not exist examples path at tuidoc.config.json');
-  }
-
-  const urlPrefix = 'http://nhn.github.io/tui.image-editor/latest';
-
-  const testUrls = fs.readdirSync(filePath).reduce((urls, fileName) => {
-    if (/html$/.test(fileName)) {
-      urls.push(`${urlPrefix}/${filePath}/${fileName}`);
-    }
-
-    return urls;
-  }, []);
-
-  fs.writeFileSync('url.txt', testUrls.join(', '));
-}
-
-function getGlobalVariable() {
-  if (!globalErrorLogVariable) {
-    throw Error('not exist examples path at tuidoc.config.json');
-  }
-
-  fs.writeFileSync('errorVariable.txt', globalErrorLogVariable);
-}
-
-getTestUrls();
-getGlobalVariable();

+[1214/032025.223:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)

-.border {
-  border: 1px solid black;
-}
-.body-container {
-  width: 1000px;
-}
-.tui-image-editor-controls {
-  min-height: 250px;
-}
-.menu {
-  padding: 0;
-  margin-bottom: 5px;
-  text-align: center;
-  color: #544b61;
-  font-weight: 400;
-  list-style-type: none;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-.logo {
-  margin: 0 auto;
-  width: 300px;
-  vertical-align: middle;
-}
-.header .name {
-  padding: 10px;
-  line-height: 50px;
-  font-size: 30px;
-  font-weight: 100;
-  vertical-align: middle;
-}
-.header .menu {
-  display: inline-block;
-}
-.menu-item {
-  padding: 10px;
-  display: inline-block;
-  cursor: pointer;
-  vertical-align: middle;
-}
-.menu-item a {
-  text-decoration: none;
-}
-.menu-item.no-pointer {
-  cursor: default;
-}
-.menu-item.active,
-.menu-item:hover {
-  background-color: #f3f3f3;
-}
-.menu-item.disabled {
-  cursor: default;
-  color: #bfbebe;
-}
-.align-left-top {
-  text-align: left;
-  vertical-align: top;
-}
-.range-narrow {
-  width: 80px;
-}
-.sub-menu-container {
-  font-size: 14px;
-  margin-bottom: 1em;
-  display: none;
-}
-.tui-image-editor {
-  height: 500px;
-}
-.tui-image-editor-canvas-container {
-  margin: 0 auto;
-  top: 50%;
-  transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  -moz-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-  border: 1px dashed black;
-  overflow: hidden;
-}
-.tui-colorpicker-container {
-  margin: 5px auto 0;
-}
-.tui-colorpicker-palette-toggle-slider {
-  display: none;
-}
-.input-wrapper {
-  position: relative;
-}
-.input-wrapper input {
-  cursor: pointer;
-  position: absolute;
-  font-size: 999px;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.btn-text-style {
-  padding: 5px;
-  margin: 3px 1px;
-  border: 1px dashed #bfbebe;
-  outline: 0;
-  background-color: #eee;
-  cursor: pointer;
-}
-.icon-text {
-  font-size: 20px;
-}
-.select-line-type {
-  outline: 0;
-  vertical-align: middle;
-}
-#tui-color-picker {
-  display: inline-block;
-  vertical-align: middle;
-}
-#tui-text-palette {
-  display: none;
-  position: absolute;
-  padding: 10px;
-  border: 1px solid #bfbebe;
-  background-color: #fff;
-  z-index: 9999;
-}

-html,
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden;
-  background-color: #383838;
-  font-family: Sans-Serif;
-}
-ul,
-li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-input[type='button'],
-button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-color: #fff;
-}
-input[type='file'] {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-.header {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  background-color: #fff;
-  text-align: center;
-  z-index: 9999;
-}
-.header .logo {
-  margin: 10px 5px;
-  width: 180px;
-  vertical-align: middle;
-}
-.header .name {
-  font-size: 16px;
-  font-weight: bold;
-}
-.header .menu {
-  padding: 10px;
-  background-color: #000;
-}
-.header .menu input {
-  opacity: 0;
-}
-.header .menu img {
-  width: 20px;
-  height: 20px;
-  vertical-align: middle;
-}
-.header .button {
-  position: relative;
-  display: inline-block;
-  margin: 0 5px;
-  padding: 0;
-  border-radius: 5px 5px;
-  width: 30px;
-  height: 30px;
-  border: 0;
-  background-color: #fff;
-  vertical-align: middle;
-}
-.header .button.disabled img {
-  opacity: 0.5;
-}
-.tui-image-editor {
-  height: 100%;
-}
-.tui-image-editor-canvas-container {
-  margin: 0 auto;
-  top: 50%;
-  transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  -moz-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-  overflow: hidden;
-}
-.tui-image-editor-controls {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  background-color: #fff;
-}
-.tui-image-editor-controls .scrollable {
-  display: inline-block;
-  overflow-x: auto;
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;
-  font-size: 0;
-  background-color: #000;
-  vertical-align: middle;
-}
-.tui-image-editor-controls .no-scrollable {
-  overflow-x: hidden;
-}
-.tui-image-editor-controls .menu-item {
-  display: inline-block;
-  height: 80px;
-  border-right: 1px solid #383838;
-  background-color: #ddd;
-  vertical-align: middle;
-}
-.tui-image-editor-controls .menu-button {
-  width: 80px;
-  height: 80px;
-  border: none;
-  vertical-align: middle;
-  background-color: #000;
-  color: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  outline: 0;
-}
-.tui-image-editor-controls .submenu-button {
-  width: 80px;
-  height: 80px;
-  border: none;
-  background-color: #ddd;
-  vertical-align: middle;
-}
-.tui-image-editor-controls .hiddenmenu-button {
-  margin: 0 10px;
-  padding: 5px;
-  border: none;
-  color: #fff;
-  background-color: rgba(255, 255, 255, 0);
-}
-.tui-image-editor-controls .submenu {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  font-size: 0;
-}
-.tui-image-editor-controls .submenu.show {
-  display: block;
-}
-.tui-image-editor-controls .submenu .menu-item:last-child {
-  margin-right: 50px;
-}
-.tui-image-editor-controls .hiddenmenu {
-  position: absolute;
-  display: none;
-  padding: 40px;
-  width: 100%;
-  left: 0;
-  bottom: 80px;
-  background-color: rgba(0, 0, 0, 0.7);
-  text-align: center;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  z-index: 9999;
-}
-.tui-image-editor-controls .hiddenmenu.show {
-  display: block;
-}
-.tui-image-editor-controls .hiddenmenu .top {
-  font-size: 12px;
-  color: #fff;
-  margin-bottom: 20px;
-}
-.tui-image-editor-controls .btn-prev {
-  display: inline-block;
-  width: 30px;
-  height: 80px;
-  background-color: #000;
-  color: #fff;
-  border: none;
-  vertical-align: middle;
-}
-.tui-image-editor-controls .tui-colorpicker-container {
-  display: inline-block;
-}
-.tui-image-editor-controls .msg {
-  position: absolute;
-  margin-left: 50%;
-  padding: 5px 10px;
-  left: -86px;
-  top: -50px;
-  border-radius: 5px 5px;
-  background-color: rgba(255, 255, 255, 0.5);
-  font-size: 12px;
-}
-.tui-image-editor-controls .msg.hide {
-  display: none;
-}

-body {
-  margin: 0;
-  padding: 0;
-}
-
-.code-description {
-  padding: 22px 52px;
-  background-color: rgba(81, 92, 230, 0.1);
-  line-height: 1.4em;
-}
-
-.code-description,
-.code-description a {
-  font-family: Arial;
-  font-size: 14px;
-  color: #515ce6;
-}
-
-.code-html {
-  padding: 20px 52px;
-}

-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>0. Design</title>
-    <link
-      type="text/css"
-      href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
-      rel="stylesheet"
-    />
-    <link type="text/css" href="../dist/tui-image-editor.css" rel="stylesheet" />
-    <style>
-      @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
-      html,
-      body {
-        height: 100%;
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="tui-image-editor-container"></div>
-    <script
-      type="text/javascript"
-      src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
-    ></script>
-    <script type="text/javascript" src="../dist/tui-image-editor.js"></script>
-    <script type="text/javascript" src="./js/theme/white-theme.js"></script>
-    <script type="text/javascript" src="./js/theme/black-theme.js"></script>
-    <script>
-      // Image editor
-      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();
-      };
-    </script>
-  </body>
-</html>

-{
-  "example01-includeUi": {
-    "title": "1. Include ui"
-  },
-  "example02-useApiDirect": {
-    "title": "2. Use api direct (basic)"
-  },
-  "example03-mobile": {
-    "title": "3. Mobile"
-  }
-}

-var blackTheme = {
-  'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
-  'common.bisize.width': '251px',
-  'common.bisize.height': '21px',
-  'common.backgroundImage': 'none',
-  'common.backgroundColor': '#1e1e1e',
-  'common.border': '0px',
-
-  // header
-  'header.backgroundImage': 'none',
-  'header.backgroundColor': 'transparent',
-  'header.border': '0px',
-
-  // load button
-  'loadButton.backgroundColor': '#fff',
-  'loadButton.border': '1px solid #ddd',
-  'loadButton.color': '#222',
-  'loadButton.fontFamily': "'Noto Sans', sans-serif",
-  'loadButton.fontSize': '12px',
-
-  // download button
-  'downloadButton.backgroundColor': '#fdba3b',
-  'downloadButton.border': '1px solid #fdba3b',
-  'downloadButton.color': '#fff',
-  'downloadButton.fontFamily': "'Noto Sans', sans-serif",
-  'downloadButton.fontSize': '12px',
-
-  // main icons
-  'menu.normalIcon.color': '#8a8a8a',
-  'menu.activeIcon.color': '#555555',
-  'menu.disabledIcon.color': '#434343',
-  'menu.hoverIcon.color': '#e9e9e9',
-  'menu.iconSize.width': '24px',
-  'menu.iconSize.height': '24px',
-
-  // submenu icons
-  'submenu.normalIcon.color': '#8a8a8a',
-  'submenu.activeIcon.color': '#e9e9e9',
-  'submenu.iconSize.width': '32px',
-  'submenu.iconSize.height': '32px',
-
-  // submenu primary color
-  'submenu.backgroundColor': '#1e1e1e',
-  'submenu.partition.color': '#3c3c3c',
-
-  // submenu labels
-  'submenu.normalLabel.color': '#8a8a8a',
-  'submenu.normalLabel.fontWeight': 'lighter',
-  'submenu.activeLabel.color': '#fff',
-  'submenu.activeLabel.fontWeight': 'lighter',
-
-  // checkbox style
-  'checkbox.border': '0px',
-  'checkbox.backgroundColor': '#fff',
-
-  // range style
-  'range.pointer.color': '#fff',
-  'range.bar.color': '#666',
-  'range.subbar.color': '#d1d1d1',
-
-  'range.disabledPointer.color': '#414141',
-  'range.disabledBar.color': '#282828',
-  'range.disabledSubbar.color': '#414141',
-
-  'range.value.color': '#fff',
-  'range.value.fontWeight': 'lighter',
-  'range.value.fontSize': '11px',
-  'range.value.border': '1px solid #353535',
-  'range.value.backgroundColor': '#151515',
-  'range.title.color': '#fff',
-  'range.title.fontWeight': 'lighter',
-
-  // colorpicker style
-  'colorpicker.button.border': '1px solid #1e1e1e',
-  'colorpicker.title.color': '#fff',
-};

-var whiteTheme = {
-  'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
-  'common.bisize.width': '251px',
-  'common.bisize.height': '21px',
-  'common.backgroundImage': './img/bg.png',
-  'common.backgroundColor': '#fff',
-  'common.border': '1px solid #c1c1c1',
-
-  // header
-  'header.backgroundImage': 'none',
-  'header.backgroundColor': 'transparent',
-  'header.border': '0px',
-
-  // load button
-  'loadButton.backgroundColor': '#fff',
-  'loadButton.border': '1px solid #ddd',
-  'loadButton.color': '#222',
-  'loadButton.fontFamily': "'Noto Sans', sans-serif",
-  'loadButton.fontSize': '12px',
-
-  // download button
-  'downloadButton.backgroundColor': '#fdba3b',
-  'downloadButton.border': '1px solid #fdba3b',
-  'downloadButton.color': '#fff',
-  'downloadButton.fontFamily': "'Noto Sans', sans-serif",
-  'downloadButton.fontSize': '12px',
-
-  // main icons
-  'menu.normalIcon.color': '#8a8a8a',
-  'menu.activeIcon.color': '#555555',
-  'menu.disabledIcon.color': '#434343',
-  'menu.hoverIcon.color': '#e9e9e9',
-  'menu.iconSize.width': '24px',
-  'menu.iconSize.height': '24px',
-
-  // submenu icons
-  'submenu.normalIcon.color': '#8a8a8a',
-  'submenu.activeIcon.color': '#555555',
-  'submenu.iconSize.width': '32px',
-  'submenu.iconSize.height': '32px',
-
-  // submenu primary color
-  'submenu.backgroundColor': 'transparent',
-  'submenu.partition.color': '#e5e5e5',
-
-  // submenu labels
-  'submenu.normalLabel.color': '#858585',
-  'submenu.normalLabel.fontWeight': 'normal',
-  'submenu.activeLabel.color': '#000',
-  'submenu.activeLabel.fontWeight': 'normal',
-
-  // checkbox style
-  'checkbox.border': '1px solid #ccc',
-  'checkbox.backgroundColor': '#fff',
-
-  // rango style
-  'range.pointer.color': '#333',
-  'range.bar.color': '#ccc',
-  'range.subbar.color': '#606060',
-
-  'range.disabledPointer.color': '#d3d3d3',
-  'range.disabledBar.color': 'rgba(85,85,85,0.06)',
-  'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
-
-  'range.value.color': '#000',
-  'range.value.fontWeight': 'normal',
-  'range.value.fontSize': '11px',
-  'range.value.border': '0',
-  'range.value.backgroundColor': '#f5f5f5',
-  'range.title.color': '#000',
-  'range.title.fontWeight': 'lighter',
-
-  // colorpicker style
-  'colorpicker.button.border': '0px',
-  'colorpicker.title.color': '#000',
-};

-// Type definitions for TOAST UI Image Editor v3.9.0
-// TypeScript Version: 3.2.2
-
-declare namespace tuiImageEditor {
-  type AngleType = number;
-
-  interface IThemeConfig {
-    'common.bi.image'?: string;
-    'common.bisize.width'?: string;
-    'common.bisize.height'?: string;
-    'common.backgroundImage'?: string;
-    'common.backgroundColor'?: string;
-    'common.border'?: string;
-    'header.backgroundImage'?: string;
-    'header.backgroundColor'?: string;
-    'header.border'?: string;
-    'loadButton.backgroundColor'?: string;
-    'loadButton.border'?: string;
-    'loadButton.color'?: string;
-    'loadButton.fontFamily'?: string;
-    'loadButton.fontSize'?: string;
-    'downloadButton.backgroundColor'?: string;
-    'downloadButton.border'?: string;
-    'downloadButton.color'?: string;
-    'downloadButton.fontFamily'?: string;
-    'downloadButton.fontSize'?: string;
-    'menu.normalIcon.path'?: string;
-    'menu.normalIcon.name'?: string;
-    'menu.activeIcon.path'?: string;
-    'menu.activeIcon.name'?: string;
-    'menu.iconSize.width'?: string;
-    'menu.iconSize.height'?: string;
-    'submenu.backgroundColor'?: string;
-    'submenu.partition.color'?: string;
-    'submenu.normalIcon.path'?: string;
-    'submenu.normalIcon.name'?: string;
-    'submenu.activeIcon.path'?: string;
-    'submenu.activeIcon.name'?: string;
-    'submenu.iconSize.width'?: string;
-    'submenu.iconSize.height'?: string;
-    'submenu.normalLabel.color'?: string;
-    'submenu.normalLabel.fontWeight'?: string;
-    'submenu.activeLabel.color'?: string;
-    'submenu.activeLabel.fontWeight'?: string;
-    'checkbox.border'?: string;
-    'checkbox.backgroundColor'?: string;
-    'range.pointer.color'?: string;
-    'range.bar.color'?: string;
-    'range.subbar.color'?: string;
-    'range.value.color'?: string;
-    'range.value.fontWeight'?: string;
-    'range.value.fontSize'?: string;
-    'range.value.border'?: string;
-    'range.value.backgroundColor'?: string;
-    'range.title.color'?: string;
-    'range.title.fontWeight'?: string;
-    'colorpicker.button.border'?: string;
-    'colorpicker.title.color'?: string;
-  }
-
-  interface IIconInfo {
-    [propName: string]: string;
-  }
-
-  interface IIconOptions {
-    fill?: string;
-    left?: number;
-    top?: number;
-  }
-
-  interface IShapeOptions {
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    width?: number;
-    height?: number;
-    rx?: number;
-    ry?: number;
-    left?: number;
-    top?: number;
-    isRegular?: boolean;
-  }
-
-  interface IGenerateTextOptions {
-    styles?: ITextStyleConfig;
-    position?: {
-      x: number;
-      y: number;
-    };
-  }
-
-  interface ITextStyleConfig {
-    fill?: string;
-    fontFamily?: string;
-    fontSize?: number;
-    fontStyle?: string;
-    fontWeight?: string;
-    textAlign?: string;
-    textDecoration?: string;
-  }
-
-  interface IRectConfig {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  }
-
-  interface ICanvasSize {
-    width: number;
-    height: number;
-  }
-
-  interface IBrushOptions {
-    width: number;
-    color: string;
-  }
-
-  interface IPositionConfig {
-    x: number;
-    y: number;
-    originX: string;
-    originY: string;
-  }
-
-  interface IToDataURLOptions {
-    format?: string;
-    quality?: number;
-    multiplier?: number;
-    left?: number;
-    top?: number;
-    width?: number;
-    height?: number;
-  }
-
-  interface IGraphicObjectProps {
-    id?: number;
-    type?: string;
-    text?: string;
-    left?: string | number;
-    top?: string | number;
-    width?: string | number;
-    height?: string | number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: string | number;
-    fontFamily?: string;
-    fontSize?: number;
-    fontStyle?: string;
-    fontWeight?: string;
-    textAlign?: string;
-    textDecoration?: string;
-    opacity?: number;
-    [propName: string]: number | string | boolean | undefined;
-  }
-
-  interface IIncludeUIOptions {
-    loadImage?: {
-      path: string;
-      name: string;
-    };
-    theme?: IThemeConfig;
-    menu?: string[];
-    initMenu?: string;
-    uiSize?: {
-      width: string;
-      height: string;
-    };
-    menuBarPosition?: string;
-    usageStatistics?: boolean;
-  }
-
-  interface ISelectionStyleConfig {
-    cornerStyle?: string;
-    cornerSize?: number;
-    cornerColor?: string;
-    cornerStrokeColor?: string;
-    transparentCorners?: boolean;
-    lineWidth?: number;
-    borderColor?: string;
-    rotatingPointOffset?: number;
-  }
-
-  interface IObjectProps {
-    // icon, shape
-    fill: string;
-    height: number;
-    id: number;
-    left: number;
-    opacity: number;
-    stroke: string | null;
-    strokeWidth: number | null;
-    top: number;
-    type: string;
-    width: number;
-  }
-
-  interface ITextObjectProps extends IObjectProps {
-    fontFamily: string;
-    fontSize: string;
-    fontStyle: string;
-    text: string;
-    textAlign: string;
-    textDecoration: string;
-  }
-
-  interface IFilterResolveObject {
-    type: string;
-    action: string;
-  }
-
-  interface ICropResolveObject {
-    oldWidth: number;
-    oldHeight: number;
-    newWidth: number;
-    newHeight: number;
-  }
-
-  interface IFlipXYResolveObject {
-    flipX: boolean;
-    flipY: boolean;
-    angle: AngleType;
-  }
-
-  interface IOptions {
-    includeUI?: IIncludeUIOptions;
-    cssMaxWidth?: number;
-    cssMaxHeight?: number;
-    usageStatistics?: boolean;
-    selectionStyle?: ISelectionStyleConfig;
-  }
-
-  interface IUIDimension {
-    height?: string;
-    width?: string;
-  }
-
-  interface IImageDimension {
-    oldHeight?: number;
-    oldWidth?: number;
-    newHeight?: number;
-    newWidth?: number;
-  }
-
-  interface IEditorSize {
-    uiSize?: IUIDimension;
-    imageSize?: IImageDimension;
-  }
-
-  interface UI {
-    resizeEditor(dimension: IEditorSize): Promise<void>;
-  }
-
-  class ImageEditor {
-    constructor(wrapper: string | Element, options: IOptions);
-    public ui: UI;
-
-    public addIcon(type: string, options?: IIconOptions): Promise<IObjectProps>;
-    public addImageObject(imgUrl: string): Promise<void>;
-    public addShape(type: string, options?: IShapeOptions): Promise<IObjectProps>;
-    public addText(text: string, options?: IGenerateTextOptions): Promise<ITextObjectProps>;
-    public applyFilter(
-      type: string,
-      options?: {
-        maskObjId: number;
-      },
-      isSilent?: boolean
-    ): Promise<IFilterResolveObject>;
-    public changeCursor(cursorType: string): void;
-    public changeIconColor(id: number, color: string): Promise<void>;
-    public changeSelectableAll(selectable: boolean): void;
-    public changeShape(id: number, options?: IShapeOptions, isSilent?: boolean): Promise<void>;
-    public changeText(id: number, text?: string): Promise<void>;
-    public changeTextStyle(
-      id: number,
-      styleObj: ITextStyleConfig,
-      isSilent?: boolean
-    ): Promise<void>;
-    public clearObjects(): Promise<void>;
-    public clearRedoStack(): void;
-    public clearUndoStack(): void;
-    public crop(rect: IRectConfig): Promise<ICropResolveObject>;
-    public deactivateAll(): void;
-    public destroy(): void;
-    public discardSelection(): void;
-    public flipX(): Promise<IFlipXYResolveObject>;
-    public flipY(): Promise<IFlipXYResolveObject>;
-    public getCanvasSize(): ICanvasSize;
-    public getCropzoneRect(): IRectConfig;
-    public getDrawingMode(): string;
-    public getImageName(): string;
-    public getObjectPosition(id: number, originX: string, originY: string): ICanvasSize;
-    public getObjectProperties(
-      id: number,
-      keys: string | string[] | IGraphicObjectProps
-    ): IGraphicObjectProps;
-    public hasFilter(type: string): boolean;
-    public isEmptyRedoStack(): boolean;
-    public isEmptyUndoStack(): boolean;
-    public loadImageFromFile(imgFile: File, imageName?: string): Promise<ICropResolveObject>;
-    public loadImageFromURL(url: string, imageName?: string): Promise<ICropResolveObject>;
-    public redo(): Promise<any>;
-    public registerIcons(infos: IIconInfo): void;
-    public removeActiveObject(): void;
-    public removeFilter(type?: string): Promise<IFilterResolveObject>;
-    public removeObject(id: number): Promise<void>;
-    public resetFlip(): Promise<IFlipXYResolveObject>;
-    public resizeCanvasDimension(dimension: ICanvasSize): Promise<void>;
-    public rotate(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
-    public setAngle(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
-    public setBrush(option: IBrushOptions): void;
-    public setCropzoneRect(mode?: number): void;
-    public setDrawingShape(type: string, options?: IShapeOptions): void;
-    public setObjectPosition(id: number, posInfo?: IPositionConfig): Promise<void>;
-    public setObjectProperties(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
-    public setObjectPropertiesQuietly(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
-    public startDrawingMode(mode: string, option?: { width?: number; color?: string }): boolean;
-    public stopDrawingMode(): void;
-    public toDataURL(options?: IToDataURLOptions): string;
-    public undo(): Promise<any>;
-    public on(eventName: string, handler: (...args: any[]) => void): void;
-  }
-}
-
-declare module 'tui-image-editor' {
-  export = tuiImageEditor.ImageEditor;
-}

-{
-  "source": {
-    "include": ["src", "README.md"],
-    "exclude": [],
-    "includePattern": ".+\\.js(doc)?$",
-    "excludePattern": "(^|\\/|\\\\)_"
-  },
-  "plugins": ["plugins/markdown"],
-  "templates": {
-    "name": "ImageEditor",
-    "logo": {
-      "url": "https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png",
-      "width": "150px",
-      "height": "13px",
-      "link": "https://github.com/nhn/tui.jsdoc-template"
-    }
-  },
-  "opts": {
-    "private": false,
-    "recurse": true,
-    "destination": "doc",
-    "tutorials": "examples",
-    "template": "./node_modules/tui-jsdoc-template",
-    "package": "package.json"
-  }
-}

-/* eslint-disable consts-on-top, no-process-env, require-jsdoc */
-/* eslint-disable no-process-env, require-jsdoc */
-const webdriverConfig = {
-  hostname: 'fe.nhnent.com',
-  port: 4444,
-  remoteHost: true,
-};
-
-function setConfig(defaultConfig, server) {
-  if (server === 'ne') {
-    defaultConfig.customLaunchers = {
-      IE9: {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'internet explorer',
-        version: '9',
-      },
-      IE10: {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'internet explorer',
-        version: '10',
-      },
-      IE11: {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'internet explorer',
-        version: '11',
-      },
-      Edge: {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'MicrosoftEdge',
-      },
-      'Chrome-WebDriver': {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'chrome',
-      },
-      'Firefox-WebDriver': {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'firefox',
-      },
-      'Safari-WebDriver': {
-        base: 'WebDriver',
-        config: webdriverConfig,
-        browserName: 'safari',
-      },
-    };
-    defaultConfig.browsers = [
-      'IE9',
-      'IE10',
-      // 'IE11',
-      // 'Edge',
-      'Chrome-WebDriver',
-      'Firefox-WebDriver',
-      // 'Safari-WebDriver'
-    ];
-    defaultConfig.reporters.push('coverage');
-    defaultConfig.reporters.push('junit');
-    defaultConfig.coverageReporter = {
-      dir: 'report/coverage/',
-      reporters: [
-        {
-          type: 'html',
-          subdir(browser) {
-            return `report-html/${browser}`;
-          },
-        },
-        {
-          type: 'cobertura',
-          subdir(browser) {
-            return `report-cobertura/${browser}`;
-          },
-          file: 'cobertura.txt',
-        },
-      ],
-    };
-    defaultConfig.junitReporter = {
-      outputDir: 'report/junit',
-      suite: '',
-    };
-  } else {
-    defaultConfig.browsers = ['ChromeHeadless'];
-  }
-}
-
-module.exports = function (config) {
-  const defaultConfig = {
-    basePath: './',
-    frameworks: ['jasmine', 'jquery-3.2.1', 'es5-shim'],
-    files: [
-      // reason for not using karma-jasmine-jquery framework is that including older jasmine-karma file
-      // included jasmine-karma version is 2.0.5 and this version don't support ie8
-      'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
-      'node_modules/fabric/dist/fabric.js',
-      'test/index.js',
-      {
-        pattern: 'test/fixtures/*.jpg',
-        watched: false,
-        included: false,
-        served: true,
-      },
-      {
-        pattern: 'test/fixtures/*.png',
-        watched: false,
-        included: false,
-        served: true,
-      },
-      {
-        pattern: 'test/fixtures/*.svg',
-        watched: false,
-        included: false,
-        served: true,
-      },
-    ],
-    preprocessors: {
-      'test/index.js': ['webpack', 'sourcemap'],
-    },
-    reporters: ['dots'],
-    webpack: {
-      mode: 'development',
-      devtool: 'inline-source-map',
-      externals: {
-        fabric: 'fabric',
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js$/,
-            include: /src/,
-            exclude: /node_modules/,
-            loader: 'eslint-loader',
-            enforce: 'pre',
-          },
-          {
-            test: /\.js$/,
-            exclude: /(test|node_modules)/,
-            loader: 'istanbul-instrumenter-loader',
-            query: {
-              esModules: true,
-            },
-          },
-          {
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: 'babel-loader?cacheDirectory',
-            options: {
-              babelrc: true,
-            },
-          },
-          {
-            test: /\.styl$/,
-            use: ['css-loader', 'stylus-loader'],
-          },
-          {
-            test: /\.svg$/,
-            loader: 'svg-inline-loader',
-          },
-        ],
-      },
-    },
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    singleRun: true,
-  };
-
-  /* eslint-disable */
-  setConfig(defaultConfig, process.env.KARMA_SERVER);
-  config.set(defaultConfig);
-};

-const fs = require('fs');
-const mkdirp = require('mkdirp');
-const svgstore = require('svgstore');
-const svgDir = './src/svg';
-
-function getFileList(dir) {
-  const targetDir = `${svgDir}/${dir}`;
-  const sprites = svgstore();
-  fs.readdir(targetDir, (err, files) => {
-    if (!files) return;
-    files.forEach((file) => {
-      if (file.match(/^\./)) return;
-      const id = `${dir}-${file.replace(/\.svg$/, '')}`;
-      const svg = fs.readFileSync(`${targetDir}/${file}`);
-      sprites.add(id, svg);
-    });
-    fs.writeFileSync(`./dist/svg/${dir}.svg`, sprites);
-  });
-}
-
-mkdirp('./dist/svg', (mkdirpErr) => {
-  if (mkdirpErr) {
-    console.error(mkdirpErr);
-  } else {
-    fs.readdir(svgDir, (err, dirs) => {
-      dirs.forEach((dir) => {
-        getFileList(dir);
-      });
-    });
-  }
-});

 {
-  "name": "tui-image-editor",
-  "author": "NHN FE Development Lab <dl_javascript@nhn.com>",
-  "version": "3.11.0",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nhn/tui.image-editor.git"
-  },
-  "main": "dist/tui-image-editor.js",
+  "name": "@toast-ui/react-image-editor",
+  "version": "1.3.0",
+  "description": "React wrapper component for tui.imageEditor",
+  "main": "dist/toastui-react-image-editor.js",
   "files": [
-    "src",
     "dist",
-    "index.d.ts"
-  ],
-  "description": "TOAST UI Component: ImageEditor",
-  "keywords": [
-    "nhn",
-    "nhnent",
-    "tui",
-    "component",
-    "image",
-    "editor",
-    "canvas",
-    "fabric"
+    "src"
   ],
-  "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.24.1",
-    "css-loader": "^3.4.1",
-    "dtslint": "^0.4.2",
-    "es5-shim": "^4.5.9",
-    "eslint": "^4.5.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-tui": "^1.0.1",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "file-saver": "^1.3.3",
-    "istanbul-instrumenter-loader": "^1.0.0",
-    "jasmine-core": "^2.4.1",
-    "jasmine-jquery": "^2.1.1",
-    "jquery": "^3.4.0",
-    "jsdoc": "^3.5.4",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^2.0.1",
-    "karma-edge-launcher": "^0.4.2",
-    "karma-es5-shim": "0.0.4",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-ie-launcher": "^1.0.0",
-    "karma-jasmine": "^1.1.1",
-    "karma-jasmine-jquery-2": "^0.1.1",
-    "karma-jquery": "^0.2.4",
-    "karma-junit-reporter": "^1.2.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webdriver-launcher": "git+https://github.com/nhn/karma-webdriver-launcher.git#v1.2.0",
-    "karma-webpack": "^4.0.2",
-    "mini-css-extract-plugin": "^0.9.0",
-    "mkdirp": "^0.5.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "prettier": "^2.2.1",
-    "safe-umd-webpack-plugin": "^4.0.0",
-    "selenium-webdriver": "^4.0.0-alpha.7",
-    "simulant": "^0.2.2",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "svg-inline-loader": "^0.8.2",
-    "svgstore": "^2.0.3",
-    "tslint": "^5.12.0",
-    "tui-jsdoc-template": "^1.0.4",
-    "typescript": "^3.2.2",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
-  },
   "scripts": {
-    "test": "karma start --no-single-run",
-    "test:ne": "KARMA_SERVER=ne karma start",
-    "test:types": "tsc --project test/types",
-    "bundle": "webpack && webpack -p && npm run bundle:svg && node tsBannerGenerator.js",
-    "bundle:svg": "node makesvg.js",
+    "build:dev": "webpack --mode development",
+    "build": "webpack --mode production",
     "serve": "webpack-dev-server",
-    "doc:dev": "tuidoc --dev",
-    "doc": "tuidoc",
-    "tslint": "tslint index.d.ts"
+    "storybook": "start-storybook -s ./node_modules/tui-image-editor/dist/svg,.storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "homepage": "https://github.com/nhn/toast-ui.react-image-editor",
+  "bugs": "https://github.com/nhn/toast-ui.react-image-editor/issues",
+  "author": "NHN. FE Development Lab <dl_javascript@nhn.com>",
+  "repository": "https://github.com/nhn/toast-ui.react-image-editor.git",
+  "license": "MIT",
+  "browserslist": "last 2 versions, ie 9",
+  "peerDependencies": {
+    "react": "^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-actions": "^4.1.7",
+    "@storybook/addon-knobs": "^4.1.7",
+    "@storybook/addon-links": "^4.1.7",
+    "@storybook/addons": "^4.1.7",
+    "@storybook/react": "^4.1.7",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "eslint": "^5.12.1",
+    "eslint-config-prettier": "^3.6.0",
+    "eslint-config-tui": "^2.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "jquery-mockjax": "^2.5.0",
+    "prettier": "^1.16.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "storybook": "^5.3.13",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "core-js-pure": "^3.6.4",
     "fabric": "4.2.0",
-    "tui-code-snippet": "^1.5.0",
-    "tui-color-picker": "^2.2.6"
+    "tui-image-editor": "^3.11.0"
   }
 }

-/* ICON BUTTON */
-.tie-icon-add-button
-    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
-    &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
-    &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
-    &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
-    &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
-    &.icon-star-2 .{prefix}-button[data-icontype="icon-star-2"] svg > use.active,
-    &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
-    &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
-    &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
-    &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
-        display: block;
-
-/* DRAW BUTTON */
-.tie-draw-line-select-button
-  &.line .{prefix}-button.line svg > use.normal,
-  &.free .{prefix}-button.free svg > use.normal
-    display: none;
-
-  &.line .{prefix}-button.line svg > use.active,
-  &.free .{prefix}-button.free svg > use.active
-    display: block;
-
-/* FLIP BUTTON */
-.tie-flip-button
-  &.resetFlip .{prefix}-button.resetFlip,
-  &.flipX .{prefix}-button.flipX,
-  &.flipY .{prefix}-button.flipY
-    svg > use.normal
-        display: none;
-    svg > use.active
-        display: block;
-
-/*  MASK BUTTON */
-.tie-mask-apply.apply.active .{prefix}-button.apply
-    label
-        color: #fff;
-    svg > use.active
-        display: block;
-
-/* CROP BUTTON */
-.tie-crop-button,
-.tie-crop-preset-button
-    .{prefix}-button.apply
-        margin-right: 24px;
-    .{prefix}-button.preset.active svg > use.active
-        display: block;
-    .{prefix}-button.apply.active svg > use.active
-        display: block;
-
-
-/* SHAPE BUTTON */
-.tie-shape-button
-  &.rect .{prefix}-button.rect,
-  &.circle .{prefix}-button.circle,
-  &.triangle .{prefix}-button.triangle
-    svg > use.normal
-        display: none;
-    svg > use.active
-        display: block;
-
-/* TEXT BUTTON */
-.tie-text-effect-button
-    .{prefix}-button.active svg > use.active
-        display: block;
-.tie-text-align-button
-    &.left .{prefix}-button.left svg > use.active,
-    &.center .{prefix}-button.center svg > use.active,
-    &.right .{prefix}-button.right svg > use.active
-        display: block;
-.tie-mask-image-file,
-.tie-icon-image-file
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border: 1px solid green;
-    cursor: inherit;
-    left: 0;
-    top: 0;

-/* VIRTUAL CHECKBOX */
-.{prefix}-container
-  .filter-color-item
-    display: inline-block;
-    .tui-image-editor-checkbox
-        display: block;
-  .{prefix}-checkbox-wrap
-      display: inline-block !important;
-      text-align: left;
-  .{prefix}-checkbox-wrap.fixed-width
-      width: 187px;
-      white-space: normal;
-  .{prefix}-checkbox
-      display: inline-block;
-      margin: 1px 0 1px 0;
-      input
-          width: 14px;
-          height: 14px;
-          opacity: 0;
-      > label > span
-          color: #fff;
-          height: 14px;
-          position: relative;
-      input + label:before,
-      > label > span:before
-          content: '';
-          position: absolute;
-          width: 14px;
-          height: 14px;
-          background-color: #fff;
-          top: 6px;
-          left: -19px;
-          display: inline-block;
-          margin: 0;
-          text-align: center;
-          font-size: 11px;
-          border: 0;
-          border-radius: 2px;
-          padding-top: 1px;
-          box-sizing: border-box;
-      input[type='checkbox']:checked + span:before
-          background-size: cover;
-          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==');
-
-  .{prefix}-selectlist-wrap
-      position: relative;
-      select
-          width: 100%;
-          height: 28px;
-          margin-top: 4px;
-          border: 0;
-          outline: 0;
-          border-radius: 0;
-          border: 1px solid #cbdbdb;
-          background-color: #fff;
-          -webkit-appearance: none;
-          -moz-appearance: none;
-          appearance: none;
-          padding: 0 7px 0 10px;
-      .{prefix}-selectlist
-          display: none;
-          position: relative;
-          top: -1px;
-          border: 1px solid #ccc;
-          background-color: #fff;
-          border-top: 0px;
-          padding: 4px 0;
-          li
-              display: block;
-              text-align: left;
-              padding: 7px 10px;
-              font-family: 'Noto Sans', sans-serif;
-          li:hover
-                  background-color: rgba(81, 92, 230, 0.05);
-  .{prefix}-selectlist-wrap:before
-      content: '';
-      position: absolute;
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      right: 5px;
-      top: 10px;
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');
-      background-size: cover;
-  .{prefix}-selectlist-wrap select::-ms-expand
-      display:none;

-/* COLOR PICKER */
-.{prefix}-container
-    div.tui-colorpicker-clearfix
-        width: 159px;
-        height: 28px;
-        border: 1px solid #d5d5d5;
-        border-radius: 2px;
-        background-color: #f5f5f5;
-        margin-top: 6px;
-        padding: 4px 7px 4px 7px;
-    .tui-colorpicker-palette-hex
-        width: 114px;
-        background-color: #f5f5f5;
-        border: 0;
-        font-size: 11px;
-        margin-top: 2px;
-        font-family: 'Noto Sans', sans-serif;
-    .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
-    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
-            border: 1px solid #ccc;
-    .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
-            background-size: cover;
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
-    .tui-colorpicker-palette-preview
-        border-radius: 100%;
-        float: left;
-        width: 17px;
-        height: 17px;
-        border: 0;
-    .color-picker-control
-        position: absolute;
-        display: none;
-        z-index: 99;
-        width: 192px;
-        background-color: #fff;
-        box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);
-        padding: 16px;
-        border-radius: 2px;
-        .tui-colorpicker-palette-toggle-slider
-            display: none;
-        .tui-colorpicker-palette-button
-            border: 0;
-            border-radius: 100%;
-            margin: 2px;
-            background-size: cover;
-            font-size: 1px;
-            &[title='#ffffff']
-              border: 1px solid #ccc;
-            &[title='']
-              border: 1px solid #ccc;
-        .triangle
-            width: 0;
-            height: 0;
-            border-right: 7px solid transparent;
-            border-top: 8px solid #fff;
-            border-left: 7px solid transparent;
-            position: absolute;
-            bottom: -8px;
-            left: 84px;
-        .tui-colorpicker-container,
-        .tui-colorpicker-palette-container ul,
-        .tui-colorpicker-palette-container
-            width: 100%;
-            height: auto;
-
-
-    .filter-color-item
-        .color-picker-control label
-            font-color: #333;
-            font-weight: normal;
-            margin-right: 7pxleft
-        .tui-image-editor-checkbox
-            margin-top: 0;
-            input + label:before,
-            > label:before
-              left: -16px;
-    .color-picker
-        width: 100%;
-        height: auto;
-    .color-picker-value 
-        width: 32px;
-        height: 32px;
-        border: 0px;
-        border-radius: 100%;
-        margin: auto;
-        margin-bottom: 1px;
-        &.transparent
-            border: 1px solid #cbcbcb;
-            background-size: cover;
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
-
-    .color-picker-value + label
-        color: #fff;
-
-    .{prefix}-submenu svg > use
-        display: none;
-    .{prefix}-submenu svg > use.normal
-        display: block;

-/* GRID VISUAL OF FLIP AND ROTATE MENU  */
-.{prefix}-container
-    .{prefix}-grid-visual
-        display: none;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border: 1px solid rgba(255,255,255,0.7);
-    .{prefix}-main.{prefix}-menu-flip,
-    .{prefix}-main.{prefix}-menu-rotate
-        .tui-image-editor
-            transition: none;
-    .{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,
-    .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual
-        display: block;
-    .{prefix}-grid-visual 
-        table
-            width: 100%;
-            height: 100%;
-            border-collapse: collapse;
-            td
-                border: 1px solid rgba(255,255,255,0.3);
-            td.dot:before
-                content: '';
-                position: absolute;
-                box-sizing: border-box;
-                width: 10px;
-                height: 10px;
-                border: 0;
-                box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
-                border-radius: 100%;
-                background-color: #fff;
-            td.dot.left-top:before
-                top: -5px;
-                left: -5px;
-            td.dot.right-top:before
-                top: -5px;
-                right: -5px;
-            td.dot.left-bottom:before
-                bottom: -5px;
-                left: -5px;
-            td.dot.right-bottom:before
-                bottom: -5px;
-                right: -5px;

-/* ICON */
-.{prefix}-container
-    .tie-icon-add-button .{prefix}-button
-        min-width: 42px;
-    .svg_ic-menu
-    .svg_ic-helpmenu
-        width: 24px;
-        height: 24px;
-    .svg_ic-submenu
-        width: 32px;
-        height: 32px;
-    .svg_img-bi
-        width: 257px;
-        height: 26px;
-
-    .{prefix}-controls
-        svg > use
-            display: none;
-        .enabled svg:hover > use.hover
-        .normal svg:hover > use.hover
-            display: block;
-        .active svg:hover > use.hover
-            display: none;
-        svg > use.normal
-            display: block;
-        .active svg > use.active
-            display: block;
-        .enabled svg > use.enabled
-            display: block;
-        .active svg > use.normal,
-        .enabled svg > use.normal
-            display: none;
-        .help svg > use.disabled,
-        .help.enabled svg > use.normal
-            display: block;
-        .help.enabled svg > use.disabled
-            display: none;
-
-    .{prefix}-controls:hover
-        z-index: 3;

-prefix = 'tui-image-editor'
-
-@import 'main.styl'
-@import 'gridtable.styl'
-@import 'submenu.styl'
-@import 'checkbox.styl'
-@import 'range.styl'
-@import 'position.styl'
-@import 'icon.styl'
-@import 'colorpicker.styl'
-@import 'buttons.styl'
-.{prefix}-container.top
-    &.{prefix}-top-optimization
-      .{prefix}-controls ul
-          text-align: right;
-      .{prefix}-controls-logo
-          display: none;

-body > textarea
-    position: fixed !important;
-
-+prefix-classes(prefix)
-  .-container
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    min-height: 300px;
-    height: 100%;
-    position: relative;
-    background-color: #282828;
-    overflow: hidden;
-    letter-spacing: 0.3px;
-  
-    div, ul, label, input, li
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -ms-user-select: none; 
-      -moz-user-select: -moz-none;
-      -khtml-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-  
-    .-header
-        /* BUTTON AND LOGO */
-        min-width: 533px;
-        position: absolute;
-        background-color: #151515;
-        top: 0;
-        width: 100%;
-    .-header-buttons,
-    .-controls-buttons
-        float: right;
-        margin: 8px;
-
-    .-header-logo,
-    .-controls-logo
-        float: left;
-        width: 30%;
-        padding: 17px;
-
-    .-controls-logo,
-    .-controls-buttons
-        width: 270px;
-        height: 100%;
-        display: none;
-
-    .-header-buttons button,
-    .-header-buttons div,
-    .-controls-buttons button,
-    .-controls-buttons div
-        display: inline-block;
-        position: relative;
-        width: 120px;
-        height: 40px;
-        padding: 0;
-        line-height: 40px;
-        outline: none;
-        border-radius: 20px;
-        border: 1px solid #ddd;
-        font-family: 'Noto Sans', sans-serif;
-        font-size: 12px;
-        font-weight: bold;
-        cursor: pointer;
-        vertical-align: middle;
-        letter-spacing: 0.3px;
-        text-align: center;
-
-    .-download-btn
-        background-color: #fdba3b;
-        border-color: #fdba3b;
-        color: #fff;
-    .-load-btn
-        position: absolute;
-        left: 0;
-        right: 0;
-        display: inline-block;
-        top: 0;
-        bottom: 0;
-        width: 100%;
-        cursor: pointer;
-        opacity: 0;
-    .-main-container
-        position: absolute;
-        width: 100%;
-        top: 0;
-        bottom: 64px;
-    .-main
-        position: absolute;
-        text-align: center;
-        top: 64px;
-        bottom: 0;
-        right: 0;
-        left: 0;
-    .-wrap
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        overflow: auto;
-        .-size-wrap
-            display: table;
-            width: 100%;
-            height: 100%
-            .-align-wrap
-                display: table-cell;
-                vertical-align: middle;
-    .
-        position: relative;
-        display: inline-block;
-
-
-/* BIG MENU */
-.{prefix}-container
-    .{prefix}-menu
-        width: auto;
-        list-style: none;
-        padding: 0;
-        margin: 0 auto;
-        display: table-cell;
-        text-align: center;
-        vertical-align: middle;
-        white-space: nowrap;
-        > .{prefix}-item
-            position: relative;
-            display: inline-block;
-            border-radius: 2px;
-            padding: 7px 8px 3px 8px;
-            cursor: pointer;
-            margin: 0 4px;
-        > .{prefix}-item[tooltip-content]:hover
-            &:before
-                content: '';
-                position: absolute;
-                display: inline-block;
-                margin: 0 auto 0;
-                width: 0;
-                height: 0;
-                border-right: 7px solid transparent;
-                border-top: 7px solid #2f2f2f;
-                border-left: 7px solid transparent;
-                left: 13px;
-                top: -2px;
-            &:after
-                content: attr(tooltip-content);
-                position: absolute;
-                display: inline-block;
-                background-color: #2f2f2f;
-                color: #fff;
-                padding: 5px 8px;
-                font-size: 11px;
-                font-weight: lighter;
-                border-radius: 3px;
-                max-height: 23px;
-                top: -25px;
-                left: 0;
-                min-width: 24px;
-        > .{prefix}-item.active
-            background-color: #fff;
-            transition: all .3s ease;
-    .{prefix}-wrap
-        position: absolute;

-/* POSITION LEFT */
-.{prefix}-container
-  &.left
-    .{prefix}-menu
-        > .{prefix}-item[tooltip-content]
-            &:before
-                left: 28px;
-                top: 11px;
-                border-right: 7px solid #2f2f2f;
-                border-top: 7px solid transparent;
-                border-bottom: 7px solid transparent;
-            &:after
-                top: 7px;
-                left: 42px;
-                white-space: nowrap;
-    .{prefix}-submenu
-        left: 0;
-        height: 100%;
-        width: 248px;
-    .{prefix}-main-container
-        left: 64px;
-        width: calc(100% - 64px);
-        height: 100%;
-    .{prefix}-controls
-        width: 64px;
-        height: 100%;
-        display: table;
-
-/* POSITION LEFT & RIGHT */
-.{prefix}-container
-  &.left, &.right
-    .{prefix}-menu
-        white-space: inherit;
-    .{prefix}-submenu
-        white-space: normal;
-        > div
-            vertical-align: middle;
-    .{prefix}-controls li
-        display: inline-block;
-        margin: 4px auto;
-    .{prefix}-icpartition
-        position: relative;
-        top: -7px;
-        width: 24px;
-        height: 1px;
-    .{prefix}-submenu
-        .{prefix}-partition
-            display: block;
-            width: 75%;
-            margin: auto;
-            > div
-                border-left: 0;
-                height:10px;
-                border-bottom: 1px solid #3c3c3c;
-                width: 100%;
-                margin: 0;
-        .{prefix}-submenu-align
-            margin-right: 0;
-        .{prefix}-submenu-item
-            li
-                margin-top: 15px;
-            .tui-colorpicker-clearfix li
-                margin-top: 0;
-
-    .{prefix}-checkbox-wrap.fixed-width
-        width: 182px;
-        white-space: normal;
-    .{prefix}-range-wrap.{prefix}-newline label.range
-        display: block;
-        text-align: left;
-        width: 75%;
-        margin: auto;
-    .{prefix}-range
-        width: 136px;
-
-
-/* POSITION RIGIHT */
-.{prefix}-container
-  &.right
-    .{prefix}-menu
-        > .{prefix}-item[tooltip-content]
-            &:before
-                left: -3px;
-                top: 11px;
-                border-left: 7px solid #2f2f2f;
-                border-top: 7px solid transparent;
-                border-bottom: 7px solid transparent;
-            &:after
-                top: 7px;
-                left: unset;
-                right: 43px;
-                white-space: nowrap;
-    .{prefix}-submenu
-        right: 0;
-        height: 100%;
-        width: 248px;
-    .{prefix}-main-container 
-        right: 64px;
-        width: calc(100% - 64px);
-        height: 100%;
-    .{prefix}-controls
-        right: 0;
-        width: 64px;
-        height: 100%;
-        display: table;
-
-
-/* POSITION TOP & BOTTOM */
-.{prefix}-container
-  &.top, &.bottom
-    .{prefix}-submenu
-        .{prefix}-partition.only-left-right
-            display: none;
-
-
-/* POSITION BOTTOM */
-.{prefix}-container
-    &.bottom .tui-image-editor-submenu > div
-        padding-bottom: 24px;
-
-/* POSITION TOP */
-.{prefix}-container
-  &.top
-    .color-picker-control .triangle
-        top: -8px;
-        border-right: 7px solid transparent;
-        border-top: 0px;
-        border-left: 7px solid transparent;
-        border-bottom: 8px solid #fff;
-    .{prefix}-size-wrap
-        height: 100%;
-    .{prefix}-main-container
-        bottom: 0;
-    .{prefix}-menu
-        > .{prefix}-item[tooltip-content]
-            &:before
-                left: 13px;
-                border-top: 0;
-                border-bottom: 7px solid #2f2f2f;
-                top: 33px;
-            &:after
-                top: 38px;
-    .{prefix}-submenu
-        top: 0;
-        bottom: auto;
-        > div
-            padding-top: 24px;
-            vertical-align: top;
-    .{prefix}-controls-logo
-        display: table-cell;
-    .{prefix}-controls-buttons
-        display: table-cell;
-    .{prefix}-main
-        top: 64px;
-        height: calc(100% - 64px);
-    .{prefix}-controls
-        top: 0;
-        bottom: inherit;
-

-/* VIRTUAL RANGE */
-.{prefix}-container
-
-    .{prefix}-virtual-range-bar
-    .{prefix}-virtual-range-subbar
-    .{prefix}-virtual-range-pointer
-        .{prefix}-disabled
-            backbround-color: red;
-
-    .{prefix}-range
-        position: relative;
-        top: 5px;
-        width: 166px;
-        height: 17px;
-        display: inline-block;
-    .{prefix}-virtual-range-bar
-        top: 7px;
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        background-color: #666666;
-    .{prefix}-virtual-range-subbar
-        position: absolute;
-        height: 100%;
-        left: 0;
-        right: 0;
-        background-color: #d1d1d1;
-    .{prefix}-virtual-range-pointer
-        position: absolute;
-        cursor: pointer;
-        top: -5px;
-        left: 0;
-        width: 12px;
-        height: 12px;
-        background-color: #fff;
-        border-radius: 100%;
-    .{prefix}-range-wrap
-        display: inline-block;
-        margin-left: 4px;
-        &.short .tui-image-editor-range
-            width: 100px;
-    .color-picker-control
-        .{prefix}-range
-            width: 108px;
-            margin-left: 10px;
-        .{prefix}-virtual-range-pointer
-            background-color: #333;
-        .{prefix}-virtual-range-bar
-            background-color: #ccc;
-        .{prefix}-virtual-range-subbar
-            background-color: #606060;
-    .{prefix}-range-wrap.{prefix}-newline.short
-        margin-top: -2px;
-        margin-left: 19px;
-        label
-            color: #8e8e8e;
-            font-weight: normal;
-    .{prefix}-range-wrap label
-        vertical-align: baseline;
-        font-size: 11px;
-        margin-right: 7px;
-        color: #fff;
-    .{prefix}-range-value
-        cursor: default;
-        width: 40px;
-        height: 24px;
-        outline: none;
-        border-radius: 2px;
-        box-shadow: none;
-        border: 1px solid #d5d5d5;
-        text-align: center;
-        background-color: #1c1c1c;
-        color: #fff;
-        font-weight: lighter;
-        vertical-align: baseline;
-        font-family: 'Noto Sans', sans-serif;
-        margin-top: 21px;
-        margin-left: 4px;
-    .{prefix}-controls
-        position: absolute;
-        background-color: #151515;
-        width: 100%;
-        height: 64px;
-        display: table;
-        bottom: 0;
-        z-index: 2;
-    .{prefix}-icpartition
-        display: inline-block;
-        background-color: #282828;
-        width: 1px;
-        height: 24px;
\ No newline at end of file

-/* SUBMENU */
-.{prefix}-container
-    .{prefix}-submenu
-        display: none;
-        position: absolute;
-        bottom: 0;
-        width:100%;
-        height: 150px;
-        white-space: nowrap;
-        z-index: 2;
-        .{prefix}-button:hover svg > use.active
-            display: block;
-        .{prefix}-submenu-item
-            li
-                display: inline-block;
-                vertical-align: top;
-            .{prefix}-newline
-                display: block;
-                margin-top: 0;
-            .{prefix}-button
-                position: relative;
-                cursor: pointer;
-                display: inline-block;
-                font-weight: normal;
-                font-size: 11px;
-                margin: 0 9px 0 9px;
-            .{prefix}-button.preset
-                margin: 0 9px 20px 5px;
-            label > span
-                display: inline-block;
-                cursor: pointer;
-                padding-top: 5px;
-                font-family: "Noto Sans", sans-serif;
-                font-size: 11px;
-            .{prefix}-button.apply label,
-            .{prefix}-button.cancel label
-                vertical-align: 7px;
-        > div
-            display: none;
-            vertical-align: bottom;
-        .{prefix}-submenu-style
-            opacity: 0.95;
-            z-index: -1;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            display: block;
-
-    .{prefix}-partition > div
-        width: 1px;
-        height: 52px;
-        border-left: 1px solid #3c3c3c;
-        margin: 0 8px 0 8px;
-    .{prefix}-main.{prefix}-menu-filter .{prefix}-partition > div
-        height: 108px;
-        margin: 0 29px 0 0px;
-    .{prefix}-submenu-align
-        text-align: left;
-        margin-right: 30px;
-        label > span
-            width: 55px;
-            white-space: nowrap;
-    .{prefix}-submenu-align:first-child
-        margin-right: 0;
-        label > span
-            width: 70px;
-    .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,
-    .{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip,
-    .{prefix}-main.{prefix}-menu-rotate .{prefix}-submenu > div.{prefix}-menu-rotate,
-    .{prefix}-main.{prefix}-menu-shape .{prefix}-submenu > div.{prefix}-menu-shape,
-    .{prefix}-main.{prefix}-menu-text .{prefix}-submenu > div.{prefix}-menu-text,
-    .{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,
-    .{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,
-    .{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,
-    .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter
-        display: table-cell;
-    .{prefix}-main.{prefix}-menu-crop,
-    .{prefix}-main.{prefix}-menu-flip,
-    .{prefix}-main.{prefix}-menu-rotate,
-    .{prefix}-main.{prefix}-menu-shape,
-    .{prefix}-main.{prefix}-menu-text,
-    .{prefix}-main.{prefix}-menu-mask,
-    .{prefix}-main.{prefix}-menu-icon,
-    .{prefix}-main.{prefix}-menu-draw,
-    .{prefix}-main.{prefix}-menu-filter
-      .{prefix}-submenu
-        display: table;
-

-import './js/polyfill';
-import ImageEditor from './js/imageEditor';
-import './css/index.styl';
-
-// commands
-import './js/command/addIcon';
-import './js/command/addImageObject';
-import './js/command/addObject';
-import './js/command/addShape';
-import './js/command/addText';
-import './js/command/applyFilter';
-import './js/command/changeIconColor';
-import './js/command/changeShape';
-import './js/command/changeText';
-import './js/command/changeTextStyle';
-import './js/command/clearObjects';
-import './js/command/flip';
-import './js/command/loadImage';
-import './js/command/removeFilter';
-import './js/command/removeObject';
-import './js/command/resizeCanvasDimension';
-import './js/command/rotate';
-import './js/command/setObjectProperties';
-import './js/command/setObjectPosition';
-import './js/command/changeSelection';
-
-module.exports = ImageEditor;
+/**
+ * @fileoverview TOAST UI Image-Editor React wrapper component
+ * @author NHN. FE Development Lab <dl_javascript@nhn.com>
+ */
+import React from 'react';
+import TuiImageEditor from 'tui-image-editor';
+
+export default class ImageEditor extends React.Component {
+  rootEl = React.createRef();
+
+  imageEditorInst = null;
+
+  componentDidMount() {
+    this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
+      ...this.props
+    });
+
+    this.bindEventHandlers(this.props);
+  }
+
+  componentWillUnmount() {
+    this.unbindEventHandlers();
+
+    this.imageEditorInst.destroy();
+
+    this.imageEditorInst = null;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this.bindEventHandlers(this.props, nextProps);
+
+    return false;
+  }
+
+  getInstance() {
+    return this.imageEditorInst;
+  }
+
+  getRootElement() {
+    return this.rootEl.current;
+  }
+
+  bindEventHandlers(props, prevProps) {
+    Object.keys(props)
+      .filter(this.isEventHandlerKeys)
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        // For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} />
+        if (prevProps && prevProps[key] !== props[key]) {
+          this.imageEditorInst.off(eventName);
+        }
+        this.imageEditorInst.on(eventName, props[key]);
+      });
+  }
+
+  unbindEventHandlers() {
+    Object.keys(this.props)
+      .filter(this.isEventHandlerKeys)
+      .forEach((key) => {
+        const eventName = key[2].toLowerCase() + key.slice(3);
+        this.imageEditorInst.off(eventName);
+      });
+  }
+
+  isEventHandlerKeys(key) {
+    return /on[A-Z][a-zA-Z]+/.test(key);
+  }
+
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add an icon
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames } from '../consts';
-
-const { ICON } = componentNames;
-
-const command = {
-  name: commandNames.ADD_ICON,
-
-  /**
-   * Add an icon
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
-   * @param {Object} options - Icon options
-   *      @param {string} [options.fill] - Icon foreground color
-   *      @param {string} [options.left] - Icon x position
-   *      @param {string} [options.top] - Icon y position
-   * @returns {Promise}
-   */
-  execute(graphics, type, options) {
-    const iconComp = graphics.getComponent(ICON);
-
-    return iconComp.add(type, options).then((objectProps) => {
-      this.undoData.object = graphics.getObject(objectProps.id);
-
-      return objectProps;
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.remove(this.undoData.object);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add an image object
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
-
-const command = {
-  name: commandNames.ADD_IMAGE_OBJECT,
-
-  /**
-   * Add an image object
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} imgUrl - Image url to make object
-   * @returns {Promise}
-   */
-  execute(graphics, imgUrl) {
-    return graphics.addImageObject(imgUrl).then((objectProps) => {
-      this.undoData.object = graphics.getObject(objectProps.id);
-
-      return objectProps;
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.remove(this.undoData.object);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add an object
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames, rejectMessages } from '../consts';
-
-const command = {
-  name: commandNames.ADD_OBJECT,
-
-  /**
-   * Add an object
-   * @param {Graphics} graphics - Graphics instance
-   * @param {Object} object - Fabric object
-   * @returns {Promise}
-   */
-  execute(graphics, object) {
-    return new Promise((resolve, reject) => {
-      if (!graphics.contains(object)) {
-        graphics.add(object);
-        resolve(object);
-      } else {
-        reject(rejectMessages.addedObject);
-      }
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @param {Object} object - Fabric object
-   * @returns {Promise}
-   */
-  undo(graphics, object) {
-    return new Promise((resolve, reject) => {
-      if (graphics.contains(object)) {
-        graphics.remove(object);
-        resolve(object);
-      } else {
-        reject(rejectMessages.noObject);
-      }
-    });
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add a shape
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames } from '../consts';
-
-const { SHAPE } = componentNames;
-
-const command = {
-  name: commandNames.ADD_SHAPE,
-
-  /**
-   * Add a shape
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')
-   * @param {Object} options - Shape options
-   *      @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
-   *      @param {string} [options.stroke] - Shape outline color
-   *      @param {number} [options.strokeWidth] - Shape outline width
-   *      @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
-   *      @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
-   *      @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
-   *      @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
-   *      @param {number} [options.left] - Shape x position
-   *      @param {number} [options.top] - Shape y position
-   *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
-   * @returns {Promise}
-   */
-  execute(graphics, type, options) {
-    const shapeComp = graphics.getComponent(SHAPE);
-
-    return shapeComp.add(type, options).then((objectProps) => {
-      this.undoData.object = graphics.getObject(objectProps.id);
-
-      return objectProps;
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.remove(this.undoData.object);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add a text object
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, commandNames, rejectMessages } from '../consts';
-const { TEXT } = componentNames;
-
-const command = {
-  name: commandNames.ADD_TEXT,
-
-  /**
-   * Add a text object
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} text - Initial input text
-   * @param {Object} [options] Options for text styles
-   *     @param {Object} [options.styles] Initial styles
-   *         @param {string} [options.styles.fill] Color
-   *         @param {string} [options.styles.fontFamily] Font type for text
-   *         @param {number} [options.styles.fontSize] Size
-   *         @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)
-   *         @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)
-   *         @param {string} [options.styles.textAlign] Type of text align (left / center / right)
-   *         @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)
-   *     @param {{x: number, y: number}} [options.position] - Initial position
-   * @returns {Promise}
-   */
-  execute(graphics, text, options) {
-    const textComp = graphics.getComponent(TEXT);
-
-    if (this.undoData.object) {
-      const undoObject = this.undoData.object;
-
-      return new Promise((resolve, reject) => {
-        if (!graphics.contains(undoObject)) {
-          graphics.add(undoObject);
-          resolve(undoObject);
-        } else {
-          reject(rejectMessages.redo);
-        }
-      });
-    }
-
-    return textComp.add(text, options).then((objectProps) => {
-      const { id } = objectProps;
-      const textObject = graphics.getObject(id);
-
-      this.undoData.object = textObject;
-
-      return objectProps;
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.remove(this.undoData.object);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Apply a filter into an image
- */
-import snippet from 'tui-code-snippet';
-import commandFactory from '../factory/command';
-import { componentNames, rejectMessages, commandNames } from '../consts';
-
-const { FILTER } = componentNames;
-
-/**
- * Chched data for undo
- * @type {Object}
- */
-let chchedUndoDataForSilent = null;
-
-/**
- * Make undoData
- * @param {string} type - Filter type
- * @param {Object} prevfilterOption - prev Filter options
- * @param {Object} options - Filter options
- * @returns {object} - undo data
- */
-function makeUndoData(type, prevfilterOption, options) {
-  const undoData = {};
-
-  if (type === 'mask') {
-    undoData.object = options.mask;
-  }
-
-  undoData.options = prevfilterOption;
-
-  return undoData;
-}
-
-const command = {
-  name: commandNames.APPLY_FILTER,
-
-  /**
-   * Apply a filter into an image
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Filter type
-   * @param {Object} options - Filter options
-   *  @param {number} options.maskObjId - masking image object id
-   * @param {boolean} isSilent - is silent execution or not
-   * @returns {Promise}
-   */
-  execute(graphics, type, options, isSilent) {
-    const filterComp = graphics.getComponent(FILTER);
-
-    if (type === 'mask') {
-      const maskObj = graphics.getObject(options.maskObjId);
-
-      if (!(maskObj && maskObj.isType('image'))) {
-        return Promise.reject(rejectMessages.invalidParameters);
-      }
-
-      snippet.extend(options, { mask: maskObj });
-      graphics.remove(options.mask);
-    }
-    if (!this.isRedo) {
-      const prevfilterOption = filterComp.getOptions(type);
-      const undoData = makeUndoData(type, prevfilterOption, options);
-
-      chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
-    }
-
-    return filterComp.add(type, options);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Filter type
-   * @returns {Promise}
-   */
-  undo(graphics, type) {
-    const filterComp = graphics.getComponent(FILTER);
-
-    if (type === 'mask') {
-      const mask = this.undoData.object;
-      graphics.add(mask);
-      graphics.setActiveObject(mask);
-
-      return filterComp.remove(type);
-    }
-
-    // options changed case
-    if (this.undoData.options) {
-      return filterComp.add(type, this.undoData.options);
-    }
-
-    // filter added case
-    return filterComp.remove(type);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Change icon color
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, rejectMessages, commandNames } from '../consts';
-
-const { ICON } = componentNames;
-
-const command = {
-  name: commandNames.CHANGE_ICON_COLOR,
-
-  /**
-   * Change icon color
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {string} color - Color for icon
-   * @returns {Promise}
-   */
-  execute(graphics, id, color) {
-    return new Promise((resolve, reject) => {
-      const iconComp = graphics.getComponent(ICON);
-      const targetObj = graphics.getObject(id);
-
-      if (!targetObj) {
-        reject(rejectMessages.noObject);
-      }
-
-      this.undoData.object = targetObj;
-      this.undoData.color = iconComp.getColor(targetObj);
-      iconComp.setColor(color, targetObj);
-      resolve();
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const iconComp = graphics.getComponent(ICON);
-    const { object: icon, color } = this.undoData;
-
-    iconComp.setColor(color, icon);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview change selection
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
-import { getCachedUndoDataForDimension } from '../helper/selectionModifyHelper';
-
-const command = {
-  name: commandNames.CHANGE_SELECTION,
-
-  execute(graphics, props) {
-    if (this.isRedo) {
-      props.forEach((prop) => {
-        graphics.setObjectProperties(prop.id, prop);
-      });
-    } else {
-      this.undoData = getCachedUndoDataForDimension();
-    }
-
-    return Promise.resolve();
-  },
-  undo(graphics) {
-    this.undoData.forEach((datum) => {
-      graphics.setObjectProperties(datum.id, datum);
-    });
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview change a shape
- */
-import snippet from 'tui-code-snippet';
-import { Promise } from '../util';
-import commandFactory from '../factory/command';
-import { componentNames, rejectMessages, commandNames } from '../consts';
-
-const { SHAPE } = componentNames;
-
-/**
- * Chched data for undo
- * @type {Object}
- */
-let chchedUndoDataForSilent = null;
-
-/**
- * Make undoData
- * @param {object} options - shape options
- * @param {Component} targetObj - shape component
- * @returns {object} - undo data
- */
-function makeUndoData(options, targetObj) {
-  const undoData = {
-    object: targetObj,
-    options: {},
-  };
-
-  snippet.forEachOwnProperties(options, (value, key) => {
-    undoData.options[key] = targetObj[key];
-  });
-
-  return undoData;
-}
-
-const command = {
-  name: commandNames.CHANGE_SHAPE,
-
-  /**
-   * Change a shape
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {Object} options - Shape options
-   *      @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
-   *      @param {string} [options.stroke] - Shape outline color
-   *      @param {number} [options.strokeWidth] - Shape outline width
-   *      @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
-   *      @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
-   *      @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
-   *      @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
-   *      @param {number} [options.left] - Shape x position
-   *      @param {number} [options.top] - Shape y position
-   *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
-   * @param {boolean} isSilent - is silent execution or not
-   * @returns {Promise}
-   */
-  execute(graphics, id, options, isSilent) {
-    const shapeComp = graphics.getComponent(SHAPE);
-    const targetObj = graphics.getObject(id);
-
-    if (!targetObj) {
-      return Promise.reject(rejectMessages.noObject);
-    }
-
-    if (!this.isRedo) {
-      const undoData = makeUndoData(options, targetObj);
-
-      chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
-    }
-
-    return shapeComp.change(targetObj, options);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const shapeComp = graphics.getComponent(SHAPE);
-    const { object: shape, options } = this.undoData;
-
-    return shapeComp.change(shape, options);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Change a text
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, rejectMessages, commandNames } from '../consts';
-
-const { TEXT } = componentNames;
-
-const command = {
-  name: commandNames.CHANGE_TEXT,
-
-  /**
-   * Change a text
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {string} text - Changing text
-   * @returns {Promise}
-   */
-  execute(graphics, id, text) {
-    const textComp = graphics.getComponent(TEXT);
-    const targetObj = graphics.getObject(id);
-
-    if (!targetObj) {
-      return Promise.reject(rejectMessages.noObject);
-    }
-
-    this.undoData.object = targetObj;
-    this.undoData.text = textComp.getText(targetObj);
-
-    return textComp.change(targetObj, text);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const textComp = graphics.getComponent(TEXT);
-    const { object: textObj, text } = this.undoData;
-
-    return textComp.change(textObj, text);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Change text styles
- */
-import snippet from 'tui-code-snippet';
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { componentNames, rejectMessages, commandNames } from '../consts';
-
-const { TEXT } = componentNames;
-
-/**
- * Chched data for undo
- * @type {Object}
- */
-let chchedUndoDataForSilent = null;
-
-/**
- * Make undoData
- * @param {object} styles - text styles
- * @param {Component} targetObj - text component
- * @returns {object} - undo data
- */
-function makeUndoData(styles, targetObj) {
-  const undoData = {
-    object: targetObj,
-    styles: {},
-  };
-  snippet.forEachOwnProperties(styles, (value, key) => {
-    const undoValue = targetObj[key];
-    undoData.styles[key] = undoValue;
-  });
-
-  return undoData;
-}
-
-const command = {
-  name: commandNames.CHANGE_TEXT_STYLE,
-
-  /**
-   * Change text styles
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {Object} styles - text styles
-   *     @param {string} [styles.fill] Color
-   *     @param {string} [styles.fontFamily] Font type for text
-   *     @param {number} [styles.fontSize] Size
-   *     @param {string} [styles.fontStyle] Type of inclination (normal / italic)
-   *     @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold)
-   *     @param {string} [styles.textAlign] Type of text align (left / center / right)
-   *     @param {string} [styles.textDecoration] Type of line (underline / line-through / overline)
-   * @param {boolean} isSilent - is silent execution or not
-   * @returns {Promise}
-   */
-  execute(graphics, id, styles, isSilent) {
-    const textComp = graphics.getComponent(TEXT);
-    const targetObj = graphics.getObject(id);
-
-    if (!targetObj) {
-      return Promise.reject(rejectMessages.noObject);
-    }
-    if (!this.isRedo) {
-      const undoData = makeUndoData(styles, targetObj);
-
-      chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
-    }
-
-    return textComp.setStyle(targetObj, styles);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const textComp = graphics.getComponent(TEXT);
-    const { object: textObj, styles } = this.undoData;
-
-    return textComp.setStyle(textObj, styles);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Clear all objects
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
-
-const command = {
-  name: commandNames.CLEAR_OBJECTS,
-
-  /**
-   * Clear all objects without background (main) image
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  execute(graphics) {
-    return new Promise((resolve) => {
-      this.undoData.objects = graphics.removeAll();
-      resolve();
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   * @ignore
-   */
-  undo(graphics) {
-    graphics.add(this.undoData.objects);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Flip an image
- */
-import commandFactory from '../factory/command';
-import { componentNames, commandNames } from '../consts';
-
-const { FLIP } = componentNames;
-
-const command = {
-  name: commandNames.FLIP_IMAGE,
-
-  /**
-   * flip an image
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - 'flipX' or 'flipY' or 'reset'
-   * @returns {Promise}
-   */
-  execute(graphics, type) {
-    const flipComp = graphics.getComponent(FLIP);
-
-    this.undoData.setting = flipComp.getCurrentSetting();
-
-    return flipComp[type]();
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const flipComp = graphics.getComponent(FLIP);
-
-    return flipComp.set(this.undoData.setting);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Load a background (main) image
- */
-import commandFactory from '../factory/command';
-import { componentNames, commandNames } from '../consts';
-
-const { IMAGE_LOADER } = componentNames;
-
-const command = {
-  name: commandNames.LOAD_IMAGE,
-
-  /**
-   * Load a background (main) image
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} imageName - Image name
-   * @param {string} imgUrl - Image Url
-   * @returns {Promise}
-   */
-  execute(graphics, imageName, imgUrl) {
-    const loader = graphics.getComponent(IMAGE_LOADER);
-    const prevImage = loader.getCanvasImage();
-    const prevImageWidth = prevImage ? prevImage.width : 0;
-    const prevImageHeight = prevImage ? prevImage.height : 0;
-    const objects = graphics.removeAll(true).filter((objectItem) => objectItem.type !== 'cropzone');
-
-    objects.forEach((objectItem) => {
-      objectItem.evented = true;
-    });
-
-    this.undoData = {
-      name: loader.getImageName(),
-      image: prevImage,
-      objects,
-    };
-
-    return loader.load(imageName, imgUrl).then((newImage) => ({
-      oldWidth: prevImageWidth,
-      oldHeight: prevImageHeight,
-      newWidth: newImage.width,
-      newHeight: newImage.height,
-    }));
-  },
-
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const loader = graphics.getComponent(IMAGE_LOADER);
-    const { objects, name, image } = this.undoData;
-
-    graphics.removeAll(true);
-    graphics.add(objects);
-
-    return loader.load(name, image);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Remove a filter from an image
- */
-import commandFactory from '../factory/command';
-import { componentNames, commandNames } from '../consts';
-
-const { FILTER } = componentNames;
-
-const command = {
-  name: commandNames.REMOVE_FILTER,
-
-  /**
-   * Remove a filter from an image
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Filter type
-   * @returns {Promise}
-   */
-  execute(graphics, type) {
-    const filterComp = graphics.getComponent(FILTER);
-
-    this.undoData.options = filterComp.getOptions(type);
-
-    return filterComp.remove(type);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - Filter type
-   * @returns {Promise}
-   */
-  undo(graphics, type) {
-    const filterComp = graphics.getComponent(FILTER);
-    const { options } = this.undoData;
-
-    return filterComp.add(type, options);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Remove an object
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames, rejectMessages } from '../consts';
-
-const command = {
-  name: commandNames.REMOVE_OBJECT,
-
-  /**
-   * Remove an object
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @returns {Promise}
-   */
-  execute(graphics, id) {
-    return new Promise((resolve, reject) => {
-      this.undoData.objects = graphics.removeObjectById(id);
-      if (this.undoData.objects.length) {
-        resolve();
-      } else {
-        reject(rejectMessages.noObject);
-      }
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.add(this.undoData.objects);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Resize a canvas
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames } from '../consts';
-
-const command = {
-  name: commandNames.RESIZE_CANVAS_DIMENSION,
-
-  /**
-   * resize the canvas with given dimension
-   * @param {Graphics} graphics - Graphics instance
-   * @param {{width: number, height: number}} dimension - Max width & height
-   * @returns {Promise}
-   */
-  execute(graphics, dimension) {
-    return new Promise((resolve) => {
-      this.undoData.size = {
-        width: graphics.cssMaxWidth,
-        height: graphics.cssMaxHeight,
-      };
-
-      graphics.setCssMaxDimension(dimension);
-      graphics.adjustCanvasDimension();
-      resolve();
-    });
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    graphics.setCssMaxDimension(this.undoData.size);
-    graphics.adjustCanvasDimension();
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Rotate an image
- */
-import commandFactory from '../factory/command';
-import { componentNames, commandNames } from '../consts';
-
-const { ROTATION } = componentNames;
-
-/**
- * Chched data for undo
- * @type {Object}
- */
-let chchedUndoDataForSilent = null;
-
-/**
- * Make undo data
- * @param {Component} rotationComp - rotation component
- * @returns {object} - undodata
- */
-function makeUndoData(rotationComp) {
-  return {
-    angle: rotationComp.getCurrentAngle(),
-  };
-}
-
-const command = {
-  name: commandNames.ROTATE_IMAGE,
-
-  /**
-   * Rotate an image
-   * @param {Graphics} graphics - Graphics instance
-   * @param {string} type - 'rotate' or 'setAngle'
-   * @param {number} angle - angle value (degree)
-   * @param {boolean} isSilent - is silent execution or not
-   * @returns {Promise}
-   */
-  execute(graphics, type, angle, isSilent) {
-    const rotationComp = graphics.getComponent(ROTATION);
-
-    if (!this.isRedo) {
-      const undoData = makeUndoData(rotationComp);
-
-      chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
-    }
-
-    return rotationComp[type](angle);
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const rotationComp = graphics.getComponent(ROTATION);
-    const [, type, angle] = this.args;
-
-    if (type === 'setAngle') {
-      return rotationComp[type](this.undoData.angle);
-    }
-
-    return rotationComp.rotate(-angle);
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Set object properties
- */
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames, rejectMessages } from '../consts';
-
-const command = {
-  name: commandNames.SET_OBJECT_POSITION,
-
-  /**
-   * Set object properties
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {Object} posInfo - position object
-   *  @param {number} posInfo.x - x position
-   *  @param {number} posInfo.y - y position
-   *  @param {string} posInfo.originX - can be 'left', 'center', 'right'
-   *  @param {string} posInfo.originY - can be 'top', 'center', 'bottom'
-   * @returns {Promise}
-   */
-  execute(graphics, id, posInfo) {
-    const targetObj = graphics.getObject(id);
-
-    if (!targetObj) {
-      return Promise.reject(rejectMessages.noObject);
-    }
-
-    this.undoData.objectId = id;
-    this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']);
-
-    graphics.setObjectPosition(id, posInfo);
-    graphics.renderAll();
-
-    return Promise.resolve();
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @returns {Promise}
-   */
-  undo(graphics) {
-    const { objectId, props } = this.undoData;
-
-    graphics.setObjectProperties(objectId, props);
-    graphics.renderAll();
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Set object properties
- */
-import snippet from 'tui-code-snippet';
-import commandFactory from '../factory/command';
-import { Promise } from '../util';
-import { commandNames, rejectMessages } from '../consts';
-
-const command = {
-  name: commandNames.SET_OBJECT_PROPERTIES,
-
-  /**
-   * Set object properties
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @param {Object} props - properties
-   *     @param {string} [props.fill] Color
-   *     @param {string} [props.fontFamily] Font type for text
-   *     @param {number} [props.fontSize] Size
-   *     @param {string} [props.fontStyle] Type of inclination (normal / italic)
-   *     @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)
-   *     @param {string} [props.textAlign] Type of text align (left / center / right)
-   *     @param {string} [props.textDecoration] Type of line (underline / line-through / overline)
-   * @returns {Promise}
-   */
-  execute(graphics, id, props) {
-    const targetObj = graphics.getObject(id);
-
-    if (!targetObj) {
-      return Promise.reject(rejectMessages.noObject);
-    }
-
-    this.undoData.props = {};
-    snippet.forEachOwnProperties(props, (value, key) => {
-      this.undoData.props[key] = targetObj[key];
-    });
-
-    graphics.setObjectProperties(id, props);
-
-    return Promise.resolve();
-  },
-  /**
-   * @param {Graphics} graphics - Graphics instance
-   * @param {number} id - object id
-   * @returns {Promise}
-   */
-  undo(graphics, id) {
-    const { props } = this.undoData;
-
-    graphics.setObjectProperties(id, props);
-
-    return Promise.resolve();
-  },
-};
-
-commandFactory.register(command);
-
-export default command;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Image crop module (start cropping, end cropping)
- */
-import snippet from 'tui-code-snippet';
-import fabric from 'fabric';
-import Component from '../interface/component';
-import Cropzone from '../extension/cropzone';
-import { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '../consts';
-import { clamp, fixFloatingPoint } from '../util';
-
-const MOUSE_MOVE_THRESHOLD = 10;
-const DEFAULT_OPTION = {
-  presetRatio: null,
-  top: -10,
-  left: -10,
-  height: 1,
-  width: 1,
-};
-
-/**
- * Cropper components
- * @param {Graphics} graphics - Graphics instance
- * @extends {Component}
- * @class Cropper
- * @ignore
- */
-class Cropper extends Component {
-  constructor(graphics) {
-    super(componentNames.CROPPER, graphics);
-
-    /**
-     * Cropzone
-     * @type {Cropzone}
-     * @private
-     */
-    this._cropzone = null;
-
-    /**
-     * StartX of Cropzone
-     * @type {number}
-     * @private
-     */
-    this._startX = null;
-
-    /**
-     * StartY of Cropzone
-     * @type {number}
-     * @private
-     */
-    this._startY = null;
-
-    /**
-     * State whether shortcut key is pressed or not
-     * @type {boolean}
-     * @private
-     */
-    this._withShiftKey = false;
-
-    /**
-     * Listeners
-     * @type {object.<string, function>}
-     * @private
-     */
-    this._listeners = {
-      keydown: this._onKeyDown.bind(this),
-      keyup: this._onKeyUp.bind(this),
-      mousedown: this._onFabricMouseDown.bind(this),
-      mousemove: this._onFabricMouseMove.bind(this),
-      mouseup: this._onFabricMouseUp.bind(this),
-    };
-  }
-
-  /**
-   * Start cropping
-   */
-  start() {
-    if (this._cropzone) {
-      return;
-    }
-    const canvas = this.getCanvas();
-
-    canvas.forEachObject((obj) => {
-      // {@link http://fabricjs.com/docs/fabric.Object.html#evented}
-      obj.evented = false;
-    });
-
-    this._cropzone = new Cropzone(
-      canvas,
-      snippet.extend(
-        {
-          left: 0,
-          top: 0,
-          width: 0.5,
-          height: 0.5,
-          strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}
-          cornerSize: 10,
-          cornerColor: 'black',
-          fill: 'transparent',
-        },
-        CROPZONE_DEFAULT_OPTIONS,
-        this.graphics.cropSelectionStyle
-      )
-    );
-
-    canvas.discardActiveObject();
-    canvas.add(this._cropzone);
-    canvas.on('mouse:down', this._listeners.mousedown);
-    canvas.selection = false;
-    canvas.defaultCursor = 'crosshair';
-
-    fabric.util.addListener(document, 'keydown', this._listeners.keydown);
-    fabric.util.addListener(document, 'keyup', this._listeners.keyup);
-  }
-
-  /**
-   * End cropping
-   */
-  end() {
-    const canvas = this.getCanvas();
-    const cropzone = this._cropzone;
-
-    if (!cropzone) {
-      return;
-    }
-    canvas.remove(cropzone);
-    canvas.selection = true;
-    canvas.defaultCursor = 'default';
-    canvas.off('mouse:down', this._listeners.mousedown);
-    canvas.forEachObject((obj) => {
-      obj.evented = true;
-    });
-
-    this._cropzone = null;
-
-    fabric.util.removeListener(document, 'keydown', this._listeners.keydown);
-    fabric.util.removeListener(document, 'keyup', this._listeners.keyup);
-  }
-
-  /**
-   * Change cropzone visible
-   * @param {boolean} visible - cropzone visible state
-   */
-  changeVisibility(visible) {
-    if (this._cropzone) {
-      this._cropzone.set({ visible });
-    }
-  }
-
-  /**
-   * onMousedown handler in fabric canvas
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
-   * @private
-   */
-  _onFabricMouseDown(fEvent) {
-    const canvas = this.getCanvas();
-
-    if (fEvent.target) {
-      return;
-    }
-
-    canvas.selection = false;
-    const coord = canvas.getPointer(fEvent.e);
-
-    this._startX = coord.x;
-    this._startY = coord.y;
-
-    canvas.on({
-      'mouse:move': this._listeners.mousemove,
-      'mouse:up': this._listeners.mouseup,
-    });
-  }
-
-  /**
-   * onMousemove handler in fabric canvas
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
-   * @private
-   */
-  _onFabricMouseMove(fEvent) {
-    const canvas = this.getCanvas();
-    const pointer = canvas.getPointer(fEvent.e);
-    const { x, y } = pointer;
-    const cropzone = this._cropzone;
-
-    if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) {
-      canvas.remove(cropzone);
-      cropzone.set(this._calcRectDimensionFromPoint(x, y));
-
-      canvas.add(cropzone);
-      canvas.setActiveObject(cropzone);
-    }
-  }
-
-  /**
-   * Get rect dimension setting from Canvas-Mouse-Position(x, y)
-   * @param {number} x - Canvas-Mouse-Position x
-   * @param {number} y - Canvas-Mouse-Position Y
-   * @returns {{left: number, top: number, width: number, height: number}}
-   * @private
-   */
-  _calcRectDimensionFromPoint(x, y) {
-    const canvas = this.getCanvas();
-    const canvasWidth = canvas.getWidth();
-    const canvasHeight = canvas.getHeight();
-    const startX = this._startX;
-    const startY = this._startY;
-    let left = clamp(x, 0, startX);
-    let top = clamp(y, 0, startY);
-    let width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left
-    let height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top
-
-    if (this._withShiftKey) {
-      // make fixed ratio cropzone
-      if (width > height) {
-        height = width;
-      } else if (height > width) {
-        width = height;
-      }
-
-      if (startX >= x) {
-        left = startX - width;
-      }
-
-      if (startY >= y) {
-        top = startY - height;
-      }
-    }
-
-    return {
-      left,
-      top,
-      width,
-      height,
-    };
-  }
-
-  /**
-   * onMouseup handler in fabric canvas
-   * @private
-   */
-  _onFabricMouseUp() {
-    const cropzone = this._cropzone;
-    const listeners = this._listeners;
-    const canvas = this.getCanvas();
-
-    canvas.setActiveObject(cropzone);
-    canvas.off({
-      'mouse:move': listeners.mousemove,
-      'mouse:up': listeners.mouseup,
-    });
-  }
-
-  /**
-   * Get cropped image data
-   * @param {Object} cropRect cropzone rect
-   *  @param {Number} cropRect.left left position
-   *  @param {Number} cropRect.top top position
-   *  @param {Number} cropRect.width width
-   *  @param {Number} cropRect.height height
-   * @returns {?{imageName: string, url: string}} cropped Image data
-   */
-  getCroppedImageData(cropRect) {
-    const canvas = this.getCanvas();
-    const containsCropzone = canvas.contains(this._cropzone);
-    if (!cropRect) {
-      return null;
-    }
-
-    if (containsCropzone) {
-      canvas.remove(this._cropzone);
-    }
-
-    const imageData = {
-      imageName: this.getImageName(),
-      url: canvas.toDataURL(cropRect),
-    };
-
-    if (containsCropzone) {
-      canvas.add(this._cropzone);
-    }
-
-    return imageData;
-  }
-
-  /**
-   * Get cropped rect
-   * @returns {Object} rect
-   */
-  getCropzoneRect() {
-    const cropzone = this._cropzone;
-
-    if (!cropzone.isValid()) {
-      return null;
-    }
-
-    return {
-      left: cropzone.left,
-      top: cropzone.top,
-      width: cropzone.width,
-      height: cropzone.height,
-    };
-  }
-
-  /**
-   * Set a cropzone square
-   * @param {number} [presetRatio] - preset ratio
-   */
-  setCropzoneRect(presetRatio) {
-    const canvas = this.getCanvas();
-    const cropzone = this._cropzone;
-
-    canvas.discardActiveObject();
-    canvas.selection = false;
-    canvas.remove(cropzone);
-
-    cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION);
-
-    canvas.add(cropzone);
-    canvas.selection = true;
-
-    if (presetRatio) {
-      canvas.setActiveObject(cropzone);
-    }
-  }
-
-  /**
-   * get a cropzone square info
-   * @param {number} presetRatio - preset ratio
-   * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}}
-   * @private
-   */
-  _getPresetPropertiesForCropSize(presetRatio) {
-    const canvas = this.getCanvas();
-    const originalWidth = canvas.getWidth();
-    const originalHeight = canvas.getHeight();
-
-    const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
-    const getScale = (value, orignalValue) => (value > orignalValue ? orignalValue / value : 1);
-
-    let width = standardSize * presetRatio;
-    let height = standardSize;
-
-    const scaleWidth = getScale(width, originalWidth);
-    [width, height] = snippet.map([width, height], (sizeValue) => sizeValue * scaleWidth);
-
-    const scaleHeight = getScale(height, originalHeight);
-    [width, height] = snippet.map([width, height], (sizeValue) =>
-      fixFloatingPoint(sizeValue * scaleHeight)
-    );
-
-    return {
-      presetRatio,
-      top: (originalHeight - height) / 2,
-      left: (originalWidth - width) / 2,
-      width,
-      height,
-    };
-  }
-
-  /**
-   * Keydown event handler
-   * @param {KeyboardEvent} e - Event object
-   * @private
-   */
-  _onKeyDown(e) {
-    if (e.keyCode === keyCodes.SHIFT) {
-      this._withShiftKey = true;
-    }
-  }
-
-  /**
-   * Keyup event handler
-   * @param {KeyboardEvent} e - Event object
-   * @private
-   */
-  _onKeyUp(e) {
-    if (e.keyCode === keyCodes.SHIFT) {
-      this._withShiftKey = false;
-    }
-  }
-}
-
-export default Cropper;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add filter module
- */
-import { isUndefined, extend, forEach, filter } from 'tui-code-snippet';
-import { Promise } from '../util';
-import fabric from 'fabric';
-import Component from '../interface/component';
-import Mask from '../extension/mask';
-import { rejectMessages, componentNames } from '../consts';
-import Sharpen from '../extension/sharpen';
-import Emboss from '../extension/emboss';
-import ColorFilter from '../extension/colorFilter';
-
-const { filters } = fabric.Image;
-filters.Mask = Mask;
-filters.Sharpen = Sharpen;
-filters.Emboss = Emboss;
-filters.ColorFilter = ColorFilter;
-
-/**
- * Filter
- * @class Filter
- * @param {Graphics} graphics - Graphics instance
- * @extends {Component}
- * @ignore
- */
-class Filter extends Component {
-  constructor(graphics) {
-    super(componentNames.FILTER, graphics);
-  }
-
-  /**
-   * Add filter to source image (a specific filter is added on fabric.js)
-   * @param {string} type - Filter type
-   * @param {Object} [options] - Options of filter
-   * @returns {Promise}
-   */
-  add(type, options) {
-    return new Promise((resolve, reject) => {
-      const sourceImg = this._getSourceImage();
-      const canvas = this.getCanvas();
-      let imgFilter = this._getFilter(sourceImg, type);
-      if (!imgFilter) {
-        imgFilter = this._createFilter(sourceImg, type, options);
-      }
-
-      if (!imgFilter) {
-        reject(rejectMessages.invalidParameters);
-      }
-
-      this._changeFilterValues(imgFilter, options);
-
-      this._apply(sourceImg, () => {
-        canvas.renderAll();
-        resolve({
-          type,
-          action: 'add',
-          options,
-        });
-      });
-    });
-  }
-
-  /**
-   * Remove filter to source image
-   * @param {string} type - Filter type
-   * @returns {Promise}
-   */
-  remove(type) {
-    return new Promise((resolve, reject) => {
-      const sourceImg = this._getSourceImage();
-      const canvas = this.getCanvas();
-      const options = this.getOptions(type);
-
-      if (!sourceImg.filters.length) {
-        reject(rejectMessages.unsupportedOperation);
-      }
-
-      this._removeFilter(sourceImg, type);
-
-      this._apply(sourceImg, () => {
-        canvas.renderAll();
-        resolve({
-          type,
-          action: 'remove',
-          options,
-        });
-      });
-    });
-  }
-
-  /**
-   * Whether this has the filter or not
-   * @param {string} type - Filter type
-   * @returns {boolean} true if it has the filter
-   */
-  hasFilter(type) {
-    return !!this._getFilter(this._getSourceImage(), type);
-  }
-
-  /**
-   * Get a filter options
-   * @param {string} type - Filter type
-   * @returns {Object} filter options or null if there is no that filter
-   */
-  getOptions(type) {
-    const sourceImg = this._getSourceImage();
-    const imgFilter = this._getFilter(sourceImg, type);
-    if (!imgFilter) {
-      return null;
-    }
-
-    return extend({}, imgFilter.options);
-  }
-
-  /**
-   * Change filter values
-   * @param {Object} imgFilter object of filter
-   * @param {Object} options object
-   * @private
-   */
-  _changeFilterValues(imgFilter, options) {
-    forEach(options, (value, key) => {
-      if (!isUndefined(imgFilter[key])) {
-        imgFilter[key] = value;
-      }
-    });
-    forEach(imgFilter.options, (value, key) => {
-      if (!isUndefined(options[key])) {
-        imgFilter.options[key] = options[key];
-      }
-    });
-  }
-
-  /**
-   * Apply filter
-   * @param {fabric.Image} sourceImg - Source image to apply filter
-   * @param {function} callback - Executed function after applying filter
-   * @private
-   */
-  _apply(sourceImg, callback) {
-    sourceImg.filters.push();
-    const result = sourceImg.applyFilters();
-    if (result) {
-      callback();
-    }
-  }
-
-  /**
-   * Get source image on canvas
-   * @returns {fabric.Image} Current source image on canvas
-   * @private
-   */
-  _getSourceImage() {
-    return this.getCanvasImage();
-  }
-
-  /**
-   * Create filter instance
-   * @param {fabric.Image} sourceImg - Source image to apply filter
-   * @param {string} type - Filter type
-   * @param {Object} [options] - Options of filter
-   * @returns {Object} Fabric object of filter
-   * @private
-   */
-  _createFilter(sourceImg, type, options) {
-    let filterObj;
-    // capitalize first letter for matching with fabric image filter name
-    const fabricType = this._getFabricFilterType(type);
-    const ImageFilter = fabric.Image.filters[fabricType];
-    if (ImageFilter) {
-      filterObj = new ImageFilter(options);
-      filterObj.options = options;
-      sourceImg.filters.push(filterObj);
-    }
-
-    return filterObj;
-  }
-
-  /**
-   * Get applied filter instance
-   * @param {fabric.Image} sourceImg - Source image to apply filter
-   * @param {string} type - Filter type
-   * @returns {Object} Fabric object of filter
-   * @private
-   */
-  _getFilter(sourceImg, type) {
-    let imgFilter = null;
-
-    if (sourceImg) {
-      const fabricType = this._getFabricFilterType(type);
-      const { length } = sourceImg.filters;
-      let item, i;
-
-      for (i = 0; i < length; i += 1) {
-        item = sourceImg.filters[i];
-        if (item.type === fabricType) {
-          imgFilter = item;
-          break;
-        }
-      }
-    }
-
-    return imgFilter;
-  }
-
-  /**
-   * Remove applied filter instance
-   * @param {fabric.Image} sourceImg - Source image to apply filter
-   * @param {string} type - Filter type
-   * @private
-   */
-  _removeFilter(sourceImg, type) {
-    const fabricType = this._getFabricFilterType(type);
-    sourceImg.filters = filter(sourceImg.filters, (value) => value.type !== fabricType);
-  }
-
-  /**
-   * Change filter class name to fabric's, especially capitalizing first letter
-   * @param {string} type - Filter type
-   * @example
-   * 'grayscale' -> 'Grayscale'
-   * @returns {string} Fabric filter class name
-   */
-  _getFabricFilterType(type) {
-    return type.charAt(0).toUpperCase() + type.slice(1);
-  }
-}
-
-export default Filter;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Image flip module
- */
-import snippet from 'tui-code-snippet';
-import { Promise } from '../util';
-import Component from '../interface/component';
-import { componentNames, rejectMessages } from '../consts';
-
-/**
- * Flip
- * @class Flip
- * @param {Graphics} graphics - Graphics instance
- * @extends {Component}
- * @ignore
- */
-class Flip extends Component {
-  constructor(graphics) {
-    super(componentNames.FLIP, graphics);
-  }
-
-  /**
-   * Get current flip settings
-   * @returns {{flipX: Boolean, flipY: Boolean}}
-   */
-  getCurrentSetting() {
-    const canvasImage = this.getCanvasImage();
-
-    return {
-      flipX: canvasImage.flipX,
-      flipY: canvasImage.flipY,
-    };
-  }
-
-  /**
-   * Set flipX, flipY
-   * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting
-   * @returns {Promise}
-   */
-  set(newSetting) {
-    const setting = this.getCurrentSetting();
-    const isChangingFlipX = setting.flipX !== newSetting.flipX;
-    const isChangingFlipY = setting.flipY !== newSetting.flipY;
-
-    if (!isChangingFlipX && !isChangingFlipY) {
-      return Promise.reject(rejectMessages.flip);
-    }
-
-    snippet.extend(setting, newSetting);
-    this.setImageProperties(setting, true);
-    this._invertAngle(isChangingFlipX, isChangingFlipY);
-    this._flipObjects(isChangingFlipX, isChangingFlipY);
-
-    return Promise.resolve({
-      flipX: setting.flipX,
-      flipY: setting.flipY,
-      angle: this.getCanvasImage().angle,
-    });
-  }
-
-  /**
-   * Invert image angle for flip
-   * @param {boolean} isChangingFlipX - Change flipX
-   * @param {boolean} isChangingFlipY - Change flipY
-   */
-  _invertAngle(isChangingFlipX, isChangingFlipY) {
-    const canvasImage = this.getCanvasImage();
-    let { angle } = canvasImage;
-
-    if (isChangingFlipX) {
-      angle *= -1;
-    }
-    if (isChangingFlipY) {
-      angle *= -1;
-    }
-    canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0
-  }
-
-  /**
-   * Flip objects
-   * @param {boolean} isChangingFlipX - Change flipX
-   * @param {boolean} isChangingFlipY - Change flipY
-   * @private
-   */
-  _flipObjects(isChangingFlipX, isChangingFlipY) {
-    const canvas = this.getCanvas();
-
-    if (isChangingFlipX) {
-      canvas.forEachObject((obj) => {
-        obj
-          .set({
-            angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
-            flipX: !obj.flipX,
-            left: canvas.width - obj.left,
-          })
-          .setCoords();
-      });
-    }
-    if (isChangingFlipY) {
-      canvas.forEachObject((obj) => {
-        obj
-          .set({
-            angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
-            flipY: !obj.flipY,
-            top: canvas.height - obj.top,
-          })
-          .setCoords();
-      });
-    }
-    canvas.renderAll();
-  }
-
-  /**
-   * Reset flip settings
-   * @returns {Promise}
-   */
-  reset() {
-    return this.set({
-      flipX: false,
-      flipY: false,
-    });
-  }
-
-  /**
-   * Flip x
-   * @returns {Promise}
-   */
-  flipX() {
-    const current = this.getCurrentSetting();
-
-    return this.set({
-      flipX: !current.flipX,
-      flipY: current.flipY,
-    });
-  }
-
-  /**
-   * Flip y
-   * @returns {Promise}
-   */
-  flipY() {
-    const current = this.getCurrentSetting();
-
-    return this.set({
-      flipX: current.flipX,
-      flipY: !current.flipY,
-    });
-  }
-}
-
-export default Flip;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Free drawing module, Set brush
- */
-import fabric from 'fabric';
-import Component from '../interface/component';
-import { componentNames } from '../consts';
-
-/**
- * FreeDrawing
- * @class FreeDrawing
- * @param {Graphics} graphics - Graphics instance
- * @extends {Component}
- * @ignore
- */
-class FreeDrawing extends Component {
-  constructor(graphics) {
-    super(componentNames.FREE_DRAWING, graphics);
-
-    /**
-     * Brush width
-     * @type {number}
-     */
-    this.width = 12;
-
-    /**
-     * fabric.Color instance for brush color
-     * @type {fabric.Color}
-     */
-    this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
-  }
-
-  /**
-   * Start free drawing mode
-   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
-   */
-  start(setting) {
-    const canvas = this.getCanvas();
-
-    canvas.isDrawingMode = true;
-    this.setBrush(setting);
-  }
-
-  /**
-   * Set brush
-   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color
-   */
-  setBrush(setting) {
-    const brush = this.getCanvas().freeDrawingBrush;
-
-    setting = setting || {};
-    this.width = setting.width || this.width;
-    if (setting.color) {
-      this.oColor = new fabric.Color(setting.color);
-    }
-    brush.width = this.width;
-    brush.color = this.oColor.toRgba();
-  }
-
-  /**
-   * End free drawing mode
-   */
-  end() {
-    const canvas = this.getCanvas();
-
-    canvas.isDrawingMode = false;
-  }
-}
-
-export default FreeDrawing;

-/**
- * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add icon module
- */
-import fabric from 'fabric';
-import snippet from 'tui-code-snippet';
-import { Promise } from '../util';
-import Component from '../interface/component';
-import { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '../consts';
-
-const pathMap = {
-  arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',
-  cancel:
-    'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +
-    'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',
-};
-
-/**
- * Icon
- * @class Icon
- * @param {Graphics} graphics - Graphics instance
- * @extends {Component}
- * @ignore
- */
-class Icon extends Component {
-  constructor(graphics) {
-    super(componentNames.ICON, graphics);
-
-    /**
-     * Default icon color
-     * @type {string}
-     */
-    this._oColor = '#000000';
-
-    /**
-     * Path value of each icon type
-     * @type {Object}
-     */
-    this._pathMap = pathMap;
-
-    /**
-     * Type of the drawing icon
-     * @type {string}
-     * @private
-     */
-    this._type = null;
-
-    /**
-     * Color of the drawing icon
-     * @type {string}
-     * @private
-     */
-    this._iconColor = null;
-
-    /**
-     * Event handler list
-     * @type {Object}
-     * @private
-     */
-    this._handlers = {
-      mousedown: this._onFabricMouseDown.bind(this),
-      mousemove: this._onFabricMouseMove.bind(this),
-      mouseup: this._onFabricMouseUp.bind(this),
-    };
-  }
-
-  /**
-   * Set states of the current drawing shape
-   * @ignore
-   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
-   * @param {string} iconColor - Icon foreground color
-   */
-  setStates(type, iconColor) {
-    this._type = type;
-    this._iconColor = iconColor;
-  }
-
-  /**
-   * Start to draw the icon on canvas
-   * @ignore
-   */
-  start() {
-    const canvas = this.getCanvas();
-    canvas.selection = false;
-    canvas.on('mouse:down', this._handlers.mousedown);
-  }
-
-  /**
-   * End to draw the icon on canvas
-   * @ignore
-   */
-  end() {
-    const canvas = this.getCanvas();
-
-    canvas.selection = true;
-    canvas.off({
-      'mouse:down': this._handlers.mousedown,
-    });
-  }
-
-  /**
-   * Add icon
-   * @param {string} type - Icon type
-   * @param {Object} options - Icon options
-   *      @param {string} [options.fill] - Icon foreground color
-   *      @param {string} [options.left] - Icon x position
-   *      @param {string} [options.top] - Icon y position
-   * @returns {Promise}
-   */
-  add(type, options) {
-    return new Promise((resolve, reject) => {
-      const canvas = this.getCanvas();
-      const path = this._pathMap[type];
-      const selectionStyle = fObjectOptions.SELECTION_STYLE;
-      const icon = path ? this._createIcon(path) : null;
-      this._icon = icon;
-
-      if (!icon) {
-        reject(rejectMessages.invalidParameters);
-      }
-
-      icon.set(
-        snippet.extend(
-          {
-            type: 'icon',
-            fill: this._oColor,
-          },
-          selectionStyle,
-          options,
-          this.graphics.controlStyle
-        )
-      );
-
-      canvas.add(icon).setActiveObject(icon);
-
-      resolve(this.graphics.createObjectProperties(icon));
-    });
-  }
-
-  /**
-   * Register icon paths
-   * @param {{key: string, value: string}} pathInfos - Path infos
-   */
-  registerPaths(pathInfos) {
-    snippet.forEach(
-      pathInfos,
-      (path, type) => {
-        this._pathMap[type] = path;
-      },
-      this
-    );
-  }
-
-  /**
-   * Set icon object color
-   * @param {string} color - Color to set
-   * @param {fabric.Path}[obj] - Current activated path object
-   */
-  setColor(color, obj) {
-    this._oColor = color;
-
-    if (obj && obj.get('type') === 'icon') {
-      obj.set({ fill: this._oColor });
-      this.getCanvas().renderAll();
-    }
-  }
-
-  /**
-   * Get icon color
-   * @param {fabric.Path}[obj] - Current activated path object
-   * @returns {string} color
-   */
-  getColor(obj) {
-    return obj.fill;
-  }
-
-  /**
-   * Create icon object
-   * @param {string} path - Path value to create icon
-   * @returns {fabric.Path} Path object
-   */
-  _createIcon(path) {
-    return new fabric.Path(path);
-  }
-
-  /**
-   * MouseDown event handler on canvas
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
-   * @private
-   */
-  _onFabricMouseDown(fEvent) {
-    const canvas = this.getCanvas();
-
-    this._startPoint = canvas.getPointer(fEvent.e);
-    const { x: left, y: top } = this._startPoint;
-
-    this.add(this._type, {
-      left,
-      top,
-      fill: this._iconColor,
-    }).then(() => {
-      this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));
-      canvas.on('mouse:move', this._handlers.mousemove);
-      canvas.on('mouse:up', this._handlers.mouseup);
-    });
-  }
-
-  /**
-   * MouseMove event handler on canvas
-   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
-   * @private
-   */
-  _onFabricMouseMove(fEvent) {
-    const canvas = this.getCanvas();
-
-    if (!this._icon) {
-      return;
-    }
-    const moveOriginPointer = canvas.getPointer(fEvent.e);
-
-    const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;
-    const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;
-
-    this._icon.set({
-      scaleX: Math.abs(scaleX * 2),
-      scaleY: Math.abs(scaleY * 2),
-    });
-
-    this._icon.setCoords();
-    canvas.renderAll();
-  }
-
-  /**
-   * MouseUp event handler on canvas
-   * @private
-   */
-  _onFabricMouseUp() {
-    const canvas = this.getCanvas();
-
-    this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));
-
-    this._icon = null;
-
-    canvas.off('mouse:down', this._handlers.mousedown);
-    canvas.off('mouse:move', this._handlers.mousemove);
-    canvas.off('mouse:up', this._handlers.mouseup);
-  }
-}
-
-export default Icon;