tui-image-editor - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CONTRIBUTING.md

@@ -21,3 +21,3 @@ # Contributing to TOAST UI
 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.
 
@@ -24,0 +24,0 @@ Create an issue and provide the following information:

index.d.ts

@@ -1,6 +0,4 @@
-// Type definitions for TOAST UI Image Editor v3.4.0
+// Type definitions for TOAST UI Image Editor v3.5.0
 // TypeScript Version: 3.2.2
 
-/// <reference types="jquery" />
-
 declare namespace tuiImageEditor {
@@ -234,3 +232,3 @@ type AngleType = number;
     class ImageEditor {
-        constructor(wrapper: string | JQuery | Element, options: IOptions);
+        constructor(wrapper: string | Element, options: IOptions);
 
@@ -294,3 +292,3 @@ public addIcon(type: string, options?: IIconOptions): Promise<IObjectProps>;
 declare module 'tui-image-editor' {
-    export = tuiImageEditor.ImageEditor;
+    export default tuiImageEditor.ImageEditor;
 }

package.json

 {
   "name": "tui-image-editor",
   "author": "NHNEnt FE Development Lab <[e-mail]>",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "license": "MIT",
@@ -22,3 +22,2 @@ "repository": {
   "devDependencies": {
-    "@types/jquery": "^3.3.29",
     "babel-core": "^6.18.2",
@@ -25,0 +24,0 @@ "babel-eslint": "^7.1.0",

src/js/component/flip.js

@@ -40,3 +40,3 @@ /**
      * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -114,3 +114,3 @@ set(newSetting) {
      * Reset flip settings
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -126,3 +126,3 @@ reset() {
      * Flip x
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -140,3 +140,3 @@ flipX() {
      * Flip y
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -143,0 +143,0 @@ flipY() {

src/js/component/imageLoader.js

@@ -31,3 +31,3 @@ /**
      * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image
-     * @returns {jQuery.Deferred} deferred
+     * @returns {Promise}
      */
@@ -62,3 +62,3 @@ load(imageName, img) {
      * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to
-     * @returns {$.Deferred} deferred
+     * @returns {Promise}
      * @private
@@ -77,3 +77,3 @@ */
 
-                if (oImage.getElement()) {
+                if (oImage && oImage.getElement()) {
                     resolve(oImage);
@@ -80,0 +80,0 @@ } else {

src/js/component/rotation.js

@@ -40,3 +40,3 @@ /**
      * @param {number} angle - Angle value
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -90,3 +90,3 @@ setAngle(angle) {
      * @param {number} additionalAngle - Additional angle
-     * @returns {jQuery.Deferred}
+     * @returns {Promise}
      */
@@ -93,0 +93,0 @@ rotate(additionalAngle) {

src/js/component/shape.js

@@ -16,2 +16,5 @@ /**
 const DEFAULT_TYPE = 'rect';
+const DEFAULT_WIDTH = 20;
+const DEFAULT_HEIGHT = 20;
+
 const DEFAULT_OPTIONS = {
@@ -181,3 +184,3 @@ strokeWidth: 1,
             const canvas = this.getCanvas();
-            options = this._createOptions(options);
+            options = this._extendOptions(options);
             const shapeObj = this._createInstance(type, options);
@@ -188,3 +191,6 @@
             canvas.add(shapeObj).setActiveObject(shapeObj);
-            resolve(this.graphics.createObjectProperties(shapeObj));
+
+            const objectProperties = this.graphics.createObjectProperties(shapeObj);
+
+            resolve(objectProperties);
         });
@@ -255,3 +261,3 @@ }
      */
-    _createOptions(options) {
+    _extendOptions(options) {
         const selectionStyles = consts.fObjectOptions.SELECTION_STYLE;
@@ -371,10 +377,20 @@
         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({
@@ -381,0 +397,0 @@ 'mouse:move': this._handlers.mousemove,

src/js/consts.js

@@ -122,14 +122,16 @@ /**
     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.',
+        invalidDrawingMode: 'This operation is not supported in the drawing mode.',
+        invalidParameters: 'Invalid parameters.',
+        isLock: 'The executing command state is locked.',
         loadImage: 'The background image is empty.',
-        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',
+        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.'
     },
@@ -136,0 +138,0 @@

src/js/graphics.js

@@ -45,3 +45,3 @@ /**
  * @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
@@ -772,3 +772,3 @@ *  @param {number} option.cssMaxWidth - Canvas css-max-width
      * 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
@@ -780,5 +780,3 @@ */
 
-        if (element.jquery) {
-            [selectedElement] = element;
-        } else if (element.nodeType) {
+        if (element.nodeType) {
             selectedElement = element;
@@ -785,0 +783,0 @@ } else {

src/js/imageEditor.js

@@ -23,3 +23,3 @@ /**
  * @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
@@ -26,0 +26,0 @@ *  @param {number} [options.includeUI] - Use the provided UI

src/js/interface/component.js

@@ -30,3 +30,2 @@ /**
      * Fire Graphics event
-     * @param {Array} args - arguments
      * @returns {Object} return value
@@ -33,0 +32,0 @@ */

src/js/ui.js

@@ -35,3 +35,3 @@ import snippet from 'tui-code-snippet';
  * @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
@@ -223,6 +223,6 @@ *   @param {number} option.loadImage - Init default load image
      * @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
@@ -240,3 +240,3 @@ * @private
             menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
-            initMenu: false,
+            initMenu: '',
             uiSize: {
@@ -288,3 +288,3 @@ width: '100%',
      * 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
@@ -297,5 +297,3 @@ */
 
-        if (element.jquery) {
-            [selectedElement] = element;
-        } else if (element.nodeType) {
+        if (element.nodeType) {
             selectedElement = element;
@@ -537,6 +535,7 @@ } else {
             this._els[this.options.initMenu].dispatchEvent(evt);
-            if (this.icon) {
-                this.icon.registDefaultIcon();
-            }
         }
+
+        if (this.icon) {
+            this.icon.registDefaultIcon();
+        }
     }
@@ -543,0 +542,0 @@

src/js/ui/template/controls.js

@@ -51,6 +51,6 @@ export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
         <div class="tui-image-editor-controls-buttons">
-            <button style="${loadButtonStyle}">
+            <div style="${loadButtonStyle}">
                 ${locale.localize('Load')}
                 <input type="file" class="tui-image-editor-load-btn" />
-            </button>
+            </div>
             <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
@@ -57,0 +57,0 @@ ${locale.localize('Download')}

src/js/ui/template/mainContainer.js

@@ -8,6 +8,6 @@ export default ({locale, biImage, commonStyle, headerStyle, loadButtonStyle, downloadButtonStyle, submenuStyle}) => (`
             <div class="tui-image-editor-header-buttons">
-                <button style="${loadButtonStyle}">
+                <div style="${loadButtonStyle}">
                     ${locale.localize('Load')}
                     <input type="file" class="tui-image-editor-load-btn" />
-                </button>
+                </div>
                 <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
@@ -14,0 +14,0 @@ ${locale.localize('Download')}

src/js/ui/template/style.js

@@ -26,2 +26,3 @@ export default ({
     #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,
@@ -28,0 +29,0 @@ #tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label,

src/js/ui/template/submenu/filter.js

@@ -63,3 +63,3 @@ /**
                         <input type="checkbox" id="tie-gradient-transparency">
-                        <label for="tie-gradient-transparency">${locale.localize('Grayscale')}</label>
+                        <label for="tie-gradient-transparency">${locale.localize('Gradient transparency')}</label>
                     </div>
@@ -66,0 +66,0 @@ </div>

src/js/ui/tools/colorpicker.js

@@ -136,6 +136,11 @@ import snippet from 'tui-code-snippet';
         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();
@@ -148,2 +153,36 @@ });
 
+    /**
+     * 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() {
@@ -150,0 +189,0 @@ this._show = false;

test/command.spec.js

@@ -8,3 +8,2 @@ /**
 import fabric from 'fabric/dist/fabric.require';
-import $ from 'jquery';
 import Invoker from '../src/js/invoker';
@@ -21,3 +20,3 @@ import commandFactory from '../src/js/factory/command';
     beforeEach(() => {
-        graphics = new Graphics($('<canvas>'));
+        graphics = new Graphics(document.createElement('canvas'));
         invoker = new Invoker();
@@ -24,0 +23,0 @@ mockImage = new fabric.Image();

test/drawingMode.spec.js

@@ -5,3 +5,2 @@ /**
  */
-import $ from 'jquery';
 import ImageEditor from '../src/js/imageEditor';
@@ -14,3 +13,3 @@
     beforeEach(done => {
-        imageEditor = new ImageEditor($('<div></div>'), {
+        imageEditor = new ImageEditor(document.createElement('div'), {
             cssMaxWidth: 700,
@@ -17,0 +16,0 @@ cssMaxHeight: 500

test/filter.spec.js

@@ -13,3 +13,3 @@ /**
     beforeAll(done => {
-        imageEditor = new ImageEditor($('<div></div>'), {
+        imageEditor = new ImageEditor(document.createElement('div'), {
             cssMaxWidth: 700,
@@ -16,0 +16,0 @@ cssMaxHeight: 500

test/graphics.spec.js

@@ -7,3 +7,2 @@ /**
 import fabric from 'fabric/dist/fabric.require';
-import $ from 'jquery';
 import Graphics from '../src/js/graphics';
@@ -21,3 +20,3 @@ import consts from '../src/js/consts';
     beforeEach(() => {
-        graphics = new Graphics($('<canvas>'), {
+        graphics = new Graphics(document.createElement('canvas'), {
             cssMaxWidth,
@@ -24,0 +23,0 @@ cssMaxHeight

test/promiseApi.spec.js

@@ -5,3 +5,2 @@ /**
  */
-import $ from 'jquery';
 import ImageEditor from '../src/js/imageEditor';
@@ -14,3 +13,3 @@
     beforeAll(() => {
-        imageEditor = new ImageEditor($('<div></div>'), {
+        imageEditor = new ImageEditor(document.createElement('div'), {
             cssMaxWidth: 700,
@@ -17,0 +16,0 @@ cssMaxHeight: 500

test/types/tsconfig.json

 {
     "compilerOptions": {
         "noEmit": true,
-        "noImplicitAny": false,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true
+        "noImplicitAny": false
     },
@@ -8,0 +6,0 @@ "include": [

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4755371

increased by0.09%

Dev dependency count

39

decreased by-2.5%

Lines of code

38032

increased by0.24%

No dependency changes