re npm install

+{
+  "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,
+  },
+  parserOptions: {
+    sourceType: 'module',
+  },
+  rules: {
+    'prefer-destructuring': [
+      'error',
+      {
+        VariableDeclarator: { array: true, object: true },
+        AssignmentExpression: { array: false, object: false },
+      },
+    ],
+    'prettier/prettier': 'error',
+  },
+};

-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Runtime data
+pids
+*.pid
+*.seed
 
-# testing
-/coverage
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
 
-# production
-/build
+# Coverage directory used by tools like istanbul
+coverage
 
-# misc
+# 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
+Thumbs.db
+Desktop.ini
+
+# MAC
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+
+# SVN
+.svn
+
+# eclipse
+.project
+.metadata
+
+# etc
+temp
+doc
+demo
+report
+*.vim
+test.html
+
+# Compiled files
+dist

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

+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+education, socio-economic status, nationality, personal appearance, race,
+religion, or sexual identity and orientation.
+
+## Our Standards
+
+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
+
+Examples of unacceptable behavior by participants include:
+
+- 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
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at dl_javascript@nhn.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org

+# Contributing to TOAST UI
+
+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.
+
+## 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.
+
+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.**
+
+## 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.
+
+## 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'
+
+#### 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
+
+Copyright (c) 2019 NHN Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

+{
+  "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();

+.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": "project",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.5.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
-    "tui-image-editor": "^3.11.0",
-    "web-vitals": "^0.2.4"
+  "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"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+  "main": "dist/tui-image-editor.js",
+  "files": [
+    "src",
+    "dist",
+    "index.d.ts"
+  ],
+  "description": "TOAST UI Component: ImageEditor",
+  "keywords": [
+    "nhn",
+    "nhnent",
+    "tui",
+    "component",
+    "image",
+    "editor",
+    "canvas",
+    "fabric"
+  ],
+  "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"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "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",
+    "serve": "webpack-dev-server",
+    "doc:dev": "tuidoc --dev",
+    "doc": "tuidoc",
+    "tslint": "tslint index.d.ts"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "core-js-pure": "^3.6.4",
+    "fabric": "4.2.0",
+    "tui-code-snippet": "^1.5.0",
+    "tui-color-picker": "^2.2.6"
   }
 }

+/* 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;

+/**
+ * @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;

+/**
+ * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
+ * @fileoverview Image loader
+ */
+import Component from '../interface/component';
+import { componentNames, rejectMessages } from '../consts';
+import { Promise } from '../util';
+
+const imageOption = {
+  padding: 0,
+  crossOrigin: 'Anonymous',
+};
+
+/**
+ * ImageLoader components
+ * @extends {Component}
+ * @class ImageLoader
+ * @param {Graphics} graphics - Graphics instance
+ * @ignore
+ */
+class ImageLoader extends Component {
+  constructor(graphics) {
+    super(componentNames.IMAGE_LOADER, graphics);
+  }
+
+  /**
+   * Load image from url
+   * @param {?string} imageName - File name
+   * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image
+   * @returns {Promise}
+   */
+  load(imageName, img) {
+    let promise;
+
+    if (!imageName && !img) {
+      // Back to the initial state, not error.
+      const canvas = this.getCanvas();
+
+      canvas.backgroundImage = null;
+      canvas.renderAll();
+
+      promise = new Promise((resolve) => {
+        this.setCanvasImage('', null);
+        resolve();
+      });
+    } else {
+      promise = this._setBackgroundImage(img).then((oImage) => {
+        this.setCanvasImage(imageName, oImage);
+        this.adjustCanvasDimension();
+
+        return oImage;
+      });
+    }
+
+    return promise;
+  }
+
+  /**
+   * Set background image
+   * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to
+   * @returns {Promise}
+   * @private
+   */
+  _setBackgroundImage(img) {
+    if (!img) {
+      return Promise.reject(rejectMessages.loadImage);
+    }
+
+    return new Promise((resolve, reject) => {
+      const canvas = this.getCanvas();
+
+      canvas.setBackgroundImage(
+        img,
+        () => {
+          const oImage = canvas.backgroundImage;
+
+          if (oImage && oImage.getElement()) {
+            resolve(oImage);
+          } else {
+            reject(rejectMessages.loadingImageFailed);
+          }
+        },
+        imageOption
+      );
+    });
+  }
+}
+
+export default ImageLoader;