MinsoftK

Test

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
1 -node_modules
2 -.DS_Store
3 -Thumbs.db
4 -Desktop.ini
5 -dist
6 -.idea
7 -storybook-static
...\ No newline at end of file ...\ No newline at end of file
1 -{
2 - "printWidth": 100,
3 - "singleQuote": true,
4 - "bracketSpacing": false,
5 - "arrowParens": "always"
6 -}
...\ No newline at end of file ...\ No newline at end of file
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 -module.exports = {
2 - plugins: [],
3 - module: {
4 - rules: [
5 - {
6 - test: /\.css$/,
7 - loaders: ['style-loader', 'css-loader']
8 - }
9 - ]
10 - }
11 -};
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
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)
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
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
1 -[1214/032025.223:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
This diff could not be displayed because it is too large.
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 -}
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>
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 -}
1 -# https://www.robotstxt.org/robotstxt.html
2 -User-agent: *
3 -Disallow:
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 -}
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 -});
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;
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type