react-design-editor 0.0.54 → 0.0.55

package/lib/handlers/AlignmentHandler.d.ts

@@ -10,6 +10,10 @@ declare class AlignmentHandler {
      * Align center at selection
      */
     center: () => void;
+    /**
+     * Align center at selection
+     */
+    middle: () => void;
     /**
      * Align right at selection
      */

package/lib/handlers/AlignmentHandler.js

@@ -28,7 +28,23 @@ class AlignmentHandler {
                 const activeSelection = activeObject;
                 activeSelection.forEachObject(obj => {
                     obj.set({
-                        left: 0 - ((obj.width * obj.scaleX) / 2),
+                        left: 0 - (obj.width * obj.scaleX) / 2,
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        /**
+         * Align center at selection
+         */
+        this.middle = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        top: 0 - (obj.width * obj.scaleX) / 2,
                     });
                     obj.setCoords();
                     this.handler.canvas.renderAll();
@@ -42,10 +58,10 @@ class AlignmentHandler {
             const activeObject = this.handler.canvas.getActiveObject();
             if (activeObject && activeObject.type === 'activeSelection') {
                 const activeSelection = activeObject;
-                const activeObjectLeft = (activeObject.width / 2);
+                const activeObjectLeft = activeObject.width / 2;
                 activeSelection.forEachObject(obj => {
                     obj.set({
-                        left: activeObjectLeft - (obj.width * obj.scaleX),
+                        left: activeObjectLeft - obj.width * obj.scaleX,
                     });
                     obj.setCoords();
                     this.handler.canvas.renderAll();

package/lib/handlers/Handler.js

@@ -358,6 +358,7 @@ class Handler {
                     obj.set('src', source);
                     resolve(obj.setSrc(source, () => this.canvas.renderAll(), {
                         dirty: true,
+                        crossOrigin: "anonymous"
                     }));
                 }
             });
@@ -1476,8 +1477,13 @@ class Handler {
         this.saveCanvasImage = (option = { name: 'New Image', format: 'png', quality: 1 }) => {
             // If it's zoomed out/in, the container will also include in the image
             // hence need to reset the zoom level.
-            this.zoomHandler.zoomOneToOne();
-            const { left, top, width, height } = this.workarea;
+            let { left, top, width, height, scaleX, scaleY } = this.workarea;
+            width = Math.ceil(width * scaleX);
+            height = Math.ceil(height * scaleY);
+            // cachedVT is used to reset the viewportTransform after the image is saved.
+            const cachedVT = this.canvas.viewportTransform;
+            // reset the viewportTransform to default (no zoom)
+            this.canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
             const dataUrl = this.canvas.toDataURL({
                 ...option,
                 left,
@@ -1494,6 +1500,8 @@ class Handler {
                 anchorEl.click();
                 anchorEl.remove();
             }
+            // reset the viewportTransform to previous value.
+            this.canvas.viewportTransform = cachedVT;
         };
         /**
          * Sets "angle" of an instance with centered rotation

package/lib/handlers/WorkareaHandler.js

@@ -274,7 +274,7 @@ class WorkareaHandler {
                         this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoom);
                         canvas.renderAll();
                         resolve(workarea);
-                    });
+                    }, { crossOrigin: 'anonymous' });
                 });
             };
             if (!source) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.54",
+	"version": "0.0.55",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",