@syncfusion/ej2-diagrams - npm Package Compare versions

Comparing version 17.1.1-beta to 17.1.32-beta

CHANGELOG.md

@@ -9,12 +9,48 @@ # Changelog
 
+- Support added to create a swimlane diagram using code or a visual interface with built-in swim lane shapes.
+- Support provided to prevent “previous selection gets cleared when dragging a new symbol from the symbol palette and dropping it to the diagram”.
+- Support provided to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed.
+- Support provided to define the padding between the connector’s end point and the object to which it gets connected.
+- Option has been provided to retain the selection of an object when performing undo and redo operations.
+- Option provided to prevent serializing default properties when the diagram is serialized as JSON format.
+- Padding option added to scroll settings.
+- Now, it is possible to export HTML and native nodes to image format.
+- Support provided to limit the number of actions to be stored in the history manager.
+
+#### Bug Fixes
+
+- Drop event is now fixed when drag and drop other component is now working fine.
+- Diagram does not zoom based on the center point is now working fine.
+- Background color of the label and nodes will be black by default while updating dynamically is now working fine.
+- Background color issue found while on text editing is not fixed.
+- Connections have created from port after removing the constraints is now working fine.
+- Performance issue on diagram layout has been fixed.
+
+## 16.4.54 (2019-02-19)
+
+### Diagram
+
+#### Bug Fixes
+
+- Z-order maintained properly now when adding the nodes at runtime.
+- Port dragging now working properly after rotating the nodes.
+- When dragging the port, connectors associated with the ports updated properly.
+- If anyone of the selected nodes doesn’t have rotate constraints, rotate handle no longer visible with the selection handles.
+
+## 16.4.53 (2019-02-13)
+
+### Diagram
+
+#### New Features
+
 - Support to flip the node/connector in both horizontal and vertical direction has been added.
-- Support to export HTML /Native node to image format has been added.
-- Support to retain the selection for the object which is affected when performing the undo/redo operation has been added.
-- Padding between a connector’s end point and the object to which the connector gets connected is added.
-- Prevent the selection gets cleared when dragging the symbol from symbol palette and before dropping into the diagram is added.
-- Support for cancelling the drag and drop operation from symbol palette to diagram when pressing the ESC key is added.
 
+## 16.4.52 (2019-02-05)
+
+### Diagram
+
 #### Bug Fixes
 
 - Exception thrown while enable zoom and pan tool dynamically is now working fine.
+- Exception thrown while build the diagram component with production mode is now working fine.
 
@@ -27,4 +63,4 @@ ## 16.4.48 (2019-01-22)
 
-- Updating data source at runtime is now working properly even if you did not define layout for a diagram.
-- Now, you can modify the nodes and connectors styles at runtime.
+- Updating data source at runtime is now working properly even if you did not define layout for a diagram.
+- Now, you can modify the nodes and connectors styles at runtime.
 
@@ -31,0 +67,0 @@ ## 16.4.47 (2019-01-16)

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.1-beta
+*  version : 17.1.32-beta
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-diagrams",
-  "version": "17.1.1-beta",
+  "version": "17.1.32-beta",
   "description": "Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.",
@@ -11,17 +11,11 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.1-beta",
-    "@syncfusion/ej2-data": "~17.1.1-beta",
-    "@syncfusion/ej2-navigations": "~17.1.1-beta",
-    "@syncfusion/ej2-inputs": "~17.1.1-beta",
-    "@syncfusion/ej2-popups": "~17.1.1-beta",
-    "@syncfusion/ej2-buttons": "~17.1.1-beta",
-    "@syncfusion/ej2-lists": "~17.1.1-beta"
+    "@syncfusion/ej2-base": "~17.1.32-beta",
+    "@syncfusion/ej2-data": "~17.1.32-beta",
+    "@syncfusion/ej2-navigations": "~17.1.32-beta",
+    "@syncfusion/ej2-inputs": "~17.1.32-beta",
+    "@syncfusion/ej2-popups": "~17.1.32-beta",
+    "@syncfusion/ej2-buttons": "~17.1.32-beta",
+    "@syncfusion/ej2-lists": "~17.1.32-beta"
   },
-  "devDependencies": {
-    "@types/chai": "^3.4.28",
-    "@types/es6-promise": "0.0.28",
-    "@types/jasmine": "2.8.9",
-    "@types/jasmine-ajax": "^3.1.27",
-    "@types/requirejs": "^2.1.26"
-  },
+  "devDependencies": {},
   "keywords": [
@@ -40,3 +34,4 @@ "ej2",
   "homepage": "https://www.syncfusion.com/products/javascript/diagram",
+  "typings": "index.d.ts",
   "sideEffects": false
 }

src/diagram/core/appearance.d.ts

@@ -134,2 +134,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     opacity: number;
+    /**
+     * @private
+     * Returns the name of class Stop
+     */
+    getClassName(): string;
 }
