diff --git a/README.md b/README.md index e34db5749..d35d3941e 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ ## Wrappers - [toast-ui.vue-image-editor](https://github.com/nhnent/toast-ui.vue-image-editor): Vue wrapper component is powered by [NHN Entertainment](https://github.com/nhnent). +- [toast-ui.react-image-editor](https://github.com/nhnent/toast-ui.react-image-editor): React wrapper component is powered by [NHN Entertainment](https://github.com/nhnent). ![6 -20-2018 17-45-54](https://user-images.githubusercontent.com/35218826/41647896-7b218ae0-74b2-11e8-90db-d7805cc23e8c.gif) @@ -45,7 +46,7 @@ TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the ```js var options = { - ... + //... usageStatistics: false } @@ -184,11 +185,29 @@ When using npm, be sure [Node.js](https://nodejs.org) is installed in the enviro #### npm +#### 1. ImageEditor installation ```sh $ npm install --save tui-image-editor # Latest version $ npm install --save tui-image-editor@ # Specific version ``` +##### 2. `fabric.js` installation +And you should add **postInstall** script to your `package.json`. +_This process will be removed when `fabric.js` updated to v2.7.0 and bundled with TOAST UI ImageEditor together._ + +```js +{ + // ... + "scripts": { + // ... + "postInstall": "npm install --no-save --no-optional fabric@^1.6.7" + } + // ... +} +``` + +Or you can add `fabric` as dependency. **But** there is [some steps](https://github.com/fabricjs/fabric.js#install-with-npm) to be installed well. + #### bower ```sh @@ -286,6 +305,23 @@ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { }); ``` +### TypeScript +If you using TypeScript, You must `import module = require('module')` on importing. +[`export =` and `import = require()`](https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require) + +```typescript +import ImageEditor = require('tui-image-editor'); + +const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { + cssMaxWidth: 700, + cssMaxHeight: 500, + selectionStyle: { + cornerSize: 20, + rotatingPointOffset: 70 + } +}); +``` + See [details](https://nhnent.github.io/tui.image-editor/latest) for additional informations. ## 🔧 Development @@ -326,7 +362,7 @@ $ npm run serve * [Commit convention](https://github.com/nhnent/tui.image-editor/blob/production/docs/COMMIT_MESSAGE_CONVENTION.md) ## 🔩 Dependency -* [fabric.js](https://github.com/kangax/fabric.js/releases/tag/v1.6.7) >=1.6.7 +* [fabric.js](https://github.com/kangax/fabric.js/releases/tag/v1.6.7) >=1.6.7 && < 2.0.0 * [tui.code-snippet](https://github.com/nhnent/tui.code-snippet/releases/tag/v1.2.5) >=1.3.0 * [tui.color-picker](https://github.com/nhnent/tui.color-picker/releases/tag/v2.2.0) >=2.2.0 diff --git a/docs/Apply-Mobile-Version.md b/docs/Apply-Mobile-Version.md index 511f22b13..baa7161bc 100644 --- a/docs/Apply-Mobile-Version.md +++ b/docs/Apply-Mobile-Version.md @@ -6,6 +6,7 @@ - Please refer to the [sample page](http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-mobile.html) first to check the UI configuration and operation. #### Step 1. Include the dependency file on the page. (PC version same) + ```html @@ -14,6 +15,7 @@ ``` #### Step 2. `body` Add markup to the tag to create an image editor. (PC version same) + ```html
@@ -21,11 +23,13 @@ ``` #### Step 3. `head` Add a meta tag for setting the viewport to the tag. + ```html ``` #### 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', { @@ -37,6 +41,7 @@ var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', { } }); ``` + - `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. @@ -58,8 +63,9 @@ var imageEditor = new tui.component.ImageEditor('.tui-image-editor canvas', { #### Step 5. Add a CSS file and markup for UI configuration. (PC version same) + ```html - + ``` > The CSS file is used on the sample page and should only refer to the UI configuration, @@ -67,8 +73,9 @@ It is recommended to customize image, CSS, and markup files when applying the se #### Step 6. Apply the image editor API to the UI + - API : [http://nhnent.github.io/tui.image-editor/latest/](http://nhnent.github.io/tui.image-editor/latest/) -- Sample Page : [http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html](http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.html) +- Sample Page : [http://nhnent.github.io/tui.image-editor/latest/tutorial-example03-mobile.html](http://nhnent.github.io/tui.image-editor/latest/tutorial-example01-includeUi.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) diff --git a/index.d.ts b/index.d.ts index 820ea70cb..031bc333d 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for TOAST UI Image Editor v3.5.0 +// Type definitions for TOAST UI Image Editor v3.5.2 // TypeScript Version: 3.2.2 declare namespace tuiImageEditor { @@ -270,7 +270,7 @@ declare namespace tuiImageEditor { public removeFilter(type?: string): Promise; public removeObject(id: number): Promise; public resetFlip(): Promise; - public resizeCanvasDemension(dimension: ICanvasSize): Promise; + public resizeCanvasDimension(dimension: ICanvasSize): Promise; public rotate(angle: AngleType): Promise; public setAngle(angle: AngleType): Promise; public setBrush(option: IBrushOptions): void; @@ -288,5 +288,5 @@ declare namespace tuiImageEditor { } declare module 'tui-image-editor' { - export default tuiImageEditor.ImageEditor; + export = tuiImageEditor.ImageEditor; } diff --git a/package-lock.json b/package-lock.json index 6db36afc1..eb0625f47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "tui-image-editor", - "version": "3.5.0", + "version": "3.5.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2041,7 +2041,7 @@ "integrity": "sha512-ph4GXLw3HYzlQMJOFcpCqWHuL3MxJ/344OR7wn0wlQGchQGTIVNsSUl8iKEMatpy2geNMysgA9fQa6xVhHOkTQ==", "dev": true, "requires": { - "definitelytyped-header-parser": "github:Microsoft/definitelytyped-header-parser#e0561530379dfa01324a89936b75d90b20df9bd2", + "definitelytyped-header-parser": "github:Microsoft/definitelytyped-header-parser#production", "fs-extra": "^6.0.1", "strip-json-comments": "^2.0.1", "tslint": "^5.12.0", @@ -3043,7 +3043,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3067,13 +3068,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3090,19 +3093,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3233,7 +3239,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3247,6 +3254,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3263,6 +3271,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3271,13 +3280,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3298,6 +3309,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3386,7 +3398,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3400,6 +3413,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3495,7 +3509,8 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3537,6 +3552,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3558,6 +3574,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3606,13 +3623,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, @@ -3712,25 +3731,31 @@ "dev": true }, "handlebars": { - "version": "4.0.11", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.11.tgz", - "integrity": "sha1-Ywo13+ApS8KB7a5v/F0yn8eYLcw=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.0.tgz", + "integrity": "sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==", "dev": true, "requires": { - "async": "^1.4.0", + "async": "^2.5.0", "optimist": "^0.6.1", - "source-map": "^0.4.4", - "uglify-js": "^2.6" + "source-map": "^0.6.1", + "uglify-js": "^3.1.4" }, "dependencies": { - "source-map": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", - "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz", + "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==", "dev": true, "requires": { - "amdefine": ">=0.0.4" + "lodash": "^4.17.11" } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true } } }, @@ -4446,15 +4471,15 @@ } }, "istanbul-lib-coverage": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.0.tgz", - "integrity": "sha512-GvgM/uXRwm+gLlvkWHTjDAvwynZkL9ns15calTrmhGgowlwJBbWMYzWbKqE2DT6JDP1AFXKa+Zi0EkqNCUqY0A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz", + "integrity": "sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==", "dev": true }, "istanbul-lib-instrument": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.1.tgz", - "integrity": "sha512-1dYuzkOCbuR5GRJqySuZdsmsNKPL3PTuyPevQfoCXJePT9C8y1ga75neU+Tuy9+yS3G/dgx8wgOmp2KLpgdoeQ==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz", + "integrity": "sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==", "dev": true, "requires": { "babel-generator": "^6.18.0", @@ -4462,7 +4487,7 @@ "babel-traverse": "^6.18.0", "babel-types": "^6.18.0", "babylon": "^6.18.0", - "istanbul-lib-coverage": "^1.2.0", + "istanbul-lib-coverage": "^1.2.1", "semver": "^5.3.0" } }, @@ -4865,9 +4890,9 @@ } }, "lodash": { - "version": "4.17.10", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==", + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", "dev": true }, "lodash.assignin": { @@ -7700,15 +7725,30 @@ "dev": true }, "uglify-js": { - "version": "2.8.29", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", - "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "version": "3.4.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", + "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==", "dev": true, "optional": true, "requires": { - "source-map": "~0.5.1", - "uglify-to-browserify": "~1.0.0", - "yargs": "~3.10.0" + "commander": "~2.17.1", + "source-map": "~0.6.1" + }, + "dependencies": { + "commander": { + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz", + "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", + "dev": true, + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true + } } }, "uglify-to-browserify": { diff --git a/package.json b/package.json index 28028cd34..d16ab2b37 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tui-image-editor", "author": "NHNEnt FE Development Lab ", - "version": "3.5.0", + "version": "3.5.2", "license": "MIT", "repository": { "type": "git", @@ -69,7 +69,7 @@ "cpy-dist2doc": "mkdir -p doc/dist && cp -f -r dist doc", "doc": "jsdoc -c jsdoc.conf.json && npm run cpy-dist2doc", "tslint": "tslint index.d.ts", - "postinstall": "npm install --no-save --no-optional fabric@~1.6.7" + "postinstall": "npm install --no-save --no-optional fabric@^1.6.7" }, "dependencies": { "core-js": "2.4.1", diff --git a/src/js/imageEditor.js b/src/js/imageEditor.js index 0996cf3c0..4dcd155e4 100644 --- a/src/js/imageEditor.js +++ b/src/js/imageEditor.js @@ -1086,9 +1086,6 @@ class ImageEditor { * @param {Number} pos.clientPosition.y - y * @example * imageEditor.on('addText', function(pos) { - * imageEditor.addText('Double Click', { - * position: pos.originPosition - * }); * console.log('text position on canvas: ' + pos.originPosition); * console.log('text position on brwoser: ' + pos.clientPosition); * }); diff --git a/test/types/type-tests.ts b/test/types/type-tests.ts index 33c7b4eae..bbef13411 100644 --- a/test/types/type-tests.ts +++ b/test/types/type-tests.ts @@ -1,4 +1,4 @@ -import ImageEditor from 'tui-image-editor'; +import ImageEditor = require('tui-image-editor'); const blackTheme = { 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', @@ -230,7 +230,7 @@ imageEditor.resetFlip().then(status => { console.log(`angle : ${status.angle}`); }); -imageEditor.resizeCanvasDemension({ +imageEditor.resizeCanvasDimension({ width: 300, height: 300 }); diff --git a/webpack.config.js b/webpack.config.js index b660bd16a..f950c97fc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -37,6 +37,12 @@ module.exports = { 'amd': 'tui-code-snippet', 'root': ['tui', 'util'] }, + 'tui-color-picker': { + 'commonjs': 'tui-color-picker', + 'commonjs2': 'tui-color-picker', + 'amd': 'tui-color-picker', + 'root': ['tui', 'colorPicker'] + }, 'fabric/dist/fabric.require': { 'commonjs': 'fabric/dist/fabric.require', 'commonjs2': 'fabric/dist/fabric.require',