react-design-editor 0.0.52 → 0.0.55

package/dist/react-design-editor.js

@@ -193676,9 +193676,12 @@ var TransactionHandler_TransactionHandler = /*#__PURE__*/createClass_default()(f
 var ZoomHandler_ZoomHandler = /*#__PURE__*/createClass_default()(function ZoomHandler(handler) {
   var _this = this;
 
+  var zoomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.05;
+
   classCallCheck_default()(this, ZoomHandler);
 
   this.handler = void 0;
+  this._zoomStep = void 0;
 
   this.zoomToPoint = function (point, zoom) {
     var _this$handler = _this.handler,
@@ -193759,7 +193762,7 @@ var ZoomHandler_ZoomHandler = /*#__PURE__*/createClass_default()(function ZoomHa
   this.zoomIn = function () {
     var zoomRatio = _this.handler.canvas.getZoom();
 
-    zoomRatio += 0.05;
+    zoomRatio += _this._zoomStep;
 
     var center = _this.handler.canvas.getCenter();
 
@@ -193769,7 +193772,7 @@ var ZoomHandler_ZoomHandler = /*#__PURE__*/createClass_default()(function ZoomHa
   this.zoomOut = function () {
     var zoomRatio = _this.handler.canvas.getZoom();
 
-    zoomRatio -= 0.05;
+    zoomRatio -= _this._zoomStep;
 
     var center = _this.handler.canvas.getCenter();
 
@@ -193831,6 +193834,7 @@ var ZoomHandler_ZoomHandler = /*#__PURE__*/createClass_default()(function ZoomHa
   };
 
   this.handler = handler;
+  this._zoomStep = zoomStep;
 }
 /**
  * Zoom to point
@@ -194257,6 +194261,8 @@ var WorkareaHandler_WorkareaHandler = /*#__PURE__*/function () {
 
                                 canvas.renderAll();
                                 resolve(workarea);
+                              }, {
+                                crossOrigin: 'anonymous'
                               });
                             }));
 
@@ -199435,6 +199441,22 @@ var AlignmentHandler_AlignmentHandler = /*#__PURE__*/createClass_default()(funct
     }
   };
 
+  this.middle = function () {
+    var activeObject = _this.handler.canvas.getActiveObject();
+
+    if (activeObject && activeObject.type === 'activeSelection') {
+      var activeSelection = activeObject;
+      activeSelection.forEachObject(function (obj) {
+        obj.set({
+          top: 0 - obj.width * obj.scaleX / 2
+        });
+        obj.setCoords();
+
+        _this.handler.canvas.renderAll();
+      });
+    }
+  };
+
   this.right = function () {
     var activeObject = _this.handler.canvas.getActiveObject();
 
@@ -200150,9 +200172,9 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
       var 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["fabric"].Point(_this.handler.canvas.getWidth() / 2, _this.handler.canvas.getHeight() / 2), zoomRatio);
@@ -200542,6 +200564,8 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
                           });
 
                           if (filteredObjects.length === 1) {
+                            var _this$handler$onAdd, _this$handler3;
+
                             var obj = filteredObjects[0];
 
                             if (typeof obj.cloneable !== 'undefined' && !obj.cloneable) {
@@ -200556,7 +200580,11 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
                             _this.handler.canvas.setActiveObject(createdObj);
 
                             _this.handler.canvas.requestRenderAll();
+
+                            (_this$handler$onAdd = (_this$handler3 = _this.handler).onAdd) === null || _this$handler$onAdd === void 0 ? void 0 : _this$handler$onAdd.call(_this$handler3, createdObj);
                           } else {
+                            var _this$handler$onAdd2, _this$handler4;
+
                             var nodes = [];
                             var targets = [];
                             objects.forEach(function (obj) {
@@ -200587,6 +200615,8 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
                             _this.handler.canvas.setActiveObject(activeSelection);
 
                             _this.handler.canvas.requestRenderAll();
+
+                            (_this$handler$onAdd2 = (_this$handler4 = _this.handler).onAdd) === null || _this$handler$onAdd2 === void 0 ? void 0 : _this$handler$onAdd2.call(_this$handler4, activeSelection);
                           }
 
                           if (!_this.handler.transactionHandler.active) {
@@ -200642,9 +200672,9 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
     }();
 
     this.keydown = function (e) {
-      var _this$handler3 = _this.handler,
-          keyEvent = _this$handler3.keyEvent,
-          editable = _this$handler3.editable;
+      var _this$handler5 = _this.handler,
+          keyEvent = _this$handler5.keyEvent,
+          editable = _this$handler5.editable;
 
       if (!Object.keys(keyEvent).length) {
         return;
@@ -200764,9 +200794,9 @@ var EventHandler_EventHandler = /*#__PURE__*/function () {
 
     this.contextmenu = function (e) {
       e.preventDefault();
-      var _this$handler4 = _this.handler,
-          editable = _this$handler4.editable,
-          onContext = _this$handler4.onContext;
+      var _this$handler6 = _this.handler,
+          editable = _this$handler6.editable,
+          onContext = _this$handler6.onContext;
 
       if (editable && onContext) {
         var target = _this.handler.canvas.findTarget(e, false);
@@ -201742,6 +201772,7 @@ var Handler_Handler = /*#__PURE__*/function () {
     this.interactionMode = void 0;
     this.minZoom = void 0;
     this.maxZoom = void 0;
+    this.zoomStep = 0.05;
     this.propertiesToInclude = defaults_namespaceObject.propertiesToInclude;
     this.workareaOption = defaults_namespaceObject.workareaOption;
     this.canvasOption = defaults_namespaceObject.canvasOption;
@@ -201809,6 +201840,7 @@ var Handler_Handler = /*#__PURE__*/function () {
       _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;
@@ -201857,7 +201889,7 @@ var Handler_Handler = /*#__PURE__*/function () {
       _this.animationHandler = new handlers_AnimationHandler(_this);
       _this.contextmenuHandler = new handlers_ContextmenuHandler(_this);
       _this.tooltipHandler = new handlers_TooltipHandler(_this);
-      _this.zoomHandler = new handlers_ZoomHandler(_this);
+      _this.zoomHandler = new handlers_ZoomHandler(_this, _this.zoomStep);
       _this.interactionHandler = new handlers_InteractionHandler(_this);
       _this.transactionHandler = new handlers_TransactionHandler(_this);
       _this.gridHandler = new handlers_GridHandler(_this);
@@ -202168,7 +202200,8 @@ var Handler_Handler = /*#__PURE__*/function () {
           resolve(obj.setSrc(source, function () {
             return _this.canvas.renderAll();
           }, {
-            dirty: true
+            dirty: true,
+            crossOrigin: "anonymous"
           }));
         }
       });
@@ -203449,16 +203482,21 @@ var Handler_Handler = /*#__PURE__*/function () {
         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();
-
       var _this$workarea2 = _this.workarea,
           left = _this$workarea2.left,
           top = _this$workarea2.top,
           width = _this$workarea2.width,
-          height = _this$workarea2.height;
+          height = _this$workarea2.height,
+          scaleX = _this$workarea2.scaleX,
+          scaleY = _this$workarea2.scaleY;
+      width = Math.ceil(width * scaleX);
+      height = Math.ceil(height * scaleY); // cachedVT is used to reset the viewportTransform after the image is saved.
+
+      var cachedVT = _this.canvas.viewportTransform; // reset the viewportTransform to default (no zoom)
+
+      _this.canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
 
       var dataUrl = _this.canvas.toDataURL(Handler_objectSpread(Handler_objectSpread({}, option), {}, {
         left: left,
@@ -203475,7 +203513,10 @@ var Handler_Handler = /*#__PURE__*/function () {
         document.body.appendChild(anchorEl);
         anchorEl.click();
         anchorEl.remove();
-      }
+      } // reset the viewportTransform to previous value.
+
+
+      _this.canvas.viewportTransform = cachedVT;
     };
 
     this.rotate = function (angle) {