chore: Complete the contents of the wiki by reconstructing it.

docs/Apply-Mobile-Version-Image.md

@@ -0,0 +1,79 @@
+# Mobile version: image load & save issues
+
+## Load Image
+
+#### Issue
+- You can load photos directly from your mobile device into the image editor, but images with too high a resolution are not suitable for use.
+- For an action that includes a mouse gesture, such as cropping and drawing in the image editor, the action is determined by the aspect ratio relative to the original image size, so the higher the resolution, the less usable.
+- Maximum resolution per device
+ * iPhone : `3264 * 2448`
+ * Galaxy4 : `4128 * 3096` (High resolution) / `3264 * 2448` (Normal) / `2048 * 1152` (Low resolution)
+- The appropriate image size for usability is `3264 * 2448`. If you receive a file upload event when loading an image taken at high resolution on your Android device, do the following.
+
+#### How to handle high-resolution image uploads
+```html
+<input type="file" accept="image/*" id="input-image-file">
+```
+```js
+var MAX_RESOLUTION = 3264 * 2448;
+
+$('input-image-file').on('change', function(event) {
+ var file;
+ var img;
+ var resolution;
+
+ if (!supportingFileAPI) {
+ alert('This browser does not support file-api');
+ }
+
+ file = event.target.files[0];
+
+ if (file) {
+ img = new Image();
+
+ img.onload = function() {
+ resolution = this.width * this.height;
+
+ if (resolution <= MAX_RESOLUTION) {
+ imageEditor.loadImageFromFile(file);
+ } else {
+ alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
+ }
+
+ URL.revokeObjectURL(file);
+ };
+
+ img.src = URL.createObjectURL(file);
+ }
+});
+```
+
+## Save Image
+
+#### Issue
+- Saving an edited image does not appear in the current sample page, but the actual service must send the file to the server to save the image.
+- Uses Ajax communication.
+
+#### How to Save a Server Image
+
+Step 1. Import image data to be saved in the image editor.
+```js
+var dataURL = imageEditor.toDataURL();
+```
+
+Step 2. `base64` encoded image data is Ajax communicated and sent to the server.
+```js
+$.ajax({
+ type: 'POST',
+ url: serverUrl,
+ data: {
+ imgBase64: dataURL // Data from Step 1.
+ }
+}).done(function() {
+ console.log('saved!');
+});
+```
+
+Step 3. The server processes the received data and stores it.
+- [Using Java](https://sangupta.com/tech/saving-html5-canvas-to-java-server.html)
+- [Using Php](http:https://permadi.com/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/)

docs/Apply-Mobile-Version.md

@@ -0,0 +1,74 @@
+# How to apply the mobile version.
+
+## Image editor How to apply a mobile device
+
+- Some settings are required to use Image Editor components on mobile devices.
+- Please refer to the [sample page](http:https://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html) first to check the UI configuration and operation.
+#### Step 1. Include the dependency file on the page. (PC version same)
+```html
+<script src="libs/code-snippet.min.js"></script>
+<script src="libs/jquery.min.js"></script>
+<script src="libs/fabric.min.js"></script>
+<script src="js/image-editor.js"></script>
+```
+
+#### Step 2. `body` Add markup to the tag to create an image editor. (PC version same)
+```html
+<div class="tui-image-editor">
+ <canvas></canvas>
+</div>
+```
+
+#### Step 3. `head` Add a meta tag for setting the viewport to the tag.
+```html
+<meta name="viewport" content="width=device-width, user-scalable=no">
+```
+
+#### Step 4. Create an image editor by setting option values for mobile device optimization.
+```js
+// Create image editor
+var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', {
+ cssMaxWidth: document.documentElement.clientWidth,
+ cssMaxHeight: document.documentElement.clientHeight,
+ selectionStyle: {
+ cornerSize: 50,
+ rotatingPointOffset: 100
+ }
+});
+```
+- `cssMaxWidth`, `cssMaxHeight` :
+ * Sets maximum `width` and` height` values in the canvas area.
+ * Do not set it to a fixed value like the PC version because the value changes depending on the mobile device to be connected.
+- `selectionStyle` :
+ * Selection style setting options that are displayed when an object such as an icon, text, etc. is selected.
+ * If the corner size is small, it is difficult to resize and rotate, so set the selection style.
+ * The selection style options are the same as those provided by `fabric.js` and can be set with the following option values: ([Reference](http:https://fabricjs.com/customization))
+
+ ```js
+ {
+ borderColor: 'red', // Selection line color
+ cornerColor: 'green', // Selection corner color
+ cornerSize: 6, // Selection corner size
+ rotatingPointOffset: 100 // Distance from selection area to rotation corner
+ transparentCorners: false, // Selection corner Transparency
+ }
+ ```
+![2016-08-18 4 52 29](https://cloud.githubusercontent.com/assets/18183560/17766120/86f7c3fc-6564-11e6-86d7-554e8e946843.png)
+
+
+#### Step 5. Add a CSS file and markup for UI configuration. (PC version same)
+```html
+<link type="text/css" href="css/tui-image-editor-m.css" rel="stylesheet">
+```
+>
+The CSS file is used on the sample page and should only refer to the UI configuration,
+It is recommended to customize image, CSS, and markup files when applying the service.
+
+
+#### Step 6. Apply the image editor API to the UI
+- API : [http:https://nhnent.github.io/tui.component.image-editor/latest/](http:https://nhnent.github.io/tui.component.image-editor/latest/)
+- Sample Page : [http:https://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html](http:https://nhnent.github.io/tui.component.image-editor/latest/tutorial-mobile.html)
+
+![all_feature_small](https://cloud.githubusercontent.com/assets/18183560/17803706/034ea17c-6633-11e6-914d-6602d12888f9.gif)
+![text_feature_small](https://cloud.githubusercontent.com/assets/18183560/17803707/03530636-6633-11e6-8c03-cd5523716b9b.gif)
+

docs/README.md

@@ -1,10 +1,13 @@
 ## Tutorials
 - [Getting Started](Basic-Tutorial.md)
+- [Understand the structure](Structure.md)
+- [Simple Reference](Reference.md)
+- [Mobile Version](Apply-Mobile-Version.md)
+- [Mobile Version - Image Load and Save](Apply-Mobile-Version-Image.md)
 
 
 ## Documents
-
-- [Code of Conducting](../CODE_OF_CONDUCTING.md)
+- [Code of Conducting](../CODE_OF_CONDUCT.md)
 - [Contributing Guide](../CONTRIBUTING.md)
 - [Commit Message Convention](COMMIT_MESSAGE_CONVENTION.md)
 - [API & Examples](http:https://nhnent.github.io/tui.image-editor/latest/)

docs/Reference.md

@@ -0,0 +1,70 @@
+
+### Text
+- Insert text on the canvas and modify text.
+- Change text color, weight, align so on.
+
+>**Implementing to insert text on the canvas using the text palette**
+- The user can make the specific text palette and edit some text using this palette.
+- Call custom event API, it can insert text object and control the text palette.
+ * `ImageEditor#activateText` : It occurs when the canvas is clicked.
+ * `ImageEditor#adjustObject` : It occurs when any inserted text object is moved or resized.
+
+```js
+imageEditor.on('activateText', function(obj) {
+ console.log(obj.type); // Whether the current text object is new or aleady created
+ console.log(obj.text); // Contents of the current text object
+ console.log(obj.styles); // Styles of the current text object
+ console.log(obj.originPosition); // Mouse position on the canvas
+ console.log(obj.clientPosition); // Mouse position on browser - set the text palette's position
+});
+```
+```js
+imageEditor.on('adjustObject', function(obj) {
+ console.log(obj.type); // Whether the selected object's type is "text" or others - control the the text palette's view state
+});
+```
+![image](https://cloud.githubusercontent.com/assets/18183560/16838164/cd200920-4a02-11e6-9c5a-304d1a07d82a.png)
+
+
+### Icon
+- Insert the basic icon on the canvas. (type: _arrow_, _cancel_ icon)
+- Register the custom icon.
+- Change color of the icon.
+
+>**How to draw SVG path**
+- [Link](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)
+
+>**How to get SVG path value when registering the custom icon**
+- [Link](https://css-tricks.com/using-svg/)
+
+![image](https://cloud.githubusercontent.com/assets/18183560/16838300/726f8a68-4a03-11e6-8703-6d0e36a7f3e3.png)
+
+
+### Mask Filter
+- Load the image for using mask filter. (This image is called the "mask image")
+- When applying mask filter on the canvas image, the canvas image's areas matching the mask image's black areas should be transparent.
+
+![image](https://cloud.githubusercontent.com/assets/18183560/16837578/07444c46-49ff-11e6-99fc-2355a6777dc0.gif)
+
+
+### Line Drawing
+- Draw the straight line on the canvas.
+- Change the color and width value of brush to draw line.
+
+![image](https://cloud.githubusercontent.com/assets/18183560/16837621/4beed348-49ff-11e6-8276-8e0f7e9e85e6.gif)
+
+### Shourtcut
+- On the canvas
+ * `ctrl + z` : undo
+ * `ctrl + y` : redo
+- Crop
+ * `shift` : making the cropzone of 1:1 ratio
+
+![image](https://cloud.githubusercontent.com/assets/18183560/16837645/73e7614e-49ff-11e6-9460-e596dd683724.gif)
+
+
+## More
+- Get started (Tutorial) : [https://github.com/nhnent/tui.component.image-editor/wiki/Tutorial](https://github.com/nhnent/tui.component.image-editor/wiki/Tutorial)
+- API : [http:https://nhnent.github.io/tui.image-editor/latest/](http:https://nhnent.github.io/tui.image-editor/latest/)
+- Sample : [http:https://nhnent.github.io/tui.image-editor/latest/tutorial-example01-basic.html](http:https://nhnent.github.io/tui.image-editor/latest/tutorial-example01-basic.html)
+