@syncfusion/ej2-diagrams - npm Package Compare versions

Comparing version 16.3.34 to 16.4.40-beta

CHANGELOG.md

@@ -7,2 +7,15 @@ # Changelog
 
+#### New Features
+
+- Support to create a UML class diagram through code or a visual interface with the built-in class diagram shapes is added.
+- Support to create a UML activity diagram through code or a visual interface with the built-in activity shapes is added.
+- Support to limit the label positions while dragging a label from the connector is added.
+- Support to generate a diagram by reading the data from the database, and updating the database with the newly inserted/updated/deleted nodes and connectors is added.
+- Support to render a large number of nodes and connectors in a diagram for effective performance is added.
+- Template support for annotation is added.
+
+## 16.3.33 (2018-11-20)
+
+### Diagram
+
 #### Bug Fixes
@@ -9,0 +22,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.34
+*  version : 16.4.40-beta
 *  Copyright Syncfusion Inc. 2001 - 2018. 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": "16.3.34",
+  "version": "16.4.40-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,9 +11,9 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.34",
-    "@syncfusion/ej2-data": "~16.3.34",
-    "@syncfusion/ej2-navigations": "~16.3.34",
-    "@syncfusion/ej2-inputs": "~16.3.34",
-    "@syncfusion/ej2-popups": "~16.3.34",
-    "@syncfusion/ej2-buttons": "~16.3.34",
-    "@syncfusion/ej2-lists": "~16.3.34"
+    "@syncfusion/ej2-base": "~16.4.40-beta",
+    "@syncfusion/ej2-data": "~16.4.40-beta",
+    "@syncfusion/ej2-navigations": "~16.4.40-beta",
+    "@syncfusion/ej2-inputs": "~16.4.40-beta",
+    "@syncfusion/ej2-popups": "~16.4.40-beta",
+    "@syncfusion/ej2-buttons": "~16.4.40-beta",
+    "@syncfusion/ej2-lists": "~16.4.40-beta"
   },
@@ -30,11 +30,6 @@ "devDependencies": {
     "syncfusion",
-    "ej2-diagrams",
-    "datavisualization-components",
+    "ej2-diagram",
+    "web-components",
     "TypeScript",
-    "diagram",
-    "flowchart",
-    "organization-chart",
-    "mind-map",
-    "bpmn",
-    "org-chart"
+    "diagram"
   ],
@@ -41,0 +36,0 @@ "repository": {

src/diagram/core/appearance-model.d.ts

@@ -199,3 +199,3 @@ import { Property, ChildProperty, Collection, ComplexFactory } from '@syncfusion/ej2-base';import { TextDecoration, WhiteSpace, TextWrap, TextAlign, GradientType, TextOverflow } from '../enum/enum';
      * Sets the fill color of a shape/path
-     * @default 'white'
+     * @default 'transparent'
      */
@@ -202,0 +202,0 @@ fill?: string;

src/diagram/core/appearance.d.ts

@@ -261,3 +261,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * Sets the fill color of a shape/path
-     * @default 'white'
+     * @default 'transparent'
      */
@@ -264,0 +264,0 @@ fill: string;

src/diagram/core/appearance.js

@@ -21,2 +21,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Property, ChildProperty, Collection, ComplexFactory } from '@syncfusion/ej2-base';
+/**   @private  */
 var getGradientType = function (obj) {
@@ -267,3 +268,3 @@ switch (obj.type) {
     __decorate([
-        Property('white')
+        Property('transparent')
     ], ShapeStyle.prototype, "fill", void 0);
@@ -270,0 +271,0 @@ __decorate([

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

@@ -20,3 +20,3 @@ import { Container } from './container';
      */
-    arrange(desiredSize: Size): Size;
+    arrange(desiredSize: Size, isStack?: boolean): Size;
     /**
@@ -23,0 +23,0 @@ * Aligns the child element based on its parent

src/diagram/core/containers/canvas.js

@@ -19,2 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Rect } from '../../primitives/rect';
+import { TextElement } from '../elements/text-element';
 /**
@@ -45,3 +46,13 @@ * Canvas module is used to define a plane(canvas) and to arrange the children based on margin
                 var child = _a[_i];
-                child.measure(availableSize);
+                if (child instanceof TextElement) {
+                    if (child.canMeasure) {
+                        child.measure(availableSize);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                else if (!(child instanceof TextElement)) {
+                    child.measure(availableSize);
+                }
                 var childSize = child.desiredSize.clone();
@@ -86,3 +97,3 @@ if (child.rotateAngle !== 0) {
      */
-    Canvas.prototype.arrange = function (desiredSize) {
+    Canvas.prototype.arrange = function (desiredSize, isStack) {
         this.outerBounds = new Rect();
@@ -99,5 +110,2 @@ if (this.hasChildren()) {
                     var childSize = child.desiredSize.clone();
-                    if (child.rotateAngle !== 0) {
-                        childSize = rotateSize(childSize, child.rotateAngle);
-                    }
                     var topLeft = void 0;
@@ -118,3 +126,3 @@ var center = { x: 0, y: 0 };
                     else {
-                        topLeft = this.alignChildBasedOnaPoint(child, childX, childY, childSize);
+                        topLeft = this.alignChildBasedOnaPoint(child, childX, childY);
                     }
@@ -124,4 +132,15 @@ center = { x: topLeft.x + childSize.width / 2, y: topLeft.y + childSize.height / 2 };
                 }
-                child.arrange(child.desiredSize);
-                this.outerBounds.uniteRect(child.outerBounds);
+                if (isStack && (child.horizontalAlignment === 'Stretch' || child.verticalAlignment === 'Stretch')) {
+                    child.arrange(desiredSize);
+                }
+                else {
+                    if (child instanceof TextElement && child.canMeasure) {
+                        child.arrange(child.desiredSize);
+                        this.outerBounds.uniteRect(child.outerBounds);
+                    }
+                    else if (!(child instanceof TextElement)) {
+                        child.arrange(child.desiredSize);
+                        this.outerBounds.uniteRect(child.outerBounds);
+                    }
+                }
             }
@@ -177,3 +196,3 @@ }
      */
-    Canvas.prototype.alignChildBasedOnaPoint = function (child, x, y, childSize) {
+    Canvas.prototype.alignChildBasedOnaPoint = function (child, x, y) {
         x += child.margin.left - child.margin.right;
@@ -188,6 +207,6 @@ y += child.margin.top - child.margin.bottom;
             case 'Center':
-                x -= childSize.width * child.pivot.x;
+                x -= child.desiredSize.width * child.pivot.x;
                 break;
             case 'Right':
-                x -= childSize.width;
+                x -= child.desiredSize.width;
                 break;
@@ -202,6 +221,6 @@ }
             case 'Center':
-                y -= childSize.height * child.pivot.y;
+                y -= child.desiredSize.height * child.pivot.y;
                 break;
             case 'Bottom':
-                y -= childSize.height;
+                y -= child.desiredSize.height;
                 break;
@@ -208,0 +227,0 @@ }

src/diagram/core/containers/container.js

@@ -65,2 +65,8 @@ var __extends = (this && this.__extends) || (function () {
                 child = this.children[i];
+                if (child.horizontalAlignment === 'Stretch' && !availableSize.width) {
+                    availableSize.width = child.bounds.width;
+                }
+                if (child.verticalAlignment === 'Stretch' && !availableSize.height) {
+                    availableSize.height = child.bounds.height;
+                }
                 var force = child.horizontalAlignment === 'Stretch' || child.verticalAlignment === 'Stretch';
@@ -79,2 +85,11 @@ if (this.measureChildren || force || (child instanceof Container && child.measureChildren !== undefined)) {
                 }
+                else if (this.actualSize && !this.actualSize.width && !this.actualSize.height &&
+                    !child.preventContainer && child.horizontalAlignment === 'Stretch' && child.verticalAlignment === 'Stretch') {
+                    if (this.desiredBounds === undefined) {
+                        this.desiredBounds = child.bounds;
+                    }
+                    else {
+                        this.desiredBounds.uniteRect(child.bounds);
+                    }
+                }
             }
@@ -81,0 +96,0 @@ if (this.desiredBounds !== undefined && this.rotateAngle !== 0) {

src/diagram/core/containers/stack-panel.js

@@ -64,3 +64,3 @@ var __extends = (this && this.__extends) || (function () {
                 //Measure children
-                child.measure(availableSize);
+                child.measure(child.desiredSize);
                 var childSize = child.desiredSize.clone();
@@ -109,3 +109,3 @@ //Consider Child's margin
                 _super.prototype.findChildOffsetFromCenter.call(this, child, center);
-                child.arrange(childSize);
+                child.arrange(childSize, true);
                 if (this.orientation === 'Vertical') {
@@ -140,2 +140,5 @@ y += rotatedSize.height + child.margin.bottom;
             centerY = parent.offsetY - parenBounds.height * parent.pivot.y + parenBounds.height / 2;
+            if (child.margin.top) {
+                centerY = y + child.margin.top + childBounds.height / 2;
+            }
         }
@@ -155,2 +158,5 @@ return { x: x + childBounds.width / 2, y: centerY };
             centerX = parent.offsetX - parentSize.width * parent.pivot.x + parentSize.width / 2;
+            if (child.margin.left) {
+                centerX = x + child.margin.left + childSize.width / 2;
+            }
         }
@@ -165,3 +171,3 @@ return { x: centerX, y: y + childSize.height / 2 };
                     if (child.horizontalAlignment === 'Stretch') {
-                        child.desiredSize.width = size.width;
+                        child.desiredSize.width = size.width - (child.margin.left + child.margin.right);
                     }
@@ -171,3 +177,3 @@ }
                     if (child.verticalAlignment === 'Stretch') {
-                        child.desiredSize.height = size.height;
+                        child.desiredSize.height = size.height - (child.margin.top + child.margin.bottom);
                     }
@@ -174,0 +180,0 @@ }

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

@@ -136,2 +136,4 @@ import { HorizontalAlignment, VerticalAlignment, UnitMode, Transform, RelativeMode } from '../../enum/enum';
     parentTransform: number;
+    /** @private */
+    preventContainer: boolean;
     /**
@@ -165,3 +167,4 @@ * Gets/Set the boolean value for the element
     isRectElement: boolean;
-    constructor();
+    /** @private */
+    isCalculateDesiredSize: boolean;
     /**
@@ -183,3 +186,2 @@ * Sets the offset of the element with respect to its parent
     float: boolean;
-    /**   @private  */
     /**
@@ -186,0 +188,0 @@ * used to set the outer bounds value

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

 import { Transform } from '../../enum/enum';
 import { Size } from '../../primitives/size';
 import { Rect } from '../../primitives/rect';
-import { getBounds, randomId } from '../../utility/base-util';
+import { getBounds } from '../../utility/base-util';
 /**
@@ -128,2 +128,4 @@ * DiagramElement module defines the basic unit of diagram
         this.parentTransform = 0;
+        /** @private */
+        this.preventContainer = false;
         /**
@@ -153,2 +155,4 @@ * Gets/Set the boolean value for the element
         this.isRectElement = false;
+        /** @private */
+        this.isCalculateDesiredSize = true;
         //private variables
@@ -160,4 +164,6 @@ this.position = undefined;
         this.floatingBounds = undefined;
-        this.id = randomId();
     }
+    // public constructor() {
+    //     this.id = randomId();
+    // }
     /**
@@ -191,3 +197,2 @@ * Sets the offset of the element with respect to its parent
     Object.defineProperty(DiagramElement.prototype, "outerBounds", {
-        /**   @private  */
         get: function () {
@@ -214,3 +219,5 @@ return this.floatingBounds || this.bounds;
         this.desiredSize = new Size(width, height);
-        this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);
+        if (this.isCalculateDesiredSize) {
+            this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);
+        }
         return this.desiredSize;
@@ -217,0 +224,0 @@ };

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

 import { DiagramElement } from './diagram-element';
+import { AnnotationConstraints } from '../../enum/enum';
 /**
@@ -9,3 +10,3 @@ * HTMLElement defines the basic html elements
      */
-    constructor(nodeId: string, diagramId: string);
+    constructor(nodeId: string, diagramId: string, annotationId?: string);
     private data;
@@ -17,2 +18,12 @@ /**
     /**
+     * defines the id of the annotation on rendering template on label.
+     * @private
+     */
+    annotationId: string;
+    /**
+     * defines the constraints of the annotation on rendering template on label.
+     * @private
+     */
+    constraints: AnnotationConstraints;
+    /**
      * Gets the diagram id for the html element
@@ -19,0 +30,0 @@ */

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

@@ -24,3 +24,3 @@ var __extends = (this && this.__extends) || (function () {
      */
-    function DiagramHtmlElement(nodeId, diagramId) {
+    function DiagramHtmlElement(nodeId, diagramId, annotationId) {
         var _this = _super.call(this) || this;
@@ -33,2 +33,7 @@ _this.data = '';
         /**
+         * defines the id of the annotation on rendering template on label.
+         * @private
+         */
+        _this.annotationId = '';
+        /**
          * Gets the diagram id for the html element
@@ -39,2 +44,3 @@ */
         _this.nodeId = nodeId;
+        _this.annotationId = annotationId;
         return _this;
@@ -41,0 +47,0 @@ }

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

@@ -33,2 +33,4 @@ import { Size } from '../../primitives/size';
     /**   @private  */
+    canMeasurePath: boolean;
+    /**   @private  */
     absoluteBounds: Rect;
@@ -35,0 +37,0 @@ private points;

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

@@ -41,2 +41,4 @@ var __extends = (this && this.__extends) || (function () {
         _this.absolutePath = '';
+        /**   @private  */
+        _this.canMeasurePath = false;
         //Private variables
@@ -87,3 +89,4 @@ /**   @private  */
         }
-        else if (this.isDirt && (this.transformPath || (this.width === undefined || this.height === undefined))) {
+        else if (this.isDirt && (this.transformPath || (this.width === undefined || this.height === undefined))
+            && (!this.absoluteBounds || this.absoluteBounds.height === 0) || this.canMeasurePath) {
             //Measure the element only whent the path data is changed/ size is not specified
@@ -102,2 +105,3 @@ this.absoluteBounds = measurePath(this.data ? this.data : '');
         this.desiredSize = this.validateDesiredSize(this.desiredSize, availableSize);
+        this.canMeasurePath = false;
         return this.desiredSize;
@@ -104,0 +108,0 @@ };

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

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

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

@@ -31,2 +31,4 @@ var __extends = (this && this.__extends) || (function () {
         _this.textContent = '';
+        /** @private */
+        _this.canMeasure = true;
         /**
@@ -45,3 +47,3 @@ * sets the hyperlink color to blue
         _this.style = {
-            color: 'black', fill: 'white', strokeColor: 'black',
+            color: 'black', fill: 'transparent', strokeColor: 'black',
             strokeWidth: 1, fontFamily: 'Arial', fontSize: 12, whiteSpace: 'CollapseSpace',
@@ -118,3 +120,3 @@ textWrapping: 'WrapWithOverflow', textAlign: 'Center', italic: false, bold: false,
         var size;
-        if (this.isDirt) {
+        if (this.isDirt && this.canMeasure) {
             size = measureText(this, this.style, this.content, this.width);
@@ -121,0 +123,0 @@ }

src/diagram/diagram-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove } 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 { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel } from './objects/interface/interfaces';import { View } from './objects/interface/interfaces';import { Container } from './core/containers/container';import { Node, BpmnShape, BpmnAnnotation } from './objects/node';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 { Size } from './primitives/size';import { Point } from './primitives/point';import { Keys, KeyModifiers, DiagramTools, AlignmentMode, AnnotationConstraints, NodeConstraints } 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 } from './enum/enum';import { PathElement } from './core/elements/path-element';import { TextElement } from './core/elements/text-element';import { updateStyle, removeItem, updateConnector, updateShape } from './utility/diagram-util';import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType } 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 { 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 } 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 } 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 } 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 { 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 { 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 } 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 } 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 } 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 } 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 } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -717,2 +717,8 @@
     /**
+     * Triggers before rendering the context menu item
+     * @event
+     */
+    contextMenuBeforeItemRender?: EmitType<MenuEventArgs>;
+
+    /**
      * Triggers when a context menu item is clicked
@@ -719,0 +725,0 @@ * @event

src/diagram/diagram.d.ts

@@ -32,2 +32,3 @@ import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
 import { PointModel } from './primitives/point-model';
+import { GridPanel } from './core/containers/grid';
 import { DataSourceModel } from './diagram/data-source-model';
@@ -813,2 +814,7 @@ import { LayoutModel } from './layout/layout-base-model';
     /**
+     * Triggers before rendering the context menu item
+     * @event
+     */
+    contextMenuBeforeItemRender: EmitType<MenuEventArgs>;
+    /**
      * Triggers when a context menu item is clicked
@@ -870,2 +876,4 @@ * @event
     /** @private */
+    pathTable: {};
+    /** @private */
     connectorTable: {};
@@ -902,4 +910,12 @@ /** @private */
     selectionConnectorsList: ConnectorModel[];
+    /** @private */
+    deleteVirtualObject: boolean;
+    /** @private */
     realActions: RealAction;
-    private deleteVirtualObject;
+    private crudDeleteNodes;
+    /** @private */
+    selectedObject: {
+        helperObject: NodeModel;
+        actualObject: NodeModel;
+    };
     /**
@@ -937,2 +953,3 @@ * Constructor for creating the widget
     render(): void;
+    private renderInitialCrud;
     /**
@@ -1281,6 +1298,7 @@ * Returns the module name of the diagram
     remove(obj?: NodeModel | ConnectorModel): void;
+    private isStackChild;
     /** @private */
     deleteChild(node: NodeModel | ConnectorModel | string, parentNode?: NodeModel): void;
     /** @private  */
-    addChild(node: NodeModel, child: string | NodeModel | ConnectorModel): void;
+    addChild(node: NodeModel, child: string | NodeModel | ConnectorModel, index?: number): void;
     /**
@@ -1374,2 +1392,4 @@ * Clears all nodes and objects in the diagram
     private initData;
+    private generateData;
+    private makeData;
     private initNodes;
@@ -1381,2 +1401,3 @@ private initConnectors;
     resetTool(): void;
+    private initObjectExtend;
     /** @private */
@@ -1392,3 +1413,5 @@ initObject(obj: IElement, layer?: LayerModel, independentObj?: boolean, group?: boolean): void;
     private initNode;
+    private updateChildPosition;
     private canExecute;
+    private updateStackProperty;
     private initViews;
@@ -1409,2 +1432,4 @@ private initCommands;
     /** @private  */
+    updateGridContainer(grid: GridPanel): void;
+    /** @private  */
     getObjectsOfLayer(objectArray: string[]): (NodeModel | ConnectorModel)[];
@@ -1414,3 +1439,3 @@ /** @private */
     /** @private */
-    refreshCanvasLayers(): void;
+    refreshCanvasLayers(view?: View): void;
     private renderBasicElement;
@@ -1425,4 +1450,7 @@ private refreshElements;
     refreshSvgDiagramLayer(view: View): void;
-    private removeVirtualObjects;
     /** @private */
+    removeVirtualObjects(clearIntervalVal: Object): void;
+    /** @private */
+    updateTextElementValue(object: NodeModel | ConnectorModel): void;
+    /** @private */
     updateVirtualObjects(collection: string[], remove: boolean, tCollection?: string[]): void;
@@ -1506,2 +1534,3 @@ /** @private */
     nodePropertyChange(actualObject: Node, oldObject: Node, node: Node, isLayout?: boolean, rotate?: boolean): void;
+    private updateUMLActivity;
     private updateConnectorProperties;
@@ -1513,2 +1542,3 @@ /** @private */
     connectorPropertyChange(actualObject: Connector, oldProp: Connector, newProp: Connector, disableBridging?: boolean): void;
+    private findInOutConnectPorts;
     private getPoints;
@@ -1538,2 +1568,4 @@ /**
     updateAnnotation(changedObject: AnnotationModel, actualAnnotation: ShapeAnnotationModel, nodes: Container, actualObject?: Object, canUpdateSize?: boolean): void;
+    private updateAnnotationContent;
+    private updateAnnotationWrapper;
     /** @private */
@@ -1561,2 +1593,20 @@ updatePort(changedObject: PointPortModel, actualPort: PointPortModel, nodes: Container): void;
     private addChildNodes;
+    /**
+     * Inserts newly added element into the database
+     */
+    insertData(node?: Node | Connector): object;
+    /**
+     * updates the user defined element properties into the existing database
+     */
+    updateData(node?: Node | Connector): object;
+    /**
+     * Removes the user deleted element from the existing database
+     */
+    removeData(node?: Node | Connector): object;
+    private crudOperation;
+    private processCrudCollection;
+    private parameterMap;
+    private getNewUpdateNodes;
+    private getDeletedNodes;
+    private raiseAjaxPost;
 }

src/diagram/diagram/data-source-model.d.ts

@@ -1,4 +0,104 @@
-import { DataManager } from '@syncfusion/ej2-data';import { Property, ChildProperty } from '@syncfusion/ej2-base';
+import { DataManager } from '@syncfusion/ej2-data';import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
 
 /**
+ * Interface for a class CrudAction
+ */
+export interface CrudActionModel {
+
+    /**
+     * set an URL to get a data from database
+     * @default ''
+     */
+    read?: string;
+
+    /**
+     * set an URL to add a data into database
+     * @default ''
+     */
+    create?: string;
+
+    /**
+     * set an URL to update the existing data in database
+     * @default ''
+     */
+    update?: string;
+
+    /**
+     * set an URL to remove an data in database
+     * @default ''
+     */
+    destroy?: string;
+
+    /**
+     * Add custom fields to node
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    customFields?: Object[];
+
+}
+
+/**
+ * Interface for a class ConnectionDataSource
+ */
+export interface ConnectionDataSourceModel {
+
+    /**
+     * set an id for connector dataSource
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * define sourceID to connect with connector
+     * @default ''
+     */
+    sourceID?: string;
+
+    /**
+     * define targetID to connect with connector
+     * @default ''
+     */
+    targetID?: string;
+
+    /**
+     * define sourcePoint to render connector startPoint
+     * @default null
+     */
+    sourcePointX?: number;
+
+    /**
+     * define sourcePoint to render connector startPoint
+     * @default null
+     */
+    sourcePointY?: number;
+
+    /**
+     * define targetPoint to render connector targetPoint
+     * @default null
+     */
+    targetPointX?: number;
+
+    /**
+     * define targetPoint to render connector targetPoint
+     * @default null
+     */
+    targetPointY?: number;
+
+    /**
+     * Sets the data source either as a collection of objects or as an URL of DataManager
+     * @default null
+     */
+    dataManager?: DataManager;
+
+    /**
+     * Add CrudAction to connector data source
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    crudAction?: CrudActionModel;
+
+}
+
+/**
  * Interface for a class DataSource
@@ -48,2 +148,16 @@ */
 
+    /**
+     * Add CrudAction to data source
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    crudAction?: CrudActionModel;
+
+    /**
+     * define connectorDataSource collection
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    connectionDataSource?: ConnectionDataSourceModel;
+
 }

src/diagram/diagram/data-source.d.ts

 import { DataManager } from '@syncfusion/ej2-data';
 import { ChildProperty } from '@syncfusion/ej2-base';
+import { CrudActionModel, ConnectionDataSourceModel } from './data-source-model';
 /**
@@ -32,2 +33,78 @@ * Configures the data source that is to be bound with diagram
  */
+export declare class CrudAction extends ChildProperty<CrudAction> {
+    /**
+     * set an URL to get a data from database
+     * @default ''
+     */
+    read: string;
+    /**
+     * set an URL to add a data into database
+     * @default ''
+     */
+    create: string;
+    /**
+     * set an URL to update the existing data in database
+     * @default ''
+     */
+    update: string;
+    /**
+     * set an URL to remove an data in database
+     * @default ''
+     */
+    destroy: string;
+    /**
+     * Add custom fields to node
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    customFields: Object[];
+}
+export declare class ConnectionDataSource extends ChildProperty<ConnectionDataSource> {
+    /**
+     * set an id for connector dataSource
+     * @default ''
+     */
+    id: string;
+    /**
+     * define sourceID to connect with connector
+     * @default ''
+     */
+    sourceID: string;
+    /**
+     * define targetID to connect with connector
+     * @default ''
+     */
+    targetID: string;
+    /**
+     * define sourcePoint to render connector startPoint
+     * @default null
+     */
+    sourcePointX: number;
+    /**
+     * define sourcePoint to render connector startPoint
+     * @default null
+     */
+    sourcePointY: number;
+    /**
+     * define targetPoint to render connector targetPoint
+     * @default null
+     */
+    targetPointX: number;
+    /**
+     * define targetPoint to render connector targetPoint
+     * @default null
+     */
+    targetPointY: number;
+    /**
+     * Sets the data source either as a collection of objects or as an URL of DataManager
+     * @default null
+     */
+    dataManager: DataManager;
+    /**
+     * Add CrudAction to connector data source
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    crudAction: CrudActionModel;
+}
 export declare class DataSource extends ChildProperty<DataSource> {
@@ -66,2 +143,14 @@ /**
     doBinding: Function | string;
+    /**
+     * Add CrudAction to data source
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    crudAction: CrudActionModel;
+    /**
+     * define connectorDataSource collection
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    connectionDataSource: ConnectionDataSourceModel;
 }

src/diagram/diagram/data-source.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Property, ChildProperty } from '@syncfusion/ej2-base';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';
 /**
@@ -51,2 +51,60 @@ * Configures the data source that is to be bound with diagram
  */
+var CrudAction = /** @class */ (function (_super) {
+    __extends(CrudAction, _super);
+    function CrudAction() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], CrudAction.prototype, "read", void 0);
+    __decorate([
+        Property('')
+    ], CrudAction.prototype, "create", void 0);
+    __decorate([
+        Property('')
+    ], CrudAction.prototype, "update", void 0);
+    __decorate([
+        Property('')
+    ], CrudAction.prototype, "destroy", void 0);
+    __decorate([
+        Property()
+    ], CrudAction.prototype, "customFields", void 0);
+    return CrudAction;
+}(ChildProperty));
+export { CrudAction };
+var ConnectionDataSource = /** @class */ (function (_super) {
+    __extends(ConnectionDataSource, _super);
+    function ConnectionDataSource() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], ConnectionDataSource.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], ConnectionDataSource.prototype, "sourceID", void 0);
+    __decorate([
+        Property('')
+    ], ConnectionDataSource.prototype, "targetID", void 0);
+    __decorate([
+        Property(null)
+    ], ConnectionDataSource.prototype, "sourcePointX", void 0);
+    __decorate([
+        Property(null)
+    ], ConnectionDataSource.prototype, "sourcePointY", void 0);
+    __decorate([
+        Property(null)
+    ], ConnectionDataSource.prototype, "targetPointX", void 0);
+    __decorate([
+        Property(null)
+    ], ConnectionDataSource.prototype, "targetPointY", void 0);
+    __decorate([
+        Property(null)
+    ], ConnectionDataSource.prototype, "dataManager", void 0);
+    __decorate([
+        Complex({}, CrudAction)
+    ], ConnectionDataSource.prototype, "crudAction", void 0);
+    return ConnectionDataSource;
+}(ChildProperty));
+export { ConnectionDataSource };
 var DataSource = /** @class */ (function (_super) {
@@ -75,4 +133,10 @@ __extends(DataSource, _super);
     ], DataSource.prototype, "doBinding", void 0);
+    __decorate([
+        Complex({}, CrudAction)
+    ], DataSource.prototype, "crudAction", void 0);
+    __decorate([
+        Complex({}, ConnectionDataSource)
+    ], DataSource.prototype, "connectionDataSource", void 0);
     return DataSource;
 }(ChildProperty));
 export { DataSource };

src/diagram/diagram/history.d.ts

@@ -8,3 +8,3 @@ import { SelectorModel } from '../interaction/selector-model';
 import { EntryType, EntryChangeType, EntryCategory } from '../enum/enum';
-import { DiagramElement } from  '../core/elements/diagram-element';
+import { DiagramElement } from '../core/elements/diagram-element';
 /**
@@ -59,3 +59,3 @@ * Interface for a class HistoryEntry
      */
-    changeObjectId?: string;
+    objectId?: string;
 }
@@ -62,0 +62,0 @@

src/diagram/enum/enum.js

@@ -284,2 +284,4 @@ /**
     NodeConstraints[NodeConstraints["AspectRatio"] = 1048576] = "AspectRatio";
+    /** hide all resize support for node */
+    NodeConstraints[NodeConstraints["HideThumbs"] = 16777216] = "HideThumbs";
     /** Enables or disables tool tip for the Nodes */
@@ -759,2 +761,6 @@ NodeConstraints[NodeConstraints["Tooltip"] = 2097152] = "Tooltip";
     PortConstraints[PortConstraints["Draw"] = 4] = "Draw";
+    /** Enables to only connect the target end of connector */
+    PortConstraints[PortConstraints["InConnect"] = 8] = "InConnect";
+    /** Enables to only connect the source end of connector */
+    PortConstraints[PortConstraints["OutConnect"] = 16] = "OutConnect";
 })(PortConstraints || (PortConstraints = {}));
@@ -775,1 +781,8 @@ /**
 'contextMenuOpen';
+/**
+ * Defines the context menu Before Item Render
+ * contextMenuBeforeItemRender - Sets the context menu open as contextMenuBeforeItemRender
+ */
+export var contextMenuBeforeItemRender = 
+/** contextMenuBeforeItemRender - Sets the context menu open as contextMenuBeforeItemRender */
+'contextMenuBeforeItemRender';

src/diagram/index.d.ts

@@ -20,2 +20,3 @@ /**
 export * from './core/containers/canvas';
+export * from './core/containers/grid';
 export * from './core/containers/stack-panel';
@@ -58,2 +59,3 @@ export * from './core/appearance-model';
 export * from './interaction/connector-editing';
+export * from './interaction/container-interaction';
 export * from './diagram/data-source';
@@ -60,0 +62,0 @@ export * from './diagram/grid-lines';

src/diagram/index.js

@@ -21,2 +21,3 @@ /**
 export * from './core/containers/canvas';
+export * from './core/containers/grid';
 export * from './core/containers/stack-panel';
@@ -55,2 +56,3 @@ //utility
 export * from './interaction/connector-editing';
+export * from './interaction/container-interaction';
 export * from './diagram/data-source';
@@ -57,0 +59,0 @@ export * from './diagram/grid-lines';

src/diagram/interaction/actions.js

@@ -15,2 +15,3 @@ import { Connector } from '../objects/connector';
 import { ShapeAnnotation, PathAnnotation } from '../objects/annotation';
+import { checkParentAsContainer } from '../interaction/container-interaction';
 /**
@@ -105,3 +106,3 @@ * Finds the action to be taken for the object under mouse
             if (paddedBounds.containsPoint(position)) {
-                var action = checkForResizeHandles(diagram, element, position, matrix, x, y);
+                var action = checkResizeHandles(diagram, element, position, matrix, x, y);
                 if (action) {
@@ -156,2 +157,16 @@ return action;
 }
+function checkResizeHandles(diagram, element, position, matrix, x, y) {
+    var action;
+    if ((diagram.selectedItems.nodes.length === 1 && diagram.selectedItems.connectors.length === 0)
+        && diagram.selectedItems.nodes[0].container) {
+        action = checkResizeHandleForContainer(diagram, element, position, x, y);
+    }
+    if (!action) {
+        action = checkForResizeHandles(diagram, element, position, matrix, x, y);
+    }
+    if (action) {
+        return action;
+    }
+    return null;
+}
 function checkForConnectorSegment(conn, handle, position, diagram) {
@@ -222,2 +237,40 @@ var targetPaddingValue = 10 / diagram.scrollSettings.currentZoom;
 }
+/**
+ * Resize handle for container and also object.
+ * @private
+ */
+function checkResizeHandleForContainer(diagram, element, position, x, y) {
+    var ten = 10 / diagram.scroller.currentZoom;
+    var forty = 40 / diagram.scroller.currentZoom;
+    var selectedItems = diagram.selectedItems;
+    var width = element.actualSize.width;
+    var height = element.actualSize.height;
+    var left = new Rect(x, y + 20, element.style.strokeWidth, height - 40);
+    var right = new Rect(x + width, y + 20, element.style.strokeWidth, height - 40);
+    var top = new Rect(x + 20, y, width - 40, element.style.strokeWidth);
+    var bottom = new Rect(x + 20, y + height, width - 40, element.style.strokeWidth);
+    var container = checkParentAsContainer(diagram, diagram.selectedItems.nodes[0], true) ?
+        diagram.nameTable[diagram.selectedItems.nodes[0].parentId] : diagram.selectedItems.nodes[0];
+    if (width >= forty && height >= forty) {
+        if (canResizeCorner(selectedItems.constraints, 'ResizeEast', selectedItems.thumbsConstraints, selectedItems) &&
+            right.containsPoint(position, ten)) {
+            return 'ResizeEast';
+        }
+        if (canResizeCorner(selectedItems.constraints, 'ResizeSouth', selectedItems.thumbsConstraints, selectedItems) &&
+            bottom.containsPoint(position, ten)) {
+            return 'ResizeSouth';
+        }
+        if (container.container.type !== 'Grid') {
+            if (canResizeCorner(selectedItems.constraints, 'ResizeWest', selectedItems.thumbsConstraints, selectedItems) &&
+                left.containsPoint(position, ten)) {
+                return 'ResizeWest';
+            }
+            if (canResizeCorner(selectedItems.constraints, 'ResizeNorth', selectedItems.thumbsConstraints, selectedItems) &&
+                top.containsPoint(position, ten)) {
+                return 'ResizeNorth';
+            }
+        }
+    }
+    return null;
+}
 function checkForResizeHandles(diagram, element, position, matrix, x, y) {
@@ -224,0 +277,0 @@ var forty = 40 / diagram.scroller.currentZoom;

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

@@ -123,3 +123,3 @@ import { IElement } from '../objects/interface/IElement';
     /** @private */
-    translateObject(obj: Node | Connector): void;
+    translateObject(obj: Node | Connector, groupnodeID?: string): void;
     /**
@@ -189,2 +189,10 @@ * @private
     clearSelection(triggerAction?: boolean): void;
+    /**
+     * @private
+     */
+    removeStackHighlighter(): void;
+    /**
+     * @private
+     */
+    renderStackHighlighter(args: MouseEventArgs, target?: IElement): void;
     /** @private */
@@ -247,3 +255,7 @@ drag(obj: NodeModel | ConnectorModel, tx: number, ty: number): void;
     private updatePathAnnotationOffset;
+    private getRelativeOffset;
+    private dragLimitValue;
     private updateLabelMargin;
+    private boundsInterSects;
+    private intersect;
     private getPointAtLength;
@@ -340,3 +352,17 @@ private getInterceptWithSegment;
     removeHighlighter(): void;
+    /**
+     * @private
+     */
+    renderContainerHelper(node: NodeModel | SelectorModel): NodeModel | ConnectorModel;
+    /**
+     * @private
+     */
+    isParentAsContainer(node: NodeModel, isChild?: boolean): boolean;
+    /**
+     * @private
+     */
+    dropChildToContainer(parent: NodeModel, node: NodeModel): void;
     /** @private */
+    checkSelection(selector: SelectorModel, corner: string): void;
+    /** @private */
     zoom(scale: number, scrollX: number, scrollY: number, focusPoint?: PointModel): void;
@@ -365,1 +391,10 @@ }
 }
