react-design-editor 0.0.55 → 0.0.57

package/lib/handlers/index.js

@@ -1,48 +1,52 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomHandler = exports.FiberHandler = exports.ShortcutHandler = exports.DrawingHandler = exports.EventHandler = exports.GuidelineHandler = exports.AlignmentHandler = exports.NodeHandler = exports.LinkHandler = exports.PortHandler = exports.GridHandler = exports.InteractionHandler = exports.WorkareaHandler = exports.ZoomHandler = exports.TransactionHandler = exports.TooltipHandler = exports.ContextmenuHandler = exports.AnimationHandler = exports.CropHandler = exports.ElementHandler = exports.ChartHandler = exports.ImageHandler = exports.Handler = void 0;
 var Handler_1 = require("./Handler");
-Object.defineProperty(exports, "Handler", { enumerable: true, get: function () { return Handler_1.default; } });
+Object.defineProperty(exports, "Handler", { enumerable: true, get: function () { return __importDefault(Handler_1).default; } });
 var ImageHandler_1 = require("./ImageHandler");
-Object.defineProperty(exports, "ImageHandler", { enumerable: true, get: function () { return ImageHandler_1.default; } });
+Object.defineProperty(exports, "ImageHandler", { enumerable: true, get: function () { return __importDefault(ImageHandler_1).default; } });
 var ChartHandler_1 = require("./ChartHandler");
-Object.defineProperty(exports, "ChartHandler", { enumerable: true, get: function () { return ChartHandler_1.default; } });
+Object.defineProperty(exports, "ChartHandler", { enumerable: true, get: function () { return __importDefault(ChartHandler_1).default; } });
 var ElementHandler_1 = require("./ElementHandler");
-Object.defineProperty(exports, "ElementHandler", { enumerable: true, get: function () { return ElementHandler_1.default; } });
+Object.defineProperty(exports, "ElementHandler", { enumerable: true, get: function () { return __importDefault(ElementHandler_1).default; } });
 var CropHandler_1 = require("./CropHandler");
-Object.defineProperty(exports, "CropHandler", { enumerable: true, get: function () { return CropHandler_1.default; } });
+Object.defineProperty(exports, "CropHandler", { enumerable: true, get: function () { return __importDefault(CropHandler_1).default; } });
 var AnimationHandler_1 = require("./AnimationHandler");
-Object.defineProperty(exports, "AnimationHandler", { enumerable: true, get: function () { return AnimationHandler_1.default; } });
+Object.defineProperty(exports, "AnimationHandler", { enumerable: true, get: function () { return __importDefault(AnimationHandler_1).default; } });
 var ContextmenuHandler_1 = require("./ContextmenuHandler");
-Object.defineProperty(exports, "ContextmenuHandler", { enumerable: true, get: function () { return ContextmenuHandler_1.default; } });
+Object.defineProperty(exports, "ContextmenuHandler", { enumerable: true, get: function () { return __importDefault(ContextmenuHandler_1).default; } });
 var TooltipHandler_1 = require("./TooltipHandler");
-Object.defineProperty(exports, "TooltipHandler", { enumerable: true, get: function () { return TooltipHandler_1.default; } });
+Object.defineProperty(exports, "TooltipHandler", { enumerable: true, get: function () { return __importDefault(TooltipHandler_1).default; } });
 var TransactionHandler_1 = require("./TransactionHandler");
-Object.defineProperty(exports, "TransactionHandler", { enumerable: true, get: function () { return TransactionHandler_1.default; } });
+Object.defineProperty(exports, "TransactionHandler", { enumerable: true, get: function () { return __importDefault(TransactionHandler_1).default; } });
 var ZoomHandler_1 = require("./ZoomHandler");
-Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return ZoomHandler_1.default; } });
+Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return __importDefault(ZoomHandler_1).default; } });
 var WorkareaHandler_1 = require("./WorkareaHandler");
-Object.defineProperty(exports, "WorkareaHandler", { enumerable: true, get: function () { return WorkareaHandler_1.default; } });
+Object.defineProperty(exports, "WorkareaHandler", { enumerable: true, get: function () { return __importDefault(WorkareaHandler_1).default; } });
 var InteractionHandler_1 = require("./InteractionHandler");
