react-design-editor 0.0.43 → 0.0.47

package/dist/react-design-editor.min.js.LICENSE.txt

@@ -1,9 +1,3 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
 /*!
  * MediaElement.js
  * http://www.mediaelementjs.com/
@@ -35,21 +29,3 @@ object-assign
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
-
-/** @license React v0.19.1
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.14.0
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/lib/handlers/AnimationHandler.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const animejs_1 = __importDefault(require("animejs"));
+const warning_1 = __importDefault(require("warning"));
 class AnimationHandler {
     constructor(handler) {
         /**
@@ -164,6 +165,14 @@ class AnimationHandler {
                 });
             }
             else if (type === 'flash') {
+                if (obj.type === 'svg') {
+                    obj._objects.forEach(child => this.handler.setByPartial(child, {
+                        fill: child.originFill,
+                        stroke: child.originStroke,
+                        originFill: null,
+                        originStroke: null,
+                    }));
+                }
                 Object.assign(option, {
                     fill: obj.originFill,
                     stroke: obj.originStroke,
@@ -205,11 +214,19 @@ class AnimationHandler {
                 update: (instance) => {
                     if (type === 'flash') {
                         // I don't know why it works. Magic code...
-                        const fill = instance.animations[0].currentValue;
-                        const stroke = instance.animations[1].currentValue;
-                        obj.set('fill', '');
-                        obj.set('fill', fill);
-                        obj.set('stroke', stroke);
+                        warning_1.default(instance.animations[0], 'instance.animations[0] undefined.');
+                        warning_1.default(instance.animations[1], 'instance.animations[1] undefined.');
+                        const fill = instance.animations[0]?.currentValue;
+                        const stroke = instance.animations[1]?.currentValue;
+                        if (obj.type === 'svg') {
+                            obj.setFill(fill);
+                            obj.setStroke(stroke);
+                        }
+                        else {
+                            obj.set('fill', '');
+                            obj.set('fill', fill);
+                            obj.set('stroke', stroke);
+                        }
                     }
                     else if (type === 'rotation') {
                         let angle = instance.animations[0].currentValue;
@@ -303,6 +320,12 @@ class AnimationHandler {
             }
             else if (type === 'flash') {
                 const { fill = obj.fill, stroke = obj.stroke } = other;
+                if (obj.type === 'svg') {
+                    obj._objects.forEach(child => this.handler.setByPartial(child, {
+                        originFill: child.fill,
+                        originStroke: child.stroke,
+                    }));
+                }
                 obj.set('originFill', obj.fill);
                 obj.set('originStroke', obj.stroke);
                 Object.assign(option, {

package/lib/objects/Svg.d.ts

@@ -1,5 +1,9 @@
 import { FabricGroup, FabricObject, FabricObjectOption } from '../utils';
-export declare type SvgObject = FabricGroup | FabricObject;
+export declare type SvgObject = (FabricGroup | FabricObject) & {
+    loadSvg(option: SvgOption): Promise<SvgObject>;
+    setFill(value: string): SvgObject;
+    setStroke(value: string): SvgObject;
+};
 export interface SvgOption extends FabricObjectOption {
     svg?: string;
     loadType?: 'file' | 'svg';

package/lib/objects/Svg.js

@@ -37,12 +37,20 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
                     stroke: options.stroke,
                 });
             }
+            if (this._objects?.length) {
+                this._objects.forEach(obj => this.remove(obj));
+            }
             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) {
             this.canvas.requestRenderAll();
         }
+        return this;
     },
     loadSvg(option) {
         const { svg, loadType, fill, stroke } = option;
@@ -61,9 +69,11 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     setFill(value) {
         this.getObjects().forEach((obj) => obj.set('fill', value));
+        return this;
     },
     setStroke(value) {
         this.getObjects().forEach((obj) => obj.set('stroke', value));
+        return this;
     },
     toObject(propertiesToInclude) {
         return utils_1.toObject(this, propertiesToInclude, {

package/lib/utils/ObjectUtil.d.ts

@@ -81,9 +81,10 @@ export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> =
     originAngle?: number;
     /**
      * Original fill color
-     * @type {(string | fabric.Pattern)}
+     *
+     * @type {(string | fabric.Pattern | fabric.Gradient)}
      */
-    originFill?: string | fabric.Pattern;
+    originFill?: string | fabric.Pattern | fabric.Gradient;
     /**
      * Original stroke color
      * @type {string}

package/package.json

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