@syncfusion/ej2-diagrams - npm Package Compare versions

Comparing version 16.3.21 to 16.3.24

CHANGELOG.md

@@ -11,13 +11,13 @@ # Changelog
 
-- Data binding for Native and HTML nodes not working has been fixed.
+- Data binding for Native and HTML nodes is now working properly.
 - Issue with apply gradient for BPMN shapes has been fixed.
 - Issue with drop event argument has been fixed.
-- Image node issue in symbol palette has been fixed.
+- The image node is now rendered properly in the symbol palette.
 
 #### New Features
 
-- Annotation interaction support has been added.
-- Rendering group node on symbol palette has been added.
+- Annotation can be moved, rotated, and resized interactively.
+- Group node can be added into the symbol palette.
 - Poly line connector tool support has been added.
-- Text annotation interaction support has been added.
+- Text annotation can be associated with BPMN nodes interactively.
 
@@ -24,0 +24,0 @@ ## 16.2.47 (2018-08-07)

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.21
+*  version : 16.3.24
 *  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.21",
+  "version": "16.3.24",
   "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.21",
-    "@syncfusion/ej2-data": "~16.3.21",
-    "@syncfusion/ej2-navigations": "~16.3.21",
-    "@syncfusion/ej2-inputs": "~16.3.21",
-    "@syncfusion/ej2-popups": "~16.3.21",
-    "@syncfusion/ej2-buttons": "~16.3.21",
-    "@syncfusion/ej2-lists": "~16.3.21"
+    "@syncfusion/ej2-base": "~16.3.24",
+    "@syncfusion/ej2-data": "~16.3.24",
+    "@syncfusion/ej2-navigations": "~16.3.24",
+    "@syncfusion/ej2-inputs": "~16.3.24",
+    "@syncfusion/ej2-popups": "~16.3.24",
+    "@syncfusion/ej2-buttons": "~16.3.24",
+    "@syncfusion/ej2-lists": "~16.3.24"
   },
@@ -20,0 +20,0 @@ "devDependencies": {

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 } 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 } 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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/diagram/diagram.d.ts

@@ -26,2 +26,3 @@ import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
 import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, NudgeDirection } from './enum/enum';
+import { RealAction } from './enum/enum';
 import { Rect } from './primitives/rect';
@@ -898,3 +899,4 @@ import { PointPortModel } from './objects/port-model';
     selectionConnectorsList: ConnectorModel[];
-    private realActions;
+    realActions: RealAction;
+    private deleteVirtualObject;
     /**
@@ -925,2 +927,6 @@ * Constructor for creating the widget
     /**
+     * Method to set culture for chart
+     */
+    private setCulture();
+    /**
      * Renders the diagram control with nodes and connectors
@@ -1398,2 +1404,4 @@ */
     refreshSvgDiagramLayer(view: View): void;
+    private removeVirtualObjects(clearIntervalVal);
+    updateVirtualObjects(collection: string[], remove: boolean, tCollection?: string[]): void;
     /** @private */
@@ -1521,2 +1529,3 @@ renderDiagramElements(canvas: HTMLCanvasElement | SVGElement, renderer: DiagramRenderer, htmlLayer: HTMLElement, transform?: boolean, fromExport?: boolean): void;
     private initDroppables();
+    private removeChildNodes(node);
     private findChild(node, childTable);
@@ -1523,0 +1532,0 @@ private getChildren(node, entryTable, childTable);

src/diagram/enum/enum.d.ts

@@ -559,2 +559,3 @@ /**
  * ZoomTextEdit - Enables/Disables zooming the text box while editing the text
+ * Virtualization - Enables/Disable Virtualization support the diagram
  * Default - Enables/Disable all constraints
@@ -589,2 +590,4 @@ * @aspNumberEnum
     ZoomTextEdit = 512,
+    /** Enables/Disable Virtualization support the diagram */
+    Virtualization = 1024,
     /** Enables/Disable all constraints */
@@ -1237,2 +1240,7 @@ Default = 500,
     PreventScale = 4,
+    PreventDataInit = 8,
+    /** Indicates when the diagram is scrolled horizontal using scroll bar */
+    hScrollbarMoved = 16,
+    /** Indicates when the diagram is scrolled vertical using scroll bar */
+    vScrollbarMoved = 32,
 }
@@ -1239,0 +1247,0 @@ /** @private */

src/diagram/enum/enum.js

@@ -349,2 +349,3 @@ /**
  * ZoomTextEdit - Enables/Disables zooming the text box while editing the text
+ * Virtualization - Enables/Disable Virtualization support the diagram
  * Default - Enables/Disable all constraints
@@ -380,2 +381,4 @@ * @aspNumberEnum
     DiagramConstraints[DiagramConstraints["ZoomTextEdit"] = 512] = "ZoomTextEdit";
+    /** Enables/Disable Virtualization support the diagram */
+    DiagramConstraints[DiagramConstraints["Virtualization"] = 1024] = "Virtualization";
     /** Enables/Disable all constraints */