@@ -136,0 +141,0 @@ /**

src/diagram/core/appearance.js

@@ -134,2 +134,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /**
+     * @private
+     * Returns the name of class Stop
+     */
+    Stop.prototype.getClassName = function () {
+        return 'Stop';
+    };
     __decorate([
@@ -136,0 +143,0 @@ Property('')

src/diagram/core/containers/canvas.js

@@ -16,3 +16,2 @@ var __extends = (this && this.__extends) || (function () {
 import { rotateSize } from '../../utility/base-util';
-import { alignElement } from '../../utility/diagram-util';
 import { Transform, ElementAction } from '../../enum/enum';
@@ -72,8 +71,10 @@ import { Size } from '../../primitives/size';
                 }
-                if (desiredBounds === undefined) {
-                    desiredBounds = childBounds;
+                if ((!(child instanceof TextElement)) || (child instanceof TextElement && child.canConsiderBounds)) {
+                    if (desiredBounds === undefined) {
+                        desiredBounds = childBounds;
+                    }
+                    else {
+                        desiredBounds.uniteRect(childBounds);
+                    }
                 }
-                else {
-                    desiredBounds.uniteRect(childBounds);
-                }
             }
@@ -110,3 +111,3 @@ if (desiredBounds) {
                     child.parentTransform = this.parentTransform + this.rotateAngle;
-                    if (this.flip && (this.elementActions & ElementAction.ElementIsGroup)) {
+                    if (this.flip !== 'None' || this.elementActions & ElementAction.ElementIsGroup) {
                         child.parentTransform = (this.flip === 'Horizontal' || this.flip === 'Vertical') ?
@@ -154,5 +155,2 @@ -child.parentTransform : child.parentTransform;
         this.outerBounds.uniteRect(this.bounds);
-        if (this.flip && (this.elementActions & ElementAction.ElementIsGroup)) {
-            alignElement(this, this.offsetX, this.offsetY, this.flip);
-        }
         return desiredSize;
@@ -159,0 +157,0 @@ };

src/diagram/core/containers/container.js

@@ -20,3 +20,2 @@ var __extends = (this && this.__extends) || (function () {
 import { rotatePoint, getOffset } from '../../utility/base-util';
-import { alignElement } from '../../utility/diagram-util';
 /**
@@ -157,5 +156,2 @@ * Container module is used to group related objects
         this.prevRotateAngle = this.rotateAngle;
-        if (this.flip && (this.elementActions & ElementAction.ElementIsGroup)) {
-            alignElement(this, this.offsetX, this.offsetY, this.flip);
-        }
         return desiredSize;
@@ -162,0 +158,0 @@ };

src/diagram/core/containers/grid.d.ts

@@ -11,3 +11,6 @@ import { DiagramElement } from '../elements/diagram-element';
     private childTable;
+    /** @private */
+    rowDefinitions(): RowDefinition[];
     private rowDefns;
+    /** @private */
     columnDefinitions(): ColumnDefinition[];
@@ -31,9 +34,14 @@ private colDefns;
     /** @private */
-    updateRowHeight(rowId: number, height: number): void;
+    updateRowHeight(rowId: number, height: number, isConsiderChild: boolean, padding?: number): void;
     /** @private */
-    updateColumnWidth(colId: number, width: number): void;
+    updateColumnWidth(colId: number, width: number, isConsiderChild: boolean, padding?: number): void;
+    private calculateCellWidth;
+    private calculateCellHeight;
+    private calculateCellSizeBasedOnChildren;
+    private calculateCellWidthBasedOnChildren;
+    private calculateCellHeightBasedOnChildren;
     /** @private */
-    addRow(rowId: number, rows: RowDefinition[]): void;
+    addRow(rowId: number, rowDefn: RowDefinition, isMeasure: boolean): void;
     /** @private */
-    addColumn(columnId: number, columns: ColumnDefinition[]): void;
+    addColumn(columnId: number, column: ColumnDefinition, isMeasure?: boolean): void;
     /** @private */
@@ -46,2 +54,4 @@ removeRow(rowId: number): void;
     /** @private */
+    updateColumnIndex(startRowIndex: number, currentIndex: number, newIndex: number): void;
+    /** @private */
     measure(availableSize: Size): Size;
@@ -48,0 +58,0 @@ /** @private */

src/diagram/core/containers/grid.js

@@ -32,2 +32,7 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /** @private */
+    GridPanel.prototype.rowDefinitions = function () {
+        return this.rowDefns;
+    };
+    /** @private */
     GridPanel.prototype.columnDefinitions = function () {
@@ -144,5 +149,7 @@ return this.colDefns;
                         row.cells[j].desiredCellWidth += (this.width - calculateWidth);
+                        row.cells[j].minWidth = row.cells[j].desiredCellWidth;
                         if (row.cells[j].children && row.cells[j].children.length) {
-                            row.cells[j].children[0].minWidth = row.cells[j].desiredCellWidth;
+                            row.cells[j].children[0].width = row.cells[j].desiredCellWidth;
                         }
+                        this.colDefns[j].width = row.cells[j].desiredCellWidth;
                     }
@@ -152,5 +159,12 @@ calculateHeight += row.cells[j].desiredCellHeight;
                         if (this.height && this.height !== calculateHeight) {
-                            row.cells[j].desiredCellHeight += (this.height - calculateHeight);
-                            if (row.cells[j].children && row.cells[j].children.length) {
-                                row.cells[j].children[0].minHeight = row.cells[j].desiredCellHeight;
+                            var height = (this.height - calculateHeight);
+                            if (height > 0) {
+                                for (var k = 0; k < row.cells.length; k++) {
+                                    row.cells[k].desiredCellHeight += height;
+                                    row.cells[k].minHeight = row.cells[k].desiredCellHeight = row.cells[k].desiredCellHeight;
+                                    if (row.cells[k].children && row.cells[k].children.length) {
+                                        row.cells[k].children[0].height = row.cells[k].desiredCellHeight;
+                                    }
+                                }
+                                this.rowDefns[i].height += height;
                             }
@@ -164,4 +178,5 @@ }
     /** @private */
-    GridPanel.prototype.updateRowHeight = function (rowId, height) {
+    GridPanel.prototype.updateRowHeight = function (rowId, height, isConsiderChild, padding) {
         var row = this.rows[rowId];
+        this.rowDefns[rowId].height = height;
         if (this.height !== undefined) {
@@ -173,3 +188,3 @@ this.height += height - row.cells[0].desiredCellHeight;
             if (row.cells[i].children && row.cells[i].children.length) {
-                row.cells[i].children[0].minHeight = height;
+                row.cells[i].children[0].height = height;
             }
@@ -180,7 +195,15 @@ }
         this.arrange(this.desiredSize);
+        if (isConsiderChild) {
+            var minHeight = (padding !== undefined) ? this.calculateCellHeightBasedOnChildren(rowId, padding) :
+                this.calculateCellHeight(rowId);
+            if (minHeight > height) {
+                this.updateRowHeight(rowId, minHeight, false);
+            }
+        }
     };
     /** @private */
-    GridPanel.prototype.updateColumnWidth = function (colId, width) {
+    GridPanel.prototype.updateColumnWidth = function (colId, width, isConsiderChild, padding) {
+        this.colDefns[colId].width = width;
         if (this.width !== undefined) {
-            this.width += width - this.rows[0].cells[colId].desiredCellWidth;
+            this.width += width - this.rows[this.rows.length - 1].cells[colId].desiredCellWidth;
         }
@@ -190,3 +213,3 @@ for (var i = 0; i < this.rows.length; i++) {
             if (this.rows[i].cells[colId].children && this.rows[i].cells[colId].children.length) {
-                this.rows[i].cells[colId].children[0].minWidth = width;
+                this.rows[i].cells[colId].children[0].width = width;
             }
@@ -197,57 +220,174 @@ }
         this.arrange(this.desiredSize);
+        if (isConsiderChild) {
+            var minWidth = (padding !== undefined) ? this.calculateCellWidthBasedOnChildren(colId, padding) :
+                this.calculateCellWidth(colId);
+            if (minWidth > width) {
+                this.updateColumnWidth(colId, minWidth, false);
+            }
+        }
     };
-    /** @private */
-    GridPanel.prototype.addRow = function (rowId, rows) {
-        for (var i = 0; i < rows.length; i++) {
-            var rowDefn = rows[i];
-            this.rowDefns.push(rowDefn);
-            var row = new GridRow();
-            row.cells = [];
-            var defaultCell = new ColumnDefinition();
-            defaultCell.width = this.width;
-            var columns = this.colDefns;
-            this.addCellInRow(columns, rowDefn, row);
-            if (rowId > this.rows.length - 1) {
-                this.rows.push(row);
+    GridPanel.prototype.calculateCellWidth = function (colIndex) {
+        var maxWidth;
+        var width;
+        var cell;
+        for (var i = 0; i < this.rows.length; i++) {
+            cell = this.rows[i].cells[colIndex];
+            if (cell.columnSpan === 1) {
+                width = (cell.outerBounds.width > cell.bounds.width &&
+                    (cell.children.length === 0 || cell.children[0].maxWidth === undefined)) ? cell.outerBounds.width : cell.bounds.width;
+                if (maxWidth) {
+                    maxWidth = (maxWidth < width) ? width : maxWidth;
+                }
+                else {
+                    maxWidth = width;
+                }
             }
+        }
+        return maxWidth;
+    };
+    GridPanel.prototype.calculateCellHeight = function (rowIndex) {
+        var maxHeight;
+        var height;
+        var cell;
+        var row = this.rows[rowIndex];
+        for (var i = 0; i < row.cells.length; i++) {
+            cell = row.cells[i];
+            height = (cell.outerBounds.height > cell.bounds.height) ? cell.outerBounds.height : cell.bounds.height;
+            if (maxHeight) {
+                maxHeight = (maxHeight < height) ? height : maxHeight;
+            }
             else {
-                this.rows.splice(rowId, 0, row);
+                maxHeight = height;
             }
         }
-        this.measure(new Size(this.width, this.height));
-        this.arrange(this.desiredSize);
+        return maxHeight;
     };
+    GridPanel.prototype.calculateCellSizeBasedOnChildren = function (cell, option, padding, maxSize) {
+        var maxBounds;
+        var canvas;
+        canvas = (cell && cell.children.length > 0) ? cell.children[0] : undefined;
+        if (canvas && cell.columnSpan === 1) {
+            maxBounds = (option === 'Width') ? canvas.bounds.right : canvas.bounds.bottom;
+            if (!maxSize) {
+                maxSize = (option === 'Width') ? canvas.bounds.width : canvas.bounds.height;
+            }
+            for (var j = 0; j < canvas.children.length; j++) {
+                var children = canvas.children[j];
+                if (children instanceof Canvas) {
+                    if (children.id.indexOf('header') === -1) {
+                        var bounds = ((option === 'Width') ? children.bounds.right : children.bounds.bottom) + padding;
+                        if (bounds > maxBounds) {
+                            var size = (bounds - maxBounds) + ((option === 'Width') ? canvas.bounds.width : canvas.bounds.height);
+                            if (maxSize) {
+                                maxSize = (maxSize < size) ? size : maxSize;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return maxSize;
+    };
+    GridPanel.prototype.calculateCellWidthBasedOnChildren = function (colIndex, padding) {
+        var maxWidth;
+        var width;
+        var cell;
+        var maxBounds;
+        var canvas;
+        for (var i = 0; i < this.rows.length; i++) {
+            cell = this.rows[i].cells[colIndex];
+            maxWidth = this.calculateCellSizeBasedOnChildren(cell, 'Width', padding, maxWidth);
+        }
+        return maxWidth;
+    };
+    GridPanel.prototype.calculateCellHeightBasedOnChildren = function (rowIndex, padding) {
+        var maxHeight;
+        var height;
+        var cell;
+        var maxBounds;
+        var canvas;
+        var row = this.rows[rowIndex];
+        for (var i = 0; i < row.cells.length; i++) {
+            cell = row.cells[i];
+            maxHeight = this.calculateCellSizeBasedOnChildren(cell, 'Height', padding, maxHeight);
+        }
+        return maxHeight;
+    };
     /** @private */
-    GridPanel.prototype.addColumn = function (columnId, columns) {
+    GridPanel.prototype.addRow = function (rowId, rowDefn, isMeasure) {
+        if (this.rowDefns.length > 0) {
+            this.rowDefns.splice(rowId, 0, rowDefn);
+        }
+        else {
+            this.rowDefns.push(rowDefn);
+        }
+        var row = new GridRow();
+        row.cells = [];
+        var defaultCell = new ColumnDefinition();
+        defaultCell.width = this.width;
+        var columns = this.colDefns;
+        this.addCellInRow(columns, rowDefn, row);
+        if (rowId > this.rows.length - 1) {
+            this.rows.push(row);
+        }
+        else {
+            this.rows.splice(rowId, 0, row);
+        }
+        if (isMeasure) {
+            this.measure(new Size(this.width, this.height));
+            this.arrange(this.desiredSize);
+        }
+    };
+    /** @private */
+    GridPanel.prototype.addColumn = function (columnId, column, isMeasure) {
+        var row;
+        var rowDefn;
+        var colDefn;
+        var cell;
         var rows = this.rows;
+        if (this.colDefns.length > 0) {
+            this.colDefns.splice(columnId, 0, column);
+        }
+        else {
+            this.colDefns.push(column);
+        }
+        if (this.width !== undefined) {
+            this.width += column.width;
+        }
         for (var i = 0; i < rows.length; i++) {
-            var row = rows[i];
-            var rowDefn = this.rowDefns[i];
-            for (var j = 0; j < columns.length; j++) {
-                var colDefn = columns[j];
-                var cell = new GridCell();
-                cell.style = this.cellStyle;
-                cell.desiredCellWidth = colDefn.width;
-                cell.desiredCellHeight = rowDefn.height;
-                if (columnId > row.cells.length - 1) {
-                    row.cells.push(cell);
-                }
-                else {
-                    row.cells.splice(columnId, 0, cell);
-                }
-                this.children.push(cell);
+            row = rows[i];
+            rowDefn = this.rowDefns[i];
+            colDefn = column;
+            cell = new GridCell();
+            cell.style = this.cellStyle;
+            cell.desiredCellWidth = cell.minWidth = colDefn.width;
+            cell.desiredCellHeight = cell.minHeight = rowDefn.height;
+            cell.children = [];
+            if (columnId > row.cells.length - 1) {
+                row.cells.push(cell);
             }
+            else {
+                row.cells.splice(columnId, 0, cell);
+            }
+            this.children.push(cell);
         }
-        this.measure(new Size(this.width, this.height));
-        this.arrange(this.desiredSize);
+        if (isMeasure) {
+            this.measure(new Size(this.width, this.height));
+            this.arrange(this.desiredSize);
+        }
     };
     /** @private */
     GridPanel.prototype.removeRow = function (rowId) {
+        var cell;
+        var element;
         var rows = this.rows;
         var removeRow = rows[rowId];
+        this.height -= this.rowDefns[rowId].height;
         for (var i = 0; i < removeRow.cells.length; i++) {
-            var cell = removeRow.cells[i];
+            cell = removeRow.cells[i];
             this.children.splice(this.children.indexOf(cell), 1);
-            var element = document.getElementById(cell.id + '_groupElement');
-            element.parentElement.removeChild(element);
+            element = document.getElementById(cell.id + '_groupElement');
+            if (element && element.parentElement) {
+                element.parentElement.removeChild(element);
+            }
         }
@@ -261,10 +401,16 @@ this.rows.splice(rowId, 1);
     GridPanel.prototype.removeColumn = function (columnId) {
+        var cell;
+        var element;
         var rows = this.rows;
+        this.width -= this.colDefns[columnId].width;
         for (var i = 0; i < rows.length; i++) {
-            var cell = rows[i].cells[columnId];
+            cell = rows[i].cells[columnId];
             this.children.splice(this.children.indexOf(cell), 1);
-            var element = document.getElementById(cell.id + '_groupElement');
-            element.parentElement.removeChild(element);
+            element = document.getElementById(cell.id + '_groupElement');
+            if (element && element.parentElement) {
+                element.parentElement.removeChild(element);
+            }
             rows[i].cells.splice(columnId, 1);
         }
+        this.colDefns.splice(columnId, 1);
         this.measure(new Size(this.width, this.height));
@@ -279,2 +425,5 @@ this.arrange(this.desiredSize);
         this.rows.splice(newIndex, 0, temp);
+        var tempRow = this.rowDefns[currentIndex];
+        this.rowDefns.splice(currentIndex, 1);
+        this.rowDefns.splice(newIndex, 0, tempRow);
         this.measure(new Size(this.width, this.height));
@@ -284,2 +433,22 @@ this.arrange(this.desiredSize);
     /** @private */
+    GridPanel.prototype.updateColumnIndex = function (startRowIndex, currentIndex, newIndex) {
+        var temp;
+        var cell;
+        var tempSize;
+        for (var i = startRowIndex; i < this.rows.length; i++) {
+            temp = this.rows[i];
+            cell = this.rows[i].cells[currentIndex];
+            temp.cells.splice(currentIndex, 1);
+            temp.cells.splice(newIndex, 0, cell);
+        }
+        var tempCol = this.colDefns[currentIndex];
+        this.colDefns.splice(currentIndex, 1);
+        this.colDefns.splice(newIndex, 0, tempCol);
+        tempSize = this.desiredCellWidth[currentIndex];
+        this.desiredCellWidth.splice(currentIndex, 1);
+        this.desiredCellWidth.splice(newIndex, 0, tempSize);
+        this.measure(new Size(this.width, this.height));
+        this.arrange(this.desiredSize);
+    };
+    /** @private */
     GridPanel.prototype.measure = function (availableSize) {
@@ -375,2 +544,4 @@ var desired = undefined;
     GridPanel.prototype.arrange = function (desiredSize, isChange) {
+        var j = 0;
+        var i = 0;
         if (this.rows !== undefined && this.rows.length > 0) {
@@ -380,4 +551,2 @@ var x = this.offsetX - desiredSize.width * this.pivot.x;
             var cellX = x;
-            var j = 0;
-            var i = 0;
             for (var _i = 0, _a = this.rows; _i < _a.length; _i++) {
@@ -403,6 +572,11 @@ var row = _a[_i];
                 // Used for row span and column span.
-                for (var i_1 = 0; i_1 < this.rows.length; i_1++) {
-                    var row = this.rows[i_1];
-                    for (var j_1 = 0; j_1 < row.cells.length; j_1++) {
-                        var cell = row.cells[j_1];
+                var cell = void 0;
+                var row = void 0;
+                var k = void 0;
+                var z = void 0;
+                var removeCell = void 0;
+                for (i = 0; i < this.rows.length; i++) {
+                    row = this.rows[i];
+                    for (j = 0; j < row.cells.length; j++) {
+                        cell = row.cells[j];
                         if (cell.columnSpan > 1) {
@@ -413,8 +587,6 @@ // remove a child element when a column span is greater than 1
                         if (cell.rowSpan > 1) {
-                            var k = void 0;
-                            var z = void 0;
-                            for (k = i_1, z = 0; ((k + cell.rowSpan - 1) < this.rows.length && z < cell.rowSpan - 1); k++, z++) {
-                                var removeCelll = this.rows[k + 1].cells[j_1];
+                            for (k = i, z = 0; ((k + cell.rowSpan - 1) < this.rows.length && z < cell.rowSpan - 1); k++, z++) {
+                                removeCell = this.rows[k + 1].cells[j];
                                 // remove a child element when a row span is greater than 1
-                                this.children.splice(this.children.indexOf(removeCelll), 1);
+                                this.children.splice(this.children.indexOf(removeCell), 1);
                             }
@@ -421,0 +593,0 @@ }

src/diagram/core/elements/diagram-element.d.ts

@@ -39,2 +39,17 @@ import { HorizontalAlignment, VerticalAlignment, UnitMode, Transform, RelativeMode, FlipDirection, ElementAction } from '../../enum/enum';
     /**
+     * set to true during print and eport
+     */
+    /** @private */
+    isExport: boolean;
+    /**
+     * set scaling value for print and export
+     */
+    /** @private */
+    exportScaleValue: PointModel;
+    /**
+     * set scaling value for print and export
+     */
+    /** @private */
+    exportScaleOffset: PointModel;
+    /**
      * Check whether style need to be apply or not
@@ -41,0 +56,0 @@ */

src/diagram/core/elements/diagram-element.js

@@ -35,2 +35,17 @@ import { Transform, ElementAction } from '../../enum/enum';
         /**
+         * set to true during print and eport
+         */
+        /** @private */
+        this.isExport = false;
+        /**
+         * set scaling value for print and export
+         */
+        /** @private */
+        this.exportScaleValue = { x: 0, y: 0 };
+        /**
+         * set scaling value for print and export
+         */
+        /** @private */
+        this.exportScaleOffset = { x: 0, y: 0 };
+        /**
          * Check whether style need to be apply or not
@@ -37,0 +52,0 @@ */

src/diagram/core/elements/text-element.d.ts

@@ -21,2 +21,4 @@ import { TextStyleModel } from '../appearance-model';
     canMeasure: boolean;
+    /** @private */
+    canConsiderBounds: boolean;
     /**
@@ -23,0 +25,0 @@ * sets the constraints for the text element

src/diagram/core/elements/text-element.js

@@ -33,2 +33,4 @@ var __extends = (this && this.__extends) || (function () {
         _this.canMeasure = true;
+        /** @private */
+        _this.canConsiderBounds = true;
         /**
@@ -35,0 +37,0 @@ * sets the hyperlink color to blue

src/diagram/diagram-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove, Ajax } from '@syncfusion/ej2-base';import { Browser, ModuleDeclaration, Event, EmitType } from '@syncfusion/ej2-base';import { INotifyPropertyChanged } from '@syncfusion/ej2-base';import { CanvasRenderer } from './rendering/canvas-renderer';import { SvgRenderer } from './rendering/svg-renderer';import { DiagramRenderer } from './rendering/renderer';import { BaseAttributes } from './rendering/canvas-interface';import { PageSettings, ScrollSettings } from './diagram/page-settings';import { PageSettingsModel, ScrollSettingsModel } from './diagram/page-settings-model';import { DiagramElement } from './core/elements/diagram-element';import { ServiceLocator } from './objects/service';import { IElement, IDataLoadedEventArgs, ISelectionChangeEventArgs, IClickEventArgs, ScrollValues } from './objects/interface/IElement';import { ISizeChangeEventArgs, IConnectionChangeEventArgs, IEndChangeEventArgs, IDoubleClickEventArgs } from './objects/interface/IElement';import { ICollectionChangeEventArgs, IPropertyChangeEventArgs, IDraggingEventArgs, IRotationEventArgs } from './objects/interface/IElement';import { IDragEnterEventArgs, IDragLeaveEventArgs, IDragOverEventArgs, IDropEventArgs } from './objects/interface/IElement';import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs, IMouseEventArgs } from './objects/interface/IElement';import { StackEntryObject } from './objects/interface/IElement';import { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel } from './objects/interface/interfaces';import { View, IDataSource, IFields } from './objects/interface/interfaces';import { Container } from './core/containers/container';import { Node, BpmnShape, BpmnAnnotation, SwimLane, Path } from './objects/node';import { flipConnector, updatePortEdges } from './utility/diagram-util';import { Segment } from './interaction/scroller';import { Connector } from './objects/connector';import { ConnectorModel, BpmnFlowModel } from './objects/connector-model';import { SnapSettings } from './diagram/grid-lines';import { RulerSettings } from './diagram/ruler-settings';import { removeRulerElements, updateRuler, getRulerSize } from './ruler/ruler';import { renderRuler, renderOverlapElement } from './ruler/ruler';import { RulerSettingsModel } from './diagram/ruler-settings-model';import { SnapSettingsModel } from './diagram/grid-lines-model';import { NodeModel, TextModel, BpmnShapeModel, BpmnAnnotationModel } from './objects/node-model';import { UmlActivityShapeModel, SwimLaneModel, LaneModel } from './objects/node-model';import { Size } from './primitives/size';import { Point } from './primitives/point';import { Keys, KeyModifiers, DiagramTools, AlignmentMode, AnnotationConstraints, NodeConstraints, RendererAction } from './enum/enum';import { DiagramConstraints, BridgeDirection, AlignmentOptions, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, ThumbsConstraints, NudgeDirection } from './enum/enum';import { RealAction, ElementAction, FlipDirection } from './enum/enum';import { PathElement } from './core/elements/path-element';import { TextElement } from './core/elements/text-element';import { updateStyle, removeItem, updateConnector, updateShape, setUMLActivityDefaults, findNodeByName } from './utility/diagram-util';import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType, removeGradient } from './utility/diagram-util';import { Rect } from './primitives/rect';import { getPortShape } from './objects/dictionary/common';import { PointPortModel } from './objects/port-model';import { ShapeAnnotationModel, AnnotationModel, PathAnnotationModel } from './objects/annotation-model';import { ShapeAnnotation, PathAnnotation, Annotation } from './objects/annotation';import { PointModel } from './primitives/point-model';import { Canvas } from './core/containers/canvas';import { GridPanel } from './core/containers/grid';import { DataSourceModel } from './diagram/data-source-model';import { DataSource } from './diagram/data-source';import { LayoutModel } from './layout/layout-base-model';import { Layout, INode, ILayout } from './layout/layout-base';import { DataBinding } from './data-binding/data-binding';import { Selector } from './interaction/selector';import { SelectorModel } from './interaction/selector-model';import { DiagramEventHandler } from './interaction/event-handlers';import { CommandHandler } from './interaction/command-manager';import { DiagramScroller } from './interaction/scroller';import { Actions, isSelected } from './interaction/actions';import { ToolBase } from './interaction/tool';import { BpmnDiagrams } from './objects/bpmn';import { DiagramContextMenu } from './objects/context-menu';import { ConnectorBridging } from './objects/connector-bridging';import { SpatialSearch } from './interaction/spatial-search/spatial-search';import { HistoryEntry, History } from './diagram/history';import { UndoRedo } from './objects/undo-redo';import { ConnectorEditing } from './interaction/connector-editing';import { Ruler } from '../ruler/index';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs, EJ2Instance } from '@syncfusion/ej2-navigations';import { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements } from './utility/dom-util';import { getDiagramElement, getScrollerWidth, getHTMLLayer } from './utility/dom-util';import { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg } from './utility/dom-util';import { getPortLayerSvg, getDiagramLayerSvg } from './utility/dom-util';import { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';import { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';import { CommandManagerModel, CommandModel, ContextMenuSettingsModel } from './diagram/keyboard-commands-model';import { canDelete, canInConnect, canOutConnect, canRotate, canVitualize, canDrawThumbs } from './utility/constraints-util';import { canPortInConnect, canPortOutConnect } from './utility/constraints-util';import { canResize, canSingleSelect, canZoomPan, canZoomTextEdit } from './utility/constraints-util';import { canDragSourceEnd, canDragTargetEnd, canDragSegmentThumb, enableReadOnly, canMove } from './utility/constraints-util';import { findAnnotation, arrangeChild, getInOutConnectPorts, removeChildNodes } from './utility/diagram-util';import { randomId, cloneObject, extendObject, getFunction, getBounds } from './utility/base-util';import { Snapping } from './objects/snapping';import { DiagramTooltipModel } from './objects/tooltip-model';import { TextStyleModel, ShadowModel } from './core/appearance-model';import { TransformFactor } from './interaction/scroller';import { RadialTree } from './layout/radial-tree';import { HierarchicalTree } from './layout/hierarchical-tree';import { ComplexHierarchicalTree } from './layout/complex-hierarchical-tree';import { MindMap } from './layout/mind-map';import { DiagramTooltip, initTooltip } from './objects/tooltip';import { Tooltip } from '@syncfusion/ej2-popups';import { PrintAndExport } from './print-settings';import { Port, PointPort } from './objects/port';import { SymmetricLayout, IGraphObject } from './layout/symmetrical-layout';import { LayoutAnimation } from './objects/layout-animation';import { canShadow } from './utility/constraints-util';import { Layer } from './diagram/layer';import { LayerModel } from './diagram/layer-model';import { DiagramNativeElement } from './core/elements/native-element';import { DiagramHtmlElement } from './core/elements/html-element';import { IconShapeModel } from './objects/icon-model';import { canAllowDrop } from './utility/constraints-util';import { checkParentAsContainer, addChildToContainer } from './interaction/container-interaction';import { DataManager } from '@syncfusion/ej2-data';import { ContextMenuItemModel } from './../diagram/objects/interface/interfaces';
+import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove, Ajax } from '@syncfusion/ej2-base';import { Browser, ModuleDeclaration, Event, EmitType } from '@syncfusion/ej2-base';import { INotifyPropertyChanged } from '@syncfusion/ej2-base';import { CanvasRenderer } from './rendering/canvas-renderer';import { SvgRenderer } from './rendering/svg-renderer';import { DiagramRenderer } from './rendering/renderer';import { BaseAttributes } from './rendering/canvas-interface';import { PageSettings, ScrollSettings } from './diagram/page-settings';import { PageSettingsModel, ScrollSettingsModel } from './diagram/page-settings-model';import { DiagramElement } from './core/elements/diagram-element';import { ServiceLocator } from './objects/service';import { IElement, IDataLoadedEventArgs, ISelectionChangeEventArgs, IClickEventArgs, ScrollValues } from './objects/interface/IElement';import { ISizeChangeEventArgs, IConnectionChangeEventArgs, IEndChangeEventArgs, IDoubleClickEventArgs } from './objects/interface/IElement';import { ICollectionChangeEventArgs, IPropertyChangeEventArgs, IDraggingEventArgs, IRotationEventArgs } from './objects/interface/IElement';import { IDragEnterEventArgs, IDragLeaveEventArgs, IDragOverEventArgs, IDropEventArgs } from './objects/interface/IElement';import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs, IMouseEventArgs } from './objects/interface/IElement';import { StackEntryObject, IExpandStateChangeEventArgs } from './objects/interface/IElement';import { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel } from './objects/interface/interfaces';import { View, IDataSource, IFields } from './objects/interface/interfaces';import { Container } from './core/containers/container';import { Node, BpmnShape, BpmnAnnotation, SwimLane, Path } from './objects/node';import { flipConnector, updatePortEdges, alignElement } from './utility/diagram-util';import { Segment } from './interaction/scroller';import { Connector } from './objects/connector';import { ConnectorModel, BpmnFlowModel } from './objects/connector-model';import { SnapSettings } from './diagram/grid-lines';import { RulerSettings } from './diagram/ruler-settings';import { removeRulerElements, updateRuler, getRulerSize } from './ruler/ruler';import { renderRuler, renderOverlapElement } from './ruler/ruler';import { RulerSettingsModel } from './diagram/ruler-settings-model';import { SnapSettingsModel } from './diagram/grid-lines-model';import { NodeModel, TextModel, BpmnShapeModel, BpmnAnnotationModel, HeaderModel } from './objects/node-model';import { UmlActivityShapeModel, SwimLaneModel, LaneModel, PhaseModel } from './objects/node-model';import { Size } from './primitives/size';import { Keys, KeyModifiers, DiagramTools, AlignmentMode, AnnotationConstraints, NodeConstraints, RendererAction } from './enum/enum';import { DiagramConstraints, BridgeDirection, AlignmentOptions, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, ThumbsConstraints, NudgeDirection } from './enum/enum';import { RealAction, ElementAction, FlipDirection, Orientation, PortConstraints } from './enum/enum';import { PathElement } from './core/elements/path-element';import { TextElement } from './core/elements/text-element';import { updateStyle, removeItem, updateConnector, updateShape, setUMLActivityDefaults, findNodeByName } from './utility/diagram-util';import { setSwimLaneDefaults } from './utility/diagram-util';import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType, removeGradient } from './utility/diagram-util';import { Rect } from './primitives/rect';import { getPortShape } from './objects/dictionary/common';import { PointPortModel } from './objects/port-model';import { ShapeAnnotationModel, AnnotationModel, PathAnnotationModel } from './objects/annotation-model';import { ShapeAnnotation, PathAnnotation, Annotation } from './objects/annotation';import { PointModel } from './primitives/point-model';import { Canvas } from './core/containers/canvas';import { GridPanel, ColumnDefinition } from './core/containers/grid';import { DataSourceModel } from './diagram/data-source-model';import { DataSource } from './diagram/data-source';import { LayoutModel } from './layout/layout-base-model';import { Layout, INode, ILayout } from './layout/layout-base';import { DataBinding } from './data-binding/data-binding';import { Selector } from './interaction/selector';import { SelectorModel } from './interaction/selector-model';import { DiagramEventHandler } from './interaction/event-handlers';import { CommandHandler } from './interaction/command-manager';import { DiagramScroller } from './interaction/scroller';import { Actions, isSelected } from './interaction/actions';import { ToolBase } from './interaction/tool';import { BpmnDiagrams } from './objects/bpmn';import { DiagramContextMenu } from './objects/context-menu';import { ConnectorBridging } from './objects/connector-bridging';import { SpatialSearch } from './interaction/spatial-search/spatial-search';import { HistoryEntry, History } from './diagram/history';import { UndoRedo } from './objects/undo-redo';import { ConnectorEditing } from './interaction/connector-editing';import { Ruler } from '../ruler/index';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs, EJ2Instance } from '@syncfusion/ej2-navigations';import { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements, getDomIndex } from './utility/dom-util';import { getDiagramElement, getScrollerWidth, getHTMLLayer } from './utility/dom-util';import { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg } from './utility/dom-util';import { getPortLayerSvg, getDiagramLayerSvg } from './utility/dom-util';import { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';import { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';import { CommandManagerModel, CommandModel, ContextMenuSettingsModel } from './diagram/keyboard-commands-model';import { canDelete, canInConnect, canOutConnect, canRotate, canVitualize, canDrawThumbs } from './utility/constraints-util';import { canPortInConnect, canPortOutConnect } from './utility/constraints-util';import { canResize, canSingleSelect, canZoomPan, canZoomTextEdit } from './utility/constraints-util';import { canDragSourceEnd, canDragTargetEnd, canDragSegmentThumb, enableReadOnly, canMove } from './utility/constraints-util';import { findAnnotation, arrangeChild, getInOutConnectPorts, removeChildNodes } from './utility/diagram-util';import { randomId, cloneObject, extendObject, getFunction, getBounds } from './utility/base-util';import { Snapping } from './objects/snapping';import { DiagramTooltipModel } from './objects/tooltip-model';import { TextStyleModel, ShadowModel } from './core/appearance-model';import { TransformFactor } from './interaction/scroller';import { RadialTree } from './layout/radial-tree';import { HierarchicalTree } from './layout/hierarchical-tree';import { ComplexHierarchicalTree } from './layout/complex-hierarchical-tree';import { MindMap } from './layout/mind-map';import { DiagramTooltip, initTooltip } from './objects/tooltip';import { Tooltip } from '@syncfusion/ej2-popups';import { PrintAndExport } from './print-settings';import { Port, PointPort } from './objects/port';import { SymmetricLayout, IGraphObject } from './layout/symmetrical-layout';import { LayoutAnimation } from './objects/layout-animation';import { canShadow } from './utility/constraints-util';import { Layer } from './diagram/layer';import { LayerModel } from './diagram/layer-model';import { DiagramNativeElement } from './core/elements/native-element';import { DiagramHtmlElement } from './core/elements/html-element';import { IconShapeModel } from './objects/icon-model';import { canAllowDrop } from './utility/constraints-util';import { checkParentAsContainer, addChildToContainer, updateLaneBoundsAfterAddChild } from './interaction/container-interaction';import { DataManager } from '@syncfusion/ej2-data';import { getConnectors, updateConnectorsProperties, phaseDefine } from './utility/swim-lane-util';import { swimLaneMeasureAndArrange } from './utility/swim-lane-util';import { arrangeChildNodesInSwimLane, updateHeaderMaxWidth, updatePhaseMaxWidth } from './utility/swim-lane-util';import { addLane, addPhase } from './utility/swim-lane-util';import { ContextMenuItemModel } from './../diagram/objects/interface/interfaces';import { SerializationSettingsModel } from './diagram/serialization-settings-model';import { SerializationSettings } from './diagram/serialization-settings';import { removeSwimLane, removeLane, removePhase, removeLaneChildNode } from './utility/swim-lane-util';import { RowDefinition } from './core/containers/grid';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -167,2 +167,19 @@
     /**
+     * Defines the serialization settings of diagram.
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * serializationSettings: { preventDefaults: true },
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default {}
+     */
+    serializationSettings?: SerializationSettingsModel;
+
+    /**
      * Defines the collection of nodes
@@ -722,2 +739,8 @@ * ```html
     /**
+     * Triggers when the state of the expand and collapse icon change for a node.
+     * @event
+     */
+    expandStateChange?: EmitType<IExpandStateChangeEventArgs>;
+
+    /**
      * Triggered when the diagram is rendered completely.
@@ -724,0 +747,0 @@ * @event

src/diagram/diagram.d.ts

@@ -14,2 +14,3 @@ import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
 import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs, IMouseEventArgs } from './objects/interface/IElement';
+import { IExpandStateChangeEventArgs } from './objects/interface/IElement';
 import { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel } from './objects/interface/interfaces';
@@ -24,2 +25,3 @@ import { View } from './objects/interface/interfaces';
 import { NodeModel, BpmnAnnotationModel } from './objects/node-model';
+import { LaneModel, PhaseModel } from './objects/node-model';
 import { DiagramTools, AlignmentMode } from './enum/enum';
@@ -67,2 +69,3 @@ import { DiagramConstraints, BridgeDirection, AlignmentOptions, PortVisibility, DiagramEvent } from './enum/enum';
 import { LayerModel } from './diagram/layer-model';
+import { SerializationSettingsModel } from './diagram/serialization-settings-model';
 /**
@@ -294,2 +297,18 @@ * Represents the Diagram control
     /**
+     * Defines the serialization settings of diagram.
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * serializationSettings: { preventDefaults: true },
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default {}
+     */
+    serializationSettings: SerializationSettingsModel;
+    /**
      * Defines the collection of nodes
@@ -709,2 +728,4 @@ * ```html
     updateSelection: Function | string;
+    /** @private */
+    version: number;
     /**
@@ -826,2 +847,7 @@ * Defines the collection of selected items, size and position of the selector
     /**
+     * Triggers when the state of the expand and collapse icon change for a node.
+     * @event
+     */
+    expandStateChange: EmitType<IExpandStateChangeEventArgs>;
+    /**
      * Triggered when the diagram is rendered completely.
@@ -994,2 +1020,7 @@ * @event
     /**
+     * @private
+     * Returns the name of class Diagram
+     */
+    getClassName(): string;
+    /**
      * To provide the array of modules needed for control rendering
@@ -1383,2 +1414,11 @@ * @return {ModuleDeclaration[]}
     /**
+     * To limit the history entry of the diagram
+     * @param stackLimit defines stackLimit of the history manager.
+     */
+    setStackLimit(stackLimit: number): void;
+    /**
+     * To clear history of the diagram
+     */
+    clearHistory(): void;
+    /**
      * To get the bound of the diagram
@@ -1413,2 +1453,10 @@ */
     addLabels(obj: NodeModel | ConnectorModel, labels: ShapeAnnotationModel[] | PathAnnotation[] | PathAnnotationModel[]): void;
+    /**
+     * Add dynamic Lanes to swimLane at runtime
+     */
+    addLanes(node: NodeModel, lane: LaneModel[], index?: number): void;
+    /**
+     * Add a phase to a swimLane at runtime
+     */
+    addPhases(node: NodeModel, phases: PhaseModel[]): void;
     private removelabelExtension;
@@ -1461,2 +1509,3 @@ /**
     initObject(obj: IElement, layer?: LayerModel, independentObj?: boolean, group?: boolean): void;
+    private getConnectedPort;
     private scaleObject;
@@ -1486,4 +1535,5 @@ private updateDefaultLayoutIcons;
     private updateCanupdateStyle;
+    private getZindexPosition;
     /** @private */
-    updateDiagramObject(obj: (NodeModel | ConnectorModel)): void;
+    updateDiagramObject(obj: (NodeModel | ConnectorModel), canIgnoreIndex?: boolean): void;
     /** @private  */
@@ -1546,3 +1596,3 @@ updateGridContainer(grid: GridPanel): void;
     /** @private */
-    renderSelector(multipleSelection: boolean): void;
+    renderSelector(multipleSelection: boolean, isSwimLane?: boolean): void;
     /** @private */
@@ -1588,5 +1638,7 @@ updateSelector(): void;
     private nodePropertyChangeExtend;
+    private swimLaneNodePropertyChange;
     /** @private */
     nodePropertyChange(actualObject: Node, oldObject: Node, node: Node, isLayout?: boolean, rotate?: boolean): void;
     private updatePorts;
+    private updateFlipOffset;
     private updateUMLActivity;
@@ -1646,2 +1698,3 @@ private updateConnectorProperties;
     private initDroppables;
+    private removeChildInNodes;
     private findChild;
@@ -1648,0 +1701,0 @@ private getChildren;

src/diagram/diagram/history.d.ts

 import { SelectorModel } from '../interaction/selector-model';
 import { ConnectorModel } from '../objects/connector-model';
-import { NodeModel } from '../objects/node-model';
+import { NodeModel, PhaseModel } from '../objects/node-model';
 import { DiagramModel } from '../diagram-model';
@@ -59,2 +59,11 @@ import { ShapeAnnotation, PathAnnotation } from '../objects/annotation';
     objectId?: string;
+    /**
+     * Used to indicate last phase to be changed.
+     */
+    isLastPhase?: boolean;
+    /**
+     * Used to stored the previous phase.
+     */
+    previousPhase?: PhaseModel;
+
 }
@@ -107,2 +116,6 @@
     redoStack?: HistoryEntry[];
+    /**
+     * Used to restrict or limits the number of history entry will be stored on the history list
+     */
+    stackLimit?: number;
 }

src/diagram/diagram/keyboard-commands.d.ts

@@ -167,2 +167,7 @@ import { Keys, KeyModifiers } from '../enum/enum';
     parameter: string;
+    /**
+     * @private
+     * Returns the name of class Command
+     */
+    getClassName(): string;
 }
@@ -169,0 +174,0 @@ /**

src/diagram/diagram/keyboard-commands.js

@@ -46,2 +46,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /**
+     * @private
+     * Returns the name of class Command
+     */
+    Command.prototype.getClassName = function () {
+        return 'Command';
+    };
     __decorate([
@@ -48,0 +55,0 @@ Property('')

src/diagram/diagram/page-settings-model.d.ts

@@ -208,2 +208,8 @@ import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { PageOrientation, BoundaryConstraints, ImageAlignment, ScrollLimit, Scale } from '../enum/enum';import { MarginModel } from '../core/appearance-model';import { Margin } from '../core/appearance';import { Rect } from '../primitives/rect';
 
+    /**
+     * Defines the maximum distance to be left between the object and the edge of the page.
+     * @default { left: 0, right: 0, top: 0, bottom: 0 }
+     */
+    padding?: MarginModel;
+
 }

src/diagram/diagram/page-settings.d.ts

@@ -197,2 +197,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     autoScrollBorder: MarginModel;
+    /**
+     * Defines the maximum distance to be left between the object and the edge of the page.
+     * @default { left: 0, right: 0, top: 0, bottom: 0 }
+     */
+    padding: MarginModel;
 }

src/diagram/diagram/page-settings.js

@@ -135,4 +135,7 @@ var __extends = (this && this.__extends) || (function () {
     ], ScrollSettings.prototype, "autoScrollBorder", void 0);
+    __decorate([
+        Complex({ left: 0, right: 0, top: 0, bottom: 0 }, Margin)
+    ], ScrollSettings.prototype, "padding", void 0);
     return ScrollSettings;
 }(ChildProperty));
 export { ScrollSettings };

src/diagram/enum/enum.js

@@ -716,2 +716,6 @@ /**
     DiagramAction[DiagramAction["Interactions"] = 512] = "Interactions";
+    /** Use to prevent the history during some action in diagram */
+    DiagramAction[DiagramAction["PreventHistory"] = 1024] = "PreventHistory";
+    /** Use to prevent the icon while expand a node in diagram */
+    DiagramAction[DiagramAction["PreventIconsUpdate"] = 2048] = "PreventIconsUpdate";
 })(DiagramAction || (DiagramAction = {}));
@@ -782,2 +786,3 @@ /**
     DiagramEvent[DiagramEvent["mouseOver"] = 22] = "mouseOver";
+    DiagramEvent[DiagramEvent["expandStateChange"] = 23] = "expandStateChange";
 })(DiagramEvent || (DiagramEvent = {}));
@@ -800,2 +805,4 @@ /** Enables/Disables certain features of port connection
     PortConstraints[PortConstraints["OutConnect"] = 16] = "OutConnect";
+    /** Enables all constraints */
+    PortConstraints[PortConstraints["Default"] = 24] = "Default";
 })(PortConstraints || (PortConstraints = {}));
@@ -802,0 +809,0 @@ /**

src/diagram/interaction/actions.js

@@ -145,2 +145,6 @@ import { Connector } from '../objects/connector';
             }
+            else if (diagram.selectedItems.nodes.length && diagram.selectedItems.nodes[0].isLane &&
+                diagram.selectedItems.wrapper && diagram.selectedItems.wrapper.bounds.containsPoint(position)) {
+                return 'Drag';
+            }
             else {
@@ -162,3 +166,4 @@ return 'Select';
     }
-    if (!action) {
+    if (!action && (!diagram.selectedItems.nodes[0] || (!diagram.selectedItems.nodes[0].isPhase &&
+        !diagram.selectedItems.nodes[0].isLane && diagram.selectedItems.nodes[0].shape.type !== 'SwimLane'))) {
         action = checkForResizeHandles(diagram, element, position, matrix, x, y);
@@ -165,0 +170,0 @@ }

src/diagram/interaction/command-manager.d.ts

@@ -33,2 +33,4 @@ import { IElement } from '../objects/interface/IElement';
     processTable: {};
+    /** @private */
+    isContainer: boolean;
     private state;
@@ -35,0 +37,0 @@ private diagram;

src/diagram/interaction/container-interaction.d.ts

@@ -7,7 +7,5 @@ import { NodeModel } from '../objects/node-model';
 import { SelectorModel } from './selector-model';
-import { GridPanel, RowDefinition, ColumnDefinition } from '../core/containers/grid';
 import { Rect } from '../primitives/rect';
 import { DiagramElement } from '../core/elements/diagram-element';
 import { Actions } from './actions';
-import { Container } from '../core/containers/container';
 /**
@@ -17,3 +15,4 @@ * Interaction for Container
 /** @private */
-export declare function updateCanvasBounds(diagram: Diagram, obj: NodeModel | ConnectorModel, position: PointModel, isBoundsUpdate: boolean): void;
+export declare function updateCanvasBounds(diagram: Diagram, obj: NodeModel | ConnectorModel, position: PointModel, isBoundsUpdate: boolean): boolean;
+export declare function removeChildInContainer(diagram: Diagram, obj: NodeModel | ConnectorModel, position: PointModel, isBoundsUpdate: boolean): void;
 /** @private */
@@ -32,24 +31,7 @@ export declare function findBounds(obj: NodeModel, columnIndex: number, isHeader: boolean): Rect;
  */
-export declare function addChildToContainer(diagram: Diagram, parent: NodeModel, node: NodeModel): void;
+export declare function addChildToContainer(diagram: Diagram, parent: NodeModel, node: NodeModel, isUndo?: boolean): void;
+export declare function updateLaneBoundsAfterAddChild(container: NodeModel, swimLane: NodeModel, node: NodeModel, diagram: Diagram, isBoundsUpdate?: boolean): boolean;
 /** @private */
-export declare function renderStackHighlighter(element: DiagramElement, isVertical: Boolean, position: PointModel, diagram: Diagram, isUml?: boolean): void;
+export declare function renderStackHighlighter(element: DiagramElement, isVertical: Boolean, position: PointModel, diagram: Diagram, isUml?: boolean, isSwimlane?: boolean): void;
 /** @private */
 export declare function moveChildInStack(sourceNode: Node, target: Node, diagram: Diagram, action: Actions): void;
-/** @private */
-export declare function initSwimLane(grid: GridPanel, diagram: Diagram, node: NodeModel): void;
-/** @private */
-export declare function addObjectToGrid(diagram: Diagram, grid: GridPanel, parent: NodeModel, object: NodeModel, isHeader?: boolean): Container;
-/** @private */
-export declare function headerDefine(grid: GridPanel, diagram: Diagram, object: NodeModel): void;
-/** @private */
-export declare function phaseDefine(grid: GridPanel, diagram: Diagram, object: NodeModel, indexValue: number, orientation: boolean): void;
-/** @private */
-export declare function laneCollection(grid: GridPanel, diagram: Diagram, object: NodeModel, indexValue: number, laneIndex: number, orientation: boolean): void;
-/** @private */
-export declare function createRow(row: RowDefinition[], height: number): void;
-/** @private */
-export declare function createColumn(width: number): ColumnDefinition;
-/** @private */
-export declare function initGridRow(row: RowDefinition[], orientation: boolean, object: NodeModel): void;
-/** @private */
-export declare function initGridColumns(columns: ColumnDefinition[], orientation: boolean, object: NodeModel): void;

src/diagram/interaction/container-interaction.js

@@ -6,7 +6,8 @@ import { Node } from '../objects/node';
 import { getObjectType } from './../utility/diagram-util';
-import { RowDefinition, ColumnDefinition } from '../core/containers/grid';
 import { Rect } from '../primitives/rect';
 import { getAdornerLayerSvg } from '../utility/dom-util';
-import { DiagramElement } from '../core/elements/diagram-element';
-import { NodeConstraints } from '../enum/enum';
+import { swimLaneMeasureAndArrange, checkLaneSize, checkPhaseOffset } from '../utility/swim-lane-util';
+import { updatePhaseMaxWidth, updateHeaderMaxWidth, updateConnectorsProperties } from '../utility/swim-lane-util';
+import { considerSwimLanePadding } from '../utility/swim-lane-util';
+import { DiagramAction } from '../enum/enum';
 /**
@@ -19,3 +20,6 @@ * Interaction for Container
     var container;
+    var connectorList = [];
+    var groupAction = false;
     if (checkParentAsContainer(diagram, obj, true)) {
+        diagram.protectPropertyChange(true);
         container = diagram.nameTable[obj.parentId];
@@ -26,38 +30,62 @@ var wrapper = container.wrapper;
                 (wrapper.bounds.y <= position.y && wrapper.bounds.bottom >= position.y)))) {
-                if (wrapper.actualSize.width < wrapper.outerBounds.width &&
-                    (!(wrapper.bounds.x > wrapper.outerBounds.x))) {
-                    if (container.rowIndex !== undefined) {
-                        var parent_1 = diagram.nameTable[container.parentId];
-                        if (parent_1.columns.length - 1 === container.columnIndex) {
-                            var x = wrapper.bounds.x;
-                            var y = wrapper.bounds.y;
-                            (wrapper).maxWidth = wrapper.outerBounds.width;
-                            parent_1.wrapper.updateColumnWidth(container.columnIndex, wrapper.outerBounds.width);
-                            diagram.drag(parent_1, x - wrapper.bounds.x, y - wrapper.bounds.y);
-                            diagram.updateDiagramObject(parent_1);
+                var columnIndex = void 0;
+                var parentWrapper = void 0;
+                var y = wrapper.bounds.y;
+                var x = wrapper.bounds.x;
+                var parent_1 = diagram.nameTable[container.parentId] || container;
+                var shape = parent_1.shape;
+                if (shape.type === 'SwimLane') {
+                    groupAction = updateLaneBoundsAfterAddChild(container, parent_1, obj, diagram, true);
+                }
+                else {
+                    var parent_2 = diagram.nameTable[container.parentId] || container;
+                    var shape_1 = parent_2.shape;
+                    parentWrapper = parent_2.wrapper;
+                    if (wrapper.actualSize.width < wrapper.outerBounds.width &&
+                        (!(wrapper.bounds.x > wrapper.outerBounds.x))) {
+                        if (container.rowIndex !== undefined) {
+                            columnIndex = parent_2.columns.length - 1;
+                            parentWrapper.updateColumnWidth(container.columnIndex, wrapper.outerBounds.width, true);
+                            if (shape_1.orientation === 'Horizontal' && shape_1.phaseSize) {
+                                updatePhaseMaxWidth(parent_2, diagram, wrapper, container.columnIndex);
+                            }
+                            updateHeaderMaxWidth(diagram, parent_2);
+                            diagram.drag(parent_2, x - wrapper.bounds.x, y - wrapper.bounds.y);
                         }
+                        else {
+                            diagram.scale(container, (1 + ((wrapper.outerBounds.width - wrapper.actualSize.width) / wrapper.actualSize.width)), 1, ((wrapper.outerBounds.x < wrapper.bounds.x) ? { x: 1, y: 0.5 } : { x: 0, y: 0.5 }));
+                        }
                     }
-                    else {
-                        diagram.scale(container, (1 + ((wrapper.outerBounds.width - wrapper.actualSize.width) / wrapper.actualSize.width)), 1, ((wrapper.outerBounds.x < wrapper.bounds.x) ? { x: 1, y: 0.5 } : { x: 0, y: 0.5 }));
+                    if (wrapper.actualSize.height < wrapper.outerBounds.height &&
+                        (!(wrapper.bounds.y > wrapper.outerBounds.y))) {
+                        if (container.rowIndex !== undefined) {
+                            parentWrapper.updateRowHeight(container.rowIndex, wrapper.outerBounds.height, true);
+                            diagram.drag(parent_2, x - wrapper.bounds.x, y - wrapper.bounds.y);
+                        }
+                        else {
+                            diagram.scale(container, 1, (1 + ((wrapper.outerBounds.height - wrapper.actualSize.height) / wrapper.actualSize.height)), ((wrapper.outerBounds.y < wrapper.bounds.y) ? { x: 0.5, y: 1 } : { x: 0.5, y: 0 }));
+                        }
                     }
                 }
-                if (wrapper.actualSize.height < wrapper.outerBounds.height &&
-                    (!(wrapper.bounds.y > wrapper.outerBounds.y))) {
-                    if (container.rowIndex !== undefined) {
-                        var contai = diagram.nameTable[container.parentId];
-                        var x = wrapper.bounds.x;
-                        var y = wrapper.bounds.y;
-                        (wrapper).maxHeight = wrapper.outerBounds.height;
-                        contai.wrapper.updateRowHeight(container.rowIndex, wrapper.outerBounds.height);
-                        diagram.drag(contai, x - wrapper.bounds.x, y - wrapper.bounds.y);
-                    }
-                    else {
-                        diagram.scale(container, 1, (1 + ((wrapper.outerBounds.height - wrapper.actualSize.height) / wrapper.actualSize.height)), ((wrapper.outerBounds.y < wrapper.bounds.y) ? { x: 0.5, y: 1 } : { x: 0.5, y: 0 }));
-                    }
-                }
             }
-            else if (container.container.type === 'Canvas') {
+            diagram.select([obj]);
+            updateConnectorsProperties(connectorList, diagram);
+        }
+        diagram.protectPropertyChange(false);
+    }
+    return groupAction;
+}
+export function removeChildInContainer(diagram, obj, position, isBoundsUpdate) {
+    var container;
+    var connectorList = [];
+    if (checkParentAsContainer(diagram, obj, true)) {
+        diagram.protectPropertyChange(true);
+        container = diagram.nameTable[obj.parentId];
+        var wrapper = container.wrapper;
+        if (container && container.container.type === 'Canvas') {
+            if ((!isBoundsUpdate && (!(wrapper.bounds.x <= position.x && wrapper.bounds.right >= position.x &&
+                (wrapper.bounds.y <= position.y && wrapper.bounds.bottom >= position.y))))) {
                 var undoObj = cloneObject(obj);
                 diagram.clearSelection();
-                diagram.deleteChild(obj);
+                removeChildrenInLane(diagram, obj);
                 obj.parentId = '';
@@ -69,4 +97,7 @@ var entry = {
                 diagram.addHistoryEntry(entry);
+                if (diagram.commandHandler.isContainer) {
+                    diagram.commandHandler.isContainer = false;
+                    diagram.endGroupAction();
+                }
             }
-            diagram.select([obj]);
         }
@@ -108,3 +139,3 @@ }
     }
-    else {
+    else if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
         if (obj instanceof Selector && obj.nodes.length + obj.connectors.length === 1) {
@@ -127,3 +158,3 @@ object = (obj.nodes.length > 0) ? obj.nodes[0] : obj.connectors[0];
                 height: container.actualSize.height,
-                style: { strokeDashArray: '2 2', fill: 'transparent', strokeColor: 'red' }
+                style: { strokeDashArray: '2 2', fill: 'transparent', strokeColor: '#7D7D7D', strokeWidth: 2 }
             };
@@ -161,10 +192,39 @@ nodes = createHelper(diagram, node);
     });
-    parentNode.wrapper.measure(new Size());
-    parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);
+    if (!parentNode.isLane) {
+        parentNode.wrapper.measure(new Size());
+        parentNode.wrapper.arrange(parentNode.wrapper.desiredSize);
+    }
 }
+function removeChildrenInLane(diagram, node) {
+    if (node.parentId !== '') {
+        var prevParentNode = diagram.nameTable[node.parentId];
+        if (prevParentNode.isLane && prevParentNode.parentId) {
+            var swimlane = diagram.nameTable[prevParentNode.parentId];
+            var canvasId = (prevParentNode.id.slice(swimlane.id.length));
+            var prevParentId = canvasId.substring(0, canvasId.length - 1);
+            var lanes = swimlane.shape.lanes;
+            var lane = void 0;
+            for (var i = 0; i < lanes.length; i++) {
+                lane = lanes[i];
+                if (prevParentId === lane.id) {
+                    for (var j = 0; j < lane.children.length; j++) {
+                        if (lane.children[j].id === node.id) {
+                            lane.children.splice(j, 1);
+                            j--;
+                        }
+                    }
+                }
+            }
+        }
+        diagram.deleteChild(node);
+    }
+}
 /**
  * @private
  */
-export function addChildToContainer(diagram, parent, node) {
+export function addChildToContainer(diagram, parent, node, isUndo) {
     if (!diagram.currentSymbol) {
+        diagram.protectPropertyChange(true);
+        var swimlane = void 0;
+        node = diagram.getObject(node.id) || node;
         var child = (diagram.nodes.indexOf(node) !== -1) ? node.id : node;
@@ -184,22 +244,99 @@ if (parent.container.type === 'Canvas') {
         if (container.children.indexOf(node.id) === -1) {
-            if (node.parentId !== '') {
-                diagram.deleteChild(node);
+            removeChildrenInLane(diagram, node);
+            if (diagram.getObject(node.id)) {
+                diagram.removeElements(node);
             }
             var undoObj = cloneObject(node);
             diagram.addChild(container, child);
-            var entry = {
-                type: 'ChildCollectionChanged', category: 'Internal',
-                undoObject: undoObj, redoObject: cloneObject(node)
-            };
-            diagram.addHistoryEntry(entry);
-            diagram.updateDiagramObject(container);
+            node = diagram.getObject(node.id);
+            if (container.isLane && container.parentId) {
+                swimlane = diagram.nameTable[container.parentId];
+                var lanes = swimlane.shape.lanes;
+                var canvasId = (container.id.slice(swimlane.id.length));
+                var currentParentId = canvasId.substring(0, canvasId.length - 1);
+                for (var i = 0; i < lanes.length; i++) {
+                    if (container.isLane && currentParentId === lanes[i].id) {
+                        lanes[i].children.push(node);
+                    }
+                }
+            }
+            diagram.updateDiagramObject(node);
+            if (!container.parentId) {
+                diagram.updateDiagramObject(container);
+            }
+            else if (!isUndo) {
+                updateLaneBoundsAfterAddChild(container, swimlane, node, diagram);
+            }
+            if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {
+                var entry = {
+                    type: 'ChildCollectionChanged', category: 'Internal',
+                    undoObject: undoObj, redoObject: cloneObject(node)
+                };
+                diagram.addHistoryEntry(entry);
+            }
         }
+        diagram.protectPropertyChange(false);
     }
 }
+export function updateLaneBoundsAfterAddChild(container, swimLane, node, diagram, isBoundsUpdate) {
+    var undoObject = cloneObject(container);
+    var isUpdateRow;
+    var isGroupAction = false;
+    var padding = swimLane.shape.padding;
+    var containerBounds = container.wrapper.bounds;
+    var containerOuterBounds = container.wrapper.outerBounds;
+    var nodeBounds = node.wrapper.bounds;
+    if (swimLane && swimLane.shape.type === 'SwimLane' &&
+        (containerBounds.right < nodeBounds.right + padding ||
+            containerBounds.bottom < nodeBounds.bottom + padding)) {
+        var grid = swimLane.wrapper.children[0];
+        var x = grid.bounds.x;
+        var y = grid.bounds.y;
+        var size = void 0;
+        if (containerBounds.right < nodeBounds.right + padding &&
+            containerOuterBounds.x <= containerBounds.x) {
+            size = nodeBounds.right - containerBounds.right;
+            isUpdateRow = false;
+            grid.updateColumnWidth(container.columnIndex, containerBounds.width + size, true, padding);
+        }
+        if (containerBounds.bottom < nodeBounds.bottom + padding &&
+            containerOuterBounds.y <= containerBounds.y) {
+            size = nodeBounds.bottom - containerBounds.bottom;
+            isUpdateRow = true;
+            grid.updateRowHeight(container.rowIndex, containerBounds.height + size, true, padding);
+        }
+        if (!(diagram.diagramActions & DiagramAction.UndoRedo)) {
+            if (isBoundsUpdate) {
+                diagram.startGroupAction();
+                isGroupAction = true;
+            }
+            if (isUpdateRow !== undefined) {
+                var entry = {
+                    category: 'Internal',
+                    type: (isUpdateRow) ? 'RowHeightChanged' : 'ColumnWidthChanged',
+                    undoObject: undoObject, redoObject: cloneObject(container)
+                };
+                diagram.addHistoryEntry(entry);
+            }
+        }
+        swimLane.width = swimLane.wrapper.width = grid.width;
+        swimLane.height = swimLane.wrapper.height = grid.height;
+        swimLaneMeasureAndArrange(swimLane);
+        if (swimLane.shape.orientation === 'Horizontal') {
+            updatePhaseMaxWidth(swimLane, diagram, container.wrapper, container.columnIndex);
+        }
+        updateHeaderMaxWidth(diagram, swimLane);
+        diagram.drag(swimLane, x - grid.bounds.x, y - grid.bounds.y);
+        checkPhaseOffset(swimLane, diagram);
+        checkLaneSize(swimLane);
+    }
+    considerSwimLanePadding(diagram, node, padding);
+    return isGroupAction;
+}
 //#endregion
 //# reginon stack panel interaction
 /** @private */
-export function renderStackHighlighter(element, isVertical, position, diagram, isUml) {
+export function renderStackHighlighter(element, isVertical, position, diagram, isUml, isSwimlane) {
     var adornerSvg = getAdornerLayerSvg(diagram.element.id);
-    diagram.diagramRenderer.renderStackHighlighter(element, adornerSvg, diagram.scroller.transform, isVertical, position, isUml);
+    diagram.diagramRenderer.renderStackHighlighter(element, adornerSvg, diagram.scroller.transform, isVertical, position, isUml, isSwimlane);
 }
@@ -219,3 +356,3 @@ /** @private */
     }
-    if (target && target.parentId && obj.parentId && action === 'Drag') {
+    if (target && target.parentId && obj.parentId && action === 'Drag' && sourceParent.container.type === 'Stack') {
         var targetIndex = parent.wrapper.children.indexOf(target.wrapper);
@@ -242,303 +379,2 @@ var sourceIndex = parent.wrapper.children.indexOf(obj.wrapper);
 //# region Swimlane rendering
-/** @private */
-export function initSwimLane(grid, diagram, node) {
-    var row = [];
-    var columns = [];
-    var orientation = node.shape.orientation === 'Horizontal' ? true : false;
-    if (node.shape.header) {
-        createRow(row, node.shape.header.height);
-    }
-    initGridRow(row, orientation, node);
-    initGridColumns(columns, orientation, node);
-    grid.setDefinitions(row, columns);
-    var index = 0;
-    if (node.shape.header) {
-        headerDefine(grid, diagram, node);
-        index++;
-    }
-    if (node.shape.phases.length > 0) {
-        phaseDefine(grid, diagram, node, index, orientation);
-        index++;
-    }
-    if (node.shape.lanes.length > 0) {
-        for (var k = 0; k < node.shape.lanes.length; k++) {
-            laneCollection(grid, diagram, node, index, k, orientation);
-            index++;
-        }
-    }
-}
-/** @private */
-export function addObjectToGrid(diagram, grid, parent, object, isHeader) {
-    var node = new Node(parent, 'nodes', object);
-    node.parentId = grid.id;
-    if (isHeader) {
-        node.isHeader = true;
-    }
-    diagram.initObject(node);
-    if (node.wrapper.children.length > 0) {
-        for (var i = 0; i < node.wrapper.children.length; i++) {
-            var child = node.wrapper.children[i];
-            if (child instanceof DiagramElement) {
-                child.isCalculateDesiredSize = false;
-            }
-        }
-    }
-    return node.wrapper;
-}
-// /** @private */
-// export function addGridObject(
-//     diagram: Diagram, grid: Grid, object: NodeModel, isHeader?: boolean, rowValue?: number, colValue?: number,
-//     nodeObj?: NodeModel, orientation?: boolean, lanesNo?: number): void {
-//     let node: Node = new Node(object, 'nodes', { container: { type: 'Canvas', orientation: 'Horziontal' } });
-//     diagram.initObject(node as IElement);
-//     node.parentId = grid.id;
-//     if (isHeader) {
-//         (node as Node).isHeader = true;
-//     }
-//     diagram.nodes.push(node);
-//     let canvas: Container = node.wrapper;
-//     node.rowIndex = rowValue; node.columnIndex = colValue;
-//     canvas.children = [];
-//     if (nodeObj) {
-//         if (lanesNo !== undefined) {
-//             orientation ? canvas.verticalAlignment = 'Stretch' : canvas.horizontalAlignment = 'Stretch';
-//             canvas.relativeMode = 'Object';
-//             if (orientation) {
-//                 nodeObj.width = (object.shape as SwimLaneModel).lanes[lanesNo].header.width;
-//             } else {
-//                 nodeObj.height = (object.shape as SwimLaneModel).lanes[lanesNo].header.width;
-//             }
-//         }
-//         let node: Node = new Node(object, 'nodes', nodeObj);
-//         node.parentId = grid.id;
-//         node.rowIndex = rowValue; node.columnIndex = colValue;
-//         if (isHeader) {
-//             (node as Node).isHeader = true;
-//         }
-//         diagram.initObject(node);
-//         if (lanesNo === undefined) {
-//             if (isHeader) {
-//                 node.wrapper.horizontalAlignment = 'Stretch';
-//             } else {
-//                 orientation ? node.wrapper.horizontalAlignment = 'Stretch' : node.wrapper.verticalAlignment = 'Stretch';
-//             }
-//             canvas.horizontalAlignment = node.wrapper.horizontalAlignment;
-//             canvas.verticalAlignment = node.wrapper.verticalAlignment;
-//             canvas.relativeMode = node.wrapper.relativeMode = 'Object';
-//         } else {
-//             orientation ? node.wrapper.verticalAlignment = 'Stretch' : node.wrapper.horizontalAlignment = 'Stretch';
-//             node.wrapper.relativeMode = 'Object';
-//         }
-//         if (node.wrapper.children.length > 0) {
-//             for (let i: number = 0; i < node.wrapper.children.length; i++) {
-//                 let child: DiagramElement = node.wrapper.children[i];
-//                 if (child instanceof DiagramElement) {
-//                     child.isCalculateDesiredSize = false;
-//                 }
-//             }
-//         }
-//         canvas.children.push(node.wrapper);
-//     }
-//     grid.addObject(canvas, rowValue, colValue, 1, (isHeader) ? grid.columnDefinitions().length : 1);
-// }
-/** @private */
-export function headerDefine(grid, diagram, object) {
-    var node = {
-        annotations: [{ content: object.shape.header.content.content }],
-        style: object.shape.header.style,
-        rowIndex: 0, columnIndex: 0,
-        container: { type: 'Canvas', orientation: 'Horizontal' }
-    };
-    var wrapper = addObjectToGrid(diagram, grid, object, node, true);
-    grid.addObject(wrapper, 0, 0, 1, grid.columnDefinitions().length);
-}
-/** @private */
-export function phaseDefine(grid, diagram, object, indexValue, orientation) {
-    var rowValue = 0;
-    var colValue = 0;
-    for (var k = 0; k < object.shape.phases.length; k++) {
-        if (orientation) {
-            colValue = k;
-            rowValue = indexValue;
-        }
-        else {
-            rowValue = object.shape.header ? k + 1 : k;
-        }
-        var phaseObject = {
-            annotations: [{
-                    content: object.shape.phases[k].header.content.content,
-                    rotateAngle: orientation ? 0 : 270
-                }],
-            style: object.shape.phases[k].style,
-            rowIndex: rowValue, columnIndex: colValue,
-            container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }
-        };
-        var wrapper = addObjectToGrid(diagram, grid, object, phaseObject);
-        grid.addObject(wrapper, rowValue, colValue);
-    }
-}
-/** @private */
-export function laneCollection(grid, diagram, object, indexValue, laneIndex, orientation) {
-    var value = object.shape.phases.length || 1;
-    var colValue = 0;
-    var rowValue = orientation ? indexValue : 1;
-    var phaseCount = object.shape.phases.length > 0 ? 1 : 0;
-    for (var l = 0; l < value; l++) {
-        colValue = orientation ? l : laneIndex + phaseCount;
-        var canvas = {
-            id: object.shape.lanes[laneIndex].id + l,
-            rowIndex: rowValue, columnIndex: colValue,
-            style: object.shape.lanes[laneIndex].style,
-            constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,
-            container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }
-        };
-        var parentWrapper = addObjectToGrid(diagram, grid, object, canvas);
-        parentWrapper.children[0].isCalculateDesiredSize = false;
-        if (l === 0) {
-            var laneNode = void 0;
-            laneNode = {
-                id: object.shape.lanes[laneIndex].id + '_header',
-                style: object.shape.lanes[laneIndex].header.style,
-                annotations: [{
-                        content: object.shape.lanes[laneIndex].header.content.content,
-                        rotateAngle: orientation ? 270 : 0
-                    }],
-                rowIndex: rowValue, columnIndex: colValue,
-                container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }
-            };
-            (orientation) ? laneNode.width = object.shape.lanes[laneIndex].header.width :
-                laneNode.height = object.shape.lanes[laneIndex].header.width;
-            var childWrapper = addObjectToGrid(diagram, grid, object, laneNode);
-            parentWrapper.children.push(childWrapper);
-        }
-        grid.addObject(parentWrapper, rowValue, colValue);
-        if (!orientation) {
-            rowValue++;
-        }
-        colValue = orientation ? l : laneIndex + 1;
-    }
-}
-// /** @private */
-// export function laneDefine(
-//     grid: Grid, diagram: Diagram, object: NodeModel, indexValue: number, laneIndex: number, orientation: boolean): void {
-//     let value: number = orientation ? grid.columnDefinitions().length : (object.shape as SwimLaneModel).phases.length || 1;
-//     let colValue: number = 0;
-//     let rowValue: number = 0;
-//     let phaseLength: number = (object.shape as SwimLaneModel).phases.length > 0 ? 1 : 0;
-//     rowValue = orientation ? indexValue : 1;
-//     for (let l: number = 0; l < value; l++) {
-//         colValue = orientation ? l : laneIndex + phaseLength;
-//         let node: NodeModel = {
-//             style: (object.shape as SwimLaneModel).lanes[laneIndex].style, width: object.width, height: object.height
-//         };
-//         addGridObject(diagram, grid, object, false, orientation ? rowValue : rowValue, colValue);
-//         if (l === 0) {
-//             let laneNode: NodeModel;
-//             laneNode = {
-//                 id: (object.shape as SwimLaneModel).lanes[laneIndex].id,
-//                 style: (object.shape as SwimLaneModel).lanes[laneIndex].header.style,
-//                 annotations: [{
-//                     content: (object.shape as SwimLaneModel).lanes[laneIndex].header.content.content,
-//                     rotateAngle: orientation ? 270 : 0
-//                 }],
-//                 container: { type: 'Canvas', orientation: orientation ? 'Horizontal' : 'Vertical' }
-//             };
-//             addGridObject(diagram, grid, object, false, rowValue, orientation ? 0 : colValue, laneNode, orientation, laneIndex);
-//         }
-//         if (!orientation) {
-//             rowValue++;
-//         }
-//         colValue = orientation ? l : laneIndex + 1;
-//     }
-// }
-/** @private */
-export function createRow(row, height) {
-    var rows = new RowDefinition();
-    rows.height = height;
-    row.push(rows);
-}
-/** @private */
-export function createColumn(width) {
-    var cols = new ColumnDefinition();
-    cols.width = width;
-    return cols;
-}
-/** @private */
-export function initGridRow(row, orientation, object) {
-    var totalHeight = 0;
-    var height;
-    if (row.length > 0) {
-        for (var i = 0; i < row.length; i++) {
-            totalHeight += row[i].height;
-        }
-    }
-    if (orientation) {
-        if (object.shape.phases.length > 0) {
-            totalHeight += object.shape.phases[0].height;
-            createRow(row, object.shape.phases[0].height);
-        }
-        if (object.shape.lanes.length > 0) {
-            for (var i = 0; i < object.shape.lanes.length; i++) {
-                height = object.shape.lanes[i].height;
-                totalHeight += height;
-                if (i === object.shape.lanes.length - 1 && totalHeight < object.height) {
-                    height += object.height - totalHeight;
-                }
-                createRow(row, height);
-            }
-        }
-    }
-    else {
-        if (object.shape.phases.length > 0) {
-            for (var i = 0; i < object.shape.phases.length; i++) {
-                height = object.shape.phases[i].offset;
-                totalHeight += height;
-                if (i === object.shape.phases.length - 1 && totalHeight < object.height) {
-                    height += object.height - totalHeight;
-                }
-                createRow(row, height);
-            }
-        }
-        else {
-            createRow(row, object.height);
-        }
-    }
-}
-/** @private */
-export function initGridColumns(columns, orientation, object) {
-    var totalWidth = 0;
-    if (object.shape.phases.length > 0 && object.shape.orientation === 'Horizontal') {
-        for (var j = 0; j < object.shape.phases.length; j++) {
-            totalWidth += object.shape.phases[j].offset;
-            var cols = createColumn(object.shape.phases[j].offset);
-            if (j === object.shape.phases.length - 1 && totalWidth < object.width) {
-                cols.width += object.width - totalWidth;
-            }
-            columns.push(cols);
-        }
-    }
-    else if (!orientation) {
-        var value = object.shape.phases.length > 0 ? object.shape.lanes.length
-            + 1 : object.shape.lanes.length;
-        for (var j = 0; j < value; j++) {
-            if (j === 0 && object.shape.phases.length > 0) {
-                totalWidth += object.shape.phases[0].height;
-                var cols = createColumn(object.shape.phases[0].height);
-                columns.push(cols);
-            }
-            else {
-                totalWidth += object.shape.lanes[0].height;
-                var cols = createColumn(object.shape.lanes[0].height);
-                if (j === object.shape.lanes.length && totalWidth < object.width) {
-                    cols.width += object.width - totalWidth;
-                }
-                columns.push(cols);
-            }
-        }
-    }
-    else {
-        var cols = createColumn(object.width);
-        columns.push(cols);
-    }
-}
 //#end region

src/diagram/interaction/event-handlers.d.ts

@@ -80,2 +80,3 @@ import { PointModel } from '../primitives/point-model';
     mouseUp(evt: PointerEvent): void;
+    addSwimLaneObject(selectedNode: NodeModel): void;
     /** @private */
@@ -129,3 +130,6 @@ mouseLeave(evt: PointerEvent): void;
     findActionToBeDone(obj: NodeModel | ConnectorModel, wrapper: DiagramElement, position: PointModel, target?: NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel): Actions;
+    private updateContainerBounds;
     private updateContainerProperties;
+    private updateLaneChildNode;
+    private updateContainerPropertiesExtend;
     private addUmlNode;
@@ -151,1 +155,6 @@ }
 }
+/** @private */
+export interface HistoryLog {
+    hasStack?: boolean;
+    isPreventHistory?: boolean;
+}

src/diagram/interaction/scroller.d.ts

@@ -61,3 +61,3 @@ import { Diagram } from '../diagram';
      */
-    getPageBounds(boundingRect?: boolean, region?: DiagramRegions): Rect;
+    getPageBounds(boundingRect?: boolean, region?: DiagramRegions, hasPadding?: boolean): Rect;
     /**
@@ -64,0 +64,0 @@ * To get page break when PageBreak is set as true

src/diagram/interaction/scroller.js

@@ -110,3 +110,3 @@ import { Rect } from '../primitives/rect';
         var offsetY = 0;
-        var pageBounds = this.getPageBounds();
+        var pageBounds = this.getPageBounds(undefined, undefined, true);
         pageBounds.x *= this.currentZoom;
@@ -134,3 +134,3 @@ pageBounds.y *= this.currentZoom;
         this.scrolled = false;
-        var pageBounds = this.getPageBounds();
+        var pageBounds = this.getPageBounds(undefined, undefined, true);
         pageBounds.x *= this.currentZoom;
@@ -255,3 +255,3 @@ pageBounds.y *= this.currentZoom;
     DiagramScroller.prototype.setSize = function () {
-        var pageBounds = this.getPageBounds();
+        var pageBounds = this.getPageBounds(undefined, undefined, true);
         pageBounds.x *= this.currentZoom;
@@ -294,4 +294,5 @@ pageBounds.y *= this.currentZoom;
      */
-    DiagramScroller.prototype.getPageBounds = function (boundingRect, region) {
+    DiagramScroller.prototype.getPageBounds = function (boundingRect, region, hasPadding) {
         var rect = new Rect();
+        var pageBounds;
         var temp = 0;
@@ -322,8 +323,16 @@ if (region !== 'Content' && this.diagram.pageSettings.width !== null && this.diagram.pageSettings.height !== null) {
             }
-            return new Rect((-negwidth), (-negheight), width + negwidth, height + negheight);
+            pageBounds = new Rect((-negwidth), (-negheight), width + negwidth, height + negheight);
         }
         else {
             var origin = boundingRect ? undefined : 0;
-            return this.diagram.spatialSearch.getPageBounds(origin, origin);
+            pageBounds = this.diagram.spatialSearch.getPageBounds(origin, origin);
         }
+        if (hasPadding) {
+            var scrollpadding = this.diagram.scrollSettings.padding;
+            pageBounds.x -= scrollpadding.left;
+            pageBounds.y -= scrollpadding.top;
+            pageBounds.width += (scrollpadding.left + scrollpadding.right);
+            pageBounds.height += (scrollpadding.top + scrollpadding.bottom);
+        }
+        return pageBounds;
     };
@@ -410,3 +419,6 @@ /**
             translateMatrix(matrix, this.horizontalOffset, this.verticalOffset);
-            focusPoint = focusPoint || { x: this.viewPortWidth / 2, y: this.viewPortHeight / 2 };
+            focusPoint = focusPoint || {
+                x: (this.viewPortWidth / 2 - this.horizontalOffset) / this.currentZoom,
+                y: (this.viewPortHeight / 2 - this.verticalOffset) / this.currentZoom
+            };
             focusPoint = transformPointByMatrix(matrix, focusPoint);
@@ -416,3 +428,3 @@ if ((this.currentZoom * factor) >= this.diagram.scrollSettings.minZoom &&
                 this.currentZoom *= factor;
-                var pageBounds = this.getPageBounds();
+                var pageBounds = this.getPageBounds(undefined, undefined, true);
                 pageBounds.x *= this.currentZoom;
@@ -470,3 +482,3 @@ pageBounds.y *= this.currentZoom;
             if (region !== 'CustomBounds') {
-                bounds = this.getPageBounds(true, region);
+                bounds = this.getPageBounds(true, region, true);
             }
@@ -473,0 +485,0 @@ var scale = { x: 0, y: 0 };

src/diagram/interaction/selector.d.ts

@@ -137,2 +137,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     verticalAlignment: VerticalAlignment;
+    /**
+     * @private
+     * Returns the name of class UserHandle
+     */
+    getClassName(): string;
 }
@@ -139,0 +144,0 @@ /**

src/diagram/interaction/selector.js

@@ -72,2 +72,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /**
+     * @private
+     * Returns the name of class UserHandle
+     */
+    UserHandle.prototype.getClassName = function () {
+        return 'UserHandle';
+    };
     __decorate([
@@ -74,0 +81,0 @@ Property('')

src/diagram/interaction/tool.d.ts

@@ -129,3 +129,3 @@ import { PointModel } from '../primitives/point-model';
     /**   @private  */
-    mouseUp(args: MouseEventArgs): void;
+    mouseUp(args: MouseEventArgs, isPreventHistory?: boolean): void;
     /**   @private  */
@@ -173,3 +173,3 @@ mouseMove(args: MouseEventArgs): boolean;
     /**   @private  */
-    mouseUp(args: MouseEventArgs): boolean;
+    mouseUp(args: MouseEventArgs, isPreventHistory?: boolean): boolean;
     /**   @private  */
@@ -176,0 +176,0 @@ mouseMove(args: MouseEventArgs): boolean;

src/diagram/layout/hierarchical-tree.d.ts

 import { INode } from './layout-base';
 import { Layout, ILayout } from './layout-base';
+import { DiagramAction } from '../enum/enum';
 import { PointModel } from '../primitives/point-model';
@@ -29,3 +30,3 @@ /**
     /**   @private  */
-    updateLayout(nodes: INode[], nameTable: Object, layoutProp: Layout, viewport: PointModel, uniqueId: string): ILayout;
+    updateLayout(nodes: INode[], nameTable: Object, layoutProp: Layout, viewport: PointModel, uniqueId: string, action?: DiagramAction): ILayout;
     private doLayout;
@@ -32,0 +33,0 @@ private getBounds;

src/diagram/objects/annotation.d.ts

@@ -187,2 +187,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
+    /**
+     * @private
+     * Returns the module of class ShapeAnnotation
+     */
+    getClassName(): string;
 }
@@ -218,2 +223,7 @@ /**
     constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
+    /**
+     * @private
+     * Returns the module of class PathAnnotation
+     */
+    getClassName(): string;
 }

src/diagram/objects/annotation.js

@@ -115,2 +115,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /**
+     * @private
+     * Returns the module of class ShapeAnnotation
+     */
+    ShapeAnnotation.prototype.getClassName = function () {
+        return 'ShapeAnnotation';
+    };
     __decorate([
@@ -131,2 +138,9 @@ Complex({ x: 0.5, y: 0.5 }, Point)
     }
+    /**
+     * @private
+     * Returns the module of class PathAnnotation
+     */
+    PathAnnotation.prototype.getClassName = function () {
+        return 'PathAnnotation';
+    };
     __decorate([
@@ -133,0 +147,0 @@ Property(0.5)

src/diagram/objects/connector-model.d.ts

@@ -523,3 +523,3 @@ import { Property, Complex, Collection, ChildProperty, ComplexFactory, CollectionFactory } from '@syncfusion/ej2-base';import { ShapeStyle, StrokeStyle } from '../core/appearance';import { StrokeStyleModel, ShapeStyleModel } from '../core/appearance-model';import { Point } from '../primitives/point';import { TextElement } from '../core/elements/text-element';import { PointModel } from '../primitives/point-model';import { Segments, DecoratorShapes, Transform, ConnectorConstraints, Direction, LayoutOrientation, Status } from '../enum/enum';import { Rect } from '../primitives/rect';import { Size } from '../primitives/size';import { findAngle, findConnectorPoints, Bridge, getOuterBounds } from '../utility/connector';import { getAnnotationPosition, alignLabelOnSegments, updateConnector, setUMLActivityDefaults } from '../utility/diagram-util';import { randomId, getFunction } from './../utility/base-util';import { flipConnector } from './../utility/diagram-util';import { PathElement } from '../core/elements/path-element';import { PathAnnotation } from './annotation';import { Canvas } from '../core/containers/canvas';import { getDecoratorShape } from './dictionary/common';import { IElement } from './interface/IElement';import { Container } from '../core/containers/container';import { DiagramElement } from '../core/elements/diagram-element';import { HorizontalAlignment, VerticalAlignment, AssociationFlow, ClassifierShape, Multiplicity } from '../enum/enum';import { ConnectionShapes, UmlActivityFlows, BpmnFlows, BpmnMessageFlows, BpmnSequenceFlows, BpmnAssociationFlows } from '../enum/enum';import { SegmentInfo, Alignment } from '../rendering/canvas-interface';import { PathAnnotationModel } from './annotation-model';import { NodeBase } from './node-base';import { DiagramTooltipModel } from './tooltip-model';import { DiagramTooltip } from './tooltip';import { Matrix, identityMatrix, rotateMatrix, scaleMatrix, transformPointsByMatrix, transformPointByMatrix } from '../primitives/matrix';import { DiagramHtmlElement } from '../core/elements/html-element';
     /**
-     * Sets the unique id of the source port of the connector
+     * Sets the source padding of the connector
      * @default 0
@@ -530,3 +530,3 @@ */
     /**
-     * Sets the unique id of the target port of the connector
+     * Sets the target padding of the connector
      * @default 0
@@ -533,0 +533,0 @@ */

src/diagram/objects/connector.d.ts

@@ -233,2 +233,7 @@ /// <reference path="node-base-model.d.ts" />
     point: PointModel;
+    /**
+     * @private
+     * Returns the name of class StraightSegment
+     */
+    getClassName(): string;
 }
@@ -269,2 +274,7 @@ /**
     vector2: VectorModel;
+    /**
+     * @private
+     * Returns the name of class BezierSegment
+     */
+    getClassName(): string;
 }
@@ -312,2 +322,7 @@ /**
     direction: Direction;
+    /**
+     * @private
+     * Returns the module of class OrthogonalSegment
+     */
+    getClassName(): string;
 }
@@ -535,3 +550,3 @@ /**
     /**
-     * Sets the unique id of the source port of the connector
+     * Sets the source padding of the connector
      * @default 0
@@ -541,3 +556,3 @@ */
     /**
-     * Sets the unique id of the target port of the connector
+     * Sets the target padding of the connector
      * @default 0
@@ -614,2 +629,7 @@ */
     scale(sw: number, sh: number, width: number, height: number, refObject?: DiagramElement): PointModel;
+    /**
+     * @private
+     * Returns the name of class Connector
+     */
+    getClassName(): string;
 }

src/diagram/objects/connector.js

@@ -189,2 +189,9 @@ var __extends = (this && this.__extends) || (function () {
     }
+    /**
+     * @private
+     * Returns the name of class StraightSegment
+     */
+    StraightSegment.prototype.getClassName = function () {
+        return 'StraightSegment';
+    };
     __decorate([
@@ -204,2 +211,9 @@ Complex({ x: 0, y: 0 }, Point)
     }
+    /**
+     * @private
+     * Returns the name of class BezierSegment
+     */
+    BezierSegment.prototype.getClassName = function () {
+        return 'BezierSegment';
+    };
     __decorate([
@@ -228,2 +242,9 @@ Complex({ x: 0, y: 0 }, Point)
     }
+    /**
+     * @private
+     * Returns the module of class OrthogonalSegment
+     */
+    OrthogonalSegment.prototype.getClassName = function () {
+        return 'OrthogonalSegment';
+    };
     __decorate([
@@ -1201,2 +1222,9 @@ Property(null)
     };
+    /**
+     * @private
+     * Returns the name of class Connector
+     */
+    Connector.prototype.getClassName = function () {
+        return 'Connector';
+    };
     __decorate([
@@ -1203,0 +1231,0 @@ ComplexFactory(getConnectorType)

src/diagram/objects/context-menu.js

@@ -217,16 +217,20 @@ import { remove } from '@syncfusion/ej2-base';
         this.parent.trigger(contextMenuOpen, diagramArgs);
-        if (diagramArgs.items.length === diagramArgs.hiddenItems.length) {
-            diagramArgs.cancel = true;
-            diagramArgs.hiddenItems = [];
+        var hidden = true;
+        this.hiddenItems = this.hiddenItems.concat(diagramArgs.hiddenItems);
+        this.contextMenu.enableItems(this.disableItems, false, true);
+        var contextItems = this;
+        args.items.forEach(function (item) {
+            if (contextItems.hiddenItems.indexOf(item.id) > -1) {
+                contextItems.contextMenu.hideItems([item.id], true);
+            }
+        });
+        contextItems.contextMenu.items.forEach(function (item) {
+            if (contextItems.hiddenItems.indexOf(item.id) === -1) {
+                hidden = false;
+            }
+        });
+        if (hidden) {
+            diagramArgs.cancel = hidden;
+            this.hiddenItems = [];
         }
-        else {
-            this.hiddenItems = this.hiddenItems.concat(diagramArgs.hiddenItems);
-            this.contextMenu.enableItems(this.disableItems, false, true);
-            var contextItems_1 = this;
-            args.items.forEach(function (item) {
-                if (contextItems_1.hiddenItems.indexOf(item.id) > -1) {
-                    contextItems_1.contextMenu.hideItems([item.id], true);
-                }
-            });
-        }
     };
@@ -233,0 +237,0 @@ DiagramContextMenu.prototype.ensureTarget = function (item) {

src/diagram/objects/interface/IElement.d.ts

@@ -339,1 +339,11 @@ import { Container } from '../../core/containers/container';
 }
+/**
+ * IExpandStateChangeEventArgs notifies when the icon is changed
+ * @private
+ */
+export interface IExpandStateChangeEventArgs {
+    /** returns node that is being changed the icon */
+    element?: NodeModel;
+    /** returns whether or not to expanded */
+    state?: boolean;
+}

src/diagram/objects/layout-animation.d.ts

 import { Diagram } from '../diagram';
 import { Node } from '../objects/node';
 import { ILayout } from '../layout/layout-base';
+import { NodeModel } from '../objects/node-model';
 /**
@@ -17,3 +18,3 @@ * Layout Animation function to enable or disable layout animation
     /** @private */
-    layoutAnimation(objValue: ILayout, layoutTimer: Object, stop: boolean, diagram: Diagram): void;
+    layoutAnimation(objValue: ILayout, layoutTimer: Object, stop: boolean, diagram: Diagram, node?: NodeModel): void;
     /**
@@ -20,0 +21,0 @@ * update the node opacity for the node and connector once the layout animation starts

src/diagram/objects/layout-animation.js

 import { Container } from '../core/containers/container';
 import { DiagramEvent } from '../enum/enum';
+import { cloneObject as clone } from '../utility/base-util';
 /**
@@ -20,3 +21,3 @@ * Layout Animation function to enable or disable layout animation
             j++;
-            return _this.layoutAnimation(objects, setIntervalObject, j === 6, diagram);
+            return _this.layoutAnimation(objects, setIntervalObject, j === 6, diagram, node);
         }, 20);
@@ -31,8 +32,10 @@ if (node.isExpanded) {
             var x = 0;
-            this.updateOpacity(node, opacity_1, diagram);
-            var current = this;
-            setIntervalObjects_1[x] = setInterval(function () {
-                opacity_1 <= 1 ? _this.updateOpacity(node, opacity_1, diagram) : clearInterval(setIntervalObjects_1[0]);
-                opacity_1 += .2;
-            }, 20);
+            if (animation) {
+                this.updateOpacity(node, opacity_1, diagram);
+                var current = this;
+                setIntervalObjects_1[x] = setInterval(function () {
+                    opacity_1 <= 1 ? _this.updateOpacity(node, opacity_1, diagram) : clearInterval(setIntervalObjects_1[0]);
+                    opacity_1 += .2;
+                }, 20);
+            }
         }
@@ -44,8 +47,8 @@ };
     /** @private */
-    LayoutAnimation.prototype.layoutAnimation = function (objValue, layoutTimer, stop, diagram) {
+    LayoutAnimation.prototype.layoutAnimation = function (objValue, layoutTimer, stop, diagram, node) {
         if (!stop) {
             for (var k = 0; k < objValue.objects.length; k++) {
-                var node = diagram.nameTable[objValue.objects[k].id];
-                node.offsetX += objValue.objects[k].differenceX / 5;
-                node.offsetY += objValue.objects[k].differenceY / 5;
+                var node_1 = diagram.nameTable[objValue.objects[k].id];
+                node_1.offsetX += objValue.objects[k].differenceX / 5;
+                node_1.offsetY += objValue.objects[k].differenceY / 5;
             }
@@ -60,2 +63,6 @@ }
             diagram.protectPropertyChange(this.protectChange);
+            var arg = {
+                element: clone(node), state: (node.isExpanded) ? true : false
+            };
+            diagram.triggerEvent(DiagramEvent.expandStateChange, arg);
         }
@@ -62,0 +69,0 @@ };

src/diagram/objects/node-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';import { ShapeStyle, Margin, TextStyle, Shadow } from '../core/appearance';import { ShapeStyleModel, TextStyleModel, ShadowModel, } from '../core/appearance-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { PointModel } from '../primitives/point-model';import { Shapes, BasicShapes, FlowShapes, UmlActivityShapes, Scale, ImageAlignment, Status, ElementAction } from '../enum/enum';import { IElement } from './interface/IElement';import { Container } from '../core/containers/container';import { Canvas } from '../core/containers/canvas';import { getBasicShape } from './dictionary/basic-shapes';import { DiagramElement } from '../core/elements/diagram-element';import { PathElement } from '../core/elements/path-element';import { TextElement } from '../core/elements/text-element';import { ImageElement } from '../core/elements/image-element';import { DiagramNativeElement } from '../core/elements/native-element';import { Port, PointPort } from './port';import { PointPortModel } from './port-model';import { Annotation, ShapeAnnotation } from './annotation';import { ShapeAnnotationModel, HyperlinkModel } from './annotation-model';import { getPortShape, getIconShape } from './dictionary/common';import { getFlowShape } from './dictionary/flow-shapes';import { HorizontalAlignment, VerticalAlignment, BpmnShapes, BpmnEvents, BpmnTriggers, BpmnGateways, NodeConstraints } from '../enum/enum';import { BpmnDataObjects, BpmnTasks, BpmnSubProcessTypes, BpmnLoops } from '../enum/enum';import { BpmnBoundary, BpmnActivities, UmlScope } from '../enum/enum';import { MarginModel } from '../core/appearance-model';import { LayoutModel } from '../layout/layout-base-model';import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes, updatePortEdges } from './../utility/diagram-util';import { randomId, getFunction } from './../utility/base-util';import { NodeBase } from './node-base';import { canShadow } from './../utility/constraints-util';import { PortVisibility, Stretch } from '../enum/enum';import { IconShapeModel } from './icon-model';import { IconShape } from './icon';import { measurePath } from './../utility/dom-util';import { Rect } from '../primitives/rect';import { getPolygonPath } from './../utility/path-util';import { DiagramHtmlElement } from '../core/elements/html-element';import { StackPanel } from '../core/containers/stack-panel';import { GridPanel, RowDefinition, ColumnDefinition } from '../core/containers/grid';import { Orientation, ContainerTypes, ClassifierShape } from '../enum/enum';import { getULMClassifierShapes } from '../utility/uml-util';import { initSwimLane } from '../interaction/container-interaction';import { AnnotationModel } from './annotation-model';
+import { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';import { ShapeStyle, Margin, TextStyle, Shadow } from '../core/appearance';import { ShapeStyleModel, TextStyleModel, ShadowModel, } from '../core/appearance-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { PointModel } from '../primitives/point-model';import { Shapes, BasicShapes, FlowShapes, UmlActivityShapes, Scale, ImageAlignment, Status, ElementAction } from '../enum/enum';import { IElement } from './interface/IElement';import { Container } from '../core/containers/container';import { Canvas } from '../core/containers/canvas';import { getBasicShape } from './dictionary/basic-shapes';import { DiagramElement } from '../core/elements/diagram-element';import { PathElement } from '../core/elements/path-element';import { TextElement } from '../core/elements/text-element';import { ImageElement } from '../core/elements/image-element';import { DiagramNativeElement } from '../core/elements/native-element';import { Port, PointPort } from './port';import { PointPortModel } from './port-model';import { Annotation, ShapeAnnotation } from './annotation';import { ShapeAnnotationModel, HyperlinkModel } from './annotation-model';import { getPortShape, getIconShape } from './dictionary/common';import { getFlowShape } from './dictionary/flow-shapes';import { HorizontalAlignment, VerticalAlignment, BpmnShapes, BpmnEvents, BpmnTriggers, BpmnGateways, NodeConstraints } from '../enum/enum';import { BpmnDataObjects, BpmnTasks, BpmnSubProcessTypes, BpmnLoops } from '../enum/enum';import { BpmnBoundary, BpmnActivities, UmlScope } from '../enum/enum';import { MarginModel } from '../core/appearance-model';import { LayoutModel } from '../layout/layout-base-model';import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes, updatePortEdges } from './../utility/diagram-util';import { setSwimLaneDefaults } from './../utility/diagram-util';import { randomId, getFunction } from './../utility/base-util';import { NodeBase } from './node-base';import { canShadow } from './../utility/constraints-util';import { PortVisibility, Stretch } from '../enum/enum';import { IconShapeModel } from './icon-model';import { IconShape } from './icon';import { measurePath } from './../utility/dom-util';import { Rect } from '../primitives/rect';import { getPolygonPath } from './../utility/path-util';import { DiagramHtmlElement } from '../core/elements/html-element';import { StackPanel } from '../core/containers/stack-panel';import { GridPanel, RowDefinition, ColumnDefinition } from '../core/containers/grid';import { Orientation, ContainerTypes, ClassifierShape } from '../enum/enum';import { getULMClassifierShapes } from '../utility/uml-util';import { initSwimLane } from './../utility/swim-lane-util';import { AnnotationModel } from './annotation-model';
 import {NodeBaseModel} from "./node-base-model";
@@ -662,2 +662,3 @@
  * Interface for a class BpmnTransactionSubProcess
+ * @private
  */
@@ -1521,3 +1522,3 @@ export interface BpmnTransactionSubProcessModel {
      */
-    content?: Annotation;
+    annotation?: Annotation;
 
@@ -1528,7 +1529,7 @@ /**
      */
-    style?: TextStyleModel;
+    style?: ShapeStyleModel;
 
     /**
      * Sets the height of the header
-     * @default 25
+     * @default 50
      */
@@ -1539,3 +1540,3 @@ height?: number;
      * Sets the width of the header
-     * @default 25
+     * @default 50
      */
@@ -1567,7 +1568,7 @@ width?: number;
      */
-    childNodes?: NodeModel[];
+    children?: NodeModel[];
 
     /**
      * Defines the height of the phase
-     * @default 25
+     * @default 100
      */
@@ -1578,3 +1579,3 @@ height?: number;
      * Defines the height of the phase
-     * @default 25
+     * @default 100
      */
@@ -1585,3 +1586,3 @@ width?: number;
      * Defines the collection of header in the phase.
-     * @default undefined
+     * @default new Header()
      */
@@ -1611,3 +1612,3 @@ header?: HeaderModel;
      * Sets the header collection of the phase
-     * @default 'undefined'
+     * @default  new Header()
      */
@@ -1617,14 +1618,2 @@ header?: HeaderModel;
     /**
-     * Sets the height of the lane
-     * @default 30
-     */
-    height?: number;
-
-    /**
-     * Sets the width of the lane
-     * @default 30
-     */
-    width?: number;
-
-    /**
      * Sets the offset of the lane
@@ -1650,3 +1639,3 @@ * @default 100
      * Defines the size of phase.
-     * @default '10'
+     * @default 20
      */
@@ -1657,3 +1646,3 @@ phaseSize?: number;
      * Defines the collection of phases.
-     * @default undefined
+     * @default 'undefined'
      */
@@ -1670,3 +1659,3 @@ phases?: PhaseModel[];
      * Defines the collection of lanes
-     * @default undefined
+     * @default 'undefined'
      */
@@ -1677,3 +1666,3 @@ lanes?: LaneModel[];
      * Defines the collection of header
-     * @default undefined
+     * @default 'undefined'
      */
@@ -1683,8 +1672,2 @@ header?: HeaderModel;
     /**
-     * Defines the style of shape
-     * @default ''
-     */
-    lineStyle?: ShapeStyleModel | TextStyleModel;
-
-    /**
      * Defines the whether the shape is a lane or not
@@ -1691,0 +1674,0 @@ * @default false

src/diagram/objects/node.d.ts

@@ -81,2 +81,7 @@ /// <reference path="node-base-model.d.ts" />
     data: string;
+    /**
+     * @private
+     * Returns the name of class Path
+     */
+    getClassName(): string;
 }
@@ -135,2 +140,7 @@ /**
     scale: Stretch;
+    /**
+     * @private
+     * Returns the name of class Native
+     */
+    getClassName(): string;
 }
@@ -167,2 +177,7 @@ /**
     content: string | HTMLElement;
+    /**
+     * @private
+     * Returns the name of class Html
+     */
+    getClassName(): string;
 }
@@ -221,2 +236,7 @@ /**
     align: ImageAlignment;
+    /**
+     * @private
+     * Returns the name of class Image
+     */
+    getClassName(): string;
 }
@@ -257,2 +277,7 @@ /**
     margin: MarginModel;
+    /**
+     * @private
+     * Returns the name of class Text
+     */
+    getClassName(): string;
 }
@@ -314,2 +339,7 @@ /**
     points: PointModel[];
+    /**
+     * @private
+     * Returns the name of class BasicShape
+     */
+    getClassName(): string;
 }
@@ -373,2 +403,7 @@ /**
     shape: FlowShapes;
+    /**
+     * @private
+     * Returns the name of class FlowShape
+     */
+    getClassName(): string;
 }
@@ -391,2 +426,7 @@ /**
     type: BpmnGateways;
+    /**
+     * @private
+     * Returns the name of class BpmnGateway
+     */
+    getClassName(): string;
 }
@@ -428,2 +468,7 @@ /**
     collection: boolean;
+    /**
+     * @private
+     * Returns the name of class BpmnDataObject
+     */
+    getClassName(): string;
 }
@@ -539,2 +584,7 @@ /**
     trigger: BpmnTriggers;
+    /**
+     * @private
+     * Returns the name of class BpmnEvent
+     */
+    getClassName(): string;
 }
@@ -637,2 +687,7 @@ /**
     visible: boolean;
+    /**
+     * @private
+     * Returns the name of class BpmnSubEvent
+     */
+    getClassName(): string;
 }
@@ -838,2 +893,7 @@ export declare class BpmnTransactionSubProcess extends ChildProperty<BpmnTransactionSubProcess> {
     subProcess: BpmnSubProcessModel;
+    /**
+     * @private
+     * Returns the name of class BpmnActivity
+     */
+    getClassName(): string;
 }
@@ -881,2 +941,7 @@ /**
     nodeId: string;
+    /**
+     * @private
+     * Returns the name of class BpmnAnnotation
+     */
+    getClassName(): string;
 }
@@ -955,2 +1020,7 @@ /**
     annotations: BpmnAnnotationModel[];
+    /**
+     * @private
+     * Returns the name of class BpmnShape
+     */
+    getClassName(): string;
 }
@@ -1000,2 +1070,7 @@ /**
     shape: UmlActivityShapes;
+    /**
+     * @private
+     * Returns the name of class UmlActivityShape
+     */
+    getClassName(): string;
 }
@@ -1024,2 +1099,7 @@ /**
     style: ShapeStyleModel | TextStyleModel;
+    /**
+     * @private
+     * Returns the name of class MethodArguments
+     */
+    getClassName(): string;
 }
@@ -1042,2 +1122,7 @@ /**
     isSeparator: boolean;
+    /**
+     * @private
+     * Returns the name of class UmlClassAttribute
+     */
+    getClassName(): string;
 }
@@ -1054,2 +1139,7 @@ /**
     parameters: MethodArgumentsModel[];
+    /**
+     * @private
+     * Returns the name of class UmlClassMethod
+     */
+    getClassName(): string;
 }
@@ -1082,2 +1172,7 @@ /**
     style: TextStyleModel;
+    /**
+     * @private
+     * Returns the name of class UmlClass
+     */
+    getClassName(): string;
 }
@@ -1094,2 +1189,7 @@ /**
     isSeparator: boolean;
+    /**
+     * @private
+     * Returns the name of class UmlInterface
+     */
+    getClassName(): string;
 }
@@ -1124,2 +1224,7 @@ /**
     style: ShapeStyleModel | TextStyleModel;
+    /**
+     * @private
+     * Returns the name of class UmlEnumerationMember
+     */
+    getClassName(): string;
 }
@@ -1147,2 +1252,7 @@ /**
     style: ShapeStyleModel | TextStyleModel;
+    /**
+     * @private
+     * Returns the name of class UmlEnumeration
+     */
+    getClassName(): string;
 }
@@ -1194,2 +1304,7 @@ /**
     classifier: ClassifierShape;
+    /**
+     * @private
+     * Returns the name of class UmlClassifierShape
+     */
+    getClassName(): string;
 }
@@ -1437,2 +1552,7 @@ /**
     private initIconSymbol;
+    /**
+     * @private
+     * Returns the name of class Node
+     */
+    getClassName(): string;
 }
@@ -1452,3 +1572,3 @@ /**
      */
-    content: Annotation;
+    annotation: Annotation;
     /**
@@ -1458,6 +1578,6 @@ * Sets the style of the header
      */
-    style: TextStyleModel;
+    style: ShapeStyleModel;
     /**
      * Sets the height of the header
-     * @default 25
+     * @default 50
      */
@@ -1467,3 +1587,3 @@ height: number;
      * Sets the width of the header
-     * @default 25
+     * @default 50
      */
@@ -1490,6 +1610,6 @@ width: number;
      */
-    childNodes: NodeModel[];
+    children: NodeModel[];
     /**
      * Defines the height of the phase
-     * @default 25
+     * @default 100
      */
@@ -1499,3 +1619,3 @@ height: number;
      * Defines the height of the phase
-     * @default 25
+     * @default 100
      */
@@ -1505,5 +1625,10 @@ width: number;
      * Defines the collection of header in the phase.
-     * @default undefined
+     * @default new Header()
      */
     header: HeaderModel;
+    /**
+     * @private
+     * Returns the name of class Lane
+     */
+    getClassName(): string;
 }
@@ -1526,16 +1651,6 @@ /**
      * Sets the header collection of the phase
-     * @default 'undefined'
+     * @default  new Header()
      */
     header: HeaderModel;
     /**
-     * Sets the height of the lane
-     * @default 30
-     */
-    height: number;
-    /**
-     * Sets the width of the lane
-     * @default 30
-     */
-    width: number;
-    /**
      * Sets the offset of the lane
@@ -1545,2 +1660,7 @@ * @default 100
     offset: number;
+    /**
+     * @private
+     * Returns the name of class Phase
+     */
+    getClassName(): string;
 }
@@ -1558,3 +1678,3 @@ /**
      * Defines the size of phase.
-     * @default '10'
+     * @default 20
      */
@@ -1564,3 +1684,3 @@ phaseSize: number;
      * Defines the collection of phases.
-     * @default undefined
+     * @default 'undefined'
      */
@@ -1575,3 +1695,3 @@ phases: PhaseModel[];
      * Defines the collection of lanes
-     * @default undefined
+     * @default 'undefined'
      */
@@ -1581,11 +1701,6 @@ lanes: LaneModel[];
      * Defines the collection of header
-     * @default undefined
+     * @default 'undefined'
      */
     header: HeaderModel;
     /**
-     * Defines the style of shape
-     * @default ''
-     */
-    lineStyle: ShapeStyleModel | TextStyleModel;
-    /**
      * Defines the whether the shape is a lane or not
@@ -1600,2 +1715,17 @@ * @default false
     isPhase: boolean;
+    /**
+     * @private
+     * Defines space between children and lane
+     */
+    padding: number;
+    /**
+     * @private
+     * Defines header by user or not
+     */
+    hasHeader: boolean;
+    /**
+     * @private
+     * Returns the name of class Phase
+     */
+    getClassName(): string;
 }
@@ -1619,2 +1749,7 @@ /**
     orientation: Orientation;
+    /**
+     * @private
+     * Returns the name of class ChildContainer
+     */
+    getClassName(): string;
 }

src/diagram/objects/node.js

@@ -22,3 +22,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';
-import { Margin, TextStyle, Shadow } from '../core/appearance';
+import { ShapeStyle, Margin, TextStyle, Shadow } from '../core/appearance';
 import { Point } from '../primitives/point';
@@ -41,2 +41,3 @@ import { Size } from '../primitives/size';
 import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes, updatePortEdges } from './../utility/diagram-util';
