@syncfusion/ej2-image-editor 23.1.39 → 23.1.41

package/dist/es6/ej2-image-editor.es5.js

@@ -15280,7 +15280,8 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.rotateFlipColl = obj['collection'];
             if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
                 this.isPreventSelect = true;
-                parent.select('custom');
+                parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                    value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
                 this.isPreventSelect = false;
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 this.prevZoomValue = parent.zoomSettings.zoomFactor;
@@ -15547,7 +15548,8 @@ var Transform = /** @__PURE__ @class */ (function () {
         parent.rotateFlipColl = obj['collection'];
         if (parent.cropObj.activeObj.shape && !this.isPreventSelect) {
             this.isPreventSelect = true;
-            parent.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
             this.isPreventSelect = false;
             parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
             this.prevZoomValue = parent.zoomSettings.zoomFactor;
@@ -17099,13 +17101,17 @@ var Transform = /** @__PURE__ @class */ (function () {
         }
         else if (parent.img.srcWidth === parent.baseImgCanvas.width && parent.img.srcHeight === parent.baseImgCanvas.height) {
             parent.currSelectionPoint = null;
-            parent.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         if (isNullOrUndefined(parent.currSelectionPoint)) {
-            parent.select('custom', parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: parent.img.destLeft, startY: parent.img.destTop,
+                    width: parent.img.destWidth, height: parent.img.destHeight } });
         }
         else {
-            parent.select('custom');
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         width = parent.activeObj.activePoint.width * widthRatio;
         height = parent.activeObj.activePoint.height * heightRatio;
@@ -17113,7 +17119,8 @@ var Transform = /** @__PURE__ @class */ (function () {
         var sy = (parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2)) - (height / 2);
         parent.transform.defaultZoomFactor = 0;
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: true } });
-        parent.select('custom', sx, sy, width, height);
+        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: 'custom', startX: sx, startY: sy, width: width, height: height } });
         parent.notify('draw', { prop: 'setResizeSelect', value: { bool: false } });
         parent.isCropToolbar = true;
         parent.crop();
@@ -17580,7 +17587,8 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                         }
                     }
                     parent.updateCropTransformItems();
-                    parent.select('custom');
+                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                        value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
                     if (parent.isCircleCrop) {
                         parent.isCircleCrop = false;
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
@@ -18458,6 +18466,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.onPropertyChanged = function (newProperties, oldProperties) {
+        var indexObj;
         for (var _i = 0, _a = Object.keys(newProperties); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -18481,9 +18490,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'height':
                     this.element.style.height = newProperties.height;
+                    this.update();
                     break;
                 case 'width':
                     this.element.style.width = newProperties.width;
+                    this.update();
                     break;
                 case 'theme':
                     if (newProperties.theme) {
@@ -18495,6 +18506,13 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                         }
                         this.upperContext.strokeStyle = this.themeColl[this.theme]['primaryColor'];
                         this.upperContext.fillStyle = this.themeColl[this.theme]['secondaryColor'];
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'finetuneSettings':
@@ -18506,8 +18524,13 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 case 'locale':
                     if (newProperties.locale) {
                         this.notify('toolbar', { prop: 'setLocale', onPropertyChange: false, value: { locale: newProperties.locale } });
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'allowUndoRedo':
@@ -18517,18 +18540,47 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     else {
                         this.allowUndoRedo = false;
                     }
-                    this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                            isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    if (isBlazor()) {
+                        this.updateToolbar(this.element, 'imageLoaded');
+                    }
+                    else {
+                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                    }
                     break;
                 case 'showQuickAccessToolbar':
                     if (newProperties.showQuickAccessToolbar) {
                         this.showQuickAccessToolbar = true;
-                        this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
-                        this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'create-qa-toolbar', onPropertyChange: false });
+                        }
+                        indexObj = { freehandSelectedIndex: null };
+                        this.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                        if (this.activeObj.shape) {
+                            if (isBlazor()) {
+                                this.updateToolbar(this.element, 'quickAccessToolbar', this.activeObj.shape);
+                            }
+                            else {
+                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                            }
+                        }
+                        else if (indexObj['freehandSelectedIndex']) {
+                            if (isBlazor()) {
+                                this.updateToolbar(this.element, 'quickAccessToolbar', 'pen');
+                            }
+                            else {
+                                this.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                            }
+                        }
                     }
                     else {
                         this.showQuickAccessToolbar = false;
-                        this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'destroyQuickAccessToolbar');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                        }
                     }
                     break;
                 case 'zoomSettings':