+/** @private */
+export interface Distance {
+    minDistance?: number;
+}
+/** @private */
+export interface IsDragArea {
+    x?: boolean;
+    y?: boolean;
+}

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

@@ -65,5 +65,7 @@ import { PointModel } from '../primitives/point-model';
     private isMetaKey;
+    private renderUmlHighLighter;
     private isDeleteKey;
     private isMouseOnScrollBar;
     /**   @private  */
+    updateVirtualization(): void;
     mouseDown(evt: PointerEvent): void;
@@ -100,2 +102,6 @@ /**   @private  */
      */
+    itemClick(actualTarget: NodeModel, diagram: Diagram): NodeModel;
+    /**
+     * @private
+     */
     inputChange(evt: InputArgs): void;
@@ -124,2 +130,4 @@ /**
     findActionToBeDone(obj: NodeModel | ConnectorModel, wrapper: DiagramElement, position: PointModel, target?: NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel): Actions;
+    private updateContainerProperties;
+    private addUmlNode;
 }
@@ -126,0 +134,0 @@ /** @private */

src/diagram/interaction/scroller.js

@@ -5,3 +5,3 @@ import { Rect } from '../primitives/rect';
 import { updateRuler } from '../ruler/ruler';
-import { canZoom, canPan } from './../utility/constraints-util';
+import { canZoom, canPan, canVitualize } from './../utility/constraints-util';
 /**
@@ -431,3 +431,6 @@ */
                 this.setSize();
-                if (this.diagram.mode !== 'SVG') {
+                if (this.diagram.mode !== 'SVG' && canVitualize(this.diagram)) {
+                    this.diagram.scroller.virtualizeElements();
+                }
+                if (this.diagram.mode !== 'SVG' && !canVitualize(this.diagram)) {
                     this.diagram.refreshDiagramLayer();
@@ -434,0 +437,0 @@ }

src/diagram/interaction/selector-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, Collection, Complex } from '@syncfusion/ej2-base';import { IElement } from '../objects/interface/IElement';import { Container } from '../core/containers/container';import { Node } from '../objects/node';import { Connector } from '../objects/connector';import { PointModel } from '../primitives/point-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { RubberBandSelectionMode, Side, ThumbsConstraints } from '../enum/enum';import { SelectorConstraints, HorizontalAlignment, VerticalAlignment } from '../enum/enum';import { NodeModel } from '../objects/node-model';import { ConnectorModel } from '../objects/connector-model';import { Diagram } from '../../diagram/diagram';import { MarginModel } from '../core/appearance-model';import { Margin } from '../core/appearance';import { ShapeAnnotationModel, PathAnnotationModel } from '../objects/annotation-model';import { DiagramElement } from '..';
+import { Property, ChildProperty, Collection, Complex } from '@syncfusion/ej2-base';import { IElement } from '../objects/interface/IElement';import { Container } from '../core/containers/container';import { Node } from '../objects/node';import { Connector } from '../objects/connector';import { PointModel } from '../primitives/point-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { RubberBandSelectionMode, Side, ThumbsConstraints } from '../enum/enum';import { SelectorConstraints, HorizontalAlignment, VerticalAlignment } from '../enum/enum';import { NodeModel } from '../objects/node-model';import { ConnectorModel } from '../objects/connector-model';import { Diagram } from '../../diagram/diagram';import { MarginModel } from '../core/appearance-model';import { Margin } from '../core/appearance';import { ShapeAnnotationModel, PathAnnotationModel } from '../objects/annotation-model';import { DiagramElement } from '../core/elements/diagram-element';
 