-Object.defineProperty(exports, "InteractionHandler", { enumerable: true, get: function () { return InteractionHandler_1.default; } });
+Object.defineProperty(exports, "InteractionHandler", { enumerable: true, get: function () { return __importDefault(InteractionHandler_1).default; } });
 var GridHandler_1 = require("./GridHandler");
-Object.defineProperty(exports, "GridHandler", { enumerable: true, get: function () { return GridHandler_1.default; } });
+Object.defineProperty(exports, "GridHandler", { enumerable: true, get: function () { return __importDefault(GridHandler_1).default; } });
 var PortHandler_1 = require("./PortHandler");
-Object.defineProperty(exports, "PortHandler", { enumerable: true, get: function () { return PortHandler_1.default; } });
+Object.defineProperty(exports, "PortHandler", { enumerable: true, get: function () { return __importDefault(PortHandler_1).default; } });
 var LinkHandler_1 = require("./LinkHandler");
-Object.defineProperty(exports, "LinkHandler", { enumerable: true, get: function () { return LinkHandler_1.default; } });
+Object.defineProperty(exports, "LinkHandler", { enumerable: true, get: function () { return __importDefault(LinkHandler_1).default; } });
 var NodeHandler_1 = require("./NodeHandler");
-Object.defineProperty(exports, "NodeHandler", { enumerable: true, get: function () { return NodeHandler_1.default; } });
+Object.defineProperty(exports, "NodeHandler", { enumerable: true, get: function () { return __importDefault(NodeHandler_1).default; } });
 var AlignmentHandler_1 = require("./AlignmentHandler");
-Object.defineProperty(exports, "AlignmentHandler", { enumerable: true, get: function () { return AlignmentHandler_1.default; } });
+Object.defineProperty(exports, "AlignmentHandler", { enumerable: true, get: function () { return __importDefault(AlignmentHandler_1).default; } });
 var GuidelineHandler_1 = require("./GuidelineHandler");
-Object.defineProperty(exports, "GuidelineHandler", { enumerable: true, get: function () { return GuidelineHandler_1.default; } });
+Object.defineProperty(exports, "GuidelineHandler", { enumerable: true, get: function () { return __importDefault(GuidelineHandler_1).default; } });
 var EventHandler_1 = require("./EventHandler");
-Object.defineProperty(exports, "EventHandler", { enumerable: true, get: function () { return EventHandler_1.default; } });
+Object.defineProperty(exports, "EventHandler", { enumerable: true, get: function () { return __importDefault(EventHandler_1).default; } });
 var DrawingHandler_1 = require("./DrawingHandler");
-Object.defineProperty(exports, "DrawingHandler", { enumerable: true, get: function () { return DrawingHandler_1.default; } });
+Object.defineProperty(exports, "DrawingHandler", { enumerable: true, get: function () { return __importDefault(DrawingHandler_1).default; } });
 var ShortcutHandler_1 = require("./ShortcutHandler");
-Object.defineProperty(exports, "ShortcutHandler", { enumerable: true, get: function () { return ShortcutHandler_1.default; } });
+Object.defineProperty(exports, "ShortcutHandler", { enumerable: true, get: function () { return __importDefault(ShortcutHandler_1).default; } });
 var FiberHandler_1 = require("./FiberHandler");
-Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return FiberHandler_1.default; } });
+Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return __importDefault(FiberHandler_1).default; } });
 var CustomHandler_1 = require("./CustomHandler");
-Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return CustomHandler_1.default; } });
+Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return __importDefault(CustomHandler_1).default; } });

package/lib/index.js

@@ -1,20 +1,28 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasObject = exports.Canvas = void 0;
 __exportStar(require("./Canvas"), exports);
 var Canvas_1 = require("./Canvas");
-Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return Canvas_1.default; } });
+Object.defineProperty(exports, "Canvas", { enumerable: true, get: function () { return __importDefault(Canvas_1).default; } });
 var CanvasObject_1 = require("./CanvasObject");
-Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return CanvasObject_1.default; } });
+Object.defineProperty(exports, "CanvasObject", { enumerable: true, get: function () { return __importDefault(CanvasObject_1).default; } });
 __exportStar(require("./handlers"), exports);
 __exportStar(require("./objects"), exports);
 __exportStar(require("./utils"), exports);

