2020-2-capstone-design2 / 2017110269

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
e9db7e30 1 parent 8637f563

setting react ui

Expand all
Inline Side-by-side
Showing 360 changed files with 214 additions and 4560 deletions
{
"presets": ["es2015"],
"plugins": [
["transform-es2015-destructuring", { "loose": true }],
["transform-es2015-for-of", { "loose": true }],
["transform-es2015-spread", { "loose": true }]
]
}
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
\ No newline at end of file
# Ignore polyfill
src/js/polyfill.js
module.exports = {
extends: ['tui/es6', 'plugin:prettier/recommended'],
plugins: ['prettier'],
env: {
browser: true,
amd: true,
node: true,
jasmine: true,
jquery: true,
es6: true,
},
globals: {
fabric: true,
tui: true,
loadFixtures: true,
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 7,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'],
plugins: ['react', 'prettier'],
rules: {
'prefer-destructuring': [
'error',
{
VariableDeclarator: { array: true, object: true },
AssignmentExpression: { array: false, object: false },
},
],
'prettier/prettier': 'error',
'react/prop-types': 0
},
};
settings: {
react: {
version: 'detect'
}
}
};
\ No newline at end of file
......
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# Deployed apps should consider commenting this line out:
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
node_modules
# Bower Components
bower_components
lib
# IDEA
.idea
*.iml
# Window
.DS_Store
Thumbs.db
Desktop.ini
# MAC
.DS_Store
# SVN
.svn
# eclipse
.project
.metadata
# etc
temp
doc
demo
report
*.vim
test.html
# Compiled files
dist
.idea
storybook-static
\ No newline at end of file
......
{
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"arrowParens": "always",
"endOfLine": "lf",
"bracketSpacing": true,
"proseWrap": "preserve"
}
"singleQuote": true,
"bracketSpacing": false,
"arrowParens": "always"
}
\ No newline at end of file
......
import {configure} from '@storybook/react';
// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
module.exports = {
plugins: [],
module: {
rules: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
};
......@@ -14,21 +14,21 @@ religion, or sexual identity and orientation.
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
......@@ -70,4 +70,4 @@ members of the project's leadership.
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
[homepage]: https://www.contributor-covenant.org
\ No newline at end of file
......
......@@ -5,103 +5,87 @@ First off, thanks for taking the time to contribute! 🎉 😘 ✨
The following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
## Reporting Bugs
Bugs are tracked as GitHub issues. Search the list and try reproduce on [demo][demo] before you create an issue. When you create an issue, please provide the following information by filling in the template.
Explain the problem and include additional details to help maintainers reproduce the problem:
- **Use a clear and descriptive title** for the issue to identify the problem.
- **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
- **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
- **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
- **Explain which behavior you expected to see instead and why.**
- **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
* **Use a clear and descriptive title** for the issue to identify the problem.
* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
* **Explain which behavior you expected to see instead and why.**
* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
## Suggesting Enhancements
In case you want to suggest for TOAST UI ImageEditor, please follow this guideline to help maintainers and the community understand your suggestion.
Before creating suggestions, please check [issue list](../../labels/enhancement) if there's already a request.
Before creating suggestions, please check [issue list](../../labels/feature%20request) if there's already a request.
Create an issue and provide the following information:
- **Use a clear and descriptive title** for the issue to identify the suggestion.
- **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
- **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
- **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI ImageEditor which the suggestion is related to.
- **Explain why this enhancement would be useful** to most TOAST UI users.
- **List some other image editors or applications where this enhancement exists.**
* **Use a clear and descriptive title** for the issue to identify the suggestion.
* **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
* **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI ImageEditor which the suggestion is related to.
* **Explain why this enhancement would be useful** to most TOAST UI users.
* **List some other image editors or applications where this enhancement exists.**
## First Code Contribution
Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues:
- **document issues**: issues which should be reviewed or improved.
- **good first issues**: issues which should only require a few lines of code, and a test or two.
- **help wanted issues**: issues which should be a bit more involved than beginner issues.
* **document issues**: issues which should be reviewed or improved.
* **good first issues**: issues which should only require a few lines of code, and a test or two.
* **help wanted issues**: issues which should be a bit more involved than beginner issues.
## Pull Requests
### Development WorkFlow
- Set up your development environment
- Make change from a right branch
- Be sure the code passes `npm run lint`, `npm run test`
- Make a pull request
### Development environment
- Prepare your machine node and it's packages installed.
- Checkout our repository
- Install dependencies by `npm install && bower install`
- Start webpack-dev-server by `npm run serve`
### Make changes
#### Checkout a branch
- **develop**: PR base branch. merge features, updates for next minor or major release
- **master**: bug fix or document update for next patch release. develop branch will rebase every time master branch update. so keep code change to a minimum.
- **production**: lastest release branch with distribution files. never make a PR on this
- **gh-pages**: API docs, examples and demo
#### Check Code Style
Run `npm run eslint` and make sure all the tests pass.
#### Test
Run `npm run test` and verify all the tests pass.
If you are adding new commands or features, they must include tests.
If you are changing functionality, update the tests if you need to.
#### Commit
Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).
### Yes! Pull request
Make your pull request, then describe your changes.
#### Title
Follow other PR title format on below.
```
<Type>: Short Description (fix #111)
<Type>: Short Description (fix #123, #111, #122)
<Type>: Short Description (ref #111)
```
- capitalize first letter of Type
- use present tense: 'change' not 'changed' or 'changes'
* capitalize first letter of Type
* use present tense: 'change' not 'changed' or 'changes'
#### Description
If it has related to issues, add links to the issues(like `#123`) in the description.
Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case.
## Code of Conduct
This project and everyone participating in it is governed by the [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@nhn.com.
> This Guide is base on [atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests)
......
<!--
Thank you for your contribution.
When it comes to write an issue, please, use the template below.
To use the template is mandatory for submit new issue and we won't reply the issue that without the template.
And you can write template's contents in Korean also.
-->
<!-- TEMPLATE -->
## Version
<!-- Write the version of the grid you are currently using. -->
## Development Environment
<!-- Write the browser type, OS and so on -->
## Current Behavior
<!-- Write a description of the current operation. You can add example code, 'CodePen' or 'jsfiddle' links. -->
```js
// Write example code
```
## Expected Behavior
<!-- Write a description of the future action. -->
The MIT License
MIT License
Copyright (c) 2019 NHN Corp.
......@@ -19,4 +18,4 @@ 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.
THE SOFTWARE.
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
module.exports = (api) => {
api.cache(true);
return {
presets: [
[
'@babel/preset-env',
{
modules: false,
useBuiltIns: 'entry'
}
],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
]
};
};
\ No newline at end of file
{
"name": "tui-image-editor",
"authors": ["NHN FE Dev Lab <dl_javascript@nhn.com>"],
"license": "MIT",
"main": ["dist/tui-image-editor.js"],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"src",
"server",
"data.js",
"Gruntfile.js",
"gulpfile.js",
"karma.*.js",
"conf.json",
"package.json",
".gitignore",
"samples",
"index.js",
"jsdoc.conf.json",
"webpack.*.js"
],
"dependencies": {
"fabric": "4.2.0",
"tui-code-snippet": "^1.5.0",
"tui-color-picker": "^2.2.0"
},
"devDependencies": {
"tui-component-colorpicker": "~1.0.1",
"filesaver": "*"
},
"resolutions": {
"tui-code-snippet": "^1.5.0",
"tui-color-picker": "^2.2.0"
}
}
const fs = require('fs');
const path = require('path');
const config = require(path.resolve(process.cwd(), 'tuidoc.config.json'));
const examples = config.examples || {};
const { filePath, globalErrorLogVariable } = examples;
/**
* Get Examples Url
*/
function getTestUrls() {
if (!filePath) {
throw Error('not exist examples path at tuidoc.config.json');
}
const urlPrefix = 'http://nhn.github.io/tui.image-editor/latest';
const testUrls = fs.readdirSync(filePath).reduce((urls, fileName) => {
if (/html$/.test(fileName)) {
urls.push(`${urlPrefix}/${filePath}/${fileName}`);
}
return urls;
}, []);
fs.writeFileSync('url.txt', testUrls.join(', '));
}
function getGlobalVariable() {
if (!globalErrorLogVariable) {
throw Error('not exist examples path at tuidoc.config.json');
}
fs.writeFileSync('errorVariable.txt', globalErrorLogVariable);
}
getTestUrls();
getGlobalVariable();
[1214/032025.223:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
.border {
border: 1px solid black;
}
.body-container {
width: 1000px;
}
.tui-image-editor-controls {
min-height: 250px;
}
.menu {
padding: 0;
margin-bottom: 5px;
text-align: center;
color: #544b61;
font-weight: 400;
list-style-type: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.logo {
margin: 0 auto;
width: 300px;
vertical-align: middle;
}
.header .name {
padding: 10px;
line-height: 50px;
font-size: 30px;
font-weight: 100;
vertical-align: middle;
}
.header .menu {
display: inline-block;
}
.menu-item {
padding: 10px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
}
.menu-item a {
text-decoration: none;
}
.menu-item.no-pointer {
cursor: default;
}
.menu-item.active,
.menu-item:hover {
background-color: #f3f3f3;
}
.menu-item.disabled {
cursor: default;
color: #bfbebe;
}
.align-left-top {
text-align: left;
vertical-align: top;
}
.range-narrow {
width: 80px;
}
.sub-menu-container {
font-size: 14px;
margin-bottom: 1em;
display: none;
}
.tui-image-editor {
height: 500px;
}
.tui-image-editor-canvas-container {
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border: 1px dashed black;
overflow: hidden;
}
.tui-colorpicker-container {
margin: 5px auto 0;
}
.tui-colorpicker-palette-toggle-slider {
display: none;
}
.input-wrapper {
position: relative;
}
.input-wrapper input {
cursor: pointer;
position: absolute;
font-size: 999px;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.btn-text-style {
padding: 5px;
margin: 3px 1px;
border: 1px dashed #bfbebe;
outline: 0;
background-color: #eee;
cursor: pointer;
}
.icon-text {
font-size: 20px;
}
.select-line-type {
outline: 0;
vertical-align: middle;
}
#tui-color-picker {
display: inline-block;
vertical-align: middle;
}
#tui-text-palette {
display: none;
position: absolute;
padding: 10px;
border: 1px solid #bfbebe;
background-color: #fff;
z-index: 9999;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background-color: #383838;
font-family: Sans-Serif;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
input[type='button'],
button {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fff;
}
input[type='file'] {
position: absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #fff;
text-align: center;
z-index: 9999;
}
.header .logo {
margin: 10px 5px;
width: 180px;
vertical-align: middle;
}
.header .name {
font-size: 16px;
font-weight: bold;
}
.header .menu {
padding: 10px;
background-color: #000;
}
.header .menu input {
opacity: 0;
}
.header .menu img {
width: 20px;
height: 20px;
vertical-align: middle;
}
.header .button {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
border-radius: 5px 5px;
width: 30px;
height: 30px;
border: 0;
background-color: #fff;
vertical-align: middle;
}
.header .button.disabled img {
opacity: 0.5;
}
.tui-image-editor {
height: 100%;
}
.tui-image-editor-canvas-container {
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
overflow: hidden;
}
.tui-image-editor-controls {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background-color: #fff;
}
.tui-image-editor-controls .scrollable {
display: inline-block;
overflow-x: auto;
width: 100%;
height: 100%;
white-space: nowrap;
font-size: 0;
background-color: #000;
vertical-align: middle;
}
.tui-image-editor-controls .no-scrollable {
overflow-x: hidden;
}
.tui-image-editor-controls .menu-item {
display: inline-block;
height: 80px;
border-right: 1px solid #383838;
background-color: #ddd;
vertical-align: middle;
}
.tui-image-editor-controls .menu-button {
width: 80px;
height: 80px;
border: none;
vertical-align: middle;
background-color: #000;
color: #fff;
font-size: 12px;
font-weight: bold;
outline: 0;
}
.tui-image-editor-controls .submenu-button {
width: 80px;
height: 80px;
border: none;
background-color: #ddd;
vertical-align: middle;
}
.tui-image-editor-controls .hiddenmenu-button {
margin: 0 10px;
padding: 5px;
border: none;
color: #fff;
background-color: rgba(255, 255, 255, 0);
}
.tui-image-editor-controls .submenu {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 0;
}
.tui-image-editor-controls .submenu.show {
display: block;
}
.tui-image-editor-controls .submenu .menu-item:last-child {
margin-right: 50px;
}
.tui-image-editor-controls .hiddenmenu {
position: absolute;
display: none;
padding: 40px;
width: 100%;
left: 0;
bottom: 80px;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 9999;
}
.tui-image-editor-controls .hiddenmenu.show {
display: block;
}
.tui-image-editor-controls .hiddenmenu .top {
font-size: 12px;
color: #fff;
margin-bottom: 20px;
}
.tui-image-editor-controls .btn-prev {
display: inline-block;
width: 30px;
height: 80px;
background-color: #000;
color: #fff;
border: none;
vertical-align: middle;
}
.tui-image-editor-controls .tui-colorpicker-container {
display: inline-block;
}
.tui-image-editor-controls .msg {
position: absolute;
margin-left: 50%;
padding: 5px 10px;
left: -86px;
top: -50px;
border-radius: 5px 5px;
background-color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.tui-image-editor-controls .msg.hide {
display: none;
}
body {
margin: 0;
padding: 0;
}
.code-description {
padding: 22px 52px;
background-color: rgba(81, 92, 230, 0.1);
line-height: 1.4em;
}
.code-description,
.code-description a {
font-family: Arial;
font-size: 14px;
color: #515ce6;
}
.code-html {
padding: 20px 52px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>0. Design</title>
<link
type="text/css"
href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
rel="stylesheet"
/>
<link type="text/css" href="../dist/tui-image-editor.css" rel="stylesheet" />
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script
type="text/javascript"
src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"
></script>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
></script>
<script
type="text/javascript"
src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
></script>
<script type="text/javascript" src="../dist/tui-image-editor.js"></script>
<script type="text/javascript" src="./js/theme/white-theme.js"></script>
<script type="text/javascript" src="./js/theme/black-theme.js"></script>
<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage',
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom',
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false,
});
window.onresize = function () {
imageEditor.ui.resizeEditor();
};
</script>
</body>
</html>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
{
"example01-includeUi": {
"title": "1. Include ui"
},
"example02-useApiDirect": {
"title": "2. Use api direct (basic)"
},
"example03-mobile": {
"title": "3. Mobile"
}
}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
var blackTheme = {
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'common.bisize.height': '21px',
'common.backgroundImage': 'none',
'common.backgroundColor': '#1e1e1e',
'common.border': '0px',
// header
'header.backgroundImage': 'none',
'header.backgroundColor': 'transparent',
'header.border': '0px',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': "'Noto Sans', sans-serif",
'loadButton.fontSize': '12px',
// download button
'downloadButton.backgroundColor': '#fdba3b',
'downloadButton.border': '1px solid #fdba3b',
'downloadButton.color': '#fff',
'downloadButton.fontFamily': "'Noto Sans', sans-serif",
'downloadButton.fontSize': '12px',
// main icons
'menu.normalIcon.color': '#8a8a8a',
'menu.activeIcon.color': '#555555',
'menu.disabledIcon.color': '#434343',
'menu.hoverIcon.color': '#e9e9e9',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
// submenu icons
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#e9e9e9',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#3c3c3c',
// submenu labels
'submenu.normalLabel.color': '#8a8a8a',
'submenu.normalLabel.fontWeight': 'lighter',
'submenu.activeLabel.color': '#fff',
'submenu.activeLabel.fontWeight': 'lighter',
// checkbox style
'checkbox.border': '0px',
'checkbox.backgroundColor': '#fff',
// range style
'range.pointer.color': '#fff',
'range.bar.color': '#666',
'range.subbar.color': '#d1d1d1',
'range.disabledPointer.color': '#414141',
'range.disabledBar.color': '#282828',
'range.disabledSubbar.color': '#414141',
'range.value.color': '#fff',
'range.value.fontWeight': 'lighter',
'range.value.fontSize': '11px',
'range.value.border': '1px solid #353535',
'range.value.backgroundColor': '#151515',
'range.title.color': '#fff',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff',
};
var whiteTheme = {
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'common.bisize.height': '21px',
'common.backgroundImage': './img/bg.png',
'common.backgroundColor': '#fff',
'common.border': '1px solid #c1c1c1',
// header
'header.backgroundImage': 'none',
'header.backgroundColor': 'transparent',
'header.border': '0px',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': "'Noto Sans', sans-serif",
'loadButton.fontSize': '12px',
// download button
'downloadButton.backgroundColor': '#fdba3b',
'downloadButton.border': '1px solid #fdba3b',
'downloadButton.color': '#fff',
'downloadButton.fontFamily': "'Noto Sans', sans-serif",
'downloadButton.fontSize': '12px',
// main icons
'menu.normalIcon.color': '#8a8a8a',
'menu.activeIcon.color': '#555555',
'menu.disabledIcon.color': '#434343',
'menu.hoverIcon.color': '#e9e9e9',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
// submenu icons
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#555555',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu primary color
'submenu.backgroundColor': 'transparent',
'submenu.partition.color': '#e5e5e5',
// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'normal',
'submenu.activeLabel.color': '#000',
'submenu.activeLabel.fontWeight': 'normal',
// checkbox style
'checkbox.border': '1px solid #ccc',
'checkbox.backgroundColor': '#fff',
// rango style
'range.pointer.color': '#333',
'range.bar.color': '#ccc',
'range.subbar.color': '#606060',
'range.disabledPointer.color': '#d3d3d3',
'range.disabledBar.color': 'rgba(85,85,85,0.06)',
'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
'range.value.color': '#000',
'range.value.fontWeight': 'normal',
'range.value.fontSize': '11px',
'range.value.border': '0',
'range.value.backgroundColor': '#f5f5f5',
'range.title.color': '#000',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '0px',
'colorpicker.title.color': '#000',
};
// Type definitions for TOAST UI Image Editor v3.9.0
// TypeScript Version: 3.2.2
declare namespace tuiImageEditor {
type AngleType = number;
interface IThemeConfig {
'common.bi.image'?: string;
'common.bisize.width'?: string;
'common.bisize.height'?: string;
'common.backgroundImage'?: string;
'common.backgroundColor'?: string;
'common.border'?: string;
'header.backgroundImage'?: string;
'header.backgroundColor'?: string;
'header.border'?: string;
'loadButton.backgroundColor'?: string;
'loadButton.border'?: string;
'loadButton.color'?: string;
'loadButton.fontFamily'?: string;
'loadButton.fontSize'?: string;
'downloadButton.backgroundColor'?: string;
'downloadButton.border'?: string;
'downloadButton.color'?: string;
'downloadButton.fontFamily'?: string;
'downloadButton.fontSize'?: string;
'menu.normalIcon.path'?: string;
'menu.normalIcon.name'?: string;
'menu.activeIcon.path'?: string;
'menu.activeIcon.name'?: string;
'menu.iconSize.width'?: string;
'menu.iconSize.height'?: string;
'submenu.backgroundColor'?: string;
'submenu.partition.color'?: string;
'submenu.normalIcon.path'?: string;
'submenu.normalIcon.name'?: string;
'submenu.activeIcon.path'?: string;
'submenu.activeIcon.name'?: string;
'submenu.iconSize.width'?: string;
'submenu.iconSize.height'?: string;
'submenu.normalLabel.color'?: string;
'submenu.normalLabel.fontWeight'?: string;
'submenu.activeLabel.color'?: string;
'submenu.activeLabel.fontWeight'?: string;
'checkbox.border'?: string;
'checkbox.backgroundColor'?: string;
'range.pointer.color'?: string;
'range.bar.color'?: string;
'range.subbar.color'?: string;
'range.value.color'?: string;
'range.value.fontWeight'?: string;
'range.value.fontSize'?: string;
'range.value.border'?: string;
'range.value.backgroundColor'?: string;
'range.title.color'?: string;
'range.title.fontWeight'?: string;
'colorpicker.button.border'?: string;
'colorpicker.title.color'?: string;
}
interface IIconInfo {
[propName: string]: string;
}
interface IIconOptions {
fill?: string;
left?: number;
top?: number;
}
interface IShapeOptions {
fill?: string;
stroke?: string;
strokeWidth?: number;
width?: number;
height?: number;
rx?: number;
ry?: number;
left?: number;
top?: number;
isRegular?: boolean;
}
interface IGenerateTextOptions {
styles?: ITextStyleConfig;
position?: {
x: number;
y: number;
};
}
interface ITextStyleConfig {
fill?: string;
fontFamily?: string;
fontSize?: number;
fontStyle?: string;
fontWeight?: string;
textAlign?: string;
textDecoration?: string;
}
interface IRectConfig {
left: number;
top: number;
width: number;
height: number;
}
interface ICanvasSize {
width: number;
height: number;
}
interface IBrushOptions {
width: number;
color: string;
}
interface IPositionConfig {
x: number;
y: number;
originX: string;
originY: string;
}
interface IToDataURLOptions {
format?: string;
quality?: number;
multiplier?: number;
left?: number;
top?: number;
width?: number;
height?: number;
}
interface IGraphicObjectProps {
id?: number;
type?: string;
text?: string;
left?: string | number;
top?: string | number;
width?: string | number;
height?: string | number;
fill?: string;
stroke?: string;
strokeWidth?: string | number;
fontFamily?: string;
fontSize?: number;
fontStyle?: string;
fontWeight?: string;
textAlign?: string;
textDecoration?: string;
opacity?: number;
[propName: string]: number | string | boolean | undefined;
}
interface IIncludeUIOptions {
loadImage?: {
path: string;
name: string;
};
theme?: IThemeConfig;
menu?: string[];
initMenu?: string;
uiSize?: {
width: string;
height: string;
};
menuBarPosition?: string;
usageStatistics?: boolean;
}
interface ISelectionStyleConfig {
cornerStyle?: string;
cornerSize?: number;
cornerColor?: string;
cornerStrokeColor?: string;
transparentCorners?: boolean;
lineWidth?: number;
borderColor?: string;
rotatingPointOffset?: number;
}
interface IObjectProps {
// icon, shape
fill: string;
height: number;
id: number;
left: number;
opacity: number;
stroke: string | null;
strokeWidth: number | null;
top: number;
type: string;
width: number;
}
interface ITextObjectProps extends IObjectProps {
fontFamily: string;
fontSize: string;
fontStyle: string;
text: string;
textAlign: string;
textDecoration: string;
}
interface IFilterResolveObject {
type: string;
action: string;
}
interface ICropResolveObject {
oldWidth: number;
oldHeight: number;
newWidth: number;
newHeight: number;
}
interface IFlipXYResolveObject {
flipX: boolean;
flipY: boolean;
angle: AngleType;
}
interface IOptions {
includeUI?: IIncludeUIOptions;
cssMaxWidth?: number;
cssMaxHeight?: number;
usageStatistics?: boolean;
selectionStyle?: ISelectionStyleConfig;
}
interface IUIDimension {
height?: string;
width?: string;
}
interface IImageDimension {
oldHeight?: number;
oldWidth?: number;
newHeight?: number;
newWidth?: number;
}
interface IEditorSize {
uiSize?: IUIDimension;
imageSize?: IImageDimension;
}
interface UI {
resizeEditor(dimension: IEditorSize): Promise<void>;
}
class ImageEditor {
constructor(wrapper: string | Element, options: IOptions);
public ui: UI;
public addIcon(type: string, options?: IIconOptions): Promise<IObjectProps>;
public addImageObject(imgUrl: string): Promise<void>;
public addShape(type: string, options?: IShapeOptions): Promise<IObjectProps>;
public addText(text: string, options?: IGenerateTextOptions): Promise<ITextObjectProps>;
public applyFilter(
type: string,
options?: {
maskObjId: number;
},
isSilent?: boolean
): Promise<IFilterResolveObject>;
public changeCursor(cursorType: string): void;
public changeIconColor(id: number, color: string): Promise<void>;
public changeSelectableAll(selectable: boolean): void;
public changeShape(id: number, options?: IShapeOptions, isSilent?: boolean): Promise<void>;
public changeText(id: number, text?: string): Promise<void>;
public changeTextStyle(
id: number,
styleObj: ITextStyleConfig,
isSilent?: boolean
): Promise<void>;
public clearObjects(): Promise<void>;
public clearRedoStack(): void;
public clearUndoStack(): void;
public crop(rect: IRectConfig): Promise<ICropResolveObject>;
public deactivateAll(): void;
public destroy(): void;
public discardSelection(): void;
public flipX(): Promise<IFlipXYResolveObject>;
public flipY(): Promise<IFlipXYResolveObject>;
public getCanvasSize(): ICanvasSize;
public getCropzoneRect(): IRectConfig;
public getDrawingMode(): string;
public getImageName(): string;
public getObjectPosition(id: number, originX: string, originY: string): ICanvasSize;
public getObjectProperties(
id: number,
keys: string | string[] | IGraphicObjectProps
): IGraphicObjectProps;
public hasFilter(type: string): boolean;
public isEmptyRedoStack(): boolean;
public isEmptyUndoStack(): boolean;
public loadImageFromFile(imgFile: File, imageName?: string): Promise<ICropResolveObject>;
public loadImageFromURL(url: string, imageName?: string): Promise<ICropResolveObject>;
public redo(): Promise<any>;
public registerIcons(infos: IIconInfo): void;
public removeActiveObject(): void;
public removeFilter(type?: string): Promise<IFilterResolveObject>;
public removeObject(id: number): Promise<void>;
public resetFlip(): Promise<IFlipXYResolveObject>;
public resizeCanvasDimension(dimension: ICanvasSize): Promise<void>;
public rotate(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
public setAngle(angle: AngleType, isSilent?: boolean): Promise<AngleType>;
public setBrush(option: IBrushOptions): void;
public setCropzoneRect(mode?: number): void;
public setDrawingShape(type: string, options?: IShapeOptions): void;
public setObjectPosition(id: number, posInfo?: IPositionConfig): Promise<void>;
public setObjectProperties(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
public setObjectPropertiesQuietly(id: number, keyValue?: IGraphicObjectProps): Promise<void>;
public startDrawingMode(mode: string, option?: { width?: number; color?: string }): boolean;
public stopDrawingMode(): void;
public toDataURL(options?: IToDataURLOptions): string;
public undo(): Promise<any>;
public on(eventName: string, handler: (...args: any[]) => void): void;
}
}
declare module 'tui-image-editor' {
export = tuiImageEditor.ImageEditor;
}
{
"source": {
"include": ["src", "README.md"],
"exclude": [],
"includePattern": ".+\\.js(doc)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": ["plugins/markdown"],
"templates": {
"name": "ImageEditor",
"logo": {
"url": "https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png",
"width": "150px",
"height": "13px",
"link": "https://github.com/nhn/tui.jsdoc-template"
}
},
"opts": {
"private": false,
"recurse": true,
"destination": "doc",
"tutorials": "examples",
"template": "./node_modules/tui-jsdoc-template",
"package": "package.json"
}
}
/* eslint-disable consts-on-top, no-process-env, require-jsdoc */
/* eslint-disable no-process-env, require-jsdoc */
const webdriverConfig = {
hostname: 'fe.nhnent.com',
port: 4444,
remoteHost: true,
};
function setConfig(defaultConfig, server) {
if (server === 'ne') {
defaultConfig.customLaunchers = {
IE9: {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'internet explorer',
version: '9',
},
IE10: {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'internet explorer',
version: '10',
},
IE11: {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'internet explorer',
version: '11',
},
Edge: {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'MicrosoftEdge',
},
'Chrome-WebDriver': {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'chrome',
},
'Firefox-WebDriver': {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'firefox',
},
'Safari-WebDriver': {
base: 'WebDriver',
config: webdriverConfig,
browserName: 'safari',
},
};
defaultConfig.browsers = [
'IE9',
'IE10',
// 'IE11',
// 'Edge',
'Chrome-WebDriver',
'Firefox-WebDriver',
// 'Safari-WebDriver'
];
defaultConfig.reporters.push('coverage');
defaultConfig.reporters.push('junit');
defaultConfig.coverageReporter = {
dir: 'report/coverage/',
reporters: [
{
type: 'html',
subdir(browser) {
return `report-html/${browser}`;
},
},
{
type: 'cobertura',
subdir(browser) {
return `report-cobertura/${browser}`;
},
file: 'cobertura.txt',
},
],
};
defaultConfig.junitReporter = {
outputDir: 'report/junit',
suite: '',
};
} else {
defaultConfig.browsers = ['ChromeHeadless'];
}
}
module.exports = function (config) {
const defaultConfig = {
basePath: './',
frameworks: ['jasmine', 'jquery-3.2.1', 'es5-shim'],
files: [
// reason for not using karma-jasmine-jquery framework is that including older jasmine-karma file
// included jasmine-karma version is 2.0.5 and this version don't support ie8
'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
'node_modules/fabric/dist/fabric.js',
'test/index.js',
{
pattern: 'test/fixtures/*.jpg',
watched: false,
included: false,
served: true,
},
{
pattern: 'test/fixtures/*.png',
watched: false,
included: false,
served: true,
},
{
pattern: 'test/fixtures/*.svg',
watched: false,
included: false,
served: true,
},
],
preprocessors: {
'test/index.js': ['webpack', 'sourcemap'],
},
reporters: ['dots'],
webpack: {
mode: 'development',
devtool: 'inline-source-map',
externals: {
fabric: 'fabric',
},
module: {
rules: [
{
test: /\.js$/,
include: /src/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre',
},
{
test: /\.js$/,
exclude: /(test|node_modules)/,
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true,
},
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory',
options: {
babelrc: true,
},
},
{
test: /\.styl$/,
use: ['css-loader', 'stylus-loader'],
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
],
},
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: true,
};
/* eslint-disable */
setConfig(defaultConfig, process.env.KARMA_SERVER);
config.set(defaultConfig);
};
const fs = require('fs');
const mkdirp = require('mkdirp');
const svgstore = require('svgstore');
const svgDir = './src/svg';
function getFileList(dir) {
const targetDir = `${svgDir}/${dir}`;
const sprites = svgstore();
fs.readdir(targetDir, (err, files) => {
if (!files) return;
files.forEach((file) => {
if (file.match(/^\./)) return;
const id = `${dir}-${file.replace(/\.svg$/, '')}`;
const svg = fs.readFileSync(`${targetDir}/${file}`);
sprites.add(id, svg);
});
fs.writeFileSync(`./dist/svg/${dir}.svg`, sprites);
});
}
mkdirp('./dist/svg', (mkdirpErr) => {
if (mkdirpErr) {
console.error(mkdirpErr);
} else {
fs.readdir(svgDir, (err, dirs) => {
dirs.forEach((dir) => {
getFileList(dir);
});
});
}
});
This diff could not be displayed because it is too large.
{
"name": "tui-image-editor",
"author": "NHN FE Development Lab <dl_javascript@nhn.com>",
"version": "3.11.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/nhn/tui.image-editor.git"
},
"main": "dist/tui-image-editor.js",
"name": "@toast-ui/react-image-editor",
"version": "1.3.0",
"description": "React wrapper component for tui.imageEditor",
"main": "dist/toastui-react-image-editor.js",
"files": [
"src",
"dist",
"index.d.ts"
],
"description": "TOAST UI Component: ImageEditor",
"keywords": [
"nhn",
"nhnent",
"tui",
"component",
"image",
"editor",
"canvas",
"fabric"
"src"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.4.1",
"dtslint": "^0.4.2",
"es5-shim": "^4.5.9",
"eslint": "^4.5.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-tui": "^1.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^3.1.4",
"file-saver": "^1.3.3",
"istanbul-instrumenter-loader": "^1.0.0",
"jasmine-core": "^2.4.1",
"jasmine-jquery": "^2.1.1",
"jquery": "^3.4.0",
"jsdoc": "^3.5.4",
"karma": "^4.4.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^2.0.1",
"karma-edge-launcher": "^0.4.2",
"karma-es5-shim": "0.0.4",
"karma-firefox-launcher": "^1.1.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-jquery-2": "^0.1.1",
"karma-jquery": "^0.2.4",
"karma-junit-reporter": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webdriver-launcher": "git+https://github.com/nhn/karma-webdriver-launcher.git#v1.2.0",
"karma-webpack": "^4.0.2",
"mini-css-extract-plugin": "^0.9.0",
"mkdirp": "^0.5.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"prettier": "^2.2.1",
"safe-umd-webpack-plugin": "^4.0.0",
"selenium-webdriver": "^4.0.0-alpha.7",
"simulant": "^0.2.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"svg-inline-loader": "^0.8.2",
"svgstore": "^2.0.3",
"tslint": "^5.12.0",
"tui-jsdoc-template": "^1.0.4",
"typescript": "^3.2.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"scripts": {
"test": "karma start --no-single-run",
"test:ne": "KARMA_SERVER=ne karma start",
"test:types": "tsc --project test/types",
"bundle": "webpack && webpack -p && npm run bundle:svg && node tsBannerGenerator.js",
"bundle:svg": "node makesvg.js",
"build:dev": "webpack --mode development",
"build": "webpack --mode production",
"serve": "webpack-dev-server",
"doc:dev": "tuidoc --dev",
"doc": "tuidoc",
"tslint": "tslint index.d.ts"
"storybook": "start-storybook -s ./node_modules/tui-image-editor/dist/svg,.storybook -p 6006",
"build-storybook": "build-storybook"
},
"homepage": "https://github.com/nhn/toast-ui.react-image-editor",
"bugs": "https://github.com/nhn/toast-ui.react-image-editor/issues",
"author": "NHN. FE Development Lab <dl_javascript@nhn.com>",
"repository": "https://github.com/nhn/toast-ui.react-image-editor.git",
"license": "MIT",
"browserslist": "last 2 versions, ie 9",
"peerDependencies": {
"react": "^16.0.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^4.1.7",
"@storybook/addon-knobs": "^4.1.7",
"@storybook/addon-links": "^4.1.7",
"@storybook/addons": "^4.1.7",
"@storybook/react": "^4.1.7",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-tui": "^2.1.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"jquery-mockjax": "^2.5.0",
"prettier": "^1.16.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"storybook": "^5.3.13",
"style-loader": "^0.23.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"core-js-pure": "^3.6.4",
"fabric": "4.2.0",
"tui-code-snippet": "^1.5.0",
"tui-color-picker": "^2.2.6"
"tui-image-editor": "^3.11.0"
}
}
......
/* ICON BUTTON */
.tie-icon-add-button
&.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
&.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
&.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
&.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
&.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
&.icon-star-2 .{prefix}-button[data-icontype="icon-star-2"] svg > use.active,
&.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
&.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
&.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
&.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
display: block;
/* DRAW BUTTON */
.tie-draw-line-select-button
&.line .{prefix}-button.line svg > use.normal,
&.free .{prefix}-button.free svg > use.normal
display: none;
&.line .{prefix}-button.line svg > use.active,
&.free .{prefix}-button.free svg > use.active
display: block;
/* FLIP BUTTON */
.tie-flip-button
&.resetFlip .{prefix}-button.resetFlip,
&.flipX .{prefix}-button.flipX,
&.flipY .{prefix}-button.flipY
svg > use.normal
display: none;
svg > use.active
display: block;
/* MASK BUTTON */
.tie-mask-apply.apply.active .{prefix}-button.apply
label
color: #fff;
svg > use.active
display: block;
/* CROP BUTTON */
.tie-crop-button,
.tie-crop-preset-button
.{prefix}-button.apply
margin-right: 24px;
.{prefix}-button.preset.active svg > use.active
display: block;
.{prefix}-button.apply.active svg > use.active
display: block;
/* SHAPE BUTTON */
.tie-shape-button
&.rect .{prefix}-button.rect,
&.circle .{prefix}-button.circle,
&.triangle .{prefix}-button.triangle
svg > use.normal
display: none;
svg > use.active
display: block;
/* TEXT BUTTON */
.tie-text-effect-button
.{prefix}-button.active svg > use.active
display: block;
.tie-text-align-button
&.left .{prefix}-button.left svg > use.active,
&.center .{prefix}-button.center svg > use.active,
&.right .{prefix}-button.right svg > use.active
display: block;
.tie-mask-image-file,
.tie-icon-image-file
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid green;
cursor: inherit;
left: 0;
top: 0;
/* VIRTUAL CHECKBOX */
.{prefix}-container
.filter-color-item
display: inline-block;
.tui-image-editor-checkbox
display: block;
.{prefix}-checkbox-wrap
display: inline-block !important;
text-align: left;
.{prefix}-checkbox-wrap.fixed-width
width: 187px;
white-space: normal;
.{prefix}-checkbox
display: inline-block;
margin: 1px 0 1px 0;
input
width: 14px;
height: 14px;
opacity: 0;
> label > span
color: #fff;
height: 14px;
position: relative;
input + label:before,
> label > span:before
content: '';
position: absolute;
width: 14px;
height: 14px;
background-color: #fff;
top: 6px;
left: -19px;
display: inline-block;
margin: 0;
text-align: center;
font-size: 11px;
border: 0;
border-radius: 2px;
padding-top: 1px;
box-sizing: border-box;
input[type='checkbox']:checked + span:before
background-size: cover;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==');
.{prefix}-selectlist-wrap
position: relative;
select
width: 100%;
height: 28px;
margin-top: 4px;
border: 0;
outline: 0;
border-radius: 0;
border: 1px solid #cbdbdb;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 7px 0 10px;
.{prefix}-selectlist
display: none;
position: relative;
top: -1px;
border: 1px solid #ccc;
background-color: #fff;
border-top: 0px;
padding: 4px 0;
li
display: block;
text-align: left;
padding: 7px 10px;
font-family: 'Noto Sans', sans-serif;
li:hover
background-color: rgba(81, 92, 230, 0.05);
.{prefix}-selectlist-wrap:before
content: '';
position: absolute;
display: inline-block;
width: 14px;
height: 14px;
right: 5px;
top: 10px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');
background-size: cover;
.{prefix}-selectlist-wrap select::-ms-expand
display:none;
/* COLOR PICKER */
.{prefix}-container
div.tui-colorpicker-clearfix
width: 159px;
height: 28px;
border: 1px solid #d5d5d5;
border-radius: 2px;
background-color: #f5f5f5;
margin-top: 6px;
padding: 4px 7px 4px 7px;
.tui-colorpicker-palette-hex
width: 114px;
background-color: #f5f5f5;
border: 0;
font-size: 11px;
margin-top: 2px;
font-family: 'Noto Sans', sans-serif;
.tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,
.tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
border: 1px solid #ccc;
.tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview
background-size: cover;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
.tui-colorpicker-palette-preview
border-radius: 100%;
float: left;
width: 17px;
height: 17px;
border: 0;
.color-picker-control
position: absolute;
display: none;
z-index: 99;
width: 192px;
background-color: #fff;
box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);
padding: 16px;
border-radius: 2px;
.tui-colorpicker-palette-toggle-slider
display: none;
.tui-colorpicker-palette-button
border: 0;
border-radius: 100%;
margin: 2px;
background-size: cover;
font-size: 1px;
&[title='#ffffff']
border: 1px solid #ccc;
&[title='']
border: 1px solid #ccc;
.triangle
width: 0;
height: 0;
border-right: 7px solid transparent;
border-top: 8px solid #fff;
border-left: 7px solid transparent;
position: absolute;
bottom: -8px;
left: 84px;
.tui-colorpicker-container,
.tui-colorpicker-palette-container ul,
.tui-colorpicker-palette-container
width: 100%;
height: auto;
.filter-color-item
.color-picker-control label
font-color: #333;
font-weight: normal;
margin-right: 7pxleft
.tui-image-editor-checkbox
margin-top: 0;
input + label:before,
> label:before
left: -16px;
.color-picker
width: 100%;
height: auto;
.color-picker-value
width: 32px;
height: 32px;
border: 0px;
border-radius: 100%;
margin: auto;
margin-bottom: 1px;
&.transparent
border: 1px solid #cbcbcb;
background-size: cover;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');
.color-picker-value + label
color: #fff;
.{prefix}-submenu svg > use
display: none;
.{prefix}-submenu svg > use.normal
display: block;
/* GRID VISUAL OF FLIP AND ROTATE MENU */
.{prefix}-container
.{prefix}-grid-visual
display: none;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255,255,255,0.7);
.{prefix}-main.{prefix}-menu-flip,
.{prefix}-main.{prefix}-menu-rotate
.tui-image-editor
transition: none;
.{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,
.{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual
display: block;
.{prefix}-grid-visual
table
width: 100%;
height: 100%;
border-collapse: collapse;
td
border: 1px solid rgba(255,255,255,0.3);
td.dot:before
content: '';
position: absolute;
box-sizing: border-box;
width: 10px;
height: 10px;
border: 0;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
border-radius: 100%;
background-color: #fff;
td.dot.left-top:before
top: -5px;
left: -5px;
td.dot.right-top:before
top: -5px;
right: -5px;
td.dot.left-bottom:before
bottom: -5px;
left: -5px;
td.dot.right-bottom:before
bottom: -5px;
right: -5px;
/* ICON */
.{prefix}-container
.tie-icon-add-button .{prefix}-button
min-width: 42px;
.svg_ic-menu
.svg_ic-helpmenu
width: 24px;
height: 24px;
.svg_ic-submenu
width: 32px;
height: 32px;
.svg_img-bi
width: 257px;
height: 26px;
.{prefix}-controls
svg > use
display: none;
.enabled svg:hover > use.hover
.normal svg:hover > use.hover
display: block;
.active svg:hover > use.hover
display: none;
svg > use.normal
display: block;
.active svg > use.active
display: block;
.enabled svg > use.enabled
display: block;
.active svg > use.normal,
.enabled svg > use.normal
display: none;
.help svg > use.disabled,
.help.enabled svg > use.normal
display: block;
.help.enabled svg > use.disabled
display: none;
.{prefix}-controls:hover
z-index: 3;
prefix = 'tui-image-editor'
@import 'main.styl'
@import 'gridtable.styl'
@import 'submenu.styl'
@import 'checkbox.styl'
@import 'range.styl'
@import 'position.styl'
@import 'icon.styl'
@import 'colorpicker.styl'
@import 'buttons.styl'
.{prefix}-container.top
&.{prefix}-top-optimization
.{prefix}-controls ul
text-align: right;
.{prefix}-controls-logo
display: none;
body > textarea
position: fixed !important;
+prefix-classes(prefix)
.-container
margin: 0;
padding: 0;
box-sizing: border-box;
min-height: 300px;
height: 100%;
position: relative;
background-color: #282828;
overflow: hidden;
letter-spacing: 0.3px;
div, ul, label, input, li
box-sizing: border-box;
margin: 0;
padding: 0;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
.-header
/* BUTTON AND LOGO */
min-width: 533px;
position: absolute;
background-color: #151515;
top: 0;
width: 100%;
.-header-buttons,
.-controls-buttons
float: right;
margin: 8px;
.-header-logo,
.-controls-logo
float: left;
width: 30%;
padding: 17px;
.-controls-logo,
.-controls-buttons
width: 270px;
height: 100%;
display: none;
.-header-buttons button,
.-header-buttons div,
.-controls-buttons button,
.-controls-buttons div
display: inline-block;
position: relative;
width: 120px;
height: 40px;
padding: 0;
line-height: 40px;
outline: none;
border-radius: 20px;
border: 1px solid #ddd;
font-family: 'Noto Sans', sans-serif;
font-size: 12px;
font-weight: bold;
cursor: pointer;
vertical-align: middle;
letter-spacing: 0.3px;
text-align: center;
.-download-btn
background-color: #fdba3b;
border-color: #fdba3b;
color: #fff;
.-load-btn
position: absolute;
left: 0;
right: 0;
display: inline-block;
top: 0;
bottom: 0;
width: 100%;
cursor: pointer;
opacity: 0;
.-main-container
position: absolute;
width: 100%;
top: 0;
bottom: 64px;
.-main
position: absolute;
text-align: center;
top: 64px;
bottom: 0;
right: 0;
left: 0;
.-wrap
position: absolute;
bottom: 0;
width: 100%;
overflow: auto;
.-size-wrap
display: table;
width: 100%;
height: 100%
.-align-wrap
display: table-cell;
vertical-align: middle;
.
position: relative;
display: inline-block;
/* BIG MENU */
.{prefix}-container
.{prefix}-menu
width: auto;
list-style: none;
padding: 0;
margin: 0 auto;
display: table-cell;
text-align: center;
vertical-align: middle;
white-space: nowrap;
> .{prefix}-item
position: relative;
display: inline-block;
border-radius: 2px;
padding: 7px 8px 3px 8px;
cursor: pointer;
margin: 0 4px;
> .{prefix}-item[tooltip-content]:hover
&:before
content: '';
position: absolute;
display: inline-block;
margin: 0 auto 0;
width: 0;
height: 0;
border-right: 7px solid transparent;
border-top: 7px solid #2f2f2f;
border-left: 7px solid transparent;
left: 13px;
top: -2px;
&:after
content: attr(tooltip-content);
position: absolute;
display: inline-block;
background-color: #2f2f2f;
color: #fff;
padding: 5px 8px;
font-size: 11px;
font-weight: lighter;
border-radius: 3px;
max-height: 23px;
top: -25px;
left: 0;
min-width: 24px;
> .{prefix}-item.active
background-color: #fff;
transition: all .3s ease;
.{prefix}-wrap
position: absolute;
/* POSITION LEFT */
.{prefix}-container
&.left
.{prefix}-menu
> .{prefix}-item[tooltip-content]
&:before
left: 28px;
top: 11px;
border-right: 7px solid #2f2f2f;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
&:after
top: 7px;
left: 42px;
white-space: nowrap;
.{prefix}-submenu
left: 0;
height: 100%;
width: 248px;
.{prefix}-main-container
left: 64px;
width: calc(100% - 64px);
height: 100%;
.{prefix}-controls
width: 64px;
height: 100%;
display: table;
/* POSITION LEFT & RIGHT */
.{prefix}-container
&.left, &.right
.{prefix}-menu
white-space: inherit;
.{prefix}-submenu
white-space: normal;
> div
vertical-align: middle;
.{prefix}-controls li
display: inline-block;
margin: 4px auto;
.{prefix}-icpartition
position: relative;
top: -7px;
width: 24px;
height: 1px;
.{prefix}-submenu
.{prefix}-partition
display: block;
width: 75%;
margin: auto;
> div
border-left: 0;
height:10px;
border-bottom: 1px solid #3c3c3c;
width: 100%;
margin: 0;
.{prefix}-submenu-align
margin-right: 0;
.{prefix}-submenu-item
li
margin-top: 15px;
.tui-colorpicker-clearfix li
margin-top: 0;
.{prefix}-checkbox-wrap.fixed-width
width: 182px;
white-space: normal;
.{prefix}-range-wrap.{prefix}-newline label.range
display: block;
text-align: left;
width: 75%;
margin: auto;
.{prefix}-range
width: 136px;
/* POSITION RIGIHT */
.{prefix}-container
&.right
.{prefix}-menu
> .{prefix}-item[tooltip-content]
&:before
left: -3px;
top: 11px;
border-left: 7px solid #2f2f2f;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
&:after
top: 7px;
left: unset;
right: 43px;
white-space: nowrap;
.{prefix}-submenu
right: 0;
height: 100%;
width: 248px;
.{prefix}-main-container
right: 64px;
width: calc(100% - 64px);
height: 100%;
.{prefix}-controls
right: 0;
width: 64px;
height: 100%;
display: table;
/* POSITION TOP & BOTTOM */
.{prefix}-container
&.top, &.bottom
.{prefix}-submenu
.{prefix}-partition.only-left-right
display: none;
/* POSITION BOTTOM */
.{prefix}-container
&.bottom .tui-image-editor-submenu > div
padding-bottom: 24px;
/* POSITION TOP */
.{prefix}-container
&.top
.color-picker-control .triangle
top: -8px;
border-right: 7px solid transparent;
border-top: 0px;
border-left: 7px solid transparent;
border-bottom: 8px solid #fff;
.{prefix}-size-wrap
height: 100%;
.{prefix}-main-container
bottom: 0;
.{prefix}-menu
> .{prefix}-item[tooltip-content]
&:before
left: 13px;
border-top: 0;
border-bottom: 7px solid #2f2f2f;
top: 33px;
&:after
top: 38px;
.{prefix}-submenu
top: 0;
bottom: auto;
> div
padding-top: 24px;
vertical-align: top;
.{prefix}-controls-logo
display: table-cell;
.{prefix}-controls-buttons
display: table-cell;
.{prefix}-main
top: 64px;
height: calc(100% - 64px);
.{prefix}-controls
top: 0;
bottom: inherit;
/* VIRTUAL RANGE */
.{prefix}-container
.{prefix}-virtual-range-bar
.{prefix}-virtual-range-subbar
.{prefix}-virtual-range-pointer
.{prefix}-disabled
backbround-color: red;
.{prefix}-range
position: relative;
top: 5px;
width: 166px;
height: 17px;
display: inline-block;
.{prefix}-virtual-range-bar
top: 7px;
position: absolute;
width: 100%;
height: 2px;
background-color: #666666;
.{prefix}-virtual-range-subbar
position: absolute;
height: 100%;
left: 0;
right: 0;
background-color: #d1d1d1;
.{prefix}-virtual-range-pointer
position: absolute;
cursor: pointer;
top: -5px;
left: 0;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 100%;
.{prefix}-range-wrap
display: inline-block;
margin-left: 4px;
&.short .tui-image-editor-range
width: 100px;
.color-picker-control
.{prefix}-range
width: 108px;
margin-left: 10px;
.{prefix}-virtual-range-pointer
background-color: #333;
.{prefix}-virtual-range-bar
background-color: #ccc;
.{prefix}-virtual-range-subbar
background-color: #606060;
.{prefix}-range-wrap.{prefix}-newline.short
margin-top: -2px;
margin-left: 19px;
label
color: #8e8e8e;
font-weight: normal;
.{prefix}-range-wrap label
vertical-align: baseline;
font-size: 11px;
margin-right: 7px;
color: #fff;
.{prefix}-range-value
cursor: default;
width: 40px;
height: 24px;
outline: none;
border-radius: 2px;
box-shadow: none;
border: 1px solid #d5d5d5;
text-align: center;
background-color: #1c1c1c;
color: #fff;
font-weight: lighter;
vertical-align: baseline;
font-family: 'Noto Sans', sans-serif;
margin-top: 21px;
margin-left: 4px;
.{prefix}-controls
position: absolute;
background-color: #151515;
width: 100%;
height: 64px;
display: table;
bottom: 0;
z-index: 2;
.{prefix}-icpartition
display: inline-block;
background-color: #282828;
width: 1px;
height: 24px;
\ No newline at end of file
/* SUBMENU */
.{prefix}-container
.{prefix}-submenu
display: none;
position: absolute;
bottom: 0;
width:100%;
height: 150px;
white-space: nowrap;
z-index: 2;
.{prefix}-button:hover svg > use.active
display: block;
.{prefix}-submenu-item
li
display: inline-block;
vertical-align: top;
.{prefix}-newline
display: block;
margin-top: 0;
.{prefix}-button
position: relative;
cursor: pointer;
display: inline-block;
font-weight: normal;
font-size: 11px;
margin: 0 9px 0 9px;
.{prefix}-button.preset
margin: 0 9px 20px 5px;
label > span
display: inline-block;
cursor: pointer;
padding-top: 5px;
font-family: "Noto Sans", sans-serif;
font-size: 11px;
.{prefix}-button.apply label,
.{prefix}-button.cancel label
vertical-align: 7px;
> div
display: none;
vertical-align: bottom;
.{prefix}-submenu-style
opacity: 0.95;
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
.{prefix}-partition > div
width: 1px;
height: 52px;
border-left: 1px solid #3c3c3c;
margin: 0 8px 0 8px;
.{prefix}-main.{prefix}-menu-filter .{prefix}-partition > div
height: 108px;
margin: 0 29px 0 0px;
.{prefix}-submenu-align
text-align: left;
margin-right: 30px;
label > span
width: 55px;
white-space: nowrap;
.{prefix}-submenu-align:first-child
margin-right: 0;
label > span
width: 70px;
.{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,
.{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip,
.{prefix}-main.{prefix}-menu-rotate .{prefix}-submenu > div.{prefix}-menu-rotate,
.{prefix}-main.{prefix}-menu-shape .{prefix}-submenu > div.{prefix}-menu-shape,
.{prefix}-main.{prefix}-menu-text .{prefix}-submenu > div.{prefix}-menu-text,
.{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,
.{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,
.{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,
.{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter
display: table-cell;
.{prefix}-main.{prefix}-menu-crop,
.{prefix}-main.{prefix}-menu-flip,
.{prefix}-main.{prefix}-menu-rotate,
.{prefix}-main.{prefix}-menu-shape,
.{prefix}-main.{prefix}-menu-text,
.{prefix}-main.{prefix}-menu-mask,
.{prefix}-main.{prefix}-menu-icon,
.{prefix}-main.{prefix}-menu-draw,
.{prefix}-main.{prefix}-menu-filter
.{prefix}-submenu
display: table;
import './js/polyfill';
import ImageEditor from './js/imageEditor';
import './css/index.styl';
// commands
import './js/command/addIcon';
import './js/command/addImageObject';
import './js/command/addObject';
import './js/command/addShape';
import './js/command/addText';
import './js/command/applyFilter';
import './js/command/changeIconColor';
import './js/command/changeShape';
import './js/command/changeText';
import './js/command/changeTextStyle';
import './js/command/clearObjects';
import './js/command/flip';
import './js/command/loadImage';
import './js/command/removeFilter';
import './js/command/removeObject';
import './js/command/resizeCanvasDimension';
import './js/command/rotate';
import './js/command/setObjectProperties';
import './js/command/setObjectPosition';
import './js/command/changeSelection';
module.exports = ImageEditor;
/**
* @fileoverview TOAST UI Image-Editor React wrapper component
* @author NHN. FE Development Lab <dl_javascript@nhn.com>
*/
import React from 'react';
import TuiImageEditor from 'tui-image-editor';
export default class ImageEditor extends React.Component {
rootEl = React.createRef();
imageEditorInst = null;
componentDidMount() {
this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
...this.props
});
this.bindEventHandlers(this.props);
}
componentWillUnmount() {
this.unbindEventHandlers();
this.imageEditorInst.destroy();
this.imageEditorInst = null;
}
shouldComponentUpdate(nextProps) {
this.bindEventHandlers(this.props, nextProps);
return false;
}
getInstance() {
return this.imageEditorInst;
}
getRootElement() {
return this.rootEl.current;
}
bindEventHandlers(props, prevProps) {
Object.keys(props)
.filter(this.isEventHandlerKeys)
.forEach((key) => {
const eventName = key[2].toLowerCase() + key.slice(3);
// For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} />
if (prevProps && prevProps[key] !== props[key]) {
this.imageEditorInst.off(eventName);
}
this.imageEditorInst.on(eventName, props[key]);
});
}
unbindEventHandlers() {
Object.keys(this.props)
.filter(this.isEventHandlerKeys)
.forEach((key) => {
const eventName = key[2].toLowerCase() + key.slice(3);
this.imageEditorInst.off(eventName);
});
}
isEventHandlerKeys(key) {
return /on[A-Z][a-zA-Z]+/.test(key);
}
render() {
return <div ref={this.rootEl} />;
}
}
......
This diff is collapsed. Click to expand it.
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add an icon
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, commandNames } from '../consts';
const { ICON } = componentNames;
const command = {
name: commandNames.ADD_ICON,
/**
* Add an icon
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
* @param {Object} options - Icon options
* @param {string} [options.fill] - Icon foreground color
* @param {string} [options.left] - Icon x position
* @param {string} [options.top] - Icon y position
* @returns {Promise}
*/
execute(graphics, type, options) {
const iconComp = graphics.getComponent(ICON);
return iconComp.add(type, options).then((objectProps) => {
this.undoData.object = graphics.getObject(objectProps.id);
return objectProps;
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.remove(this.undoData.object);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add an image object
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames } from '../consts';
const command = {
name: commandNames.ADD_IMAGE_OBJECT,
/**
* Add an image object
* @param {Graphics} graphics - Graphics instance
* @param {string} imgUrl - Image url to make object
* @returns {Promise}
*/
execute(graphics, imgUrl) {
return graphics.addImageObject(imgUrl).then((objectProps) => {
this.undoData.object = graphics.getObject(objectProps.id);
return objectProps;
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.remove(this.undoData.object);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add an object
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames, rejectMessages } from '../consts';
const command = {
name: commandNames.ADD_OBJECT,
/**
* Add an object
* @param {Graphics} graphics - Graphics instance
* @param {Object} object - Fabric object
* @returns {Promise}
*/
execute(graphics, object) {
return new Promise((resolve, reject) => {
if (!graphics.contains(object)) {
graphics.add(object);
resolve(object);
} else {
reject(rejectMessages.addedObject);
}
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @param {Object} object - Fabric object
* @returns {Promise}
*/
undo(graphics, object) {
return new Promise((resolve, reject) => {
if (graphics.contains(object)) {
graphics.remove(object);
resolve(object);
} else {
reject(rejectMessages.noObject);
}
});
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add a shape
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, commandNames } from '../consts';
const { SHAPE } = componentNames;
const command = {
name: commandNames.ADD_SHAPE,
/**
* Add a shape
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')
* @param {Object} options - Shape options
* @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
* @param {string} [options.stroke] - Shape outline color
* @param {number} [options.strokeWidth] - Shape outline width
* @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
* @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
* @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
* @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
* @param {number} [options.left] - Shape x position
* @param {number} [options.top] - Shape y position
* @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
* @returns {Promise}
*/
execute(graphics, type, options) {
const shapeComp = graphics.getComponent(SHAPE);
return shapeComp.add(type, options).then((objectProps) => {
this.undoData.object = graphics.getObject(objectProps.id);
return objectProps;
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.remove(this.undoData.object);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add a text object
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, commandNames, rejectMessages } from '../consts';
const { TEXT } = componentNames;
const command = {
name: commandNames.ADD_TEXT,
/**
* Add a text object
* @param {Graphics} graphics - Graphics instance
* @param {string} text - Initial input text
* @param {Object} [options] Options for text styles
* @param {Object} [options.styles] Initial styles
* @param {string} [options.styles.fill] Color
* @param {string} [options.styles.fontFamily] Font type for text
* @param {number} [options.styles.fontSize] Size
* @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)
* @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)
* @param {string} [options.styles.textAlign] Type of text align (left / center / right)
* @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)
* @param {{x: number, y: number}} [options.position] - Initial position
* @returns {Promise}
*/
execute(graphics, text, options) {
const textComp = graphics.getComponent(TEXT);
if (this.undoData.object) {
const undoObject = this.undoData.object;
return new Promise((resolve, reject) => {
if (!graphics.contains(undoObject)) {
graphics.add(undoObject);
resolve(undoObject);
} else {
reject(rejectMessages.redo);
}
});
}
return textComp.add(text, options).then((objectProps) => {
const { id } = objectProps;
const textObject = graphics.getObject(id);
this.undoData.object = textObject;
return objectProps;
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.remove(this.undoData.object);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Apply a filter into an image
*/
import snippet from 'tui-code-snippet';
import commandFactory from '../factory/command';
import { componentNames, rejectMessages, commandNames } from '../consts';
const { FILTER } = componentNames;
/**
* Chched data for undo
* @type {Object}
*/
let chchedUndoDataForSilent = null;
/**
* Make undoData
* @param {string} type - Filter type
* @param {Object} prevfilterOption - prev Filter options
* @param {Object} options - Filter options
* @returns {object} - undo data
*/
function makeUndoData(type, prevfilterOption, options) {
const undoData = {};
if (type === 'mask') {
undoData.object = options.mask;
}
undoData.options = prevfilterOption;
return undoData;
}
const command = {
name: commandNames.APPLY_FILTER,
/**
* Apply a filter into an image
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Filter type
* @param {Object} options - Filter options
* @param {number} options.maskObjId - masking image object id
* @param {boolean} isSilent - is silent execution or not
* @returns {Promise}
*/
execute(graphics, type, options, isSilent) {
const filterComp = graphics.getComponent(FILTER);
if (type === 'mask') {
const maskObj = graphics.getObject(options.maskObjId);
if (!(maskObj && maskObj.isType('image'))) {
return Promise.reject(rejectMessages.invalidParameters);
}
snippet.extend(options, { mask: maskObj });
graphics.remove(options.mask);
}
if (!this.isRedo) {
const prevfilterOption = filterComp.getOptions(type);
const undoData = makeUndoData(type, prevfilterOption, options);
chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
}
return filterComp.add(type, options);
},
/**
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Filter type
* @returns {Promise}
*/
undo(graphics, type) {
const filterComp = graphics.getComponent(FILTER);
if (type === 'mask') {
const mask = this.undoData.object;
graphics.add(mask);
graphics.setActiveObject(mask);
return filterComp.remove(type);
}
// options changed case
if (this.undoData.options) {
return filterComp.add(type, this.undoData.options);
}
// filter added case
return filterComp.remove(type);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Change icon color
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, rejectMessages, commandNames } from '../consts';
const { ICON } = componentNames;
const command = {
name: commandNames.CHANGE_ICON_COLOR,
/**
* Change icon color
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {string} color - Color for icon
* @returns {Promise}
*/
execute(graphics, id, color) {
return new Promise((resolve, reject) => {
const iconComp = graphics.getComponent(ICON);
const targetObj = graphics.getObject(id);
if (!targetObj) {
reject(rejectMessages.noObject);
}
this.undoData.object = targetObj;
this.undoData.color = iconComp.getColor(targetObj);
iconComp.setColor(color, targetObj);
resolve();
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const iconComp = graphics.getComponent(ICON);
const { object: icon, color } = this.undoData;
iconComp.setColor(color, icon);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN. FE Development Team <dl_javascript@nhn.com>
* @fileoverview change selection
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames } from '../consts';
import { getCachedUndoDataForDimension } from '../helper/selectionModifyHelper';
const command = {
name: commandNames.CHANGE_SELECTION,
execute(graphics, props) {
if (this.isRedo) {
props.forEach((prop) => {
graphics.setObjectProperties(prop.id, prop);
});
} else {
this.undoData = getCachedUndoDataForDimension();
}
return Promise.resolve();
},
undo(graphics) {
this.undoData.forEach((datum) => {
graphics.setObjectProperties(datum.id, datum);
});
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview change a shape
*/
import snippet from 'tui-code-snippet';
import { Promise } from '../util';
import commandFactory from '../factory/command';
import { componentNames, rejectMessages, commandNames } from '../consts';
const { SHAPE } = componentNames;
/**
* Chched data for undo
* @type {Object}
*/
let chchedUndoDataForSilent = null;
/**
* Make undoData
* @param {object} options - shape options
* @param {Component} targetObj - shape component
* @returns {object} - undo data
*/
function makeUndoData(options, targetObj) {
const undoData = {
object: targetObj,
options: {},
};
snippet.forEachOwnProperties(options, (value, key) => {
undoData.options[key] = targetObj[key];
});
return undoData;
}
const command = {
name: commandNames.CHANGE_SHAPE,
/**
* Change a shape
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {Object} options - Shape options
* @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')
* @param {string} [options.stroke] - Shape outline color
* @param {number} [options.strokeWidth] - Shape outline width
* @param {number} [options.width] - Width value (When type option is 'rect', this options can use)
* @param {number} [options.height] - Height value (When type option is 'rect', this options can use)
* @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)
* @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
* @param {number} [options.left] - Shape x position
* @param {number} [options.top] - Shape y position
* @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
* @param {boolean} isSilent - is silent execution or not
* @returns {Promise}
*/
execute(graphics, id, options, isSilent) {
const shapeComp = graphics.getComponent(SHAPE);
const targetObj = graphics.getObject(id);
if (!targetObj) {
return Promise.reject(rejectMessages.noObject);
}
if (!this.isRedo) {
const undoData = makeUndoData(options, targetObj);
chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
}
return shapeComp.change(targetObj, options);
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const shapeComp = graphics.getComponent(SHAPE);
const { object: shape, options } = this.undoData;
return shapeComp.change(shape, options);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Change a text
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, rejectMessages, commandNames } from '../consts';
const { TEXT } = componentNames;
const command = {
name: commandNames.CHANGE_TEXT,
/**
* Change a text
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {string} text - Changing text
* @returns {Promise}
*/
execute(graphics, id, text) {
const textComp = graphics.getComponent(TEXT);
const targetObj = graphics.getObject(id);
if (!targetObj) {
return Promise.reject(rejectMessages.noObject);
}
this.undoData.object = targetObj;
this.undoData.text = textComp.getText(targetObj);
return textComp.change(targetObj, text);
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const textComp = graphics.getComponent(TEXT);
const { object: textObj, text } = this.undoData;
return textComp.change(textObj, text);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Change text styles
*/
import snippet from 'tui-code-snippet';
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { componentNames, rejectMessages, commandNames } from '../consts';
const { TEXT } = componentNames;
/**
* Chched data for undo
* @type {Object}
*/
let chchedUndoDataForSilent = null;
/**
* Make undoData
* @param {object} styles - text styles
* @param {Component} targetObj - text component
* @returns {object} - undo data
*/
function makeUndoData(styles, targetObj) {
const undoData = {
object: targetObj,
styles: {},
};
snippet.forEachOwnProperties(styles, (value, key) => {
const undoValue = targetObj[key];
undoData.styles[key] = undoValue;
});
return undoData;
}
const command = {
name: commandNames.CHANGE_TEXT_STYLE,
/**
* Change text styles
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {Object} styles - text styles
* @param {string} [styles.fill] Color
* @param {string} [styles.fontFamily] Font type for text
* @param {number} [styles.fontSize] Size
* @param {string} [styles.fontStyle] Type of inclination (normal / italic)
* @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold)
* @param {string} [styles.textAlign] Type of text align (left / center / right)
* @param {string} [styles.textDecoration] Type of line (underline / line-through / overline)
* @param {boolean} isSilent - is silent execution or not
* @returns {Promise}
*/
execute(graphics, id, styles, isSilent) {
const textComp = graphics.getComponent(TEXT);
const targetObj = graphics.getObject(id);
if (!targetObj) {
return Promise.reject(rejectMessages.noObject);
}
if (!this.isRedo) {
const undoData = makeUndoData(styles, targetObj);
chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
}
return textComp.setStyle(targetObj, styles);
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const textComp = graphics.getComponent(TEXT);
const { object: textObj, styles } = this.undoData;
return textComp.setStyle(textObj, styles);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Clear all objects
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames } from '../consts';
const command = {
name: commandNames.CLEAR_OBJECTS,
/**
* Clear all objects without background (main) image
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
execute(graphics) {
return new Promise((resolve) => {
this.undoData.objects = graphics.removeAll();
resolve();
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
* @ignore
*/
undo(graphics) {
graphics.add(this.undoData.objects);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Flip an image
*/
import commandFactory from '../factory/command';
import { componentNames, commandNames } from '../consts';
const { FLIP } = componentNames;
const command = {
name: commandNames.FLIP_IMAGE,
/**
* flip an image
* @param {Graphics} graphics - Graphics instance
* @param {string} type - 'flipX' or 'flipY' or 'reset'
* @returns {Promise}
*/
execute(graphics, type) {
const flipComp = graphics.getComponent(FLIP);
this.undoData.setting = flipComp.getCurrentSetting();
return flipComp[type]();
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const flipComp = graphics.getComponent(FLIP);
return flipComp.set(this.undoData.setting);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Load a background (main) image
*/
import commandFactory from '../factory/command';
import { componentNames, commandNames } from '../consts';
const { IMAGE_LOADER } = componentNames;
const command = {
name: commandNames.LOAD_IMAGE,
/**
* Load a background (main) image
* @param {Graphics} graphics - Graphics instance
* @param {string} imageName - Image name
* @param {string} imgUrl - Image Url
* @returns {Promise}
*/
execute(graphics, imageName, imgUrl) {
const loader = graphics.getComponent(IMAGE_LOADER);
const prevImage = loader.getCanvasImage();
const prevImageWidth = prevImage ? prevImage.width : 0;
const prevImageHeight = prevImage ? prevImage.height : 0;
const objects = graphics.removeAll(true).filter((objectItem) => objectItem.type !== 'cropzone');
objects.forEach((objectItem) => {
objectItem.evented = true;
});
this.undoData = {
name: loader.getImageName(),
image: prevImage,
objects,
};
return loader.load(imageName, imgUrl).then((newImage) => ({
oldWidth: prevImageWidth,
oldHeight: prevImageHeight,
newWidth: newImage.width,
newHeight: newImage.height,
}));
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const loader = graphics.getComponent(IMAGE_LOADER);
const { objects, name, image } = this.undoData;
graphics.removeAll(true);
graphics.add(objects);
return loader.load(name, image);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Remove a filter from an image
*/
import commandFactory from '../factory/command';
import { componentNames, commandNames } from '../consts';
const { FILTER } = componentNames;
const command = {
name: commandNames.REMOVE_FILTER,
/**
* Remove a filter from an image
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Filter type
* @returns {Promise}
*/
execute(graphics, type) {
const filterComp = graphics.getComponent(FILTER);
this.undoData.options = filterComp.getOptions(type);
return filterComp.remove(type);
},
/**
* @param {Graphics} graphics - Graphics instance
* @param {string} type - Filter type
* @returns {Promise}
*/
undo(graphics, type) {
const filterComp = graphics.getComponent(FILTER);
const { options } = this.undoData;
return filterComp.add(type, options);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Remove an object
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames, rejectMessages } from '../consts';
const command = {
name: commandNames.REMOVE_OBJECT,
/**
* Remove an object
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @returns {Promise}
*/
execute(graphics, id) {
return new Promise((resolve, reject) => {
this.undoData.objects = graphics.removeObjectById(id);
if (this.undoData.objects.length) {
resolve();
} else {
reject(rejectMessages.noObject);
}
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.add(this.undoData.objects);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Resize a canvas
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames } from '../consts';
const command = {
name: commandNames.RESIZE_CANVAS_DIMENSION,
/**
* resize the canvas with given dimension
* @param {Graphics} graphics - Graphics instance
* @param {{width: number, height: number}} dimension - Max width & height
* @returns {Promise}
*/
execute(graphics, dimension) {
return new Promise((resolve) => {
this.undoData.size = {
width: graphics.cssMaxWidth,
height: graphics.cssMaxHeight,
};
graphics.setCssMaxDimension(dimension);
graphics.adjustCanvasDimension();
resolve();
});
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
graphics.setCssMaxDimension(this.undoData.size);
graphics.adjustCanvasDimension();
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Rotate an image
*/
import commandFactory from '../factory/command';
import { componentNames, commandNames } from '../consts';
const { ROTATION } = componentNames;
/**
* Chched data for undo
* @type {Object}
*/
let chchedUndoDataForSilent = null;
/**
* Make undo data
* @param {Component} rotationComp - rotation component
* @returns {object} - undodata
*/
function makeUndoData(rotationComp) {
return {
angle: rotationComp.getCurrentAngle(),
};
}
const command = {
name: commandNames.ROTATE_IMAGE,
/**
* Rotate an image
* @param {Graphics} graphics - Graphics instance
* @param {string} type - 'rotate' or 'setAngle'
* @param {number} angle - angle value (degree)
* @param {boolean} isSilent - is silent execution or not
* @returns {Promise}
*/
execute(graphics, type, angle, isSilent) {
const rotationComp = graphics.getComponent(ROTATION);
if (!this.isRedo) {
const undoData = makeUndoData(rotationComp);
chchedUndoDataForSilent = this.setUndoData(undoData, chchedUndoDataForSilent, isSilent);
}
return rotationComp[type](angle);
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const rotationComp = graphics.getComponent(ROTATION);
const [, type, angle] = this.args;
if (type === 'setAngle') {
return rotationComp[type](this.undoData.angle);
}
return rotationComp.rotate(-angle);
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Set object properties
*/
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames, rejectMessages } from '../consts';
const command = {
name: commandNames.SET_OBJECT_POSITION,
/**
* Set object properties
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {Object} posInfo - position object
* @param {number} posInfo.x - x position
* @param {number} posInfo.y - y position
* @param {string} posInfo.originX - can be 'left', 'center', 'right'
* @param {string} posInfo.originY - can be 'top', 'center', 'bottom'
* @returns {Promise}
*/
execute(graphics, id, posInfo) {
const targetObj = graphics.getObject(id);
if (!targetObj) {
return Promise.reject(rejectMessages.noObject);
}
this.undoData.objectId = id;
this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']);
graphics.setObjectPosition(id, posInfo);
graphics.renderAll();
return Promise.resolve();
},
/**
* @param {Graphics} graphics - Graphics instance
* @returns {Promise}
*/
undo(graphics) {
const { objectId, props } = this.undoData;
graphics.setObjectProperties(objectId, props);
graphics.renderAll();
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Set object properties
*/
import snippet from 'tui-code-snippet';
import commandFactory from '../factory/command';
import { Promise } from '../util';
import { commandNames, rejectMessages } from '../consts';
const command = {
name: commandNames.SET_OBJECT_PROPERTIES,
/**
* Set object properties
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @param {Object} props - properties
* @param {string} [props.fill] Color
* @param {string} [props.fontFamily] Font type for text
* @param {number} [props.fontSize] Size
* @param {string} [props.fontStyle] Type of inclination (normal / italic)
* @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)
* @param {string} [props.textAlign] Type of text align (left / center / right)
* @param {string} [props.textDecoration] Type of line (underline / line-through / overline)
* @returns {Promise}
*/
execute(graphics, id, props) {
const targetObj = graphics.getObject(id);
if (!targetObj) {
return Promise.reject(rejectMessages.noObject);
}
this.undoData.props = {};
snippet.forEachOwnProperties(props, (value, key) => {
this.undoData.props[key] = targetObj[key];
});
graphics.setObjectProperties(id, props);
return Promise.resolve();
},
/**
* @param {Graphics} graphics - Graphics instance
* @param {number} id - object id
* @returns {Promise}
*/
undo(graphics, id) {
const { props } = this.undoData;
graphics.setObjectProperties(id, props);
return Promise.resolve();
},
};
commandFactory.register(command);
export default command;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Image crop module (start cropping, end cropping)
*/
import snippet from 'tui-code-snippet';
import fabric from 'fabric';
import Component from '../interface/component';
import Cropzone from '../extension/cropzone';
import { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '../consts';
import { clamp, fixFloatingPoint } from '../util';
const MOUSE_MOVE_THRESHOLD = 10;
const DEFAULT_OPTION = {
presetRatio: null,
top: -10,
left: -10,
height: 1,
width: 1,
};
/**
* Cropper components
* @param {Graphics} graphics - Graphics instance
* @extends {Component}
* @class Cropper
* @ignore
*/
class Cropper extends Component {
constructor(graphics) {
super(componentNames.CROPPER, graphics);
/**
* Cropzone
* @type {Cropzone}
* @private
*/
this._cropzone = null;
/**
* StartX of Cropzone
* @type {number}
* @private
*/
this._startX = null;
/**
* StartY of Cropzone
* @type {number}
* @private
*/
this._startY = null;
/**
* State whether shortcut key is pressed or not
* @type {boolean}
* @private
*/
this._withShiftKey = false;
/**
* Listeners
* @type {object.<string, function>}
* @private
*/
this._listeners = {
keydown: this._onKeyDown.bind(this),
keyup: this._onKeyUp.bind(this),
mousedown: this._onFabricMouseDown.bind(this),
mousemove: this._onFabricMouseMove.bind(this),
mouseup: this._onFabricMouseUp.bind(this),
};
}
/**
* Start cropping
*/
start() {
if (this._cropzone) {
return;
}
const canvas = this.getCanvas();
canvas.forEachObject((obj) => {
// {@link http://fabricjs.com/docs/fabric.Object.html#evented}
obj.evented = false;
});
this._cropzone = new Cropzone(
canvas,
snippet.extend(
{
left: 0,
top: 0,
width: 0.5,
height: 0.5,
strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}
cornerSize: 10,
cornerColor: 'black',
fill: 'transparent',
},
CROPZONE_DEFAULT_OPTIONS,
this.graphics.cropSelectionStyle
)
);
canvas.discardActiveObject();
canvas.add(this._cropzone);
canvas.on('mouse:down', this._listeners.mousedown);
canvas.selection = false;
canvas.defaultCursor = 'crosshair';
fabric.util.addListener(document, 'keydown', this._listeners.keydown);
fabric.util.addListener(document, 'keyup', this._listeners.keyup);
}
/**
* End cropping
*/
end() {
const canvas = this.getCanvas();
const cropzone = this._cropzone;
if (!cropzone) {
return;
}
canvas.remove(cropzone);
canvas.selection = true;
canvas.defaultCursor = 'default';
canvas.off('mouse:down', this._listeners.mousedown);
canvas.forEachObject((obj) => {
obj.evented = true;
});
this._cropzone = null;
fabric.util.removeListener(document, 'keydown', this._listeners.keydown);
fabric.util.removeListener(document, 'keyup', this._listeners.keyup);
}
/**
* Change cropzone visible
* @param {boolean} visible - cropzone visible state
*/
changeVisibility(visible) {
if (this._cropzone) {
this._cropzone.set({ visible });
}
}
/**
* onMousedown handler in fabric canvas
* @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
* @private
*/
_onFabricMouseDown(fEvent) {
const canvas = this.getCanvas();
if (fEvent.target) {
return;
}
canvas.selection = false;
const coord = canvas.getPointer(fEvent.e);
this._startX = coord.x;
this._startY = coord.y;
canvas.on({
'mouse:move': this._listeners.mousemove,
'mouse:up': this._listeners.mouseup,
});
}
/**
* onMousemove handler in fabric canvas
* @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
* @private
*/
_onFabricMouseMove(fEvent) {
const canvas = this.getCanvas();
const pointer = canvas.getPointer(fEvent.e);
const { x, y } = pointer;
const cropzone = this._cropzone;
if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) {
canvas.remove(cropzone);
cropzone.set(this._calcRectDimensionFromPoint(x, y));
canvas.add(cropzone);
canvas.setActiveObject(cropzone);
}
}
/**
* Get rect dimension setting from Canvas-Mouse-Position(x, y)
* @param {number} x - Canvas-Mouse-Position x
* @param {number} y - Canvas-Mouse-Position Y
* @returns {{left: number, top: number, width: number, height: number}}
* @private
*/
_calcRectDimensionFromPoint(x, y) {
const canvas = this.getCanvas();
const canvasWidth = canvas.getWidth();
const canvasHeight = canvas.getHeight();
const startX = this._startX;
const startY = this._startY;
let left = clamp(x, 0, startX);
let top = clamp(y, 0, startY);
let width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left
let height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top
if (this._withShiftKey) {
// make fixed ratio cropzone
if (width > height) {
height = width;
} else if (height > width) {
width = height;
}
if (startX >= x) {
left = startX - width;
}
if (startY >= y) {
top = startY - height;
}
}
return {
left,
top,
width,
height,
};
}
/**
* onMouseup handler in fabric canvas
* @private
*/
_onFabricMouseUp() {
const cropzone = this._cropzone;
const listeners = this._listeners;
const canvas = this.getCanvas();
canvas.setActiveObject(cropzone);
canvas.off({
'mouse:move': listeners.mousemove,
'mouse:up': listeners.mouseup,
});
}
/**
* Get cropped image data
* @param {Object} cropRect cropzone rect
* @param {Number} cropRect.left left position
* @param {Number} cropRect.top top position
* @param {Number} cropRect.width width
* @param {Number} cropRect.height height
* @returns {?{imageName: string, url: string}} cropped Image data
*/
getCroppedImageData(cropRect) {
const canvas = this.getCanvas();
const containsCropzone = canvas.contains(this._cropzone);
if (!cropRect) {
return null;
}
if (containsCropzone) {
canvas.remove(this._cropzone);
}
const imageData = {
imageName: this.getImageName(),
url: canvas.toDataURL(cropRect),
};
if (containsCropzone) {
canvas.add(this._cropzone);
}
return imageData;
}
/**
* Get cropped rect
* @returns {Object} rect
*/
getCropzoneRect() {
const cropzone = this._cropzone;
if (!cropzone.isValid()) {
return null;
}
return {
left: cropzone.left,
top: cropzone.top,
width: cropzone.width,
height: cropzone.height,
};
}
/**
* Set a cropzone square
* @param {number} [presetRatio] - preset ratio
*/
setCropzoneRect(presetRatio) {
const canvas = this.getCanvas();
const cropzone = this._cropzone;
canvas.discardActiveObject();
canvas.selection = false;
canvas.remove(cropzone);
cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION);
canvas.add(cropzone);
canvas.selection = true;
if (presetRatio) {
canvas.setActiveObject(cropzone);
}
}
/**
* get a cropzone square info
* @param {number} presetRatio - preset ratio
* @returns {{presetRatio: number, left: number, top: number, width: number, height: number}}
* @private
*/
_getPresetPropertiesForCropSize(presetRatio) {
const canvas = this.getCanvas();
const originalWidth = canvas.getWidth();
const originalHeight = canvas.getHeight();
const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
const getScale = (value, orignalValue) => (value > orignalValue ? orignalValue / value : 1);
let width = standardSize * presetRatio;
let height = standardSize;
const scaleWidth = getScale(width, originalWidth);
[width, height] = snippet.map([width, height], (sizeValue) => sizeValue * scaleWidth);
const scaleHeight = getScale(height, originalHeight);
[width, height] = snippet.map([width, height], (sizeValue) =>
fixFloatingPoint(sizeValue * scaleHeight)
);
return {
presetRatio,
top: (originalHeight - height) / 2,
left: (originalWidth - width) / 2,
width,
height,
};
}
/**
* Keydown event handler
* @param {KeyboardEvent} e - Event object
* @private
*/
_onKeyDown(e) {
if (e.keyCode === keyCodes.SHIFT) {
this._withShiftKey = true;
}
}
/**
* Keyup event handler
* @param {KeyboardEvent} e - Event object
* @private
*/
_onKeyUp(e) {
if (e.keyCode === keyCodes.SHIFT) {
this._withShiftKey = false;
}
}
}
export default Cropper;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add filter module
*/
import { isUndefined, extend, forEach, filter } from 'tui-code-snippet';
import { Promise } from '../util';
import fabric from 'fabric';
import Component from '../interface/component';
import Mask from '../extension/mask';
import { rejectMessages, componentNames } from '../consts';
import Sharpen from '../extension/sharpen';
import Emboss from '../extension/emboss';
import ColorFilter from '../extension/colorFilter';
const { filters } = fabric.Image;
filters.Mask = Mask;
filters.Sharpen = Sharpen;
filters.Emboss = Emboss;
filters.ColorFilter = ColorFilter;
/**
* Filter
* @class Filter
* @param {Graphics} graphics - Graphics instance
* @extends {Component}
* @ignore
*/
class Filter extends Component {
constructor(graphics) {
super(componentNames.FILTER, graphics);
}
/**
* Add filter to source image (a specific filter is added on fabric.js)
* @param {string} type - Filter type
* @param {Object} [options] - Options of filter
* @returns {Promise}
*/
add(type, options) {
return new Promise((resolve, reject) => {
const sourceImg = this._getSourceImage();
const canvas = this.getCanvas();
let imgFilter = this._getFilter(sourceImg, type);
if (!imgFilter) {
imgFilter = this._createFilter(sourceImg, type, options);
}
if (!imgFilter) {
reject(rejectMessages.invalidParameters);
}
this._changeFilterValues(imgFilter, options);
this._apply(sourceImg, () => {
canvas.renderAll();
resolve({
type,
action: 'add',
options,
});
});
});
}
/**
* Remove filter to source image
* @param {string} type - Filter type
* @returns {Promise}
*/
remove(type) {
return new Promise((resolve, reject) => {
const sourceImg = this._getSourceImage();
const canvas = this.getCanvas();
const options = this.getOptions(type);
if (!sourceImg.filters.length) {
reject(rejectMessages.unsupportedOperation);
}
this._removeFilter(sourceImg, type);
this._apply(sourceImg, () => {
canvas.renderAll();
resolve({
type,
action: 'remove',
options,
});
});
});
}
/**
* Whether this has the filter or not
* @param {string} type - Filter type
* @returns {boolean} true if it has the filter
*/
hasFilter(type) {
return !!this._getFilter(this._getSourceImage(), type);
}
/**
* Get a filter options
* @param {string} type - Filter type
* @returns {Object} filter options or null if there is no that filter
*/
getOptions(type) {
const sourceImg = this._getSourceImage();
const imgFilter = this._getFilter(sourceImg, type);
if (!imgFilter) {
return null;
}
return extend({}, imgFilter.options);
}
/**
* Change filter values
* @param {Object} imgFilter object of filter
* @param {Object} options object
* @private
*/
_changeFilterValues(imgFilter, options) {
forEach(options, (value, key) => {
if (!isUndefined(imgFilter[key])) {
imgFilter[key] = value;
}
});
forEach(imgFilter.options, (value, key) => {
if (!isUndefined(options[key])) {
imgFilter.options[key] = options[key];
}
});
}
/**
* Apply filter
* @param {fabric.Image} sourceImg - Source image to apply filter
* @param {function} callback - Executed function after applying filter
* @private
*/
_apply(sourceImg, callback) {
sourceImg.filters.push();
const result = sourceImg.applyFilters();
if (result) {
callback();
}
}
/**
* Get source image on canvas
* @returns {fabric.Image} Current source image on canvas
* @private
*/
_getSourceImage() {
return this.getCanvasImage();
}
/**
* Create filter instance
* @param {fabric.Image} sourceImg - Source image to apply filter
* @param {string} type - Filter type
* @param {Object} [options] - Options of filter
* @returns {Object} Fabric object of filter
* @private
*/
_createFilter(sourceImg, type, options) {
let filterObj;
// capitalize first letter for matching with fabric image filter name
const fabricType = this._getFabricFilterType(type);
const ImageFilter = fabric.Image.filters[fabricType];
if (ImageFilter) {
filterObj = new ImageFilter(options);
filterObj.options = options;
sourceImg.filters.push(filterObj);
}
return filterObj;
}
/**
* Get applied filter instance
* @param {fabric.Image} sourceImg - Source image to apply filter
* @param {string} type - Filter type
* @returns {Object} Fabric object of filter
* @private
*/
_getFilter(sourceImg, type) {
let imgFilter = null;
if (sourceImg) {
const fabricType = this._getFabricFilterType(type);
const { length } = sourceImg.filters;
let item, i;
for (i = 0; i < length; i += 1) {
item = sourceImg.filters[i];
if (item.type === fabricType) {
imgFilter = item;
break;
}
}
}
return imgFilter;
}
/**
* Remove applied filter instance
* @param {fabric.Image} sourceImg - Source image to apply filter
* @param {string} type - Filter type
* @private
*/
_removeFilter(sourceImg, type) {
const fabricType = this._getFabricFilterType(type);
sourceImg.filters = filter(sourceImg.filters, (value) => value.type !== fabricType);
}
/**
* Change filter class name to fabric's, especially capitalizing first letter
* @param {string} type - Filter type
* @example
* 'grayscale' -> 'Grayscale'
* @returns {string} Fabric filter class name
*/
_getFabricFilterType(type) {
return type.charAt(0).toUpperCase() + type.slice(1);
}
}
export default Filter;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Image flip module
*/
import snippet from 'tui-code-snippet';
import { Promise } from '../util';
import Component from '../interface/component';
import { componentNames, rejectMessages } from '../consts';
/**
* Flip
* @class Flip
* @param {Graphics} graphics - Graphics instance
* @extends {Component}
* @ignore
*/
class Flip extends Component {
constructor(graphics) {
super(componentNames.FLIP, graphics);
}
/**
* Get current flip settings
* @returns {{flipX: Boolean, flipY: Boolean}}
*/
getCurrentSetting() {
const canvasImage = this.getCanvasImage();
return {
flipX: canvasImage.flipX,
flipY: canvasImage.flipY,
};
}
/**
* Set flipX, flipY
* @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting
* @returns {Promise}
*/
set(newSetting) {
const setting = this.getCurrentSetting();
const isChangingFlipX = setting.flipX !== newSetting.flipX;
const isChangingFlipY = setting.flipY !== newSetting.flipY;
if (!isChangingFlipX && !isChangingFlipY) {
return Promise.reject(rejectMessages.flip);
}
snippet.extend(setting, newSetting);
this.setImageProperties(setting, true);
this._invertAngle(isChangingFlipX, isChangingFlipY);
this._flipObjects(isChangingFlipX, isChangingFlipY);
return Promise.resolve({
flipX: setting.flipX,
flipY: setting.flipY,
angle: this.getCanvasImage().angle,
});
}
/**
* Invert image angle for flip
* @param {boolean} isChangingFlipX - Change flipX
* @param {boolean} isChangingFlipY - Change flipY
*/
_invertAngle(isChangingFlipX, isChangingFlipY) {
const canvasImage = this.getCanvasImage();
let { angle } = canvasImage;
if (isChangingFlipX) {
angle *= -1;
}
if (isChangingFlipY) {
angle *= -1;
}
canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0
}
/**
* Flip objects
* @param {boolean} isChangingFlipX - Change flipX
* @param {boolean} isChangingFlipY - Change flipY
* @private
*/
_flipObjects(isChangingFlipX, isChangingFlipY) {
const canvas = this.getCanvas();
if (isChangingFlipX) {
canvas.forEachObject((obj) => {
obj
.set({
angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
flipX: !obj.flipX,
left: canvas.width - obj.left,
})
.setCoords();
});
}
if (isChangingFlipY) {
canvas.forEachObject((obj) => {
obj
.set({
angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0
flipY: !obj.flipY,
top: canvas.height - obj.top,
})
.setCoords();
});
}
canvas.renderAll();
}
/**
* Reset flip settings
* @returns {Promise}
*/
reset() {
return this.set({
flipX: false,
flipY: false,
});
}
/**
* Flip x
* @returns {Promise}
*/
flipX() {
const current = this.getCurrentSetting();
return this.set({
flipX: !current.flipX,
flipY: current.flipY,
});
}
/**
* Flip y
* @returns {Promise}
*/
flipY() {
const current = this.getCurrentSetting();
return this.set({
flipX: current.flipX,
flipY: !current.flipY,
});
}
}
export default Flip;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Free drawing module, Set brush
*/
import fabric from 'fabric';
import Component from '../interface/component';
import { componentNames } from '../consts';
/**
* FreeDrawing
* @class FreeDrawing
* @param {Graphics} graphics - Graphics instance
* @extends {Component}
* @ignore
*/
class FreeDrawing extends Component {
constructor(graphics) {
super(componentNames.FREE_DRAWING, graphics);
/**
* Brush width
* @type {number}
*/
this.width = 12;
/**
* fabric.Color instance for brush color
* @type {fabric.Color}
*/
this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');
}
/**
* Start free drawing mode
* @param {{width: ?number, color: ?string}} [setting] - Brush width & color
*/
start(setting) {
const canvas = this.getCanvas();
canvas.isDrawingMode = true;
this.setBrush(setting);
}
/**
* Set brush
* @param {{width: ?number, color: ?string}} [setting] - Brush width & color
*/
setBrush(setting) {
const brush = this.getCanvas().freeDrawingBrush;
setting = setting || {};
this.width = setting.width || this.width;
if (setting.color) {
this.oColor = new fabric.Color(setting.color);
}
brush.width = this.width;
brush.color = this.oColor.toRgba();
}
/**
* End free drawing mode
*/
end() {
const canvas = this.getCanvas();
canvas.isDrawingMode = false;
}
}
export default FreeDrawing;
/**
* @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
* @fileoverview Add icon module
*/
import fabric from 'fabric';
import snippet from 'tui-code-snippet';
import { Promise } from '../util';
import Component from '../interface/component';
import { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '../consts';
const pathMap = {
arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',
cancel:
'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +
'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',
};
/**
* Icon
* @class Icon
* @param {Graphics} graphics - Graphics instance
* @extends {Component}
* @ignore
*/
class Icon extends Component {
constructor(graphics) {
super(componentNames.ICON, graphics);
/**
* Default icon color
* @type {string}
*/
this._oColor = '#000000';
/**
* Path value of each icon type
* @type {Object}
*/
this._pathMap = pathMap;
/**
* Type of the drawing icon
* @type {string}
* @private
*/
this._type = null;
/**
* Color of the drawing icon
* @type {string}
* @private
*/
this._iconColor = null;
/**
* Event handler list
* @type {Object}
* @private
*/
this._handlers = {
mousedown: this._onFabricMouseDown.bind(this),
mousemove: this._onFabricMouseMove.bind(this),
mouseup: this._onFabricMouseUp.bind(this),
};
}
/**
* Set states of the current drawing shape
* @ignore
* @param {string} type - Icon type ('arrow', 'cancel', custom icon name)
* @param {string} iconColor - Icon foreground color
*/
setStates(type, iconColor) {
this._type = type;
this._iconColor = iconColor;
}
/**
* Start to draw the icon on canvas
* @ignore
*/
start() {
const canvas = this.getCanvas();
canvas.selection = false;
canvas.on('mouse:down', this._handlers.mousedown);
}
/**
* End to draw the icon on canvas
* @ignore
*/
end() {
const canvas = this.getCanvas();
canvas.selection = true;
canvas.off({
'mouse:down': this._handlers.mousedown,
});
}
/**
* Add icon
* @param {string} type - Icon type
* @param {Object} options - Icon options
* @param {string} [options.fill] - Icon foreground color
* @param {string} [options.left] - Icon x position
* @param {string} [options.top] - Icon y position
* @returns {Promise}
*/
add(type, options) {
return new Promise((resolve, reject) => {
const canvas = this.getCanvas();
const path = this._pathMap[type];
const selectionStyle = fObjectOptions.SELECTION_STYLE;
const icon = path ? this._createIcon(path) : null;
this._icon = icon;
if (!icon) {
reject(rejectMessages.invalidParameters);
}
icon.set(
snippet.extend(
{
type: 'icon',
fill: this._oColor,
},
selectionStyle,
options,
this.graphics.controlStyle
)
);
canvas.add(icon).setActiveObject(icon);
resolve(this.graphics.createObjectProperties(icon));
});
}
/**
* Register icon paths
* @param {{key: string, value: string}} pathInfos - Path infos
*/
registerPaths(pathInfos) {
snippet.forEach(
pathInfos,
(path, type) => {
this._pathMap[type] = path;
},
this
);
}
/**
* Set icon object color
* @param {string} color - Color to set
* @param {fabric.Path}[obj] - Current activated path object
*/
setColor(color, obj) {
this._oColor = color;
if (obj && obj.get('type') === 'icon') {
obj.set({ fill: this._oColor });
this.getCanvas().renderAll();
}
}
/**
* Get icon color
* @param {fabric.Path}[obj] - Current activated path object
* @returns {string} color
*/
getColor(obj) {
return obj.fill;
}
/**
* Create icon object
* @param {string} path - Path value to create icon
* @returns {fabric.Path} Path object
*/
_createIcon(path) {
return new fabric.Path(path);
}
/**
* MouseDown event handler on canvas
* @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
* @private
*/
_onFabricMouseDown(fEvent) {
const canvas = this.getCanvas();
this._startPoint = canvas.getPointer(fEvent.e);
const { x: left, y: top } = this._startPoint;
this.add(this._type, {
left,
top,
fill: this._iconColor,
}).then(() => {
this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));
canvas.on('mouse:move', this._handlers.mousemove);
canvas.on('mouse:up', this._handlers.mouseup);
});
}
/**
* MouseMove event handler on canvas
* @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object
* @private
*/
_onFabricMouseMove(fEvent) {
const canvas = this.getCanvas();
if (!this._icon) {
return;
}
const moveOriginPointer = canvas.getPointer(fEvent.e);
const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;
const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;
this._icon.set({
scaleX: Math.abs(scaleX * 2),
scaleY: Math.abs(scaleY * 2),
});
this._icon.setCoords();
canvas.renderAll();
}
/**
* MouseUp event handler on canvas
* @private
*/
_onFabricMouseUp() {
const canvas = this.getCanvas();
this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));
this._icon = null;
canvas.off('mouse:down', this._handlers.mousedown);
canvas.off('mouse:move', this._handlers.mousemove);
canvas.off('mouse:up', this._handlers.mouseup);
}
}
export default Icon;
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.