@@ -3,0 +3,0 @@ /**

src/diagram/interaction/tool.d.ts

 import { PointModel } from '../primitives/point-model';
 import { Node } from '../objects/node';
 import { Connector, BezierSegment } from '../objects/connector';
+import { NodeModel } from '../objects/node-model';
 import { IElement } from '../objects/interface/IElement';
@@ -71,3 +72,3 @@ import { IDoubleClickEventArgs, IClickEventArgs } from '../objects/interface/IElement';
     mouseLeave(args: MouseEventArgs): void;
-    protected updateSize(shape: SelectorModel, startPoint: PointModel, endPoint: PointModel, corner: string, initialBounds: Rect, angle?: number): Rect;
+    protected updateSize(shape: SelectorModel | NodeModel, startPoint: PointModel, endPoint: PointModel, corner: string, initialBounds: Rect, angle?: number): Rect;
     protected getPivot(corner: string): PointModel;
@@ -107,2 +108,3 @@ }
     private getTooltipContent;
+    private checkConnect;
     /**   @private  */
@@ -109,0 +111,0 @@ endAction(): void;

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

@@ -50,2 +50,8 @@ import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { TextStyle, Margin } from '../core/appearance';import { Point } from '../primitives/point';import { TextStyleModel, MarginModel } from '../core/appearance-model';import { PointModel } from '../primitives/point-model';import { HorizontalAlignment, VerticalAlignment, AnnotationAlignment, AnnotationTypes, TextDecoration } from '../enum/enum';import { AnnotationConstraints } from '../enum/enum';
     /**
+     * Sets the textual description of the node/connector
+     * @default undefined
+     */
+    template?: string | HTMLElement;
+
+    /**
      * Defines the visibility of the label
@@ -152,2 +158,8 @@ * @default true
     /**
+     * Sets the space to be left between an annotation and its parent node/connector
+     * @default new Margin(20,20,20,20)
+     */
+    dragLimit?: MarginModel;
+
+    /**
      * Sets the type of the annotation
@@ -154,0 +166,0 @@ *  * Shape - Sets the annotation type as Shape

src/diagram/objects/annotation.d.ts

@@ -46,2 +46,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     /**
+     * Sets the textual description of the node/connector
+     * @default undefined
+     */
+    template: string | HTMLElement;
+    /**
      * Defines the visibility of the label
@@ -137,2 +142,7 @@ * @default true
     /**
+     * Sets the space to be left between an annotation and its parent node/connector
+     * @default new Margin(20,20,20,20)
+     */
+    dragLimit: MarginModel;
+    /**
      * Sets the type of the annotation
@@ -139,0 +149,0 @@ *  * Shape - Sets the annotation type as Shape

src/diagram/objects/annotation.js

@@ -59,2 +59,5 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
+        Property(undefined)
+    ], Annotation.prototype, "template", void 0);
+    __decorate([
         Property(true)
@@ -93,2 +96,5 @@ ], Annotation.prototype, "visibility", void 0);
     __decorate([
+        Complex({ top: undefined, bottom: undefined, left: undefined, right: undefined }, Margin)
+    ], Annotation.prototype, "dragLimit", void 0);
+    __decorate([
         Property('Shape')
@@ -95,0 +101,0 @@ ], Annotation.prototype, "type", void 0);

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

@@ -7,3 +7,2 @@ import { PointModel } from '../primitives/point-model';
 import { Connector } from './connector';
-import { Segment } from '../interaction/scroller';
 /**
@@ -34,5 +33,2 @@ * ConnectorBridging defines the bridging behavior
     private checkForHorizontalLine;
-    private intersect2;
-    /** @private */
-    getLineSegment(x1: number, y1: number, x2: number, y2: number): Segment;
     private isEmptyPoint;
@@ -39,0 +35,0 @@ private getLengthAtFractionPoint;

src/diagram/objects/connector-bridging.js

 import { Point } from '../primitives/point';
 import { Rect } from '../primitives/rect';
-import { intersect3 } from '../utility/diagram-util';
+import { intersect2 } from '../utility/diagram-util';
 import { canBridge } from '../utility/constraints-util';
@@ -276,3 +276,3 @@ /**
         for (var i = 0; i < pts.length - 1; i++) {
-            var point = this.intersect2(startPt, endPt, pts[i], pts[i + 1]);
+            var point = intersect2(startPt, endPt, pts[i], pts[i + 1]);
             if (!this.isEmptyPoint(point)) {
@@ -315,18 +315,2 @@ var angle = this.angleCalculation(startPt, endPt);
     };
-    ConnectorBridging.prototype.intersect2 = function (start1, end1, start2, end2) {
-        var point = { x: 0, y: 0 };
-        var lineUtil1 = this.getLineSegment(start1.x, start1.y, end1.x, end1.y);
-        var lineUtil2 = this.getLineSegment(start2.x, start2.y, end2.x, end2.y);
-        var line3 = intersect3(lineUtil1, lineUtil2);
-        if (line3.enabled) {
-            return line3.intersectPt;
-        }
-        else {
-            return point;
-        }
-    };
-    /** @private */
-    ConnectorBridging.prototype.getLineSegment = function (x1, y1, x2, y2) {
-        return { 'x1': Number(x1) || 0, 'y1': Number(y1) || 0, 'x2': Number(x2) || 0, 'y2': Number(y2) || 0 };
-    };
     ConnectorBridging.prototype.isEmptyPoint = function (point) {
@@ -333,0 +317,0 @@ return point.x === 0 && point.y === 0;

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

@@ -1,2 +0,2 @@
-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 } 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 } from '../utility/diagram-util';import { randomId, getFunction } from './../utility/base-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 } from '../enum/enum';import { ConnectionShapes, 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 } from '../primitives/matrix';
+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 { 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';
 import {NodeBaseModel} from "./node-base-model";
@@ -100,2 +100,25 @@
 /**
+ * Interface for a class ActivityFlow
+ */
+export interface ActivityFlowModel extends ConnectorShapeModel{
+
+    /**
+     * Defines the type of the UMLActivity flows
+     * Object - Sets the type of the UMLActivity Flow as Object
+     * Control - Sets the type of the UMLActivity Flow as Control
+     * Exception - Sets the type of the UMLActivity Flow as Exception
+     * @default 'Object'
+     * @IgnoreSingular
+     */
+    flow?: UmlActivityFlows;
+
+    /**
+     * Defines the height of the exception flow.
+     * @default '50'
+     */
+    exceptionFlowHeight?: number;
+
+}
+
+/**
  * Interface for a class BpmnFlow
@@ -269,2 +292,93 @@ */
 /**
+ * Interface for a class MultiplicityLabel
+ */
+export interface MultiplicityLabelModel {
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    optional?: boolean;
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    lowerBounds?: string;
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    upperBounds?: string;
+
+}
+
+/**
+ * Interface for a class ClassifierMultiplicity
+ */
+export interface ClassifierMultiplicityModel {
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    type?: Multiplicity;
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    target?: MultiplicityLabelModel;
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    source?: MultiplicityLabelModel;
+
+}
+
+/**
+ * Interface for a class RelationShip
+ */
+export interface RelationShipModel extends ConnectorShapeModel{
+
+    /**
+     * Defines the type of the  UMLConnector
+     * @default ''
+     * @IgnoreSingular
+     */
+    type?: ConnectionShapes;
+
+    /**
+     * Defines the association direction
+     * @default ''
+     * @IgnoreSingular
+     */
+    relationship?: ClassifierShape;
+
+    /**
+     * Defines the association direction
+     * @default ''
+     * @IgnoreSingular
+     */
+    associationType?: AssociationFlow;
+
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    multiplicity?: ClassifierMultiplicityModel;
+
+}
+
+/**
  * Interface for a class Connector
@@ -279,3 +393,3 @@ */
      */
-    shape?: ConnectorShapeModel | BpmnFlowModel;
+    shape?: ConnectorShapeModel | BpmnFlowModel | RelationShipModel;
 
@@ -282,0 +396,0 @@ /**

src/diagram/objects/connector.d.ts

@@ -6,4 +6,4 @@ /// <reference path="node-base-model.d.ts" />
 import { PointModel } from '../primitives/point-model';
-import { Segments, DecoratorShapes, ConnectorConstraints, Direction, LayoutOrientation } from '../enum/enum';
-import { DecoratorModel, ConnectorShapeModel, BpmnFlowModel, VectorModel, ConnectorModel } from './connector-model';
+import { Segments, DecoratorShapes, ConnectorConstraints, Direction, LayoutOrientation, Status } from '../enum/enum';
+import { DecoratorModel, ConnectorShapeModel, BpmnFlowModel, VectorModel } from './connector-model';
 import { Rect } from '../primitives/rect';
@@ -17,7 +17,10 @@ import { Bridge } from '../utility/connector';
 import { DiagramElement } from '../core/elements/diagram-element';
-import { ConnectionShapes, BpmnFlows, BpmnMessageFlows, BpmnSequenceFlows, BpmnAssociationFlows } from '../enum/enum';
+import { AssociationFlow, ClassifierShape, Multiplicity } from '../enum/enum';
+import { ConnectionShapes, UmlActivityFlows, BpmnFlows, BpmnMessageFlows, BpmnSequenceFlows, BpmnAssociationFlows } from '../enum/enum';
 import { PathAnnotationModel } from './annotation-model';
 import { NodeBase } from './node-base';
 import { DiagramTooltipModel } from './tooltip-model';
-import { OrthogonalSegmentModel, StraightSegmentModel, BezierSegmentModel } from './connector-model';
+import { OrthogonalSegmentModel, StraightSegmentModel, BezierSegmentModel, ConnectorModel } from './connector-model';
+import { RelationShipModel, ClassifierMultiplicityModel, MultiplicityLabelModel } from './connector-model';
+import { DiagramHtmlElement } from '../core/elements/html-element';
 /**
@@ -122,2 +125,21 @@ * Decorators are used to decorate the end points of the connector with some predefined path geometry
  */
+export declare class ActivityFlow extends ConnectorShape {
+    /**
+     * Defines the type of the UMLActivity flows
+     * Object - Sets the type of the UMLActivity Flow as Object
+     * Control - Sets the type of the UMLActivity Flow as Control
+     * Exception - Sets the type of the UMLActivity Flow as Exception
+     * @default 'Object'
+     * @IgnoreSingular
+     */
+    flow: UmlActivityFlows;
+    /**
+     * Defines the height of the exception flow.
+     * @default '50'
+     */
+    exceptionFlowHeight: number;
+}
+/**
+ * Sets the type of the flow in a BPMN Process
+ */
 export declare class BpmnFlow extends ConnectorShape {
@@ -310,2 +332,77 @@ /**
 /**
+ * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults
+ */
+export declare class MultiplicityLabel extends ChildProperty<MultiplicityLabel> {
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    optional: boolean;
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    lowerBounds: string;
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    upperBounds: string;
+}
+/**
+ * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults
+ */
+export declare class ClassifierMultiplicity extends ChildProperty<ClassifierMultiplicity> {
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    type: Multiplicity;
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    target: MultiplicityLabelModel;
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    source: MultiplicityLabelModel;
+}
+/**
+ * Defines the behavior of the UMLActivity shape
+ */
+export declare class RelationShip extends ConnectorShape {
+    /**
+     * Defines the type of the  UMLConnector
+     * @default ''
+     * @IgnoreSingular
+     */
+    type: ConnectionShapes;
+    /**
+     * Defines the association direction
+     * @default ''
+     * @IgnoreSingular
+     */
+    relationship: ClassifierShape;
+    /**
+     * Defines the association direction
+     * @default ''
+     * @IgnoreSingular
+     */
+    associationType: AssociationFlow;
+    /**
+     * Defines the type of the Classifier Multiplicity
+     * @default ''
+     * @IgnoreSingular
+     */
+    multiplicity: ClassifierMultiplicityModel;
+}
+/**
  * Connectors are used to create links between nodes
@@ -319,3 +416,3 @@ */
      */
-    shape: ConnectorShapeModel | BpmnFlowModel;
+    shape: ConnectorShapeModel | BpmnFlowModel | RelationShipModel;
     /**
@@ -463,6 +560,13 @@ * Defines the constraints of connector
     intermediatePoints: PointModel[];
+    /** @private */
+    status: Status;
     constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
     /** @private */
     init(diagram: any): Canvas;
+    private getConnectorRelation;
     private getBpmnSequenceFlow;
+    /** @private */
+    getUMLObjectFlow(): void;
+    /** @private */
+    getUMLExceptionFlow(segment: PathElement): void;
     private getBpmnAssociationFlow;
@@ -475,5 +579,5 @@ private getBpmnMessageFlow;
     /** @private */
-    getAnnotationElement(annotation: PathAnnotation, points: PointModel[], bounds: Rect, getDescription: Function | string): TextElement;
+    getAnnotationElement(annotation: PathAnnotation, points: PointModel[], bounds: Rect, getDescription: Function | string, diagramId: string): TextElement | DiagramHtmlElement;
     /** @private */
-    updateAnnotation(annotation: PathAnnotation, points: PointModel[], bounds: Rect, textElement: TextElement): void;
+    updateAnnotation(annotation: PathAnnotation, points: PointModel[], bounds: Rect, textElement: TextElement | DiagramHtmlElement): void;
     /** @private */
@@ -480,0 +584,0 @@ getConnectorPoints(type: Segments, points?: PointModel[], layoutOrientation?: LayoutOrientation): PointModel[];

src/diagram/objects/connector.js

@@ -29,3 +29,3 @@ var __extends = (this && this.__extends) || (function () {
 import { findAngle, findConnectorPoints, getOuterBounds } from '../utility/connector';
-import { getAnnotationPosition, alignLabelOnSegments, updateConnector } from '../utility/diagram-util';
+import { getAnnotationPosition, alignLabelOnSegments, updateConnector, setUMLActivityDefaults } from '../utility/diagram-util';
 import { randomId, getFunction } from './../utility/base-util';
@@ -38,3 +38,4 @@ import { PathElement } from '../core/elements/path-element';
 import { DiagramTooltip } from './tooltip';
-import { identityMatrix, rotateMatrix, scaleMatrix, transformPointsByMatrix } from '../primitives/matrix';
+import { identityMatrix, rotateMatrix, scaleMatrix, transformPointsByMatrix, transformPointByMatrix } from '../primitives/matrix';
+import { DiagramHtmlElement } from '../core/elements/html-element';
 var getConnectorType = function (obj) {
@@ -44,2 +45,6 @@ switch (obj.type) {
             return BpmnFlow;
+        case 'UmlActivity':
+            return ActivityFlow;
+        case 'UmlClassifier':
+            return RelationShip;
         default:
@@ -124,2 +129,19 @@ return ConnectorShape;
  */
+var ActivityFlow = /** @class */ (function (_super) {
+    __extends(ActivityFlow, _super);
+    function ActivityFlow() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Object')
+    ], ActivityFlow.prototype, "flow", void 0);
+    __decorate([
+        Property(30)
+    ], ActivityFlow.prototype, "exceptionFlowHeight", void 0);
+    return ActivityFlow;
+}(ConnectorShape));
+export { ActivityFlow };
+/**
+ * Sets the type of the flow in a BPMN Process
+ */
 var BpmnFlow = /** @class */ (function (_super) {
@@ -335,2 +357,65 @@ __extends(BpmnFlow, _super);
 /**
+ * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults
+ */
+var MultiplicityLabel = /** @class */ (function (_super) {
+    __extends(MultiplicityLabel, _super);
+    function MultiplicityLabel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(true)
+    ], MultiplicityLabel.prototype, "optional", void 0);
+    __decorate([
+        Property(undefined)
+    ], MultiplicityLabel.prototype, "lowerBounds", void 0);
+    __decorate([
+        Property(undefined)
+    ], MultiplicityLabel.prototype, "upperBounds", void 0);
+    return MultiplicityLabel;
+}(ChildProperty));
+export { MultiplicityLabel };
+/**
+ * Defines the behavior of the UMLActivity Classifier multiplicity connection defaults
+ */
+var ClassifierMultiplicity = /** @class */ (function (_super) {
+    __extends(ClassifierMultiplicity, _super);
+    function ClassifierMultiplicity() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], ClassifierMultiplicity.prototype, "type", void 0);
+    __decorate([
+        Complex({}, MultiplicityLabel)
+    ], ClassifierMultiplicity.prototype, "target", void 0);
+    __decorate([
+        Complex({}, MultiplicityLabel)
+    ], ClassifierMultiplicity.prototype, "source", void 0);
+    return ClassifierMultiplicity;
+}(ChildProperty));
+export { ClassifierMultiplicity };
+/**
+ * Defines the behavior of the UMLActivity shape
+ */
+var RelationShip = /** @class */ (function (_super) {
+    __extends(RelationShip, _super);
+    function RelationShip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('UmlClassifier')
+    ], RelationShip.prototype, "type", void 0);
+    __decorate([
+        Property('Aggregation')
+    ], RelationShip.prototype, "relationship", void 0);
+    __decorate([
+        Property('Directional')
+    ], RelationShip.prototype, "associationType", void 0);
+    __decorate([
+        Complex({}, ClassifierMultiplicity)
+    ], RelationShip.prototype, "multiplicity", void 0);
+    return RelationShip;
+}(ConnectorShape));
+export { RelationShip };
+/**
  * Connectors are used to create links between nodes
@@ -347,2 +432,7 @@ */
         _this.bridges = [];
+        /** @private */
+        _this.status = 'None';
+        if (_this.shape && _this.shape.type === 'UmlActivity') {
+            setUMLActivityDefaults(defaultValue, _this);
+        }
         return _this;
@@ -390,2 +480,15 @@ }
                 break;
+            case 'UmlActivity':
+                switch (this.shape.flow) {
+                    case 'Object':
+                        this.getUMLObjectFlow();
+                        break;
+                    case 'Exception':
+                        this.getUMLExceptionFlow(segment);
+                        break;
+                }
+                break;
+            case 'UmlClassifier':
+                this.getConnectorRelation();
+                break;
         }
