2020-2-capstone-design2 / 2017110269

Go to a project
Toggle navigation Toggle navigation pinning
MinsoftK
715ddb9d 1 parent a2d7f4a7

Test

Inline Side-by-side
Showing 23 changed files with 0 additions and 607 deletions
module.exports = {
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 7,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'],
plugins: ['react', 'prettier'],
rules: {
'react/prop-types': 0
},
settings: {
react: {
version: 'detect'
}
}
};
\ No newline at end of file
node_modules
.DS_Store
Thumbs.db
Desktop.ini
dist
.idea
storybook-static
\ No newline at end of file
{
"printWidth": 100,
"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']
}
]
}
};
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
education, socio-economic status, nationality, personal appearance, race,
religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at dl_javascript@nhn.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
\ No newline at end of file
# Contributing to TOAST UI
First off, thanks for taking the time to contribute! 🎉 😘 ✨
The following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
## Reporting Bugs
Bugs are tracked as GitHub issues. Search the list and try reproduce on [demo][demo] before you create an issue. When you create an issue, please provide the following information by filling in the template.
Explain the problem and include additional details to help maintainers reproduce the problem:
* **Use a clear and descriptive title** for the issue to identify the problem.
* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard.
* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks.
* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior.
* **Explain which behavior you expected to see instead and why.**
* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
## Suggesting Enhancements
In case you want to suggest for TOAST UI ImageEditor, please follow this guideline to help maintainers and the community understand your suggestion.
Before creating suggestions, please check [issue list](../../labels/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.**
## First Code Contribution
Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues:
* **document issues**: issues which should be reviewed or improved.
* **good first issues**: issues which should only require a few lines of code, and a test or two.
* **help wanted issues**: issues which should be a bit more involved than beginner issues.
## Pull Requests
### Development WorkFlow
- Set up your development environment
- Make change from a right branch
- Be sure the code passes `npm run lint`, `npm run test`
- Make a pull request
### Development environment
- Prepare your machine node and it's packages installed.
- Checkout our repository
- Install dependencies by `npm install && bower install`
- Start webpack-dev-server by `npm run serve`
### Make changes
#### Checkout a branch
- **develop**: PR base branch. merge features, updates for next minor or major release
- **master**: bug fix or document update for next patch release. develop branch will rebase every time master branch update. so keep code change to a minimum.
- **production**: lastest release branch with distribution files. never make a PR on this
- **gh-pages**: API docs, examples and demo
#### Check Code Style
Run `npm run eslint` and make sure all the tests pass.
#### Test
Run `npm run test` and verify all the tests pass.
If you are adding new commands or features, they must include tests.
If you are changing functionality, update the tests if you need to.
#### Commit
Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).
### Yes! Pull request
Make your pull request, then describe your changes.
#### Title
Follow other PR title format on below.
```
<Type>: Short Description (fix #111)
<Type>: Short Description (fix #123, #111, #122)
<Type>: Short Description (ref #111)
```
* capitalize first letter of Type
* use present tense: 'change' not 'changed' or 'changes'
#### Description
If it has related to issues, add links to the issues(like `#123`) in the description.
Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case.
## Code of Conduct
This project and everyone participating in it is governed by the [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@nhn.com.
> This Guide is base on [atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests)
MIT License
Copyright (c) 2019 NHN Corp.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
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
[1214/032025.223:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
This diff could not be displayed because it is too large.
{
"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": [
"dist",
"src"
],
"scripts": {
"build:dev": "webpack --mode development",
"build": "webpack --mode production",
"serve": "webpack-dev-server",
"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": {
"babel-preset-env": "^1.7.0",
"fabric": "4.2.0",
"tui-image-editor": "^3.11.0"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
/**
* @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} />;
}
}
import React from 'react';
import {storiesOf} from '@storybook/react';
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import ImageEditor from '../src/index';
const stories = storiesOf('MinsoftK', module);
const props = {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'sampleImage2'
},
initMenu: 'shape',
uiSize: {
height: '700px',
width: '1000px'
}
},
cssMaxWidth: 700,
cssMaxHeight: 500
};
stories.add('Include default UI', () => <ImageEditor {...props} />);
stories.add('Using Method', () => {
class Story extends React.Component {
ref = React.createRef();
imageEditor = null;
componentDidMount() {
this.imageEditor = this.ref.current.getInstance();
}
flipImageByAxis(isXAxis) {
this.imageEditor[isXAxis ? 'flipX' : 'flipY']()
.then((status) => {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
})
['catch']((message) => {
console.log('error: ', message);
});
}
render() {
return (
<>
<ImageEditor ref={this.ref} {...props} />
<button
onClick={() => {
this.flipImageByAxis(true);
}}
>
Flip-X!
</button>
<button
onClick={() => {
this.flipImageByAxis(false);
}}
>
Flip-Y!
</button>
</>
);
}
}
return <Story />;
});
stories.add('Events', () => {
class Story2 extends React.Component {
ref = React.createRef();
imageEditor = null;
componentDidMount() {
this.imageEditor = this.ref.current.getInstance();
}
render() {
return (
<ImageEditor
ref={this.ref}
{...props}
onMousedown={(event, originPointer) => {
console.log(event);
console.log(originPointer);
}}
onAddText={(pos) => {
const {x: ox, y: oy} = pos.originPosition;
const {x: cx, y: cy} = pos.clientPosition;
console.log(`text position on canvas(x, y): ${ox}px, ${oy}px`);
console.log(`text position on brwoser(x, y): ${cx}px, ${cy}px`);
}}
/>
);
}
}
return <Story2 />;
});
const path = require('path');
const config = {
entry: './src/index.js',
output: {
filename: 'toastui-react-image-editor.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs2'
},
externals: {
'tui-image-editor': {
commonjs: 'tui-image-editor',
commonjs2: 'tui-image-editor'
},
react: {
commonjs: 'react',
commonjs2: 'react'
}
},
module: {
rules: [
{
test: /\.js$/,
include: [path.resolve(__dirname, 'src')],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
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