react-design-editor 0.0.41 → 0.0.45

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/handlers/Handler.js

@@ -140,15 +140,11 @@ class Handler {
             if (!activeObject) {
                 return;
             }
-            if ((activeObject.type === 'svg' && key === 'fill') || key === 'stroke') {
-                activeObject.set(key, value);
+            if (activeObject.type === 'svg' && (key === 'fill' || key === 'stroke')) {
                 activeObject._objects.forEach(obj => obj.set(key, value));
-                activeObject.setCoords();
-            }
-            else {
-                activeObject.set(key, value);
-                activeObject.setCoords();
             }
+            activeObject.set(key, value);
+            activeObject.setCoords();
             this.canvas.requestRenderAll();
             const { id, superType, type, player, width, height } = activeObject;
             if (superType === 'element') {
@@ -226,6 +222,14 @@ class Handler {
             if (!obj) {
                 return;
             }
+            if (obj.type === 'svg') {
+                if (key === 'fill') {
+                    obj.setFill(value);
+                }
+                else if (key === 'stroke') {
+                    obj.setStroke(value);
+                }
+            }
             obj.set(key, value);
             obj.setCoords();
             this.canvas.renderAll();
@@ -273,6 +277,14 @@ class Handler {
             if (!obj) {
                 return;
             }
+            if (obj.type === 'svg') {
+                if (option.fill) {
+                    obj.setFill(option.fill);
+                }
+                else if (option.stroke) {
+                    obj.setStroke(option.stroke);
+                }
+            }
             obj.set(option);
             obj.setCoords();
             this.canvas.renderAll();
@@ -1215,24 +1227,23 @@ class Handler {
             let prevLeft = 0;
             let prevTop = 0;
             this.canvas.setBackgroundColor(this.canvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
-            const workareaExist = json.filter((obj) => obj.id === 'workarea');
+            const workarea = json.find((obj) => obj.id === 'workarea');
             if (!this.workarea) {
                 this.workareaHandler.initialize();
             }
-            if (!workareaExist.length) {
-                this.canvas.centerObject(this.workarea);
-                this.workarea.setCoords();
-                prevLeft = this.workarea.left;
-                prevTop = this.workarea.top;
-            }
-            else {
-                const workarea = workareaExist[0];
+            if (workarea) {
                 prevLeft = workarea.left;
                 prevTop = workarea.top;
                 this.workarea.set(workarea);
                 await this.workareaHandler.setImage(workarea.src, true);
                 this.workarea.setCoords();
             }
+            else {
+                this.canvas.centerObject(this.workarea);
+                this.workarea.setCoords();
+                prevLeft = this.workarea.left;
+                prevTop = this.workarea.top;
+            }
             json.forEach((obj) => {
                 if (obj.id === 'workarea') {
                     return;

package/lib/handlers/TooltipHandler.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="lodash" />
-import Handler from './Handler';
 import { FabricObject } from '../utils';
+import Handler from './Handler';
 declare class TooltipHandler {
     handler: Handler;
     tooltipEl: HTMLDivElement;

package/lib/handlers/TooltipHandler.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_dom_1 = __importDefault(require("react-dom"));
 const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_dom_1 = __importDefault(require("react-dom"));
 class TooltipHandler {
     constructor(handler) {
         /**
@@ -22,7 +22,7 @@ class TooltipHandler {
                 let element = target.name;
                 const { onTooltip } = this.handler;
                 if (onTooltip) {
-                    element = await onTooltip(this.tooltipEl, target);
+                    element = await onTooltip(tooltip, target);
                     if (!element) {
                         return;
                     }

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;
@@ -59,6 +67,14 @@ 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, {
             svg: this.get('svg'),

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.41",
+	"version": "0.0.45",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",