@@ -427,3 +530,3 @@ var anglePoints = this.intermediatePoints;
         for (var i = 0; this.annotations !== undefined, i < this.annotations.length; i++) {
-            container.children.push(this.getAnnotationElement(this.annotations[i], this.intermediatePoints, bounds, getDescription));
+            container.children.push(this.getAnnotationElement(this.annotations[i], this.intermediatePoints, bounds, getDescription, diagram.element.id));
         }
@@ -433,2 +536,100 @@ this.wrapper = container;
     };
+    Connector.prototype.getConnectorRelation = function () {
+        var shape = this.shape;
+        if (shape.relationship === 'Association') {
+            this.segments[0].type = 'Straight';
+            this.sourceDecorator.shape = 'None';
+            this.targetDecorator.shape = 'Arrow';
+            this.style.strokeWidth = 2;
+        }
+        else if (shape.relationship === 'Inheritance') {
+            this.segments[0].type = 'Orthogonal';
+            this.sourceDecorator.shape = 'None';
+            this.targetDecorator.shape = 'Arrow';
+            this.targetDecorator.style.fill = 'white';
+            this.style.strokeWidth = 2;
+            this.style.strokeDashArray = '4 4';
+        }
+        else if (shape.relationship === 'Composition') {
+            this.segments[0].type = 'Orthogonal';
+            this.sourceDecorator.shape = 'Diamond';
+            this.targetDecorator.shape = 'None';
+            this.sourceDecorator.style.fill = 'black';
+            this.style.strokeWidth = 2;
+        }
+        else if (shape.relationship === 'Aggregation') {
+            this.segments[0].type = 'Orthogonal';
+            this.sourceDecorator.shape = 'Diamond';
+            this.targetDecorator.shape = 'None';
+            this.sourceDecorator.style.fill = 'white';
+            this.style.strokeWidth = 2;
+        }
+        else if (shape.relationship === 'Dependency') {
+            this.segments[0].type = 'Orthogonal';
+            this.sourceDecorator.shape = 'None';
+            this.targetDecorator.shape = 'OpenArrow';
+            this.sourceDecorator.style.fill = 'white';
+            this.style.strokeWidth = 2;
+            this.style.strokeDashArray = '4 4';
+        }
+        else if (shape.relationship === 'Realization') {
+            this.segments[0].type = 'Orthogonal';
+            this.sourceDecorator.shape = 'None';
+            this.targetDecorator.shape = 'Arrow';
+            this.sourceDecorator.style.fill = 'white';
+            this.style.strokeWidth = 2;
+        }
+        if (shape.associationType === 'BiDirectional') {
+            this.sourceDecorator.shape = 'None';
+            this.targetDecorator.shape = 'None';
+        }
+        var text1 = '';
+        var lower;
+        var upper;
+        var sourceText = '';
+        var targetText = '';
+        var text = '';
+        if (shape.multiplicity.source) {
+            shape.multiplicity.source.lowerBounds = shape.multiplicity.source.lowerBounds;
+            shape.multiplicity.source.upperBounds = shape.multiplicity.source.upperBounds;
+        }
+        if (shape.multiplicity.target) {
+            shape.multiplicity.target.lowerBounds = shape.multiplicity.target.lowerBounds;
+            shape.multiplicity.target.upperBounds = shape.multiplicity.target.upperBounds;
+        }
+        lower = shape.multiplicity.source;
+        upper = shape.multiplicity.target;
+        text = lower.upperBounds ? lower.lowerBounds + '...' + lower.upperBounds : lower.lowerBounds;
+        text1 = upper.upperBounds ? upper.lowerBounds + '...' + upper.upperBounds : upper.lowerBounds;
+        if (shape.multiplicity.type === 'ManyToOne') {
+            shape.multiplicity.target.optional = false;
+            sourceText = text ? text : '*';
+            targetText = '1';
+        }
+        if (shape.multiplicity.type === 'OneToMany') {
+            shape.multiplicity.source.optional = false;
+            targetText = text1 ? text1 : '*';
+            sourceText = '1';
+        }
+        if (shape.multiplicity.type === 'ManyToOne') {
+            sourceText = text ? text : '*';
+            targetText = text1 ? text1 : '*';
+        }
+        if (shape.multiplicity.type === 'OneToOne') {
+            shape.multiplicity.target.optional = false;
+            shape.multiplicity.source.optional = false;
+            sourceText = '1';
+            targetText = '1';
+        }
+        this.annotations = [
+            {
+                id: this.id + 'sourcelabel', content: sourceText, offset: 0, alignment: 'Before',
+                margin: { right: 5, bottom: 5 }
+            },
+            {
+                id: this.id + 'targetlabel', content: targetText, offset: 1, alignment: 'Before',
+                margin: { right: 5, bottom: 5 }
+            }
+        ];
+    };
     Connector.prototype.getBpmnSequenceFlow = function () {
@@ -468,2 +669,30 @@ var segment = new PathElement();
     };
+    /** @private */
+    Connector.prototype.getUMLObjectFlow = function () {
+        if (this.annotations) {
+            for (var i = 0; i < this.annotations.length; i++) {
+                this.annotations[i].content = '[' + this.annotations[i].content + ']';
+            }
+        }
+    };
+    /** @private */
+    Connector.prototype.getUMLExceptionFlow = function (segment) {
+        this.type = 'Straight';
+        var height = (this.shape.exceptionFlowHeight) / 2;
+        var midPt = { x: (this.targetPoint.x + this.sourcePoint.x) / 2, y: (this.targetPoint.y + this.sourcePoint.y) / 2 };
+        var xDist = midPt.x - this.sourcePoint.x;
+        var yDist = midPt.y - this.sourcePoint.y;
+        var dist = Math.sqrt(xDist * xDist + yDist * yDist);
+        var fractionOfTotal = (height) / dist;
+        var midPt2 = { x: midPt.x - xDist * fractionOfTotal, y: midPt.y - yDist * fractionOfTotal };
+        var midPt1 = { x: midPt.x + xDist * fractionOfTotal, y: midPt.y + yDist * fractionOfTotal };
+        var matrix = identityMatrix();
+        rotateMatrix(matrix, 315, midPt.x, midPt.y);
+        this.segments = [];
+        var segments = new StraightSegment(this, 'segments', { type: 'Straight', point: transformPointByMatrix(matrix, midPt1) }, true);
+        (this.segments).push(segments);
+        segments = new StraightSegment(this, 'segments', { type: 'Straight', point: transformPointByMatrix(matrix, midPt2) }, true);
+        (this.segments).push(segments);
+        segment = this.getSegmentElement(this, segment);
+    };
     Connector.prototype.getBpmnAssociationFlow = function () {
@@ -526,5 +755,14 @@ if ((this.shape.association) === 'Default') {
     /** @private */
-    Connector.prototype.getAnnotationElement = function (annotation, points, bounds, getDescription) {
+    Connector.prototype.getAnnotationElement = function (annotation, points, bounds, getDescription, diagramId) {
         annotation.id = annotation.id || randomId();
-        var textele = new TextElement();
+        var textele;
+        if (diagramId && annotation.template) {
+            textele = new DiagramHtmlElement(this.id, diagramId, annotation.id);
+            textele.content = annotation.template;
+        }
+        else {
+            textele = new TextElement();
+            textele.content = annotation.content;
+            textele.style.textOverflow = 'Wrap';
+        }
         textele.constraints = annotation.constraints;
@@ -537,3 +775,3 @@ textele.visible = annotation.visibility;
         textele.height = annotation.height;
-        if (bounds.width !== undefined) {
+        if (bounds.width !== undefined && !annotation.template) {
             textele.width = (annotation.width || bounds.width) - annotation.margin.left - annotation.margin.right;
@@ -549,3 +787,2 @@ }
         }
-        textele.content = annotation.content;
         textele.style = annotation.style;
@@ -560,3 +797,2 @@ // tslint:disable-next-line:no-any
         this.updateAnnotation(annotation, points, bounds, textele);
-        textele.style.textOverflow = 'Wrap';
         return textele;
@@ -573,3 +809,5 @@ };
         var pivotPoint = { x: 0, y: 0 };
-        textElement.refreshTextElement();
+        if (!(textElement instanceof DiagramHtmlElement)) {
+            textElement.refreshTextElement();
+        }
         textElement.width = (annotation.width || bounds.width);
@@ -772,2 +1010,3 @@ getPointloop = getAnnotationPosition(points, annotation, bounds);
         element.data = getPath;
+        element.canMeasurePath = true;
         element.width = size.width;
@@ -921,2 +1160,7 @@ element.height = size.height;
                 break;
+            case 'UmlActivity':
+                if (connector.shape.flow === 'Exception') {
+                    this.getUMLExceptionFlow(connector.wrapper.children[0]);
+                }
+                break;
         }
@@ -923,0 +1167,0 @@ };

src/diagram/objects/context-menu.d.ts

@@ -68,2 +68,3 @@ import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
     private contextMenuOpen;
+    private BeforeItemRender;
     private contextMenuItemClick;
@@ -70,0 +71,0 @@ private contextMenuOnClose;

src/diagram/objects/context-menu.js

 import { remove } from '@syncfusion/ej2-base';
 import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
-import { contextMenuClick, contextMenuOpen } from '../enum/enum';
+import { contextMenuClick, contextMenuOpen, contextMenuBeforeItemRender } from '../enum/enum';
 import { createHtmlElement } from '../../diagram/utility/dom-util';
@@ -79,2 +79,3 @@ /**
             onOpen: this.contextMenuOpen.bind(this),
+            beforeItemRender: this.BeforeItemRender.bind(this),
             onClose: this.contextMenuOnClose.bind(this),
@@ -128,2 +129,5 @@ cssClass: 'e-diagram-menu'
     };
+    DiagramContextMenu.prototype.BeforeItemRender = function (args) {
+        this.parent.trigger(contextMenuBeforeItemRender, args);
+    };
     DiagramContextMenu.prototype.contextMenuItemClick = function (args) {
@@ -130,0 +134,0 @@ document.getElementById(this.parent.element.id + 'content').focus();

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

@@ -332,1 +332,8 @@ import { Container } from '../../core/containers/container';
 }
+/** @private */
+export interface StackEntryObject {
+    targetIndex?: number;
+    target?: NodeModel;
+    sourceIndex?: number;
+    source?: NodeModel;
+}

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

@@ -9,2 +9,4 @@ import { MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-navigations';
 import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
+import { ConnectorModel } from '../connector-model';
+import { NodeModel } from '../node-model';
 /**
@@ -185,1 +187,21 @@ * Defines the context menu item model.
 }
+/** @private */
+export interface IDataSource {
+    dataSource: object;
+    isBinding: boolean;
+    nodes: NodeModel[];
+    connectors: ConnectorModel[];
+}
+/** @private */
+export interface IFields {
+    id: string;
+    sourceID: string;
+    targetID: string;
+    sourcePointX: number;
+    sourcePointY: number;
+    targetPointX: number;
+    targetPointY: number;
+    crudAction: {
+        customFields: string[];
+    };
+}

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, Scale, ImageAlignment } 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 } from '../enum/enum';import { MarginModel } from '../core/appearance-model';import { LayoutModel } from '../layout/layout-base-model';import { checkPortRestriction } 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 { 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 } 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 } 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 {NodeBaseModel} from "./node-base-model";
@@ -19,2 +19,3 @@
      * * HTML - Sets the type of the node as HTML
+     * * UMLActivity - Sets the type of the node as UMLActivity
      * @default 'Basic'
@@ -82,3 +83,3 @@ */
      * shape: { scale: 'Stretch', 
-     *   type: 'Native', content: '<g><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
+     *   type: 'Native', content: '<g><path d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
      * 'L0,90l7.975-23.522' +
@@ -94,3 +95,3 @@ * 'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
      * 'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
-     * 'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z">'+
+     * 'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z'>'+
      * '</path></g>',
@@ -142,3 +143,3 @@ *        }
      * shape: { type: 'HTML', 
-     * content: '<div style="background:red;height:100%;width:100%;"><input type="button" value="{{:value}}" /></div>' }
+     * content: '<div style='background:red;height:100%;width:100%;'><input type='button' value='{{:value}}' /></div>' }
      * }];
