@syncfusion/ej2-image-editor 23.1.39 → 23.1.41

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

@@ -15254,7 +15254,8 @@ class Transform {
             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;
@@ -15520,7 +15521,8 @@ class Transform {
         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;
@@ -17069,13 +17071,17 @@ class Transform {
         }
         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;
@@ -17083,7 +17089,8 @@ class Transform {
         const 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();
@@ -17548,7 +17555,8 @@ class UndoRedo {
                         }
                     }
                     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);
@@ -18395,6 +18403,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @private
      */
     onPropertyChanged(newProperties, oldProperties) {
+        let indexObj;
         for (const prop of Object.keys(newProperties)) {
             switch (prop) {
                 case 'cssClass':
@@ -18417,9 +18426,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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) {
@@ -18431,6 +18442,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         }
                         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':
@@ -18442,8 +18460,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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':
@@ -18453,18 +18476,47 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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':
@@ -18474,12 +18526,22 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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':
@@ -18491,6 +18553,38 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                         }
                     }
                     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;
             }
         }
     }
@@ -18574,15 +18668,20 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const uploadObj = new Uploader({
             dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
+            multiple: false,
             selected: (args) => {
                 if (args.event.type === 'change' || args.event.type === 'drop') {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     const type = args.filesData[0].type;
-                    if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'svg') {
+                    let 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);
                     }
                 }
             }
@@ -18592,20 +18691,39 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     dlgCloseBtnClick() {
         getComponent(document.getElementById(this.element.id + '_dialog'), 'dialog').destroy();
     }
-    showDialogPopup() {
+    /**
+     * Show dialog popup for unsupported files.
+     *
+     * @param { string } type - Specifies the type of error.
+     * @hidden
+     * @returns {void}.
+     */
+    showDialogPopup(type) {
+        let content = '';
         this.element.querySelector('#' + this.element.id + '_dialog').style.display = 'block';
-        const headerObj = { key: 'AlertDialogHeader' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
-        const contentObj = { key: 'AlertDialogContent' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
-        const supportObj = { key: 'SupportText' };
-        this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: supportObj } });
+        let headerObj;
         const 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 } });
+            const 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 } });
+            const contentObj = { key: 'AlertDialogContent' };
+            this.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+            const 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>';
+        }
         const 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,
@@ -19050,6 +19168,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     select(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.
@@ -19471,11 +19591,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     drawFrame(frameType, color, gradientColor, size, inset, offset, borderRadius, frameLineStyle, lineCount) {
         let isFrame = false;
-        let obj = { frameChangeEventArgs: null };
+        const 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;
         const 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);
@@ -19483,6 +19611,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('toolbar', { prop: 'frameToolbarClick' });
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.performFrameClick();
         }
         this.frameObj.type = frameType.toLowerCase();
@@ -21416,7 +21545,9 @@ class ToolbarModule {
             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);
     }
@@ -21625,7 +21756,7 @@ class ToolbarModule {
                 id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
             const 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 = [];
             }
@@ -21642,6 +21773,7 @@ class ToolbarModule {
                     tooltipText: this.l10n.getConstant('Browse'),
                     template: new Uploader({
                         allowedExtensions: '.jpg, .jpeg, .png,.svg',
+                        multiple: false,
                         selected: () => {
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
@@ -21715,7 +21847,7 @@ class ToolbarModule {
         const parent = this.parent;
         if (parent.showQuickAccessToolbar) {
             const 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 = [];
             }
@@ -21800,7 +21932,7 @@ class ToolbarModule {
         const parent = this.parent;
         const 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) {
@@ -22225,7 +22357,13 @@ class ToolbarModule {
         }
     }
     fileSelect(inputElement, args) {
-        this.parent.notify('draw', { prop: 'fileSelect', value: { inputElement: inputElement, args: args } });
+        const 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();
+        }
     }
     renderAnnotationBtn(isContextualToolbar) {
         const parent = this.parent;
@@ -22628,7 +22766,9 @@ class ToolbarModule {
                     }
                 }
                 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 } });
                 }
             }
         });
@@ -24537,7 +24677,8 @@ class ToolbarModule {
         const 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 } });
     }