Deploy full app to HF Space

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  extends: ['tui/es6', 'plugin:jest/recommended', 'plugin:prettier/recommended'],
+  plugins: ['jest', 'prettier'],
+  env: {
+    browser: true,
+    amd: true,
+    node: true,
+    es6: true,
+    jest: true,
+    'jest/globals': true,
+  },
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    sourceType: 'module',
+    babelOptions: {
+      rootMode: 'upward',
+    },
+  },
+  ignorePatterns: ['node_modules/*', 'dist', 'examples'],
+  rules: {
+    'prefer-destructuring': [
+      'error',
+      {
+        VariableDeclarator: { array: true, object: true },
+        AssignmentExpression: { array: false, object: false },
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.spec.js'],
+      rules: {
+        'max-nested-callbacks': ['error', { max: 5 }],
+        'dot-notation': ['error', { allowKeywords: true }],
+        'no-undefined': 'off',
+        'jest/expect-expect': ['error', { assertFunctionNames: ['expect', 'assert*'] }],
+      },
+    },
+  ],
+};

.gitattributes

@@ -33,5 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+apps/vue-image-editor/.storybook/img/sampleImage2.png filter=lfs diff=lfs merge=lfs -text
+apps/image-editor/tests/fixtures/sampleImage.jpg filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: Bug
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,38 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: Enhancement, Need Discussion
+assignees: ''
+---
+
+<!--
+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 imageEditor 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 sample code, 'CodePen' or 'jsfiddle' links. -->
+
+```js
+// Write example code
+```
+
+## Expected Behavior
+
+<!-- Write a description of the future action. -->

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,29 @@
+---
+name: Question
+about: Create a question about imageEditor
+title: ''
+labels: Question
+assignees: ''
+---
+
+<!--
+  To make it easier for us to help you, please include as much useful information as possible.
+
+  Useful Links:
+  - tutorial: https://github.com/nhn/tui.image-editor/tree/master/docs
+  - API/Example: https://nhn.github.io/tui.image-editor/latest
+
+  Before opening a new issue, please search existing issues https://github.com/nhn/tui.image-editor/issues
+-->
+
+**Summary**
+A clear and concise description of what the question is.
+
+**Screenshots**
+If applicable, add screenshots to help explain your question.
+
+**Version**
+Write the version of the imageEditor you are currently using.
+
+**Additional context**
+Add any other context about the problem here.

.github/auto-comment.yml

@@ -0,0 +1,10 @@
+# Comment to a new issue.
+issuesOpened: >
+  Thank you for raising an issue. 
+  
+  We will try and get back to you as soon as possible.
+  
+  
+  Please make sure you have filled out issue respecting our form **in English** and given us as much context as possible.
+  **If not, the issue will be closed or not replied.**
+  

.github/composite-actions/build-package/action.yml

@@ -0,0 +1,43 @@
+name: 'Build'
+description: 'Build package'
+inputs:
+  ROOT_CACHE_KEY:
+    description: 'Key of root dependencies cache'
+    required: true
+  BUILD_CACHE_KEY:
+    description: 'Key of build cache'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 15.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '15.x'
+        registry-url: https://registry.npmjs.org/
+    - name: Check root dependencies cache
+      uses: actions/cache@v2
+      with:
+        path: ./node_modules
+        key: ${{ inputs.ROOT_CACHE_KEY }}
+    - name: Install package dependencies and remove package-lock file
+      working-directory: ./apps/image-editor
+      run: |
+        npm install && rm -rf ./package-lock.json
+      shell: bash
+    - name: Check build cache
+      uses: actions/cache@v2
+      id: cache_built_packages
+      with:
+        path: ./apps/image-editor/dist
+        key: ${{ inputs.BUILD_CACHE_KEY }}
+    - name: Build package
+      working-directory: ./apps/image-editor
+      run: |
+        if echo ${{ steps.cache_built_packages.outputs.cache-hit }} | grep -c "true"
+        then
+          echo "Cache hit - skipping building"
+        else
+          npm run build
+        fi
+      shell: bash

.github/composite-actions/install-dependencies/action.yml

@@ -0,0 +1,33 @@
+name: 'Install root dependencies using cache'
+description: 'Set Node.js version and install node_modules'
+outputs:
+  root_cache_key:
+    description: 'Key of root dependencies cache'
+    value: ${{ steps.root_lockfile_hash.outputs.hash }}
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 15.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '15.x'
+        registry-url: https://registry.npmjs.org/
+    - name: Compute root dependencies cache key
+      id: root_lockfile_hash
+      run: echo "::set-output name=hash::${{ hashFiles('package-lock.json') }}"
+      shell: bash
+    - name: Check root dependencies cache
+      uses: actions/cache@v2
+      id: root_cache_dependencies
+      with:
+        path: ./node_modules
+        key: ${{ steps.root_lockfile_hash.outputs.hash }}
+    - name: Install root dependencies
+      run: |
+        if echo ${{ steps.root_cache_dependencies.outputs.cache-hit }} | grep -c "true"
+        then
+          echo "Cache hit - skipping root dependency installation"
+        else
+          npm install
+        fi
+      shell: bash

.github/composite-actions/publish-cdn/action.yml

@@ -0,0 +1,54 @@
+name: 'Publish CDN'
+description: 'Publish CDN'
+inputs:
+  ROOT_CACHE_KEY:
+    description: 'Key of root dependencies cache'
+    required: true
+  BUILD_CACHE_KEY:
+    description: 'Key of build cache'
+    required: true
+  TOAST_CLOUD_TENANTID:
+    description: 'Tenant id for CDN'
+    required: true
+  TOAST_CLOUD_STORAGEID:
+    description: 'Storage id for CDN'
+    required: true
+  TOAST_CLOUD_USERNAME:
+    description: 'User name for CDN'
+    required: true
+  TOAST_CLOUD_PASSWORD:
+    description: 'password for CDN'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 15.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '15.x'
+        registry-url: https://registry.npmjs.org/
+    - name: Check root dependencies cache
+      uses: actions/cache@v2
+      with:
+        path: ./node_modules
+        key: ${{ inputs.ROOT_CACHE_KEY }}
+    - name: Install package dependencies and remove package-lock file
+      working-directory: ./apps/image-editor
+      run: |
+        npm install && rm -rf ./package-lock.json
+      shell: bash
+    - name: Check build cache
+      uses: actions/cache@v2
+      with:
+        path: ./apps/image-editor/dist
+        key: ${{ inputs.BUILD_CACHE_KEY }}
+    - name: Upload files to CDN
+      working-directory: ./apps/image-editor
+      run: |
+        npm run publish:cdn
+      env:
+        TOAST_CLOUD_TENANTID: ${{ inputs.TOAST_CLOUD_TENANTID }}
+        TOAST_CLOUD_STORAGEID: ${{ inputs.TOAST_CLOUD_STORAGEID }}
+        TOAST_CLOUD_USERNAME: ${{ inputs.TOAST_CLOUD_USERNAME }}
+        TOAST_CLOUD_PASSWORD: ${{ inputs.TOAST_CLOUD_PASSWORD }}
+      shell: bash

.github/composite-actions/publish-docs/action.yml

@@ -0,0 +1,77 @@
+name: 'Publish docs'
+description: 'Publish docs'
+inputs:
+  ROOT_CACHE_KEY:
+    description: 'Key of root dependencies cache'
+    required: true
+  BUILD_CACHE_KEY:
+    description: 'Key of build'
+    required: true
+  GITHUB_TOKEN:
+    description: 'Github token'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 15.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '15.x'
+        registry-url: https://registry.npmjs.org/
+    - name: Get package version
+      id: version
+      uses: PostHog/check-package-version@v2
+      with:
+        path: ./apps/image-editor/
+    - name: Check root dependencies cache
+      uses: actions/cache@v2
+      with:
+        path: ./node_modules
+        key: ${{ inputs.ROOT_CACHE_KEY }}
+    - name: Install package dependencies and remove package-lock file
+      working-directory: ./apps/image-editor
+      run: |
+        npm install && rm -rf ./package-lock.json
+      shell: bash
+    - name: Check build cache
+      uses: actions/cache@v2
+      with:
+        path: ./apps/image-editor/dist
+        key: ${{ inputs.BUILD_CACHE_KEY }}
+    - name: Install toast-ui doc
+      run: npm i -g @toast-ui/doc
+      shell: bash
+    - name: Run doc
+      working-directory: ./apps/image-editor
+      run: |
+        npm run doc
+        mv _${{ steps.version.outputs.committed-version }} ../../_${{ steps.version.outputs.committed-version }}
+        mv -i _latest ../../_latest
+        rm -rf tmpdoc
+        git stash --include-untracked
+      shell: bash
+    - name: Checkout gh-pages branch
+      uses: actions/checkout@v2
+      with:
+        ref: gh-pages
+    - name: Commit files
+      run: |
+        git config --local user.name "lja1018"
+        git config --local user.email "jaeeon.lim@nhn.com"
+        rm -rf latest
+        rm -rf ${{ steps.version.outputs.committed-version }}
+        git stash pop
+        mv _${{ steps.version.outputs.committed-version }} ${{ steps.version.outputs.committed-version }}
+        mv -i _latest latest
+        git add .
+        git commit -m "v${{ steps.version.outputs.committed-version }}"
+      shell: bash
+    - name: Push changes
+      uses: ad-m/github-push-action@master
+      with:
+        github_token: ${{ inputs.GITHUB_TOKEN }}
+        branch: gh-pages
+    - name: Checkout branch
+      uses: actions/checkout@v2
+      with:
+        ref: master

.github/composite-actions/publish-package/action.yml

@@ -0,0 +1,45 @@
+name: 'Publish package'
+description: 'Publish package'
+inputs:
+  ROOT_CACHE_KEY:
+    description: 'Key of root dependencies cache'
+    required: true
+  BUILD_CACHE_KEY:
+    description: 'Key of build cache'
+    required: true
+  NODE_AUTH_TOKEN:
+    description: 'NPM authorization token'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    - name: Use Node.js 15.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '15.x'
+        registry-url: https://registry.npmjs.org/
+    - name: Checkout production branch
+      uses: actions/checkout@v2
+      with:
+        ref: production
+    - name: Check root dependencies cache
+      uses: actions/cache@v2
+      with:
+        path: ./node_modules
+        key: ${{ inputs.ROOT_CACHE_KEY }}
+    - name: Install package dependencies and remove package-lock file
+      working-directory: ./apps/image-editor
+      run: |
+        npm install && rm -rf ./package-lock.json
+      shell: bash
+    - name: Check build cache
+      uses: actions/cache@v2
+      with:
+        path: ./apps/image-editor/dist
+        key: ${{ inputs.BUILD_CACHE_KEY }}
+    - name: Publish package
+      working-directory: ./apps/image-editor
+      run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{ inputs.NODE_AUTH_TOKEN }}
+      shell: bash

.github/stale.yml

