react-design-editor 0.0.47 → 0.0.50

package/lib/handlers/EventHandler.js

@@ -314,7 +314,7 @@ class EventHandler {
             if (editable) {
                 if (this.handler.prevTarget && this.handler.prevTarget.superType === 'link') {
                     this.handler.prevTarget.set({
-                        stroke: this.handler.prevTarget.originStroke,
+                        stroke: this.handler.prevTarget.originStroke || this.handler.prevTarget.stroke,
                     });
                 }
                 if (target && target.type === 'fromPort') {
@@ -339,7 +339,7 @@ class EventHandler {
                 if (this.handler.interactionMode === 'selection') {
                     if (target && target.superType === 'link') {
                         target.set({
-                            stroke: target.selectFill || 'green',
+                            stroke: target.selectedStroke || 'green',
                         });
                     }
                     this.handler.prevTarget = target;

package/lib/handlers/Handler.d.ts

@@ -320,13 +320,14 @@ declare class Handler implements HandlerOptions {
      * @param {(File | string)} [source]
      * @returns
      */
-    setImage: (obj: FabricImage, source?: File | string) => void;
+    setImage: (obj: FabricImage, source?: File | string) => Promise<FabricImage>;
     /**
      * Set image by id
      * @param {string} id
      * @param {*} source
+     * @returns
      */
-    setImageById: (id: string, source: any) => void;
+    setImageById: (id: string, source: any) => Promise<FabricImage>;
     /**
      * Set visible
      * @param {boolean} [visible]
@@ -345,9 +346,10 @@ declare class Handler implements HandlerOptions {
      * @param {FabricObjectOption} obj
      * @param {boolean} [centered=true]
      * @param {boolean} [loaded=false]
+     * @param {boolean} [group=false]
      * @returns
      */
-    add: (obj: FabricObjectOption, centered?: boolean, loaded?: boolean) => FabricObject<fabric.Object>;
+    add: (obj: FabricObjectOption, centered?: boolean, loaded?: boolean, group?: boolean) => FabricObject<fabric.Object>;
     /**
      * Add group object
      *
@@ -356,7 +358,7 @@ declare class Handler implements HandlerOptions {
      * @param {boolean} [loaded=false]
      * @returns
      */
-    addGroup: (obj: FabricGroup, centered?: boolean, loaded?: boolean) => FabricObject<fabric.Object>[];
+    addGroup: (obj: FabricGroup) => FabricGroup;
     /**
      * Add iamge object
      * @param {FabricImage} obj
@@ -413,12 +415,6 @@ declare class Handler implements HandlerOptions {
      * @returns
      */
     paste: () => boolean;
-    /**
-     * Load the image
-     * @param {FabricImage} obj
-     * @param {string} src
-     */
-    loadImage: (obj: FabricImage, src: string) => void;
     /**
      * Find object by object
      * @param {FabricObject} obj

package/lib/handlers/Handler.js

@@ -332,35 +332,43 @@ class Handler {
          * @returns
          */
         this.setImage = (obj, source) => {
-            if (!source) {
-                this.loadImage(obj, null);
-                obj.set('file', null);
-                obj.set('src', null);
-                return;
-            }
-            if (source instanceof File) {
-                const reader = new FileReader();
-                reader.onload = () => {
-                    this.loadImage(obj, reader.result);
-                    obj.set('file', source);
+            return new Promise(resolve => {
+                if (!source) {
+                    obj.set('file', null);
                     obj.set('src', null);
-                };
-                reader.readAsDataURL(source);
-            }
-            else {
-                this.loadImage(obj, source);
-                obj.set('file', null);
-                obj.set('src', source);
-            }
+                    resolve(obj.setSrc('./images/sample/transparentBg.png', () => this.canvas.renderAll(), {
+                        dirty: true,
+                    }));
+                }
+                if (source instanceof File) {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        obj.set('file', source);
+                        obj.set('src', null);
+                        resolve(obj.setSrc(reader.result, () => this.canvas.renderAll(), {
+                            dirty: true,
+                        }));
+                    };
+                    reader.readAsDataURL(source);
+                }
+                else {
+                    obj.set('file', null);
+                    obj.set('src', source);
+                    resolve(obj.setSrc(source, () => this.canvas.renderAll(), {
+                        dirty: true,
+                    }));
+                }
+            });
         };
         /**
          * Set image by id
          * @param {string} id
          * @param {*} source
+         * @returns
          */
         this.setImageById = (id, source) => {
             const findObject = this.findById(id);
-            this.setImage(findObject, source);
+            return Promise.resolve(this.setImage(findObject, source));
         };
         /**
          * Set visible
@@ -412,9 +420,10 @@ class Handler {
          * @param {FabricObjectOption} obj
          * @param {boolean} [centered=true]
          * @param {boolean} [loaded=false]
+         * @param {boolean} [group=false]
          * @returns
          */
-        this.add = (obj, centered = true, loaded = false) => {
+        this.add = (obj, centered = true, loaded = false, group = false) => {
             const { editable, onAdd, gridOption, objectOption } = this;
             const option = {
                 hasControls: editable,
@@ -448,15 +457,14 @@ class Handler {
                 createdObj = this.addImage(newOption);
             }
             else if (obj.type === 'group') {
-                // TODO...
-                // Group add function needs to be fixed
-                const objects = this.addGroup(newOption, centered, loaded);
-                const groupOption = Object.assign({}, newOption, { objects, name: 'New Group' });
-                createdObj = this.fabricObjects[obj.type].create(groupOption);
+                createdObj = this.addGroup(newOption);
             }
             else {
                 createdObj = this.fabricObjects[obj.type].create(newOption);
             }
+            if (group) {
+                return createdObj;
+            }
             this.canvas.add(createdObj);
             this.objects = this.getObjects();
             if (!editable && !(obj.superType === 'element')) {
@@ -507,10 +515,10 @@ class Handler {
          * @param {boolean} [loaded=false]
          * @returns
          */
-        this.addGroup = (obj, centered = true, loaded = false) => {
-            return obj.objects.map(child => {
-                return this.add(child, centered, loaded);
-            });
+        this.addGroup = (obj) => {
+            const { objects = [], ...other } = obj;
+            const _objects = objects.map(child => this.add(child, false, true, true));
+            return new fabric_1.fabric.Group(_objects, other);
         };
         /**
          * Add iamge object
@@ -519,11 +527,11 @@ class Handler {
          */
         this.addImage = (obj) => {
             const { objectOption } = this;
-            const { filters = [], ...otherOption } = obj;
+            const { filters = [], src, file, ...otherOption } = obj;
             const image = new Image();
-            if (obj.src) {
-                image.src = obj.src;
-            }
+            // if (typeof src === 'string') {
+            // 	image.src = src;
+            // }
             const createdObj = new fabric_1.fabric.Image(image, {
                 ...objectOption,
                 ...otherOption,
@@ -531,7 +539,7 @@ class Handler {
             createdObj.set({
                 filters: this.imageHandler.createFilters(filters),
             });
-            this.setImage(createdObj, obj.src || obj.file);
+            this.setImage(createdObj, src || file);
             return createdObj;
         };
         /**
@@ -1015,31 +1023,6 @@ class Handler {
             }, propertiesToInclude);
             return true;
         };
-        /**
-         * Load the image
-         * @param {FabricImage} obj
-         * @param {string} src
-         */
-        this.loadImage = (obj, src) => {
-            let url = src;
-            if (!url) {
-                url = './images/sample/transparentBg.png';
-            }
-            fabric_1.fabric.util.loadImage(url, source => {
-                if (obj.type !== 'image') {
-                    obj.set('fill', new fabric_1.fabric.Pattern({
-                        source,
-                        repeat: 'repeat',
-                    }));
-                    obj.setCoords();
-                    this.canvas.renderAll();
-                    return;
-                }
-                obj.setElement(source);
-                obj.setCoords();
-                this.canvas.renderAll();
-            });
-        };
         /**
          * Find object by object
          * @param {FabricObject} obj
@@ -1479,7 +1462,7 @@ class Handler {
                 const anchorEl = document.createElement('a');
                 anchorEl.href = dataUrl;
                 anchorEl.download = `${option.name}.png`;
-                document.body.appendChild(anchorEl); // required for firefox
+                document.body.appendChild(anchorEl);
                 anchorEl.click();
                 anchorEl.remove();
             }
@@ -1489,12 +1472,23 @@ class Handler {
          * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]
          */
         this.saveCanvasImage = (option = { name: 'New Image', format: 'png', quality: 1 }) => {
-            const dataUrl = this.canvas.toDataURL(option);
+            // If it's zoomed out/in, the container will also include in the image
+            // hence need to reset the zoom level.
+            this.zoomHandler.zoomOneToOne();
+            const { left, top, width, height } = this.workarea;
+            const dataUrl = this.canvas.toDataURL({
+                ...option,
+                left,
+                top,
+                width,
+                height,
+                enableRetinaScaling: true,
+            });
             if (dataUrl) {
                 const anchorEl = document.createElement('a');
                 anchorEl.href = dataUrl;
                 anchorEl.download = `${option.name}.png`;
-                document.body.appendChild(anchorEl); // required for firefox
+                document.body.appendChild(anchorEl);
                 anchorEl.click();
                 anchorEl.remove();
             }

package/lib/handlers/ImageHandler.js

@@ -141,7 +141,7 @@ class ImageHandler {
          * @param {IFilter[]} filters
          */
         this.createFilters = (filters) => {
-            const createdFilters = filters.reduce((prev, filter) => {
+            return filters.reduce((prev, filter) => {
                 let type = filter.type;
                 if (type.toLowerCase() === 'convolute' && isEqual_1.default(filter.matrix, SHARPEN_MATRIX)) {
                     type = 'sharpen';
@@ -158,7 +158,6 @@ class ImageHandler {
                 }
                 return prev;
             }, []);
-            return createdFilters;
         };
         /**
          * Apply filter by type

package/lib/handlers/NodeHandler.d.ts

@@ -1,6 +1,6 @@
-import Handler from './Handler';
-import { FabricObject } from '../utils';
 import { NodeObject } from '../objects/Node';
+import { FabricObject } from '../utils';
+import Handler from './Handler';
 declare class NodeHandler {
     handler: Handler;
     constructor(handler: Handler);
@@ -26,7 +26,7 @@ declare class NodeHandler {
      */
     deselect: () => void;
     /**
-     * Highlight node path
+     * Highlight path by ids
      * @param {string[]} [path]
      */
     highlightingByPath: (path?: string[]) => void;
@@ -45,6 +45,6 @@ declare class NodeHandler {
      * @param {number} [minBlur=0]
      * @param {number} [maxBlur=50]
      */
-    highlightingNode: (object: any, duration?: number, minBlur?: number, maxBlur?: number) => void;
+    highlightingNode: (object: FabricObject, duration?: number, minBlur?: number, maxBlur?: number) => void;
 }
 export default NodeHandler;

package/lib/handlers/NodeHandler.js

@@ -162,7 +162,7 @@ class NodeHandler {
             this.handler.canvas.renderAll();
         };
         /**
-         * Highlight node path
+         * Highlight path by ids
          * @param {string[]} [path]
          */
         this.highlightingByPath = (path) => {
@@ -250,7 +250,7 @@ class NodeHandler {
                             object.animating = false;
                             if (object.superType === 'link') {
                                 object.set({
-                                    stroke: object.originStroke,
+                                    stroke: object.originStroke || object.stroke,
                                 });
                             }
                         },

package/lib/objects/Link.js

@@ -9,8 +9,7 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
     initialize(fromNode, fromPort, toNode, toPort, options) {
         options = options || {};
         const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
-        this.callSuper('initialize', coords, options);
-        this.set({
+        Object.assign(options, {
             strokeWidth: 4,
             id: options.id || uuidv4_1.uuid(),
             originX: 'center',
@@ -29,7 +28,9 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
             fromPort,
             toNode,
             toPort,
+            hoverCursor: 'pointer',
         });
+        this.callSuper('initialize', coords, options);
     },
     setPort(fromNode, fromPort, _toNode, toPort) {
         if (fromNode.type === 'BroadcastNode') {

package/lib/objects/index.d.ts

@@ -1,15 +1,15 @@
-export { default as Gif } from './Gif';
 export { default as Arrow } from './Arrow';
 export { default as Chart } from './Chart';
+export { default as CirclePort } from './CirclePort';
+export { default as Cube } from './Cube';
+export { default as CurvedLink } from './CurvedLink';
 export { default as Element } from './Element';
+export { default as Gif } from './Gif';
 export { default as Iframe } from './Iframe';
-export { default as Video } from './Video';
-export { default as Node } from './Node';
+export { default as Line } from './Line';
 export { default as Link } from './Link';
-export { default as CurvedLink } from './CurvedLink';
+export { default as Node } from './Node';
 export { default as OrthogonalLink } from './OrthogonalLink';
 export { default as Port } from './Port';
-export { default as Line } from './Line';
-export { default as CirclePort } from './CirclePort';
-export { default as Cube } from './Cube';
 export { default as Svg } from './Svg';
+export { default as Video } from './Video';

package/lib/objects/index.js

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var Gif_1 = require("./Gif");
-Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.default; } });
 var Arrow_1 = require("./Arrow");
 Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return Arrow_1.default; } });
 var Chart_1 = require("./Chart");
 Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return Chart_1.default; } });
+var CirclePort_1 = require("./CirclePort");
+Object.defineProperty(exports, "CirclePort", { enumerable: true, get: function () { return CirclePort_1.default; } });
+var Cube_1 = require("./Cube");
+Object.defineProperty(exports, "Cube", { enumerable: true, get: function () { return Cube_1.default; } });
+var CurvedLink_1 = require("./CurvedLink");
+Object.defineProperty(exports, "CurvedLink", { enumerable: true, get: function () { return CurvedLink_1.default; } });
 var Element_1 = require("./Element");
 Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Element_1.default; } });
+var Gif_1 = require("./Gif");
+Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.default; } });
 var Iframe_1 = require("./Iframe");
 Object.defineProperty(exports, "Iframe", { enumerable: true, get: function () { return Iframe_1.default; } });
-var Video_1 = require("./Video");
-Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.default; } });
-var Node_1 = require("./Node");
-Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return Node_1.default; } });
+var Line_1 = require("./Line");
+Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return Line_1.default; } });
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.default; } });
-var CurvedLink_1 = require("./CurvedLink");
-Object.defineProperty(exports, "CurvedLink", { enumerable: true, get: function () { return CurvedLink_1.default; } });
+var Node_1 = require("./Node");
+Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return Node_1.default; } });
 var OrthogonalLink_1 = require("./OrthogonalLink");
 Object.defineProperty(exports, "OrthogonalLink", { enumerable: true, get: function () { return OrthogonalLink_1.default; } });
 var Port_1 = require("./Port");
 Object.defineProperty(exports, "Port", { enumerable: true, get: function () { return Port_1.default; } });