@@ -996,2 +997,279 @@ * let diagram: Diagram = new Diagram({
 /**
+ * Interface for a class UmlActivityShape
+ */
+export interface UmlActivityShapeModel extends ShapeModel{
+
+    /**
+     * Defines the type of node shape
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let shape: UmlActivityShapeModel = { type: 'UMLActivity', shape: 'Action' };
+     * let nodes: NodeModel[] = [{
+     * id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: shape
+     * }];
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * nodes : nodes,
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default 'Basic'
+     */
+    type?: Shapes;
+
+    /**
+     * Defines the type of the UMLActivity shape
+     * * Action - Sets the type of the UMLActivity Shape as Action
+     * * Decision - Sets the type of the UMLActivity Shape as Decision
+     * * MergeNode - Sets the type of the UMLActivity Shape as MergeNode
+     * * InitialNode - Sets the type of the UMLActivity Shape as InitialNode
+     * * FinalNode - Sets the type of the UMLActivity Shape as FinalNode
+     * * ForkNode - Sets the type of the UMLActivity Shape as ForkNode
+     * * JoinNode - Sets the type of the UMLActivity Shape as JoinNode
+     * * TimeEvent - Sets the type of the UMLActivity Shape as TimeEvent
+     * * AcceptingEvent - Sets the type of the UMLActivity Shape as AcceptingEvent
+     * * SendSignal - Sets the type of the UMLActivity Shape as SendSignal
+     * * ReceiveSignal - Sets the type of the UMLActivity Shape as ReceiveSignal
+     * * StructuredNode - Sets the type of the UMLActivity Shape as StructuredNode
+     * * Note - Sets the type of the UMLActivity Shape as Note
+     * @default 'Rectangle'
+     * @IgnoreSingular
+     */
+    shape?: UmlActivityShapes;
+
+}
+
+/**
+ * Interface for a class MethodArguments
+ */
+export interface MethodArgumentsModel {
+
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name?: string;
+
+    /**
+     * Defines the type of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    type?: string;
+
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style?: ShapeStyleModel | TextStyleModel;
+
+}
+
+/**
+ * Interface for a class UmlClassAttribute
+ */
+export interface UmlClassAttributeModel extends MethodArgumentsModel{
+
+    /**
+     * Defines the type of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    scope?: UmlScope;
+
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator?: boolean;
+
+}
+
+/**
+ * Interface for a class UmlClassMethod
+ */
+export interface UmlClassMethodModel extends UmlClassAttributeModel{
+
+    /**
+     * Defines the type of the arguments
+     * @default ''
+     * @IgnoreSingular
+     */
+
+    parameters?: MethodArgumentsModel[];
+
+}
+
+/**
+ * Interface for a class UmlClass
+ */
+export interface UmlClassModel {
+
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name?: string;
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+
+    attributes?: UmlClassAttributeModel[];
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+
+    methods?: UmlClassMethodModel[];
+
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style?: TextStyleModel;
+
+}
+
+/**
+ * Interface for a class UmlInterface
+ */
+export interface UmlInterfaceModel extends UmlClassModel{
+
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator?: boolean;
+
+}
+
+/**
+ * Interface for a class UmlEnumerationMember
+ */
+export interface UmlEnumerationMemberModel {
+
+    /**
+     * Defines the value of the member
+     * @default ''
+     * @IgnoreSingular
+     */
+    name?: string;
+
+    /**
+     * Defines the value of the member
+     * @default ''
+     * @IgnoreSingular
+     */
+    value?: string;
+
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator?: boolean;
+
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style?: ShapeStyleModel | TextStyleModel;
+
+}
+
+/**
+ * Interface for a class UmlEnumeration
+ */
+export interface UmlEnumerationModel {
+
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name?: string;
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+
+    members?: UmlEnumerationMemberModel[];
+
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style?: ShapeStyleModel | TextStyleModel;
+
+}
+
+/**
+ * Interface for a class UmlClassifierShape
+ */
+export interface UmlClassifierShapeModel extends ShapeModel{
+
+    /**
+     * Defines the type of node shape
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let shape: UmlActivityShapeModel = { type: 'UMLActivity', shape: 'Action' };
+     * let nodes: NodeModel[] = [{
+     * id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: shape
+     * }];
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * nodes : nodes,
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default 'Basic'
+     */
+    type?: Shapes;
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    class?: UmlClassModel;
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    interface?: UmlInterfaceModel;
+
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    enumeration?: UmlEnumerationModel;
+
+    /**
+     * Defines the type of classifier
+     * @default 'Class'
+     * @IgnoreSingular
+     */
+    classifier?: ClassifierShape;
+
+}
+
+/**
  * Interface for a class Node
@@ -1109,3 +1387,3 @@ */
      */
-    shape?: ShapeModel | FlowShapeModel | BasicShapeModel | ImageModel | PathModel | TextModel | BpmnShapeModel | NativeModel | HtmlModel;
+    shape?: ShapeModel | FlowShapeModel | BasicShapeModel | ImageModel | PathModel | TextModel | BpmnShapeModel | NativeModel | HtmlModel | UmlActivityShapeModel | UmlClassifierShapeModel | SwimLaneModel;
 
@@ -1165,2 +1443,274 @@ /**
 
+    /**
+     * Defines the type of the container
+     * @aspDefaultValueIgnore
+     * @default null
+     */
+
+    container?: ChildContainerModel;
+
+    /**
+     * Sets the horizontalAlignment of the node
+     * @default 'Stretch'
+     */
+    horizontalAlignment?: HorizontalAlignment;
+
+    /**
+     * Sets the verticalAlignment of the node
+     * @default 'Stretch'
+     */
+    verticalAlignment?: VerticalAlignment;
+
+    /**
+     * Used to define the rows for the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+
+    rows?: RowDefinition[];
+
+    /**
+     * Used to define the column for the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+
+    columns?: ColumnDefinition[];
+
+    /**
+     * Used to define a index of row in the grid
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+
+    rowIndex?: number;
+
+    /**
+     * Used to define a index of column in the grid
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+
+    columnIndex?: number;
+
+    /**
+     * Merge the row use the property in the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    rowSpan?: number;
+
+    /**
+     * Merge the column use the property in the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    columnSpan?: number;
+
+}
+
+/**
+ * Interface for a class Header
+ */
+export interface HeaderModel {
+
+    /**
+     * Sets the id of the header
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Sets the content of the header
+     * @default ''
+     */
+    content?: Annotation;
+
+    /**
+     * Sets the style of the header
+     * @default ''
+     */
+    style?: TextStyleModel;
+
+    /**
+     * Sets the height of the header
+     * @default 25
+     */
+    height?: number;
+
+    /**
+     * Sets the width of the header
+     * @default 25
+     */
+    width?: number;
+
+}
+
+/**
+ * Interface for a class Lane
+ */
+export interface LaneModel {
+
+    /**
+     * Sets the id of the lane
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Sets style of the lane
+     * @default ''
+     */
+    style?: ShapeStyleModel;
+
+    /**
+     * Defines the collection of child nodes
+     * @default []
+     */
+    childNodes?: NodeModel[];
+
+    /**
+     * Defines the height of the phase
+     * @default 25
+     */
+    height?: number;
+
+    /**
+     * Defines the height of the phase
+     * @default 25
+     */
+    width?: number;
+
+    /**
+     * Defines the collection of header in the phase.
+     * @default undefined
+     */
+    header?: HeaderModel;
+
+}
+
+/**
+ * Interface for a class Phase
+ */
+export interface PhaseModel {
+
+    /**
+     * Sets the id of the phase
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Sets the style of the lane
+     * @default ''
+     */
+    style?: ShapeStyleModel;
+
+    /**
+     * Sets the header collection of the phase
+     * @default 'undefined'
+     */
+    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
+     * @default 100
+     */
+    offset?: number;
+
+}
+
+/**
+ * Interface for a class SwimLane
+ */
+export interface SwimLaneModel extends ShapeModel{
+
+    /**
+     * Defines the type of node shape.
+     * @default 'Basic'
+     */
+    type?: Shapes;
+
+    /**
+     * Defines the size of phase.
+     * @default '10'
+     */
+    phaseSize?: number;
+
+    /**
+     * Defines the collection of phases.
+     * @default undefined
+     */
+    phases?: PhaseModel[];
+
+    /**
+     * Defines the orientation of the swimLane
+     * @default 'Horizontal'
+     */
+    orientation?: Orientation;
+
+    /**
+     * Defines the collection of lanes
+     * @default undefined
+     */
+    lanes?: LaneModel[];
+
+    /**
+     * Defines the collection of header
+     * @default undefined
+     */
+    header?: HeaderModel;
+
+    /**
+     * Defines the style of shape
+     * @default ''
+     */
+    lineStyle?: ShapeStyleModel | TextStyleModel;
+
+    /**
+     * Defines the whether the shape is a lane or not
+     * @default false
+     */
+    isLane?: boolean;
+
+    /**
+     * Defines the whether the shape is a phase or not
+     * @default false
+     */
+    isPhase?: boolean;
+
+}
+
+/**
+ * Interface for a class ChildContainer
+ * @private
+ */
+export interface ChildContainerModel {
+
+    /**
+     * Defines the type of the container
+     * @aspDefaultValueIgnore
+     * @default Canvas
+     */
+    type?: ContainerTypes;
+
+    /**
+     * Defines the type of the swimLane orientation.
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    orientation?: Orientation;
+
 }

src/diagram/objects/node.d.ts

@@ -6,3 +6,3 @@ /// <reference path="node-base-model.d.ts" />
 import { PointModel } from '../primitives/point-model';
-import { Shapes, BasicShapes, FlowShapes, Scale, ImageAlignment } from '../enum/enum';
+import { Shapes, BasicShapes, FlowShapes, UmlActivityShapes, Scale, ImageAlignment, Status } from '../enum/enum';
 import { IElement } from './interface/IElement';
@@ -17,4 +17,5 @@ import { Container } from '../core/containers/container';
 import { BpmnDataObjects, BpmnTasks, BpmnSubProcessTypes, BpmnLoops } from '../enum/enum';
-import { BpmnBoundary, BpmnActivities } from '../enum/enum';
+import { BpmnBoundary, BpmnActivities, UmlScope } from '../enum/enum';
 import { MarginModel } from '../core/appearance-model';
+import { UmlActivityShapeModel, MethodArgumentsModel, UmlClassModel } from './node-model';
 import { BpmnEventModel, BpmnSubEventModel, BpmnAnnotationModel, BpmnActivityModel } from './node-model';
@@ -26,4 +27,8 @@ import { BpmnTaskModel, BpmnSubProcessModel, BpmnGatewayModel } from './node-model';
 import { NodeBase } from './node-base';
-import { BpmnTransactionSubProcessModel } from '../objects/node-model';
+import { NodeModel, BpmnTransactionSubProcessModel, SwimLaneModel, LaneModel, HeaderModel, PhaseModel } from '../objects/node-model';
 import { Stretch } from '../enum/enum';
+import { ChildContainerModel, UmlClassMethodModel, UmlClassAttributeModel, UmlClassifierShapeModel } from './node-model';
+import { UmlEnumerationModel, UmlInterfaceModel, UmlEnumerationMemberModel } from './node-model';
+import { RowDefinition, ColumnDefinition } from '../core/containers/grid';
+import { Orientation, ContainerTypes, ClassifierShape } from '../enum/enum';
 /**
@@ -43,2 +48,3 @@ * Defines the behavior of default shape
      * * HTML - Sets the type of the node as HTML
+     * * UMLActivity - Sets the type of the node as UMLActivity
      * @default 'Basic'
@@ -98,3 +104,3 @@ */
      * shape: { scale: 'Stretch',
-     *   type: 'Native', content: '<g><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
+     *   type: 'Native', content: '<g><path d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
      * 'L0,90l7.975-23.522' +
@@ -110,3 +116,3 @@ * 'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
      * 'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
-     * 'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z">'+
+     * 'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z'>'+
      * '</path></g>',
@@ -153,3 +159,3 @@ *        }
      * shape: { type: 'HTML',
-     * content: '<div style="background:red;height:100%;width:100%;"><input type="button" value="{{:value}}" /></div>' }
+     * content: '<div style='background:red;height:100%;width:100%;'><input type='button' value='{{:value}}' /></div>' }
      * }];
@@ -945,2 +951,232 @@ * let diagram: Diagram = new Diagram({
 /**
+ * Defines the behavior of the UMLActivity shape
+ */
+export declare class UmlActivityShape extends Shape {
+    /**
+     * Defines the type of node shape
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let shape: UmlActivityShapeModel = { type: 'UMLActivity', shape: 'Action' };
+     * let nodes: NodeModel[] = [{
+     * id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: shape
+     * }];
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * nodes : nodes,
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default 'Basic'
+     */
+    type: Shapes;
+    /**
+     * Defines the type of the UMLActivity shape
+     * * Action - Sets the type of the UMLActivity Shape as Action
+     * * Decision - Sets the type of the UMLActivity Shape as Decision
+     * * MergeNode - Sets the type of the UMLActivity Shape as MergeNode
+     * * InitialNode - Sets the type of the UMLActivity Shape as InitialNode
+     * * FinalNode - Sets the type of the UMLActivity Shape as FinalNode
+     * * ForkNode - Sets the type of the UMLActivity Shape as ForkNode
+     * * JoinNode - Sets the type of the UMLActivity Shape as JoinNode
+     * * TimeEvent - Sets the type of the UMLActivity Shape as TimeEvent
+     * * AcceptingEvent - Sets the type of the UMLActivity Shape as AcceptingEvent
+     * * SendSignal - Sets the type of the UMLActivity Shape as SendSignal
+     * * ReceiveSignal - Sets the type of the UMLActivity Shape as ReceiveSignal
+     * * StructuredNode - Sets the type of the UMLActivity Shape as StructuredNode
+     * * Note - Sets the type of the UMLActivity Shape as Note
+     * @default 'Rectangle'
+     * @IgnoreSingular
+     */
+    shape: UmlActivityShapes;
+}
+/**
+ * Defines the behavior of the uml class method
+ */
+export declare class MethodArguments extends ChildProperty<MethodArguments> {
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name: string;
+    /**
+     * Defines the type of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    type: string;
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style: ShapeStyleModel | TextStyleModel;
+}
+/**
+ * Defines the behavior of the uml class attributes
+ */
+export declare class UmlClassAttribute extends MethodArguments {
+    /**
+     * Defines the type of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    scope: UmlScope;
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator: boolean;
+}
+/**
+ * Defines the behavior of the uml class method
+ */
+export declare class UmlClassMethod extends UmlClassAttribute {
+    /**
+     * Defines the type of the arguments
+     * @default ''
+     * @IgnoreSingular
+     */
+    parameters: MethodArgumentsModel[];
+}
+/**
+ * Defines the behavior of the uml class shapes
+ */
+export declare class UmlClass extends ChildProperty<UmlClass> {
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name: string;
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    attributes: UmlClassAttributeModel[];
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    methods: UmlClassMethodModel[];
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style: TextStyleModel;
+}
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+export declare class UmlInterface extends UmlClass {
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator: boolean;
+}
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+export declare class UmlEnumerationMember extends ChildProperty<UmlEnumerationMember> {
+    /**
+     * Defines the value of the member
+     * @default ''
+     * @IgnoreSingular
+     */
+    name: string;
+    /**
+     * Defines the value of the member
+     * @default ''
+     * @IgnoreSingular
+     */
+    value: string;
+    /**
+     * Defines the separator of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    isSeparator: boolean;
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style: ShapeStyleModel | TextStyleModel;
+}
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+export declare class UmlEnumeration extends ChildProperty<UmlEnumeration> {
+    /**
+     * Defines the name of the attributes
+     * @default ''
+     * @IgnoreSingular
+     */
+    name: string;
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    members: UmlEnumerationMemberModel[];
+    /**
+     * Sets the shape style of the node
+     * @default new ShapeStyle()
+     * @aspType object
+     */
+    style: ShapeStyleModel | TextStyleModel;
+}
+/**
+ * Defines the behavior of the UMLActivity shape
+ */
+export declare class UmlClassifierShape extends Shape {
+    /**
+     * Defines the type of node shape
+     * ```html
+     * <div id='diagram'></div>
+     * ```
+     * ```typescript
+     * let shape: UmlActivityShapeModel = { type: 'UMLActivity', shape: 'Action' };
+     * let nodes: NodeModel[] = [{
+     * id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: shape
+     * }];
+     * let diagram: Diagram = new Diagram({
+     * ...
+     * nodes : nodes,
+     * ...
+     * });
+     * diagram.appendTo('#diagram');
+     * ```
+     * @default 'Basic'
+     */
+    type: Shapes;
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    class: UmlClassModel;
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    interface: UmlInterfaceModel;
+    /**
+     * Defines the text of the bpmn annotation collection
+     * @default 'None'
+     */
+    enumeration: UmlEnumerationModel;
+    /**
+     * Defines the type of classifier
+     * @default 'Class'
+     * @IgnoreSingular
+     */
+    classifier: ClassifierShape;
+}
+/**
  * Defines the behavior of nodes
@@ -1041,3 +1277,3 @@ */
      */
-    shape: ShapeModel | FlowShapeModel | BasicShapeModel | ImageModel | PathModel | TextModel | BpmnShapeModel | NativeModel | HtmlModel;
+    shape: ShapeModel | FlowShapeModel | BasicShapeModel | ImageModel | PathModel | TextModel | BpmnShapeModel | NativeModel | HtmlModel | UmlActivityShapeModel | UmlClassifierShapeModel | SwimLaneModel;
     /**
@@ -1092,3 +1328,59 @@ * Sets or gets the UI of a node
     children: string[];
+    /**
+     * Defines the type of the container
+     * @aspDefaultValueIgnore
+     * @default null
+     */
+    container: ChildContainerModel;
+    /**
+     * Sets the horizontalAlignment of the node
+     * @default 'Stretch'
+     */
+    horizontalAlignment: HorizontalAlignment;
+    /**
+     * Sets the verticalAlignment of the node
+     * @default 'Stretch'
+     */
+    verticalAlignment: VerticalAlignment;
+    /**
+     * Used to define the rows for the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    rows: RowDefinition[];
+    /**
+     * Used to define the column for the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    columns: ColumnDefinition[];
+    /**
+     * Used to define a index of row in the grid
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    rowIndex: number;
+    /**
+     * Used to define a index of column in the grid
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    columnIndex: number;
+    /**
+     * Merge the row use the property in the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    rowSpan: number;
+    /**
+     * Merge the column use the property in the grid container
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    columnSpan: number;
     /** @private */
+    isCanvasUpdate: boolean;
+    /** @private */
+    status: Status;
+    /** @private */
     parentId: string;
@@ -1098,2 +1390,4 @@ /** @private */
     /** @private */
+    umlIndex: number;
+    /** @private */
     outEdges: string[];
@@ -1103,2 +1397,8 @@ /** @private */
     /** @private */
+    isHeader: boolean;
+    /** @private */
+    isLane: boolean;
+    /** @private */
+    isPhase: boolean;
+    /** @private */
     readonly actualSize: Size;
@@ -1119,9 +1419,177 @@ constructor(parent: any, propName: string, defaultValue: Object, isArray?: boolean);
     /** @private */
-    initAnnotations(accessibilityContent: Function | string, container: Container): void;
+    initAnnotations(accessibilityContent: Function | string, container: Container, diagramId: string, virtualize?: boolean): void;
     /** @private */
     initPortWrapper(ports: Port): DiagramElement;
     /** @private */
-    initAnnotationWrapper(annotation: Annotation): DiagramElement;
+    initAnnotationWrapper(annotation: Annotation, diagramId?: string, virtualize?: boolean): DiagramElement;
     private initIconContainer;
     private initIconSymbol;
 }
+/**
+ * Defines the behavior of header in swimLane
+ */
+export declare class Header extends ChildProperty<Shape> {
+    /**
+     * Sets the id of the header
+     * @default ''
+     */
+    id: string;
+    /**
+     * Sets the content of the header
+     * @default ''
+     */
+    content: Annotation;
+    /**
+     * Sets the style of the header
+     * @default ''
+     */
+    style: TextStyleModel;
+    /**
+     * Sets the height of the header
+     * @default 25
+     */
+    height: number;
+    /**
+     * Sets the width of the header
+     * @default 25
+     */
+    width: number;
+}
+/**
+ * Defines the behavior of lane in swimLane
+ */
+export declare class Lane extends ChildProperty<Shape> {
+    /**
+     * Sets the id of the lane
+     * @default ''
+     */
+    id: string;
+    /**
+     * Sets style of the lane
+     * @default ''
+     */
+    style: ShapeStyleModel;
+    /**
+     * Defines the collection of child nodes
+     * @default []
+     */
+    childNodes: NodeModel[];
+    /**
+     * Defines the height of the phase
+     * @default 25
+     */
+    height: number;
+    /**
+     * Defines the height of the phase
+     * @default 25
+     */
+    width: number;
+    /**
+     * Defines the collection of header in the phase.
+     * @default undefined
+     */
+    header: HeaderModel;
+}
+/**
+ * Defines the behavior of phase in swimLane
+ */
+export declare class Phase extends ChildProperty<Shape> {
+    /**
+     * Sets the id of the phase
+     * @default ''
+     */
+    id: string;
+    /**
+     * Sets the style of the lane
+     * @default ''
+     */
+    style: ShapeStyleModel;
+    /**
+     * Sets the header collection of the phase
+     * @default 'undefined'
+     */
+    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
+     * @default 100
+     */
+    offset: number;
+}
+/**
+ * Defines the behavior of swimLane shape
+ */
+export declare class SwimLane extends Shape {
+    /**
+     * Defines the type of node shape.
+     * @default 'Basic'
+     */
+    type: Shapes;
+    /**
+     * Defines the size of phase.
+     * @default '10'
+     */
+    phaseSize: number;
+    /**
+     * Defines the collection of phases.
+     * @default undefined
+     */
+    phases: PhaseModel[];
+    /**
+     * Defines the orientation of the swimLane
+     * @default 'Horizontal'
+     */
+    orientation: Orientation;
+    /**
+     * Defines the collection of lanes
+     * @default undefined
+     */
+    lanes: LaneModel[];
+    /**
+     * Defines the collection of header
+     * @default undefined
+     */
+    header: HeaderModel;
+    /**
+     * Defines the style of shape
+     * @default ''
+     */
+    lineStyle: ShapeStyleModel | TextStyleModel;
+    /**
+     * Defines the whether the shape is a lane or not
+     * @default false
+     */
+    isLane: boolean;
+    /**
+     * Defines the whether the shape is a phase or not
+     * @default false
+     */
+    isPhase: boolean;
+}
+/**
+ * Defines the behavior of container
+ */
+/** @private */
+export declare class ChildContainer {
+    /**
+     * Defines the type of the container
+     * @aspDefaultValueIgnore
+     * @default Canvas
+     */
+    type: ContainerTypes;
+    /**
+     * Defines the type of the swimLane orientation.
+     * @aspDefaultValueIgnore
+     * @default undefined
+     */
+    orientation: Orientation;
+}

src/diagram/objects/node.js

@@ -34,7 +34,7 @@ var __extends = (this && this.__extends) || (function () {
 import { PointPort } from './port';
-import { ShapeAnnotation } from './annotation';
+import { Annotation, ShapeAnnotation } from './annotation';
 import { getPortShape, getIconShape } from './dictionary/common';
 import { getFlowShape } from './dictionary/flow-shapes';
 import { NodeConstraints } from '../enum/enum';
-import { checkPortRestriction } from './../utility/diagram-util';
+import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes } from './../utility/diagram-util';
 import { randomId, getFunction } from './../utility/base-util';
@@ -47,2 +47,6 @@ import { NodeBase } from './node-base';
 import { DiagramHtmlElement } from '../core/elements/html-element';
+import { StackPanel } from '../core/containers/stack-panel';
+import { GridPanel } from '../core/containers/grid';
+import { getULMClassifierShapes } from '../utility/uml-util';
+import { initSwimLane } from '../interaction/container-interaction';
 var getShapeType = function (obj) {
@@ -66,2 +70,8 @@ switch (obj.type) {
             return Html;
+        case 'UmlActivity':
+            return UmlActivityShape;
+        case 'UmlClassifier':
+            return UmlClassifierShape;
+        case 'SwimLane':
+            return SwimLane;
         default:
@@ -481,2 +491,176 @@ return BasicShape;
 /**
+ * Defines the behavior of the UMLActivity shape
+ */
+var UmlActivityShape = /** @class */ (function (_super) {
+    __extends(UmlActivityShape, _super);
+    function UmlActivityShape() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('UmlActivity')
+    ], UmlActivityShape.prototype, "type", void 0);
+    __decorate([
+        Property('Action')
+    ], UmlActivityShape.prototype, "shape", void 0);
+    return UmlActivityShape;
+}(Shape));
+export { UmlActivityShape };
+/**
+ * Defines the behavior of the uml class method
+ */
+var MethodArguments = /** @class */ (function (_super) {
+    __extends(MethodArguments, _super);
+    function MethodArguments() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], MethodArguments.prototype, "name", void 0);
+    __decorate([
+        Property('')
+    ], MethodArguments.prototype, "type", void 0);
+    __decorate([
+        Complex({}, TextStyle)
+    ], MethodArguments.prototype, "style", void 0);
+    return MethodArguments;
+}(ChildProperty));
+export { MethodArguments };
+/**
+ * Defines the behavior of the uml class attributes
+ */
+var UmlClassAttribute = /** @class */ (function (_super) {
+    __extends(UmlClassAttribute, _super);
+    function UmlClassAttribute() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Public')
+    ], UmlClassAttribute.prototype, "scope", void 0);
+    __decorate([
+        Property(false)
+    ], UmlClassAttribute.prototype, "isSeparator", void 0);
+    return UmlClassAttribute;
+}(MethodArguments));
+export { UmlClassAttribute };
+/**
+ * Defines the behavior of the uml class method
+ */
+var UmlClassMethod = /** @class */ (function (_super) {
+    __extends(UmlClassMethod, _super);
+    function UmlClassMethod() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Collection([], MethodArguments)
+    ], UmlClassMethod.prototype, "parameters", void 0);
+    return UmlClassMethod;
+}(UmlClassAttribute));
+export { UmlClassMethod };
+/**
+ * Defines the behavior of the uml class shapes
+ */
+var UmlClass = /** @class */ (function (_super) {
+    __extends(UmlClass, _super);
+    function UmlClass() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], UmlClass.prototype, "name", void 0);
+    __decorate([
+        Collection([], UmlClassAttribute)
+    ], UmlClass.prototype, "attributes", void 0);
+    __decorate([
+        Collection([], UmlClassMethod)
+    ], UmlClass.prototype, "methods", void 0);
+    __decorate([
+        Complex({}, TextStyle)
+    ], UmlClass.prototype, "style", void 0);
+    return UmlClass;
+}(ChildProperty));
+export { UmlClass };
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+var UmlInterface = /** @class */ (function (_super) {
+    __extends(UmlInterface, _super);
+    function UmlInterface() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], UmlInterface.prototype, "isSeparator", void 0);
+    return UmlInterface;
+}(UmlClass));
+export { UmlInterface };
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+var UmlEnumerationMember = /** @class */ (function (_super) {
+    __extends(UmlEnumerationMember, _super);
+    function UmlEnumerationMember() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], UmlEnumerationMember.prototype, "name", void 0);
+    __decorate([
+        Property('')
+    ], UmlEnumerationMember.prototype, "value", void 0);
+    __decorate([
+        Property(false)
+    ], UmlEnumerationMember.prototype, "isSeparator", void 0);
+    __decorate([
+        Complex({}, TextStyle)
+    ], UmlEnumerationMember.prototype, "style", void 0);
+    return UmlEnumerationMember;
+}(ChildProperty));
+export { UmlEnumerationMember };
+/**
+ * Defines the behavior of the uml interface shapes
+ */
+var UmlEnumeration = /** @class */ (function (_super) {
+    __extends(UmlEnumeration, _super);
+    function UmlEnumeration() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], UmlEnumeration.prototype, "name", void 0);
+    __decorate([
+        Collection([], UmlEnumerationMember)
+    ], UmlEnumeration.prototype, "members", void 0);
+    __decorate([
+        Complex({}, TextStyle)
+    ], UmlEnumeration.prototype, "style", void 0);
+    return UmlEnumeration;
+}(ChildProperty));
+export { UmlEnumeration };
+/**
+ * Defines the behavior of the UMLActivity shape
+ */
+var UmlClassifierShape = /** @class */ (function (_super) {
+    __extends(UmlClassifierShape, _super);
+    function UmlClassifierShape() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('UmlClassifier')
+    ], UmlClassifierShape.prototype, "type", void 0);
+    __decorate([
+        Complex({}, UmlClass)
+    ], UmlClassifierShape.prototype, "class", void 0);
+    __decorate([
+        Complex({}, UmlInterface)
+    ], UmlClassifierShape.prototype, "interface", void 0);
+    __decorate([
+        Complex({}, UmlEnumeration)
+    ], UmlClassifierShape.prototype, "enumeration", void 0);
+    __decorate([
+        Property('Class')
+    ], UmlClassifierShape.prototype, "classifier", void 0);
+    return UmlClassifierShape;
+}(Shape));
+export { UmlClassifierShape };
+/**
  * Defines the behavior of nodes
@@ -490,2 +674,6 @@ */
         /** @private */
