react-design-editor 0.0.55 → 0.0.56

package/lib/handlers/Handler.js

@@ -358,7 +358,7 @@ class Handler {
                     obj.set('src', source);
                     resolve(obj.setSrc(source, () => this.canvas.renderAll(), {
                         dirty: true,
-                        crossOrigin: "anonymous"
+                        crossOrigin: 'anonymous',
                     }));
                 }
             });

package/lib/handlers/TransactionHandler.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="lodash" />
-import Handler from './Handler';
 import { FabricObject } from '../utils';
-export declare type TransactionType = 'add' | 'remove' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
+import Handler from './Handler';
+export declare type TransactionType = 'add' | 'remove' | 'modified' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
 export interface TransactionTransform {
     scaleX?: number;
     scaleY?: number;

package/lib/objects/Gif.js

@@ -2,33 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 require("gifler");
-const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
+const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Image, {
     type: 'gif',
     superType: 'image',
     gifCanvas: null,
+    gifler: undefined,
     isStarted: false,
     initialize(options) {
         options = options || {};
-        this.callSuper('initialize', options);
         this.gifCanvas = document.createElement('canvas');
+        this.callSuper('initialize', this.gifCanvas, options);
     },
     drawFrame(ctx, frame) {
         // 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?.renderAll();
     },
     _render(ctx) {
         this.callSuper('_render', ctx);
+        this.dirty = true;
         if (!this.isStarted) {
             this.isStarted = true;
-            window
+            this.gifler = window
                 // @ts-ignore
-                .gifler('./images/sample/earth.gif')
-                .frames(this.gifCanvas, (_c, frame) => {
+                .gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif')
+                // .gifler('./images/sample/earth.gif')
+                .frames(this.gifCanvas, (context, frame) => {
                 this.isStarted = true;
-                this.drawFrame(ctx, frame);
+                this.drawFrame(context, frame);
             });
         }
     },

package/lib/objects/Svg.js

@@ -43,8 +43,8 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             this.add(createdObj);
         }
         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();
         if (this.canvas) {

package/package.json

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