@syncfusion/ej2-image-editor 24.2.4 → 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/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.js

@@ -4648,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;
@@ -4700,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 } });
             }
         });
     };