react-design-editor 0.0.56 → 0.0.57

package/lib/Canvas.d.ts

@@ -10,7 +10,7 @@ export interface CanvasInstance {
     canvas: FabricCanvas;
     container: HTMLDivElement;
 }
-export declare type CanvasProps = HandlerOptions & {
+export type CanvasProps = HandlerOptions & {
     responsive?: boolean;
     style?: React.CSSProperties;
 };

package/lib/Canvas.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;
 };
@@ -37,7 +41,7 @@ class InternalCanvas extends react_1.Component {
         super(...arguments);
         this.containerRef = react_1.default.createRef();
         this.state = {
-            id: uuidv4_1.uuid(),
+            id: (0, uuidv4_1.uuid)(),
             loaded: false,
         };
         this.createObserver = () => {
@@ -66,6 +70,16 @@ class InternalCanvas extends react_1.Component {
             });
         };
     }
+    static { this.defaultProps = {
+        id: (0, uuidv4_1.uuid)(),
+        editable: true,
+        zoomEnabled: true,
+        minZoom: 30,
+        maxZoom: 300,
+        responsive: true,
+        width: 0,
+        height: 0,
+    }; }
     componentDidMount() {
         const { editable, canvasOption, width, height, responsive, ...other } = this.props;
         const { id } = this.state;
@@ -150,23 +164,13 @@ class InternalCanvas extends react_1.Component {
             react_1.default.createElement("canvas", { id: `canvas_${id}` })));
     }
 }
-InternalCanvas.defaultProps = {
-    id: uuidv4_1.uuid(),
-    editable: true,
-    zoomEnabled: true,
-    minZoom: 30,
-    maxZoom: 300,
-    responsive: true,
-    width: 0,
-    height: 0,
-};
 const Canvas = react_1.default.forwardRef((props, ref) => {
-    const canvasRef = react_1.useRef();
+    const canvasRef = (0, react_1.useRef)();
     react_1.default.useImperativeHandle(ref, () => ({
         handler: canvasRef.current.handler,
         canvas: canvasRef.current.canvas,
         container: canvasRef.current.container,
     }));
-    return react_1.default.createElement(InternalCanvas, Object.assign({ ref: canvasRef }, props));
+    return react_1.default.createElement(InternalCanvas, { ref: canvasRef, ...props });
 });
 exports.default = Canvas;

package/lib/CanvasObject.js

@@ -7,7 +7,8 @@ exports.createCanvasObject = void 0;
 const fabric_1 = require("fabric");
 const objects_1 = require("./objects");
 const Svg_1 = __importDefault(require("./objects/Svg"));
-exports.createCanvasObject = (objectSchema) => objectSchema;
+const createCanvasObject = (objectSchema) => objectSchema;
+exports.createCanvasObject = createCanvasObject;
 const CanvasObject = {
     group: {
         create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),

package/lib/constants/index.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;
 };

package/lib/handlers/AnimationHandler.js

