@syncfusion/ej2-image-editor 24.2.3 → 24.2.5

package/src/image-editor/action/shape.js

@@ -793,13 +793,22 @@ var Shape = /** @class */ (function () {
             }
             parent.activeObj.strokeSettings.strokeColor = shapeSettings.strokeColor;
             parent.activeObj.strokeSettings.fillColor = shapeSettings.fillColor;
+            parent.activeObj.strokeSettings.strokeWidth = shapeSettings.strokeWidth;
             parent.activeObj.opacity = shapeSettings.opacity;
             if (isNullOrUndefined(shapeSettings.degree)) {
                 shapeSettings.degree = 0;
             }
             switch (parent.activeObj.shape) {
                 case 'ellipse':
-                    parent.activeObj.activePoint.width = shapeSettings.radius * 2;
+                    if (isBlazor()) {
+                        parent.activeObj.activePoint.width = shapeSettings.radius;
+                    }
+                    else {
+                        parent.activeObj.activePoint.width = shapeSettings.radiusX * 2;
+                        parent.activeObj.activePoint.height = shapeSettings.radiusY * 2;
+                        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                    }
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
@@ -807,18 +816,35 @@ var Shape = /** @class */ (function () {
                 case 'line':
                 case 'arrow':
                     parent.activeObj.activePoint.width = shapeSettings.length;
+                    if (!isBlazor()) {
+                        parent.activeObj.activePoint.endX = shapeSettings.endX;
+                        parent.activeObj.activePoint.endY = shapeSettings.endY;
+                        parent.activeObj.activePoint.width = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+                        parent.activeObj.activePoint.height = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
+                        if (parent.activeObj.shape === 'arrow') {
+                            parent.activeObj.start = this.getArrowType(shapeSettings.arrowHead);
+                            parent.activeObj.end = this.getArrowType(shapeSettings.arrowTail);
+                        }
+                    }
                     break;
                 case 'text':
                     parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
                     parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
                     parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
                     parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                    if (shapeSettings.degree) {
+                        parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
+                    }
                     break;
                 case 'rectangle':
                 case 'image':
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
+                    // Prevented setting image src as it cannot be set in canvas
+                    break;
+                case 'path':
+                    parent.activeObj.pointColl = shapeSettings.points;
                     break;
             }
             if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
@@ -2853,18 +2879,31 @@ var Shape = /** @class */ (function () {
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.fillColor = obj.strokeSettings.fillColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'ellipse':
                 shapeDetails.radius = obj.activePoint.width / 2;
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.fillColor = obj.strokeSettings.fillColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.radiusX = obj.activePoint.width / 2;
+                shapeDetails.radiusY = obj.activePoint.height / 2;
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'line':
             case 'arrow':
                 shapeDetails.length = obj.activePoint.width;
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.endX = obj.activePoint.endX;
+                shapeDetails.endY = obj.activePoint.endY;
+                if (obj.shape === 'arrow') {
+                    var arrowObj = { type: null };
+                    parent.notify('selection', { prop: 'getArrowType', onPropertyChange: false, value: { type: obj.start, obj: arrowObj } });
+                    shapeDetails.arrowHead = arrowObj['type'];
+                    parent.notify('selection', { prop: 'getArrowType', onPropertyChange: false, value: { type: obj.end, obj: arrowObj } });
+                    shapeDetails.arrowTail = arrowObj['type'];
+                }
                 break;
             case 'text':
                 shapeDetails.text = obj.keyHistory;
@@ -2878,10 +2917,26 @@ var Shape = /** @class */ (function () {
                 if (obj.textSettings.italic) {
                     shapeDetails.fontStyle.push('italic');
                 }
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
                 break;
             case 'path':
                 shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
                 shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                shapeDetails.points = obj.pointColl;
+                break;
+            case 'image':
+                shapeDetails.imageData = obj.imageCanvas.toDataURL();
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+                shapeDetails.width = obj.activePoint.width;
+                shapeDetails.height = obj.activePoint.height;
+                shapeDetails.opacity = obj.opacity;
+                break;
+            case 'image':
+                shapeDetails.imageData = obj.imageCanvas.toDataURL();
+                shapeDetails.degree = obj.rotatedAngle * (180 / Math.PI);
+                shapeDetails.width = obj.activePoint.width;
+                shapeDetails.height = obj.activePoint.height;
+                shapeDetails.opacity = obj.opacity;
                 break;
         }
         return shapeDetails;

package/src/image-editor/action/undo-redo.js

@@ -267,6 +267,7 @@ var UndoRedo = /** @class */ (function () {
     UndoRedo.prototype.undo = function () {
         var parent = this.parent;
         this.cancelCropSelection();
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep > 0) {
                 this.refreshToolbarActions();
@@ -405,6 +406,7 @@ var UndoRedo = /** @class */ (function () {
     UndoRedo.prototype.redo = function () {
         var parent = this.parent;
         this.cancelCropSelection();
+        parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
                 this.refreshToolbarActions();

package/src/image-editor/base/image-editor.js

@@ -695,7 +695,6 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.add(this.lowerCanvas, 'mousedown', this.canvasMouseDownHandler, this);
         EventHandler.add(this.lowerCanvas, 'mousemove', this.canvasMouseMoveHandler, this);
         EventHandler.add(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler, this);
-        EventHandler.add(document, 'mouseup', this.canvasMouseUpHandler, this);
         EventHandler.add(this.upperCanvas, 'touchstart', this.touchStartHandler, this);
         EventHandler.add(this.lowerCanvas, 'touchstart', this.touchStartHandler, this);
         EventHandler.add(this.lowerCanvas, 'mousewheel DOMMouseScroll', this.handleScroll, this);
@@ -722,7 +721,6 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.remove(this.lowerCanvas, 'mousedown', this.canvasMouseDownHandler);
         EventHandler.remove(this.lowerCanvas, 'mousemove', this.canvasMouseMoveHandler);
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
-        EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(this.upperCanvas, 'touchstart', this.touchStartHandler);
         EventHandler.remove(this.lowerCanvas, 'touchstart', this.touchStartHandler);
         EventHandler.remove(this.lowerCanvas, 'mousewheel DOMMouseScroll', this.handleScroll);
@@ -735,7 +733,6 @@ var ImageEditor = /** @class */ (function (_super) {
         this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
-        var _this = this;
         this.element.style.boxSizing = 'border-box';
         var obj = { toolbarHeight: 0 };
         this.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
@@ -821,10 +818,16 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperCanvas.style.cursor = this.cursor = 'default';
         this.upperCanvas.style.display = 'block';
         this.upperContext = this.upperCanvas.getContext('2d');
-        document.getElementById(this.element.id + '_dropBrowse').onclick = function () {
-            _this.element.querySelector('#' + _this.element.id + '_dropfileUpload').click();
+        dropAnchorElement.addEventListener('click', function (e) {
+            e.preventDefault();
+            dropUploader.click();
             return false;
-        };
+        });
+        minDropAnchorElem.addEventListener('click', function (e) {
+            e.preventDefault();
+            dropUploader.click();
+            return false;
+        });
     };
     ImageEditor.prototype.touchStartHandler = function (e) {
         this.notify('selection', { prop: 'touchStartHandler', onPropertyChange: false, value: { e: e } });

package/src/image-editor/base/interface.d.ts

@@ -1,4 +1,4 @@
-import { FileType, ShapeType, ImageFinetuneOption, ImageFilterOption, FrameType, FrameLineStyle } from '../index';
+import { FileType, ShapeType, ImageFinetuneOption, ImageFilterOption, FrameType, FrameLineStyle, ArrowheadType } from '../index';
 import { ItemModel } from '@syncfusion/ej2-navigations';
 /**
  * This interface is used to specify settings for image finetuning operations, including minimum and maximum values, as well as default values.
@@ -404,7 +404,7 @@ export interface ShapeSettings {
      */
     color?: string;
     /**
-     * Returns the points collection of freehand drawing.
+     * Returns the points collection of freehand drawing and path annotation.
      */
     points?: Point[];
     /**
@@ -415,6 +415,30 @@ export interface ShapeSettings {
      * Returns the imageData of the image annotation.
      */
     imageData?: string | ImageData;
+    /**
+     * Returns the width radius of the ellipse shape.
+     */
+    radiusX?: number;
+    /**
+     * Returns the height radius of the ellipse shape.
+     */
+    radiusY?: number;
+    /**
+     * Returns the end x position of line and arrow.
+     */
+    endX?: number;
+    /**
+     * Returns the end y position of line and arrow.
+     */
+    endY?: number;
+    /**
+     * Returns the head type of an arrow.
+     */
+    arrowHead?: ArrowheadType;
+    /**
+     * Returns the tail type of an arrow.
+     */
+    arrowTail?: ArrowheadType;
 }
 /**
  * The interface which contains the properties for filter option for the image.

package/src/image-editor/renderer/toolbar.d.ts

@@ -136,5 +136,9 @@ export declare class ToolbarModule {
     private refreshMainToolbar;
     private destroySubComponents;
     private setInitialShapeSettings;
+    private isToolbarString;
+    private excludeItems;
+    private isSameIndex;
+    private getIndex;
     getModuleName(): string;
 }

package/src/image-editor/renderer/toolbar.js

@@ -1665,7 +1665,13 @@ var ToolbarModule = /** @class */ (function () {
         var args = { toolbarType: parent.activeObj.shape ? parent.activeObj.shape : 'shapes',
             toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -1675,8 +1681,12 @@ var ToolbarModule = /** @class */ (function () {
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
                 if (parent.activeObj.shape === 'arrow') {
-                    _this.createStartBtn();
-                    _this.createEndBtn();
+                    if (items.some(function (item) { return item.toLowerCase().indexOf('start') > -1; })) {
+                        _this.createStartBtn();
+                    }
+                    if (items.some(function (item) { return item.toLowerCase().indexOf('end') > -1; })) {
+                        _this.createEndBtn();
+                    }
                 }
                 _this.wireZoomBtnEvents();
                 if (!Browser.isDevice) {
@@ -1840,24 +1850,24 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.createShapeBtn = function (items) {
         var parent = this.parent;
         var id = parent.element.id;
-        var strokeWidthItems = [
-            { id: '1', text: this.l10n.getConstant('XSmall') },
-            { id: '2', text: this.l10n.getConstant('Small') },
-            { id: '3', text: this.l10n.getConstant('Medium') },
-            { id: '4', text: this.l10n.getConstant('Large') },
-            { id: '5', text: this.l10n.getConstant('XLarge') }
-        ];
-        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse')) {
-            strokeWidthItems = [
-                { id: '1', text: this.l10n.getConstant('NoOutline') },
-                { id: '2', text: this.l10n.getConstant('XSmall') },
-                { id: '3', text: this.l10n.getConstant('Small') },
-                { id: '4', text: this.l10n.getConstant('Medium') },
-                { id: '5', text: this.l10n.getConstant('Large') },
-                { id: '6', text: this.l10n.getConstant('XLarge') }
-            ];
-        }
         if (items.indexOf('strokeWidth') > -1) {
+            var strokeWidthItems = [
+                { id: '1', text: this.l10n.getConstant('XSmall') },
+                { id: '2', text: this.l10n.getConstant('Small') },
+                { id: '3', text: this.l10n.getConstant('Medium') },
+                { id: '4', text: this.l10n.getConstant('Large') },
+                { id: '5', text: this.l10n.getConstant('XLarge') }
+            ];
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse')) {
+                strokeWidthItems = [
+                    { id: '1', text: this.l10n.getConstant('NoOutline') },
+                    { id: '2', text: this.l10n.getConstant('XSmall') },
+                    { id: '3', text: this.l10n.getConstant('Small') },
+                    { id: '4', text: this.l10n.getConstant('Medium') },
+                    { id: '5', text: this.l10n.getConstant('Large') },
+                    { id: '6', text: this.l10n.getConstant('XLarge') }
+                ];
+            }
             var strokeWidthBtn = document.getElementById(id + '_borderWidthBtn');
             var spanElem_1 = document.createElement('span');
             spanElem_1.innerHTML = this.l10n.getConstant('XSmall');
@@ -2074,7 +2084,13 @@ var ToolbarModule = /** @class */ (function () {
         }
         var args = { toolbarType: 'text', toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -2560,7 +2576,8 @@ var ToolbarModule = /** @class */ (function () {
                 template: '<button id="' + id + '_penColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', cssClass: 'top-icon e-size',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: id + '_pen_strokewidth',
+                cssClass: 'top-icon e-size',
                 tooltipText: this.l10n.getConstant('StrokeWidth'),
                 align: 'Center', type: 'Input', template: '<button id="' + id + '_penStrokeWidth"></button>' });
         }
@@ -2597,7 +2614,13 @@ var ToolbarModule = /** @class */ (function () {
         }
         var args = { toolbarType: 'pen', toolbarItems: this.defToolbarItems };
         parent.trigger('toolbarUpdating', args);
-        this.defToolbarItems = args.toolbarItems;
+        if (this.isToolbarString(args.toolbarItems)) {
+            items = args.toolbarItems;
+            this.excludeItems(args.toolbarItems);
+        }
+        else {
+            this.defToolbarItems = args.toolbarItems;
+        }
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -3739,6 +3762,8 @@ var ToolbarModule = /** @class */ (function () {
             var ctx = void 0;
             parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
             var type = args.item.id.replace(id + '_', '').toLowerCase();
+            var left = void 0;
+            var right = void 0;
             switch (type) {
                 case 'duplicate':
                     if (!parent.element.querySelector('#' + id + '_duplicate').classList.contains('e-disabled')) {
@@ -3788,8 +3813,10 @@ var ToolbarModule = /** @class */ (function () {
                     break;
                 case 'rotleft':
                 case 'rotright':
-                    if (!parent.element.querySelector('#' + id + '_rotLeft').classList.contains('e-disabled') ||
-                        !parent.element.querySelector('#' + id + '_rotRight').classList.contains('e-disabled')) {
+                    left = parent.element.querySelector('#' + id + '_rotLeft');
+                    right = parent.element.querySelector('#' + id + '_rotRight');
+                    if ((left && !left.classList.contains('e-disabled')) ||
+                        (right && !right.classList.contains('e-disabled'))) {
                         parent.rotateImage(args.item.id.replace(id + '_', '').toLowerCase());
                     }
                     break;
@@ -4621,6 +4648,7 @@ var ToolbarModule = /** @class */ (function () {
             step: step, width: Browser.isDevice ? '180px' : (type === 'straighten' ? '200px' : '300px'),
             cssClass: 'e-slider',
             change: function (args) {
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: true } });
                 if (type === 'transparency') {
                     if (parent.activeObj.shape) {
                         var prevCropObj = void 0;
@@ -4673,6 +4701,7 @@ var ToolbarModule = /** @class */ (function () {
                     parent.notify('selection', { prop: 'setSliding', value: { bool: false } });
                     parent.notify('draw', { prop: 'redrawDownScale' });
                 }
+                parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
             }
         });
     };
@@ -4919,6 +4948,80 @@ var ToolbarModule = /** @class */ (function () {
         parent.activeObj.textFlip = parent.transform.currFlipState;
         parent.activeObj.flipObjColl = [];
     };
+    ToolbarModule.prototype.isToolbarString = function (items) {
+        var isString = false;
+        for (var i = 0; i < items.length; i++) {
+            if (typeof (items[i]) === 'string') {
+                isString = true;
+                break;
+            }
+        }
+        return isString;
+    };
+    ToolbarModule.prototype.excludeItems = function (items) {
+        var indexArr = [];
+        for (var i = 0; i < items.length; i++) {
+            var index = this.getIndex(items[i]);
+            if (index !== -1) {
+                indexArr.push(index);
+            }
+        }
+        var negativeIndexArr = [];
+        for (var i = 0; i < this.defToolbarItems.length; i++) {
+            if (this.defToolbarItems[i].align === 'Center' && !this.isSameIndex(indexArr, i) &&
+                this.defToolbarItems[i].id !== this.parent.element.id + '_' + 'annotation') {
+                negativeIndexArr.push(i);
+            }
+        }
+        for (var i = negativeIndexArr.length - 1; i >= 0; i--) {
+            this.defToolbarItems.splice(negativeIndexArr[i], 1);
+        }
+    };
+    ToolbarModule.prototype.isSameIndex = function (indexArr, index) {
+        for (var i = 0; i < indexArr.length; i++) {
+            if (indexArr[i] === index) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ToolbarModule.prototype.getIndex = function (item) {
+        var index = -1;
+        var isFontColor = false;
+        if (item === 'rotateLeft') {
+            item = 'rotLeft';
+        }
+        if (item === 'rotateRight') {
+            item = 'rotRight';
+        }
+        if (item === 'horizontalFlip') {
+            item = 'hflip';
+        }
+        if (item === 'verticalFlip') {
+            item = 'vflip';
+        }
+        if (item === 'arrowStart') {
+            item = 'start';
+        }
+        if (item === 'arrowEnd') {
+            item = 'end';
+        }
+        if (item === 'fontColor') {
+            item = 'strokeColor';
+            isFontColor = true;
+        }
+        for (var i = 0; i < this.defToolbarItems.length; i++) {
+            var id = this.defToolbarItems[i].id;
+            if (id && id.toLowerCase().indexOf(item.toLowerCase()) !== -1) {
+                index = i;
+                break;
+            }
+        }
+        if (isFontColor) {
+            item = 'fontColor';
+        }
+        return index;
+    };
     ToolbarModule.prototype.getModuleName = function () {
         return 'toolbar-module';
     };