+import { setSwimLaneDefaults } from './../utility/diagram-util';
 import { randomId, getFunction } from './../utility/base-util';
@@ -52,3 +53,3 @@ import { NodeBase } from './node-base';
 import { getULMClassifierShapes } from '../utility/uml-util';
-import { initSwimLane } from '../interaction/container-interaction';
+import { initSwimLane } from './../utility/swim-lane-util';
 var getShapeType = function (obj) {
@@ -104,2 +105,9 @@ switch (obj.type) {
     }
+    /**
+     * @private
+     * Returns the name of class Path
+     */
+    Path.prototype.getClassName = function () {
+        return 'Path';
+    };
     __decorate([
@@ -122,2 +130,9 @@ Property('Path')
     }
+    /**
+     * @private
+     * Returns the name of class Native
+     */
+    Native.prototype.getClassName = function () {
+        return 'Native';
+    };
     __decorate([
@@ -143,2 +158,9 @@ Property('Native')
     }
+    /**
+     * @private
+     * Returns the name of class Html
+     */
+    Html.prototype.getClassName = function () {
+        return 'Html';
+    };
     __decorate([
@@ -161,2 +183,9 @@ Property('HTML')
     }
+    /**
+     * @private
+     * Returns the name of class Image
+     */
+    Image.prototype.getClassName = function () {
+        return 'Image';
+    };
     __decorate([
@@ -185,2 +214,9 @@ Property('Image')
     }
+    /**
+     * @private
+     * Returns the name of class Text
+     */
+    Text.prototype.getClassName = function () {
+        return 'Text';
+    };
     __decorate([
@@ -206,2 +242,9 @@ Property('Text')
     }
+    /**
+     * @private
+     * Returns the name of class BasicShape
+     */
+    BasicShape.prototype.getClassName = function () {
+        return 'BasicShape';
+    };
     __decorate([
@@ -230,2 +273,9 @@ Property('Basic')
     }
+    /**
+     * @private
+     * Returns the name of class FlowShape
+     */
+    FlowShape.prototype.getClassName = function () {
+        return 'FlowShape';
+    };
     __decorate([
@@ -248,2 +298,9 @@ Property('Flow')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnGateway
+     */
+    BpmnGateway.prototype.getClassName = function () {
+        return 'BpmnGateway';
+    };
     __decorate([
@@ -263,2 +320,9 @@ Property('None')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnDataObject
+     */
+    BpmnDataObject.prototype.getClassName = function () {
+        return 'BpmnDataObject';
+    };
     __decorate([
@@ -304,2 +368,9 @@ Property('None')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnEvent
+     */
+    BpmnEvent.prototype.getClassName = function () {
+        return 'BpmnEvent';
+    };
     __decorate([
@@ -322,2 +393,9 @@ Property('Start')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnSubEvent
+     */
+    BpmnSubEvent.prototype.getClassName = function () {
+        return 'BpmnSubEvent';
+    };
     __decorate([
@@ -425,2 +503,9 @@ Property('None')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnActivity
+     */
+    BpmnActivity.prototype.getClassName = function () {
+        return 'BpmnActivity';
+    };
     __decorate([
@@ -447,2 +532,9 @@ Property('Task')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnAnnotation
+     */
+    BpmnAnnotation.prototype.getClassName = function () {
+        return 'BpmnAnnotation';
+    };
     __decorate([
@@ -477,2 +569,9 @@ Property('')
     }
+    /**
+     * @private
+     * Returns the name of class BpmnShape
+     */
+    BpmnShape.prototype.getClassName = function () {
+        return 'BpmnShape';
+    };
     __decorate([
@@ -513,2 +612,9 @@ Property('Bpmn')
     }
+    /**
+     * @private
+     * Returns the name of class UmlActivityShape
+     */
+    UmlActivityShape.prototype.getClassName = function () {
+        return 'UmlActivityShape';
+    };
     __decorate([
@@ -531,2 +637,9 @@ Property('UmlActivity')
     }
+    /**
+     * @private
+     * Returns the name of class MethodArguments
+     */
+    MethodArguments.prototype.getClassName = function () {
+        return 'MethodArguments';
+    };
     __decorate([
@@ -552,2 +665,9 @@ Property('')
     }
+    /**
+     * @private
+     * Returns the name of class UmlClassAttribute
+     */
+    UmlClassAttribute.prototype.getClassName = function () {
+        return 'UmlClassAttribute';
+    };
     __decorate([
@@ -570,2 +690,9 @@ Property('Public')
     }
+    /**
+     * @private
+     * Returns the name of class UmlClassMethod
+     */
+    UmlClassMethod.prototype.getClassName = function () {
+        return 'UmlClassMethod';
+    };
     __decorate([
@@ -585,2 +712,9 @@ Collection([], MethodArguments)
     }
+    /**
+     * @private
+     * Returns the name of class UmlClass
+     */
+    UmlClass.prototype.getClassName = function () {
+        return 'UmlClass';
+    };
     __decorate([
@@ -609,2 +743,9 @@ Property('')
     }
+    /**
+     * @private
+     * Returns the name of class UmlInterface
+     */
+    UmlInterface.prototype.getClassName = function () {
+        return 'UmlInterface';
+    };
     __decorate([
@@ -624,2 +765,9 @@ Property(false)
     }
+    /**
+     * @private
+     * Returns the name of class UmlEnumerationMember
+     */
+    UmlEnumerationMember.prototype.getClassName = function () {
+        return 'UmlEnumerationMember';
+    };
     __decorate([
@@ -648,2 +796,9 @@ Property('')
     }
+    /**
+     * @private
+     * Returns the name of class UmlEnumeration
+     */
+    UmlEnumeration.prototype.getClassName = function () {
+        return 'UmlEnumeration';
+    };
     __decorate([
@@ -669,2 +824,9 @@ Property('')
     }
+    /**
+     * @private
+     * Returns the name of class UmlClassifierShape
+     */
+    UmlClassifierShape.prototype.getClassName = function () {
+        return 'UmlClassifierShape';
+    };
     __decorate([
@@ -729,2 +891,5 @@ Property('UmlClassifier')
         }
+        if (_this.shape && _this.shape.type === 'SwimLane') {
+            setSwimLaneDefaults(defaultValue, _this);
+        }
         return _this;
@@ -847,2 +1012,4 @@ }
             case 'SwimLane':
+                this.annotations = [];
+                this.ports = [];
                 content.cellStyle.fill = "none";
@@ -853,2 +1020,3 @@ content.cellStyle.strokeColor = "none";
                 this.container.orientation = this.shape.orientation;
+                this.constraints |= NodeConstraints.HideThumbs;
                 initSwimLane(content, diagram, this);
@@ -909,3 +1077,3 @@ break;
         var canvas;
-        if (!this.container) {
+        if (!this.container || this.shape instanceof SwimLane) {
             canvas = this.children ? new Container() : new Canvas();
@@ -1168,2 +1336,9 @@ }
     };
+    /**
+     * @private
+     * Returns the name of class Node
+     */
+    Node.prototype.getClassName = function () {
+        return 'Node';
+    };
     __decorate([
@@ -1274,12 +1449,12 @@ Collection([], ShapeAnnotation)
     __decorate([
-        Complex({}, Annotation)
-    ], Header.prototype, "content", void 0);
+        Complex({ style: { fill: '#111111' } }, Annotation)
+    ], Header.prototype, "annotation", void 0);
     __decorate([
-        Property('')
+        Complex({ fill: '#E7F4FF', strokeColor: '#CCCCCC' }, ShapeStyle)
     ], Header.prototype, "style", void 0);
     __decorate([
-        Property(25)
+        Property(50)
     ], Header.prototype, "height", void 0);
     __decorate([
-        Property(25)
+        Property(50)
     ], Header.prototype, "width", void 0);
@@ -1297,2 +1472,9 @@ return Header;
     }
+    /**
+     * @private
+     * Returns the name of class Lane
+     */
+    Lane.prototype.getClassName = function () {
+        return 'Lane';
+    };
     __decorate([
@@ -1302,15 +1484,15 @@ Property('')
     __decorate([
-        Property('')
+        Complex({ fill: '#F9F9F9', strokeColor: '#CCCCCC' }, ShapeStyle)
     ], Lane.prototype, "style", void 0);
     __decorate([
         Collection([], Node)
-    ], Lane.prototype, "childNodes", void 0);
+    ], Lane.prototype, "children", void 0);
     __decorate([
-        Property(25)
+        Property(100)
     ], Lane.prototype, "height", void 0);
     __decorate([
-        Property(25)
+        Property(100)
     ], Lane.prototype, "width", void 0);
     __decorate([
-        Complex({}, Header)
+        Complex({ style: { fill: '#E7F4FF', strokeColor: '#CCCCCC' }, annotation: { content: 'Function' } }, Header)
     ], Lane.prototype, "header", void 0);
@@ -1328,2 +1510,9 @@ return Lane;
     }
+    /**
+     * @private
+     * Returns the name of class Phase
+     */
+    Phase.prototype.getClassName = function () {
+        return 'Phase';
+    };
     __decorate([
@@ -1333,14 +1522,8 @@ Property('')
     __decorate([
-        Property('')
+        Complex({ strokeColor: '#CCCCCC' }, ShapeStyle)
     ], Phase.prototype, "style", void 0);
     __decorate([
-        Complex({}, Header)
+        Complex({ annotation: { content: 'Phase' } }, Header)
     ], Phase.prototype, "header", void 0);
     __decorate([
-        Property(30)
-    ], Phase.prototype, "height", void 0);
-    __decorate([
-        Property(30)
-    ], Phase.prototype, "width", void 0);
-    __decorate([
         Property(100)
@@ -1357,4 +1540,22 @@ ], Phase.prototype, "offset", void 0);
     function SwimLane() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * @private
+         * Defines space between children and lane
+         */
+        _this.padding = 20;
+        /**
+         * @private
+         * Defines header by user or not
+         */
+        _this.hasHeader = true;
+        return _this;
     }
+    /**
+     * @private
+     * Returns the name of class Phase
+     */
+    SwimLane.prototype.getClassName = function () {
+        return 'SwimLane';
+    };
     __decorate([
@@ -1364,3 +1565,3 @@ Property('SwimLane')
     __decorate([
-        Property('10')
+        Property(20)
     ], SwimLane.prototype, "phaseSize", void 0);
@@ -1377,8 +1578,5 @@ __decorate([
     __decorate([
-        Complex({}, Header)
+        Complex({ style: { fill: '#E7F4FF', strokeColor: '#CCCCCC' }, annotation: { content: 'Function' } }, Header)
     ], SwimLane.prototype, "header", void 0);
     __decorate([
-        Property('')
-    ], SwimLane.prototype, "lineStyle", void 0);
-    __decorate([
         Property(false)
@@ -1399,2 +1597,9 @@ ], SwimLane.prototype, "isLane", void 0);
     }
+    /**
+     * @private
+     * Returns the name of class ChildContainer
+     */
+    ChildContainer.prototype.getClassName = function () {
+        return 'ChildContainer';
+    };
     __decorate([
@@ -1401,0 +1606,0 @@ Property('Canvas')

src/diagram/objects/port-model.d.ts

@@ -106,3 +106,3 @@ import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { ShapeStyle, Margin } from '../core/appearance';import { ShapeStyleModel, MarginModel } from '../core/appearance-model';import { Point } from '../primitives/point';import { PointModel } from '../primitives/point-model';import { HorizontalAlignment, VerticalAlignment, PortShapes, PortConstraints, PortVisibility } from '../enum/enum';
      * Defines the constraints of port
-     * @default 'None'
+     * @default 'Default'
      * @aspNumberEnum 
@@ -109,0 +109,0 @@ */

src/diagram/objects/port.d.ts

@@ -97,3 +97,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * Defines the constraints of port
-     * @default 'None'
+     * @default 'Default'
      * @aspNumberEnum
@@ -119,2 +119,7 @@ */
     constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
+    /**
+     * @private
+     * Returns the name of class PointPort
+     */
+    getClassName(): string;
 }

src/diagram/objects/port.js

@@ -63,3 +63,3 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
-        Property(PortConstraints.None)
+        Property(PortConstraints.Default)
     ], Port.prototype, "constraints", void 0);
@@ -81,2 +81,9 @@ __decorate([
     }
+    /**
+     * @private
+     * Returns the name of class PointPort
+     */
+    PointPort.prototype.getClassName = function () {
+        return 'PointPort';
+    };
     __decorate([
@@ -83,0 +90,0 @@ Complex({ x: 0.5, y: 0.5 }, Point)

src/diagram/objects/snapping.js

@@ -1089,3 +1089,5 @@ import { Rect } from '../primitives/rect';
                     nd = quad.objects[j];
-                    if (!(this.diagram.nameTable[nd.id] instanceof Connector) && nd.visible) {
+                    if (!(this.diagram.nameTable[nd.id] instanceof Connector) && nd.visible
+                        && !(this.diagram.nameTable[nd.id].shape.type === 'SwimLane') && !(this.diagram.nameTable[nd.id].isLane) &&
+                        !(this.diagram.nameTable[nd.id].isPhase) && !(this.diagram.nameTable[nd.id].isHeader)) {
                         bounds = getBounds(nd);
@@ -1092,0 +1094,0 @@ if (nodes.indexOf(nd) === -1 && this.intersectsRect(child, bounds)) {

src/diagram/objects/undo-redo.d.ts

@@ -9,2 +9,5 @@ import { Diagram } from '../diagram';
     private childTable;
+    private historyCount;
+    private hasGroup;
+    private groupCount;
     /** @private */
@@ -15,2 +18,9 @@ initHistory(diagram: Diagram): void;
     /** @private */
+    applyLimit(list: HistoryEntry, stackLimit: number, diagram: Diagram, limitHistory?: boolean): void;
+    /** @private */
+    clearHistory(diagram: Diagram): void;
+    private setEntryLimit;
+    private limitHistoryStack;
+    private removeFromStack;
+    /** @private */
     undo(diagram: Diagram): void;
@@ -26,5 +36,8 @@ private getHistoryList;
     private getProperty;
+    private recordLaneOrPhaseCollectionChanged;
     private recordAnnotationChanged;
     private recordChildCollectionChanged;
     private recordStackPositionChanged;
+    private recordGridSizeChanged;
+    private recordLanePositionChanged;
     private recordPortChanged;
@@ -31,0 +44,0 @@ private recordPropertyChanged;

src/diagram/objects/undo-redo.js

@@ -6,3 +6,4 @@ import { Node } from './node';
 import { findAnnotation, findPort } from '../utility/diagram-util';
-import { Size } from '../index';
+import { Size, addChildToContainer } from '../index';
+import { swimLaneMeasureAndArrange, laneInterChanged, findLaneIndex, updateSwimLaneObject, pasteSwimLane } from '../utility/swim-lane-util';
 /**
@@ -19,2 +20,5 @@ * Undo redo function used for revert and restore the changes
         this.childTable = [];
+        this.historyCount = 0;
+        this.hasGroup = false;
+        this.groupCount = 0;
         //constructs the undo redo module
@@ -28,3 +32,3 @@ }
             startGroupAction: diagram.startGroupAction.bind(diagram), endGroupAction: diagram.endGroupAction.bind(diagram),
-            canLog: null, undoStack: [], redoStack: []
+            canLog: null, undoStack: [], redoStack: [], stackLimit: diagram.historyManager ? diagram.historyManager.stackLimit : undefined
         };
@@ -58,2 +62,16 @@ };
         diagram.historyManager.currentEntry = entry;
+        if (diagram.historyManager.stackLimit) {
+            if (entry.type === 'StartGroup' || entry.type === 'EndGroup') {
+                var value = entry.type === 'EndGroup' ? true : false;
+                this.setEntryLimit(value);
+            }
+            if (!this.hasGroup && this.groupCount === 0) {
+                if (this.historyCount < diagram.historyManager.stackLimit) {
+                    this.historyCount++;
+                }
+                else {
+                    this.applyLimit(diagram.historyManager.currentEntry, diagram.historyManager.stackLimit, diagram);
+                }
+            }
+        }
         this.getHistoryList(diagram);
@@ -64,2 +82,61 @@ diagram.historyManager.canUndo = true;
     /** @private */
+    UndoRedo.prototype.applyLimit = function (list, stackLimit, diagram, limitHistory) {
+        if (list && list.previous) {
+            if (list.type === 'StartGroup' || list.type === 'EndGroup') {
+                var value = list.type === 'StartGroup' ? true : false;
+                this.setEntryLimit(value);
+            }
+            if (!this.hasGroup && this.groupCount === 0) {
+                stackLimit--;
+            }
+            if (stackLimit === 0) {
+                if (limitHistory) {
+                    this.limitHistoryStack(list.previous, diagram);
+                }
+                if (diagram.historyManager.stackLimit < this.historyCount) {
+                    this.historyCount = diagram.historyManager.stackLimit;
+                }
+                delete list.previous;
+            }
+            else if (list.previous) {
+                this.applyLimit(list.previous, stackLimit, diagram, limitHistory);
+            }
+        }
+        this.groupCount = 0;
+    };
+    /** @private */
+    UndoRedo.prototype.clearHistory = function (diagram) {
+        var hList = diagram.historyManager;
+        hList.currentEntry = undefined;
+        hList.canUndo = false;
+        hList.canRedo = false;
+        this.historyCount = 0;
+        this.groupCount = 0;
+        diagram.historyManager.undoStack = [];
+        diagram.historyManager.redoStack = [];
+    };
+    UndoRedo.prototype.setEntryLimit = function (value) {
+        value ? this.groupCount-- : this.groupCount++;
+        value ? this.hasGroup = !value : this.hasGroup = value;
+    };
+    UndoRedo.prototype.limitHistoryStack = function (list, diagram) {
+        if (list.type !== 'StartGroup' && list.type !== 'EndGroup') {
+            this.removeFromStack(diagram.historyManager.undoStack, list);
+            this.removeFromStack(diagram.historyManager.redoStack, list);
+        }
+        if (list.previous) {
+            this.limitHistoryStack(list.previous, diagram);
+        }
+    };
+    UndoRedo.prototype.removeFromStack = function (entyList, list) {
+        if (entyList.length) {
+            for (var i = 0; i <= entyList.length; i++) {
+                if (entyList[i].undoObject === list.undoObject && entyList[i].redoObject === list.redoObject) {
+                    entyList.splice(i, 1);
+                    break;
+                }
+            }
+        }
+    };
+    /** @private */
     UndoRedo.prototype.undo = function (diagram) {
@@ -208,2 +285,17 @@ var entry = this.getUndoEntry(diagram);
                 break;
+            case 'RowHeightChanged':
+                this.recordGridSizeChanged(entry, diagram, false, true);
+                break;
+            case 'ColumnWidthChanged':
+                this.recordGridSizeChanged(entry, diagram, false, false);
+                break;
+            case 'LanePositionChanged':
+                this.recordLanePositionChanged(entry, diagram, false);
+                break;
+            case 'LaneCollectionChanged':
+            case 'PhaseCollectionChanged':
+                entry.isUndo = true;
+                this.recordLaneOrPhaseCollectionChanged(entry, diagram, false);
+                entry.isUndo = false;
+                break;
         }
@@ -280,2 +372,33 @@ diagram.diagramActions &= ~DiagramAction.UndoRedo;
     };
+    UndoRedo.prototype.recordLaneOrPhaseCollectionChanged = function (entry, diagram, isRedo) {
+        var node = entry.redoObject;
+        var obj = entry.undoObject;
+        var changeType;
+        if (entry.isUndo) {
+            if (entry.changeType === 'Insert') {
+                changeType = 'Remove';
+            }
+            else {
+                changeType = 'Insert';
+            }
+        }
+        else {
+            changeType = entry.changeType;
+        }
+        if (changeType === 'Remove') {
+            diagram.remove(node);
+        }
+        else {
+            if (node.isPhase) {
+                var swimlane = diagram.nameTable[node.parentId];
+                diagram.addPhases(swimlane, [obj]);
+            }
+            else {
+                var swimlane = diagram.nameTable[node.parentId];
+                var laneIndex = findLaneIndex(swimlane, node);
+                diagram.addLanes(swimlane, [obj], laneIndex);
+            }
+        }
+        diagram.clearSelection();
+    };
     UndoRedo.prototype.recordAnnotationChanged = function (entry, diagram, isRedo) {
@@ -302,16 +425,22 @@ var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
         var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
-        var parentNode;
+        var parentNode = diagram.nameTable[entryObject.parentId];
         var actualObject = diagram.nameTable[entryObject.id];
-        if (actualObject.parentId) {
-            parentNode = diagram.nameTable[actualObject.parentId];
-            parentNode.children.splice(parentNode.children.indexOf(actualObject.id), 1);
-            parentNode.wrapper.children.splice(parentNode.wrapper.children.indexOf(actualObject.wrapper), 1);
+        if (parentNode) {
+            addChildToContainer(diagram, parentNode, actualObject, !isRedo);
         }
-        if (entryObject.parentId !== '') {
-            parentNode = diagram.nameTable[entryObject.parentId];
-            parentNode.children.push(entryObject.id);
-            parentNode.wrapper.children.push(actualObject.wrapper);
+        else {
+            if (actualObject.parentId) {
+                parentNode = diagram.nameTable[actualObject.parentId];
+                parentNode.children.splice(parentNode.children.indexOf(actualObject.id), 1);
+                parentNode.wrapper.children.splice(parentNode.wrapper.children.indexOf(actualObject.wrapper), 1);
+            }
+            if (entryObject.parentId !== '') {
+                parentNode = diagram.nameTable[entryObject.parentId];
+                parentNode.children.push(entryObject.id);
+                parentNode.wrapper.children.push(actualObject.wrapper);
+            }
+            actualObject.parentId = entryObject.parentId;
+            diagram.removeElements(actualObject);
+            diagram.updateDiagramObject(actualObject);
         }
-        actualObject.parentId = entryObject.parentId;
-        diagram.updateDiagramObject(actualObject);
     };
@@ -350,2 +479,44 @@ UndoRedo.prototype.recordStackPositionChanged = function (entry, diagram, isRedo) {
     };
+    UndoRedo.prototype.recordGridSizeChanged = function (entry, diagram, isRedo, isRow) {
+        var obj = (isRedo) ? entry.redoObject : entry.undoObject;
+        var node = (!isRedo) ? entry.redoObject : entry.undoObject;
+        if (obj.parentId) {
+            var swimlane = diagram.nameTable[obj.parentId];
+            var actualObject = diagram.nameTable[obj.id];
+            var x = swimlane.wrapper.bounds.x;
+            var y = swimlane.wrapper.bounds.y;
+            if (swimlane.shape.type === 'SwimLane') {
+                var grid = swimlane.wrapper.children[0];
+                var padding = swimlane.shape.padding;
+                updateSwimLaneObject(diagram, node, swimlane, obj);
+                if (isRow) {
+                    grid.updateRowHeight(obj.rowIndex, obj.wrapper.actualSize.height, true, padding);
+                    swimlane.height = swimlane.wrapper.height = grid.height;
+                }
+                else {
+                    grid.updateColumnWidth(obj.columnIndex, obj.wrapper.actualSize.width, true, padding);
+                    swimlane.width = swimlane.wrapper.width = grid.width;
+                    if (obj.isPhase) {
+                        actualObject.maxWidth = actualObject.wrapper.maxWidth = obj.wrapper.actualSize.width;
+                    }
+                }
+                swimLaneMeasureAndArrange(swimlane);
+                var tx = x - swimlane.wrapper.bounds.x;
+                var ty = y - swimlane.wrapper.bounds.y;
+                diagram.drag(swimlane, tx, ty);
+                diagram.clearSelection();
+                diagram.updateDiagramObject(swimlane);
+            }
+        }
+    };
+    UndoRedo.prototype.recordLanePositionChanged = function (entry, diagram, isRedo) {
+        var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
+        if (entryObject.source) {
+            var parent_2 = diagram.nameTable[entryObject.source.parentId];
+            if (parent_2 && parent_2.shape.type === 'SwimLane') {
+                laneInterChanged(diagram, entryObject.target, entryObject.source);
+                diagram.clearSelection();
+            }
+        }
+    };
     UndoRedo.prototype.recordPortChanged = function (entry, diagram, isRedo) {
@@ -404,3 +575,3 @@ var entryObject = ((isRedo) ? entry.redoObject.nodes[0] :
     };
-    UndoRedo.prototype.positionChanged = function (obj, diagram, entry) {
+    UndoRedo.prototype.positionChanged = function (obj, diagram) {
         var node = diagram.nameTable[obj.id];
@@ -419,4 +590,11 @@ if (obj.processId && !node.processId) {
         else {
-            var tx = obj.offsetX - node.wrapper.offsetX;
-            var ty = obj.offsetY - node.wrapper.offsetY;
+            if (node.parentId) {
+                var parent_3 = diagram.nameTable[node.parentId];
+                if (parent_3.isLane) {
+                    obj.wrapper.offsetX = (obj.width / 2) + (parent_3.wrapper.bounds.x + obj.margin.left);
+                    obj.wrapper.offsetY = (obj.height / 2) + (parent_3.wrapper.bounds.y + obj.margin.top);
+                }
+            }
+            var tx = obj.wrapper.offsetX - node.offsetX;
+            var ty = obj.wrapper.offsetY - node.offsetY;
             diagram.drag(node, tx, ty);
@@ -442,3 +620,3 @@ }
                             this.sizeChanged(tempNode, diagram, entry);
-                            this.positionChanged(tempNode, diagram, entry);
+                            this.positionChanged(tempNode, diagram);
                         }
@@ -600,2 +778,5 @@ else {
                     if (!diagram.nameTable[obj.id]) {
+                        if (obj && obj.shape && obj.shape.type === 'SwimLane' && entry.isUndo) {
+                            pasteSwimLane(obj, undefined, undefined, undefined, undefined, true);
+                        }
                         diagram.add(obj);
@@ -764,2 +945,15 @@ }
                 break;
+            case 'RowHeightChanged':
+                this.recordGridSizeChanged(historyEntry, diagram, true, true);
+                break;
+            case 'ColumnWidthChanged':
+                this.recordGridSizeChanged(historyEntry, diagram, true, false);
+                break;
+            case 'LanePositionChanged':
+                this.recordLanePositionChanged(historyEntry, diagram, true);
+                break;
+            case 'LaneCollectionChanged':
+            case 'PhaseCollectionChanged':
+                this.recordLaneOrPhaseCollectionChanged(historyEntry, diagram, true);
+                break;
         }
@@ -766,0 +960,0 @@ diagram.protectPropertyChange(false);

src/diagram/primitives/point.d.ts

@@ -37,2 +37,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     static direction(pt1: PointModel, pt2: PointModel): string;
+    /**
+     * @private
+     * Returns the name of class Point
+     */
+    getClassName(): string;
 }

src/diagram/primitives/point.js

@@ -153,2 +153,26 @@ var __extends = (this && this.__extends) || (function () {
     };
+    //Move these methods to util
+    //public CompareTo(point: PointModel): number {
+    //    let result: number = this.X.CompareTo(point.X);
+    //    return result != 0 ? result : this.Y.CompareTo(point.Y);
+    //}
+    //public CompareOnYAxis(point: PointModel): number {
+    //    let result: number = this.X.CompareTo(point.X);
+    //    return result != 0 ? result : this.Y.CompareTo(point.Y);
+    //}
+    //public CompareOnXAxis(point: PointModel): number {
+    //    let result: number = this.Y.CompareTo(point.Y);
+    //    return result != 0 ? result : this.X.CompareTo(point.X);
+    //}
+    // public round(): void {
+    //     this.x = Math.round(this.x);
+    //     this.y = Math.round(this.y);
+    // }
+    /**
+     * @private
+     * Returns the name of class Point
+     */
+    Point.prototype.getClassName = function () {
+        return 'Point';
+    };
     __decorate([
@@ -155,0 +179,0 @@ Property(0)

src/diagram/print-settings.d.ts

@@ -26,2 +26,4 @@ import { Rect } from './primitives/rect';
     private diagramAsCanvas;
+    private updateWrapper;
+    private updateObjectValue;
     private isImageExportable;
@@ -28,0 +30,0 @@ private getPrintCanvasStyle;

src/diagram/print-settings.js

@@ -104,6 +104,8 @@ import { Browser } from '@syncfusion/ej2-base';
         var scaleY = 'scaleY';
+        var scaleOffsetX = 'scaleOffsetX';
+        var scaleOffsetY = 'scaleOffsetY';
         this.setScaleValueforCanvas(options, bounds);
         var canvas = this.diagramAsCanvas({
             bounds: bounds, margin: margin, region: region, scaleX: options[scaleX],
-            scaleY: options[scaleY]
+            scaleY: options[scaleY], scaleOffsetX: options[scaleOffsetX], scaleOffsetY: options[scaleOffsetY]
         }, customBounds);
@@ -276,6 +278,31 @@ var image = content = canvas.toDataURL();
         var scaleY = 'scaleY';
+        var scaleOffsetX = 'scaleOffsetX';
+        var scaleOffsetY = 'scaleOffsetY';
         options[scaleX] = 1;
         options[scaleY] = 1;
+        options[scaleOffsetX] = 0;
+        options[scaleOffsetY] = 0;
         options.pageHeight = options.pageHeight || this.diagram.pageSettings.height;
         options.pageWidth = options.pageWidth || this.diagram.pageSettings.width;
+        var pageOrientation = options.pageOrientation || this.diagram.pageSettings.orientation;
+        if (!pageOrientation) {
+            pageOrientation = 'Portrait';
+        }
+        if (pageOrientation === 'Portrait') {
+            if (options.pageWidth > options.pageHeight) {
+                var temp = options.pageHeight;
+                options.pageHeight = options.pageWidth;
+                options.pageWidth = temp;
+            }
+        }
+        else {
+            if (options.pageHeight > options.pageWidth) {
+                var temp = options.pageWidth;
+                options.pageWidth = options.pageHeight;
+                options.pageHeight = temp;
+            }
+        }
+        if (options.pageWidth && options.pageHeight && !options.multiplePage) {
+            options.stretch = 'Meet';
+        }
         var height = options.pageHeight || bounds.height;
@@ -288,2 +315,4 @@ var width = options.pageWidth || bounds.width;
                 options[scaleX] = options[scaleY] = Math.min(options[scaleX], options[scaleY]);
+                options[scaleOffsetY] = (options.pageHeight - bounds.height * options[scaleX]) / 2;
+                options[scaleOffsetX] = (options.pageWidth - bounds.width * options[scaleX]) / 2;
             }
@@ -363,2 +392,4 @@ else if (options.stretch === 'Slice') {
         var scaleY = 'scaleY';
+        var scaleOffsetX = 'scaleOffsetX';
+        var scaleOffsetY = 'scaleOffsetY';
         var element;
@@ -433,5 +464,45 @@ var elements = [];
         var renderer = new DiagramRenderer('', null, false);
+        this.updateObjectValue(options[scaleX], options[scaleOffsetX], options[scaleOffsetY], true);
         this.diagram.renderDiagramElements(canvas, renderer, htmlLayer, false, true);
+        this.updateObjectValue(options[scaleX], options[scaleOffsetX], options[scaleOffsetY], false);
         return canvas;
     };
+    PrintAndExport.prototype.updateWrapper = function (canvas, value, scaleOffsetX, scaleOffsetY, isExport) {
+        if (canvas && canvas.length > 0) {
+            for (var j = 0; j < canvas.length; j++) {
+                if (canvas[j].children) {
+                    this.updateWrapper(canvas[j].children, value, scaleOffsetX, scaleOffsetY, isExport);
+                }
+                canvas[j].exportScaleValue.x = value;
+                canvas[j].exportScaleValue.y = value;
+                canvas[j].exportScaleOffset.x = scaleOffsetX;
+                canvas[j].exportScaleOffset.y = scaleOffsetY;
+                canvas[j].isExport = isExport;
+            }
+        }
+    };
+    PrintAndExport.prototype.updateObjectValue = function (value, scaleOffsetX, scaleOffsetY, isExport) {
+        var wrapper;
+        for (var i = 0; i < this.diagram.nodes.length; i++) {
+            wrapper = this.diagram.nodes[i].wrapper;
+            this.updateWrapper(wrapper.children, value, scaleOffsetX, scaleOffsetY, isExport);
+            wrapper.exportScaleValue.x = value;
+            wrapper.exportScaleValue.y = value;
+            wrapper.exportScaleOffset.x = scaleOffsetX;
+            wrapper.exportScaleOffset.y = scaleOffsetY;
+            wrapper.isExport = isExport;
+        }
+        for (var j = 0; j < this.diagram.connectors.length; j++) {
+            wrapper = this.diagram.connectors[j].wrapper;
+            for (var k = 0; k < wrapper.children.length; k++) {
+                wrapper.children[k].isExport = isExport;
+                if (isExport) {
+                    wrapper.children[k].exportScaleValue.x = value;
+                    wrapper.children[k].exportScaleValue.y = value;
+                    wrapper.children[k].exportScaleOffset.x = scaleOffsetX;
+                    wrapper.children[k].exportScaleOffset.y = scaleOffsetY;
+                }
+            }
+        }
+    };
     PrintAndExport.prototype.isImageExportable = function (backgroundImage) {
@@ -438,0 +509,0 @@ var state = true;

src/diagram/rendering/canvas-renderer.d.ts

@@ -31,3 +31,3 @@ import { PointModel } from './../primitives/point-model';
     /**   @private  */
-    drawText(canvas: HTMLCanvasElement, options: TextAttributes): void;
+    drawText(canvas: HTMLCanvasElement, options: TextAttributes, parentSvg?: SVGSVGElement, ariaLabel?: Object, diagramId?: string, scaleValue?: number): void;
     private loadImage;
@@ -34,0 +34,0 @@ /**   @private  */

src/diagram/rendering/canvas-renderer.js

@@ -390,3 +390,3 @@ import { Size } from './../primitives/size';
     /**   @private  */
-    CanvasRenderer.prototype.drawText = function (canvas, options) {
+    CanvasRenderer.prototype.drawText = function (canvas, options, parentSvg, ariaLabel, diagramId, scaleValue) {
         if (options.content && options.visible === true) {
@@ -396,2 +396,5 @@ var ctx = CanvasRenderer.getContext(canvas);
             this.setStyle(canvas, options);
+            if (scaleValue) {
+                options.fontSize *= scaleValue;
+            }
             var pivotX = options.x + options.width * options.pivotX;
@@ -410,4 +413,4 @@ var pivotY = options.y + options.height * options.pivotY;
                     var child = childNodes[i];
-                    var offsetX = position.x + child.x - wrapBounds.x;
-                    var offsetY = position.y + child.dy * i + ((options.fontSize) * 0.8);
+                    var offsetX = position.x + (scaleValue ? child.x * scaleValue : child.x) - wrapBounds.x;
+                    var offsetY = position.y + (scaleValue ? child.dy * scaleValue : child.dy) * i + ((options.fontSize) * 0.8);
                     if (wrapBounds.width > options.width && options.textOverflow !== 'Wrap') {
@@ -414,0 +417,0 @@ child.text = overFlow(child.text, options);

src/diagram/rendering/IRenderer.d.ts

@@ -14,4 +14,4 @@ import { PathAttributes, TextAttributes } from './canvas-interface';
     renderPath(canvas: HTMLCanvasElement | SVGElement, options: PathAttributes, collection: Object[]): void;
-    drawText(canvas: HTMLCanvasElement | SVGElement, options: TextAttributes, parentSvg?: SVGSVGElement, ariaLabel?: Object, diagramId?: string): void;
+    drawText(canvas: HTMLCanvasElement | SVGElement, options: TextAttributes, parentSvg?: SVGSVGElement, ariaLabel?: Object, diagramId?: string, scaleValue?: number): void;
     drawImage(canvas: HTMLCanvasElement | SVGElement | ImageElement, obj: ImageAttributes, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
 }

src/diagram/rendering/renderer.d.ts

@@ -60,3 +60,3 @@ import { DiagramElement } from '../core/elements/diagram-element';
      */
-    renderStackHighlighter(element: DiagramElement, canvas: SVGElement, transform: Transforms, isVertical: Boolean, position: PointModel, isUml?: boolean): void;
+    renderStackHighlighter(element: DiagramElement, canvas: SVGElement, transform: Transforms, isVertical: Boolean, position: PointModel, isUml?: boolean, isSwimlane?: boolean): void;
     /**   @private  */
@@ -67,3 +67,3 @@ drawLine(canvas: SVGElement, options: LineAttributes): void;
     /**   @private  */
-    renderResizeHandle(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, constraints: ThumbsConstraints, currentZoom: number, selectorConstraints?: SelectorConstraints, transform?: Transforms, canMask?: boolean, enableNode?: number, nodeConstraints?: boolean): void;
+    renderResizeHandle(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, constraints: ThumbsConstraints, currentZoom: number, selectorConstraints?: SelectorConstraints, transform?: Transforms, canMask?: boolean, enableNode?: number, nodeConstraints?: boolean, isSwimlane?: boolean): void;
     /**   @private  */
@@ -82,3 +82,3 @@ renderEndPointHandle(selector: ConnectorModel, canvas: HTMLCanvasElement | SVGElement, constraints: ThumbsConstraints, selectorConstraints: SelectorConstraints, transform: Transforms, connectedSource: boolean, connectedTarget?: boolean, isSegmentEditing?: boolean): void;
     /**   @private  */
-    renderBorder(selector: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, enableNode?: number, isBorderTickness?: boolean): void;
+    renderBorder(selector: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, enableNode?: number, isBorderTickness?: boolean, isSwimlane?: boolean): void;
     /**   @private  */
@@ -120,3 +120,3 @@ renderUserHandler(selectorItem: SelectorModel, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms): void;
     /** @private */
-    updateNode(element: DiagramElement, diagramElementsLayer: HTMLCanvasElement, htmlLayer: HTMLElement, transform?: Transforms): void;
+    updateNode(element: DiagramElement, diagramElementsLayer: HTMLCanvasElement, htmlLayer: HTMLElement, transform?: Transforms, insertIndex?: number): void;
 }

src/diagram/rendering/renderer.js

@@ -9,3 +9,3 @@ import { PathElement } from '../core/elements/path-element';
 import { getUserHandlePosition, canShowCorner } from '../utility/diagram-util';
-import { getDiagramElement, getAdornerLayer, getGridLayer, getHTMLLayer } from '../utility/dom-util';
+import { getDiagramElement, getAdornerLayer, getGridLayer, getHTMLLayer, updatePath } from '../utility/dom-util';
 import { measurePath, getBackgroundLayerSvg, getBackgroundImageLayer, setAttributeSvg } from '../utility/dom-util';
@@ -141,3 +141,3 @@ import { SnapConstraints, RendererAction } from '../enum/enum';
         else if (element instanceof DiagramHtmlElement) {
-            this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg, fromPalette);
+            this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg, fromPalette, indexValue);
         }
@@ -184,3 +184,3 @@ else {
      */
-    DiagramRenderer.prototype.renderStackHighlighter = function (element, canvas, transform, isVertical, position, isUml) {
+    DiagramRenderer.prototype.renderStackHighlighter = function (element, canvas, transform, isVertical, position, isUml, isSwimlane) {
         var width = element.actualSize.width || 2;
@@ -224,2 +224,7 @@ var x = element.offsetX - width * element.pivot.x;
             else {
+                if (isSwimlane) {
+                    if (position.y >= element.offsetY) {
+                        y += height;
+                    }
+                }
                 var d = width * transform.scale;
@@ -249,3 +254,3 @@ data = 'M -10 -10 L 0 0 Z M -10 10 L 0 0 Z M 0 0 L ' + (d) + ' 0 Z M ' + (d) + ' 0 L ' +
     /**   @private  */
-    DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode, nodeConstraints) {
+    DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode, nodeConstraints, isSwimlane) {
         var left = element.offsetX - element.actualSize.width * element.pivot.x;
@@ -255,7 +260,8 @@ var top = element.offsetY - element.actualSize.height * element.pivot.y;
         var width = element.actualSize.width;
-        if (constraints & ThumbsConstraints.Rotate && canDrawThumbs(this.rendererActions) && (!avoidDrawSelector(this.rendererActions))) {
+        if (!isSwimlane &&
+            (constraints & ThumbsConstraints.Rotate && canDrawThumbs(this.rendererActions) && (!avoidDrawSelector(this.rendererActions)))) {
             this.renderPivotLine(element, canvas, transform, selectorConstraints, canMask);
             this.renderRotateThumb(element, canvas, transform, selectorConstraints, canMask);
         }
-        this.renderBorder(element, canvas, transform, enableNode, nodeConstraints);
+        this.renderBorder(element, canvas, transform, enableNode, nodeConstraints, isSwimlane);
         var nodeWidth = element.actualSize.width * currentZoom;
@@ -456,3 +462,3 @@ var nodeHeight = element.actualSize.height * currentZoom;
     /**   @private  */
-    DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode, isBorderTickness) {
+    DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode, isBorderTickness, isSwimlane) {
         var wrapper = selector;
@@ -469,2 +475,5 @@ var options = this.getBaseAttributes(wrapper, transform);
         options.class = 'e-diagram-border';
+        if (isSwimlane) {
+            options.class += ' e-diagram-lane';
+        }
         options.id = 'borderRect';
@@ -582,4 +591,2 @@ options.id = (this.rendererActions & RendererAction.DrawSelectorBorder) ? 'borderRect_symbol' : 'borderRect';
         var options = this.getBaseAttributes(element, transform);
-        var pathAngle = (options.flip === 'Horizontal' || options.flip === 'Vertical') ? -options.angle : options.angle;
-        options.angle = pathAngle;
         options.data = element.absolutePath;
@@ -592,2 +599,6 @@ options.data = element.absolutePath;
         }
+        if (element.isExport) {
+            var pathBounds = element.absoluteBounds;
+            options.data = updatePath(element, pathBounds, undefined, options);
+        }
         this.renderer.drawPath(canvas, options, this.diagramId, undefined, parentSvg, ariaLabel);
@@ -815,3 +826,3 @@ };
         this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);
-        this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId);
+        this.renderer.drawText(canvas, options, parentSvg, ariaLabel, this.diagramId, (element.isExport && Math.min(element.exportScaleValue.x || element.exportScaleValue.y)));
         if (this.isSvgMode) {
@@ -827,4 +838,2 @@ element.doWrap = false;
         var options = this.getBaseAttributes(element, transform);
-        var nativEAngle = (options.flip === 'Horizontal' || options.flip === 'Vertical') ? -options.angle : options.angle;
-        options.angle = nativEAngle;
         options.fill = 'transparent';
@@ -864,7 +873,4 @@ options.cornerRadius = element.cornerRadius;
     };
-    DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg, fromPalette) {
+    DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg, fromPalette, indexValue) {
         var options = this.getBaseAttributes(element, transform);
-        if (options.flip === 'Horizontal' || options.flip === 'Vertical') {
-            options.angle = -options.angle;
-        }
         options.fill = 'transparent';
@@ -875,3 +881,3 @@ options.cornerRadius = element.cornerRadius;
         if (this.svgRenderer) {
-            this.svgRenderer.drawHTMLContent(element, htmlLayer.children[0], transform, isDiagramChild(htmlLayer));
+            this.svgRenderer.drawHTMLContent(element, htmlLayer.children[0], transform, isDiagramChild(htmlLayer), indexValue);
         }
@@ -882,4 +888,2 @@ };
         var options = this.getBaseAttributes(element, transform);
-        var imageAngle = (options.flip === 'Horizontal' || options.flip === 'Vertical') ? -options.angle : options.angle;
-        options.angle = imageAngle;
         options.cornerRadius = 0;
@@ -947,3 +951,3 @@ this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);
                 parentSvg = this.getParentSvg(this.hasNativeParent(group.children)) || parentSvg;
-                var svgNativeParent = this.getParentElement(this.hasNativeParent(group.children), groupElement, parentSvg);
+                var svgNativeParent = this.getParentElement(this.hasNativeParent(group.children), groupElement, parentSvg, indexValue);
                 svgParent.svg = svgNativeParent.svg || parentSvg;
@@ -982,4 +986,4 @@ svgParent.g = svgNativeParent.g || groupElement;
                 }
-                this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette);
-                if (child instanceof TextElement && parentG) {
+                this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette, indexValue);
+                if (child instanceof TextElement && parentG && !(group.elementActions & ElementAction.ElementIsGroup)) {
                     flip = (child.flip && child.flip !== 'None') ? child.flip : group.flip;
@@ -992,4 +996,10 @@ this.renderFlipElement(child, parentG, flip);
                 }
+                if (!(child instanceof TextElement) && group.flip !== 'None' &&
+                    (group.elementActions & ElementAction.ElementIsGroup)) {
+                    this.renderFlipElement(child, parentG || canvas, group.flip);
+                }
             }
-            this.renderFlipElement(group, canvas, group.flip);
+            if (!(group.elementActions & ElementAction.ElementIsGroup)) {
+                this.renderFlipElement(group, canvas, group.flip);
+            }
         }
@@ -1067,2 +1077,9 @@ };
         };
+        if (element.isExport) {
+            options.width *= element.exportScaleValue.x;
+            options.height *= element.exportScaleValue.y;
+            options.x *= element.exportScaleValue.x;
+            options.y *= element.exportScaleValue.y;
+            options.strokeWidth *= element.exportScaleValue.x;
+        }
         if (element.flip) {
@@ -1148,4 +1165,4 @@ options.flip = element.flip;
     /** @private */
-    DiagramRenderer.prototype.updateNode = function (element, diagramElementsLayer, htmlLayer, transform) {
-        this.renderElement(element, diagramElementsLayer, htmlLayer, transform, this.getParentSvg(element));
+    DiagramRenderer.prototype.updateNode = function (element, diagramElementsLayer, htmlLayer, transform, insertIndex) {
+        this.renderElement(element, diagramElementsLayer, htmlLayer, transform, this.getParentSvg(element), undefined, undefined, insertIndex);
     };
@@ -1152,0 +1169,0 @@ return DiagramRenderer;

src/diagram/rendering/svg-renderer.d.ts

@@ -39,3 +39,3 @@ import { PointModel } from './../primitives/point-model';
     /** @private */
-    drawHTMLContent(element: DiagramHtmlElement, canvas: HTMLElement, transform?: Transforms, value?: boolean): void;
+    drawHTMLContent(element: DiagramHtmlElement, canvas: HTMLElement, transform?: Transforms, value?: boolean, indexValue?: number): void;
     /** @private */
@@ -42,0 +42,0 @@ drawNativeContent(element: DiagramNativeElement, canvas: HTMLCanvasElement | SVGElement, height: number, width: number, parentSvg: SVGSVGElement): void;

src/diagram/rendering/svg-renderer.js

@@ -376,3 +376,3 @@ import { Point } from './../primitives/point';
     /** @private */
-    SvgRenderer.prototype.drawHTMLContent = function (element, canvas, transform, value) {
+    SvgRenderer.prototype.drawHTMLContent = function (element, canvas, transform, value, indexValue) {
         var htmlElement;
@@ -394,3 +394,8 @@ if (canvas) {
             htmlElement.appendChild(element.template.cloneNode(true));
-            canvas.appendChild(htmlElement);
+            if (indexValue !== undefined && canvas.childNodes.length > indexValue) {
+                canvas.insertBefore(htmlElement, canvas.childNodes[indexValue]);
+            }
+            else {
+                canvas.appendChild(htmlElement);
+            }
         }
@@ -435,4 +440,3 @@ var point = cornersPointsBeforeRotation(element).topLeft;
         var y = element.templatePosition.y * height / contentHeight;
-        angle = (element.flip === 'Horizontal' || element.flip === 'Vertical') ? -element.parentTransform : element.parentTransform;
-        nativeElement.setAttribute('transform', 'rotate(' + angle + ',' + element.offsetX + ',' + element.offsetY +
+        nativeElement.setAttribute('transform', 'rotate(' + element.parentTransform + ',' + element.offsetX + ',' + element.offsetY +
             ') translate(' + (element.offsetX - x - width * element.pivot.x) + ',' + (element.offsetY - y - height * element.pivot.y) +
@@ -439,0 +443,0 @@ ') scale(' + (width / contentWidth) + ',' + (height / contentHeight) + ')');

src/diagram/utility/base-util.js

@@ -101,2 +101,3 @@ import { Rect } from '../primitives/rect';
         var customProperties = [];
+        properties.push('version');
         if (key) {
@@ -154,3 +155,4 @@ var propAdditional = getFunction(additionalProp);
         case 'nodes':
-            return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId', 'umlIndex'];
+        case 'children':
+            return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId', 'umlIndex', 'isPhase', 'isLane'];
         case 'connectors':
@@ -162,2 +164,4 @@ return ['parentId'];
             return ['nodeId'];
+        case 'shape':
+            return ['hasHeader'];
     }
@@ -164,0 +168,0 @@ return [];

src/diagram/utility/constraints-util.js

@@ -117,4 +117,4 @@ import { Node } from './../objects/node';
 export function canPortInConnect(port) {
-    if (port) {
-        if ((port.constraints & PortConstraints.InConnect)) {
+    if (port && port.constraints) {
+        if (!(port.constraints & PortConstraints.None) && (port.constraints & PortConstraints.InConnect)) {
             return port.constraints & PortConstraints.InConnect;
@@ -134,4 +134,4 @@ }
 export function canPortOutConnect(port) {
-    if (port) {
-        if ((port.constraints & PortConstraints.OutConnect)) {
+    if (port && port.constraints) {
+        if (!(port.constraints & PortConstraints.None) && (port.constraints & PortConstraints.OutConnect)) {
             return port.constraints & PortConstraints.OutConnect;
@@ -138,0 +138,0 @@ }

src/diagram/utility/diagram-util.d.ts

@@ -37,2 +37,6 @@ import { PointModel } from './../primitives/point-model';
  */
+export declare function setSwimLaneDefaults(child: NodeModel | ConnectorModel, node: NodeModel | ConnectorModel): void;
+/**
+ * @private
+ */
 export declare function setUMLActivityDefaults(child: NodeModel | ConnectorModel, node: NodeModel | ConnectorModel): void;
@@ -82,2 +86,4 @@ /** @private */
 /** @private */
+export declare function upgrade(dataObj: Diagram): Diagram;
+/** @private */
 export declare function updateStyle(changedObject: TextStyleModel, target: DiagramElement): void;
@@ -84,0 +90,0 @@ /** @private */

src/diagram/utility/dom-util.d.ts

@@ -10,2 +10,3 @@ import { PointModel } from '../primitives/point-model';
 import { DiagramNativeElement } from '../core/elements/native-element';
+import { BaseAttributes } from '../rendering/canvas-interface';
 /**
@@ -32,3 +33,3 @@ * Defines the functionalities that need to access DOM
 /** @private */
-export declare function updatePath(element: PathElement, bounds: Rect, child: PathElement): string;
+export declare function updatePath(element: PathElement, bounds: Rect, child: PathElement, options?: BaseAttributes): string;
 /** @private */
@@ -38,2 +39,4 @@ export declare function getDiagramLayerSvg(diagramId: string): SVGSVGElement;
 export declare function getDiagramElement(elementId: string, contentId?: string): HTMLElement;
+/** @private */
+export declare function getDomIndex(viewId: string, elementId: string, layer: string): number;
 /**
@@ -50,2 +53,4 @@ * @private
 /** @private */
+export declare function getDiagramLayer(diagramId: string): SVGElement;
+/** @private */
 export declare function getPortLayerSvg(diagramId: string): SVGSVGElement;
@@ -52,0 +57,0 @@ /** @private */

src/diagram/utility/dom-util.js

@@ -325,3 +325,3 @@ import { Rect } from '../primitives/rect';
 /** @private */
-export function updatePath(element, bounds, child) {
+export function updatePath(element, bounds, child, options) {
     var initX = 0;
@@ -342,5 +342,5 @@ var initY = 0;
     }
-    if (element.actualSize.width !== bBox.width || element.actualSize.height !== bBox.height) {
-        scaleX = element.actualSize.width / Number(bBox.width ? bBox.width : 1);
-        scaleY = element.actualSize.height / Number(bBox.height ? bBox.height : 1);
+    if (element.actualSize.width !== bBox.width || element.actualSize.height !== bBox.height || options) {
+        scaleX = (options && options.width || element.actualSize.width) / Number(bBox.width ? bBox.width : 1);
+        scaleY = (options && options.height || element.actualSize.height) / Number(bBox.height ? bBox.height : 1);
         isScale = true;
@@ -373,2 +373,29 @@ }
 }
+/** @private */
+export function getDomIndex(viewId, elementId, layer) {
+    var index = undefined;
+    var parentElement;
+    var postId = '';
+    if (layer === 'native') {
+        parentElement = getNativeLayer(viewId);
+        postId = '_content_groupElement';
+    }
+    else if (layer === 'html') {
+        parentElement = getHTMLLayer(viewId).childNodes[0];
+        postId = '_content_html_element';
+    }
+    else {
+        parentElement = getDiagramLayer(viewId);
+        postId = '_groupElement';
+    }
+    var childElement;
+    for (var i = 0; parentElement.childNodes && i < parentElement.childNodes.length; i++) {
+        childElement = parentElement.childNodes[i];
+        if (childElement && childElement.id === elementId + postId) {
+            index = i;
+            break;
+        }
+    }
+    return index;
+}
 /**
@@ -401,10 +428,10 @@ * @private
 }
-// /** @private */
-// export function getDiagramLayer(diagramId: string): SVGElement {
-//     let diagramLayer: SVGElement;
-//     let diagramLayerSvg: SVGSVGElement = getDiagramLayerSvg(diagramId);
-//     diagramLayer = diagramLayerSvg.getElementById(diagramId + '_diagramLayer') as SVGElement;
-//     return diagramLayer;
-// }
 /** @private */
+export function getDiagramLayer(diagramId) {
+    var diagramLayer;
+    var diagramLayerSvg = getDiagramLayerSvg(diagramId);
+    diagramLayer = diagramLayerSvg.getElementById(diagramId + '_diagramLayer');
+    return diagramLayer;
+}
+/** @private */
 export function getPortLayerSvg(diagramId) {
@@ -411,0 +438,0 @@ var adornerLayerSvg = null;

src/symbol-palette/symbol-palette-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Complex, CollectionFactory, ChildProperty, Event } from '@syncfusion/ej2-base';import { Browser, EventHandler, Draggable, INotifyPropertyChanged, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';import { remove, EmitType } from '@syncfusion/ej2-base';import { Accordion, AccordionItemModel, ExpandMode, ExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeModel, ConnectorModel, Node, Connector, Shape, Size, Transform, SwimLane, PathModel, HeaderModel } from '../diagram/index';import { DiagramRenderer, Container, StackPanel, Margin, BpmnDiagrams, ShapeStyleModel, TextStyleModel } from '../diagram/index';import { DiagramElement, TextElement, MarginModel, Canvas, BpmnShape, PointModel, IElement } from '../diagram/index';import { TextWrap, TextOverflow, IPaletteSelectionChangeArgs } from '../diagram/index';import { SvgRenderer } from '../diagram/rendering/svg-renderer';import { parentsUntil, createSvgElement, createHtmlElement, createMeasureElements } from '../diagram/utility/dom-util';import { scaleElement, arrangeChild, groupHasType, setUMLActivityDefaults } from '../diagram/utility/diagram-util';import { getFunction, randomId } from '../diagram/utility/base-util';import { getOuterBounds } from '../diagram/utility/connector';import { Point } from '../diagram/primitives/point';import { CanvasRenderer } from '../diagram/rendering/canvas-renderer';import { Rect } from '../diagram/primitives/rect';
+import { Component, Property, Complex, CollectionFactory, ChildProperty, Event } from '@syncfusion/ej2-base';import { Browser, EventHandler, Draggable, INotifyPropertyChanged, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';import { remove, EmitType } from '@syncfusion/ej2-base';import { Accordion, AccordionItemModel, ExpandMode, ExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeModel, ConnectorModel, Node, Connector, Shape, Size, Transform, SwimLane, PathModel } from '../diagram/index';import { DiagramRenderer, Container, StackPanel, Margin, BpmnDiagrams, ShapeStyleModel, TextStyleModel } from '../diagram/index';import { DiagramElement, TextElement, MarginModel, Canvas, BpmnShape, PointModel, IElement } from '../diagram/index';import { TextWrap, TextOverflow, IPaletteSelectionChangeArgs, HeaderModel, SwimLaneModel } from '../diagram/index';import { SvgRenderer } from '../diagram/rendering/svg-renderer';import { parentsUntil, createSvgElement, createHtmlElement, createMeasureElements } from '../diagram/utility/dom-util';import { scaleElement, arrangeChild, groupHasType, setUMLActivityDefaults } from '../diagram/utility/diagram-util';import { getFunction, randomId } from '../diagram/utility/base-util';import { getOuterBounds } from '../diagram/utility/connector';import { Point } from '../diagram/primitives/point';import { CanvasRenderer } from '../diagram/rendering/canvas-renderer';import { Rect } from '../diagram/primitives/rect';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/symbol-palette/symbol-palette.d.ts

@@ -392,2 +392,7 @@ import { Component, ChildProperty } from '@syncfusion/ej2-base';
     description?: SymbolDescription;
+    /**
+     * Define the text to be displayed when mouse hover on the shape.
+     * @default ''
+     */
+    tooltip?: string;
 }
@@ -394,0 +399,0 @@ /**

src/symbol-palette/symbol-palette.js

@@ -357,3 +357,3 @@ var __extends = (this && this.__extends) || (function () {
                         style: headerStyle,
-                        annotations: [{ content: header.content.content }]
+                        annotations: [{ content: header.annotation.content }]
                     };
@@ -379,8 +379,6 @@ headerObj.offsetX = headerObj.width / 2;
                     if (isHorizontal) {
-                        symbol.shape.data =
-                            'M' + 20 + ',' + (laneHeight / 2) + ' L' + (laneWidth - 20) + ',' + (laneHeight / 2) + 'z';
+                        symbol.shape.data = 'M0,0 L' + laneWidth + ',' + '0';
                     }
                     else {
-                        symbol.shape.data =
-                            'M' + (laneWidth / 2) + ',' + 20 + ' L' + (laneWidth / 2) + ',' + (laneHeight - 20) + 'z';
+                        symbol.shape.data = 'M0,0 L0,' + laneWidth;
                     }
@@ -543,2 +541,6 @@ }
             symbolInfo = symbolInfo || {};
+            if (symbol.shape && symbol.shape.isPhase) {
+                symbolInfo.width = symbolInfo.width || this.symbolWidth;
+                symbolInfo.height = symbolInfo.height || this.symbolHeight;
+            }
             //defining custom templates
@@ -559,5 +561,5 @@ content.relativeMode = 'Object';
                 var isLane = symbol.shape.isLane ? true : false;
+                var isPhase = symbol.shape.isPhase ? true : false;
                 if (this.symbolWidth !== undefined) {
-                    actualWidth = isLane ? this.laneTable[obj.id].width :
-                        this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;
+                    actualWidth = this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;
                 }
@@ -568,4 +570,3 @@ else {
                 if (this.symbolHeight !== undefined) {
-                    actualHeight = isLane ? this.laneTable[obj.id].height :
-                        this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;
+                    actualHeight = this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;
                 }
@@ -578,4 +579,4 @@ else {
                 }
-                sw = actualWidth / (content.width || width);
-                sh = actualHeight / (content.height || height);
+                sw = actualWidth / ((!isPhase && content.width) || width);
+                sh = actualHeight / ((!isPhase && content.height) || height);
                 if (symbolInfo.fit) {
@@ -781,3 +782,3 @@ sw = actualWidth / symbolInfo.width;
             style: 'width:' + width + 'px;height:' + height + 'px;float:left;overflow:hidden',
-            title: symbolInfo.description ? symbolInfo.description.text : symbol.id
+            title: symbolInfo.tooltip ? symbolInfo.tooltip : symbol.id
         });
@@ -822,6 +823,23 @@ parentDiv.appendChild(container);
             var actualHeight = symbol.wrapper.actualSize.height + symbol.style.strokeWidth;
-            var style = 'margin-left:' +
-                Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))
-                + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))
-                + 'px;pointer-events:none;transform-origin:0 0;overflow:hidden;';
+            var style = 'pointer-events:none;transform-origin:0 0;overflow:hidden;';
+            if (symbol.shape.isPhase) {
+                if (symbol.shape.orientation === 'Horizontal') {
+                    style += 'margin-left:' +
+                        Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))
+                        + 'px;margin-top:' + size.height / 2
+                        + 'px;';
+                }
+                else {
+                    style += 'margin-left:' +
+                        size.width / 2
+                        + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))
+                        + 'px;';
+                }
+            }
+            else {
+                style += 'margin-left:' +
+                    Math.max(this.symbolMargin.left, ((width - actualWidth) / 2))
+                    + 'px;margin-top:' + Math.max(this.symbolMargin.top, ((height - actualHeight) / 2))
+                    + 'px;';
+            }
             if (canvas instanceof HTMLCanvasElement) {
@@ -828,0 +846,0 @@ style += 'transform:scale(.5,.5);';

No alert changes

Improved metrics

Total package byte prevSize

23976977

increased by7.82%

Dev dependency count

0

decreased by-100%

Number of package files

273

increased by6.23%

Lines of code

177148

increased by7.72%

Dependency changes

• Updated@syncfusion/ej2-base@~17.1.32-beta

• Updated@syncfusion/ej2-buttons@~17.1.32-beta

• Updated@syncfusion/ej2-data@~17.1.32-beta

• Updated@syncfusion/ej2-inputs@~17.1.32-beta

• Updated@syncfusion/ej2-lists@~17.1.32-beta

• Updated@syncfusion/ej2-navigations@~17.1.32-beta

• Updated@syncfusion/ej2-popups@~17.1.32-beta