react-design-editor 0.0.55 → 0.0.57

package/dist/react-design-editor.js

@@ -198269,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);
       });
     }
   }
@@ -198488,9 +198494,7 @@ window.fabric.OrthogonalLink = OrthogonalLink;
 // CONCATENATED MODULE: ./src/canvas/objects/Svg.ts
 
 
-function Svg_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function Svg_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? Svg_ownKeys(Object(source), !0).forEach(function (key) { defineProperty_default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : Svg_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 
 
@@ -198502,7 +198506,9 @@ function Svg_objectSpread(target) { for (var i = 1; i < arguments.length; i++) {
 
 
 
+function Svg_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
+function Svg_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? Svg_ownKeys(Object(source), !0).forEach(function (key) { defineProperty_default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : Svg_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 
 
@@ -198513,11 +198519,24 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
     this.callSuper('initialize', [], option);
     this.loadSvg(option);
   },
-  addSvgElements: function addSvgElements(objects, options, path) {
-    var _this = this;
+  addSvgElements: function addSvgElements(objects, options) {
+    var _this$_objects,
+        _this = this;
+
+    var createdObj = fabric["fabric"].util.groupSVGElements(objects, options);
+    var height = this.height,
+        scaleY = this.scaleY;
+    var scale = height ? height * scaleY / createdObj.height : createdObj.scaleY;
+    this.set(Svg_objectSpread(Svg_objectSpread({}, options), {}, {
+      scaleX: scale,
+      scaleY: scale
+    }));
 
-    var createdObj = fabric["fabric"].util.groupSVGElements(objects, options, path);
-    this.set(options);
+    if ((_this$_objects = this._objects) !== null && _this$_objects !== void 0 && _this$_objects.length) {
+      this.getObjects().forEach(function (obj) {
+        _this.remove(obj);
+      });
+    }
 
     if (createdObj.getObjects) {
       createdObj.getObjects().forEach(function (obj) {
@@ -198532,7 +198551,7 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
         }
       });
     } else {
-      var _this$_objects;
+      var _this$_objects2;
 
       createdObj.set({
         originX: 'center',
@@ -198551,7 +198570,7 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
         });
       }
 
-      if ((_this$_objects = this._objects) !== null && _this$_objects !== void 0 && _this$_objects.length) {
+      if ((_this$_objects2 = this._objects) !== null && _this$_objects2 !== void 0 && _this$_objects2.length) {
         this._objects.forEach(function (obj) {
           return _this.remove(obj);
         });
@@ -198560,10 +198579,6 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
       this.add(createdObj);
     }
 
-    this.set({
-      fill: options.fill || 'rgba(0, 0, 0, 1)',
-      stroke: options.stroke || 'rgba(255, 255, 255, 0)'
-    });
     this.setCoords();
 
     if (this.canvas) {
@@ -198575,38 +198590,46 @@ var Svg = fabric["fabric"].util.createClass(fabric["fabric"].Group, {
   loadSvg: function loadSvg(option) {
     var _this2 = this;
 
-    var svg = option.svg,
+    var src = option.src,
         loadType = option.loadType,
         fill = option.fill,
         stroke = option.stroke;
     return new Promise(function (resolve) {
       if (loadType === 'svg') {
-        fabric["fabric"].loadSVGFromString(svg, function (objects, options) {
+        fabric["fabric"].loadSVGFromString(src, function (objects, options) {
           resolve(_this2.addSvgElements(objects, Svg_objectSpread(Svg_objectSpread({}, options), {}, {
             fill: fill,
             stroke: stroke
-          }), svg));
+          })));
         });
       } else {
-        fabric["fabric"].loadSVGFromURL(svg, function (objects, options) {
+        fabric["fabric"].loadSVGFromURL(src, function (objects, options) {
           resolve(_this2.addSvgElements(objects, Svg_objectSpread(Svg_objectSpread({}, options), {}, {
             fill: fill,
             stroke: stroke
-          }), svg));
+          })));
         });
       }
     });
   },
   setFill: function setFill(value) {
-    this.getObjects().forEach(function (obj) {
+    var filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    this.getObjects().filter(filter).forEach(function (obj) {
       return obj.set('fill', value);
     });
+    this.canvas.requestRenderAll();
     return this;
   },
   setStroke: function setStroke(value) {
-    this.getObjects().forEach(function (obj) {
+    var filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    this.getObjects().filter(filter).forEach(function (obj) {
       return obj.set('stroke', value);
     });
+    this.canvas.requestRenderAll();
     return this;
   },
   toObject: function toObject(propertiesToInclude) {
@@ -202168,16 +202191,32 @@ var Handler_Handler = /*#__PURE__*/function () {
       }
     };
 
-    this.setImage = function (obj, source) {
+    this.setImage = function (obj, source, keepSize, options) {
+      var height = obj.height,
+          scaleY = obj.scaleY;
+
+      var renderCallbaack = function renderCallbaack(imgObj, src) {
+        if (keepSize) {
+          var scale = height * scaleY / imgObj.height;
+          imgObj.set({
+            scaleY: scale,
+            scaleX: scale,
+            src: src
+          });
+        }
+
+        _this.canvas.requestRenderAll();
+      };
+
       return new Promise(function (resolve) {
         if (!source) {
           obj.set('file', null);
           obj.set('src', null);
-          resolve(obj.setSrc('./images/sample/transparentBg.png', function () {
-            return _this.canvas.renderAll();
-          }, {
+          resolve(obj.setSrc('./images/sample/transparentBg.png', function (imgObj) {
+            return renderCallbaack(imgObj, null);
+          }, Handler_objectSpread({
             dirty: true
-          }));
+          }, options)));
         }
 
         if (source instanceof File) {
@@ -202186,31 +202225,62 @@ var Handler_Handler = /*#__PURE__*/function () {
           reader.onload = function () {
             obj.set('file', source);
             obj.set('src', null);
-            resolve(obj.setSrc(reader.result, function () {
-              return _this.canvas.renderAll();
-            }, {
+            resolve(obj.setSrc(reader.result, function (imgObj) {
+              return renderCallbaack(imgObj, reader.result);
+            }, Handler_objectSpread({
               dirty: true
-            }));
+            }, options)));
           };
 
           reader.readAsDataURL(source);
         } else {
           obj.set('file', null);
           obj.set('src', source);
-          resolve(obj.setSrc(source, function () {
-            return _this.canvas.renderAll();
-          }, {
+          resolve(obj.setSrc(source, function (imgObj) {
+            return renderCallbaack(imgObj, source);
+          }, Handler_objectSpread({
             dirty: true,
-            crossOrigin: "anonymous"
-          }));
+            crossOrigin: 'anonymous'
+          }, options)));
         }
       });
     };
 
-    this.setImageById = function (id, source) {
+    this.setImageById = function (id, source, keepSize) {
       var findObject = _this.findById(id);
 
-      return Promise.resolve(_this.setImage(findObject, source));
+      return Promise.resolve(_this.setImage(findObject, source, keepSize));
+    };
+
+    this.setSvg = function (obj, source, isPath, keepSize) {
+      return new Promise(function (resolve) {
+        if (!source) {
+          resolve(obj.loadSvg({
+            src: './images/sample/chiller.svg',
+            loadType: 'file',
+            keepSize: keepSize
+          }));
+        }
+
+        if (source instanceof File) {
+          var reader = new FileReader();
+          reader.readAsDataURL(source);
+
+          reader.onload = function () {
+            return resolve(obj.loadSvg({
+              src: reader.result,
+              loadType: 'file',
+              keepSize: keepSize
+            }));
+          };
+        } else {
+          resolve(obj.loadSvg({
+            src: source,
+            loadType: isPath ? 'svg' : 'file',
+            keepSize: keepSize
+          }));
+        }
+      });
     };
 
     this.setVisible = function (visible) {