@@ -18538,12 +18590,22 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     if (isNullOrUndefined(this.zoomSettings.zoomTrigger)) {
                         this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar |
                             ZoomTrigger.Commands);
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     else if ((newProperties.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-                        this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     break;
                 case 'selectionSettings':
@@ -18555,6 +18617,38 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     break;
+                case 'toolbar':
+                    if (newProperties.toolbar) {
+                        this.toolbar = newProperties.toolbar;
+                        if (isBlazor()) {
+                            this.updateToolbar(this.element, 'imageLoaded');
+                        }
+                        else {
+                            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
+                    }
+                    break;
+                case 'toolbarTemplate':
+                    if (newProperties.toolbarTemplate) {
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'destroy-bottom-toolbar', onPropertyChange: false });
+                            this.notify('toolbar', { prop: 'destroy-top-toolbar', onPropertyChange: false });
+                            this.element.appendChild(this.createElement('div', {
+                                id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
+                            }));
+                            this.toolbarTemplateFn();
+                        }
+                    }
+                    break;
+                case 'quickAccessToolbarTemplate':
+                    if (newProperties.quickAccessToolbarTemplate) {
+                        if (!isBlazor()) {
+                            this.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                            this.quickAccessToolbarTemplateFn();
+                        }
+                    }
+                    break;
             }
         }
     };