@@ -0,0 +1,30 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+
+# Number of days of inactivity before an Issue or Pull Request becomes stale
+daysUntilStale: 30
+
+# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
+# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
+daysUntilClose: 7
+
+# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
+exemptLabels:
+  - Feature
+  - Enhancement
+  - Bug
+  - NHN Cloud
+
+# Label to use when marking as stale
+staleLabel: inactive
+
+# Comment to post when marking as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as inactive because there hasn’t been much going on it lately.
+  It is going to be closed after 7 days. Thanks!
+# Comment to post when removing the stale label.
+# unmarkComment: >
+#   Your comment here.
+
+# Comment to post when closing a stale Issue or Pull Request.
+closeComment: >
+  This issue will be closed due to inactivity. Thanks for your contribution!

.gitignore

@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# 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
+
+#JSDOC
+doc
+
+# IDEA
+.idea
+*.iml
+
+# Window
+Thumbs.db
+Desktop.ini
+
+# MAC
+.DS_Store
+
+# SVN
+.svn
+
+# eclipse
+.project
+.metadata
+
+# build
+build
+
+# Atom
+tags
+.ctags
+.tern-project
+
+# etc
+.agignore
+*.swp
+etc
+temp
+api
+.tern-port
+*.vim
+.\#*
+.vscode
+
+dist
+!_*/dist/

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "vueIndentScriptAndStyle": false
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,73 @@
+# 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.md

@@ -0,0 +1,107 @@
+# 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)

ISSUE_TEMPLATE.md

@@ -0,0 +1,30 @@
+<!--
+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. -->

LICENSE

@@ -0,0 +1,22 @@
+
+The MIT License
+
+Copyright (c) 2019 NHN Cloud 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.

README.md

