react-design-editor 0.0.52 → 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/EventHandler.js

@@ -283,10 +283,10 @@ class EventHandler {
             const delta = event.e.deltaY;
             let zoomRatio = this.handler.canvas.getZoom();
             if (delta > 0) {
-                zoomRatio -= 0.05;
+                zoomRatio -= this.handler.zoomStep;
             }
             else {
-                zoomRatio += 0.05;
+                zoomRatio += this.handler.zoomStep;
             }
             this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(this.handler.canvas.getWidth() / 2, this.handler.canvas.getHeight() / 2), zoomRatio);
             event.e.preventDefault();
@@ -619,6 +619,7 @@ class EventHandler {
                                     const createdObj = this.handler.add(obj, false, true);
                                     this.handler.canvas.setActiveObject(createdObj);
                                     this.handler.canvas.requestRenderAll();
+                                    this.handler.onAdd?.(createdObj);
                                 }
                                 else {
                                     const nodes = [];
@@ -649,6 +650,7 @@ class EventHandler {
                                     });
                                     this.handler.canvas.setActiveObject(activeSelection);
                                     this.handler.canvas.requestRenderAll();
+                                    this.handler.onAdd?.(activeSelection);
                                 }
                                 if (!this.handler.transactionHandler.active) {
                                     this.handler.transactionHandler.save('paste');

package/lib/handlers/Handler.d.ts

@@ -104,6 +104,11 @@ export interface HandlerOption {
      * @type {number}
      */
     maxZoom?: number;
+    /**
+     * Zoom ratio step
+     * @type {number}
+     */
+    zoomStep?: number;
     /**
      * Workarea option
      * @type {WorkareaOption}
@@ -179,6 +184,7 @@ declare class Handler implements HandlerOptions {
     interactionMode: InteractionMode;
     minZoom: number;
     maxZoom: number;
+    zoomStep: number;
     propertiesToInclude?: string[];
     workareaOption?: WorkareaOption;
     canvasOption?: CanvasOption;

package/lib/handlers/Handler.js

@@ -17,6 +17,7 @@ const constants_1 = require("../constants");
  */
 class Handler {
     constructor(options) {
+        this.zoomStep = 0.05;
         this.propertiesToInclude = constants_1.defaults.propertiesToInclude;
         this.workareaOption = constants_1.defaults.workareaOption;
         this.canvasOption = constants_1.defaults.canvasOption;
@@ -43,6 +44,7 @@ class Handler {
             this.interactionMode = options.interactionMode;
             this.minZoom = options.minZoom;
             this.maxZoom = options.maxZoom;
+            this.zoomStep = options.zoomStep || 0.05;
             this.zoomEnabled = options.zoomEnabled;
             this.width = options.width;
             this.height = options.height;
@@ -88,7 +90,7 @@ class Handler {
             this.animationHandler = new _1.AnimationHandler(this);
             this.contextmenuHandler = new _1.ContextmenuHandler(this);
             this.tooltipHandler = new _1.TooltipHandler(this);
-            this.zoomHandler = new _1.ZoomHandler(this);
+            this.zoomHandler = new _1.ZoomHandler(this, this.zoomStep);
             this.interactionHandler = new _1.InteractionHandler(this);
             this.transactionHandler = new _1.TransactionHandler(this);
             this.gridHandler = new _1.GridHandler(this);
@@ -356,6 +358,7 @@ class Handler {
                     obj.set('src', source);
                     resolve(obj.setSrc(source, () => this.canvas.renderAll(), {
                         dirty: true,
+                        crossOrigin: "anonymous"
                     }));
                 }
             });
@@ -1474,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,
@@ -1492,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/lib/handlers/ZoomHandler.d.ts

@@ -1,9 +1,10 @@
 import { fabric } from 'fabric';
-import Handler from './Handler';
 import { FabricObject } from '../utils';
+import Handler from './Handler';
 declare class ZoomHandler {
     handler?: Handler;
-    constructor(handler: Handler);
+    private _zoomStep?;
+    constructor(handler: Handler, zoomStep?: number);
     /**
      * Zoom to point
      *

package/lib/handlers/ZoomHandler.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 class ZoomHandler {
-    constructor(handler) {
+    constructor(handler, zoomStep = 0.05) {
         /**
          * Zoom to point
          *
@@ -74,7 +74,7 @@ class ZoomHandler {
          */
         this.zoomIn = () => {
             let zoomRatio = this.handler.canvas.getZoom();
-            zoomRatio += 0.05;
+            zoomRatio += this._zoomStep;
             const center = this.handler.canvas.getCenter();
             this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
         };
@@ -84,7 +84,7 @@ class ZoomHandler {
          */
         this.zoomOut = () => {
             let zoomRatio = this.handler.canvas.getZoom();
-            zoomRatio -= 0.05;
+            zoomRatio -= this._zoomStep;
             const center = this.handler.canvas.getCenter();
             this.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), zoomRatio);
         };
@@ -138,6 +138,7 @@ class ZoomHandler {
             this.zoomToCenterWithObject(activeObject, zoomFit);
         };
         this.handler = handler;
+        this._zoomStep = zoomStep;
     }
 }
 exports.default = ZoomHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.52",
+	"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",