+        _this.isCanvasUpdate = false;
+        /** @private */
+        _this.status = 'None';
+        /** @private */
         _this.parentId = '';
@@ -495,7 +683,16 @@ /** @private */
         /** @private */
+        _this.umlIndex = -1;
+        /** @private */
         _this.outEdges = [];
         /** @private */
         _this.inEdges = [];
+        /** @private */
+        _this.isHeader = false;
+        /** @private */
+        _this.isLane = false;
+        /** @private */
+        _this.isPhase = false;
+        var nodeDefault;
         if (_this.children && _this.children.length > 0) {
-            var nodeDefault = defaultValue;
+            nodeDefault = defaultValue;
             if (!nodeDefault.style || !nodeDefault.style.fill) {
@@ -508,2 +705,5 @@ _this.style.fill = 'transparent';
         }
+        if (_this.shape && _this.shape.type === 'UmlActivity') {
+            setUMLActivityDefaults(defaultValue, _this);
+        }
         return _this;
@@ -530,3 +730,9 @@ }
     Node.prototype.init = function (diagram) {
-        var content = new DiagramElement();
+        var content;
+        if (this.shape.type != 'SwimLane') {
+            content = new DiagramElement();
+        }
+        else {
+            content = new GridPanel();
+        }
         var textStyle;
@@ -581,2 +787,6 @@ var changedProperties = 'changedProperties';
                 break;
+            case 'UmlActivity':
+                var umlactivityshape = new PathElement();
+                content = getUMLActivityShapes(umlactivityshape, content, this);
+                break;
             case 'Bpmn':
@@ -612,2 +822,14 @@ if (diagram.bpmnModule) {
                 break;
+            case 'UmlClassifier':
+                //   let umlClassifierShape: StackPanel = new StackPanel();
+                content = getULMClassifierShapes(content, this, diagram);
+                break;
+            case 'SwimLane':
+                content.cellStyle.fill = "none";
+                content.cellStyle.strokeColor = "none";
+                this.container = { type: 'Grid', orientation: this.shape.orientation };
+                content.id = this.id;
+                this.container.orientation = this.shape.orientation;
+                initSwimLane(content, diagram, this);
+                break;
         }
@@ -647,4 +869,4 @@ content.id = this.id + '_content';
         }
-        if (this.shape.type !== 'Bpmn' || this.shape.shape === 'Message' ||
-            this.shape.shape === 'DataSource') {
+        if ((this.shape.type !== 'Bpmn' || this.shape.shape === 'Message' ||
+            this.shape.shape === 'DataSource') && ((this.shape.type !== 'UmlActivity' || this.shape.shape !== 'FinalNode'))) {
             if (this.shape.type !== 'Text') {
@@ -663,3 +885,20 @@ content.style = this.style;
         // Creates canvas element
-        var canvas = this.children ? new Container() : new Canvas();
+        var canvas;
+        if (!this.container) {
+            canvas = this.children ? new Container() : new Canvas();
+        }
+        else {
+            switch (this.container.type) {
+                case 'Canvas':
+                    canvas = new Canvas();
+                    break;
+                case 'Stack':
+                    canvas = new StackPanel();
+                    break;
+                case 'Grid':
+                    canvas = new GridPanel();
+                    canvas.setDefinitions(this.rows, this.columns);
+                    break;
+            }
+        }
         canvas.id = this.id;
@@ -669,2 +908,11 @@ canvas.offsetX = this.offsetX;
         canvas.visible = this.visible;
+        canvas.horizontalAlignment = this.horizontalAlignment;
+        canvas.verticalAlignment = this.verticalAlignment;
+        if (this.container) {
+            canvas.width = this.width;
+            canvas.height = this.height;
+            if (this.container.type === 'Stack') {
+                canvas.orientation = this.container.orientation;
+            }
+        }
         canvas.style.fill = this.backgroundColor;
@@ -753,6 +1001,6 @@ canvas.style.strokeColor = this.borderColor;
     /** @private */
-    Node.prototype.initAnnotations = function (accessibilityContent, container) {
+    Node.prototype.initAnnotations = function (accessibilityContent, container, diagramId, virtualize) {
         var annotation;
         for (var i = 0; this.annotations !== undefined, i < this.annotations.length; i++) {
-            annotation = this.initAnnotationWrapper(this.annotations[i]);
+            annotation = this.initAnnotationWrapper(this.annotations[i], diagramId, virtualize);
             // tslint:disable-next-line:no-any
@@ -796,6 +1044,30 @@ var wrapperContent = void 0;
     /** @private */
-    Node.prototype.initAnnotationWrapper = function (annotation) {
+    Node.prototype.initAnnotationWrapper = function (annotation, diagramId, virtualize) {
         annotation.id = annotation.id || randomId();
         var label = annotation;
-        var annotationcontent = new TextElement();
+        var annotationcontent;
+        if (diagramId && annotation.template) {
+            annotationcontent = new DiagramHtmlElement(this.id, diagramId, annotation.id);
+            annotationcontent.content = annotation.template;
+        }
+        else {
+            annotationcontent = new TextElement();
+            annotationcontent.canMeasure = !virtualize;
+            var style = annotation.style;
+            var link = annotation.hyperlink.link ? annotation.hyperlink : undefined;
+            annotationcontent.style = {
+                fill: style.fill, strokeColor: style.strokeColor, strokeWidth: style.strokeWidth,
+                bold: style.bold, textWrapping: style.textWrapping,
+                color: link ? link.color || annotationcontent.hyperlink.color : style.color, whiteSpace: style.whiteSpace,
+                fontFamily: style.fontFamily, fontSize: style.fontSize, italic: style.italic, gradient: null, opacity: style.opacity,
+                strokeDashArray: style.strokeDashArray, textAlign: style.textAlign, textOverflow: annotation.style.textOverflow,
+                textDecoration: link ? link.textDecoration ||
+                    annotationcontent.hyperlink.textDecoration : style.textDecoration,
+            };
+            annotationcontent.hyperlink.link = annotation.hyperlink.link || undefined;
+            annotationcontent.hyperlink.content = annotation.hyperlink.content || undefined;
+            annotationcontent.hyperlink.textDecoration = annotation.hyperlink.textDecoration || undefined;
+            annotationcontent.content = link ? link.content ||
+                annotationcontent.hyperlink.link : annotation.content;
+        }
         annotationcontent.constraints = annotation.constraints;
@@ -807,17 +1079,3 @@ annotationcontent.height = annotation.height;
         annotationcontent.id = this.id + '_' + annotation.id;
-        var style = annotation.style;
-        var link = annotation.hyperlink.link ? annotation.hyperlink : undefined;
-        annotationcontent.style = {
-            fill: style.fill, strokeColor: style.strokeColor, strokeWidth: style.strokeWidth,
-            bold: style.bold, textWrapping: style.textWrapping,
-            color: link ? link.color || annotationcontent.hyperlink.color : style.color, whiteSpace: style.whiteSpace,
-            fontFamily: style.fontFamily, fontSize: style.fontSize, italic: style.italic, gradient: null, opacity: style.opacity,
-            strokeDashArray: style.strokeDashArray, textAlign: style.textAlign, textOverflow: annotation.style.textOverflow,
-            textDecoration: link ? link.textDecoration || annotationcontent.hyperlink.textDecoration : style.textDecoration,
-        };
-        annotationcontent.hyperlink.link = annotation.hyperlink.link || undefined;
-        annotationcontent.hyperlink.content = annotation.hyperlink.content || undefined;
-        annotationcontent.hyperlink.textDecoration = annotation.hyperlink.textDecoration || undefined;
-        annotationcontent.content = link ? link.content || annotationcontent.hyperlink.link : annotation.content;
-        if (this.width !== undefined) {
+        if (this.width !== undefined && !annotation.template) {
             if (annotation.width === undefined || (annotation.width > this.width &&
@@ -952,4 +1210,169 @@ (annotation.style.textWrapping === 'Wrap' || annotation.style.textWrapping === 'WrapWithOverflow'))) {
     ], Node.prototype, "children", void 0);
+    __decorate([
+        Property(null)
+    ], Node.prototype, "container", void 0);
+    __decorate([
+        Property('Left')
+    ], Node.prototype, "horizontalAlignment", void 0);
+    __decorate([
+        Property('Top')
+    ], Node.prototype, "verticalAlignment", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "rows", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "columns", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "rowIndex", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "columnIndex", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "rowSpan", void 0);
+    __decorate([
+        Property()
+    ], Node.prototype, "columnSpan", void 0);
     return Node;
 }(NodeBase));
 export { Node };
+/**
+ * Defines the behavior of header in swimLane
+ */
+var Header = /** @class */ (function (_super) {
+    __extends(Header, _super);
+    function Header() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], Header.prototype, "id", void 0);
+    __decorate([
+        Complex({}, Annotation)
+    ], Header.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], Header.prototype, "style", void 0);
+    __decorate([
+        Property(25)
+    ], Header.prototype, "height", void 0);
+    __decorate([
+        Property(25)
+    ], Header.prototype, "width", void 0);
+    return Header;
+}(ChildProperty));
+export { Header };
+/**
+ * Defines the behavior of lane in swimLane
+ */
+var Lane = /** @class */ (function (_super) {
+    __extends(Lane, _super);
+    function Lane() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], Lane.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], Lane.prototype, "style", void 0);
+    __decorate([
+        Collection([], Node)
+    ], Lane.prototype, "childNodes", void 0);
+    __decorate([
+        Property(25)
+    ], Lane.prototype, "height", void 0);
+    __decorate([
+        Property(25)
+    ], Lane.prototype, "width", void 0);
+    __decorate([
+        Complex({}, Header)
+    ], Lane.prototype, "header", void 0);
+    return Lane;
+}(ChildProperty));
+export { Lane };
+/**
+ * Defines the behavior of phase in swimLane
+ */
+var Phase = /** @class */ (function (_super) {
+    __extends(Phase, _super);
+    function Phase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('')
+    ], Phase.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], Phase.prototype, "style", void 0);
+    __decorate([
+        Complex({}, 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)
+    ], Phase.prototype, "offset", void 0);
+    return Phase;
+}(ChildProperty));
+export { Phase };
+/**
+ * Defines the behavior of swimLane shape
+ */
+var SwimLane = /** @class */ (function (_super) {
+    __extends(SwimLane, _super);
+    function SwimLane() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('SwimLane')
+    ], SwimLane.prototype, "type", void 0);
+    __decorate([
+        Property('10')
+    ], SwimLane.prototype, "phaseSize", void 0);
+    __decorate([
+        Collection([], Phase)
+    ], SwimLane.prototype, "phases", void 0);
+    __decorate([
+        Property('Horizontal')
+    ], SwimLane.prototype, "orientation", void 0);
+    __decorate([
+        Collection([], Lane)
+    ], SwimLane.prototype, "lanes", void 0);
+    __decorate([
+        Complex({}, Header)
+    ], SwimLane.prototype, "header", void 0);
+    __decorate([
+        Property('')
+    ], SwimLane.prototype, "lineStyle", void 0);
+    __decorate([
+        Property(false)
+    ], SwimLane.prototype, "isLane", void 0);
+    __decorate([
+        Property(false)
+    ], SwimLane.prototype, "isPhase", void 0);
+    return SwimLane;
+}(Shape));
+export { SwimLane };
+/**
+ * Defines the behavior of container
+ */
+/** @private */
+var ChildContainer = /** @class */ (function () {
+    function ChildContainer() {
+    }
+    __decorate([
+        Property('Canvas')
+    ], ChildContainer.prototype, "type", void 0);
+    __decorate([
+        Property('Vertical')
+    ], ChildContainer.prototype, "orientation", void 0);
+    return ChildContainer;
+}());
+export { ChildContainer };

src/diagram/objects/snapping.js

@@ -10,2 +10,3 @@ import { Rect } from '../primitives/rect';
 import { TextElement } from '../core/elements/text-element';
+import { DiagramHtmlElement } from '../core/elements/html-element';
 /**
@@ -516,3 +517,4 @@ * Snapping
         var bounds;
-        bounds = (shape instanceof TextElement) ? getBounds(shape) : getBounds(shape.wrapper);
+        bounds = ((shape instanceof TextElement) || (shape instanceof DiagramHtmlElement)) ? getBounds(shape) :
+            getBounds(shape.wrapper);
         if (!verticalSnap.snapped) {
@@ -519,0 +521,0 @@ if (this.diagram.snapSettings.constraints & SnapConstraints.SnapToHorizontalLines) {

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

@@ -24,2 +24,4 @@ import { Diagram } from '../diagram';
     private recordAnnotationChanged;
+    private recordChildCollectionChanged;
+    private recordStackPositionChanged;
     private recordPortChanged;
@@ -26,0 +28,0 @@ private recordPropertyChanged;

src/diagram/objects/undo-redo.js

@@ -6,2 +6,3 @@ import { Node } from './node';
 import { findAnnotation, findPort } from '../utility/diagram-util';
+import { Size } from '../index';
 /**
@@ -194,2 +195,8 @@ * Undo redo function used for revert and restore the changes
                 break;
+            case 'ChildCollectionChanged':
+                this.recordChildCollectionChanged(entry, diagram, false);
+                break;
+            case 'StackChildPositionChanged':
+                this.recordStackPositionChanged(entry, diagram, false);
+                break;
         }
@@ -230,6 +237,6 @@ diagram.diagramActions &= ~DiagramAction.UndoRedo;
         var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
-        var oldElement = findAnnotation(entryObject, entry.changeObjectId);
+        var oldElement = findAnnotation(entryObject, entry.objectId);
         var undoChanges = diagram.commandHandler.getAnnotationChanges(diagram.nameTable[entryObject.id], oldElement);
         var currentObject = diagram.nameTable[entryObject.id];
-        var currentElement = findAnnotation(currentObject, entry.changeObjectId);
+        var currentElement = findAnnotation(currentObject, entry.objectId);
         currentElement.offset = oldElement.offset;
@@ -248,9 +255,58 @@ currentElement.margin = oldElement.margin;
     };
+    UndoRedo.prototype.recordChildCollectionChanged = function (entry, diagram, isRedo) {
+        var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
+        var parentNode;
+        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 (entryObject.parentId !== '') {
+            parentNode = diagram.nameTable[entryObject.parentId];
+            parentNode.children.push(entryObject.id);
+            parentNode.wrapper.children.push(actualObject.wrapper);
+        }
+        actualObject.parentId = entryObject.parentId;
+        diagram.updateDiagramObject(actualObject);
+    };
+    UndoRedo.prototype.recordStackPositionChanged = function (entry, diagram, isRedo) {
+        var entryObject = ((isRedo) ? entry.redoObject : entry.undoObject);
+        if (entryObject.source) {
+            var parent_1 = diagram.nameTable[entryObject.source.parentId];
+            if (parent_1) {
+                if (entryObject.target) {
+                    parent_1.wrapper.children.splice(entryObject.targetIndex, 1);
+                    parent_1.wrapper.children.splice(entryObject.sourceIndex, 0, entryObject.source.wrapper);
+                }
+                else {
+                    if (entryObject.sourceIndex !== undefined) {
+                        if (!diagram.nameTable[entryObject.source.id]) {
+                            diagram.add(entryObject.source);
+                        }
+                        parent_1.wrapper.children.splice(entryObject.sourceIndex, 0, diagram.nameTable[entryObject.source.id].wrapper);
+                        diagram.nameTable[entryObject.source.id].parentId = parent_1.id;
+                    }
+                    else {
+                        parent_1.wrapper.children.splice(parent_1.wrapper.children.indexOf(diagram.nameTable[entryObject.source.id].wrapper), 1);
+                        diagram.nameTable[entryObject.source.id].parentId = '';
+                    }
+                }
+                if (isRedo && parent_1.shape.type === 'UmlClassifier') {
+                    diagram.remove(entryObject.source);
+                }
+                parent_1.wrapper.measure(new Size());
+                parent_1.wrapper.arrange(parent_1.wrapper.desiredSize);
+                diagram.updateDiagramObject(parent_1);
+                diagram.updateSelector();
+            }
+        }
+    };
     UndoRedo.prototype.recordPortChanged = function (entry, diagram, isRedo) {
         var entryObject = ((isRedo) ? entry.redoObject.nodes[0] :
             entry.undoObject.nodes[0]);
-        var oldElement = findPort(entryObject, entry.changeObjectId);
+        var oldElement = findPort(entryObject, entry.objectId);
         var undoChanges = diagram.commandHandler.getPortChanges(diagram.nameTable[entryObject.id], oldElement);
         var currentObject = diagram.nameTable[entryObject.id];
-        var currentElement = findPort(currentObject, entry.changeObjectId);
+        var currentElement = findPort(currentObject, entry.objectId);
         currentElement.offset = oldElement.offset;
@@ -328,3 +384,3 @@ diagram.nodePropertyChange(currentObject, {}, undoChanges);
                 node = obj.nodes[i];
-                if (node.children) {
+                if (node.children && !node.container) {
                     var elements = [];
@@ -647,2 +703,8 @@ var nodes = diagram.commandHandler.getAllDescendants(node, elements);
                 break;
+            case 'ChildCollectionChanged':
+                this.recordChildCollectionChanged(historyEntry, diagram, true);
+                break;
+            case 'StackChildPositionChanged':
+                this.recordStackPositionChanged(historyEntry, diagram, true);
+                break;
         }
@@ -649,0 +711,0 @@ diagram.protectPropertyChange(false);

src/diagram/rendering/canvas-renderer.js

@@ -429,8 +429,7 @@ import { Size } from './../primitives/size';
     };
-    CanvasRenderer.prototype.loadImage = function (ctx, obj) {
-        ctx.rotate(obj.angle * Math.PI / 180);
+    CanvasRenderer.prototype.loadImage = function (ctx, obj, canvas, pivotX, pivotY) {
+        this.rotateContext(canvas, obj.angle, pivotX, pivotY);
         var image = new Image();
         image.src = obj.source;
         this.image(ctx, image, obj.x, obj.y, obj.width, obj.height, obj);
-        ctx.rotate(-(obj.angle * Math.PI / 180));
     };
@@ -443,6 +442,8 @@ /**   @private  */
             ctx_1.save();