@@ -699,2 +702,7 @@ DiagramConstraints[DiagramConstraints["Default"] = 500] = "Default";
     RealAction[RealAction["PreventScale"] = 4] = "PreventScale";
+    RealAction[RealAction["PreventDataInit"] = 8] = "PreventDataInit";
+    /** Indicates when the diagram is scrolled horizontal using scroll bar */
+    RealAction[RealAction["hScrollbarMoved"] = 16] = "hScrollbarMoved";
+    /** Indicates when the diagram is scrolled vertical using scroll bar */
+    RealAction[RealAction["vScrollbarMoved"] = 32] = "vScrollbarMoved";
 })(RealAction || (RealAction = {}));
@@ -701,0 +709,0 @@ /** @private */

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

@@ -218,6 +218,7 @@ import { IElement } from '../objects/interface/IElement';
     rotatePoints(conn: Connector, angle: number, pivot: PointModel): void;
+    private updateInnerParentProperties(tempNode);
     /** @private */
     scale(obj: NodeModel | ConnectorModel, sw: number, sh: number, pivot: PointModel, refObject?: IElement): boolean;
     /** @private */
-    getAllDescendants(node: NodeModel, nodes: (NodeModel | ConnectorModel)[], includeParent?: boolean): (NodeModel | ConnectorModel)[];
+    getAllDescendants(node: NodeModel, nodes: (NodeModel | ConnectorModel)[], includeParent?: boolean, innerParent?: boolean): (NodeModel | ConnectorModel)[];
     getChildren(node: NodeModel, nodes: (NodeModel | ConnectorModel)[]): (NodeModel | ConnectorModel)[];
@@ -224,0 +225,0 @@ /** @private */

src/diagram/interaction/scroller.d.ts

@@ -11,2 +11,4 @@ import { Diagram } from '../diagram';
     transform: TransformFactor;
+    oldCollectionObjects: string[];
+    removeCollection: string[];
     private diagram;
@@ -47,2 +49,5 @@ private objects;
     /** @private */
+    getObjects(coll1: string[], coll2: string[]): string[];
+    virtualizeElements(): void;
+    /** @private */
     setSize(): void;
@@ -49,0 +54,0 @@ /** @private */

src/diagram/interaction/scroller.js

 import { Rect } from '../primitives/rect';
+import { RealAction } from '../enum/enum';
 import { identityMatrix, scaleMatrix, translateMatrix, transformPointByMatrix, multiplyMatrix } from '../primitives/matrix';
@@ -11,2 +12,4 @@ import { updateRuler } from '../ruler/ruler';
         this.transform = { tx: 0, ty: 0, scale: 1 };
+        this.oldCollectionObjects = [];
+        this.removeCollection = [];
         this.vPortWidth = 0;
@@ -77,2 +80,3 @@ this.vPortHeight = 0;
             if (Math.abs(this.hOffset - this.diagram.scrollSettings.horizontalOffset) > 1) {
+                this.diagram.realActions = this.diagram.realActions | RealAction.hScrollbarMoved;
                 this.scrolled = true;
@@ -94,2 +98,3 @@ }
             if (Math.abs(this.vOffset - this.diagram.scrollSettings.verticalOffset) > 1) {
+                this.diagram.realActions = this.diagram.realActions | RealAction.vScrollbarMoved;
                 this.scrolled = true;
@@ -214,2 +219,35 @@ }
     /** @private */
+    DiagramScroller.prototype.getObjects = function (coll1, coll2) {
+        var objects = [];
+        for (var i = 0; i < coll1.length; i++) {
+            var isExist = false;
+            for (var j = 0; j < coll2.length; j++) {
+                if (coll1[i] === coll2[j]) {
+                    isExist = true;
+                    break;
+                }
+            }
+            if (!isExist) {
+                objects.push(coll1[i]);
+            }
+        }
+        return objects;
+    };
+    DiagramScroller.prototype.virtualizeElements = function () {
+        var viewWidth = this.viewPortWidth / this.currentZoom;
+        var viewHeight = this.viewPortHeight / this.currentZoom;
+        var oObjects = this.diagram.spatialSearch.findObjects(new Rect(-this.horizontalOffset / this.currentZoom, -this.verticalOffset / this.currentZoom, viewWidth, viewHeight));
+        var oObjectsID = [];
+        for (var i = 0; i < oObjects.length; i++) {
+            oObjectsID.push(oObjects[i].id);
+        }
+        var newObjects = this.getObjects(oObjectsID, this.oldCollectionObjects);
+        if (this.oldCollectionObjects.length === 0) {
+            this.oldCollectionObjects = oObjectsID;
+        }
+        var removeObjects = this.getObjects(this.oldCollectionObjects, oObjectsID);
+        this.diagram.updateVirtualObjects(newObjects, false, removeObjects);
+        this.oldCollectionObjects = oObjectsID;
+    };
+    /** @private */
     DiagramScroller.prototype.setSize = function () {
@@ -216,0 +254,0 @@ var pageBounds = this.getPageBounds();

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

@@ -330,3 +330,3 @@ import { Container } from '../../core/containers/container';
     /** returns whether or not to cancel the drop event */
-    cancel: false;
+    cancel: boolean;
 }

