From 0e933debb4b971c0f8070cf72778cea2a2974515 Mon Sep 17 00:00:00 2001 From: Roman Kosov Date: Fri, 18 Jan 2019 03:20:40 +0300 Subject: [PATCH 01/11] fix: Correct CONTRIBUTING.md's link reference (#120) --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3709dfc48..a34cd0dbf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -18,7 +18,7 @@ Explain the problem and include additional details to help maintainers reproduce ## 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. +Before creating suggestions, please check [issue list](../../labels/enhancement) if there's already a request. Create an issue and provide the following information: From 4be0e6b3c987efd3b2c6a075eaf032f644515499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Fri, 18 Jan 2019 12:17:06 +0900 Subject: [PATCH 02/11] fix: Initialize UI defaultIcons without initial selected menu option. (#127) --- src/css/buttons.styl | 1 + src/js/ui.js | 17 +++++++++-------- src/js/ui/template/style.js | 1 + 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/css/buttons.styl b/src/css/buttons.styl index 5b3ca45d9..3d46f510d 100644 --- a/src/css/buttons.styl +++ b/src/css/buttons.styl @@ -5,6 +5,7 @@ &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active, &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active, &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active, + &.icon-star-2 .{prefix}-button[data-icontype="icon-star-2"] svg > use.active, &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active, &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active, &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active, diff --git a/src/js/ui.js b/src/js/ui.js index b255d0743..a4826a147 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -219,10 +219,10 @@ class Ui { /** * Change delete button status * @param {Object} [options] - Ui setting options - * @param {number} option.loadImage - Init default load image - * @param {number} option.initMenu - Init start menu - * @param {Boolean} [option.menuBarPosition=bottom] - Let - * @param {Boolean} [option.applyCropSelectionStyle=false] - Let + * @param {object} [option.loadImage] - Init default load image + * @param {string} [option.initMenu] - Init start menu + * @param {string} [option.menuBarPosition=bottom] - Let + * @param {boolean} [option.applyCropSelectionStyle=false] - Let * @returns {Object} initialize option * @private */ @@ -235,7 +235,7 @@ class Ui { locale: {}, menuIconPath: '', menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'], - initMenu: false, + initMenu: '', uiSize: { width: '100%', height: '100%' @@ -529,9 +529,10 @@ class Ui { const evt = document.createEvent('MouseEvents'); evt.initEvent('click', true, false); this._els[this.options.initMenu].dispatchEvent(evt); - if (this.icon) { - this.icon.registDefaultIcon(); - } + } + + if (this.icon) { + this.icon.registDefaultIcon(); } } diff --git a/src/js/ui/template/style.js b/src/js/ui/template/style.js index 9cdd94774..073e57f15 100644 --- a/src/js/ui/template/style.js +++ b/src/js/ui/template/style.js @@ -23,6 +23,7 @@ export default ({ #tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label, #tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label, #tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label, + #tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label, #tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label, #tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label, #tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label, From b70dadde3e8b3b7c68ecd2a075846ace66a2f1e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Fri, 18 Jan 2019 15:29:05 +0900 Subject: [PATCH 03/11] fix: Ensure reject on loadImage failed (fix #116) (#128) * fix: Check oImage existence before use fixes #116 * fix: Add rejectMessage for 'loadingImageFailed' * chore: Add missing message and order messages --- src/js/component/imageLoader.js | 2 +- src/js/consts.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/js/component/imageLoader.js b/src/js/component/imageLoader.js index 8f49df8fe..4bb826327 100644 --- a/src/js/component/imageLoader.js +++ b/src/js/component/imageLoader.js @@ -72,7 +72,7 @@ class ImageLoader extends Component { canvas.setBackgroundImage(img, () => { const oImage = canvas.backgroundImage; - if (oImage.getElement()) { + if (oImage && oImage.getElement()) { resolve(oImage); } else { reject(rejectMessages.loadingImageFailed); diff --git a/src/js/consts.js b/src/js/consts.js index e700cd742..84eae1a7f 100644 --- a/src/js/consts.js +++ b/src/js/consts.js @@ -119,18 +119,20 @@ module.exports = { * @type {Object.} */ rejectMessages: { + addedObject: 'The object is already added.', flip: 'The flipX and flipY setting values are not changed.', - rotation: 'The current angle is same the old angle.', - loadImage: 'The background image is empty.', + invalidDrawingMode: 'This operation is not supported in the drawing mode.', + invalidParameters: 'Invalid parameters.', isLock: 'The executing command state is locked.', - undo: 'The promise of undo command is reject.', - redo: 'The promise of redo command is reject.', - invalidDrawingMode: 'This operation is not supported in the drawing mode', - invalidParameters: 'Invalid parameters', + loadImage: 'The background image is empty.', + loadingImageFailed: 'Invalid image loaded.', noActiveObject: 'There is no active object.', - unsupportedType: 'Unsupported object type', noObject: 'The object is not in canvas.', - addedObject: 'The object is already added.' + redo: 'The promise of redo command is reject.', + rotation: 'The current angle is same the old angle.', + undo: 'The promise of undo command is reject.', + unsupportedOperation: 'Unsupported operation.', + unsupportedType: 'Unsupported object type.' }, /** From 2af593dca900f9ad090301a3750021143319d9df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= <35218826+jinwoo-kim-nhn@users.noreply.github.com> Date: Wed, 13 Feb 2019 10:53:50 +0900 Subject: [PATCH 04/11] feat: Remove jQuery selector method and jQuery elements from code (#123) * feat: exclude jquery selector * feat: exclude jquery selector use test * apply codereview --- src/js/component/flip.js | 8 ++++---- src/js/component/imageLoader.js | 4 ++-- src/js/component/rotation.js | 4 ++-- src/js/graphics.js | 8 +++----- src/js/imageEditor.js | 2 +- src/js/ui.js | 8 +++----- test/command.spec.js | 3 +-- test/drawingMode.spec.js | 3 +-- test/filter.spec.js | 2 +- test/graphics.spec.js | 3 +-- test/promiseApi.spec.js | 3 +-- 11 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/js/component/flip.js b/src/js/component/flip.js index 8f74d8a73..e4dfe906b 100644 --- a/src/js/component/flip.js +++ b/src/js/component/flip.js @@ -37,7 +37,7 @@ class Flip extends Component { /** * Set flipX, flipY * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting - * @returns {jQuery.Deferred} + * @returns {Promise} */ set(newSetting) { const setting = this.getCurrentSetting(); @@ -110,7 +110,7 @@ class Flip extends Component { /** * Reset flip settings - * @returns {jQuery.Deferred} + * @returns {Promise} */ reset() { return this.set({ @@ -121,7 +121,7 @@ class Flip extends Component { /** * Flip x - * @returns {jQuery.Deferred} + * @returns {Promise} */ flipX() { const current = this.getCurrentSetting(); @@ -134,7 +134,7 @@ class Flip extends Component { /** * Flip y - * @returns {jQuery.Deferred} + * @returns {Promise} */ flipY() { const current = this.getCurrentSetting(); diff --git a/src/js/component/imageLoader.js b/src/js/component/imageLoader.js index 4bb826327..d7bccc8b3 100644 --- a/src/js/component/imageLoader.js +++ b/src/js/component/imageLoader.js @@ -28,7 +28,7 @@ class ImageLoader extends Component { * Load image from url * @param {?string} imageName - File name * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image - * @returns {jQuery.Deferred} deferred + * @returns {Promise} */ load(imageName, img) { let promise; @@ -58,7 +58,7 @@ class ImageLoader extends Component { /** * Set background image * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to - * @returns {$.Deferred} deferred + * @returns {Promise} * @private */ _setBackgroundImage(img) { diff --git a/src/js/component/rotation.js b/src/js/component/rotation.js index 17566deb2..92bb89e54 100644 --- a/src/js/component/rotation.js +++ b/src/js/component/rotation.js @@ -37,7 +37,7 @@ class Rotation extends Component { * See "http://fabricjs.com/docs/fabric.Object.html#setAngle" * * @param {number} angle - Angle value - * @returns {jQuery.Deferred} + * @returns {Promise} */ setAngle(angle) { const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees) @@ -86,7 +86,7 @@ class Rotation extends Component { /** * Rotate the image * @param {number} additionalAngle - Additional angle - * @returns {jQuery.Deferred} + * @returns {Promise} */ rotate(additionalAngle) { const current = this.getCurrentAngle(); diff --git a/src/js/graphics.js b/src/js/graphics.js index b4aa71005..ea0e2f2f7 100644 --- a/src/js/graphics.js +++ b/src/js/graphics.js @@ -42,7 +42,7 @@ const backstoreOnly = { /** * Graphics class * @class - * @param {string|jQuery|HTMLElement} wrapper - Wrapper's element or selector + * @param {string|HTMLElement} wrapper - Wrapper's element or selector * @param {Object} [option] - Canvas max width & height of css * @param {number} option.cssMaxWidth - Canvas css-max-width * @param {number} option.cssMaxHeight - Canvas css-max-height @@ -768,16 +768,14 @@ class Graphics { /** * Set canvas element to fabric.Canvas - * @param {jQuery|Element|string} element - Wrapper or canvas element or selector + * @param {Element|string} element - Wrapper or canvas element or selector * @private */ _setCanvasElement(element) { let selectedElement; let canvasElement; - if (element.jquery) { - [selectedElement] = element; - } else if (element.nodeType) { + if (element.nodeType) { selectedElement = element; } else { selectedElement = document.querySelector(element); diff --git a/src/js/imageEditor.js b/src/js/imageEditor.js index 4d2e20949..0996cf3c0 100644 --- a/src/js/imageEditor.js +++ b/src/js/imageEditor.js @@ -20,7 +20,7 @@ const {isUndefined, forEach, CustomEvents} = snippet; /** * Image editor * @class - * @param {string|jQuery|HTMLElement} wrapper - Wrapper's element or selector + * @param {string|HTMLElement} wrapper - Wrapper's element or selector * @param {Object} [options] - Canvas max width & height of css * @param {number} [options.includeUI] - Use the provided UI * @param {Object} [options.includeUI.loadImage] - Basic editing image diff --git a/src/js/ui.js b/src/js/ui.js index a4826a147..15fb92138 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -32,7 +32,7 @@ const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300'; /** * Ui class * @class - * @param {string|jQuery|HTMLElement} element - Wrapper's element or selector + * @param {string|HTMLElement} element - Wrapper's element or selector * @param {Object} [options] - Ui setting options * @param {number} option.loadImage - Init default load image * @param {number} option.initMenu - Init start menu @@ -282,7 +282,7 @@ class Ui { /** * Make primary ui dom element - * @param {string|jQuery|HTMLElement} element - Wrapper's element or selector + * @param {string|HTMLElement} element - Wrapper's element or selector * @private */ _makeUiElement(element) { @@ -290,9 +290,7 @@ class Ui { window.snippet = snippet; - if (element.jquery) { - [selectedElement] = element; - } else if (element.nodeType) { + if (element.nodeType) { selectedElement = element; } else { selectedElement = document.querySelector(element); diff --git a/test/command.spec.js b/test/command.spec.js index be9a2c631..40c7ea13c 100644 --- a/test/command.spec.js +++ b/test/command.spec.js @@ -5,7 +5,6 @@ import snippet from 'tui-code-snippet'; import Promise from 'core-js/library/es6/promise'; import fabric from 'fabric/dist/fabric.require'; -import $ from 'jquery'; import Invoker from '../src/js/invoker'; import commandFactory from '../src/js/factory/command'; import Graphics from '../src/js/graphics'; @@ -17,7 +16,7 @@ describe('commandFactory', () => { let invoker, mockImage, canvas, graphics; beforeEach(() => { - graphics = new Graphics($('')); + graphics = new Graphics(document.createElement('canvas')); invoker = new Invoker(); mockImage = new fabric.Image(); diff --git a/test/drawingMode.spec.js b/test/drawingMode.spec.js index 36cb01948..f8f9980a4 100644 --- a/test/drawingMode.spec.js +++ b/test/drawingMode.spec.js @@ -2,7 +2,6 @@ * @author NHN Ent. FE Development Team * @fileoverview Test cases of "src/js/imageEditor.js" */ -import $ from 'jquery'; import ImageEditor from '../src/js/imageEditor'; describe('DrawingMode', () => { @@ -10,7 +9,7 @@ describe('DrawingMode', () => { const imageURL = 'base/test/fixtures/sampleImage.jpg'; beforeEach(done => { - imageEditor = new ImageEditor($('
'), { + imageEditor = new ImageEditor(document.createElement('div'), { cssMaxWidth: 700, cssMaxHeight: 500 }); diff --git a/test/filter.spec.js b/test/filter.spec.js index d4d578e64..2eb15fe40 100644 --- a/test/filter.spec.js +++ b/test/filter.spec.js @@ -10,7 +10,7 @@ describe('Filter', () => { const imageURL = 'base/test/fixtures/sampleImage.jpg'; beforeAll(done => { - imageEditor = new ImageEditor($('
'), { + imageEditor = new ImageEditor(document.createElement('div'), { cssMaxWidth: 700, cssMaxHeight: 500 }); diff --git a/test/graphics.spec.js b/test/graphics.spec.js index 10006b20d..b676a2337 100644 --- a/test/graphics.spec.js +++ b/test/graphics.spec.js @@ -4,7 +4,6 @@ */ import snippet from 'tui-code-snippet'; import fabric from 'fabric/dist/fabric.require'; -import $ from 'jquery'; import Graphics from '../src/js/graphics'; import consts from '../src/js/consts'; @@ -17,7 +16,7 @@ describe('Graphics', () => { let graphics, canvas; beforeEach(() => { - graphics = new Graphics($(''), { + graphics = new Graphics(document.createElement('canvas'), { cssMaxWidth, cssMaxHeight }); diff --git a/test/promiseApi.spec.js b/test/promiseApi.spec.js index 9caa5cc71..e9cf7491a 100644 --- a/test/promiseApi.spec.js +++ b/test/promiseApi.spec.js @@ -2,7 +2,6 @@ * @author NHN Ent. FE Development Team * @fileoverview Test cases of "src/js/component/filter.js" */ -import $ from 'jquery'; import ImageEditor from '../src/js/imageEditor'; describe('Promise API', () => { @@ -10,7 +9,7 @@ describe('Promise API', () => { const imageURL = 'base/test/fixtures/sampleImage.jpg'; beforeAll(() => { - imageEditor = new ImageEditor($('
'), { + imageEditor = new ImageEditor(document.createElement('div'), { cssMaxWidth: 700, cssMaxHeight: 500 }); From dc747f8cacf9deddd33751c145cdc620a04968e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=EC=A0=95=EC=9D=80?= Date: Wed, 13 Feb 2019 10:54:53 +0900 Subject: [PATCH 05/11] chore: Remove jQuery type (#122) * chore: remove jquery type * chore: fix d.ts version --- index.d.ts | 6 ++---- package-lock.json | 15 --------------- package.json | 1 - 3 files changed, 2 insertions(+), 20 deletions(-) diff --git a/index.d.ts b/index.d.ts index 37f3d2df0..e1a3d895c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,8 +1,6 @@ -// Type definitions for TOAST UI Image Editor v3.3.1 +// Type definitions for TOAST UI Image Editor v3.4.0 // TypeScript Version: 3.2.2 -/// - declare namespace tuiImageEditor { type AngleType = number; @@ -231,7 +229,7 @@ declare namespace tuiImageEditor { } class ImageEditor { - constructor(wrapper: string | JQuery | Element, options: IOptions); + constructor(wrapper: string | Element, options: IOptions); public addIcon(type: string, options?: IIconOptions): Promise; public addImageObject(imgUrl: string): Promise; diff --git a/package-lock.json b/package-lock.json index a36e7f740..c8210c7a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,27 +4,12 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "@types/jquery": { - "version": "3.3.29", - "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz", - "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==", - "dev": true, - "requires": { - "@types/sizzle": "*" - } - }, "@types/parsimmon": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@types/parsimmon/-/parsimmon-1.10.0.tgz", "integrity": "sha512-bsTIJFVQv7jnvNiC42ld2pQW2KRI+pAG243L+iATvqzy3X6+NH1obz2itRKDZZ8VVhN3wjwYax/VBGCcXzgTqQ==", "dev": true }, - "@types/sizzle": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", - "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==", - "dev": true - }, "abbrev": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz", diff --git a/package.json b/package.json index d78ae79ce..cf8e112e9 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "fabric" ], "devDependencies": { - "@types/jquery": "^3.3.29", "babel-core": "^6.18.2", "babel-eslint": "^7.1.0", "babel-loader": "^6.2.7", From 5a65eec424f8c962c568f3cb7ad4f794103432b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Thu, 14 Feb 2019 12:57:29 +0900 Subject: [PATCH 06/11] fix: Change Typescript definition file 'tui-image-editor' export type to default export fixes #142 (#148) --- index.d.ts | 2 +- test/types/tsconfig.json | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/index.d.ts b/index.d.ts index e1a3d895c..bb29020ad 100644 --- a/index.d.ts +++ b/index.d.ts @@ -288,5 +288,5 @@ declare namespace tuiImageEditor { } declare module 'tui-image-editor' { - export = tuiImageEditor.ImageEditor; + export default tuiImageEditor.ImageEditor; } diff --git a/test/types/tsconfig.json b/test/types/tsconfig.json index 3c16e32c2..3b93829ac 100644 --- a/test/types/tsconfig.json +++ b/test/types/tsconfig.json @@ -1,9 +1,7 @@ { "compilerOptions": { "noEmit": true, - "noImplicitAny": false, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true + "noImplicitAny": false }, "include": [ "../../index.d.ts", From 4361dffe65541d97277518b9e1ee5ba010011708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Thu, 14 Feb 2019 12:59:41 +0900 Subject: [PATCH 07/11] fix: Change loadButton tag to div (fix #137) (#145) * fix: Change loadButton tag to div fixes #137 * fix: Change loadButton tag to div --- src/css/main.styl | 3 +++ src/js/ui/template/controls.js | 4 ++-- src/js/ui/template/mainContainer.js | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/css/main.styl b/src/css/main.styl index 89fa20fac..fd5202de8 100644 --- a/src/css/main.styl +++ b/src/css/main.styl @@ -48,7 +48,9 @@ body > textarea display: none; .-header-buttons button, + .-header-buttons div, .-controls-buttons button + display: inline-block; position: relative; width: 120px; height: 40px; @@ -63,6 +65,7 @@ body > textarea cursor: pointer; vertical-align: middle; letter-spacing: 0.3px; + text-align: center; .-download-btn background-color: #fdba3b; diff --git a/src/js/ui/template/controls.js b/src/js/ui/template/controls.js index 7d63e4913..52f0ae544 100644 --- a/src/js/ui/template/controls.js +++ b/src/js/ui/template/controls.js @@ -48,10 +48,10 @@ export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButt
- +
diff --git a/src/js/ui/template/mainContainer.js b/src/js/ui/template/mainContainer.js index 41a4f66ba..993f275b0 100644 --- a/src/js/ui/template/mainContainer.js +++ b/src/js/ui/template/mainContainer.js @@ -5,10 +5,10 @@ export default ({locale, biImage, commonStyle, headerStyle, loadButtonStyle, dow
- +
From 989c16d61414d6a1ce6284bb758ab99bab2a64f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Thu, 14 Feb 2019 12:59:59 +0900 Subject: [PATCH 08/11] fix: Modify title of filter subMenu name "Grayscale" (fix #138) (#139) --- src/js/ui/template/submenu/filter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/ui/template/submenu/filter.js b/src/js/ui/template/submenu/filter.js index a6110a10d..e33ff59be 100644 --- a/src/js/ui/template/submenu/filter.js +++ b/src/js/ui/template/submenu/filter.js @@ -60,7 +60,7 @@ export default ({locale}) => (`
- +
From 439816dc85163e23b6825a471cf9fef5a584c2d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Thu, 14 Feb 2019 16:23:47 +0900 Subject: [PATCH 09/11] fix: Add shape on mouseClick without mouseMove (fix #144) (#146) * fix: Fire ADD_OBJECT_AFTER event in shape.add() * fix: Add shape mouseClick without mouse moving fixes #144 * refactor: Rename variable * refactor: Move event --- src/js/component/shape.js | 28 ++++++++++++++++++++++------ src/js/interface/component.js | 1 - 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/js/component/shape.js b/src/js/component/shape.js index 9777949de..8938a1bc6 100644 --- a/src/js/component/shape.js +++ b/src/js/component/shape.js @@ -13,6 +13,9 @@ const {rejectMessages, eventNames} = consts; const KEY_CODES = consts.keyCodes; const DEFAULT_TYPE = 'rect'; +const DEFAULT_WIDTH = 20; +const DEFAULT_HEIGHT = 20; + const DEFAULT_OPTIONS = { strokeWidth: 1, stroke: '#000000', @@ -177,13 +180,16 @@ class Shape extends Component { add(type, options) { return new Promise(resolve => { const canvas = this.getCanvas(); - options = this._createOptions(options); + options = this._extendOptions(options); const shapeObj = this._createInstance(type, options); this._bindEventOnShape(shapeObj); canvas.add(shapeObj).setActiveObject(shapeObj); - resolve(this.graphics.createObjectProperties(shapeObj)); + + const objectProperties = this.graphics.createObjectProperties(shapeObj); + + resolve(objectProperties); }); } @@ -249,7 +255,7 @@ class Shape extends Component { * @returns {Object} Shape options * @private */ - _createOptions(options) { + _extendOptions(options) { const selectionStyles = consts.fObjectOptions.SELECTION_STYLE; options = extend({}, DEFAULT_OPTIONS, this._options, selectionStyles, options); @@ -364,14 +370,24 @@ class Shape extends Component { */ _onFabricMouseUp() { const canvas = this.getCanvas(); + const startPointX = this._startPoint.x; + const startPointY = this._startPoint.y; const shape = this._shapeObj; - if (shape) { + if (!shape) { + this.add(this._type, { + left: startPointX, + top: startPointY, + width: DEFAULT_WIDTH, + height: DEFAULT_HEIGHT + }).then(objectProps => { + this.fire(eventNames.ADD_OBJECT, objectProps); + }); + } else if (shape) { resizeHelper.adjustOriginToCenter(shape); + this.fire(eventNames.ADD_OBJECT_AFTER, this.graphics.createObjectProperties(shape)); } - this.fire(eventNames.ADD_OBJECT_AFTER, this.graphics.createObjectProperties(shape)); - canvas.off({ 'mouse:move': this._handlers.mousemove, 'mouse:up': this._handlers.mouseup diff --git a/src/js/interface/component.js b/src/js/interface/component.js index 9308f293a..66b44b2a6 100644 --- a/src/js/interface/component.js +++ b/src/js/interface/component.js @@ -27,7 +27,6 @@ class Component { /** * Fire Graphics event - * @param {Array} args - arguments * @returns {Object} return value */ fire(...args) { From 580ab67d92b8a2d8a6d63bc3cc5dfaa623716a6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=A0=95=ED=99=98?= Date: Fri, 15 Feb 2019 16:33:49 +0900 Subject: [PATCH 10/11] fix: Do not fire "chaneShow" event when ColorPicker's color not changed (fix #131) (#149) --- src/js/ui/tools/colorpicker.js | 47 +++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/src/js/ui/tools/colorpicker.js b/src/js/ui/tools/colorpicker.js index 91eabfd49..a0a00585c 100644 --- a/src/js/ui/tools/colorpicker.js +++ b/src/js/ui/tools/colorpicker.js @@ -133,10 +133,15 @@ class Colorpicker { this.fire('change', value.color); }); colorpickerElement.addEventListener('click', event => { - this._show = !this._show; - this.pickerControl.style.display = this._show ? 'block' : 'none'; - this._setPickerControlPosition(); - this.fire('changeShow', this); + const {target} = event; + const isInPickerControl = target && this._isElementInColorPickerControl(target); + + if (!isInPickerControl || (isInPickerControl && this._isPaletteButton(target))) { + this._show = !this._show; + this.pickerControl.style.display = this._show ? 'block' : 'none'; + this._setPickerControlPosition(); + this.fire('changeShow', this); + } event.stopPropagation(); }); document.body.addEventListener('click', () => { @@ -144,6 +149,40 @@ class Colorpicker { }); } + /** + * Check hex input or not + * @param {Element} target - Event target element + * @returns {boolean} + * @private + */ + _isPaletteButton(target) { + return target.className === 'tui-colorpicker-palette-button'; + } + + /** + * Check given element is in pickerControl element + * @param {Element} element - element to check + * @returns {boolean} + * @private + */ + _isElementInColorPickerControl(element) { + let parentNode = element; + + while (parentNode !== document.body) { + if (!parentNode) { + break; + } + + if (parentNode === this.pickerControl) { + return true; + } + + parentNode = parentNode.parentNode; + } + + return false; + } + hide() { this._show = false; this.pickerControl.style.display = 'none'; From cf0665fde143ee22c35f5162165618abf3731607 Mon Sep 17 00:00:00 2001 From: junghwan-park Date: Fri, 15 Feb 2019 16:36:32 +0900 Subject: [PATCH 11/11] chore: Update version to v3.5.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c8210c7a9..6db36afc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "tui-image-editor", - "version": "3.4.0", + "version": "3.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index cf8e112e9..28028cd34 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tui-image-editor", "author": "NHNEnt FE Development Lab ", - "version": "3.4.0", + "version": "3.5.0", "license": "MIT", "repository": { "type": "git",