react-design-editor 0.0.54 → 0.0.56

package/dist/react-design-editor.js

@@ -194261,6 +194261,8 @@ var WorkareaHandler_WorkareaHandler = /*#__PURE__*/function () {
 
                                 canvas.renderAll();
                                 resolve(workarea);
+                              }, {
+                                crossOrigin: 'anonymous'
                               });
                             }));
 
@@ -198267,35 +198269,41 @@ var gifler = __webpack_require__(1135);
 // CONCATENATED MODULE: ./src/canvas/objects/Gif.ts
 
 
-var Gif = fabric["fabric"].util.createClass(fabric["fabric"].Object, {
+var Gif = fabric["fabric"].util.createClass(fabric["fabric"].Image, {
   type: 'gif',
   superType: 'image',
   gifCanvas: null,
+  gifler: undefined,
   isStarted: false,
   initialize: function initialize(options) {
     options = options || {};
-    this.callSuper('initialize', options);
     this.gifCanvas = document.createElement('canvas');
+    this.callSuper('initialize', this.gifCanvas, options);
   },
   drawFrame: function drawFrame(ctx, frame) {
+    var _this$canvas;
+
     // update canvas size
     this.gifCanvas.width = frame.width;
     this.gifCanvas.height = frame.height; // update canvas that we are using for fabric.js
 
-    ctx.drawImage(frame.buffer, -frame.width / 2, -frame.height / 2, frame.width, frame.height);
+    ctx.drawImage(frame.buffer, 0, 0);
+    (_this$canvas = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.renderAll();
   },
   _render: function _render(ctx) {
     var _this = this;
 
     this.callSuper('_render', ctx);
+    this.dirty = true;
 
     if (!this.isStarted) {
       this.isStarted = true;
-      window // @ts-ignore
-      .gifler('./images/sample/earth.gif').frames(this.gifCanvas, function (_c, frame) {
+      this.gifler = window // @ts-ignore
+      .gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif') // .gifler('./images/sample/earth.gif')
+      .frames(this.gifCanvas, function (context, frame) {
         _this.isStarted = true;
 
-        _this.drawFrame(ctx, frame);
+        _this.drawFrame(context, frame);
       });
     }
   }
@@ -198559,8 +198567,8 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
     }
 
     this.set({
-      fill: options.fill || 'rgba(0, 0, 0, 1)',
-      stroke: options.stroke || 'rgba(255, 255, 255, 0)'
+      fill: options.fill,
+      stroke: options.stroke
     });
     this.setCoords();
 
@@ -199439,6 +199447,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();
 
@@ -202182,7 +202206,8 @@ var Handler_Handler = /*#__PURE__*/function () {
           resolve(obj.setSrc(source, function () {
             return _this.canvas.renderAll();
           }, {
-            dirty: true
+            dirty: true,
+            crossOrigin: 'anonymous'
           }));
         }
       });
@@ -203463,16 +203488,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,
@@ -203489,7 +203519,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) {