react-design-editor 0.0.39 → 0.0.43

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.js

@@ -14,17 +14,29 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         if (createdObj.getObjects) {
             createdObj.getObjects().forEach(obj => {
                 this.add(obj);
-                obj.set('fill', options.fill);
-                obj.set('stroke', options.stroke);
+                if (options.fill) {
+                    obj.set('fill', options.fill);
+                }
+                if (options.stroke) {
+                    obj.set('stroke', options.stroke);
+                }
             });
         }
         else {
             createdObj.set({
                 originX: 'center',
                 originY: 'center',
-                fill: options.fill,
-                stroke: options.stroke,
             });
+            if (options.fill) {
+                createdObj.set({
+                    fill: options.fill,
+                });
+            }
+            if (options.stroke) {
+                createdObj.set({
+                    stroke: options.stroke,
+                });
+            }
             this.add(createdObj);
         }
         this.setCoords();
@@ -47,6 +59,12 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             }
         });
     },
+    setFill(value) {
+        this.getObjects().forEach((obj) => obj.set('fill', value));
+    },
+    setStroke(value) {
+        this.getObjects().forEach((obj) => obj.set('stroke', value));
+    },
     toObject(propertiesToInclude) {
         return utils_1.toObject(this, propertiesToInclude, {
             svg: this.get('svg'),

package/package.json

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