-var Line_1 = require("./Line");
-Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return Line_1.default; } });
-var CirclePort_1 = require("./CirclePort");
-Object.defineProperty(exports, "CirclePort", { enumerable: true, get: function () { return CirclePort_1.default; } });
-var Cube_1 = require("./Cube");
-Object.defineProperty(exports, "Cube", { enumerable: true, get: function () { return Cube_1.default; } });
 var Svg_1 = require("./Svg");
 Object.defineProperty(exports, "Svg", { enumerable: true, get: function () { return Svg_1.default; } });
+var Video_1 = require("./Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.default; } });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.47",
+	"version": "0.0.50",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -14,6 +14,7 @@
 		"build:lib": "npm run tsc && webpack --node-env production --config webpack.lib.js",
 		"start": "npm install && npm run start:dev",
 		"start:dev": "webpack serve --config webpack.dev.js",
+		"serve": "http-server docs -p 4001",
 		"ghpages": "npm run build && node scripts/ghpages",
 		"deploy": "npm run build:lib && npm publish",
 		"lint": "npm run tsc",
@@ -40,7 +41,7 @@
 	"homepage": "https://salgum1114.github.io/react-design-editor",
 	"peerDependencies": {
 		"animejs": "^3.0.0",
-		"fabric": "^3.6.6",
+		"fabric": "^4.6.0",
 		"react": "^16.14.0",
 		"react-dom": "^16.14.0"
 	},
@@ -50,7 +51,7 @@
 		"classnames": "^2.2.6",
 		"color": "^3.1.2",
 		"echarts": "^4.7.0",
-		"fabric": "^3.6.6",
+		"fabric": "^4.6.0",
 		"gifler": "^0.1.0",
 		"honeycomb-grid": "^3.1.7",
 		"i18next": "^19.0.0",
@@ -89,7 +90,7 @@
 		"@types/animejs": "^3.1.0",
 		"@types/color": "^3.0.1",
 		"@types/echarts": "^4.4.6",
-		"@types/fabric": "^4.2.6",
+		"@types/fabric": "^4.5.7",
 		"@types/lodash": "^4.14.150",
 		"@types/react": "^16.14.21",
 		"@types/react-dom": "^16.9.14",
@@ -114,16 +115,16 @@
 		"fs-extra": "^9.0.0",
 		"gh-pages": "^2.2.0",
 		"html-webpack-plugin": "^3.2.0",
+		"http-server": "^14.1.0",
 		"less": "^2.7.3",
 		"less-loader": "^5.0.0",
 		"path": "^0.12.7",
-		"serve": "^11.3.0",
 		"style-loader": "^1.1.4",
 		"terser-webpack-plugin": "^4.2.3",
 		"tslint": "^6.1.1",
 		"tslint-react": "^5.0.0",
 		"typedoc": "^0.17.4",
-		"typescript": "^3.9.3",
+		"typescript": "^3.9.10",
 		"url-loader": "^4.1.0",
 		"webpack": "^4.46.0",
 		"webpack-cli": "^4.9.1",