react-design-editor 0.0.34 → 0.0.38

package/lib/handlers/NodeHandler.js

@@ -55,9 +55,9 @@ class NodeHandler {
                         if (fromIndex >= 0 && targetObjects[fromIndex] && toIndex >= 0 && targetObjects[toIndex]) {
                             object.set({
                                 opacity: 1,
-                            });
-                            object.setShadow({
-                                color: object.stroke,
+                                shadow: {
+                                    color: object.stroke,
+                                },
                             });
                             this.highlightingNode(object, 300);
                             this.handler.canvas.requestRenderAll();
@@ -81,7 +81,7 @@ class NodeHandler {
                     });
                 }
                 if (!object.animating) {
-                    object.setShadow({
+                    object.set('shadow', {
                         blur: 0,
                     });
                 }
@@ -89,9 +89,9 @@ class NodeHandler {
             targetObjects.forEach((object) => {
                 object.set({
                     opacity: 1,
-                });
-                object.setShadow({
-                    color: object.stroke,
+                    shadow: {
+                        color: object.stroke,
+                    },
                 });
                 this.highlightingNode(object, 300);
                 if (object.toPort) {
@@ -116,7 +116,7 @@ class NodeHandler {
         this.selectById = (id) => {
             this.handler.objects.forEach((object) => {
                 if (id === object.id) {
-                    object.setShadow({
+                    object.set('shadow', {
                         color: object.stroke,
                         blur: 50,
                     });
@@ -125,7 +125,7 @@ class NodeHandler {
                 else if (id === object.nodeId) {
                     return;
                 }
-                object.setShadow({
+                object.set('shadow', {
                     blur: 0,
                 });
             });
@@ -154,7 +154,7 @@ class NodeHandler {
                 }
                 if (!object.animating) {
                     const node = object;
-                    node.setShadow({
+                    node.set('shadow', {
                         blur: 0,
                     });
                 }
@@ -174,12 +174,12 @@ class NodeHandler {
             const lastObject = targetObjects.filter((obj) => obj.id === path[path.length - 1])[0];
             targetObjects.forEach((object) => {
                 if (lastObject) {
-                    object.setShadow({
+                    object.set('shadow', {
                         color: lastObject.stroke,
                     });
                 }
                 else {
-                    object.setShadow({
+                    object.set('shadow', {
                         color: object.stroke,
                     });
                 }
@@ -194,12 +194,12 @@ class NodeHandler {
                         const toIndex = targetObjects.findIndex((obj) => obj.id === toNode.id);
                         if (fromIndex >= 0 && targetObjects[fromIndex] && toIndex >= 0 && targetObjects[toIndex]) {
                             if (lastObject) {
-                                object.setShadow({
+                                object.set('shadow', {
                                     color: lastObject.stroke,
                                 });
                             }
                             else {
-                                object.setShadow({
+                                object.set('shadow', {
                                     color: object.stroke,
                                 });
                             }

package/lib/handlers/TransactionHandler.js

@@ -131,9 +131,7 @@ class TransactionHandler {
             }, null);
         };
         this.handler = handler;
-        if (this.handler.editable) {
-            this.initialize();
-        }
+        this.initialize();
     }
 }
 exports.default = TransactionHandler;

package/lib/handlers/index.d.ts

@@ -19,3 +19,5 @@ export { default as GuidelineHandler } from './GuidelineHandler';
 export { default as EventHandler } from './EventHandler';
 export { default as DrawingHandler } from './DrawingHandler';
 export { default as ShortcutHandler } from './ShortcutHandler';
+export { default as FiberHandler } from './FiberHandler';
+export { default as CustomHandler } from './CustomHandler';

package/lib/handlers/index.js

@@ -42,3 +42,7 @@ var DrawingHandler_1 = require("./DrawingHandler");
 Object.defineProperty(exports, "DrawingHandler", { enumerable: true, get: function () { return DrawingHandler_1.default; } });
 var ShortcutHandler_1 = require("./ShortcutHandler");
 Object.defineProperty(exports, "ShortcutHandler", { enumerable: true, get: function () { return ShortcutHandler_1.default; } });
+var FiberHandler_1 = require("./FiberHandler");
+Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return FiberHandler_1.default; } });
+var CustomHandler_1 = require("./CustomHandler");
+Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return CustomHandler_1.default; } });

package/lib/index.d.ts

@@ -1,5 +1,6 @@
+export * from './Canvas';
 export { default as Canvas } from './Canvas';
 export { default as CanvasObject } from './CanvasObject';
 export * from './handlers';
-export * from './utils';
 export * from './objects';
+export * from './utils';

package/lib/index.js

@@ -10,10 +10,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Canvas"), exports);
 var Canvas_1 = require("./Canvas");
 Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return Canvas_1.default; } });
 var CanvasObject_1 = require("./CanvasObject");
 Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return CanvasObject_1.default; } });
 __exportStar(require("./handlers"), exports);
-__exportStar(require("./utils"), exports);
 __exportStar(require("./objects"), exports);
+__exportStar(require("./utils"), exports);

package/lib/objects/Arrow.js

@@ -35,5 +35,6 @@ Arrow.fromObject = (options, callback) => {
     const { x1, x2, y1, y2 } = options;
     return callback(new Arrow([x1, y1, x2, y2], options));
 };
+// @ts-ignore
 window.fabric.Arrow = Arrow;
 exports.default = Arrow;

package/lib/objects/Chart.js

@@ -19,8 +19,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
 const echarts = __importStar(require("echarts"));
+const fabric_1 = require("fabric");
 const utils_1 = require("../utils");
 const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
     type: 'chart',
@@ -119,5 +119,6 @@ const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
 Chart.fromObject = (options, callback) => {
     return callback(new Chart(options.chartOption, options));
 };
+// @ts-ignore
 window.fabric.Chart = Chart;
 exports.default = Chart;

package/lib/objects/CurvedLink.js

@@ -15,6 +15,7 @@ const CurvedLink = fabric_1.fabric.util.createClass(Link_1.default, {
     _render(ctx) {
         // Drawing curved link
         const { x1, y1, x2, y2 } = this;
+        ctx.lineWidth = this.strokeWidth;
         ctx.strokeStyle = this.stroke;
         const fp = { x: (x1 - x2) / 2, y: (y1 - y2) / 2 };
         const sp = { x: (x2 - x1) / 2, y: (y2 - y1) / 2 };
@@ -45,5 +46,6 @@ CurvedLink.fromObject = (options, callback) => {
     const { fromNode, fromPort, toNode, toPort } = options;
     return callback(new CurvedLink(fromNode, fromPort, toNode, toPort, options));
 };
+// @ts-ignore
 window.fabric.CurvedLink = CurvedLink;
 exports.default = CurvedLink;

package/lib/objects/Element.js

@@ -79,5 +79,6 @@ const Element = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
 Element.fromObject = (options, callback) => {
     return callback(new Element(options.code, options));
 };
+// @ts-ignore
 window.fabric.Element = Element;
 exports.default = Element;

package/lib/objects/Gif.js

@@ -23,7 +23,9 @@ const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
         this.callSuper('_render', ctx);
         if (!this.isStarted) {
             this.isStarted = true;
-            window.gifler('./images/sample/earth.gif')
+            window
+                // @ts-ignore
+                .gifler('./images/sample/earth.gif')
                 .frames(this.gifCanvas, (_c, frame) => {
                 this.isStarted = true;
                 this.drawFrame(ctx, frame);
@@ -34,5 +36,6 @@ const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
 Gif.fromObject = (options, callback) => {
     return callback(new Gif(options));
 };
+// @ts-ignore
 window.fabric.Gif = Gif;
 exports.default = Gif;

package/lib/objects/Iframe.js

@@ -65,5 +65,6 @@ const Iframe = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
 Iframe.fromObject = (options, callback) => {
     return callback(new Iframe(options.src, options));
 };
+// @ts-ignore
 window.fabric.Iframe = Iframe;
 exports.default = Iframe;

package/lib/objects/Link.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
-const uuid_1 = require("uuid");
+const uuidv4_1 = require("uuidv4");
 const Node_1 = require("./Node");
 const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
     type: 'link',
@@ -12,7 +12,7 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
         this.callSuper('initialize', coords, options);
         this.set({
             strokeWidth: 4,
-            id: options.id || uuid_1.v4(),
+            id: options.id || uuidv4_1.uuid(),
             originX: 'center',
             originY: 'center',
             lockScalingX: true,
@@ -91,6 +91,7 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
             ctx.lineTo(-5, -5);
         }
         ctx.closePath();
+        ctx.lineWidth = this.strokeWidth;
         ctx.fillStyle = this.stroke;
         ctx.fill();
         ctx.restore();
@@ -100,5 +101,6 @@ Link.fromObject = (options, callback) => {
     const { fromNode, fromPort, toNode, toPort } = options;
     return callback(new Link(fromNode, fromPort, toNode, toPort, options));
 };
+// @ts-ignore
 window.fabric.Link = Link;
 exports.default = Link;

package/lib/objects/Node.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEllipsis = exports.DESCRIPTIONS = exports.OUT_PORT_TYPE = exports.NODE_COLORS = void 0;
 const fabric_1 = require("fabric");
-const uuid_1 = require("uuid");
 const i18next_1 = __importDefault(require("i18next"));
+const uuidv4_1 = require("uuidv4");
 const Port_1 = __importDefault(require("./Port"));
 exports.NODE_COLORS = {
     TRIGGER: {
@@ -96,7 +96,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         });
         const node = [rect, icon, this.label, this.errorFlag];
         const option = Object.assign({}, options, {
-            id: options.id || uuid_1.v4(),
+            id: options.id || uuidv4_1.uuid(),
             width: 200,
             height: 40,
             originX: 'left',
@@ -251,7 +251,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     duplicate() {
         const options = this.toObject();
-        options.id = uuid_1.v4();
+        options.id = uuidv4_1.uuid();
         options.name = `${options.name}_clone`;
         return new Node(options);
     },

package/lib/objects/OrthogonalLink.js

@@ -15,6 +15,7 @@ const OrthogonalLink = fabric_1.fabric.util.createClass(Link_1.default, {
     _render(ctx) {
         // Drawing orthogonal link
         const { x1, y1, x2, y2 } = this;
+        ctx.lineWidth = this.strokeWidth;
         ctx.strokeStyle = this.stroke;
         const fp = { x: (x1 - x2) / 2, y: (y1 - y2) / 2 };
         const sp = { x: (x2 - x1) / 2, y: (y2 - y1) / 2 };
@@ -48,5 +49,6 @@ OrthogonalLink.fromObject = (options, callback) => {
     const { fromNode, fromPort, toNode, toPort } = options;
     return callback(new OrthogonalLink(fromNode, fromPort, toNode, toPort, options));
 };
+// @ts-ignore
 window.fabric.OrthogonalLink = OrthogonalLink;
 exports.default = OrthogonalLink;

package/lib/objects/Svg.d.ts

@@ -1,4 +1,4 @@
-import { FabricObject, FabricObjectOption, FabricGroup } from '../utils';
+import { FabricGroup, FabricObject, FabricObjectOption } from '../utils';
 export declare type SvgObject = FabricGroup | FabricObject;
 export interface SvgOption extends FabricObjectOption {
     svg?: string;

package/lib/objects/Video.js

@@ -115,5 +115,6 @@ const Video = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
 Video.fromObject = (options, callback) => {
     return callback(new Video(options.src || options.file, options));
 };
+// @ts-ignore
 window.fabric.Video = Video;
 exports.default = Video;

package/lib/utils/ObjectUtil.d.ts

@@ -21,7 +21,7 @@ export interface LinkProperty {
     enabled?: boolean;
     type?: string;
     state?: string;
-    dashboard?: any;
+    [key: string]: any;
 }
 export interface TooltipProperty {
     enabled?: boolean;
@@ -166,6 +166,12 @@ export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> =
      * @type {number}
      */
     rotation?: number;
+    /**
+     * Whether it can be clicked
+     *
+     * @type {boolean}
+     */
+    clickable?: boolean;
     [key: string]: any;
 };
 export declare type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
@@ -366,6 +372,7 @@ export interface KeyEvent {
      * @type {boolean}
      */
     cut?: boolean;
+    grab?: boolean;
 }
 export declare type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
 export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent, 'e'> {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.34",
+	"version": "0.0.38",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -10,10 +10,10 @@
 	],
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "npm run clean && webpack -p --config webpack.prod.js && typedoc",
-		"build:lib": "npm run tsc && webpack -p --config webpack.lib.js",
+		"build": "npm run clean && webpack --node-env production --config webpack.prod.js && typedoc",
+		"build:lib": "npm run tsc && webpack --node-env production --config webpack.lib.js",
 		"start": "npm install && npm run start:dev",
-		"start:dev": "webpack-dev-server --config webpack.dev.js --inline",
+		"start:dev": "webpack serve --config webpack.dev.js",
 		"ghpages": "npm run build && node scripts/ghpages",
 		"deploy": "npm run build:lib && npm publish",
 		"lint": "npm run tsc",
@@ -40,10 +40,9 @@
 	"homepage": "https://salgum1114.github.io/react-design-editor",
 	"peerDependencies": {
 		"animejs": "^3.0.0",
-		"fabric": "^3.4.0",
-		"react": "^16.4.1",
-		"react-dom": "^16.4.1",
-		"react-dom-factories": "^1.0.2"
+		"fabric": "^3.6.6",
+		"react": "^16.14.0",
+		"react-dom": "^16.14.0"
 	},
 	"dependencies": {
 		"animejs": "^3.0.0",
@@ -51,7 +50,7 @@
 		"classnames": "^2.2.6",
 		"color": "^3.1.2",
 		"echarts": "^4.7.0",
-		"fabric": "^3.6.3",
+		"fabric": "^3.6.6",
 		"gifler": "^0.1.0",
 		"honeycomb-grid": "^3.1.7",
 		"i18next": "^19.0.0",
@@ -59,50 +58,55 @@
 		"lodash": "^4.17.10",
 		"mediaelement": "^4.2.9",
 		"prop-types": "^15.6.2",
-		"react": "^16.13.1",
+		"react": "^16.14.0",
 		"react-ace": "^8.1.0",
 		"react-color": "^2.14.1",
 		"react-custom-scrollbars": "^4.2.1",
-		"react-dom": "^16.13.1",
-		"react-dom-factories": "^1.0.2",
+		"react-dom": "^16.14.0",
 		"react-helmet": "^5.2.0",
 		"react-hot-loader": "^4.12.20",
 		"react-json-view": "^1.19.1",
 		"resize-observer-polyfill": "^1.5.1",
 		"store": "^2.0.12",
 		"uuid": "^7.0.3",
+		"uuidv4": "^6.2.8",
 		"warning": "^4.0.3"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.9.0",
-		"@babel/plugin-proposal-class-properties": "^7.8.3",
-		"@babel/plugin-proposal-decorators": "^7.8.3",
-		"@babel/plugin-proposal-object-rest-spread": "^7.9.5",
+		"@babel/core": "^7.16.0",
+		"@babel/plugin-proposal-class-properties": "^7.16.0",
+		"@babel/plugin-proposal-decorators": "^7.16.4",
+		"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
+		"@babel/plugin-proposal-private-methods": "^7.16.0",
+		"@babel/plugin-proposal-private-property-in-object": "^7.16.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/plugin-transform-runtime": "^7.9.0",
-		"@babel/polyfill": "^7.8.7",
-		"@babel/preset-env": "^7.9.5",
-		"@babel/preset-react": "^7.9.4",
-		"@babel/preset-typescript": "^7.9.0",
+		"@babel/plugin-transform-runtime": "^7.16.4",
+		"@babel/plugin-transform-typescript": "^7.16.1",
+		"@babel/preset-env": "^7.16.4",
+		"@babel/preset-react": "^7.16.0",
+		"@babel/preset-typescript": "^7.16.0",
+		"@hot-loader/react-dom": "^17.0.1",
 		"@types/animejs": "^3.1.0",
 		"@types/color": "^3.0.1",
 		"@types/echarts": "^4.4.6",
-		"@types/fabric": "^3.6.3",
+		"@types/fabric": "^4.2.6",
 		"@types/lodash": "^4.14.150",
-		"@types/react": "^16.9.34",
-		"@types/react-dom": "^16.9.6",
+		"@types/react": "^16.14.21",
+		"@types/react-dom": "^16.9.14",
 		"@types/react-helmet": "^5.0.15",
 		"@types/uuid": "^7.0.2",
 		"@types/warning": "^3.0.0",
+		"@types/webpack-env": "^1.16.0",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"babel-plugin-dynamic-import-webpack": "^1.1.0",
 		"babel-plugin-import": "^1.13.0",
+		"core-js": "^3.19.1",
 		"css-loader": "^3.5.2",
 		"del": "^5.1.0",
-		"eslint": "^6.8.0",
-		"eslint-config-airbnb": "^17.1.0",
-		"eslint-loader": "^4.0.0",
+		"eslint": "^8.3.0",
+		"eslint-config-airbnb": "^19.0.0",
+		"eslint-loader": "^4.0.2",
 		"eslint-plugin-import": "^2.20.2",
 		"eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-react": "^7.19.0",
@@ -115,15 +119,15 @@
 		"path": "^0.12.7",
 		"serve": "^11.3.0",
 		"style-loader": "^1.1.4",
-		"terser-webpack-plugin": "^2.3.5",
+		"terser-webpack-plugin": "^4.2.3",
 		"tslint": "^6.1.1",
 		"tslint-react": "^5.0.0",
 		"typedoc": "^0.17.4",
 		"typescript": "^3.9.3",
 		"url-loader": "^4.1.0",
-		"webpack": "^4.43.0",
-		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3",
+		"webpack": "^4.46.0",
+		"webpack-cli": "^4.9.1",
+		"webpack-dev-server": "^3.11.3",
 		"webpack-merge": "^4.2.2",
 		"workbox-webpack-plugin": "^5.1.2"
 	}