@@ -18639,15 +18733,20 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var uploadObj = new Uploader({
             dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            multiple: false,
             selected: function (args) {
                 if (args.event.type === 'change' || args.event.type === 'drop') {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var type = args.filesData[0].type;
-                    if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+                    var errType = 'unsupported';
+                    if ((args.event.type === 'change' || (args.event.type === 'drop' && args.event.dataTransfer.files.length === 1)) && (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg')) {
                         _this.notify('draw', { prop: 'fileSelect', value: { inputElement: _this.element.querySelector('#' + _this.element.id + '_dropfileUpload'), args: args } });
                     }
                     else {
-                        _this.showDialogPopup();
+                        if (args.event.type === 'drop' && args.event.dataTransfer.files.length > 1) {
+                            errType = 'multi-select-image';
+                        }
+                        _this.showDialogPopup(errType);
                     }
                 }
             }
@@ -18657,20 +18756,39 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.dlgCloseBtnClick = function () {
         getComponent(document.getElementById(this.element.id + '_dialog'), 'dialog').destroy();
     };
-    ImageEditor.prototype.showDialogPopup = function () {
+    /**
+     * Show dialog popup for unsupported files.
+     *
+     * @param { string } type - Specifies the type of error.
+     * @hidden
+     * @returns {void}.
+     */
+    ImageEditor.prototype.showDialogPopup = function (type) {
+        var content = '';
         this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
-        var headerObj = { key: 'AlertDialogHeader' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
-        var contentObj = { key: 'AlertDialogContent' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
-        var supportObj = { key: 'SupportText' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        var headerObj;
         var okObj = { key: 'OK' };
         this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: okObj } });
+        if (type === 'multi-select-image') {
+            headerObj = { key: 'ImageErrorDialogHeader' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+            var contentObj = { key: 'ImageErrorDialogContent' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+            content = '<span>' + contentObj['value'] + '</span>';
+        }
+        else {
+            headerObj = { key: 'AlertDialogHeader' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+            var contentObj = { key: 'AlertDialogContent' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+            var supportObj = { key: 'SupportText' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+            content = '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>';
+        }
         var dialog = new Dialog({
             header: headerObj['value'],
             closeOnEscape: true,
-            content: '<span>' + contentObj['value'] + ' ' + supportObj['value'] + '<b> JPG, PNG, and SVG</b></span>',
+            content: content,
             target: document.getElementById('target'),
             width: '285px',
             isModal: true,
@@ -19116,6 +19234,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.select = function (type, startX, startY, width, height) {
         this.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: type, startX: startX, startY: startY, width: width, height: height } });
+        this.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: type, startX: startX, startY: startY, width: width, height: height } });
     };
     /**
      * Enable or disable a freehand drawing option in an Image Editor.
@@ -19538,10 +19658,18 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.drawFrame = function (frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
         var isFrame = false;
         var obj = { frameChangeEventArgs: null };
+        color = color ? color : '#fff';
+        gradientColor = gradientColor ? gradientColor : '';
+        size = size ? size : 20;
+        inset = inset ? inset : 0;
+        offset = offset ? offset : 0;
+        borderRadius = borderRadius ? borderRadius : 0;
+        frameLineStyle = frameLineStyle ? frameLineStyle : FrameLineStyle.Solid;
+        lineCount = lineCount ? lineCount : 0;
         var prevFrameSettings = { type: this.toPascalCase(this.frameObj.type), color: this.frameObj.color,
             gradientColor: this.frameObj.gradientColor, size: this.frameObj.size, inset: this.frameObj.inset,
-            offset: this.frameObj.offset, borderRadius: this.frameObj.radius, frameLineStyle: this.toPascalCase(this.frameObj.border),
-            lineCount: this.frameObj.amount };
+            offset: this.frameObj.offset, borderRadius: this.frameObj.radius,
+            frameLineStyle: this.toPascalCase(this.frameObj.border), lineCount: this.frameObj.amount };
         extend(this.tempFrameObj, this.frameObj);
         this.tempFrameZoomLevel = this.transform.zoomFactor;
         this.frameDestPoints = extend({}, this.img, {}, true);
@@ -19549,6 +19677,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('toolbar', { prop: 'frameToolbarClick' });
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.performFrameClick();
         }
         this.frameObj.type = frameType.toLowerCase();
@@ -21485,7 +21614,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             AlertDialogHeader: 'Unsupported file',
             AlertDialogContent: 'The dropped file is unsupported.',
             Yes: 'Yes',
-            No: 'No'
+            No: 'No',
+            ImageErrorDialogHeader: 'Image Selection Error',
+            ImageErrorDialogContent: 'Please select only one image to open.'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
@@ -21695,7 +21826,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -21712,6 +21843,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     tooltipText: this.l10n.getConstant('Browse'),
                     template: new Uploader({
                         allowedExtensions: '.jpg, .jpeg, .png,.svg',
+                        multiple: false,
                         selected: function () {
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
@@ -21785,7 +21917,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         if (parent.showQuickAccessToolbar) {
             var toolbarItems = { cssClass: 'e-image-upload', align: 'Left', type: 'Input',
-                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) };
+                tooltipText: this.l10n.getConstant('Browse'), template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) };
             if (isNullOrUndefined(this.defToolbarItems)) {
                 this.defToolbarItems = [];
             }
@@ -21872,7 +22004,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
-            toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg' }) });
+            toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
         if (parent.allowUndoRedo && !isResize) {
@@ -22298,7 +22430,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.fileSelect = function (inputElement, args) {
-        this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
+        var type = inputElement.files[0].type.split('/')[1];
+        if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+            this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
+        }
+        else {
+            this.parent.showDialogPopup();
+        }
     };
     ToolbarModule.prototype.renderAnnotationBtn = function (isContextualToolbar) {
         var _this = this;
@@ -22704,7 +22842,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                 }
                 if (document.getElementById(parent.element.id + '_cropBtn')) {
-                    parent.select(document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase());
+                    parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                        value: { type: document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase(),
+                            startX: null, startY: null, width: null, height: null } });
                 }
             }
         });
@@ -24620,7 +24760,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var text = args.item.id;
         this.currentToolbar = 'crop';
         parent.currSelectionPoint = null;
-        parent.select(text);
+        parent.notify('draw', { prop: 'select', onPropertyChange: false,
+            value: { type: text, startX: null, startY: null, width: null, height: null } });
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };