Merge branch 'master' into production

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:
 

index.d.ts

@@ -1,8 +1,6 @@
 // Type definitions for TOAST UI Image Editor v3.4.0
 // TypeScript Version: 3.2.2
 
-/// <reference types="jquery" />
-
 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<IObjectProps>;
         public addImageObject(imgUrl: string): Promise<void>;
@@ -290,5 +288,5 @@ declare namespace tuiImageEditor {
 }
 
 declare module 'tui-image-editor' {
-    export = tuiImageEditor.ImageEditor;
+    export default tuiImageEditor.ImageEditor;
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHNEnt FE Development Lab <dl_javascript@nhnent.com>",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -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",

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,

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;

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();

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) {
@@ -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);

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();

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

src/js/consts.js

@@ -119,18 +119,20 @@ module.exports = {
      * @type {Object.<string, string>}
      */
     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.'
     },
 
     /**

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);

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

src/js/interface/component.js

@@ -27,7 +27,6 @@ class Component {
 
     /**
      * Fire Graphics event
-     * @param {Array} args - arguments
      * @returns {Object} return value
      */
     fire(...args) {

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
@@ -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%'
@@ -282,17 +282,15 @@ 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) {
         let selectedElement;
 
         window.snippet = snippet;
 
-        if (element.jquery) {
-            [selectedElement] = element;
-        } else if (element.nodeType) {
+        if (element.nodeType) {
             selectedElement = element;
         } else {
             selectedElement = document.querySelector(element);
@@ -529,9 +527,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();
         }
     }