react-design-editor 0.0.61 → 0.0.63

package/dist/react-design-editor.min.js.LICENSE.txt

@@ -10,17 +10,8 @@
  *
  */
 
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <http://feross.org>
- * @license  MIT
- */
-
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
 /**

package/lib/Canvas.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 const react_1 = __importStar(require("react"));
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-const uuidv4_1 = require("uuidv4");
+const uuid_1 = require("uuid");
 const constants_1 = require("./constants");
 const Handler_1 = __importDefault(require("./handlers/Handler"));
 require("./styles/canvas.less");
@@ -41,7 +41,7 @@ class InternalCanvas extends react_1.Component {
         super(...arguments);
         this.containerRef = react_1.default.createRef();
         this.state = {
-            id: (0, uuidv4_1.uuid)(),
+            id: (0, uuid_1.v4)(),
             loaded: false,
         };
         this.createObserver = () => {
@@ -71,7 +71,7 @@ class InternalCanvas extends react_1.Component {
         };
     }
     static { this.defaultProps = {
-        id: (0, uuidv4_1.uuid)(),
+        id: (0, uuid_1.v4)(),
         editable: true,
         zoomEnabled: true,
         minZoom: 30,

package/lib/CanvasObject.js

@@ -81,6 +81,9 @@ const CanvasObject = {
     node: {
         create: (option) => new objects_1.Node(option),
     },
+    lineLink: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.LineLink(fromNode, fromPort, toNode, toPort, option),
+    },
     link: {
         create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
     },

package/lib/constants/code.d.ts

@@ -1,6 +1,7 @@
 export declare const ESCAPE = "Escape";
 export declare const DELETE = "Delete";
 export declare const BACKSPACE = "Backspace";
+export declare const SPACE = "Space";
 export declare const EQUAL = "Equal";
 export declare const MINUS = "Minus";
 export declare const KEY_A = "KeyA";

package/lib/constants/code.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_DOWN = exports.ARROW_UP = exports.KEY_X = exports.KEY_P = exports.KEY_O = exports.KEY_Y = exports.KEY_Z = exports.KEY_V = exports.KEY_C = exports.KEY_W = exports.KEY_Q = exports.KEY_A = exports.MINUS = exports.EQUAL = exports.BACKSPACE = exports.DELETE = exports.ESCAPE = void 0;
+exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_DOWN = exports.ARROW_UP = exports.KEY_X = exports.KEY_P = exports.KEY_O = exports.KEY_Y = exports.KEY_Z = exports.KEY_V = exports.KEY_C = exports.KEY_W = exports.KEY_Q = exports.KEY_A = exports.MINUS = exports.EQUAL = exports.SPACE = exports.BACKSPACE = exports.DELETE = exports.ESCAPE = void 0;
 exports.ESCAPE = 'Escape';
 exports.DELETE = 'Delete';
 exports.BACKSPACE = 'Backspace';
+exports.SPACE = 'Space';
 exports.EQUAL = 'Equal';
 exports.MINUS = 'Minus';
 exports.KEY_A = 'KeyA';

package/lib/handlers/AbstractHandler.d.ts

@@ -0,0 +1,6 @@
+import { Handler } from '.';
+export default abstract class AbstractHandler {
+    protected handler: Handler;
+    constructor(handler: Handler);
+    protected initialize(): void;
+}

package/lib/handlers/AbstractHandler.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class AbstractHandler {
+    constructor(handler) {
+        this.handler = handler;
+        this.initialize();
+    }
+    initialize() { }
+}
+exports.default = AbstractHandler;

package/lib/handlers/DrawingHandler.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
-const uuidv4_1 = require("uuidv4");
+const uuid_1 = require("uuid");
 const objects_1 = require("../objects");
 class DrawingHandler {
     constructor(handler) {
@@ -47,7 +47,7 @@ class DrawingHandler {
                     hoverCursor: 'pointer',
                 });
                 circle.set({
-                    id: (0, uuidv4_1.uuid)(),
+                    id: (0, uuid_1.v4)(),
                 });
                 if (!this.handler.pointArray.length) {
                     circle.set({
@@ -114,7 +114,7 @@ class DrawingHandler {
             },
             generate: (pointArray) => {
                 const points = [];
-                const id = (0, uuidv4_1.uuid)();
+                const id = (0, uuid_1.v4)();
                 pointArray.forEach(point => {
                     points.push({
                         x: point.left,
@@ -252,7 +252,7 @@ class DrawingHandler {
                 const { absolutePointer } = opt;
                 const { x, y } = absolutePointer;
                 let points = [];
-                const id = (0, uuidv4_1.uuid)();
+                const id = (0, uuid_1.v4)();
                 this.handler.pointArray.forEach(point => {
                     points = points.concat(point.left, point.top, x, y);
                     this.handler.canvas.remove(point);
@@ -340,7 +340,7 @@ class DrawingHandler {
                 });
                 this.handler.canvas.remove(this.handler.activeLine);
                 const option = {
-                    id: (0, uuidv4_1.uuid)(),
+                    id: (0, uuid_1.v4)(),
                     points,
                     type: 'arrow',
                     stroke: 'rgba(0, 0, 0, 1)',

package/lib/handlers/EventHandler.d.ts

@@ -1,5 +1,5 @@
 import { FabricEvent } from '../utils';
-import Handler from './Handler';
+import type Handler from './Handler';
 /**
  * Event Handler Class
  * @author salgum1114

package/lib/handlers/EventHandler.js

@@ -313,9 +313,7 @@ class EventHandler {
             const { target } = event;
             if (editable) {
                 if (this.handler.prevTarget && this.handler.prevTarget.superType === 'link') {
-                    this.handler.prevTarget.set({
-                        stroke: this.handler.prevTarget.originStroke || this.handler.prevTarget.stroke,
-                    });
+                    this.handler.prevTarget.setColor(this.handler.prevTarget.originStroke || this.handler.prevTarget.stroke);
                 }
                 if (target && target.type === 'fromPort') {
                     this.handler.linkHandler.init(target);
@@ -338,9 +336,8 @@ class EventHandler {
                 this.handler.guidelineHandler.zoom = this.handler.canvas.getZoom();
                 if (this.handler.interactionMode === 'selection') {
                     if (target && target.superType === 'link') {
-                        target.set({
-                            stroke: target.selectedStroke || 'green',
-                        });
+                        target.line.set({ stroke: target.selectedStroke || 'green' });
+                        target.arrow.set({ fill: target.selectedStroke || 'green' });
                     }
                     this.handler.prevTarget = target;
                     return;
@@ -428,7 +425,7 @@ class EventHandler {
             else if (this.handler.interactionMode === 'link') {
                 if (this.handler.activeLine && this.handler.activeLine.class === 'line') {
                     const pointer = this.handler.canvas.getPointer(event.e);
-                    this.handler.activeLine.set({ x2: pointer.x, y2: pointer.y });
+                    this.handler.activeLine.update(this.handler.activeLine.fromPort, { left: pointer.x, top: pointer.y });
                 }
                 this.handler.canvas.requestRenderAll();
             }

package/lib/handlers/GridHandler.d.ts

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric';
-import Handler from './Handler';
 import { FabricObject } from '../utils';
+import type Handler from './Handler';
 declare class GridHandler {
     handler?: Handler;
     constructor(handler: Handler);

package/lib/handlers/GridHandler.js

@@ -10,31 +10,51 @@ class GridHandler {
         this.initialize = () => {
             const { grid, lineColor, borderColor, enabled } = this.handler.gridOption;
             if (enabled && grid) {
-                const width = 5000;
-                const gridLength = width / grid;
-                const lineOptions = {
-                    stroke: lineColor,
-                    selectable: false,
-                    evented: false,
-                    id: 'grid',
-                };
-                for (let i = 0; i < gridLength; i++) {
-                    const distance = i * grid;
-                    const fhorizontal = new fabric_1.fabric.Line([distance, -width, distance, width], lineOptions);
-                    const shorizontal = new fabric_1.fabric.Line([distance - width, -width, distance - width, width], lineOptions);
-                    this.handler.canvas.add(fhorizontal);
-                    this.handler.canvas.add(shorizontal);
-                    const fvertical = new fabric_1.fabric.Line([-width, distance - width, width, distance - width], lineOptions);
-                    const svertical = new fabric_1.fabric.Line([-width, distance, width, distance], lineOptions);
-                    this.handler.canvas.add(fvertical);
-                    this.handler.canvas.add(svertical);
-                    if (i % 5 === 0) {
-                        fhorizontal.set({ stroke: borderColor });
-                        shorizontal.set({ stroke: borderColor });
-                        fvertical.set({ stroke: borderColor });
-                        svertical.set({ stroke: borderColor });
-                    }
+                const patternCanvas = document.createElement('canvas');
+                patternCanvas.width = grid * 5;
+                patternCanvas.height = grid * 5;
+                const ctx = patternCanvas.getContext('2d');
+                // 작은 칸 선 (얇은 회색)
+                ctx.strokeStyle = lineColor;
+                ctx.lineWidth = 1;
+                for (let i = 0; i <= 5; i++) {
+                    const pos = i * grid;
+                    // 세로 얇은 선
+                    ctx.beginPath();
+                    ctx.moveTo(pos, 0);
+                    ctx.lineTo(pos, patternCanvas.height);
+                    ctx.stroke();
+                    // 가로 얇은 선
+                    ctx.beginPath();
+                    ctx.moveTo(0, pos);
+                    ctx.lineTo(patternCanvas.width, pos);
+                    ctx.stroke();
                 }
+                // 큰 칸 선 (굵은 진회색)
+                ctx.strokeStyle = borderColor;
+                // 바깥 세로선 (왼쪽, 오른쪽)
+                ctx.beginPath();
+                ctx.moveTo(0, 0);
+                ctx.lineTo(0, patternCanvas.height);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(patternCanvas.width, 0);
+                ctx.lineTo(patternCanvas.width, patternCanvas.height);
+                ctx.stroke();
+                // 바깥 가로선 (위쪽, 아래쪽)
+                ctx.beginPath();
+                ctx.moveTo(0, 0);
+                ctx.lineTo(patternCanvas.width, 0);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(0, patternCanvas.height);
+                ctx.lineTo(patternCanvas.width, patternCanvas.height);
+                ctx.stroke();
+                const image = new Image();
+                image.src = patternCanvas.toDataURL();
+                const pattern = new fabric_1.fabric.Pattern({ source: image, repeat: 'repeat' });
+                this.handler.canvas.setBackgroundColor(pattern, this.handler.canvas.renderAll.bind(this.handler.canvas));
+                this.handler.canvasOption.backgroundColor = pattern;
             }
         };
         /**

package/lib/handlers/GuidelineHandler.d.ts

@@ -1,5 +1,5 @@
 import { FabricEvent, FabricObject } from '../utils';
-import Handler from './Handler';
+import type Handler from './Handler';
 declare class GuidelineHandler {
     handler: Handler;
     verticalLines: {

package/lib/handlers/Handler.d.ts

@@ -1,10 +1,30 @@
 /// <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';
+import AlignmentHandler from './AlignmentHandler';
+import AnimationHandler from './AnimationHandler';
+import ChartHandler from './ChartHandler';
+import ContextmenuHandler from './ContextmenuHandler';
+import CropHandler from './CropHandler';
+import CustomHandler from './CustomHandler';
+import DrawingHandler from './DrawingHandler';
+import ElementHandler from './ElementHandler';
+import EventHandler from './EventHandler';
+import GridHandler from './GridHandler';
+import GuidelineHandler from './GuidelineHandler';
+import ImageHandler from './ImageHandler';
+import InteractionHandler from './InteractionHandler';
+import LayoutHandler from './LayoutHandler';
+import LinkHandler from './LinkHandler';
+import NodeHandler from './NodeHandler';
+import PortHandler from './PortHandler';
+import ShortcutHandler from './ShortcutHandler';
+import TooltipHandler from './TooltipHandler';
+import TransactionHandler, { TransactionEvent } from './TransactionHandler';
+import WorkareaHandler from './WorkareaHandler';
+import ZoomHandler from './ZoomHandler';
 export interface HandlerCallback {
     /**
      * When has been added object in Canvas, Called function
@@ -231,6 +251,7 @@ declare class Handler implements HandlerOptions {
     eventHandler: EventHandler;
     drawingHandler: DrawingHandler;
     shortcutHandler: ShortcutHandler;
+    layoutHandler: LayoutHandler;
     handlers: {
         [key: string]: CustomHandler;
     };

package/lib/handlers/Handler.js

@@ -5,11 +5,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const fabric_1 = require("fabric");
 const lodash_1 = require("lodash");
-const uuidv4_1 = require("uuidv4");
+const uuid_1 = require("uuid");
 const warning_1 = __importDefault(require("warning"));
-const _1 = require(".");
 const CanvasObject_1 = __importDefault(require("../CanvasObject"));
 const constants_1 = require("../constants");
+const AlignmentHandler_1 = __importDefault(require("./AlignmentHandler"));
+const AnimationHandler_1 = __importDefault(require("./AnimationHandler"));
+const ChartHandler_1 = __importDefault(require("./ChartHandler"));
+const ContextmenuHandler_1 = __importDefault(require("./ContextmenuHandler"));
+const CropHandler_1 = __importDefault(require("./CropHandler"));
+const DrawingHandler_1 = __importDefault(require("./DrawingHandler"));
+const ElementHandler_1 = __importDefault(require("./ElementHandler"));
+const EventHandler_1 = __importDefault(require("./EventHandler"));
+const GridHandler_1 = __importDefault(require("./GridHandler"));
+const GuidelineHandler_1 = __importDefault(require("./GuidelineHandler"));
+const ImageHandler_1 = __importDefault(require("./ImageHandler"));
+const InteractionHandler_1 = __importDefault(require("./InteractionHandler"));
+const LayoutHandler_1 = __importDefault(require("./LayoutHandler"));
+const LinkHandler_1 = __importDefault(require("./LinkHandler"));
+const NodeHandler_1 = __importDefault(require("./NodeHandler"));
+const PortHandler_1 = __importDefault(require("./PortHandler"));
+const ShortcutHandler_1 = __importDefault(require("./ShortcutHandler"));
+const TooltipHandler_1 = __importDefault(require("./TooltipHandler"));
+const TransactionHandler_1 = __importDefault(require("./TransactionHandler"));
+const WorkareaHandler_1 = __importDefault(require("./WorkareaHandler"));
+const ZoomHandler_1 = __importDefault(require("./ZoomHandler"));
 /**
  * Main handler for Canvas
  * @class Handler
@@ -82,26 +102,27 @@ class Handler {
          *
          */
         this.initHandler = () => {
-            this.workareaHandler = new _1.WorkareaHandler(this);
-            this.imageHandler = new _1.ImageHandler(this);
-            this.chartHandler = new _1.ChartHandler(this);
-            this.elementHandler = new _1.ElementHandler(this);
-            this.cropHandler = new _1.CropHandler(this);
-            this.animationHandler = new _1.AnimationHandler(this);
-            this.contextmenuHandler = new _1.ContextmenuHandler(this);
-            this.tooltipHandler = new _1.TooltipHandler(this);
-            this.zoomHandler = new _1.ZoomHandler(this, this.zoomStep);
-            this.interactionHandler = new _1.InteractionHandler(this);
-            this.transactionHandler = new _1.TransactionHandler(this);
-            this.gridHandler = new _1.GridHandler(this);
-            this.portHandler = new _1.PortHandler(this);
-            this.linkHandler = new _1.LinkHandler(this);
-            this.nodeHandler = new _1.NodeHandler(this);
-            this.alignmentHandler = new _1.AlignmentHandler(this);
-            this.guidelineHandler = new _1.GuidelineHandler(this);
-            this.eventHandler = new _1.EventHandler(this);
-            this.drawingHandler = new _1.DrawingHandler(this);
-            this.shortcutHandler = new _1.ShortcutHandler(this);
+            this.workareaHandler = new WorkareaHandler_1.default(this);
+            this.imageHandler = new ImageHandler_1.default(this);
+            this.chartHandler = new ChartHandler_1.default(this);
+            this.elementHandler = new ElementHandler_1.default(this);
+            this.cropHandler = new CropHandler_1.default(this);
+            this.animationHandler = new AnimationHandler_1.default(this);
+            this.contextmenuHandler = new ContextmenuHandler_1.default(this);
+            this.tooltipHandler = new TooltipHandler_1.default(this);
+            this.zoomHandler = new ZoomHandler_1.default(this, this.zoomStep);
+            this.interactionHandler = new InteractionHandler_1.default(this);
+            this.transactionHandler = new TransactionHandler_1.default(this);
+            this.gridHandler = new GridHandler_1.default(this);
+            this.portHandler = new PortHandler_1.default(this);
+            this.linkHandler = new LinkHandler_1.default(this);
+            this.nodeHandler = new NodeHandler_1.default(this);
+            this.alignmentHandler = new AlignmentHandler_1.default(this);
+            this.guidelineHandler = new GuidelineHandler_1.default(this);
+            this.eventHandler = new EventHandler_1.default(this);
+            this.drawingHandler = new DrawingHandler_1.default(this);
+            this.shortcutHandler = new ShortcutHandler_1.default(this);
+            this.layoutHandler = new LayoutHandler_1.default(this);
         };
         /**
          * Get primary object
@@ -112,9 +133,6 @@ class Handler {
                 if (obj.id === 'workarea') {
                     return false;
                 }
-                else if (obj.id === 'grid') {
-                    return false;
-                }
                 else if (obj.superType === 'port') {
                     return false;
                 }
@@ -124,7 +142,7 @@ class Handler {
                 return true;
             });
             if (objects.length) {
-                objects.forEach(obj => (this.objectMap[obj.id] = obj));
+                this.objectMap = objects.reduce((p, c) => Object.assign(p, { [c.id]: c }), {});
             }
             else {
                 this.objectMap = {};
@@ -532,9 +550,7 @@ class Handler {
                 this.animationHandler.play(createdObj.id);
             }
             if (createdObj.superType === 'node') {
-                createdObj.set('shadow', {
-                    color: createdObj.stroke,
-                });
+                createdObj.set('shadow', { color: createdObj.stroke });
             }
             if (gridOption.enabled) {
                 this.gridHandler.setCoords(createdObj);
@@ -719,7 +735,7 @@ class Handler {
                     const activeSelection = clonedObj;
                     activeSelection.canvas = this.canvas;
                     activeSelection.forEachObject((obj) => {
-                        obj.set('id', (0, uuidv4_1.uuid)());
+                        obj.set('id', (0, uuid_1.v4)());
                         if (obj.superType === 'node') {
                             obj.set('shadow', {
                                 color: obj.stroke,
@@ -738,7 +754,7 @@ class Handler {
                 }
                 else {
                     if (activeObject.id === clonedObj.id) {
-                        clonedObj.set('id', (0, uuidv4_1.uuid)());
+                        clonedObj.set('id', (0, uuid_1.v4)());
                     }
                     if (clonedObj.superType === 'node') {
                         clonedObj.set('shadow', {
@@ -775,7 +791,7 @@ class Handler {
                     cloned.set({
                         left: cloned.left + grid,
                         top: cloned.top + grid,
-                        id: (0, uuidv4_1.uuid)(),
+                        id: (0, uuid_1.v4)(),
                         evented: true,
                     });
                     this.canvas.add(cloned);
@@ -847,7 +863,7 @@ class Handler {
                                                 const linkTarget = {
                                                     fromNodeIndex: index,
                                                     fromPortId: port.id,
-                                                    type: 'curvedLink',
+                                                    type: 'link',
                                                     superType: 'link',
                                                 };
                                                 const findIndex = activeSelection
@@ -983,7 +999,7 @@ class Handler {
                             const { fromNode, fromPort, toNodeIndex } = linkObject;
                             const toNode = objects[toNodeIndex];
                             const link = {
-                                type: 'curvedLink',
+                                type: 'link',
                                 fromNodeId: fromNode,
                                 fromPortId: fromPort,
                                 toNodeId: toNode.id,
@@ -1015,13 +1031,13 @@ class Handler {
                 clonedObj.set({
                     left: clonedObj.left + padding,
                     top: clonedObj.top + padding,
-                    id: isCut ? clipboard.id : (0, uuidv4_1.uuid)(),
+                    id: isCut ? clipboard.id : (0, uuid_1.v4)(),
                     evented: true,
                 });
                 if (clonedObj.type === 'activeSelection') {
                     clonedObj.canvas = this.canvas;
                     clonedObj.forEachObject((obj) => {
-                        obj.set('id', isCut ? obj.id : (0, uuidv4_1.uuid)());
+                        obj.set('id', isCut ? obj.id : (0, uuid_1.v4)());
                         this.canvas.add(obj);
                         if (obj.dblclick) {
                             obj.on('mousedblclick', this.eventHandler.object.mousedblclick);
@@ -1291,7 +1307,7 @@ class Handler {
                     obj.top += diffTop;
                 }
                 if (obj.superType === 'element') {
-                    obj.id = (0, uuidv4_1.uuid)();
+                    obj.id = (0, uuid_1.v4)();
                 }
                 this.add(obj, false, true);
                 this.canvas.renderAll();
@@ -1320,7 +1336,7 @@ class Handler {
             }
             const group = activeObject.toGroup();
             group.set({
-                id: (0, uuidv4_1.uuid)(),
+                id: (0, uuid_1.v4)(),
                 name: 'New group',
                 type: 'group',
                 ...this.objectOption,
@@ -1448,7 +1464,7 @@ class Handler {
             else {
                 this.canvas.discardActiveObject();
                 this.canvas.getObjects().forEach((obj) => {
-                    if (obj.id === 'grid' || obj.id === 'workarea') {
+                    if (obj.id === 'workarea') {
                         return;
                     }
                     this.canvas.remove(obj);
@@ -1573,7 +1589,7 @@ class Handler {
          */
         this.setCanvasOption = (canvasOption) => {
             this.canvasOption = Object.assign({}, this.canvasOption, canvasOption);
-            this.canvas.setBackgroundColor(canvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
+            this.canvas.setBackgroundColor('blue', this.canvas.renderAll.bind(this.canvas));
             if (typeof canvasOption.width !== 'undefined' && typeof canvasOption.height !== 'undefined') {
                 if (this.eventHandler) {
                     this.eventHandler.resize(canvasOption.width, canvasOption.height);

package/lib/handlers/LayoutHandler.d.ts

@@ -0,0 +1,15 @@
+import { AbstractHandler } from '.';
+import { LinkObject, NodeObject } from '../objects';
+export type LayoutType = 'dagre' | 'elk';
+export type LayoutDirection = 'vertical' | 'horizontal';
+export interface LayoutOptions {
+    type: LayoutType;
+    direction?: LayoutDirection;
+    nodes: NodeObject[];
+    links?: LinkObject[];
+}
+export default class LayoutHandler extends AbstractHandler {
+    runLayout(options: LayoutOptions): void;
+    private elk;
+    private dagre;
+}

package/lib/handlers/LayoutHandler.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dagre_1 = __importDefault(require("@dagrejs/dagre"));
+const elk_bundled_js_1 = __importDefault(require("elkjs/lib/elk.bundled.js"));
+const _1 = require(".");
+class LayoutHandler extends _1.AbstractHandler {
+    runLayout(options) {
+        const { type } = options;
+        if (!type) {
+            return;
+        }
+        if (type === 'dagre') {
+            this.dagre(options);
+        }
+        else if (type === 'elk') {
+            this.elk(options);
+        }
+    }
+    async elk(options) {
+        const { nodes, links } = options;
+        const elk = new elk_bundled_js_1.default();
+        const elkGraph = {
+            id: 'root',
+            layoutOptions: {
+                'elk.algorithm': 'layered',
+                'elk.direction': 'DOWN',
+                'elk.spacing.nodeNode': '60',
+                'elk.layered.spacing.nodeNodeBetweenLayers': '60',
+                'elk.spacing.componentSpacing': '200',
+                'elk.layered.nodePlacement.strategy': 'SIMPLEX',
+            },
+            children: nodes.map(node => ({
+                id: node.id,
+                width: node.width,
+                height: node.height,
+                layoutOptions: {
+                    'elk.portConstraints': 'FIXED_ORDER',
+                    'elk.portAlignment.default': 'CENTER',
+                },
+                ports: node.fromPort?.length
+                    ? node.fromPort
+                        ?.map(port => ({
+                        id: `${node.id}:${port.id}`,
+                        layoutOptions: { 'elk.port.side': 'SOUTH' },
+                    }))
+                        .concat(node.toPort
+                        ? [
+                            {
+                                id: `${node.id}:${node.toPort.id}`,
+                                layoutOptions: {
+                                    'elk.port.side': 'NORTH',
+                                },
+                            },
+                        ]
+                        : [])
+                    : [
+                        {
+                            id: `${node.id}:${node.toPort.id}`,
+                            layoutOptions: {
+                                'elk.port.side': 'NORTH',
+                            },
+                        },
+                    ],
+            })),
+            edges: links.map(link => ({
+                id: `${link.fromNode?.id}_${link.toNode?.id}`,
+                sources: [`${link.fromNode?.id}:${link.fromPort?.id}`],
+                targets: [`${link.toNode?.id}:${link.toPort?.id}`],
+            })),
+        };
+        const layout = await elk.layout(elkGraph);
+        const grid = this.handler.gridOption.grid || 20;
+        layout.children.forEach(nodeLayout => {
+            let { x: left, y: top } = nodeLayout;
+            left = Math.round(left / grid) * grid;
+            top = Math.round(top / grid) * grid;
+            const node = this.handler.objectMap[nodeLayout.id];
+            node.set({ left, top });
+            node.setCoords();
+            this.handler.portHandler.setCoords(node);
+        });
+        this.handler.canvas.renderAll();
+    }
+    dagre(options) {
+        const { nodes, links } = options;
+        const g = new dagre_1.default.graphlib.Graph();
+        g.setGraph({ nodesep: 80, ranksep: 80, edgesep: 0, rankdir: 'TB' });
+        g.setDefaultEdgeLabel(() => ({}));
+        nodes.forEach(node => g.setNode(node.id, { label: node.name, width: node.width, height: node.height }));
+        links?.forEach(link => g.setEdge(link.fromNode?.id, link.toNode?.id));
+        dagre_1.default.layout(g);
+        const grid = this.handler.gridOption.grid || 20;
+        g.nodes().forEach(id => {
+            let { x, y, width, height } = g.node(id);
+            let left = x - width / 2;
+            let top = y - height / 2;
+            left = Math.round(left / grid) * grid;
+            top = Math.round(top / grid) * grid;
+            const node = this.handler.objectMap[id];
+            node.set({ left, top });
+            node.setCoords();
+            this.handler.portHandler.setCoords(node);
+        });
+        this.handler.canvas.renderAll();
+    }
+}
+exports.default = LayoutHandler;