src/diagram/rendering/renderer.d.ts

@@ -42,5 +42,5 @@ import { DiagramElement } from '../core/elements/diagram-element';
     private getParentSvg(element, targetElement?, canvas?);
-    private getParentElement(element, defaultParent, svgElement);
-    private getGroupElement(element, canvas);
-    renderElement(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean): void;
+    private getParentElement(element, defaultParent, svgElement, indexValue?);
+    private getGroupElement(element, canvas, indexValue?);
+    renderElement(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean, indexValue?: number): void;
     drawSelectionRectangle(x: number, y: number, w: number, h: number, canvas: HTMLCanvasElement | SVGElement, t: Transforms): void;
@@ -74,3 +74,3 @@ /**
     renderImageElement(element: ImageElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
-    renderContainer(group: Container, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean): void;
+    renderContainer(group: Container, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean, indexValue?: number): void;
     hasNativeParent(children: DiagramElement[], count?: number): DiagramElement;
@@ -77,0 +77,0 @@ renderRect(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement): void;

src/diagram/rendering/renderer.js

@@ -67,3 +67,3 @@ import { PathElement } from '../core/elements/path-element';
     };
-    DiagramRenderer.prototype.getParentElement = function (element, defaultParent, svgElement) {
+    DiagramRenderer.prototype.getParentElement = function (element, defaultParent, svgElement, indexValue) {
         var layerGElement = defaultParent;
@@ -85,3 +85,3 @@ if (svgElement && this.diagramId && element && element.id) {
             }
-            var groupElement = this.getGroupElement(element, defaultParent || layerGElement);
+            var groupElement = this.getGroupElement(element, defaultParent || layerGElement, indexValue);
             layerGElement = groupElement.g;
@@ -94,3 +94,3 @@ if (groupElement.svg) {
     };
-    DiagramRenderer.prototype.getGroupElement = function (element, canvas) {
+    DiagramRenderer.prototype.getGroupElement = function (element, canvas, indexValue) {
         var gElement;
@@ -110,3 +110,8 @@ var parentSvg = this.getParentSvg(element);
                 gElement = this.svgRenderer.createGElement('g', { id: element.id + '_groupElement' });
-                canvas.appendChild(gElement);
+                if (indexValue !== undefined && canvas.childNodes.length > indexValue) {
+                    canvas.insertBefore(gElement, canvas.childNodes[indexValue]);
+                }
+                else {
+                    canvas.appendChild(gElement);
+                }
             }
@@ -116,5 +121,5 @@ }
     };
-    DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette) {
+    DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue) {
         if (element instanceof Container) {
-            this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette);
+            this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue);
         }
@@ -645,3 +650,5 @@ else if (element instanceof ImageElement) {
             var defs = svgGrid.getElementById(this.diagramId + '_grid_pattern_defn');
-            defs.appendChild(pattern);
+            if (defs) {
+                defs.appendChild(pattern);
+            }
         }
@@ -822,3 +829,3 @@ };
     };
-    DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette) {
+    DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette, indexValue) {
         var svgParent = { svg: parentSvg, g: canvas };
@@ -829,3 +836,3 @@ if (this.diagramId) {
                 var groupElement = void 0;
-                groupElement = this.getParentElement(group, canvas, parentSvg).g || canvas;
+                groupElement = this.getParentElement(group, canvas, parentSvg, indexValue).g || canvas;
                 parentSvg = this.getParentSvg(this.hasNativeParent(group.children)) || parentSvg;
@@ -832,0 +839,0 @@ var svgNativeParent = this.getParentElement(this.hasNativeParent(group.children), groupElement, parentSvg);

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

@@ -40,2 +40,4 @@ import { Diagram } from '../diagram';
 /** @private */
+export declare function canVitualize(diagram: Diagram): number;
+/** @private */
 export declare function canEnableToolTip(node: ConnectorModel | NodeModel, diagram: Diagram): number;
@@ -42,0 +44,0 @@ /** @private */

src/diagram/utility/constraints-util.js

@@ -168,2 +168,6 @@ import { Node } from './../objects/node';
 /** @private */
+export function canVitualize(diagram) {
+    return diagram.constraints & DiagramConstraints.Virtualization;
+}
+/** @private */
 export function canEnableToolTip(node, diagram) {
@@ -170,0 +174,0 @@ var state = 0;

No alert changes

Improved metrics

Total package byte prevSize

26677457

increased by35.96%

Lines of code

164925

increased by15.31%

Worsened metrics

Number of package files

229

decreased by-0.43%

Dependency changes

• Updated@syncfusion/ej2-base@~16.3.24

• Updated@syncfusion/ej2-buttons@~16.3.24

• Updated@syncfusion/ej2-data@~16.3.24

• Updated@syncfusion/ej2-inputs@~16.3.24

• Updated@syncfusion/ej2-lists@~16.3.24

• Updated@syncfusion/ej2-navigations@~16.3.24

• Updated@syncfusion/ej2-popups@~16.3.24