@@ -1,14 +1,206 @@
----
-title: Image Editor
-emoji: 🔥
-colorFrom: indigo
-colorTo: blue
-sdk: gradio
-sdk_version: 5.38.0
-app_file: app.py
-pinned: false
-license: apache-2.0
-short_description: Image Editor
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ![Toast UI ImageEditor](https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png)
+
+> Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.
+
+[![github version](https://img.shields.io/github/release/nhn/tui.image-editor.svg)](https://github.com/nhn/tui.image-editor/releases/latest)
+[![npm version](https://img.shields.io/npm/v/tui-image-editor.svg)](https://www.npmjs.com/package/tui-image-editor)
+[![license](https://img.shields.io/github/license/nhn/tui.image-editor.svg)](https://github.com/nhn/tui.image-editor/blob/master/LICENSE)
+[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/tui.image-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
+[![code with hearth by NHN Cloud](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN_CLOUD-ff1414.svg)](https://github.com/nhn)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+
+## 📦 Packages
+
+- [toast-ui.image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor
+) - Plain JavaScript component implemented by [NHN Cloud](https://github.com/nhn).
+- [toast-ui.vue-image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/vue-image-editor
+) - **Vue** wrapper component is powered by [NHN Cloud](https://github.com/nhn).
+- [toast-ui.react-image-editor](https://github.com/nhn/tui.image-editor/tree/master/apps/react-image-editor
+) - **React** wrapper component is powered by [NHN Cloud](https://github.com/nhn).
+
+![6 -20-2018 17-45-54](https://user-images.githubusercontent.com/35218826/41647896-7b218ae0-74b2-11e8-90db-d7805cc23e8c.gif)
+
+## 🚩 Table of Contents
+
+- [!Toast UI ImageEditor](#)
+  - [📦 Packages](#packages)
+  - [🚩 Table of Contents](#-table-of-contents)
+  - [🌏 Browser Support](#-browser-support)
+  - [💪 Has full features that stick to the basic.](#-has-full-features-that-stick-to-the-basic)
+    - [Photo manipulation](#photo-manipulation)
+    - [Integration function](#integration-function)
+    - [Powerful filter function](#powerful-filter-function)
+  - [🙆 Easy to apply the size and design you want](#-easy-to-apply-the-size-and-design-you-want)
+    - [Can be used everywhere.](#can-be-used-everywhere)
+    - [Nice default & Fully customizable Themes](#nice-default--fully-customizable-themes)
+  - [🎨 Features](#-features)
+  - [🔧 Pull Request Steps](#-pull-request-steps)
+    - [Setup](#setup)
+    - [Pull Request](#pull-request)
+  - [📙 Documents](#-documents)
+  - [💬 Contributing](#-contributing)
+  - [🔩 Dependency](#-dependency)
+  - [🍞 TOAST UI Family](#-toast-ui-family)
+  - [🚀 Used By](#-used-by)
+  - [📜 License](#-license)
+
+## 🌏 Browser Support
+
+| <img src="https://user-images.githubusercontent.com/1215767/34348387-a2e64588-ea4d-11e7-8267-a43365103afe.png" alt="Chrome" width="16px" height="16px" /> Chrome | <img src="https://user-images.githubusercontent.com/1215767/34348590-250b3ca2-ea4f-11e7-9efb-da953359321f.png" alt="IE" width="16px" height="16px" /> Internet Explorer | <img src="https://user-images.githubusercontent.com/1215767/34348380-93e77ae8-ea4d-11e7-8696-9a989ddbbbf5.png" alt="Edge" width="16px" height="16px" /> Edge | <img src="https://user-images.githubusercontent.com/1215767/34348394-a981f892-ea4d-11e7-9156-d128d58386b9.png" alt="Safari" width="16px" height="16px" /> Safari | <img src="https://user-images.githubusercontent.com/1215767/34348383-9e7ed492-ea4d-11e7-910c-03b39d52f496.png" alt="Firefox" width="16px" height="16px" /> Firefox |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                               Yes                                                                                |                                                                                   10+                                                                                   |                                                                             Yes                                                                              |                                                                               Yes                                                                                |                                                                                Yes                                                                                 |
+
+## 💪 Has full features that stick to the basic.
+
+### Photo manipulation
+
+- Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter
+
+### Integration function
+
+- Download, Image Load, Undo, Redo, Reset, Delete Object(Shape, Line, Mask Image...)
+
+<table>
+    <tbody>
+        <tr>
+            <th width="20%">Crop</th>
+            <th width="20%">Flip</th>
+            <th width="20%">Rotation</th>
+            <th width="20%">Drawing</th>
+            <th width="20%">Shape</th>
+        </tr>
+        <tr>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40904241-0c28ec68-6815-11e8-8296-89a1716b22d8.png" alt="2018-06-04 4 33 16" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40904521-f7c6e184-6815-11e8-8ba3-c94664da69a2.png" alt="2018-06-04 4 40 06" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40904664-656aa748-6816-11e8-9943-6607c209deac.png" alt="2018-06-04 4 43 02" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40904850-0f26ebde-6817-11e8-97d0-d3a7e4bc02da.png" alt="2018-06-04 4 47 40" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40905037-a026296a-6817-11e8-9d28-9e1ca7bc58c4.png" alt="2018-06-04 4 51 45" style="max-width:100%;"></td>
+        </tr>
+        <tr>
+            <th>Icon</th>
+            <th>Text</th>
+            <th>Mask</th>
+            <th>Filter</th>
+            <th></th>
+        </tr>
+        <tr>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40931205-2d255db6-6865-11e8-98af-ad34c5a01da1.png" alt="2018-06-05 2 06 29" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40931484-46253948-6866-11e8-8a04-fa042920e457.png" alt="2018-06-05 2 14 36" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40931743-21eeb346-6867-11e8-8e31-a59f7a43482b.png" alt="2018-06-05 2 20 46" style="max-width:100%;"></td>
+            <td><img src="https://user-images.githubusercontent.com/35218826/40932016-093ed1f4-6868-11e8-8224-a048c3ee8a09.png" alt="2018-06-05 2 27 10" style="max-width:100%;"></td>
+            <td></td>
+        </tr>
+    </tbody>
+</table>
+
+### Powerful filter function
+
+- Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend
+
+| Grayscale                                                                                                          | Noise                                                                                                          | Emboss                                                                                                          | Pixelate                                                                                                          |
+| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| ![grayscale](https://user-images.githubusercontent.com/35218826/41753470-930fb7b0-7608-11e8-9966-1c890e73d131.png) | ![noise](https://user-images.githubusercontent.com/35218826/41753458-9013bc82-7608-11e8-91d9-74dcc3ffce31.png) | ![emboss](https://user-images.githubusercontent.com/35218826/41753460-906c018a-7608-11e8-8861-c135c0117cea.png) | ![pixelate](https://user-images.githubusercontent.com/35218826/41753461-90a614a6-7608-11e8-97a7-0d3b7bb4aec4.png) |
+
+| Sepia                                                                                                          | Sepia2                                                                                                          | Blend-righten                                                                                                          | Blend-diff                                                                                                          | Invert                                                                                                          |
+| -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| ![sepia](https://user-images.githubusercontent.com/35218826/41753464-91acc41c-7608-11e8-8652-572f935ea704.png) | ![sepia2](https://user-images.githubusercontent.com/35218826/41753640-91e57248-7609-11e8-8960-145e0de57e39.png) | ![blend-righten](https://user-images.githubusercontent.com/35218826/41753462-9114bc3a-7608-11e8-9ab4-16ce20a34321.png) | ![blend-diff](https://user-images.githubusercontent.com/35218826/41753465-91e4baf2-7608-11e8-9b8f-79e1b956d387.png) | ![invert](https://user-images.githubusercontent.com/35218826/41753466-9260b224-7608-11e8-848a-73231a02ae3a.png) |
+
+| Multifly                                                                                                          | Tint                                                                                                          | Brightness                                                                                                          | Remove-white                                                                                                          | Sharpen                                                                                                          |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| ![multifly](https://user-images.githubusercontent.com/35218826/41753467-92baae28-7608-11e8-80d2-187a310213f5.png) | ![tint](https://user-images.githubusercontent.com/35218826/41753468-92e6391c-7608-11e8-8977-651366ebe693.png) | ![brightness](https://user-images.githubusercontent.com/35218826/41753457-8fb3d3c6-7608-11e8-9e1d-10c6e4aeba68.png) | ![remove-white](https://user-images.githubusercontent.com/35218826/41753463-917feeb0-7608-11e8-862d-eb3af84e120a.png) | ![sharpen](https://user-images.githubusercontent.com/35218826/41753639-91b8470a-7609-11e8-8d13-48ac3232365b.png) |
+
+## 🙆 Easy to apply the size and design you want
+
+### Can be used everywhere.
+
+- Widely supported in browsers including IE10.
+- Option to support various display sizes.
+  (allows you to use the editor features on your web pages at least over **550 \* 450 sizes**)
+
+  ![2018-06-04 5 35 25](https://user-images.githubusercontent.com/35218826/40907369-9221f482-681e-11e8-801c-78d6f2e246a8.png)
+
+### Nice default & Fully customizable Themes
+
+- Has a white and black theme, and you can modify the theme file to customize it.
+- Has an API so that you can create your own instead of the built-in.
+
+| black - top                                                                                                                 | black - bottom                                                                                                              | white - left                                                                                                                | white - right                                                                                                               |
+| --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| ![2018-06-05 1 41 13](https://user-images.githubusercontent.com/35218826/40930753-8b72502e-6863-11e8-9cff-1719aee9aef0.png) | ![2018-06-05 1 40 24](https://user-images.githubusercontent.com/35218826/40930755-8bcee136-6863-11e8-8e28-0a6722d38c59.png) | ![2018-06-05 1 41 48](https://user-images.githubusercontent.com/35218826/40930756-8bfe0b50-6863-11e8-8682-bab11a0a2289.png) | ![2018-06-05 1 42 27](https://user-images.githubusercontent.com/35218826/40930754-8ba1dba0-6863-11e8-9439-cc059241b675.png) |
+
+## 🎨 Features
+
+- Load image to canvas
+- Undo/Redo (With shortcut)
+- Crop
+- Flip
+- Rotation
+- Resize
+- Free drawing
+- Line drawing
+- Shape
+- Icon
+- Text
+- Mask Filter
+- Image Filter
+
+## 🔧 Pull Request Steps
+
+TOAST UI products are open source, so you can create a pull request(PR) after you fix issues.
+Run npm scripts and develop yourself with the following process.
+
+### Setup
+
+Fork `develop` branch into your personal repository.
+Clone it to local computer. Install node modules.
+Before starting development, you should check if there are any errors.
+
+```sh
+$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
+$ cd [[repo name]]
+$ npm install
+```
+
+### Pull Request
+
+Before uploading your PR, run test one last time to check if there are any errors.
+If it has no errors, commit and then push it!
+
+For more information on PR's steps, please see links in the Contributing section.
+
+## 📙 Documents
+
+- [Getting Started](https://github.com/nhn/tui.image-editor/tree/master/docs/Basic-Tutorial.md)
+- [Tutorial](https://github.com/nhn/tui.image-editor/tree/master/docs)
+- [Example](http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi)
+- [API](http://nhn.github.io/tui.image-editor/latest)
+
+## 💬 Contributing
+
+- [Code of Conduct](https://github.com/nhn/tui.image-editor/blob/master/CODE_OF_CONDUCT.md)
+- [Contributing guideline](https://github.com/nhn/tui.image-editor/blob/master/CONTRIBUTING.md)
+- [Issue guideline](https://github.com/nhn/tui.image-editor/blob/master/ISSUE_TEMPLATE.md)
+- [Commit convention](https://github.com/nhn/tui.image-editor/blob/production/docs/COMMIT_MESSAGE_CONVENTION.md)
+
+## 🔩 Dependency
+
+- [fabric.js](https://github.com/fabricjs/fabric.js/releases) = 4.2.0
+- [tui.code-snippet](https://github.com/nhn/tui.code-snippet/releases/tag/v1.5.0) >= 1.5.0
+- [tui.color-picker](https://github.com/nhn/tui.color-picker/releases/tag/v2.2.6) >= 2.2.6
+
+## 🍞 TOAST UI Family
+
+- [TOAST UI Editor](https://github.com/nhn/tui.editor)
+- [TOAST UI Grid](https://github.com/nhn/tui.grid)
+- [TOAST UI Chart](https://github.com/nhn/tui.chart)
+- [TOAST UI Calendar](https://github.com/nhn/tui.calendar)
+- [TOAST UI Components](https://github.com/nhn)
+
+## 🚀 Used By
+
+- [NHN Dooray! - Collaboration Service (Project, Messenger, Mail, Calendar, Drive, Wiki, Contacts)](https://dooray.com/home/)
+- [Catalyst](https://catalystapp.co/)
+
+## 📜 License
+
+[MIT LICENSE](https://github.com/nhn/tui.image-editor/blob/master/LICENSE)

app.py

@@ -0,0 +1,24 @@
+import gradio as gr
+from PIL import Image
+from toast_image_editor import main as editor_main
+
+def edit_image(input_img):
+    # Convert Gradio input to PIL Image if needed
+    if isinstance(input_img, str):
+        input_img = Image.open(input_img)
+
+    # Call the core editing function (customize if needed)
+    output_img = editor_main(input_img)
+    return output_img
+
+demo = gr.Interface(
+    fn=edit_image,
+    inputs=gr.Image(type="pil"),
+    outputs=gr.Image(type="pil"),
+    title="Toast Image Editor",
+    description="Simple image editing powered by Toast Image Editor (Fanu2)"
+)
+
+if __name__ == "__main__":
+    demo.launch()
+

apps/image-editor/README.md

@@ -0,0 +1,193 @@
+# ![Toast UI ImageEditor](https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png)
+
+> Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.
+
+[![npm version](https://img.shields.io/npm/v/tui-image-editor.svg)](https://www.npmjs.com/package/tui-image-editor)
+
+## 🚩 Table of Contents
+
+- [Collect statistics on the use of open source](#Collect-statistics-on-the-use-of-open-source)
+- [Install](#-install)
+  - [Via Package Manager](#via-package-manager)
+  - [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)
+  - [Download Source Files](#download-source-files)
+- [Usage](#-usage)
+  - [HTML](#html)
+  - [JavaScript](#javascript)
+  - [Menu svg icon setting](#menu-svg-icon-setting)
+  - [TypeScript](#typescript)
+
+## Collect statistics on the use of open source
+
+TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` option when creating the instance.
+
+```js
+const options = {
+  //...
+  usageStatistics: false,
+};
+
+const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);
+```
+
+Or, include [`tui-code-snippet`](https://github.com/nhn/tui.code-snippet)(**v1.4.0** or **later**) and then immediately write the options as follows:
+
+```js
+tui.usageStatistics = false;
+```
+
+## 💾 Install
+
+The TOAST UI products can be installed by using the package manager or downloading the source directly.
+However, we highly recommend using the package manager.
+
+### Via Package Manager
+
+You can find TOAST UI products via [npm](https://www.npmjs.com/) and [bower](https://bower.io/) package managers.
+Install by using the commands provided by each package manager.
+When using npm, be sure [Node.js](https://nodejs.org) is installed in the environment.
+
+#### npm
+
+##### 1. ImageEditor installation
+
+```sh
+$ npm install --save tui-image-editor # Latest version
+$ npm install --save tui-image-editor@<version> # Specific version
+```
+
+##### 2. If the installation of the `fabric.js` dependency module does not go smoothly
+
+To solve the problem, you need to refer to [Some Steps](https://github.com/fabricjs/fabric.js#install-with-npm) to solve the problem.
+
+#### bower
+
+```sh
+$ bower install tui-image-editor # Latest version
+$ bower install tui-image-editor#<tag> # Specific version
+```
+
+### Via Contents Delivery Network (CDN)
+
+TOAST UI products are available over the CDN powered by [NHN Cloud](https://www.toast.com).
+
+You can use the CDN as below.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
+/>
+<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
+```
+
+If you want to use a specific version, use the tag name instead of `latest` in the URL.
+
+The CDN directory has the following structure.
+
+```
+tui-image-editor/
+├─ latest/
+│  ├─ tui-image-editor.js
+│  ├─ tui-image-editor.min.js
+│  └─ tui-image-editor.css
+├─ v3.1.0/
+│  ├─ ...
+```
+
+### Download Source Files
+
+- [Download bundle files from `dist` folder](https://github.com/nhn/tui.image-editor/tree/production/dist)
+- [Download all sources for each version](https://github.com/nhn/tui.image-editor/releases)
+
+## 🔨 Usage
+
+### HTML
+
+Add the container element where TOAST UI ImageEditor will be created.
+
+```html
+<body>
+  ...
+  <div id="tui-image-editor"></div>
+  ...
+</body>
+```
+
+### javascript
+
+Add dependencies & initialize ImageEditor class with given element to make an image editor.
+
+```javascript
+const ImageEditor = require('tui-image-editor');
+const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver
+const blackTheme = require('./js/theme/black-theme.js');
+const locale_ru_RU = {
+  // override default English locale to your custom
+  Crop: 'Обзрезать',
+  'Delete-all': 'Удалить всё',
+  // etc...
+};
+const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+  includeUI: {
+    loadImage: {
+      path: 'img/sampleImage.jpg',
+      name: 'SampleImage',
+    },
+    locale: locale_ru_RU,
+    theme: blackTheme, // or whiteTheme
+    initMenu: 'filter',
+    menuBarPosition: 'bottom',
+  },
+  cssMaxWidth: 700,
+  cssMaxHeight: 500,
+  selectionStyle: {
+    cornerSize: 20,
+    rotatingPointOffset: 70,
+  },
+});
+```
+
+Or
+
+```javascript
+const ImageEditor = require('tui-image-editor');
+const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+  cssMaxWidth: 700,
+  cssMaxHeight: 500,
+  selectionStyle: {
+    cornerSize: 20,
+    rotatingPointOffset: 70,
+  },
+});
+```
+
+### Menu svg icon setting
+
+#### There are two ways to set icons.
+
+1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
+2. There is a way to use the **actual physical svg file** and **set the file location manually**.
+
+Can find more details in [this document](https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md#4-menu-submenu-svg-icon-setting).
+
+### TypeScript
+
+If you use TypeScript, You must `import module = require('module')` on importing.
+[`export =` and `import = require()`](https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require)
+
+```typescript
+import ImageEditor = require('tui-image-editor');
+const FileSaver = require('file-saver'); //to download edited image to local. Use after npm install file-saver
+
+const instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+  cssMaxWidth: 700,
+  cssMaxHeight: 500,
+  selectionStyle: {
+    cornerSize: 20,
+    rotatingPointOffset: 70,
+  },
+});
+```
+
+See [details](https://nhn.github.io/tui.image-editor/latest) for additional information.

apps/image-editor/__mocks__/fileMock.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

apps/image-editor/__mocks__/svgMock.js

@@ -0,0 +1,5 @@
+module.exports = {
+  process() {
+    return `module.exports = 'PGRlZnMgaWQ9InR1aS1pbWFnZS1lZGl0b3Itc3ZnLWRlZmF1bHQtaWNvbnMiPg=='`;
+  },
+};

apps/image-editor/createConfigVariable.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const config = require(path.resolve(__dirname, '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();

apps/image-editor/examples/css/service-basic.css

@@ -0,0 +1,128 @@
+.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;
+}

apps/image-editor/examples/css/service-mobile.css

@@ -0,0 +1,203 @@
+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;
+}

apps/image-editor/examples/css/tui-example-style.css

@@ -0,0 +1,21 @@
+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;
+}

apps/image-editor/examples/example01-includeUi.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.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>

apps/image-editor/examples/example02-useApiDirect.html

@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>1. Basic</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="css/service-basic.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="body-container">
+      <div class="tui-image-editor-controls">
+        <div class="header">
+          <img class="logo" src="img/TOAST UI Component.png" />
+          <span class="name"> Image Editor</span>
+          <ul class="menu">
+            <li class="menu-item border input-wrapper">
+              Load
+              <input type="file" accept="image/*" id="input-image-file" />
+            </li>
+            <li class="menu-item border" id="btn-download">Download</li>
+          </ul>
+        </div>
+        <ul class="menu">
+          <li class="menu-item disabled" id="btn-undo">Undo</li>
+          <li class="menu-item disabled" id="btn-redo">Redo</li>
+          <li class="menu-item" id="btn-clear-objects">ClearObjects</li>
+          <li class="menu-item" id="btn-remove-active-object">RemoveActiveObject</li>
+          <li class="menu-item" id="btn-crop">Crop</li>
+          <li class="menu-item" id="btn-flip">Flip</li>
+          <li class="menu-item" id="btn-rotation">Rotation</li>
+          <li class="menu-item" id="btn-draw-line">DrawLine</li>
+          <li class="menu-item" id="btn-draw-shape">Shape</li>
+          <li class="menu-item" id="btn-add-icon">Icon</li>
+          <li class="menu-item" id="btn-text">Text</li>
+          <li class="menu-item" id="btn-mask-filter">Mask</li>
+          <li class="menu-item" id="btn-image-filter">Filter</li>
+        </ul>
+        <div class="sub-menu-container" id="crop-sub-menu">
+          <ul class="menu">
+            <li class="menu-item" id="btn-apply-crop">Apply</li>
+            <li class="menu-item" id="btn-cancel-crop">Cancel</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="flip-sub-menu">
+          <ul class="menu">
+            <li class="menu-item" id="btn-flip-x">FlipX</li>
+            <li class="menu-item" id="btn-flip-y">FlipY</li>
+            <li class="menu-item" id="btn-reset-flip">Reset</li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="rotation-sub-menu">
+          <ul class="menu">
+            <li class="menu-item" id="btn-rotate-clockwise">Clockwise(30)</li>
+            <li class="menu-item" id="btn-rotate-counter-clockwise">Counter-Clockwise(-30)</li>
+            <li class="menu-item no-pointer">
+              <label>
+                Range input
+                <input id="input-rotation-range" type="range" min="-360" value="0" max="360" />
+              </label>
+            </li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container menu" id="draw-line-sub-menu">
+          <ul class="menu">
+            <li class="menu-item">
+              <label>
+                <input type="radio" name="select-line-type" value="freeDrawing" checked="checked" />
+                Free drawing
+              </label>
+              <label>
+                <input type="radio" name="select-line-type" value="lineDrawing" />
+                Straight line
+              </label>
+            </li>
+            <li class="menu-item">
+              <div id="tui-brush-color-picker">Brush color</div>
+            </li>
+            <li class="menu-item">
+              <label class="menu-item no-pointer">
+                Brush width
+                <input id="input-brush-width-range" type="range" min="5" max="30" value="12" />
+              </label>
+            </li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="draw-shape-sub-menu">
+          <ul class="menu">
+            <li class="menu-item">
+              <label>
+                <input type="radio" name="select-shape-type" value="rect" checked="checked" />
+                rect
+              </label>
+              <label>
+                <input type="radio" name="select-shape-type" value="circle" />
+                circle
+              </label>
+              <label>
+                <input type="radio" name="select-shape-type" value="triangle" />
+                triangle
+              </label>
+            </li>
+            <li class="menu-item">
+              <select name="select-color-type">
+                <option value="fill">Fill</option>
+                <option value="stroke">Stroke</option>
+              </select>
+              <label>
+                <input
+                  type="radio"
+                  name="input-check-fill"
+                  id="input-check-transparent"
+                  value="transparent"
+                />
+                transparent
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="input-check-fill"
+                  id="input-check-filter"
+                  value="filter"
+                />
+                filter
+              </label>
+              <div id="tui-shape-color-picker"></div>
+            </li>
+            <li class="menu-item">
+              <label class="menu-item no-pointer">
+                Stroke width
+                <input id="input-stroke-width-range" type="range" min="0" max="300" value="12" />
+              </label>
+            </li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="icon-sub-menu">
+          <ul class="menu">
+            <li class="menu-item">
+              <div id="tui-icon-color-picker">Icon color</div>
+            </li>
+            <li class="menu-item border" id="btn-register-icon">Register custom icon</li>
+            <li class="menu-item icon-text" data-icon-type="arrow">➡</li>
+            <li class="menu-item icon-text" data-icon-type="cancel">✖</li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="text-sub-menu">
+          <ul class="menu">
+            <li class="menu-item">
+              <div>
+                <button class="btn-text-style" data-style-type="b">Bold</button>
+                <button class="btn-text-style" data-style-type="i">Italic</button>
+                <button class="btn-text-style" data-style-type="u">Underline</button>
+              </div>
+              <div>
+                <button class="btn-text-style" data-style-type="l">Left</button>
+                <button class="btn-text-style" data-style-type="c">Center</button>
+                <button class="btn-text-style" data-style-type="r">Right</button>
+              </div>
+            </li>
+            <li class="menu-item">
+              <label class="no-pointer">
+                <input id="input-font-size-range" type="range" min="10" max="100" value="10" />
+              </label>
+            </li>
+            <li class="menu-item">
+              <div id="tui-text-color-picker">Text color</div>
+            </li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="filter-sub-menu">
+          <ul class="menu">
+            <li class="menu-item border input-wrapper">
+              Load Mask Image
+              <input type="file" accept="image/*" id="input-mask-image-file" />
+            </li>
+            <li class="menu-item" id="btn-apply-mask">Apply mask filter</li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+        <div class="sub-menu-container" id="image-filter-sub-menu">
+          <ul class="menu">
+            <li class="menu-item align-left-top">
+              <table>
+                <tbody>
+                  <tr>
+                    <td>
+                      <label><input type="checkbox" id="input-check-grayscale" />Grayscale</label>
+                    </td>
+                    <td>
+                      <label><input type="checkbox" id="input-check-invert" />Invert</label>
+                    </td>
+                    <td>
+                      <label><input type="checkbox" id="input-check-sepia" />Sepia</label>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <label><input type="checkbox" id="input-check-sepia2" />Sepia2</label>
+                    </td>
+                    <td>
+                      <label><input type="checkbox" id="input-check-blur" />Blur</label>
+                    </td>
+                    <td>
+                      <label><input type="checkbox" id="input-check-sharpen" />Sharpen</label>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <label><input type="checkbox" id="input-check-emboss" />Emboss</label>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label>
+                  <input type="checkbox" id="input-check-remove-white" />
+                  RemoveWhite
+                </label>
+                <br />
+                <label>
+                  Distance
+                  <input
+                    class="range-narrow"
+                    id="input-range-remove-white-distance"
+                    type="range"
+                    min="0"
+                    value="10"
+                    max="255"
+                  />
+                </label>
+              </p>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-brightness" />Brightness</label><br />
+                <label>
+                  Value
+                  <input
+                    class="range-narrow"
+                    id="input-range-brightness-value"
+                    type="range"
+                    min="-255"
+                    value="100"
+                    max="255"
+                  />
+                </label>
+              </p>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-noise" />Noise</label><br />
+                <label>
+                  Value
+                  <input
+                    class="range-narrow"
+                    id="input-range-noise-value"
+                    type="range"
+                    min="0"
+                    value="100"
+                    max="1000"
+                  />
+                </label>
+              </p>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label>
+                  <input type="checkbox" id="input-check-color-filter" />
+                  ColorFilter
+                </label>
+                <br />
+                <label>
+                  Threshold
+                  <input
+                    class="range-narrow"
+                    id="input-range-color-filter-value"
+                    type="range"
+                    min="0"
+                    value="45"
+                    max="255"
+                  />
+                </label>
+              </p>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-pixelate" />Pixelate</label><br />
+                <label>
+                  Value
+                  <input
+                    class="range-narrow"
+                    id="input-range-pixelate-value"
+                    type="range"
+                    min="2"
+                    value="4"
+                    max="20"
+                  />
+                </label>
+              </p>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-tint" />Tint</label><br />
+              </p>
+              <div id="tui-tint-color-picker"></div>
+              <label>
+                Opacity
+                <input
+                  class="range-narrow"
+                  id="input-range-tint-opacity-value"
+                  type="range"
+                  min="0"
+                  value="1"
+                  max="1"
+                  step="0.1"
+                />
+              </label>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-multiply" />Multiply</label>
+              </p>
+              <div id="tui-multiply-color-picker"></div>
+            </li>
+            <li class="menu-item align-left-top">
+              <p>
+                <label><input type="checkbox" id="input-check-blend" />Blend</label>
+              </p>
+              <div id="tui-blend-color-picker"></div>
+              <select name="select-blend-type">
+                <option value="add" selected>Add</option>
+                <option value="diff">Diff</option>
+                <option value="diff">Subtract</option>
+                <option value="multiply">Multiply</option>
+                <option value="screen">Screen</option>
+                <option value="lighten">Lighten</option>
+                <option value="darken">Darken</option>
+              </select>
+            </li>
+            <li class="menu-item close">Close</li>
+          </ul>
+        </div>
+      </div>
+      <div class="tui-image-editor"></div>
+    </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.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.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 src="js/service-basic.js"></script>
+  </body>
+</html>

apps/image-editor/examples/example03-mobile.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <title>2. Mobile</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="css/service-mobile.css" rel="stylesheet" />
+  </head>
+  <body>
+    <!-- Image editor controls - top area -->
+    <div class="header">
+      <div>
+        <img class="logo" src="img/TOAST UI Component.png" /> <span class="name">Image Editor</span>
+      </div>
+      <div class="menu">
+        <span class="button">
+          <img src="img/openImage.png" style="margin-top: 5px" />
+          <input type="file" accept="image/*" id="input-image-file" />
+        </span>
+        <button class="button disabled" id="btn-undo"><img src="img/undo.png" /></button>
+        <button class="button disabled" id="btn-redo"><img src="img/redo.png" /></button>
+        <button class="button" id="btn-remove-active-object"><img src="img/remove.png" /></button>
+        <button class="button" id="btn-download"><img src="img/download.png" /></button>
+      </div>
+    </div>
+    <!-- Image editor area -->
+    <div class="tui-image-editor"></div>
+    <!-- Image editor controls - bottom area -->
+    <div class="tui-image-editor-controls">
+      <ul class="scrollable">
+        <li class="menu-item">
+          <button class="menu-button" id="btn-crop">Crop</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-apply-crop">Apply</button>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="menu-item">
+          <button class="menu-button">Orientation</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-rotate-clockwise">Rotate +90</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-rotate-counter-clockwise">Rotate -90</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-flip-x">FilpX</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-flip-y">FilpY</button>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="menu-item">
+          <button class="menu-button" id="btn-draw-line">Drawing</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-free-drawing">Free<br />Drawing</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-line-drawing">Line<br />Drawing</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-size">Brush<br />Size</button>
+                <div class="hiddenmenu">
+                  <input id="input-brush-range" type="range" min="10" max="100" value="50" />
+                </div>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-text-color">Brush<br />Color</button>
+                <div class="hiddenmenu">
+                  <div id="tui-brush-color-picker"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="menu-item">
+          <button class="menu-button" id="btn-draw-shape">Shape</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-rect">Rectagle</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-square">Square</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-ellipse">Ellipse</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-circle">Circle</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-triangle">Triangle</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-stroke-size">Stroke<br />Size</button>
+                <div class="hiddenmenu">
+                  <input id="input-stroke-range" type="range" min="1" max="100" value="10" />
+                </div>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-shape-color">Color</button>
+                <div class="hiddenmenu">
+                  <div class="top">
+                    <label for="fill-color"
+                      ><input
+                        type="radio"
+                        id="fill-color"
+                        name="select-color-type"
+                        value="fill"
+                        checked="checked"
+                      />
+                      Fill</label
+                    >
+                    <label for="stroke-color"
+                      ><input
+                        type="radio"
+                        id="stroke-color"
+                        name="select-color-type"
+                        value="stroke"
+                      />
+                      Stroke</label
+                    >
+                    <label for="input-check-transparent"
+                      ><input type="checkbox" id="input-check-transparent" />Transparent</label
+                    >
+                  </div>
+                  <div id="tui-shape-color-picker"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="menu-item">
+          <button class="menu-button">Icon</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-arrow-icon">Arrow<br />Icon</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-add-cancel-icon">Cancel<br />Icon</button>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-icon-color">Color</button>
+                <div class="hiddenmenu">
+                  <div id="tui-icon-color-picker"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <li class="menu-item">
+          <button class="menu-button" id="btn-add-text">Text</button>
+          <div class="submenu">
+            <button class="btn-prev">&lt;</button>
+            <ul class="scrollable">
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-size">Size</button>
+                <div class="hiddenmenu">
+                  <input id="input-text-size-range" type="range" min="10" max="240" value="120" />
+                </div>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-style">Style</button>
+                <div class="hiddenmenu">
+                  <button class="hiddenmenu-button btn-change-text-style" data-style-type="bold">
+                    <b>Bold</b>
+                  </button>
+                  <button class="hiddenmenu-button btn-change-text-style" data-style-type="italic">
+                    <i>Italic</i>
+                  </button>
+                  <button
+                    class="hiddenmenu-button btn-change-text-style"
+                    data-style-type="underline"
+                  >
+                    <u>Underline</u>
+                  </button>
+                </div>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-align">Align</button>
+                <div class="hiddenmenu">
+                  <button class="hiddenmenu-button btn-change-text-style" data-style-type="left">
+                    Left
+                  </button>
+                  <button class="hiddenmenu-button btn-change-text-style" data-style-type="center">
+                    Center
+                  </button>
+                  <button class="hiddenmenu-button btn-change-text-style" data-style-type="right">
+                    Right
+                  </button>
+                </div>
+              </li>
+              <li class="menu-item">
+                <button class="submenu-button" id="btn-change-text-color">Color</button>
+                <div class="hiddenmenu">
+                  <div id="tui-text-color-picker"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+      <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
+    </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.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.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 src="js/service-mobile.js"></script>
+  </body>
+</html>

apps/image-editor/examples/examples.json

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

apps/image-editor/examples/js/service-basic.js

@@ -0,0 +1,922 @@
+/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity,prefer-const,no-unused-vars */
+var PIXELATE_FILTER_DEFAULT_VALUE = 20;
+var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
+var rImageType = /data:(image\/.+);base64,/;
+var shapeOptions = {};
+var shapeType;
+var activeObjectId;
+
+// Buttons
+var $btns = $('.menu-item');
+var $btnsActivatable = $btns.filter('.activatable');
+var $inputImage = $('#input-image-file');
+var $btnDownload = $('#btn-download');
+
+var $btnUndo = $('#btn-undo');
+var $btnRedo = $('#btn-redo');
+var $btnClearObjects = $('#btn-clear-objects');
+var $btnRemoveActiveObject = $('#btn-remove-active-object');
+var $btnCrop = $('#btn-crop');
+var $btnFlip = $('#btn-flip');
+var $btnRotation = $('#btn-rotation');
+var $btnDrawLine = $('#btn-draw-line');
+var $btnDrawShape = $('#btn-draw-shape');
+var $btnApplyCrop = $('#btn-apply-crop');
+var $btnCancelCrop = $('#btn-cancel-crop');
+var $btnFlipX = $('#btn-flip-x');
+var $btnFlipY = $('#btn-flip-y');
+var $btnResetFlip = $('#btn-reset-flip');
+var $btnRotateClockwise = $('#btn-rotate-clockwise');
+var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
+var $btnText = $('#btn-text');
+var $btnTextStyle = $('.btn-text-style');
+var $btnAddIcon = $('#btn-add-icon');
+var $btnRegisterIcon = $('#btn-register-icon');
+var $btnMaskFilter = $('#btn-mask-filter');
+var $btnImageFilter = $('#btn-image-filter');
+var $btnLoadMaskImage = $('#input-mask-image-file');
+var $btnApplyMask = $('#btn-apply-mask');
+var $btnClose = $('.close');
+
+// Input etc.
+var $inputRotationRange = $('#input-rotation-range');
+var $inputBrushWidthRange = $('#input-brush-width-range');
+var $inputFontSizeRange = $('#input-font-size-range');
+var $inputStrokeWidthRange = $('#input-stroke-width-range');
+var $inputCheckTransparent = $('#input-check-transparent');
+var $inputCheckFilter = $('#input-check-filter');
+var $inputCheckGrayscale = $('#input-check-grayscale');
+var $inputCheckInvert = $('#input-check-invert');
+var $inputCheckSepia = $('#input-check-sepia');
+var $inputCheckSepia2 = $('#input-check-sepia2');
+var $inputCheckBlur = $('#input-check-blur');
+var $inputCheckSharpen = $('#input-check-sharpen');
+var $inputCheckEmboss = $('#input-check-emboss');
+var $inputCheckRemoveWhite = $('#input-check-remove-white');
+var $inputRangeRemoveWhiteThreshold = $('#input-range-remove-white-threshold');
+var $inputRangeRemoveWhiteDistance = $('#input-range-remove-white-distance');
+var $inputCheckBrightness = $('#input-check-brightness');
+var $inputRangeBrightnessValue = $('#input-range-brightness-value');
+var $inputCheckNoise = $('#input-check-noise');
+var $inputRangeNoiseValue = $('#input-range-noise-value');
+var $inputCheckPixelate = $('#input-check-pixelate');
+var $inputRangePixelateValue = $('#input-range-pixelate-value');
+var $inputCheckTint = $('#input-check-tint');
+var $inputRangeTintOpacityValue = $('#input-range-tint-opacity-value');
+var $inputCheckMultiply = $('#input-check-multiply');
+var $inputCheckBlend = $('#input-check-blend');
+var $inputCheckColorFilter = $('#input-check-color-filter');
+var $inputRangeColorFilterValue = $('#input-range-color-filter-value');
+
+// Sub menus
+var $displayingSubMenu = $();
+var $cropSubMenu = $('#crop-sub-menu');
+var $flipSubMenu = $('#flip-sub-menu');
+var $rotationSubMenu = $('#rotation-sub-menu');
+var $freeDrawingSubMenu = $('#free-drawing-sub-menu');
+var $drawLineSubMenu = $('#draw-line-sub-menu');
+var $drawShapeSubMenu = $('#draw-shape-sub-menu');
+var $textSubMenu = $('#text-sub-menu');
+var $iconSubMenu = $('#icon-sub-menu');
+var $filterSubMenu = $('#filter-sub-menu');
+var $imageFilterSubMenu = $('#image-filter-sub-menu');
+
+// Select line type
+var $selectLine = $('[name="select-line-type"]');
+
+// Select shape type
+var $selectShapeType = $('[name="select-shape-type"]');
+
+// Select color of shape type
+var $selectColorType = $('[name="select-color-type"]');
+
+// Select blend type
+var $selectBlendType = $('[name="select-blend-type"]');
+
+// Image editor
+var imageEditor = new tui.ImageEditor('.tui-image-editor', {
+  cssMaxWidth: 700,
+  cssMaxHeight: 500,
+  selectionStyle: {
+    cornerSize: 20,
+    rotatingPointOffset: 70,
+  },
+});
+
+// Color picker for free drawing
+var brushColorpicker = tui.colorPicker.create({
+  container: $('#tui-brush-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for text palette
+var textColorpicker = tui.colorPicker.create({
+  container: $('#tui-text-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for shape
+var shapeColorpicker = tui.colorPicker.create({
+  container: $('#tui-shape-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for icon
+var iconColorpicker = tui.colorPicker.create({
+  container: $('#tui-icon-color-picker')[0],
+  color: '#000000',
+});
+
+var tintColorpicker = tui.colorPicker.create({
+  container: $('#tui-tint-color-picker')[0],
+  color: '#000000',
+});
+
+var multiplyColorpicker = tui.colorPicker.create({
+  container: $('#tui-multiply-color-picker')[0],
+  color: '#000000',
+});
+
+var blendColorpicker = tui.colorPicker.create({
+  container: $('#tui-blend-color-picker')[0],
+  color: '#00FF00',
+});
+
+// Common global functions
+// HEX to RGBA
+function hexToRGBa(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  var a = alpha || 1;
+
+  return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+}
+
+function base64ToBlob(data) {
+  var mimeString = '';
+  var raw, uInt8Array, i, rawLength;
+
+  raw = data.replace(rImageType, function (header, imageType) {
+    mimeString = imageType;
+
+    return '';
+  });
+
+  raw = atob(raw);
+  rawLength = raw.length;
+  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
+
+  for (i = 0; i < rawLength; i += 1) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+
+  return new Blob([uInt8Array], { type: mimeString });
+}
+
+function resizeEditor() {
+  var $editor = $('.tui-image-editor');
+  var $container = $('.tui-image-editor-canvas-container');
+  var height = parseFloat($container.css('max-height'));
+
+  $editor.height(height);
+}
+
+function getBrushSettings() {
+  var brushWidth = parseInt($inputBrushWidthRange.val(), 10);
+  var brushColor = brushColorpicker.getColor();
+
+  return {
+    width: brushWidth,
+    color: hexToRGBa(brushColor, 0.5),
+  };
+}
+
+function activateShapeMode() {
+  if (imageEditor.getDrawingMode() !== 'SHAPE') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('SHAPE');
+  }
+}
+
+function activateIconMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateTextMode() {
+  if (imageEditor.getDrawingMode() !== 'TEXT') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('TEXT');
+  }
+}
+
+function setTextToolbar(obj) {
+  var fontSize = obj.fontSize;
+  var fontColor = obj.fill;
+
+  $inputFontSizeRange.val(fontSize);
+  textColorpicker.setColor(fontColor);
+}
+
+function setIconToolbar(obj) {
+  var iconColor = obj.fill;
+
+  iconColorpicker.setColor(iconColor);
+}
+
+function setShapeToolbar(obj) {
+  var fillColor, isTransparent, isFilter;
+  var colorType = $selectColorType.val();
+  var changeValue = colorType === 'stroke' ? obj.stroke : obj.fill.type;
+  isTransparent = changeValue === 'transparent';
+  isFilter = changeValue === 'filter';
+
+  if (colorType === 'stroke') {
+    if (!isTransparent && !isFilter) {
+      shapeColorpicker.setColor(changeValue);
+    }
+  } else if (colorType === 'fill') {
+    if (!isTransparent && !isFilter) {
+      fillColor = obj.fill.color;
+      shapeColorpicker.setColor(fillColor);
+    }
+  }
+
+  $inputCheckTransparent.prop('checked', isTransparent);
+  $inputCheckFilter.prop('checked', isFilter);
+  $inputStrokeWidthRange.val(obj.strokeWidth);
+}
+
+function showSubMenu(type) {
+  var $submenu;
+
+  switch (type) {
+    case 'shape':
+      $submenu = $drawShapeSubMenu;
+      break;
+    case 'icon':
+      $submenu = $iconSubMenu;
+      break;
+    case 'text':
+      $submenu = $textSubMenu;
+      break;
+    default:
+      $submenu = 0;
+  }
+
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $submenu.show();
+}
+
+function applyOrRemoveFilter(applying, type, options) {
+  if (applying) {
+    imageEditor.applyFilter(type, options).then(function (result) {
+      console.log(result);
+    });
+  } else {
+    imageEditor.removeFilter(type);
+  }
+}
+
+// Attach image editor custom events
+imageEditor.on({
+  objectAdded: function (objectProps) {
+    console.info(objectProps);
+  },
+  undoStackChanged: function (length) {
+    if (length) {
+      $btnUndo.removeClass('disabled');
+    } else {
+      $btnUndo.addClass('disabled');
+    }
+    resizeEditor();
+  },
+  redoStackChanged: function (length) {
+    if (length) {
+      $btnRedo.removeClass('disabled');
+    } else {
+      $btnRedo.addClass('disabled');
+    }
+    resizeEditor();
+  },
+  objectScaled: function (obj) {
+    if (obj.type === 'text') {
+      $inputFontSizeRange.val(obj.fontSize);
+    }
+  },
+  addText: function (pos) {
+    imageEditor
+      .addText('Double Click', {
+        position: pos.originPosition,
+      })
+      .then(function (objectProps) {
+        console.log(objectProps);
+      });
+  },
+  objectActivated: function (obj) {
+    activeObjectId = obj.id;
+    if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
+      showSubMenu('shape');
+      setShapeToolbar(obj);
+      activateShapeMode();
+    } else if (obj.type === 'icon') {
+      showSubMenu('icon');
+      setIconToolbar(obj);
+      activateIconMode();
+    } else if (obj.type === 'text') {
+      showSubMenu('text');
+      setTextToolbar(obj);
+      activateTextMode();
+    }
+  },
+  mousedown: function (event, originPointer) {
+    if ($imageFilterSubMenu.is(':visible') && imageEditor.hasFilter('colorFilter')) {
+      imageEditor.applyFilter('colorFilter', {
+        x: parseInt(originPointer.x, 10),
+        y: parseInt(originPointer.y, 10),
+      });
+    }
+  },
+});
+
+// Attach button click event listeners
+$btns.on('click', function () {
+  $btnsActivatable.removeClass('active');
+});
+
+$btnsActivatable.on('click', function () {
+  $(this).addClass('active');
+});
+
+$btnUndo.on('click', function () {
+  $displayingSubMenu.hide();
+
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
+    imageEditor.undo();
+  }
+});
+
+$btnRedo.on('click', function () {
+  $displayingSubMenu.hide();
+
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
+    imageEditor.redo();
+  }
+});
+
+$btnClearObjects.on('click', function () {
+  $displayingSubMenu.hide();
+  imageEditor.clearObjects();
+});
+
+$btnRemoveActiveObject.on('click', function () {
+  $displayingSubMenu.hide();
+  imageEditor.removeObject(activeObjectId);
+});
+
+$btnCrop.on('click', function () {
+  imageEditor.startDrawingMode('CROPPER');
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $cropSubMenu.show();
+});
+
+$btnFlip.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $flipSubMenu.show();
+});
+
+$btnRotation.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $rotationSubMenu.show();
+});
+
+$btnClose.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+});
+
+$btnApplyCrop.on('click', function () {
+  imageEditor.crop(imageEditor.getCropzoneRect()).then(function () {
+    imageEditor.stopDrawingMode();
+    resizeEditor();
+  });
+});
+
+$btnCancelCrop.on('click', function () {
+  imageEditor.stopDrawingMode();
+});
+
+$btnFlipX.on('click', function () {
+  imageEditor.flipX().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnFlipY.on('click', function () {
+  imageEditor.flipY().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnResetFlip.on('click', function () {
+  imageEditor.resetFlip().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnRotateClockwise.on('click', function () {
+  imageEditor.rotate(30);
+});
+
+$btnRotateCounterClockWise.on('click', function () {
+  imageEditor.rotate(-30);
+});
+
+$inputRotationRange.on('mousedown', function () {
+  var changeAngle = function () {
+    imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () {});
+  };
+  $(document).on('mousemove', changeAngle);
+  $(document).on('mouseup', function stopChangingAngle() {
+    $(document).off('mousemove', changeAngle);
+    $(document).off('mouseup', stopChangingAngle);
+  });
+});
+
+$inputRotationRange.on('change', function () {
+  imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () {});
+});
+
+$inputBrushWidthRange.on('change', function () {
+  imageEditor.setBrush({ width: parseInt(this.value, 10) });
+});
+
+$inputImage.on('change', function (event) {
+  var file;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+  imageEditor.loadImageFromFile(file).then(function (result) {
+    console.log(result);
+    imageEditor.clearUndoStack();
+  });
+});
+
+$btnDownload.on('click', function () {
+  var imageName = imageEditor.getImageName();
+  var dataURL = imageEditor.toDataURL();
+  var blob, type, w;
+
+  if (supportingFileAPI) {
+    blob = base64ToBlob(dataURL);
+    type = blob.type.split('/')[1];
+    if (imageName.split('.').pop() !== type) {
+      imageName += '.' + type;
+    }
+
+    // Library: FileSaver - saveAs
+    saveAs(blob, imageName); // eslint-disable-line
+  } else {
+    alert('This browser needs a file-server');
+    w = window.open();
+    w.document.body.innerHTML = '<img src="' + dataURL + '">';
+  }
+});
+
+// control draw line mode
+$btnDrawLine.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $drawLineSubMenu.show();
+  $selectLine.eq(0).change();
+});
+
+$selectLine.on('change', function () {
+  var mode = $(this).val();
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  if (mode === 'freeDrawing') {
+    imageEditor.startDrawingMode('FREE_DRAWING', settings);
+  } else {
+    imageEditor.startDrawingMode('LINE_DRAWING', settings);
+  }
+});
+
+brushColorpicker.on('selectColor', function (event) {
+  imageEditor.setBrush({
+    color: hexToRGBa(event.color, 0.5),
+  });
+});
+
+// control draw shape mode
+$btnDrawShape.on('click', function () {
+  showSubMenu('shape');
+
+  // step 1. get options to draw shape from toolbar
+  shapeType = $('[name="select-shape-type"]:checked').val();
+
+  shapeOptions.stroke = '#000000';
+  shapeOptions.fill = '#ffffff';
+
+  shapeOptions.strokeWidth = Number($inputStrokeWidthRange.val());
+
+  // step 2. set options to draw shape
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+
+  // step 3. start drawing shape mode
+  activateShapeMode();
+});
+
+$selectShapeType.on('change', function () {
+  shapeType = $(this).val();
+
+  imageEditor.setDrawingShape(shapeType);
+});
+$selectColorType.on('change', function () {
+  var colorType = $(this).val();
+  if (colorType === 'stroke') {
+    $inputCheckFilter.prop('disabled', true);
+    $inputCheckFilter.prop('checked', false);
+  } else {
+    $inputCheckTransparent.prop('disabled', false);
+    $inputCheckFilter.prop('disabled', false);
+  }
+});
+
+$inputCheckTransparent.on('change', onChangeShapeFill);
+$inputCheckFilter.on('change', onChangeShapeFill);
+shapeColorpicker.on('selectColor', function (event) {
+  $inputCheckTransparent.prop('checked', false);
+  $inputCheckFilter.prop('checked', false);
+  onChangeShapeFill(event);
+});
+
+function onChangeShapeFill(event) {
+  var colorType = $selectColorType.val();
+  var isTransparent = $inputCheckTransparent.prop('checked');
+  var isFilter = $inputCheckFilter.prop('checked');
+  var shapeOption;
+
+  if (event.color) {
+    shapeOption = event.color;
+  } else if (isTransparent) {
+    shapeOption = 'transparent';
+  } else if (isFilter) {
+    shapeOption = {
+      type: 'filter',
+      filter: [{ pixelate: PIXELATE_FILTER_DEFAULT_VALUE }],
+    };
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: shapeOption,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: shapeOption,
+    });
+  }
+
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+}
+
+$inputStrokeWidthRange.on('change', function () {
+  var strokeWidth = Number($(this).val());
+
+  imageEditor.changeShape(activeObjectId, {
+    strokeWidth: strokeWidth,
+  });
+
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+});
+
+// control text mode
+$btnText.on('click', function () {
+  showSubMenu('text');
+  activateTextMode();
+});
+
+$inputFontSizeRange.on('change', function () {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fontSize: parseInt(this.value, 10),
+  });
+});
+
+$btnTextStyle.on('click', function (e) {
+  // eslint-disable-line
+  var styleType = $(this).attr('data-style-type');
+  var styleObj;
+
+  e.stopPropagation();
+
+  switch (styleType) {
+    case 'b':
+      styleObj = { fontWeight: 'bold' };
+      break;
+    case 'i':
+      styleObj = { fontStyle: 'italic' };
+      break;
+    case 'u':
+      styleObj = { underline: true };
+      break;
+    case 'l':
+      styleObj = { textAlign: 'left' };
+      break;
+    case 'c':
+      styleObj = { textAlign: 'center' };
+      break;
+    case 'r':
+      styleObj = { textAlign: 'right' };
+      break;
+    default:
+      styleObj = {};
+  }
+
+  imageEditor.changeTextStyle(activeObjectId, styleObj);
+});
+
+textColorpicker.on('selectColor', function (event) {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fill: event.color,
+  });
+});
+
+// control icon
+$btnAddIcon.on('click', function () {
+  showSubMenu('icon');
+  activateIconMode();
+});
+
+function onClickIconSubMenu(event) {
+  var element = event.target || event.srcElement;
+  var iconType = $(element).attr('data-icon-type');
+
+  imageEditor.once('mousedown', function (e, originPointer) {
+    imageEditor
+      .addIcon(iconType, {
+        left: originPointer.x,
+        top: originPointer.y,
+      })
+      .then(function (objectProps) {
+        // console.log(objectProps);
+      });
+  });
+}
+
+$btnRegisterIcon.on('click', function () {
+  $iconSubMenu
+    .find('.menu-item')
+    .eq(3)
+    .after('<li id="customArrow" class="menu-item icon-text" data-icon-type="customArrow">↑</li>');
+
+  imageEditor.registerIcons({
+    customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z',
+  });
+
+  $btnRegisterIcon.off('click');
+
+  $iconSubMenu.on('click', '#customArrow', onClickIconSubMenu);
+});
+
+$iconSubMenu.on('click', '.icon-text', onClickIconSubMenu);
+
+iconColorpicker.on('selectColor', function (event) {
+  imageEditor.changeIconColor(activeObjectId, event.color);
+});
+
+// control mask filter
+$btnMaskFilter.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+
+  $displayingSubMenu = $filterSubMenu.show();
+});
+
+$btnImageFilter.on('click', function () {
+  var filters = {
+    grayscale: $inputCheckGrayscale,
+    invert: $inputCheckInvert,
+    sepia: $inputCheckSepia,
+    sepia2: $inputCheckSepia2,
+    blur: $inputCheckBlur,
+    shapren: $inputCheckSharpen,
+    emboss: $inputCheckEmboss,
+    removeWhite: $inputCheckRemoveWhite,
+    brightness: $inputCheckBrightness,
+    noise: $inputCheckNoise,
+    pixelate: $inputCheckPixelate,
+    tint: $inputCheckTint,
+    multiply: $inputCheckMultiply,
+    blend: $inputCheckBlend,
+    colorFilter: $inputCheckColorFilter,
+  };
+
+  tui.util.forEach(filters, function ($value, key) {
+    $value.prop('checked', imageEditor.hasFilter(key));
+  });
+  $displayingSubMenu.hide();
+
+  $displayingSubMenu = $imageFilterSubMenu.show();
+});
+
+$btnLoadMaskImage.on('change', function () {
+  var file;
+  var imgUrl;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+
+  if (file) {
+    imgUrl = URL.createObjectURL(file);
+
+    imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(function () {
+      imageEditor.addImageObject(imgUrl).then(function (objectProps) {
+        URL.revokeObjectURL(file);
+        console.log(objectProps);
+      });
+    });
+  }
+});
+
+$btnApplyMask.on('click', function () {
+  imageEditor
+    .applyFilter('mask', {
+      maskObjId: activeObjectId,
+    })
+    .then(function (result) {
+      console.log(result);
+    });
+});
+
+$inputCheckGrayscale.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Grayscale', null);
+});
+
+$inputCheckInvert.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Invert', null);
+});
+
+$inputCheckSepia.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Sepia', null);
+});
+
+$inputCheckSepia2.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'vintage', null);
+});
+
+$inputCheckBlur.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Blur', { blur: 0.1 });
+});
+
+$inputCheckSharpen.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Sharpen', null);
+});
+
+$inputCheckEmboss.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Emboss', null);
+});
+
+$inputCheckRemoveWhite.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'removeColor', {
+    color: '#FFFFFF',
+    useAlpha: false,
+    distance: parseInt($inputRangeRemoveWhiteDistance.val(), 10) / 255,
+  });
+});
+
+$inputRangeRemoveWhiteDistance.on('change', function () {
+  applyOrRemoveFilter($inputCheckRemoveWhite.is(':checked'), 'removeColor', {
+    distance: parseInt(this.value, 10) / 255,
+  });
+});
+
+$inputCheckBrightness.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'brightness', {
+    brightness: parseInt($inputRangeBrightnessValue.val(), 10) / 255,
+  });
+});
+
+$inputRangeBrightnessValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckBrightness.is(':checked'), 'brightness', {
+    brightness: parseInt(this.value, 10) / 255,
+  });
+});
+
+$inputCheckNoise.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'noise', {
+    noise: parseInt($inputRangeNoiseValue.val(), 10),
+  });
+});
+
+$inputRangeNoiseValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckNoise.is(':checked'), 'noise', {
+    noise: parseInt(this.value, 10),
+  });
+});
+
+$inputCheckPixelate.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'pixelate', {
+    blocksize: parseInt($inputRangePixelateValue.val(), 10),
+  });
+});
+
+$inputRangePixelateValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckPixelate.is(':checked'), 'pixelate', {
+    blocksize: parseInt(this.value, 10),
+  });
+});
+
+$inputCheckTint.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    mode: 'tint',
+    color: tintColorpicker.getColor(),
+    alpha: parseFloat($inputRangeTintOpacityValue.val()),
+  });
+});
+
+tintColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckTint.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$inputRangeTintOpacityValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckTint.is(':checked'), 'blendColor', {
+    alpha: parseFloat($inputRangeTintOpacityValue.val()),
+  });
+});
+
+$inputCheckMultiply.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    color: multiplyColorpicker.getColor(),
+  });
+});
+
+multiplyColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckMultiply.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$inputCheckBlend.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    mode: $selectBlendType.val(),
+    color: blendColorpicker.getColor(),
+  });
+});
+
+blendColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$selectBlendType.on('change', function () {
+  applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blendColor', {
+    mode: this.value,
+  });
+});
+
+$inputCheckColorFilter.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'removeColor', {
+    color: '#FFFFFF',
+    distance: $inputRangeColorFilterValue.val() / 255,
+  });
+});
+
+$inputRangeColorFilterValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckColorFilter.is(':checked'), 'removeColor', {
+    distance: this.value / 255,
+  });
+});
+
+// Etc..
+
+// Load sample image
+imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(function (sizeValue) {
+  console.log(sizeValue);
+  imageEditor.clearUndoStack();
+});
+
+// IE9 Unselectable
+$('.menu').on('selectstart', function () {
+  return false;
+});

apps/image-editor/examples/js/service-mobile.js

@@ -0,0 +1,595 @@
+/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
+'use strict';
+
+var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)
+
+var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
+var rImageType = /data:(image\/.+);base64,/;
+var shapeOpt = {
+  fill: '#fff',
+  stroke: '#000',
+  strokeWidth: 10,
+};
+var activeObjectId;
+
+// Selector of image editor controls
+var submenuClass = '.submenu';
+var hiddenmenuClass = '.hiddenmenu';
+
+var $controls = $('.tui-image-editor-controls');
+var $menuButtons = $controls.find('.menu-button');
+var $submenuButtons = $controls.find('.submenu-button');
+var $btnShowMenu = $controls.find('.btn-prev');
+var $msg = $controls.find('.msg');
+
+var $subMenus = $controls.find(submenuClass);
+var $hiddenMenus = $controls.find(hiddenmenuClass);
+
+// Image editor controls - top menu buttons
+var $inputImage = $('#input-image-file');
+var $btnDownload = $('#btn-download');
+var $btnUndo = $('#btn-undo');
+var $btnRedo = $('#btn-redo');
+var $btnRemoveActiveObject = $('#btn-remove-active-object');
+
+// Image editor controls - bottom menu buttons
+var $btnCrop = $('#btn-crop');
+var $btnAddText = $('#btn-add-text');
+
+// Image editor controls - bottom submenu buttons
+var $btnApplyCrop = $('#btn-apply-crop');
+var $btnFlipX = $('#btn-flip-x');
+var $btnFlipY = $('#btn-flip-y');
+var $btnRotateClockwise = $('#btn-rotate-clockwise');
+var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
+var $btnAddArrowIcon = $('#btn-add-arrow-icon');
+var $btnAddCancelIcon = $('#btn-add-cancel-icon');
+var $btnAddCustomIcon = $('#btn-add-custom-icon');
+var $btnFreeDrawing = $('#btn-free-drawing');
+var $btnLineDrawing = $('#btn-line-drawing');
+var $btnAddRect = $('#btn-add-rect');
+var $btnAddSquare = $('#btn-add-square');
+var $btnAddEllipse = $('#btn-add-ellipse');
+var $btnAddCircle = $('#btn-add-circle');
+var $btnAddTriangle = $('#btn-add-triangle');
+var $btnChangeTextStyle = $('.btn-change-text-style');
+
+// Image editor controls - etc.
+var $inputTextSizeRange = $('#input-text-size-range');
+var $inputBrushWidthRange = $('#input-brush-range');
+var $inputStrokeWidthRange = $('#input-stroke-range');
+var $inputCheckTransparent = $('#input-check-transparent');
+
+// Colorpicker
+var iconColorpicker = tui.colorPicker.create({
+  container: $('#tui-icon-color-picker')[0],
+  color: '#000000',
+});
+
+var textColorpicker = tui.colorPicker.create({
+  container: $('#tui-text-color-picker')[0],
+  color: '#000000',
+});
+
+var brushColorpicker = tui.colorPicker.create({
+  container: $('#tui-brush-color-picker')[0],
+  color: '#000000',
+});
+
+var shapeColorpicker = tui.colorPicker.create({
+  container: $('#tui-shape-color-picker')[0],
+  color: '#000000',
+});
+
+// Create image editor
+var imageEditor = new tui.ImageEditor('.tui-image-editor', {
+  cssMaxWidth: document.documentElement.clientWidth,
+  cssMaxHeight: document.documentElement.clientHeight,
+  selectionStyle: {
+    cornerSize: 50,
+    rotatingPointOffset: 100,
+  },
+});
+
+var $displayingSubMenu, $displayingHiddenMenu;
+
+function hexToRGBa(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  var a = alpha || 1;
+
+  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
+}
+
+function base64ToBlob(data) {
+  var mimeString = '';
+  var raw, uInt8Array, i, rawLength;
+
+  raw = data.replace(rImageType, function (header, imageType) {
+    mimeString = imageType;
+
+    return '';
+  });
+
+  raw = atob(raw);
+  rawLength = raw.length;
+  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
+
+  for (i = 0; i < rawLength; i += 1) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+
+  return new Blob([uInt8Array], { type: mimeString });
+}
+
+function getBrushSettings() {
+  var brushWidth = $inputBrushWidthRange.val();
+  var brushColor = brushColorpicker.getColor();
+
+  return {
+    width: brushWidth,
+    color: hexToRGBa(brushColor, 0.5),
+  };
+}
+
+function activateShapeMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateIconMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateTextMode() {
+  if (imageEditor.getDrawingMode() !== 'TEXT') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('TEXT');
+  }
+}
+
+function setTextToolbar(obj) {
+  var fontSize = obj.fontSize;
+  var fontColor = obj.fill;
+
+  $inputTextSizeRange.val(fontSize);
+  textColorpicker.setColor(fontColor);
+}
+
+function setIconToolbar(obj) {
+  var iconColor = obj.fill;
+
+  iconColorpicker.setColor(iconColor);
+}
+
+function setShapeToolbar(obj) {
+  var strokeColor, fillColor, isTransparent;
+  var colorType = $('[name="select-color-type"]:checked').val();
+
+  if (colorType === 'stroke') {
+    strokeColor = obj.stroke;
+    isTransparent = strokeColor === 'transparent';
+
+    if (!isTransparent) {
+      shapeColorpicker.setColor(strokeColor);
+    }
+  } else if (colorType === 'fill') {
+    fillColor = obj.fill;
+    isTransparent = fillColor === 'transparent';
+
+    if (!isTransparent) {
+      shapeColorpicker.setColor(fillColor);
+    }
+  }
+
+  $inputCheckTransparent.prop('checked', isTransparent);
+  $inputStrokeWidthRange.val(obj.strokeWith);
+}
+
+function showSubMenu(type) {
+  var index;
+
+  switch (type) {
+    case 'shape':
+      index = 3;
+      break;
+    case 'icon':
+      index = 4;
+      break;
+    case 'text':
+      index = 5;
+      break;
+    default:
+      index = 0;
+  }
+
+  $displayingSubMenu.hide();
+  $displayingHiddenMenu.hide();
+
+  $displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
+}
+
+// Bind custom event of image editor
+imageEditor.on({
+  undoStackChanged: function (length) {
+    if (length) {
+      $btnUndo.removeClass('disabled');
+    } else {
+      $btnUndo.addClass('disabled');
+    }
+  },
+  redoStackChanged: function (length) {
+    if (length) {
+      $btnRedo.removeClass('disabled');
+    } else {
+      $btnRedo.addClass('disabled');
+    }
+  },
+  objectScaled: function (obj) {
+    if (obj.type === 'text') {
+      $inputTextSizeRange.val(obj.fontSize);
+    }
+  },
+  objectActivated: function (obj) {
+    activeObjectId = obj.id;
+    if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
+      showSubMenu('shape');
+      setShapeToolbar(obj);
+      activateShapeMode();
+    } else if (obj.type === 'icon') {
+      showSubMenu('icon');
+      setIconToolbar(obj);
+      activateIconMode();
+    } else if (obj.type === 'text') {
+      showSubMenu('text');
+      setTextToolbar(obj);
+      activateTextMode();
+    }
+  },
+});
+
+// Image editor controls action
+$menuButtons.on('click', function () {
+  $displayingSubMenu = $(this).parent().find(submenuClass).show();
+  $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
+});
+
+$submenuButtons.on('click', function () {
+  $displayingHiddenMenu.hide();
+  $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
+});
+
+$btnShowMenu.on('click', function () {
+  $displayingSubMenu.hide();
+  $displayingHiddenMenu.hide();
+  $msg.show();
+
+  imageEditor.stopDrawingMode();
+});
+
+// Image load action
+$inputImage.on('change', function (event) {
+  var file;
+  var img;
+  var resolution;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+
+  if (file) {
+    img = new Image();
+
+    img.onload = function () {
+      resolution = this.width * this.height;
+
+      if (resolution <= MAX_RESOLUTION) {
+        imageEditor.loadImageFromFile(file).then(function () {
+          imageEditor.clearUndoStack();
+        });
+      } else {
+        alert("Loaded image's resolution is too large!\nRecommended resolution is 3264 * 2448!");
+      }
+
+      URL.revokeObjectURL(file);
+    };
+
+    img.src = URL.createObjectURL(file);
+  }
+});
+
+// Undo action
+$btnUndo.on('click', function () {
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.undo();
+  }
+});
+
+// Redo action
+$btnRedo.on('click', function () {
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.redo();
+  }
+});
+
+// Remove active object action
+$btnRemoveActiveObject.on('click', function () {
+  imageEditor.removeObject(activeObjectId);
+});
+
+// Download action
+$btnDownload.on('click', function () {
+  var imageName = imageEditor.getImageName();
+  var dataURL = imageEditor.toDataURL();
+  var blob, type, w;
+
+  if (supportingFileAPI) {
+    blob = base64ToBlob(dataURL);
+    type = blob.type.split('/')[1];
+    if (imageName.split('.').pop() !== type) {
+      imageName += '.' + type;
+    }
+
+    // Library: FileSaver - saveAs
+    saveAs(blob, imageName); // eslint-disable-line
+  } else {
+    alert('This browser needs a file-server');
+    w = window.open();
+    w.document.body.innerHTML = '<img src=' + dataURL + '>';
+  }
+});
+
+// Crop menu action
+$btnCrop.on('click', function () {
+  imageEditor.startDrawingMode('CROPPER');
+});
+
+$btnApplyCrop.on('click', function () {
+  imageEditor.crop(imageEditor.getCropzoneRect()).then(function () {
+    imageEditor.stopDrawingMode();
+    $subMenus.removeClass('show');
+    $hiddenMenus.removeClass('show');
+  });
+});
+
+// Orientation menu action
+$btnRotateClockwise.on('click', function () {
+  imageEditor.rotate(90);
+});
+
+$btnRotateCounterClockWise.on('click', function () {
+  imageEditor.rotate(-90);
+});
+
+$btnFlipX.on('click', function () {
+  imageEditor.flipX();
+});
+
+$btnFlipY.on('click', function () {
+  imageEditor.flipY();
+});
+
+// Icon menu action
+$btnAddArrowIcon.on('click', function () {
+  imageEditor.addIcon('arrow');
+});
+
+$btnAddCancelIcon.on('click', function () {
+  imageEditor.addIcon('cancel');
+});
+
+$btnAddCustomIcon.on('click', function () {
+  imageEditor.addIcon('customArrow');
+});
+
+iconColorpicker.on('selectColor', function (event) {
+  imageEditor.changeIconColor(activeObjectId, event.color);
+});
+
+// Text menu action
+$btnAddText.on('click', function () {
+  var initText = 'DoubleClick';
+
+  imageEditor.startDrawingMode('TEXT');
+  imageEditor.addText(initText, {
+    styles: {
+      fontSize: parseInt($inputTextSizeRange.val(), 10),
+    },
+  });
+});
+
+$btnChangeTextStyle.on('click', function () {
+  var styleType = $(this).attr('data-style-type');
+  var styleObj = {};
+  var styleObjKey;
+
+  switch (styleType) {
+    case 'bold':
+      styleObjKey = 'fontWeight';
+      break;
+    case 'italic':
+      styleObjKey = 'fontStyle';
+      break;
+    case 'underline':
+      styleObjKey = 'underline';
+      break;
+    case 'left':
+      styleObjKey = 'textAlign';
+      break;
+    case 'center':
+      styleObjKey = 'textAlign';
+      break;
+    case 'right':
+      styleObjKey = 'textAlign';
+      break;
+    default:
+      styleObjKey = '';
+  }
+
+  styleObj[styleObjKey] = styleType;
+
+  imageEditor.changeTextStyle(activeObjectId, styleObj);
+});
+
+$inputTextSizeRange.on('change', function () {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fontSize: parseInt($(this).val(), 10),
+  });
+});
+
+textColorpicker.on('selectColor', function (event) {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fill: event.color,
+  });
+});
+
+// Draw line menu action
+$btnFreeDrawing.on('click', function () {
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  imageEditor.startDrawingMode('FREE_DRAWING', settings);
+});
+
+$btnLineDrawing.on('click', function () {
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  imageEditor.startDrawingMode('LINE_DRAWING', settings);
+});
+
+$inputBrushWidthRange.on('change', function () {
+  imageEditor.setBrush({
+    width: parseInt($(this).val(), 10),
+  });
+});
+
+brushColorpicker.on('selectColor', function (event) {
+  imageEditor.setBrush({
+    color: hexToRGBa(event.color, 0.5),
+  });
+});
+
+// Add shape menu action
+$btnAddRect.on('click', function () {
+  imageEditor.addShape(
+    'rect',
+    tui.util.extend(
+      {
+        width: 500,
+        height: 300,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddSquare.on('click', function () {
+  imageEditor.addShape(
+    'rect',
+    tui.util.extend(
+      {
+        width: 400,
+        height: 400,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddEllipse.on('click', function () {
+  imageEditor.addShape(
+    'circle',
+    tui.util.extend(
+      {
+        rx: 300,
+        ry: 200,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddCircle.on('click', function () {
+  imageEditor.addShape(
+    'circle',
+    tui.util.extend(
+      {
+        rx: 200,
+        ry: 200,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddTriangle.on('click', function () {
+  imageEditor.addShape(
+    'triangle',
+    tui.util.extend(
+      {
+        width: 500,
+        height: 400,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$inputStrokeWidthRange.on('change', function () {
+  imageEditor.changeShape(activeObjectId, {
+    strokeWidth: parseInt($(this).val(), 10),
+  });
+});
+
+$inputCheckTransparent.on('change', function () {
+  var colorType = $('[name="select-color-type"]:checked').val();
+  var isTransparent = $(this).prop('checked');
+  var color;
+
+  if (!isTransparent) {
+    color = shapeColorpicker.getColor();
+  } else {
+    color = 'transparent';
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: color,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: color,
+    });
+  }
+});
+
+shapeColorpicker.on('selectColor', function (event) {
+  var colorType = $('[name="select-color-type"]:checked').val();
+  var isTransparent = $inputCheckTransparent.prop('checked');
+  var color = event.color;
+
+  if (isTransparent) {
+    return;
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: color,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: color,
+    });
+  }
+});
+
+// Load sample image
+imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(function () {
+  imageEditor.clearUndoStack();
+});

apps/image-editor/examples/js/theme/black-theme.js

@@ -0,0 +1,76 @@
+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',
+};

apps/image-editor/examples/js/theme/white-theme.js

@@ -0,0 +1,76 @@
+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',
+};

apps/image-editor/index.d.ts

@@ -0,0 +1,334 @@
+// Type definitions for TOAST UI Image Editor v3.15.2
+// 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;
+    };
+  }
+
+  type IFilterOptions =
+    | { blur: number }
+    | { brightness: number }
+    | { noise: number }
+    | { blocksize: number }
+    | { color: string; distance: number; useAlpha?: boolean }
+    | { mode: string; color: string; alpha?: number }
+    | { maskObjId: 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?: IFilterOptions,
+      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(iterationCount: number): 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(iterationCount: number): Promise<any>;
+    public on(eventName: string, handler: (...args: any[]) => void): void;
+  }
+}
+
+declare module 'tui-image-editor' {
+  export = tuiImageEditor.ImageEditor;
+}

apps/image-editor/jest-setup.js

@@ -0,0 +1 @@
+import 'jest-canvas-mock';

apps/image-editor/jest.config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const setupFile = path.resolve(__dirname, './jest-setup.js');
+
+module.exports = {
+  moduleFileExtensions: ['js'],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.js$': 'jest-esm-transformer',
+    '^.+\\.svg$': '<rootDir>/__mocks__/svgMock.js',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  testMatch: ['<rootDir>/**/*.spec.js'],
+  clearMocks: true,
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/js/$1',
+    '^@css/(.*)$': '<rootDir>/src/css/$1',
+    '^@svg/(.*)$': '<rootDir>/src/svg/$1',
+    '^fixtures/(.*)$': '<rootDir>/__mocks__/fileMock.js',
+  },
+  setupFiles: [setupFile],
+};