package/lib/objects/Chart.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -14,7 +18,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -84,7 +88,7 @@ const Chart = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
         }
     },
     toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
+        return (0, utils_1.toObject)(this, propertiesToInclude, {
             chartOption: this.get('chartOption'),
             container: this.get('container'),
             editable: this.get('editable'),

package/lib/objects/Element.js

@@ -33,7 +33,7 @@ const Element = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
         this.element.innerHTML = html;
     },
     toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
+        return (0, utils_1.toObject)(this, propertiesToInclude, {
             code: this.get('code'),
             container: this.get('container'),
             editable: this.get('editable'),

package/lib/objects/Gif.js

@@ -2,33 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 require("gifler");
-const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Object, {
+const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Image, {
     type: 'gif',
     superType: 'image',
     gifCanvas: null,
+    gifler: undefined,
     isStarted: false,
     initialize(options) {
         options = options || {};
-        this.callSuper('initialize', options);
         this.gifCanvas = document.createElement('canvas');
+        this.callSuper('initialize', this.gifCanvas, options);
     },
     drawFrame(ctx, frame) {
         // update canvas size
         this.gifCanvas.width = frame.width;
         this.gifCanvas.height = frame.height;
         // update canvas that we are using for fabric.js
-        ctx.drawImage(frame.buffer, -frame.width / 2, -frame.height / 2, frame.width, frame.height);
+        ctx.drawImage(frame.buffer, 0, 0);
+        this.canvas?.renderAll();
     },
     _render(ctx) {
         this.callSuper('_render', ctx);
+        this.dirty = true;
         if (!this.isStarted) {
             this.isStarted = true;
-            window
+            this.gifler = window
                 // @ts-ignore
-                .gifler('./images/sample/earth.gif')
-                .frames(this.gifCanvas, (_c, frame) => {
+                .gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif')
+                // .gifler('./images/sample/earth.gif')
+                .frames(this.gifCanvas, (context, frame) => {
                 this.isStarted = true;
-                this.drawFrame(ctx, frame);
+                this.drawFrame(context, frame);
             });
         }
     },

package/lib/objects/Iframe.js

@@ -25,7 +25,7 @@ const Iframe = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
         this.iframeElement.src = src;
     },
     toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
+        return (0, utils_1.toObject)(this, propertiesToInclude, {
             src: this.get('src'),
             container: this.get('container'),
             editable: this.get('editable'),

package/lib/objects/Link.js

@@ -11,7 +11,7 @@ const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
         const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
         Object.assign(options, {
             strokeWidth: 4,
-            id: options.id || uuidv4_1.uuid(),
+            id: options.id || (0, uuidv4_1.uuid)(),
             originX: 'center',
             originY: 'center',
             lockScalingX: true,

package/lib/objects/Node.d.ts

@@ -33,7 +33,7 @@ export declare const DESCRIPTIONS: {
     cron: string;
 };
 export declare const getEllipsis: (text: string, length: number) => string;
-export declare type NodeType = 'TRIGGER' | 'LOGIC' | 'DATA' | 'ACTION';
+export type NodeType = 'TRIGGER' | 'LOGIC' | 'DATA' | 'ACTION';
 export interface NodeObject extends FabricObject<fabric.Group> {
     errorFlag?: fabric.IText;
     label?: fabric.Text;

package/lib/objects/Node.js

@@ -39,7 +39,7 @@ exports.DESCRIPTIONS = {
     json: i18next_1.default.t('common.name'),
     cron: i18next_1.default.t('common.name'),
 };
-exports.getEllipsis = (text, length) => {
+const getEllipsis = (text, length) => {
     if (!length) {
         return /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(text)
             ? text.length > 8
@@ -57,6 +57,7 @@ exports.getEllipsis = (text, length) => {
             ? text.substring(0, length).concat('...')
             : text;
 };
+exports.getEllipsis = getEllipsis;
 const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     type: 'node',
     superType: 'node',
@@ -70,7 +71,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         });
         let name = 'Default Node';
         if (options.name) {
-            name = exports.getEllipsis(options.name, 18);
+            name = (0, exports.getEllipsis)(options.name, 18);
         }
         this.label = new fabric_1.fabric.Text(name || 'Default Node', {
             fontSize: 16,
@@ -96,7 +97,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 || uuidv4_1.uuid(),
+            id: options.id || (0, uuidv4_1.uuid)(),
             width: 200,
             height: 40,
             originX: 'left',
@@ -251,7 +252,7 @@ const Node = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     duplicate() {
         const options = this.toObject();
-        options.id = uuidv4_1.uuid();
+        options.id = (0, uuidv4_1.uuid)();
         options.name = `${options.name}_clone`;
         return new Node(options);
     },

package/lib/objects/Svg.d.ts

@@ -1,12 +1,13 @@
 import { FabricGroup, FabricObject, FabricObjectOption } from '../utils';
-export declare type SvgObject = (FabricGroup | FabricObject) & {
+export type SvgObject = (FabricGroup | FabricObject) & {
     loadSvg(option: SvgOption): Promise<SvgObject>;
-    setFill(value: string): SvgObject;
-    setStroke(value: string): SvgObject;
+    setFill(value: string, filter?: (obj: FabricObject) => boolean): SvgObject;
+    setStroke(value: string, filter?: (obj: FabricObject) => boolean): SvgObject;
 };
 export interface SvgOption extends FabricObjectOption {
-    svg?: string;
+    src?: string;
     loadType?: 'file' | 'svg';
+    keepSize?: boolean;
 }
 declare const Svg: any;
 export default Svg;

package/lib/objects/Svg.js

@@ -8,9 +8,16 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         this.callSuper('initialize', [], option);
         this.loadSvg(option);
     },
-    addSvgElements(objects, options, path) {
-        const createdObj = fabric_1.fabric.util.groupSVGElements(objects, options, path);
-        this.set(options);
+    addSvgElements(objects, options) {
+        const createdObj = fabric_1.fabric.util.groupSVGElements(objects, options);
+        const { height, scaleY } = this;
+        const scale = height ? (height * scaleY) / createdObj.height : createdObj.scaleY;
+        this.set({ ...options, scaleX: scale, scaleY: scale });
+        if (this._objects?.length) {
+            this.getObjects().forEach(obj => {
+                this.remove(obj);
+            });
+        }
         if (createdObj.getObjects) {
             createdObj.getObjects().forEach(obj => {
                 this.add(obj);
@@ -42,10 +49,6 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             }
             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();
@@ -53,30 +56,36 @@ const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         return this;
     },
     loadSvg(option) {
-        const { svg, loadType, fill, stroke } = option;
+        const { src, loadType, fill, stroke } = option;
         return new Promise(resolve => {
             if (loadType === 'svg') {
-                fabric_1.fabric.loadSVGFromString(svg, (objects, options) => {
-                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+                fabric_1.fabric.loadSVGFromString(src, (objects, options) => {
+                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
                 });
             }
             else {
-                fabric_1.fabric.loadSVGFromURL(svg, (objects, options) => {
-                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+                fabric_1.fabric.loadSVGFromURL(src, (objects, options) => {
+                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
                 });
             }
         });
     },
-    setFill(value) {
-        this.getObjects().forEach((obj) => obj.set('fill', value));
+    setFill(value, filter = () => true) {
+        this.getObjects()
+            .filter(filter)
+            .forEach((obj) => obj.set('fill', value));
+        this.canvas.requestRenderAll();
         return this;
     },
-    setStroke(value) {
-        this.getObjects().forEach((obj) => obj.set('stroke', value));
+    setStroke(value, filter = () => true) {
+        this.getObjects()
+            .filter(filter)
+            .forEach((obj) => obj.set('stroke', value));
+        this.canvas.requestRenderAll();
         return this;
     },
     toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
+        return (0, utils_1.toObject)(this, propertiesToInclude, {
             svg: this.get('svg'),
             loadType: this.get('loadType'),
         });

package/lib/objects/Video.js

@@ -55,7 +55,7 @@ const Video = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
         this.player.setSrc(src);
     },
     toObject(propertiesToInclude) {
-        return utils_1.toObject(this, propertiesToInclude, {
+        return (0, utils_1.toObject)(this, propertiesToInclude, {
             src: this.get('src'),
             file: this.get('file'),
             container: this.get('container'),

package/lib/objects/index.js

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

package/lib/utils/ObjectUtil.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="animejs" />
 import { fabric } from 'fabric';
 import { IFilter } from '../handlers/ImageHandler';
-export declare type AnimationType = 'fade' | 'bounce' | 'shake' | 'scaling' | 'rotation' | 'flash' | 'custom' | 'none';
+export type AnimationType = 'fade' | 'bounce' | 'shake' | 'scaling' | 'rotation' | 'flash' | 'custom' | 'none';
 export interface AnimationProperty {
     delay?: number;
     duration?: number;
@@ -37,8 +37,8 @@ export interface TriggerProperty {
 export interface FabricCanvasOption {
     wrapperEl?: HTMLElement;
 }
-export declare type FabricCanvas<T extends any = fabric.Canvas> = T & FabricCanvasOption;
-export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> = T & {
+export type FabricCanvas<T extends any = fabric.Canvas> = T & FabricCanvasOption;
+export type FabricObjectOption<T extends any = fabric.IObjectOptions> = T & {
     /**
      * Object id
      * @type {string}
@@ -175,15 +175,15 @@ export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> =
     clickable?: boolean;
     [key: string]: any;
 };
-export declare type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
-export declare type FabricGroup = FabricObject<fabric.Group> & {
+export type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
+export type FabricGroup = FabricObject<fabric.Group> & {
     /**
      * Object that config group
      * @type {FabricObject[]}
      */
     objects?: FabricObject[];
 };
-export declare type FabricImage = FabricObject & fabric.Image & {
+export type FabricImage = FabricObject & fabric.Image & {
     /**
      * Image URL
      * @type {string}
@@ -217,7 +217,7 @@ export interface FabricElement extends FabricObject<fabric.Rect> {
      */
     setSource: (source: any) => void;
 }
-export declare type WorkareaLayout = 'fixed' | 'responsive' | 'fullscreen';
+export type WorkareaLayout = 'fixed' | 'responsive' | 'fullscreen';
 export interface WorkareaOption {
     /**
      * Image URL
@@ -250,7 +250,7 @@ export interface WorkareaOption {
      */
     layout?: WorkareaLayout;
 }
-export declare type WorkareaObject = FabricImage & {
+export type WorkareaObject = FabricImage & {
     /**
      * Workarea Layout Type
      * @type {WorkareaLayout}
@@ -375,7 +375,7 @@ export interface KeyEvent {
     cut?: boolean;
     grab?: boolean;
 }
-export declare type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
+export type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
 export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent, 'e'> {
     e: T;
     target?: FabricObject;
@@ -392,7 +392,7 @@ export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent,
         width: number;
     };
 }
-export declare type FabricObjects = {
+export type FabricObjects = {
     [key: string]: {
         create: (...args: any) => FabricObject;
     };

package/lib/utils/ObjectUtil.js

@@ -8,6 +8,7 @@ const fabric_1 = require("fabric");
  * @param {string[]} propertiesToInclude
  * @param {{ [key: string]: any }} [properties]
  */
-exports.toObject = (obj, propertiesToInclude, properties) => fabric_1.fabric.util.object.extend(obj.callSuper('toObject'), propertiesToInclude.reduce((prev, property) => Object.assign(prev, {
+const toObject = (obj, propertiesToInclude, properties) => fabric_1.fabric.util.object.extend(obj.callSuper('toObject'), propertiesToInclude.reduce((prev, property) => Object.assign(prev, {
     [property]: obj.get(property),
 }), Object.assign({}, properties)));
+exports.toObject = toObject;

package/lib/utils/index.js

@@ -1,13 +1,17 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ObjectUtil"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.55",
+	"version": "0.0.57",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",
@@ -124,11 +124,11 @@
 		"tslint": "^6.1.1",
 		"tslint-react": "^5.0.0",
 		"typedoc": "^0.17.4",
-		"typescript": "^3.9.10",
+		"typescript": "^4.7.4",
 		"url-loader": "^4.1.0",
 		"webpack": "^4.46.0",
 		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^3.11.3",
+		"webpack-dev-server": "^4.15.1",
 		"webpack-merge": "^4.2.2",
 		"workbox-webpack-plugin": "^5.1.2"
 	}