@@ -214,8 +214,8 @@ class AnimationHandler {
                 update: (instance) => {
                     if (type === 'flash') {
                         // I don't know why it works. Magic code...
-                        warning_1.default(instance.animations[0], 'instance.animations[0] undefined.');
-                        warning_1.default(instance.animations[1], 'instance.animations[1] undefined.');
+                        (0, warning_1.default)(instance.animations[0], 'instance.animations[0] undefined.');
+                        (0, 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') {
@@ -338,7 +338,7 @@ class AnimationHandler {
                 console.warn('Not supported type.');
                 return null;
             }
-            return animejs_1.default(option);
+            return (0, animejs_1.default)(option);
         };
         this.handler = handler;
     }

package/lib/handlers/ContextmenuHandler.js

@@ -11,7 +11,7 @@ class ContextmenuHandler {
          * Show context menu
          *
          */
-        this.show = debounce_1.default(async (e, target) => {
+        this.show = (0, debounce_1.default)(async (e, target) => {
             const { onContext } = this.handler;
             while (this.contextmenuEl.hasChildNodes()) {
                 this.contextmenuEl.removeChild(this.contextmenuEl.firstChild);
@@ -34,7 +34,7 @@ class ContextmenuHandler {
          * Hide context menu
          *
          */
-        this.hide = debounce_1.default(() => {
+        this.hide = (0, debounce_1.default)(() => {
             if (this.contextmenuEl) {
                 this.contextmenuEl.classList.add('contextmenu-hidden');
             }

package/lib/handlers/DrawingHandler.js

@@ -47,7 +47,7 @@ class DrawingHandler {
                     hoverCursor: 'pointer',
                 });
                 circle.set({
-                    id: uuidv4_1.uuid(),
+                    id: (0, uuidv4_1.uuid)(),
                 });
                 if (!this.handler.pointArray.length) {
                     circle.set({
@@ -114,7 +114,7 @@ class DrawingHandler {
             },
             generate: (pointArray) => {
                 const points = [];
-                const id = uuidv4_1.uuid();
+                const id = (0, uuidv4_1.uuid)();
                 pointArray.forEach(point => {
                     points.push({
                         x: point.left,
@@ -144,6 +144,52 @@ class DrawingHandler {
                 this.handler.activeShape = null;
                 this.handler.interactionHandler.selection();
             },
+            // TODO... polygon resize
+            // createResize: (target, points) => {
+            //     points.forEach((point, index) => {
+            //         const { x, y } = point;
+            //         const circle = new fabric.Circle({
+            //             name: index,
+            //             radius: 3,
+            //             fill: '#ffffff',
+            //             stroke: '#333333',
+            //             strokeWidth: 0.5,
+            //             left: x,
+            //             top: y,
+            //             hasBorders: false,
+            //             hasControls: false,
+            //             originX: 'center',
+            //             originY: 'center',
+            //             hoverCursor: 'pointer',
+            //             parentId: target.id,
+            //         });
+            //         this.handler.pointArray.push(circle);
+            //     });
+            //     const group = [target].concat(this.pointArray);
+            //     this.handler.canvas.add(new fabric.Group(group, { type: 'polygon', id: uuid() }));
+            // },
+            // removeResize: () => {
+            //     if (this.handler.pointArray) {
+            //         this.handler.pointArray.forEach((point) => {
+            //             this.handler.canvas.remove(point);
+            //         });
+            //         this.handler.pointArray = [];
+            //     }
+            // },
+            // movingResize: (target, e) => {
+            //     const points = target.diffPoints || target.points;
+            //     const diffPoints = [];
+            //     points.forEach((point) => {
+            //         diffPoints.push({
+            //             x: point.x + e.movementX,
+            //             y: point.y + e.movementY,
+            //         });
+            //     });
+            //     target.set({
+            //         diffPoints,
+            //     });
+            //     this.handler.canvas.renderAll();
+            // },
         };
         this.line = {
             init: () => {
@@ -206,7 +252,7 @@ class DrawingHandler {
                 const { absolutePointer } = opt;
                 const { x, y } = absolutePointer;
                 let points = [];
-                const id = uuidv4_1.uuid();
+                const id = (0, uuidv4_1.uuid)();
                 this.handler.pointArray.forEach(point => {
                     points = points.concat(point.left, point.top, x, y);
                     this.handler.canvas.remove(point);
@@ -294,7 +340,7 @@ class DrawingHandler {
                 });
                 this.handler.canvas.remove(this.handler.activeLine);
                 const option = {
-                    id: uuidv4_1.uuid(),
+                    id: (0, uuidv4_1.uuid)(),
                     points,
                     type: 'arrow',
                     stroke: 'rgba(0, 0, 0, 1)',

package/lib/handlers/ElementHandler.d.ts

@@ -4,8 +4,8 @@ import { VideoObject } from '../objects/Video';
 import { ChartObject } from '../objects/Chart';
 import { IframeObject } from '../objects/Iframe';
 import { ElementObject } from '../objects/Element';
-export declare type ElementType = 'container' | 'script' | 'style';
-export declare type ElementObjectType = VideoObject | ChartObject | IframeObject | ElementObject;
+export type ElementType = 'container' | 'script' | 'style';
+export type ElementObjectType = VideoObject | ChartObject | IframeObject | ElementObject;
 export interface ElementCode {
     html?: string;
     css?: string;

package/lib/handlers/Handler.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+/// <reference types="animejs" />
 import { fabric } from 'fabric';
 import { AlignmentHandler, AnimationHandler, ChartHandler, ContextmenuHandler, CropHandler, CustomHandler, DrawingHandler, ElementHandler, EventHandler, GridHandler, GuidelineHandler, ImageHandler, InteractionHandler, LinkHandler, NodeHandler, PortHandler, ShortcutHandler, TooltipHandler, TransactionHandler, WorkareaHandler, ZoomHandler } from '.';
+import { SvgObject } from '../objects/Svg';
 import { CanvasOption, FabricCanvas, FabricGroup, FabricImage, FabricObject, FabricObjectOption, FabricObjects, GridOption, GuidelineOption, InteractionMode, KeyEvent, WorkareaObject, WorkareaOption } from '../utils';
 import { TransactionEvent } from './TransactionHandler';
 export interface HandlerCallback {
@@ -169,7 +171,7 @@ export interface HandlerOption {
     };
     [key: string]: any;
 }
-export declare type HandlerOptions = HandlerOption & HandlerCallback;
+export type HandlerOptions = HandlerOption & HandlerCallback;
 /**
  * Main handler for Canvas
  * @class Handler
@@ -324,16 +326,59 @@ declare class Handler implements HandlerOptions {
      * Set the image
      * @param {FabricImage} obj
      * @param {(File | string)} [source]
+     * @param {boolean} [keepSize]
      * @returns
      */
-    setImage: (obj: FabricImage, source?: File | string) => Promise<FabricImage>;
+    setImage: (obj: FabricImage, source?: File | string, keepSize?: boolean, options?: fabric.IImageOptions) => Promise<FabricImage>;
     /**
      * Set image by id
      * @param {string} id
      * @param {*} source
      * @returns
      */
-    setImageById: (id: string, source: any) => Promise<FabricImage>;
+    setImageById: (id: string, source: any, keepSize?: boolean) => Promise<fabric.Object & fabric.IObjectOptions & {
+        [key: string]: any;
+        id?: string;
+        parentId?: string;
+        originOpacity?: number;
+        originTop?: number;
+        originLeft?: number;
+        originScaleX?: number;
+        originScaleY?: number;
+        originAngle?: number;
+        originFill?: string | fabric.Pattern | fabric.Gradient;
+        originStroke?: string;
+        originRotation?: number;
+        editable?: boolean;
+        superType?: string;
+        description?: string;
+        animation?: import("../utils").AnimationProperty;
+        anime?: import("animejs").AnimeInstance;
+        tooltip?: import("../utils").TooltipProperty;
+        link?: import("../utils").LinkProperty;
+        animating?: boolean;
+        class?: string;
+        deletable?: boolean;
+        dblclick?: boolean;
+        cloneable?: boolean;
+        locked?: boolean;
+        rotation?: number;
+        clickable?: boolean;
+    } & fabric.Image & {
+        src?: string;
+        file?: File;
+        filters?: import("./ImageHandler").IFilter[];
+        _element?: any;
+    }>;
+    /**
+     * Set Svg
+     *
+     * @param {SvgObject} obj
+     * @param {(File | string)} [source]
+     * @param {boolean} [setSvg]
+     * @param {boolean} [keepSize]
+     */
+    setSvg: (obj: SvgObject, source?: File | string, isPath?: boolean, keepSize?: boolean) => Promise<SvgObject>;
     /**
      * Set visible
      * @param {boolean} [visible]

package/lib/handlers/Handler.js

@@ -331,15 +331,25 @@ class Handler {
          * Set the image
          * @param {FabricImage} obj
          * @param {(File | string)} [source]
+         * @param {boolean} [keepSize]
          * @returns
          */
-        this.setImage = (obj, source) => {
+        this.setImage = (obj, source, keepSize, options) => {
+            const { height, scaleY } = obj;
+            const renderCallbaack = (imgObj, src) => {
+                if (keepSize) {
+                    const scale = (height * scaleY) / imgObj.height;
+                    imgObj.set({ scaleY: scale, scaleX: scale, src });
+                }
+                this.canvas.requestRenderAll();
+            };
             return new Promise(resolve => {
                 if (!source) {
                     obj.set('file', null);
                     obj.set('src', null);
-                    resolve(obj.setSrc('./images/sample/transparentBg.png', () => this.canvas.renderAll(), {
+                    resolve(obj.setSrc('./images/sample/transparentBg.png', (imgObj) => renderCallbaack(imgObj, null), {
                         dirty: true,
+                        ...options,
                     }));
                 }
                 if (source instanceof File) {
@@ -347,8 +357,9 @@ class Handler {
                     reader.onload = () => {
                         obj.set('file', source);
                         obj.set('src', null);
-                        resolve(obj.setSrc(reader.result, () => this.canvas.renderAll(), {
+                        resolve(obj.setSrc(reader.result, (imgObj) => renderCallbaack(imgObj, reader.result), {
                             dirty: true,
+                            ...options,
                         }));
                     };
                     reader.readAsDataURL(source);
@@ -356,9 +367,10 @@ class Handler {
                 else {
                     obj.set('file', null);
                     obj.set('src', source);
-                    resolve(obj.setSrc(source, () => this.canvas.renderAll(), {
+                    resolve(obj.setSrc(source, (imgObj) => renderCallbaack(imgObj, source), {
                         dirty: true,
                         crossOrigin: 'anonymous',
+                        ...options,
                     }));
                 }
             });
@@ -369,9 +381,32 @@ class Handler {
          * @param {*} source
          * @returns
          */
-        this.setImageById = (id, source) => {
+        this.setImageById = (id, source, keepSize) => {
             const findObject = this.findById(id);
-            return Promise.resolve(this.setImage(findObject, source));
+            return Promise.resolve(this.setImage(findObject, source, keepSize));
+        };
+        /**
+         * Set Svg
+         *
+         * @param {SvgObject} obj
+         * @param {(File | string)} [source]
+         * @param {boolean} [setSvg]
+         * @param {boolean} [keepSize]
+         */
+        this.setSvg = (obj, source, isPath, keepSize) => {
+            return new Promise(resolve => {
+                if (!source) {
+                    resolve(obj.loadSvg({ src: './images/sample/chiller.svg', loadType: 'file', keepSize }));
+                }
+                if (source instanceof File) {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(source);
+                    reader.onload = () => resolve(obj.loadSvg({ src: reader.result, loadType: 'file', keepSize }));
+                }
+                else {
+                    resolve(obj.loadSvg({ src: source, loadType: isPath ? 'svg' : 'file', keepSize }));
+                }
+            });
         };
         /**
          * Set visible
@@ -682,7 +717,7 @@ class Handler {
                     const activeSelection = clonedObj;
                     activeSelection.canvas = this.canvas;
                     activeSelection.forEachObject((obj) => {
-                        obj.set('id', uuidv4_1.uuid());
+                        obj.set('id', (0, uuidv4_1.uuid)());
                         if (obj.superType === 'node') {
                             obj.set('shadow', {
                                 color: obj.stroke,
@@ -701,7 +736,7 @@ class Handler {
                 }
                 else {
                     if (activeObject.id === clonedObj.id) {
-                        clonedObj.set('id', uuidv4_1.uuid());
+                        clonedObj.set('id', (0, uuidv4_1.uuid)());
                     }
                     if (clonedObj.superType === 'node') {
                         clonedObj.set('shadow', {
@@ -738,7 +773,7 @@ class Handler {
                     cloned.set({
                         left: cloned.left + grid,
                         top: cloned.top + grid,
-                        id: uuidv4_1.uuid(),
+                        id: (0, uuidv4_1.uuid)(),
                         evented: true,
                     });
                     this.canvas.add(cloned);
@@ -976,13 +1011,13 @@ class Handler {
                 clonedObj.set({
                     left: clonedObj.left + padding,
                     top: clonedObj.top + padding,
-                    id: isCut ? clipboard.id : uuidv4_1.uuid(),
+                    id: isCut ? clipboard.id : (0, uuidv4_1.uuid)(),
                     evented: true,
                 });
                 if (clonedObj.type === 'activeSelection') {
                     clonedObj.canvas = this.canvas;
                     clonedObj.forEachObject((obj) => {
-                        obj.set('id', isCut ? obj.id : uuidv4_1.uuid());
+                        obj.set('id', isCut ? obj.id : (0, uuidv4_1.uuid)());
                         this.canvas.add(obj);
                         if (obj.dblclick) {
                             obj.on('mousedblclick', this.eventHandler.object.mousedblclick);
@@ -1046,7 +1081,7 @@ class Handler {
                 return false;
             });
             if (!exist) {
-                warning_1.default(true, 'Not found object by id.');
+                (0, warning_1.default)(true, 'Not found object by id.');
                 return null;
             }
             return findObject;
@@ -1252,7 +1287,7 @@ class Handler {
                     obj.top += diffTop;
                 }
                 if (obj.superType === 'element') {
-                    obj.id = uuidv4_1.uuid();
+                    obj.id = (0, uuidv4_1.uuid)();
                 }
                 this.add(obj, false, true);
                 this.canvas.renderAll();
@@ -1281,7 +1316,7 @@ class Handler {
             }
             const group = activeObject.toGroup();
             group.set({
-                id: uuidv4_1.uuid(),
+                id: (0, uuidv4_1.uuid)(),
                 name: 'New group',
                 type: 'group',
                 ...this.objectOption,
@@ -1626,7 +1661,7 @@ class Handler {
          * @param {string[]} propertiesToInclude
          */
         this.setPropertiesToInclude = (propertiesToInclude) => {
-            this.propertiesToInclude = lodash_1.union(propertiesToInclude, this.propertiesToInclude);
+            this.propertiesToInclude = (0, lodash_1.union)(propertiesToInclude, this.propertiesToInclude);
         };
         /**
          * Register custom handler

package/lib/handlers/ImageHandler.d.ts

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric';
 import Handler from './Handler';
-export declare type GrayscaleModeType = 'average' | 'luminosity' | 'lightness';
+export type GrayscaleModeType = 'average' | 'luminosity' | 'lightness';
 export interface RemoveColorFilter {
     color?: string;
     distance?: number;
@@ -23,7 +23,7 @@ export interface BlendImageFilter {
 export interface HueRotationFilter {
     rotation?: number;
 }
-export declare type ResizeType = 'bilinear' | 'hermite' | 'sliceHack' | 'lanczos';
+export type ResizeType = 'bilinear' | 'hermite' | 'sliceHack' | 'lanczos';
 export interface ResizeFilter {
     resizeType?: ResizeType;
     scaleX?: number;
@@ -63,7 +63,7 @@ export interface RemoveWhiteFilter {
     /** @default 20 */
     distance?: number;
 }
-export declare type ValuesOf<T extends any[]> = T[number];
+export type ValuesOf<T extends any[]> = T[number];
 export interface IFilter {
     type: typeof FILTER_TYPES[number];
     [key: string]: any;

package/lib/handlers/ImageHandler.js

@@ -35,7 +35,8 @@ exports.FILTER_TYPES = [
     'multiply',
     'sepia2',
 ];
-exports.capitalize = (str) => (str ? str.charAt(0).toUpperCase() + str.slice(1) : false);
+const capitalize = (str) => (str ? str.charAt(0).toUpperCase() + str.slice(1) : false);
+exports.capitalize = capitalize;
 const SHARPEN_MATRIX = [0, -1, 0, -1, 5, -1, 0, -1, 0];
 const EMBOSS_MATRIX = [1, 1, 1, 1, 0.7, -1, -1, -1, -1];
 /**
@@ -143,10 +144,10 @@ class ImageHandler {
         this.createFilters = (filters) => {
             return filters.reduce((prev, filter) => {
                 let type = filter.type;
-                if (type.toLowerCase() === 'convolute' && isEqual_1.default(filter.matrix, SHARPEN_MATRIX)) {
+                if (type.toLowerCase() === 'convolute' && (0, isEqual_1.default)(filter.matrix, SHARPEN_MATRIX)) {
                     type = 'sharpen';
                 }
-                else if (type.toLowerCase() === 'convolute' && isEqual_1.default(filter.matrix, EMBOSS_MATRIX)) {
+                else if (type.toLowerCase() === 'convolute' && (0, isEqual_1.default)(filter.matrix, EMBOSS_MATRIX)) {
                     type = 'emboss';
                 }
                 const findIndex = exports.FILTER_TYPES.findIndex(filterType => type.toLowerCase() === filterType);

package/lib/handlers/InteractionHandler.d.ts

@@ -1,6 +1,6 @@
 import { FabricObject, InteractionMode } from '../utils';
 import Handler from './Handler';
-declare type IReturnType = {
+type IReturnType = {
     selectable?: boolean;
     evented?: boolean;
 } | boolean;

package/lib/handlers/LinkHandler.js

@@ -67,7 +67,7 @@ class LinkHandler {
          */
         this.generate = (port) => {
             if (!port) {
-                warning_1.default(!port, 'Does not exist target port.');
+                (0, warning_1.default)(!port, 'Does not exist target port.');
                 return;
             }
             if (this.isDuplicate(port)) {
@@ -209,7 +209,7 @@ class LinkHandler {
          * @returns
          */
         this.isConnected = (port) => {
-            warning_1.default(port.enabled, 'A connected node already exists.');
+            (0, warning_1.default)(port.enabled, 'A connected node already exists.');
             return !port.enabled;
         };
         /**
@@ -219,7 +219,7 @@ class LinkHandler {
          */
         this.isSameNode = (port) => {
             const validate = port.nodeId === this.handler.activeLine.fromNode.id;
-            warning_1.default(!validate, 'Cannot select the same node.');
+            (0, warning_1.default)(!validate, 'Cannot select the same node.');
             return validate;
         };
         /**
@@ -229,7 +229,7 @@ class LinkHandler {
          */
         this.isDuplicate = (port) => {
             const validate = port.links.some(link => link.fromNode.id === this.handler.activeLine.fromNode.id);
-            warning_1.default(!validate, 'Duplicate connections cannot be made.');
+            (0, warning_1.default)(!validate, 'Duplicate connections cannot be made.');
             return validate;
         };
         /**
@@ -238,7 +238,7 @@ class LinkHandler {
          */
         this.isDrawing = () => {
             const validate = this.handler.interactionMode === 'link' && this.handler.activeLine;
-            warning_1.default(!validate, 'Already drawing links.');
+            (0, warning_1.default)(!validate, 'Already drawing links.');
             return validate;
         };
         this.handler = handler;

package/lib/handlers/TooltipHandler.js

@@ -12,7 +12,7 @@ class TooltipHandler {
          *
          * @param {FabricObject} [target]
          */
-        this.show = debounce_1.default(async (target) => {
+        this.show = (0, debounce_1.default)(async (target) => {
             if (target.tooltip && target.tooltip.enabled) {
                 while (this.tooltipEl.hasChildNodes()) {
                     this.tooltipEl.removeChild(this.tooltipEl.firstChild);
@@ -55,7 +55,7 @@ class TooltipHandler {
          * Hide tooltip
          * @param {fabric.Object} [_target]
          */
-        this.hide = debounce_1.default((_target) => {
+        this.hide = (0, debounce_1.default)((_target) => {
             this.handler.target = null;
             if (this.tooltipEl) {
                 this.tooltipEl.classList.add('tooltip-hidden');

package/lib/handlers/TransactionHandler.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="lodash" />
 import { FabricObject } from '../utils';
 import Handler from './Handler';
-export declare type TransactionType = 'add' | 'remove' | 'modified' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
+export type TransactionType = 'add' | 'remove' | 'modified' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
 export interface TransactionTransform {
     scaleX?: number;
     scaleY?: number;

package/lib/handlers/TransactionHandler.js

@@ -61,7 +61,7 @@ class TransactionHandler {
          * Undo transaction
          *
          */
-        this.undo = throttle_1.default(() => {
+        this.undo = (0, throttle_1.default)(() => {
             const undo = this.undos.pop();
             if (!undo) {
                 return;
@@ -76,7 +76,7 @@ class TransactionHandler {
          * Redo transaction
          *
          */
-        this.redo = throttle_1.default(() => {
+        this.redo = (0, throttle_1.default)(() => {
             const redo = this.redos.pop();
             if (!redo) {
                 return;