-            var pivotX = obj.x + obj.width * obj.pivotX;
-            var pivotY = obj.y + obj.height * obj.pivotY;
+            var pivotX_1 = obj.x + obj.width * obj.pivotX;
+            var pivotY_1 = obj.y + obj.height * obj.pivotY;
             var imageObj = new Image();
             imageObj.src = obj.source;
+            var id = ctx_1.canvas.id.split('_');
+            var value = id[id.length - 1] === ('diagram' || 'diagramLayer') ? true : false;
             /**
@@ -458,7 +459,7 @@ *  Since Clipping portion for node with slice option is not calculated properly
             if (!fromPalette) {
-                this.loadImage(ctx_1, obj);
+                this.loadImage(ctx_1, obj, canvas, pivotX_1, pivotY_1);
             }
             else {
                 imageObj.onload = function () {
-                    _this.loadImage(ctx_1, obj);
+                    _this.loadImage(ctx_1, obj, canvas, pivotX_1, pivotY_1);
                 };
@@ -465,0 +466,0 @@ }

src/diagram/rendering/renderer.d.ts

@@ -54,2 +54,6 @@ import { DiagramElement } from '../core/elements/diagram-element';
     renderHighlighter(element: DiagramElement, canvas: SVGElement, transform: Transforms): void;
+    /**
+     * @private
+     */
+    renderStackHighlighter(element: DiagramElement, canvas: SVGElement, transform: Transforms, isVertical: Boolean, position: PointModel, isUml?: boolean): void;
     /**   @private  */
@@ -60,3 +64,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): void;
+    renderResizeHandle(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, constraints: ThumbsConstraints, currentZoom: number, selectorConstraints?: SelectorConstraints, transform?: Transforms, canMask?: boolean, enableNode?: number, nodeConstraints?: boolean): void;
     /**   @private  */
@@ -75,3 +79,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): void;
+    renderBorder(selector: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, enableNode?: number, isBorderTickness?: boolean): void;
     /**   @private  */
@@ -78,0 +82,0 @@ renderUserHandler(selectorItem: SelectorModel, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms): void;

src/diagram/rendering/renderer.js

@@ -176,2 +176,59 @@ import { PathElement } from '../core/elements/path-element';
     };
+    /**
+     * @private
+     */
+    DiagramRenderer.prototype.renderStackHighlighter = function (element, canvas, transform, isVertical, position, isUml) {
+        var width = element.actualSize.width || 2;
+        var x = element.offsetX - width * element.pivot.x;
+        var height = element.actualSize.height || 2;
+        var y = element.offsetY - height * element.pivot.y;
+        x = (x + transform.tx) * transform.scale;
+        var data;
+        var bounds = element.bounds;
+        var newPathString = '';
+        y = (y + transform.ty) * transform.scale;
+        if (!isVertical) {
+            var d = height * transform.scale;
+            data = 'M 10 -10 L 0 0 Z M -10 -10 L 0 0 Z M 0 0 L 0 ' + (d) + ' Z M 0  ' + (d) +
+                ' L -10  ' + (d + 10) + ' Z L 10  ' + (d + 10) + ' Z';
+            if (position.x >= element.offsetX) {
+                x += width;
+            }
+        }
+        else {
+            if (isUml) {
+                var d = width * transform.scale;
+                data = 'M 0 0 L ' + (d + 2) + ' 0 Z';
+                var scaleX = -bounds.x;
+                var scaleY = -bounds.y;
+                var arrayCollection = [];
+                scaleX = element.actualSize.width / Number(bounds.width ? bounds.width : 1) * transform.scale;
+                scaleY = element.actualSize.height / Number(bounds.height ? bounds.height : 1) * transform.scale;
+                var umlData = 'M7,4 L8,4 8,7 11,7 11,8 8,8 8,11 7,11 7,8 4,8 4,7 7,7 z M7.5,0.99999994' +
+                    'C3.9160004,1 1,3.9160004 0.99999994,7.5 1,11.084 3.9160004,14 7.5,14 11.084,14 14,11.084 14,7.5 14,' +
+                    '3.9160004 11.084,1 7.5,0.99999994 z M7.5,0 C11.636002,0 15,3.3639984 15,7.5 15,11.636002 11.636002,15 7.5,' +
+                    '15 3.3640003,15 0,11.636002 0,7.5 0,3.3639984 3.3640003,0 7.5,0 z';
+                arrayCollection = processPathData(umlData);
+                arrayCollection = splitArrayCollection(arrayCollection);
+                newPathString = transformPath(arrayCollection, scaleX + d + 2, scaleY - 8, false, bounds.x, bounds.y, 0, 0);
+                if (position.y >= element.offsetY) {
+                    y += height;
+                }
+            }
+            else {
+                var d = width * transform.scale;
+                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 ' +
+                    (d + 10) + ' 10 Z L ' + (d + 10) + ' -10 Z';
+            }
+        }
+        var options = {
+            data: data + newPathString,
+            width: width * transform.scale, height: height * transform.scale,
+            x: x, y: y, fill: 'transparent', stroke: '#8CC63F', angle: element.rotateAngle,
+            pivotX: element.pivot.x, pivotY: element.pivot.y, strokeWidth: 1,
+            dashArray: '', opacity: 1,
+            visible: true, id: canvas.id + '_stack_highlighter', class: 'e-diagram-highlighter',
+        };
+        this.svgRenderer.drawPath(canvas, options, this.diagramId);
+    };
     /**   @private  */
@@ -186,3 +243,3 @@ DiagramRenderer.prototype.drawLine = function (canvas, options) {
     /**   @private  */
-    DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode) {
+    DiagramRenderer.prototype.renderResizeHandle = function (element, canvas, constraints, currentZoom, selectorConstraints, transform, canMask, enableNode, nodeConstraints) {
         var left = element.offsetX - element.actualSize.width * element.pivot.x;
@@ -196,32 +253,34 @@ var top = element.offsetY - element.actualSize.height * element.pivot.y;
         }
-        this.renderBorder(element, canvas, transform, enableNode);
+        this.renderBorder(element, canvas, transform, enableNode, nodeConstraints);
         var nodeWidth = element.actualSize.width * currentZoom;
         var nodeHeight = element.actualSize.height * currentZoom;
-        if (nodeWidth >= 40 && nodeHeight >= 40) {
-            //Hide corners when the size is less than 40
-            if (selectorConstraints & SelectorConstraints.ResizeNorthWest) {
-                this.renderCircularHandle('resizeNorthWest', element, left, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthWest'), constraints & ThumbsConstraints.ResizeNorthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top left side direction' }, undefined, 'e-diagram-resize-handle e-northwest');
+        if (!nodeConstraints) {
+            if (nodeWidth >= 40 && nodeHeight >= 40) {
+                //Hide corners when the size is less than 40
+                if (selectorConstraints & SelectorConstraints.ResizeNorthWest) {
+                    this.renderCircularHandle('resizeNorthWest', element, left, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthWest'), constraints & ThumbsConstraints.ResizeNorthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top left side direction' }, undefined, 'e-diagram-resize-handle e-northwest');
+                }
+                if (selectorConstraints & SelectorConstraints.ResizeNorthEast) {
+                    this.renderCircularHandle('resizeNorthEast', element, left + width, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthEast'), constraints & ThumbsConstraints.ResizeNorthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top right side direction' }, undefined, 'e-diagram-resize-handle e-northeast');
+                }
+                if (selectorConstraints & SelectorConstraints.ResizeSouthWest) {
+                    this.renderCircularHandle('resizeSouthWest', element, left, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthWest'), constraints & ThumbsConstraints.ResizeSouthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom left side direction' }, undefined, 'e-diagram-resize-handle e-southwest');
+                }
+                if (selectorConstraints & SelectorConstraints.ResizeSouthEast) {
+                    this.renderCircularHandle('resizeSouthEast', element, left + width, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthEast'), constraints & ThumbsConstraints.ResizeSouthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom right side direction' }, undefined, 'e-diagram-resize-handle e-southeast');
+                }
             }
-            if (selectorConstraints & SelectorConstraints.ResizeNorthEast) {
-                this.renderCircularHandle('resizeNorthEast', element, left + width, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorthEast'), constraints & ThumbsConstraints.ResizeNorthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top right side direction' }, undefined, 'e-diagram-resize-handle e-northeast');
+            if (selectorConstraints & SelectorConstraints.ResizeNorth) {
+                this.renderCircularHandle('resizeNorth', element, left + width / 2, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorth'), constraints & ThumbsConstraints.ResizeNorth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top side direction' }, undefined, 'e-diagram-resize-handle e-north');
             }
-            if (selectorConstraints & SelectorConstraints.ResizeSouthWest) {
-                this.renderCircularHandle('resizeSouthWest', element, left, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthWest'), constraints & ThumbsConstraints.ResizeSouthWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom left side direction' }, undefined, 'e-diagram-resize-handle e-southwest');
+            if (selectorConstraints & SelectorConstraints.ResizeSouth) {
+                this.renderCircularHandle('resizeSouth', element, left + width / 2, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouth'), constraints & ThumbsConstraints.ResizeSouth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom side direction' }, undefined, 'e-diagram-resize-handle e-south');
             }
-            if (selectorConstraints & SelectorConstraints.ResizeSouthEast) {
-                this.renderCircularHandle('resizeSouthEast', element, left + width, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouthEast'), constraints & ThumbsConstraints.ResizeSouthEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom right side direction' }, undefined, 'e-diagram-resize-handle e-southeast');
+            if (selectorConstraints & SelectorConstraints.ResizeWest) {
+                this.renderCircularHandle('resizeWest', element, left, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeWest'), constraints & ThumbsConstraints.ResizeWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on left side direction' }, undefined, 'e-diagram-resize-handle e-west');
             }
+            if (selectorConstraints & SelectorConstraints.ResizeEast) {
+                this.renderCircularHandle('resizeEast', element, left + width, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeEast'), constraints & ThumbsConstraints.ResizeEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on right side direction' }, undefined, 'e-diagram-resize-handle e-east');
+            }
         }
-        if (selectorConstraints & SelectorConstraints.ResizeNorth) {
-            this.renderCircularHandle('resizeNorth', element, left + width / 2, top, canvas, canShowCorner(selectorConstraints, 'ResizeNorth'), constraints & ThumbsConstraints.ResizeNorth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on top side direction' }, undefined, 'e-diagram-resize-handle e-north');
-        }
-        if (selectorConstraints & SelectorConstraints.ResizeSouth) {
-            this.renderCircularHandle('resizeSouth', element, left + width / 2, top + height, canvas, canShowCorner(selectorConstraints, 'ResizeSouth'), constraints & ThumbsConstraints.ResizeSouth, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on bottom side direction' }, undefined, 'e-diagram-resize-handle e-south');
-        }
-        if (selectorConstraints & SelectorConstraints.ResizeWest) {
-            this.renderCircularHandle('resizeWest', element, left, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeWest'), constraints & ThumbsConstraints.ResizeWest, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on left side direction' }, undefined, 'e-diagram-resize-handle e-west');
-        }
-        if (selectorConstraints & SelectorConstraints.ResizeEast) {
-            this.renderCircularHandle('resizeEast', element, left + width, top + height / 2, canvas, canShowCorner(selectorConstraints, 'ResizeEast'), constraints & ThumbsConstraints.ResizeEast, transform, undefined, canMask, { 'aria-label': 'Thumb to resize the selected object on right side direction' }, undefined, 'e-diagram-resize-handle e-east');
-        }
     };
@@ -391,3 +450,3 @@ /**   @private  */
     /**   @private  */
-    DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode) {
+    DiagramRenderer.prototype.renderBorder = function (selector, canvas, transform, enableNode, isBorderTickness) {
         var wrapper = selector;
@@ -408,2 +467,5 @@ var options = this.getBaseAttributes(wrapper, transform);
         }
+        if (isBorderTickness) {
+            options.class += ' e-thick-border';
+        }
         options.cornerRadius = 0;
@@ -735,3 +797,3 @@ var parentSvg = this.getParentSvg(selector, 'selector');
         options.strokeWidth = 0;
-        options.fill = 'transparent';
+        options.fill = element.style.fill;
         var ariaLabel = element.description ? element.description : element.content ? element.content : element.id;
@@ -738,0 +800,0 @@ this.renderer.drawRectangle(canvas, options, this.diagramId, undefined, undefined, parentSvg);

src/diagram/rendering/svg-renderer.js

@@ -369,3 +369,3 @@ import { Point } from './../primitives/point';
             'width': obj.width.toString(), 'visibility': obj.visible ? 'visible' : 'hidden',
-            'height': obj.height.toString(), 'preserveAspectRatio': aspectRatio
+            'height': obj.height.toString(), 'preserveAspectRatio': aspectRatio, 'opacity': (obj.opacity || 1).toString()
         };
@@ -398,3 +398,3 @@ setAttributeSvg(image, attr);
             'px;left:' + point.x + 'px; top:' + point.y + 'px;' +
-            'position:absolute;transform:rotate(' + element.parentTransform + 'deg);' +
+            'position:absolute;transform:rotate(' + (element.rotateAngle + element.parentTransform) + 'deg);' +
             'pointer-events:' + (value ? 'all' : 'none')
@@ -401,0 +401,0 @@ + ';visibility:' + ((element.visible) ? 'visible' : 'hidden') + ';opacity:' + element.style.opacity + ';');

src/diagram/utility/base-util.js

@@ -151,3 +151,3 @@ import { Rect } from '../primitives/rect';
         case 'nodes':
-            return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId'];
+            return ['inEdges', 'outEdges', 'parentId', 'processId', 'nodeId', 'umlIndex'];
         case 'connectors':
@@ -154,0 +154,0 @@ return ['parentId'];

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

@@ -34,4 +34,8 @@ import { Diagram } from '../diagram';
 /** @private */
+export declare function canPortInConnect(port: PointPortModel): number;
+/** @private */
 export declare function canOutConnect(node: NodeModel): number;
 /** @private */
+export declare function canPortOutConnect(port: PointPortModel): number;
+/** @private */
 export declare function canResize(node: NodeModel | ShapeAnnotationModel | PathAnnotationModel, direction?: string): number;
@@ -38,0 +42,0 @@ /** @private */

src/diagram/utility/constraints-util.js

@@ -116,2 +116,11 @@ import { Node } from './../objects/node';
 /** @private */
