diff --git a/apps/image-editor/index.d.ts b/apps/image-editor/index.d.ts index c522906c..21c32187 100644 --- a/apps/image-editor/index.d.ts +++ b/apps/image-editor/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for TOAST UI Image Editor v3.15.12 +// Type definitions for TOAST UI Image Editor v3.15.15 // TypeScript Version: 3.2.2 declare namespace tuiImageEditor { diff --git a/apps/image-editor/package.json b/apps/image-editor/package.json index 3f8fec6d..5762c832 100644 --- a/apps/image-editor/package.json +++ b/apps/image-editor/package.json @@ -1,6 +1,6 @@ { "name": "@jaymanyoo/tui-image-editor", - "version": "3.15.12", + "version": "3.15.15", "description": "TOAST UI ImageEditor", "keywords": [ "nhn", diff --git a/apps/image-editor/src/js/imageEditor.js b/apps/image-editor/src/js/imageEditor.js index e25375ca..ca39aa45 100644 --- a/apps/image-editor/src/js/imageEditor.js +++ b/apps/image-editor/src/js/imageEditor.js @@ -484,13 +484,13 @@ class ImageEditor { * @private */ _onObjectActivated(props) { - const canvas = this._graphics.getCanvas(); - const objects = canvas.getObjects(); - let imageLayer = null; - imageLayer = objects[0]; - if (props?.id === imageLayer.__fe_id) { - this.discardSelection(); - } + // const canvas = this._graphics.getCanvas(); + // const objects = canvas.getObjects(); + // let imageLayer = null; + // imageLayer = objects[0]; + // if (props?.id === imageLayer.__fe_id) { + // this.discardSelection(); + // } /** * The event when object is selected(aka activated). * @event ImageEditor#objectActivated @@ -647,17 +647,17 @@ class ImageEditor { * @private */ execute(commandName, ...args) { - const canvas = this._graphics.getCanvas(); - const objects = canvas.getObjects(); - let imageLayer = null; - imageLayer = objects[0]; - if ( - imageLayer?.length > 0 && - args[0] === imageLayer?.__fe_id && - commandName === 'changeTextStyle' - ) { - this.discardSelection(); - } + // const canvas = this._graphics.getCanvas(); + // const objects = canvas.getObjects(); + // let imageLayer = null; + // imageLayer = objects[0]; + // if ( + // imageLayer?.length > 0 && + // args[0] === imageLayer?.__fe_id && + // commandName === 'changeTextStyle' + // ) { + // this.discardSelection(); + // } // Inject an Graphics instance as first parameter const theArgs = [this._graphics].concat(args); @@ -1268,13 +1268,13 @@ class ImageEditor { * }); */ changeTextStyle(id, styleObj, isSilent) { - const canvas = this._graphics.getCanvas(); - const objects = canvas.getObjects(); - let imageLayer = null; - imageLayer = objects[0]; - if (id === imageLayer?.__fe_id) { - this.discardSelection(); - } + // const canvas = this._graphics.getCanvas(); + // const objects = canvas.getObjects(); + // let imageLayer = null; + // imageLayer = objects[0]; + // if (id === imageLayer?.__fe_id) { + // this.discardSelection(); + // } const executeMethodName = isSilent ? 'executeSilent' : 'execute'; return this[executeMethodName](commands.CHANGE_TEXT_STYLE, id, styleObj); diff --git a/apps/image-editor/src/js/ui/rotate.js b/apps/image-editor/src/js/ui/rotate.js index 3c9202f6..e841e0a5 100644 --- a/apps/image-editor/src/js/ui/rotate.js +++ b/apps/image-editor/src/js/ui/rotate.js @@ -1,8 +1,8 @@ -import Range from '@/ui/tools/range'; +// import Range from '@/ui/tools/range'; import Submenu from '@/ui/submenuBase'; import templateHtml from '@/ui/template/submenu/rotate'; import { toInteger, assignmentForDestroy } from '@/util'; -import { defaultRotateRangeValues } from '@/consts'; +// import { defaultRotateRangeValues } from '@/consts'; const CLOCKWISE = 30; const COUNTERCLOCKWISE = -30; @@ -26,22 +26,23 @@ class Rotate extends Submenu { this._els = { rotateButton: this.selector('.tie-rotate-button'), - rotateRange: new Range( - { - slider: this.selector('.tie-rotate-range'), - input: this.selector('.tie-rotate-range-value'), - }, - defaultRotateRangeValues - ), }; } + // rotateRange: new Range( + // { + // slider: this.selector('.tie-rotate-range'), + // input: this.selector('.tie-rotate-range-value'), + // }, + // defaultRotateRangeValues + // ), + /** * Destroys the instance. */ destroy() { this._removeEvent(); - this._els.rotateRange.destroy(); + // this._els.rotateRange.destroy(); assignmentForDestroy(this); } @@ -50,14 +51,18 @@ class Rotate extends Submenu { let resultAngle = angle; if (type === 'rotate') { - resultAngle = parseInt(this._els.rotateRange.value, 10) + angle; + let newAngle = this._els?.rotateRange?.value; + if (!newAngle) { + newAngle = 0; + } + resultAngle = parseInt(newAngle, 10) + angle; } this._setRangeBarRatio(resultAngle); } - _setRangeBarRatio(angle) { - this._els.rotateRange.value = angle; + _setRangeBarRatio() { + // this._els?.rotateRange?.value = angle; } /** @@ -72,7 +77,7 @@ class Rotate extends Submenu { // {rotate, setAngle} this.actions = actions; this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged); - this._els.rotateRange.on('change', this._changeRotateForRange.bind(this)); + // this._els.rotateRange.on('change', this._changeRotateForRange.bind(this)); } /** @@ -81,7 +86,7 @@ class Rotate extends Submenu { */ _removeEvent() { this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged); - this._els.rotateRange.off(); + // this._els.rotateRange.off(); } /** @@ -103,7 +108,10 @@ class Rotate extends Submenu { */ _changeRotateForButton(event) { const button = event.target.closest('.tui-image-editor-button'); - const angle = this._els.rotateRange.value; + let angle = this._els?.rotateRange?.value; + if (!angle) { + angle = 0; + } if (button) { const rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']); diff --git a/apps/image-editor/src/js/ui/shape.js b/apps/image-editor/src/js/ui/shape.js index be068be2..22881d91 100644 --- a/apps/image-editor/src/js/ui/shape.js +++ b/apps/image-editor/src/js/ui/shape.js @@ -180,6 +180,9 @@ class Shape extends Submenu { * @param {number} value - expect value for strokeRange change */ setStrokeValue(value) { + if (!value) { + value = 1; + } this._els.strokeRange.value = value; this._els.strokeRange.trigger('change'); } diff --git a/apps/image-editor/src/js/ui/template/submenu/rotate.js b/apps/image-editor/src/js/ui/template/submenu/rotate.js index f005909f..533d7c6c 100644 --- a/apps/image-editor/src/js/ui/template/submenu/rotate.js +++ b/apps/image-editor/src/js/ui/template/submenu/rotate.js @@ -4,7 +4,7 @@ * @param {Function} makeSvgIcon - svg icon generator * @returns {string} */ -export default ({ locale, makeSvgIcon }) => ` +export default ({ makeSvgIcon }) => ` `; diff --git a/apps/image-editor/src/js/ui/template/submenu/text.js b/apps/image-editor/src/js/ui/template/submenu/text.js index 88389b43..44830562 100644 --- a/apps/image-editor/src/js/ui/template/submenu/text.js +++ b/apps/image-editor/src/js/ui/template/submenu/text.js @@ -25,7 +25,7 @@ export default ({ locale, makeSvgIcon }) => ` -
+
${makeSvgIcon(['normal', 'active'], 'text', true)}
diff --git a/apps/image-editor/src/js/ui/text.js b/apps/image-editor/src/js/ui/text.js index 3d099c16..b31a91bc 100644 --- a/apps/image-editor/src/js/ui/text.js +++ b/apps/image-editor/src/js/ui/text.js @@ -233,6 +233,7 @@ class Text extends Submenu { autofocus: false, }); } + const styleObj = { bold: { fontWeight: 'bold' }, italic: { fontStyle: 'italic' }, diff --git a/apps/react-image-editor/package.json b/apps/react-image-editor/package.json index b1de2b2d..ad187d30 100644 --- a/apps/react-image-editor/package.json +++ b/apps/react-image-editor/package.json @@ -1,6 +1,6 @@ { "name": "@jaymanyoo/react-image-editor", - "version": "3.15.12", + "version": "3.15.16", "description": "TOAST UI Image-Editor for React", "main": "dist/toastui-react-image-editor.js", "files": [ @@ -32,7 +32,7 @@ "webpack-cli": "^5.1.4" }, "dependencies": { - "@jaymanyoo/tui-image-editor": "^3.15.11", + "@jaymanyoo/tui-image-editor": "^3.15.15", "fabric": "^4.2.0" } } diff --git a/package-lock.json b/package-lock.json index 5cdca37f..db343614 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,7 @@ }, "apps/image-editor": { "name": "@jaymanyoo/tui-image-editor", - "version": "3.15.9", + "version": "3.15.15", "license": "MIT", "dependencies": { "fabric": "^4.2.0", @@ -358,10 +358,10 @@ }, "apps/react-image-editor": { "name": "@jaymanyoo/react-image-editor", - "version": "3.15.10", + "version": "3.15.16", "license": "MIT", "dependencies": { - "@jaymanyoo/tui-image-editor": "^3.15.9", + "@jaymanyoo/tui-image-editor": "^3.15.15", "fabric": "^4.2.0" }, "devDependencies": { @@ -51636,7 +51636,7 @@ "@jaymanyoo/react-image-editor": { "version": "file:apps/react-image-editor", "requires": { - "@jaymanyoo/tui-image-editor": "^3.15.9", + "@jaymanyoo/tui-image-editor": "^3.15.15", "@webpack-cli/generators": "^3.0.7", "fabric": "^4.2.0", "react": "^17.0.2",