Showing
23 changed files
with
0 additions
and
607 deletions
project/.eslintrc.js
deleted
100644 → 0
1 | -module.exports = { | ||
2 | - parser: 'babel-eslint', | ||
3 | - parserOptions: { | ||
4 | - ecmaVersion: 7, | ||
5 | - sourceType: 'module', | ||
6 | - ecmaFeatures: { | ||
7 | - jsx: true | ||
8 | - } | ||
9 | - }, | ||
10 | - extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'], | ||
11 | - plugins: ['react', 'prettier'], | ||
12 | - rules: { | ||
13 | - 'react/prop-types': 0 | ||
14 | - }, | ||
15 | - settings: { | ||
16 | - react: { | ||
17 | - version: 'detect' | ||
18 | - } | ||
19 | - } | ||
20 | -}; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
project/.gitignore
deleted
100644 → 0
project/.prettierrc
deleted
100644 → 0
project/.storybook/config.js
deleted
100644 → 0
1 | -import {configure} from '@storybook/react'; | ||
2 | - | ||
3 | -// automatically import all files ending in *.stories.js | ||
4 | -const req = require.context('../stories', true, /.stories.js$/); | ||
5 | - | ||
6 | -function loadStories() { | ||
7 | - req.keys().forEach(filename => req(filename)); | ||
8 | -} | ||
9 | - | ||
10 | -configure(loadStories, module); |
1.32 MB
project/.storybook/webpack.config.js
deleted
100644 → 0
project/CODE_OF_CONDUCT.md
deleted
100644 → 0
1 | -# Contributor Covenant Code of Conduct | ||
2 | - | ||
3 | -## Our Pledge | ||
4 | - | ||
5 | -In the interest of fostering an open and welcoming environment, we as | ||
6 | -contributors and maintainers pledge to making participation in our project and | ||
7 | -our community a harassment-free experience for everyone, regardless of age, body | ||
8 | -size, disability, ethnicity, gender identity and expression, level of experience, | ||
9 | -education, socio-economic status, nationality, personal appearance, race, | ||
10 | -religion, or sexual identity and orientation. | ||
11 | - | ||
12 | -## Our Standards | ||
13 | - | ||
14 | -Examples of behavior that contributes to creating a positive environment | ||
15 | -include: | ||
16 | - | ||
17 | -* Using welcoming and inclusive language | ||
18 | -* Being respectful of differing viewpoints and experiences | ||
19 | -* Gracefully accepting constructive criticism | ||
20 | -* Focusing on what is best for the community | ||
21 | -* Showing empathy towards other community members | ||
22 | - | ||
23 | -Examples of unacceptable behavior by participants include: | ||
24 | - | ||
25 | -* The use of sexualized language or imagery and unwelcome sexual attention or | ||
26 | - advances | ||
27 | -* Trolling, insulting/derogatory comments, and personal or political attacks | ||
28 | -* Public or private harassment | ||
29 | -* Publishing others' private information, such as a physical or electronic | ||
30 | - address, without explicit permission | ||
31 | -* Other conduct which could reasonably be considered inappropriate in a | ||
32 | - professional setting | ||
33 | - | ||
34 | -## Our Responsibilities | ||
35 | - | ||
36 | -Project maintainers are responsible for clarifying the standards of acceptable | ||
37 | -behavior and are expected to take appropriate and fair corrective action in | ||
38 | -response to any instances of unacceptable behavior. | ||
39 | - | ||
40 | -Project maintainers have the right and responsibility to remove, edit, or | ||
41 | -reject comments, commits, code, wiki edits, issues, and other contributions | ||
42 | -that are not aligned to this Code of Conduct, or to ban temporarily or | ||
43 | -permanently any contributor for other behaviors that they deem inappropriate, | ||
44 | -threatening, offensive, or harmful. | ||
45 | - | ||
46 | -## Scope | ||
47 | - | ||
48 | -This Code of Conduct applies both within project spaces and in public spaces | ||
49 | -when an individual is representing the project or its community. Examples of | ||
50 | -representing a project or community include using an official project e-mail | ||
51 | -address, posting via an official social media account, or acting as an appointed | ||
52 | -representative at an online or offline event. Representation of a project may be | ||
53 | -further defined and clarified by project maintainers. | ||
54 | - | ||
55 | -## Enforcement | ||
56 | - | ||
57 | -Instances of abusive, harassing, or otherwise unacceptable behavior may be | ||
58 | -reported by contacting the project team at dl_javascript@nhn.com. All | ||
59 | -complaints will be reviewed and investigated and will result in a response that | ||
60 | -is deemed necessary and appropriate to the circumstances. The project team is | ||
61 | -obligated to maintain confidentiality with regard to the reporter of an incident. | ||
62 | -Further details of specific enforcement policies may be posted separately. | ||
63 | - | ||
64 | -Project maintainers who do not follow or enforce the Code of Conduct in good | ||
65 | -faith may face temporary or permanent repercussions as determined by other | ||
66 | -members of the project's leadership. | ||
67 | - | ||
68 | -## Attribution | ||
69 | - | ||
70 | -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, | ||
71 | -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html | ||
72 | - | ||
73 | -[homepage]: https://www.contributor-covenant.org | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
project/CONTRIBUTING.md
deleted
100644 → 0
1 | -# Contributing to TOAST UI | ||
2 | - | ||
3 | -First off, thanks for taking the time to contribute! 🎉 😘 ✨ | ||
4 | - | ||
5 | -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. | ||
6 | - | ||
7 | -## Reporting Bugs | ||
8 | -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. | ||
9 | - | ||
10 | -Explain the problem and include additional details to help maintainers reproduce the problem: | ||
11 | - | ||
12 | -* **Use a clear and descriptive title** for the issue to identify the problem. | ||
13 | -* **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. | ||
14 | -* **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. | ||
15 | -* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. | ||
16 | -* **Explain which behavior you expected to see instead and why.** | ||
17 | -* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. | ||
18 | - | ||
19 | -## Suggesting Enhancements | ||
20 | -In case you want to suggest for TOAST UI ImageEditor, please follow this guideline to help maintainers and the community understand your suggestion. | ||
21 | -Before creating suggestions, please check [issue list](../../labels/feature%20request) if there's already a request. | ||
22 | - | ||
23 | -Create an issue and provide the following information: | ||
24 | - | ||
25 | -* **Use a clear and descriptive title** for the issue to identify the suggestion. | ||
26 | -* **Provide a step-by-step description of the suggested enhancement** in as many details as possible. | ||
27 | -* **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks. | ||
28 | -* **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. | ||
29 | -* **Explain why this enhancement would be useful** to most TOAST UI users. | ||
30 | -* **List some other image editors or applications where this enhancement exists.** | ||
31 | - | ||
32 | -## First Code Contribution | ||
33 | - | ||
34 | -Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues: | ||
35 | - | ||
36 | -* **document issues**: issues which should be reviewed or improved. | ||
37 | -* **good first issues**: issues which should only require a few lines of code, and a test or two. | ||
38 | -* **help wanted issues**: issues which should be a bit more involved than beginner issues. | ||
39 | - | ||
40 | -## Pull Requests | ||
41 | - | ||
42 | -### Development WorkFlow | ||
43 | -- Set up your development environment | ||
44 | -- Make change from a right branch | ||
45 | -- Be sure the code passes `npm run lint`, `npm run test` | ||
46 | -- Make a pull request | ||
47 | - | ||
48 | -### Development environment | ||
49 | -- Prepare your machine node and it's packages installed. | ||
50 | -- Checkout our repository | ||
51 | -- Install dependencies by `npm install && bower install` | ||
52 | -- Start webpack-dev-server by `npm run serve` | ||
53 | - | ||
54 | -### Make changes | ||
55 | -#### Checkout a branch | ||
56 | -- **develop**: PR base branch. merge features, updates for next minor or major release | ||
57 | -- **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. | ||
58 | -- **production**: lastest release branch with distribution files. never make a PR on this | ||
59 | -- **gh-pages**: API docs, examples and demo | ||
60 | - | ||
61 | -#### Check Code Style | ||
62 | -Run `npm run eslint` and make sure all the tests pass. | ||
63 | - | ||
64 | -#### Test | ||
65 | -Run `npm run test` and verify all the tests pass. | ||
66 | -If you are adding new commands or features, they must include tests. | ||
67 | -If you are changing functionality, update the tests if you need to. | ||
68 | - | ||
69 | -#### Commit | ||
70 | -Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md). | ||
71 | - | ||
72 | -### Yes! Pull request | ||
73 | -Make your pull request, then describe your changes. | ||
74 | -#### Title | ||
75 | -Follow other PR title format on below. | ||
76 | -``` | ||
77 | - <Type>: Short Description (fix #111) | ||
78 | - <Type>: Short Description (fix #123, #111, #122) | ||
79 | - <Type>: Short Description (ref #111) | ||
80 | -``` | ||
81 | -* capitalize first letter of Type | ||
82 | -* use present tense: 'change' not 'changed' or 'changes' | ||
83 | - | ||
84 | -#### Description | ||
85 | -If it has related to issues, add links to the issues(like `#123`) in the description. | ||
86 | -Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case. | ||
87 | - | ||
88 | -## Code of Conduct | ||
89 | -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. | ||
90 | - | ||
91 | -> 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) |
project/LICENSE
deleted
100644 → 0
1 | -MIT License | ||
2 | - | ||
3 | -Copyright (c) 2019 NHN Corp. | ||
4 | - | ||
5 | -Permission is hereby granted, free of charge, to any person obtaining a copy | ||
6 | -of this software and associated documentation files (the "Software"), to deal | ||
7 | -in the Software without restriction, including without limitation the rights | ||
8 | -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
9 | -copies of the Software, and to permit persons to whom the Software is | ||
10 | -furnished to do so, subject to the following conditions: | ||
11 | - | ||
12 | -The above copyright notice and this permission notice shall be included in | ||
13 | -all copies or substantial portions of the Software. | ||
14 | - | ||
15 | -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
16 | -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
17 | -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
18 | -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
19 | -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
20 | -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
21 | -THE SOFTWARE. | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
project/babel.config.js
deleted
100644 → 0
1 | -module.exports = (api) => { | ||
2 | - api.cache(true); | ||
3 | - | ||
4 | - return { | ||
5 | - presets: [ | ||
6 | - [ | ||
7 | - '@babel/preset-env', | ||
8 | - { | ||
9 | - modules: false, | ||
10 | - useBuiltIns: 'entry' | ||
11 | - } | ||
12 | - ], | ||
13 | - '@babel/preset-react' | ||
14 | - ], | ||
15 | - plugins: [ | ||
16 | - '@babel/plugin-proposal-class-properties', | ||
17 | - '@babel/plugin-proposal-object-rest-spread' | ||
18 | - ] | ||
19 | - }; | ||
20 | -}; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
project/debug.log
deleted
100644 → 0
1 | -[1214/032025.223:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3) |
project/package-lock.json
deleted
100644 → 0
This diff could not be displayed because it is too large.
project/package.json
deleted
100644 → 0
1 | -{ | ||
2 | - "name": "@toast-ui/react-image-editor", | ||
3 | - "version": "1.3.0", | ||
4 | - "description": "React wrapper component for tui.imageEditor", | ||
5 | - "main": "dist/toastui-react-image-editor.js", | ||
6 | - "files": [ | ||
7 | - "dist", | ||
8 | - "src" | ||
9 | - ], | ||
10 | - "scripts": { | ||
11 | - "build:dev": "webpack --mode development", | ||
12 | - "build": "webpack --mode production", | ||
13 | - "serve": "webpack-dev-server", | ||
14 | - "storybook": "start-storybook -s ./node_modules/tui-image-editor/dist/svg,.storybook -p 6006", | ||
15 | - "build-storybook": "build-storybook" | ||
16 | - }, | ||
17 | - "homepage": "https://github.com/nhn/toast-ui.react-image-editor", | ||
18 | - "bugs": "https://github.com/nhn/toast-ui.react-image-editor/issues", | ||
19 | - "author": "NHN. FE Development Lab <dl_javascript@nhn.com>", | ||
20 | - "repository": "https://github.com/nhn/toast-ui.react-image-editor.git", | ||
21 | - "license": "MIT", | ||
22 | - "browserslist": "last 2 versions, ie 9", | ||
23 | - "peerDependencies": { | ||
24 | - "react": "^16.0.0" | ||
25 | - }, | ||
26 | - "devDependencies": { | ||
27 | - "@babel/core": "^7.2.2", | ||
28 | - "@babel/plugin-proposal-class-properties": "^7.2.3", | ||
29 | - "@babel/plugin-proposal-object-rest-spread": "^7.2.0", | ||
30 | - "@babel/preset-env": "^7.2.3", | ||
31 | - "@babel/preset-react": "^7.0.0", | ||
32 | - "@storybook/addon-actions": "^4.1.7", | ||
33 | - "@storybook/addon-knobs": "^4.1.7", | ||
34 | - "@storybook/addon-links": "^4.1.7", | ||
35 | - "@storybook/addons": "^4.1.7", | ||
36 | - "@storybook/react": "^4.1.7", | ||
37 | - "babel-eslint": "^10.0.1", | ||
38 | - "babel-loader": "^8.0.5", | ||
39 | - "css-loader": "^2.1.0", | ||
40 | - "eslint": "^5.12.1", | ||
41 | - "eslint-config-prettier": "^3.6.0", | ||
42 | - "eslint-config-tui": "^2.1.0", | ||
43 | - "eslint-plugin-prettier": "^3.0.1", | ||
44 | - "eslint-plugin-react": "^7.12.4", | ||
45 | - "jquery-mockjax": "^2.5.0", | ||
46 | - "prettier": "^1.16.0", | ||
47 | - "react": "^16.7.0", | ||
48 | - "react-dom": "^16.7.0", | ||
49 | - "storybook": "^5.3.13", | ||
50 | - "style-loader": "^0.23.1", | ||
51 | - "webpack": "^4.29.0", | ||
52 | - "webpack-cli": "^3.2.1", | ||
53 | - "webpack-dev-server": "^3.1.14" | ||
54 | - }, | ||
55 | - "dependencies": { | ||
56 | - "babel-preset-env": "^1.7.0", | ||
57 | - "fabric": "4.2.0", | ||
58 | - "tui-image-editor": "^3.11.0" | ||
59 | - } | ||
60 | -} |
project/public/index.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html lang="en"> | ||
3 | - <head> | ||
4 | - <meta charset="utf-8" /> | ||
5 | - <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
6 | - <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
7 | - <meta name="theme-color" content="#000000" /> | ||
8 | - <meta | ||
9 | - name="description" | ||
10 | - content="Web site created using create-react-app" | ||
11 | - /> | ||
12 | - <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> | ||
13 | - <!-- | ||
14 | - manifest.json provides metadata used when your web app is installed on a | ||
15 | - user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
16 | - --> | ||
17 | - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
18 | - <!-- | ||
19 | - Notice the use of %PUBLIC_URL% in the tags above. | ||
20 | - It will be replaced with the URL of the `public` folder during the build. | ||
21 | - Only files inside the `public` folder can be referenced from the HTML. | ||
22 | - | ||
23 | - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
24 | - work correctly both with client-side routing and a non-root public URL. | ||
25 | - Learn how to configure a non-root public URL by running `npm run build`. | ||
26 | - --> | ||
27 | - <title>React App</title> | ||
28 | - </head> | ||
29 | - <body> | ||
30 | - <noscript>You need to enable JavaScript to run this app.</noscript> | ||
31 | - <div id="root"></div> | ||
32 | - <!-- | ||
33 | - This HTML file is a template. | ||
34 | - If you open it directly in the browser, you will see an empty page. | ||
35 | - | ||
36 | - You can add webfonts, meta tags, or analytics to this file. | ||
37 | - The build step will place the bundled scripts into the <body> tag. | ||
38 | - | ||
39 | - To begin the development, run `npm start` or `yarn start`. | ||
40 | - To create a production bundle, use `npm run build` or `yarn build`. | ||
41 | - --> | ||
42 | - </body> | ||
43 | -</html> |
project/public/manifest.json
deleted
100644 → 0
1 | -{ | ||
2 | - "short_name": "React App", | ||
3 | - "name": "Create React App Sample", | ||
4 | - "icons": [ | ||
5 | - { | ||
6 | - "src": "favicon.ico", | ||
7 | - "sizes": "64x64 32x32 24x24 16x16", | ||
8 | - "type": "image/x-icon" | ||
9 | - }, | ||
10 | - { | ||
11 | - "src": "logo192.png", | ||
12 | - "type": "image/png", | ||
13 | - "sizes": "192x192" | ||
14 | - }, | ||
15 | - { | ||
16 | - "src": "logo512.png", | ||
17 | - "type": "image/png", | ||
18 | - "sizes": "512x512" | ||
19 | - } | ||
20 | - ], | ||
21 | - "start_url": ".", | ||
22 | - "display": "standalone", | ||
23 | - "theme_color": "#000000", | ||
24 | - "background_color": "#ffffff" | ||
25 | -} |
project/public/robots.txt
deleted
100644 → 0
project/src/index.js
deleted
100644 → 0
1 | -/** | ||
2 | - * @fileoverview TOAST UI Image-Editor React wrapper component | ||
3 | - * @author NHN. FE Development Lab <dl_javascript@nhn.com> | ||
4 | - */ | ||
5 | -import React from 'react'; | ||
6 | -import TuiImageEditor from 'tui-image-editor'; | ||
7 | - | ||
8 | -export default class ImageEditor extends React.Component { | ||
9 | - rootEl = React.createRef(); | ||
10 | - | ||
11 | - imageEditorInst = null; | ||
12 | - | ||
13 | - componentDidMount() { | ||
14 | - this.imageEditorInst = new TuiImageEditor(this.rootEl.current, { | ||
15 | - ...this.props | ||
16 | - }); | ||
17 | - | ||
18 | - this.bindEventHandlers(this.props); | ||
19 | - } | ||
20 | - | ||
21 | - componentWillUnmount() { | ||
22 | - this.unbindEventHandlers(); | ||
23 | - | ||
24 | - this.imageEditorInst.destroy(); | ||
25 | - | ||
26 | - this.imageEditorInst = null; | ||
27 | - } | ||
28 | - | ||
29 | - shouldComponentUpdate(nextProps) { | ||
30 | - this.bindEventHandlers(this.props, nextProps); | ||
31 | - | ||
32 | - return false; | ||
33 | - } | ||
34 | - | ||
35 | - getInstance() { | ||
36 | - return this.imageEditorInst; | ||
37 | - } | ||
38 | - | ||
39 | - getRootElement() { | ||
40 | - return this.rootEl.current; | ||
41 | - } | ||
42 | - | ||
43 | - bindEventHandlers(props, prevProps) { | ||
44 | - Object.keys(props) | ||
45 | - .filter(this.isEventHandlerKeys) | ||
46 | - .forEach((key) => { | ||
47 | - const eventName = key[2].toLowerCase() + key.slice(3); | ||
48 | - // For <ImageEditor onFocus={condition ? onFocus1 : onFocus2} /> | ||
49 | - if (prevProps && prevProps[key] !== props[key]) { | ||
50 | - this.imageEditorInst.off(eventName); | ||
51 | - } | ||
52 | - this.imageEditorInst.on(eventName, props[key]); | ||
53 | - }); | ||
54 | - } | ||
55 | - | ||
56 | - unbindEventHandlers() { | ||
57 | - Object.keys(this.props) | ||
58 | - .filter(this.isEventHandlerKeys) | ||
59 | - .forEach((key) => { | ||
60 | - const eventName = key[2].toLowerCase() + key.slice(3); | ||
61 | - this.imageEditorInst.off(eventName); | ||
62 | - }); | ||
63 | - } | ||
64 | - | ||
65 | - isEventHandlerKeys(key) { | ||
66 | - return /on[A-Z][a-zA-Z]+/.test(key); | ||
67 | - } | ||
68 | - | ||
69 | - render() { | ||
70 | - return <div ref={this.rootEl} />; | ||
71 | - } | ||
72 | -} |
project/stories/index.stories.js
deleted
100644 → 0
1 | -import React from 'react'; | ||
2 | -import {storiesOf} from '@storybook/react'; | ||
3 | - | ||
4 | -import 'tui-image-editor/dist/tui-image-editor.css'; | ||
5 | -import 'tui-color-picker/dist/tui-color-picker.css'; | ||
6 | - | ||
7 | -import ImageEditor from '../src/index'; | ||
8 | - | ||
9 | -const stories = storiesOf('MinsoftK', module); | ||
10 | - | ||
11 | -const props = { | ||
12 | - includeUI: { | ||
13 | - loadImage: { | ||
14 | - path: 'img/sampleImage2.png', | ||
15 | - name: 'sampleImage2' | ||
16 | - }, | ||
17 | - initMenu: 'shape', | ||
18 | - uiSize: { | ||
19 | - height: '700px', | ||
20 | - width: '1000px' | ||
21 | - } | ||
22 | - }, | ||
23 | - cssMaxWidth: 700, | ||
24 | - cssMaxHeight: 500 | ||
25 | -}; | ||
26 | - | ||
27 | -stories.add('Include default UI', () => <ImageEditor {...props} />); | ||
28 | - | ||
29 | -stories.add('Using Method', () => { | ||
30 | - class Story extends React.Component { | ||
31 | - ref = React.createRef(); | ||
32 | - | ||
33 | - imageEditor = null; | ||
34 | - | ||
35 | - componentDidMount() { | ||
36 | - this.imageEditor = this.ref.current.getInstance(); | ||
37 | - } | ||
38 | - | ||
39 | - flipImageByAxis(isXAxis) { | ||
40 | - this.imageEditor[isXAxis ? 'flipX' : 'flipY']() | ||
41 | - .then((status) => { | ||
42 | - console.log('flipX: ', status.flipX); | ||
43 | - console.log('flipY: ', status.flipY); | ||
44 | - console.log('angle: ', status.angle); | ||
45 | - }) | ||
46 | - ['catch']((message) => { | ||
47 | - console.log('error: ', message); | ||
48 | - }); | ||
49 | - } | ||
50 | - | ||
51 | - render() { | ||
52 | - return ( | ||
53 | - <> | ||
54 | - <ImageEditor ref={this.ref} {...props} /> | ||
55 | - <button | ||
56 | - onClick={() => { | ||
57 | - this.flipImageByAxis(true); | ||
58 | - }} | ||
59 | - > | ||
60 | - Flip-X! | ||
61 | - </button> | ||
62 | - <button | ||
63 | - onClick={() => { | ||
64 | - this.flipImageByAxis(false); | ||
65 | - }} | ||
66 | - > | ||
67 | - Flip-Y! | ||
68 | - </button> | ||
69 | - </> | ||
70 | - ); | ||
71 | - } | ||
72 | - } | ||
73 | - | ||
74 | - return <Story />; | ||
75 | -}); | ||
76 | - | ||
77 | -stories.add('Events', () => { | ||
78 | - class Story2 extends React.Component { | ||
79 | - ref = React.createRef(); | ||
80 | - | ||
81 | - imageEditor = null; | ||
82 | - | ||
83 | - componentDidMount() { | ||
84 | - this.imageEditor = this.ref.current.getInstance(); | ||
85 | - } | ||
86 | - | ||
87 | - render() { | ||
88 | - return ( | ||
89 | - <ImageEditor | ||
90 | - ref={this.ref} | ||
91 | - {...props} | ||
92 | - onMousedown={(event, originPointer) => { | ||
93 | - console.log(event); | ||
94 | - console.log(originPointer); | ||
95 | - }} | ||
96 | - onAddText={(pos) => { | ||
97 | - const {x: ox, y: oy} = pos.originPosition; | ||
98 | - const {x: cx, y: cy} = pos.clientPosition; | ||
99 | - console.log(`text position on canvas(x, y): ${ox}px, ${oy}px`); | ||
100 | - console.log(`text position on brwoser(x, y): ${cx}px, ${cy}px`); | ||
101 | - }} | ||
102 | - /> | ||
103 | - ); | ||
104 | - } | ||
105 | - } | ||
106 | - | ||
107 | - return <Story2 />; | ||
108 | -}); |
project/webpack.config.js
deleted
100644 → 0
1 | -const path = require('path'); | ||
2 | - | ||
3 | -const config = { | ||
4 | - entry: './src/index.js', | ||
5 | - output: { | ||
6 | - filename: 'toastui-react-image-editor.js', | ||
7 | - path: path.resolve(__dirname, 'dist'), | ||
8 | - libraryTarget: 'commonjs2' | ||
9 | - }, | ||
10 | - externals: { | ||
11 | - 'tui-image-editor': { | ||
12 | - commonjs: 'tui-image-editor', | ||
13 | - commonjs2: 'tui-image-editor' | ||
14 | - }, | ||
15 | - react: { | ||
16 | - commonjs: 'react', | ||
17 | - commonjs2: 'react' | ||
18 | - } | ||
19 | - }, | ||
20 | - module: { | ||
21 | - rules: [ | ||
22 | - { | ||
23 | - test: /\.js$/, | ||
24 | - include: [path.resolve(__dirname, 'src')], | ||
25 | - use: { | ||
26 | - loader: 'babel-loader', | ||
27 | - options: { | ||
28 | - presets: ['@babel/preset-env'] | ||
29 | - } | ||
30 | - } | ||
31 | - } | ||
32 | - ] | ||
33 | - } | ||
34 | -}; | ||
35 | - | ||
36 | -module.exports = () => config; |
면담보고서/10월 면담보고서.docx
0 → 100644
No preview for this file type
면담보고서/11월 면담보고서.docx
0 → 100644
No preview for this file type
면담보고서/12월 면담보고서.docx
0 → 100644
No preview for this file type
면담보고서/~$월 면담보고서.docx
0 → 100644
No preview for this file type
-
Please register or login to post a comment