+export function canPortInConnect(port) {
+    if (port) {
+        if ((port.constraints & PortConstraints.InConnect)) {
+            return port.constraints & PortConstraints.InConnect;
+        }
+    }
+    return 0;
+}
+/** @private */
 export function canOutConnect(node) {
@@ -124,2 +133,11 @@ if ((node instanceof Node) && (node.constraints & NodeConstraints.OutConnect)) {
 /** @private */
+export function canPortOutConnect(port) {
+    if (port) {
+        if ((port.constraints & PortConstraints.OutConnect)) {
+            return port.constraints & PortConstraints.OutConnect;
+        }
+    }
+    return 0;
+}
+/** @private */
 export function canResize(node, direction) {
@@ -126,0 +144,0 @@ var returnValue = 0;

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

@@ -8,2 +8,3 @@ import { PointModel } from './../primitives/point-model';
 import { Alignment, SegmentInfo } from '../rendering/canvas-interface';
+import { PathElement } from './../core/elements/path-element';
 import { DiagramNativeElement } from './../core/elements/native-element';
@@ -25,4 +26,7 @@ import { PathAnnotation } from './../objects/annotation';
 import { Selector } from '../interaction/selector';
+import { Canvas } from '../core/containers/canvas';
 /** @private */
 export declare function completeRegion(region: Rect, selectedObjects: (NodeModel | ConnectorModel)[]): (NodeModel | ConnectorModel)[];
+/** @private */
+export declare function findNodeByName(nodes: (NodeModel | ConnectorModel)[], name: string): boolean;
 /**
@@ -32,5 +36,11 @@ * @private
 export declare function findObjectType(drawingObject: NodeModel | ConnectorModel): string;
+/**
+ * @private
+ */
+export declare function setUMLActivityDefaults(child: NodeModel | ConnectorModel, node: NodeModel | ConnectorModel): void;
 /** @private */
 export declare function findNearestPoint(reference: PointModel, start: PointModel, end: PointModel): PointModel;
+/** @private */
 export declare function isDiagramChild(htmlLayer: HTMLElement): boolean;
+/** @private */
 export declare function groupHasType(node: NodeModel, type: Shapes, nameTable: {}): boolean;
@@ -42,2 +52,6 @@ /** @private */
 /** @private */
+export declare function intersect2(start1: PointModel, end1: PointModel, start2: PointModel, end2: PointModel): PointModel;
+/** @private */
+export declare function getLineSegment(x1: number, y1: number, x2: number, y2: number): Segment;
+/** @private */
 export declare function getPoints(element: DiagramElement, corners: Corners): PointModel[];
@@ -78,2 +92,8 @@ /**
 /** @private */
+export declare function updateUmlActivityNode(actualObject: Node, newValues: Node): void;
+/** @private */
+export declare function getUMLFinalNode(node: Node): Canvas;
+/** @private */
+export declare function getUMLActivityShapes(umlActivityShape: PathElement, content: DiagramElement, node: Node): DiagramElement;
+/** @private */
 export declare function removeItem(array: String[], item: string): void;
@@ -95,2 +115,4 @@ /** @private */
 /** @private */
+export declare function getInOutConnectPorts(node: NodeModel, isInConnect: boolean): PointPortModel;
+/** @private */
 export declare function findObjectIndex(node: NodeModel | ConnectorModel, id: string, annotation?: boolean): string;
@@ -101,2 +123,3 @@ /** @private */
 export declare function scaleElement(element: DiagramElement, sw: number, sh: number, refObject: DiagramElement): void;
+/** @private */
 export declare function arrangeChild(obj: Node, x: number, y: number, nameTable: {}, drop: boolean, diagram: Diagram | SymbolPalette): void;
@@ -103,0 +126,0 @@ /** @private */

src/diagram/utility/diagram-util.js

@@ -8,3 +8,3 @@ import { Size } from './../primitives/size';
 import { Point } from './../primitives/point';
-import { ConnectorConstraints, NodeConstraints } from './../enum/enum';
+import { ConnectorConstraints, NodeConstraints, PortConstraints } from './../enum/enum';
 import { SelectorConstraints, ThumbsConstraints } from './../enum/enum';
@@ -26,2 +26,4 @@ import { PathElement } from './../core/elements/path-element';
 import { canResize } from './constraints-util';
+import { getUMLActivityShape } from '../objects/dictionary/umlactivity-shapes';
+import { Canvas } from '../core/containers/canvas';
 /** @private */
@@ -38,2 +40,11 @@ export function completeRegion(region, selectedObjects) {
 }
+/** @private */
+export function findNodeByName(nodes, name) {
+    for (var i = 0; i < nodes.length; i++) {
+        if (nodes[i].id === name) {
+            return true;
+        }
+    }
+    return false;
+}
 /**
@@ -54,2 +65,69 @@ * @private
 }
+/**
+ * @private
+ */
+export function setUMLActivityDefaults(child, node) {
+    if (node instanceof Node) {
+        switch (child.shape.shape) {
+            case 'JoinNode':
+                if (!child.width) {
+                    node.width = 20;
+                }
+                if (!child.height) {
+                    node.height = 90;
+                }
+                if (!child.style || !child.style.fill) {
+                    node.style.fill = 'black';
+                }
+                break;
+            case 'ForkNode':
+                if (!child.width) {
+                    node.width = 90;
+                }
+                if (!child.height) {
+                    node.height = 20;
+                }
+                if (!child.style || !child.style.fill) {
+                    node.style.fill = 'black';
+                }
+                break;
+            case 'InitialNode':
+                if (!child.style || !child.style.fill) {
+                    node.style.fill = 'black';
+                }
+                break;
+            case 'FinalNode':
+                if (!child.style || !child.style.fill) {
+                    node.style.fill = 'black';
+                }
+                break;
+        }
+    }
+    else {
+        switch (child.shape.flow) {
+            case 'Object':
+                if (!child.style || !child.style.strokeDashArray) {
+                    node.style.strokeDashArray = '8 4';
+                }
+                if (!child.style || !child.style.strokeWidth) {
+                    node.style.strokeWidth = 2;
+                }
+                if (!child.targetDecorator || !child.targetDecorator.shape) {
+                    node.targetDecorator.shape = 'OpenArrow';
+                }
+                break;
+            case 'Control':
+                if (!child.style || !child.style.strokeWidth) {
+                    node.style.strokeWidth = 2;
+                }
+                if (!child.targetDecorator || !child.targetDecorator.shape) {
+                    node.targetDecorator.shape = 'OpenArrow';
+                }
+                if (!child.sourceDecorator || !child.sourceDecorator.shape) {
+                    node.sourceDecorator.shape = 'None';
+                }
+                break;
+        }
+    }
+}
 /** @private */
@@ -97,2 +175,3 @@ export function findNearestPoint(reference, start, end) {
 }
+/** @private */
 export function isDiagramChild(htmlLayer) {
@@ -108,2 +187,3 @@ var element = htmlLayer.parentElement;
 }
+/** @private */
 export function groupHasType(node, type, nameTable) {
@@ -189,2 +269,19 @@ var contains = false;
 /** @private */
+export function intersect2(start1, end1, start2, end2) {
+    var point = { x: 0, y: 0 };
+    var lineUtil1 = getLineSegment(start1.x, start1.y, end1.x, end1.y);
+    var lineUtil2 = getLineSegment(start2.x, start2.y, end2.x, end2.y);
+    var line3 = intersect3(lineUtil1, lineUtil2);
+    if (line3.enabled) {
+        return line3.intersectPt;
+    }
+    else {
+        return point;
+    }
+}
+/** @private */
+export function getLineSegment(x1, y1, x2, y2) {
+    return { 'x1': Number(x1) || 0, 'y1': Number(y1) || 0, 'x2': Number(x2) || 0, 'y2': Number(y2) || 0 };
+}
+/** @private */
 export function getPoints(element, corners) {
@@ -740,2 +837,5 @@ var line = [];
         }
+        else if (actualObject.shape.type === 'UmlActivity' && newValues.shape.shape !== undefined) {
+            updateUmlActivityNode(actualObject, newValues);
+        }
         else if (newValues.shape.cornerRadius !== undefined) {
@@ -753,2 +853,76 @@ actualObject.wrapper.children[0].cornerRadius = newValues.shape.cornerRadius;
 /** @private */
+export function updateUmlActivityNode(actualObject, newValues) {
+    actualObject.shape.shape = newValues.shape.shape;
+    var shapes = actualObject.shape.shape;
+    var umlActivityShapeData = getUMLActivityShape(shapes.toString());
+    if (actualObject.shape.shape === 'InitialNode') {
+        actualObject.wrapper.children[0].style.fill = 'black';
+    }
+    else if (actualObject.shape.shape === 'ForkNode' ||
+        actualObject.shape.shape === 'JoinNode') {
+        actualObject.wrapper.children[0].style.fill = 'black';
+    }
+    else if (actualObject.shape.shape === 'FinalNode') {
+        if (actualObject instanceof Node) {
+            actualObject.wrapper = getUMLFinalNode(actualObject);
+        }
+        actualObject.wrapper.children[0].data = umlActivityShapeData;
+    }
+}
+/** @private */
+export function getUMLFinalNode(node) {
+    var finalNodeShape = new Canvas();
+    finalNodeShape.style.fill = 'transparent';
+    //childNode0
+    var pathData = 'M 25 50 C 11.21 50 0 38.79 0 25 C 0 11.21 11.21 0 25 0 C 38.78 0 50 11.21 50 25' +
+        ' C 50 38.79 38.78 50 25 50';
+    var innerFinalNode = new PathElement();
+    innerFinalNode.data = pathData;
+    innerFinalNode.id = node.id + '_0_finalNode';
+    innerFinalNode.horizontalAlignment = 'Center';
+    innerFinalNode.verticalAlignment = 'Center';
+    innerFinalNode.relativeMode = 'Object';
+    innerFinalNode.style.strokeColor = node.style.strokeColor;
+    innerFinalNode.style.strokeWidth = node.style.strokeWidth;
+    //childNode1
+    var outerFinalNode = new PathElement();
+    outerFinalNode.data = pathData;
+    outerFinalNode.id = node.id + '_1_finalNode';
+    outerFinalNode.horizontalAlignment = 'Center';
+    outerFinalNode.verticalAlignment = 'Center';
+    outerFinalNode.relativeMode = 'Object';
+    outerFinalNode.style.fill = node.style.fill;
+    outerFinalNode.style.strokeColor = node.style.strokeColor;
+    outerFinalNode.style.strokeWidth = node.style.strokeWidth;
+    //append child and set style
+    finalNodeShape.children = [innerFinalNode, outerFinalNode];
+    finalNodeShape.children[0].width = node.width;
+    finalNodeShape.children[0].height = node.height;
+    finalNodeShape.children[1].height = node.height / 1.5;
+    finalNodeShape.children[1].width = node.width / 1.5;
+    finalNodeShape.style.strokeWidth = 0;
+    finalNodeShape.style.strokeColor = 'transparent';
+    return finalNodeShape;
+}
+/** @private */
+export function getUMLActivityShapes(umlActivityShape, content, node) {
+    var umlActivityShapeData = getUMLActivityShape(node.shape.shape);
+    umlActivityShape.data = umlActivityShapeData;
+    content = umlActivityShape;
+    switch (node.shape.shape) {
+        case 'StructuredNode':
+            if (node.annotations) {
+                for (var i = 0; i < node.annotations.length; i++) {
+                    node.annotations[i].content = '<<' + node.annotations[i].content + '>>';
+                }
+            }
+            content = umlActivityShape;
+            break;
+        case 'FinalNode':
+            content = getUMLFinalNode(node);
+            break;
+    }
+    return content;
+}
+/** @private */
 export function removeItem(array, item) {
@@ -781,3 +955,5 @@ var index = array.indexOf(item);
     points = connector.clipDecorators(connector, points);
-    var element = connector.wrapper.children[1];
+    var element = connector.wrapper.children[0];
+    element.canMeasurePath = true;
+    element = connector.wrapper.children[1];
     connector.updateDecoratorElement(element, points[0], anglePoint[1], srcDecorator);
@@ -907,2 +1083,23 @@ targetPoint = connector.targetPoint;
 /** @private */
+export function getInOutConnectPorts(node, isInConnect) {
+    var port = {};
+    var i = 0;
+    if (node.ports) {
+        var ports = node.ports;
+        for (i = 0; i < ports.length; i++) {
+            if (isInConnect) {
+                if ((ports[i].constraints & PortConstraints.InConnect)) {
+                    port = ports[i];
+                }
+            }
+            else {
+                if ((ports[i].constraints & PortConstraints.OutConnect)) {
+                    port = ports[i];
+                }
+            }
+        }
+    }
+    return port;
+}
+/** @private */
 export function findObjectIndex(node, id, annotation) {
@@ -961,2 +1158,3 @@ var index;
 }
+/** @private */
 export function arrangeChild(obj, x, y, nameTable, drop, diagram) {
@@ -1041,5 +1239,11 @@ var child = obj.children;
         if (nodes[i].id === element.nodeId) {
-            return nodes[i];
+            return getAnnotation(nodes[i], element);
         }
     }
+    var connectors = diagramElement[instance][0].connectors;
+    for (var i = 0; connectors && i < connectors[length]; i++) {
+        if (connectors[i].id === element.nodeId) {
+            return getAnnotation(connectors[i], element);
+        }
+    }
     var enterObject = diagramElement[instance][0].enterObject;
@@ -1056,2 +1260,13 @@ if (enterObject && (enterObject['id'] === element.nodeId || enterObject['children'])) {
 }
+function getAnnotation(obj, element) {
+    var annotations = obj.annotations;
+    var length = 'length';
+    var j;
+    for (j = 0; annotations && j < annotations[length]; j++) {
+        if (element.annotationId && annotations[j].id === element.annotationId) {
+            return annotations[j];
+        }
+    }
+    return obj;
+}
 /** @private */
@@ -1058,0 +1273,0 @@ function getPaletteSymbols(symbolPalette) {

src/diagram/utility/dom-util.js

@@ -277,3 +277,3 @@ import { Rect } from '../primitives/rect';
     bounds.width = wrapBounds.width;
-    bounds.height = childNodes.length * text.style.fontSize;
+    bounds.height = childNodes.length * text.style.fontSize * 1.2;
     return bounds;
@@ -280,0 +280,0 @@ }

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, classList, EmitType } from '@syncfusion/ej2-base';import { Accordion, AccordionItemModel, ExpandMode, ExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeModel, ConnectorModel, Node, Connector, Shape, Size, Transform } from '../diagram/index';import { DiagramRenderer, Container, StackPanel, Margin, BpmnDiagrams } 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 } from '../diagram/utility/diagram-util';import { getFunction } 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, 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

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

@@ -237,2 +237,3 @@ import { Component, ChildProperty } from '@syncfusion/ej2-base';
     private draggable;
+    private laneTable;
     /**
@@ -239,0 +240,0 @@ * Constructor for creating the component

src/symbol-palette/symbol-palette.js

@@ -29,4 +29,4 @@ var __extends = (this && this.__extends) || (function () {
 import { parentsUntil, createSvgElement, createHtmlElement, createMeasureElements } from '../diagram/utility/dom-util';
-import { scaleElement, arrangeChild, groupHasType } from '../diagram/utility/diagram-util';
-import { getFunction } from '../diagram/utility/base-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';
@@ -123,2 +123,3 @@ import { Point } from '../diagram/primitives/point';
         _this.info = 'info';
+        _this.laneTable = {};
         /**
@@ -141,2 +142,13 @@ * helper method for draggable
         };
+        var child;
+        var node;
+        for (var i = 0; _this && _this.palettes && i < _this.palettes.length; i++) {
+            for (var j = 0; j < _this.palettes[i].symbols.length; j++) {
+                child = _this.palettes[i].symbols[j];
+                node = options.palettes[i].symbols[j];
+                if (child && child.shape.type === 'UmlActivity') {
+                    setUMLActivityDefaults(node, child);
+                }
+            }
+        }
         return _this;
@@ -328,4 +340,52 @@ }
         var group = [];
+        var laneHeight = 0;
+        var laneWidth = 0;
         for (var _i = 0, _a = symbolGroup.symbols; _i < _a.length; _i++) {
             var symbol = _a[_i];
+            if (symbol.shape.type === 'SwimLane') {
+                var swimLaneObj = symbol;
+                var swimLaneShape = symbol.shape;
+                var isHorizontal = (swimLaneShape.orientation === 'Horizontal') ? true : false;
+                if (swimLaneShape.isLane) {
+                    laneHeight = isHorizontal ? this.symbolHeight - this.symbolHeight / 2 : this.symbolHeight - this.symbolHeight / 4;
+                    laneWidth = isHorizontal ? this.symbolWidth - this.symbolWidth / 4 : this.symbolWidth - this.symbolWidth / 2;
+                    this.laneTable[symbol.id] = { height: laneHeight, width: laneWidth };
+                    var header = swimLaneShape.lanes[0].header;
+                    var laneStyle = swimLaneShape.lanes[0].style;
+                    var headerStyle = header.style;
+                    var headerObj = {
+                        id: 'header' + randomId(), shape: { type: 'Basic', shape: 'Rectangle' },
+                        width: isHorizontal ? header.width : swimLaneObj.width,
+                        height: isHorizontal ? swimLaneObj.height : header.height,
+                        style: headerStyle,
+                        annotations: [{ content: header.content.content }]
+                    };
+                    headerObj.offsetX = headerObj.width / 2;
+                    headerObj.offsetY = headerObj.height / 2;
+                    this.addPaletteItem(symbolGroup.id, headerObj);
+                    var laneObj = {
+                        id: 'lane' + randomId(), shape: { type: 'Basic', shape: 'Rectangle' },
+                        width: isHorizontal ? (swimLaneObj.width - header.width) : swimLaneObj.width,
+                        height: isHorizontal ? swimLaneObj.height : (swimLaneObj.height - header.height),
+                        style: laneStyle
+                    };
+                    laneObj.offsetX = isHorizontal ? (headerObj.width + (laneObj.width / 2)) : laneObj.width / 2;
+                    laneObj.offsetY = isHorizontal ? laneObj.height / 2 : (headerObj.height + (laneObj.height / 2));
+                    this.addPaletteItem(symbolGroup.id, laneObj);
+                    swimLaneObj.children = [headerObj.id, laneObj.id];
+                }
+                else if (swimLaneShape.isPhase) {
+                    laneHeight = swimLaneObj.height ? swimLaneObj.height : this.symbolHeight;
+                    laneWidth = swimLaneObj.width ? swimLaneObj.width : this.symbolWidth;
+                    symbol.shape.type = 'Path';
+                    if (isHorizontal) {
+                        symbol.shape.data =
+                            'M' + 20 + ',' + (laneHeight / 2) + ' L' + (laneWidth - 20) + ',' + (laneHeight / 2) + 'z';
+                    }
+                    else {
+                        symbol.shape.data =
+                            'M' + (laneWidth / 2) + ',' + 20 + ' L' + (laneWidth / 2) + ',' + (laneHeight - 20) + 'z';
+                    }
+                }
+            }
             if (symbol instanceof Node) {
@@ -407,3 +467,5 @@ var getNodeDefaults = getFunction(this.getNodeDefaults);
                 var paletteDiv = document.getElementById(symbolPaletteGroup.id);
-                paletteDiv.appendChild(this.getSymbolContainer(obj, paletteDiv));
+                if (paletteDiv) {
+                    paletteDiv.appendChild(this.getSymbolContainer(obj, paletteDiv));
+                }
                 break;
@@ -498,4 +560,6 @@ }
                 var actualHeight = height;
+                var isLane = symbol.shape.isLane ? true : false;
                 if (this.symbolWidth !== undefined) {
-                    actualWidth = this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;
+                    actualWidth = isLane ? this.laneTable[obj.id].width :
+                        this.symbolWidth - this.symbolMargin.left - this.symbolMargin.right;
                 }
@@ -506,3 +570,4 @@ else {
                 if (this.symbolHeight !== undefined) {
-                    actualHeight = this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;
+                    actualHeight = isLane ? this.laneTable[obj.id].height :
+                        this.symbolHeight - this.symbolMargin.top - this.symbolMargin.bottom;
                 }
@@ -509,0 +574,0 @@ else {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

253

increased by10.48%

Worsened metrics

Total package byte prevSize

21789094

decreased by-18.66%

Lines of code

161187

decreased by-3.55%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@syncfusion/ej2-base@16.4.52(transitive)

• + Added@syncfusion/ej2-buttons@16.4.55(transitive)

• + Added@syncfusion/ej2-data@16.4.52(transitive)

• + Added@syncfusion/ej2-inputs@16.4.55(transitive)

• + Added@syncfusion/ej2-lists@16.4.52(transitive)

• + Added@syncfusion/ej2-navigations@16.4.54(transitive)

• + Added@syncfusion/ej2-popups@16.4.54(transitive)

• + Added@syncfusion/ej2-splitbuttons@16.4.53(transitive)

• - Removed@syncfusion/ej2-base@16.3.34(transitive)

• - Removed@syncfusion/ej2-buttons@16.3.34(transitive)

• - Removed@syncfusion/ej2-data@16.3.34(transitive)

• - Removed@syncfusion/ej2-inputs@16.3.34(transitive)

• - Removed@syncfusion/ej2-lists@16.3.34(transitive)

• - Removed@syncfusion/ej2-navigations@16.3.34(transitive)

• - Removed@syncfusion/ej2-popups@16.3.34(transitive)

• - Removed@syncfusion/ej2-splitbuttons@16.3.34(transitive)

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

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

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

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

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

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

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