@syncfusion/ej2-diagrams - npm Package Compare versions

Comparing version 16.3.17 to 16.3.21

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## 16.3.17 (2018-09-12)
+
 ### Diagram
@@ -7,0 +9,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.17
+*  version : 16.3.21
 *  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.17",
+  "version": "16.3.21",
   "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.17",
-    "@syncfusion/ej2-data": "~16.3.17",
-    "@syncfusion/ej2-navigations": "~16.3.17",
-    "@syncfusion/ej2-inputs": "~16.3.17",
-    "@syncfusion/ej2-popups": "~16.3.17",
-    "@syncfusion/ej2-buttons": "~16.3.17",
-    "@syncfusion/ej2-lists": "~16.3.17"
+    "@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"
   },
@@ -44,3 +44,4 @@ "devDependencies": {
   },
-  "homepage": "https://www.syncfusion.com/products/javascript/diagram"
+  "homepage": "https://www.syncfusion.com/products/javascript/diagram",
+  "sideEffects": false
 }

README.md

@@ -5,3 +5,3 @@ # ej2-diagrams
 
-![Grid](https://ej2.syncfusion.com/products/images/diagram/read-me.gif)
+![Diagram](https://ej2.syncfusion.com/products/images/diagram/read-me.gif)
 
@@ -8,0 +8,0 @@ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

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 { 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 } 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

@@ -897,4 +897,3 @@ import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
     selectionConnectorsList: ConnectorModel[];
-    /** @private */
-    preventScale: boolean;
+    private realActions;
     /**
@@ -1398,3 +1397,3 @@ * Constructor for creating the widget
     /** @private */
-    renderDiagramElements(canvas: HTMLCanvasElement | SVGElement, renderer: DiagramRenderer, htmlLayer: HTMLElement, transform?: boolean): void;
+    renderDiagramElements(canvas: HTMLCanvasElement | SVGElement, renderer: DiagramRenderer, htmlLayer: HTMLElement, transform?: boolean, fromExport?: boolean): void;
     /** @private */
@@ -1401,0 +1400,0 @@ updateBridging(isLoad?: boolean): void;

src/diagram/enum/enum.d.ts

@@ -1231,2 +1231,7 @@ /**
 }
+export declare enum RealAction {
+    None = 0,
+    PreventDrag = 2,
+    PreventScale = 4,
+}
 /** @private */
@@ -1233,0 +1238,0 @@ export declare enum NoOfSegments {

src/diagram/enum/enum.js

@@ -692,2 +692,8 @@ /**
 })(DiagramAction || (DiagramAction = {}));
+export var RealAction;
+(function (RealAction) {
+    RealAction[RealAction["None"] = 0] = "None";
+    RealAction[RealAction["PreventDrag"] = 2] = "PreventDrag";
+    RealAction[RealAction["PreventScale"] = 4] = "PreventScale";
+})(RealAction || (RealAction = {}));
 /** @private */
@@ -694,0 +700,0 @@ export var NoOfSegments;

src/diagram/interaction/actions.js

@@ -86,3 +86,6 @@ import { Connector } from '../objects/connector';
             var y = element.offsetY - element.pivot.y * element.actualSize.height;
-            var rotateThumb = { x: x + element.actualSize.width / 2, y: y - 30 / diagram.scroller.currentZoom };
+            var rotateThumb = {
+                x: x + ((element.pivot.x === 0.5 ? element.pivot.x * 2 : element.pivot.x) * element.actualSize.width / 2),
+                y: y - 30 / diagram.scroller.currentZoom
+            };
             rotateThumb = transformPointByMatrix(matrix, rotateThumb);
@@ -89,0 +92,0 @@ var labelSelection = diagram.selectedItems.annotation ? true : false;

src/diagram/interaction/scroller.js

@@ -21,2 +21,8 @@ import { Rect } from '../primitives/rect';
         this.objects = [];
+        this.transform = diagram.scroller ? diagram.scroller.transform : { tx: 0, ty: 0, scale: 1 };
+        this.vPortWidth = diagram.scrollSettings.viewPortWidth;
+        this.vPortHeight = diagram.scrollSettings.viewPortHeight;
+        this.currentZoomFActor = diagram.scrollSettings.currentZoom;
+        this.hOffset = diagram.scrollSettings.horizontalOffset;
+        this.vOffset = diagram.scrollSettings.verticalOffset;
     }
@@ -23,0 +29,0 @@ Object.defineProperty(DiagramScroller.prototype, "viewPortHeight", {

src/diagram/interaction/spatial-search/spatial-search.d.ts

@@ -36,2 +36,4 @@ import { Rect } from '../../primitives/rect';
     private addIntoAQuad(node);
+    /** @private */
+    private objectIndex(objects, node);
     updateQuad(node: IGroupable): boolean;
@@ -38,0 +40,0 @@ private isWithinPageBounds(node);

src/diagram/interaction/spatial-search/spatial-search.js

@@ -22,3 +22,3 @@ import { Rect } from '../../primitives/rect';
             var quad = this.quadTable[node.id];
-            var index = quad.objects.indexOf(node);
+            var index = this.objectIndex(quad.objects, node);
             if (index !== -1) {
@@ -62,2 +62,11 @@ quad.objects.splice(index, 1);
     };
+    /** @private */
+    SpatialSearch.prototype.objectIndex = function (objects, node) {
+        for (var i = 0; i < objects.length; i++) {
+            if ((objects[i]).id === node.id) {
+                return i;
+            }
+        }
+        return -1;
+    };
     SpatialSearch.prototype.updateQuad = function (node) {
@@ -64,0 +73,0 @@ this.setCurrentNode(node);

src/diagram/objects/node.js

@@ -490,2 +490,11 @@ var __extends = (this && this.__extends) || (function () {
         _this.inEdges = [];
+        if (_this.children && _this.children.length > 0) {
+            var nodeDefault = defaultValue;
+            if (!nodeDefault.style || !nodeDefault.style.fill) {
+                _this.style.fill = 'transparent';
+            }
+            if (!nodeDefault.style || !nodeDefault.style.strokeColor) {
+                _this.style.strokeColor = 'transparent';
+            }
+        }
         return _this;
@@ -492,0 +501,0 @@ }

src/diagram/print-settings.js

@@ -412,3 +412,3 @@ import { Browser } from '@syncfusion/ej2-base';
         var renderer = new DiagramRenderer('', null, false);
-        this.diagram.renderDiagramElements(canvas, renderer, htmlLayer, false);
+        this.diagram.renderDiagramElements(canvas, renderer, htmlLayer, false, true);
         return canvas;
@@ -415,0 +415,0 @@ };

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

@@ -23,3 +23,4 @@ import { PointModel } from './../primitives/point-model';
     drawText(canvas: HTMLCanvasElement, options: TextAttributes): void;
-    drawImage(canvas: HTMLCanvasElement, obj: ImageAttributes): void;
+    private loadImage(ctx, obj);
+    drawImage(canvas: HTMLCanvasElement, obj: ImageAttributes, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
     private image(ctx, image, x, y, width, height, alignOptions);
@@ -26,0 +27,0 @@ private getSliceOffset(arg, res, dest, src);

src/diagram/rendering/canvas-renderer.js

@@ -420,3 +420,10 @@ import { Size } from './../primitives/size';
     };
-    CanvasRenderer.prototype.drawImage = function (canvas, obj) {
+    CanvasRenderer.prototype.loadImage = function (ctx, obj) {
+        ctx.rotate(obj.angle * Math.PI / 180);
+        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));
+    };
+    CanvasRenderer.prototype.drawImage = function (canvas, obj, parentSvg, fromPalette) {
         var _this = this;
@@ -439,9 +446,10 @@ if (obj.visible) {
              */
-            imageObj.onload = function () {
-                ctx_1.rotate(obj.angle * Math.PI / 180);
-                var image = new Image();
-                image.src = obj.source;
-                _this.image(ctx_1, image, obj.x, obj.y, obj.width, obj.height, obj);
-                ctx_1.rotate(-(obj.angle * Math.PI / 180));
-            };
+            if (!fromPalette) {
+                this.loadImage(ctx_1, obj);
+            }
+            else {
+                imageObj.onload = function () {
+                    _this.loadImage(ctx_1, obj);
+                };
+            }
             ctx_1.restore();
@@ -448,0 +456,0 @@ }

src/diagram/rendering/IRenderer.d.ts

@@ -15,3 +15,3 @@ import { PathAttributes, TextAttributes } from './canvas-interface';
     drawText(canvas: HTMLCanvasElement | SVGElement, options: TextAttributes, parentSvg?: SVGSVGElement, ariaLabel?: Object, diagramId?: string): void;
-    drawImage(canvas: HTMLCanvasElement | SVGElement | ImageElement, obj: ImageAttributes, parentSvg?: SVGSVGElement): void;
+    drawImage(canvas: HTMLCanvasElement | SVGElement | ImageElement, obj: ImageAttributes, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
 }

src/diagram/rendering/renderer.d.ts

@@ -44,3 +44,3 @@ import { DiagramElement } from '../core/elements/diagram-element';
     private getGroupElement(element, canvas);
-    renderElement(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean): void;
+    renderElement(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean): void;
     drawSelectionRectangle(x: number, y: number, w: number, h: number, canvas: HTMLCanvasElement | SVGElement, t: Transforms): void;
@@ -63,3 +63,3 @@ /**
     renderRotateThumb(wrapper: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, selectorConstraints?: SelectorConstraints, canMask?: boolean): void;
-    renderPathElement(element: PathElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement): void;
+    renderPathElement(element: PathElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
     renderSvgGridlines(snapSettings: SnapSettingsModel, gridSvg: SVGElement, t: Transforms, rulerSettings: RulerSettingsModel, hRuler: RulerModel, vRuler: RulerModel): void;
@@ -71,7 +71,7 @@ private horizontalSvgGridlines(pattern, hWidth, hHeight, scale, snapSettings, rulerSettings, vRuler, isRulerGrid);
     private scaleSnapInterval(snapSettings, scale);
-    renderTextElement(element: TextElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement): void;
-    private renderNativeElement(element, canvas, transform?, parentSvg?);
-    private renderHTMLElement(element, canvas, htmlLayer, transform?, parentSvg?);
-    renderImageElement(element: ImageElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement): void;
-    renderContainer(group: Container, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean): void;
+    renderTextElement(element: TextElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
+    private renderNativeElement(element, canvas, transform?, parentSvg?, fromPalette?);
+    private renderHTMLElement(element, canvas, htmlLayer, transform?, parentSvg?, fromPalette?);
+    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;
     hasNativeParent(children: DiagramElement[], count?: number): DiagramElement;
@@ -78,0 +78,0 @@ renderRect(element: DiagramElement, canvas: HTMLCanvasElement | SVGElement, transform?: Transforms, parentSvg?: SVGSVGElement): void;

src/diagram/rendering/renderer.js

@@ -112,20 +112,20 @@ import { PathElement } from '../core/elements/path-element';
     };
-    DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent) {
+    DiagramRenderer.prototype.renderElement = function (element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette) {
         if (element instanceof Container) {
-            this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent);
+            this.renderContainer(element, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette);
         }
         else if (element instanceof ImageElement) {
-            this.renderImageElement(element, canvas, transform, parentSvg);
+            this.renderImageElement(element, canvas, transform, parentSvg, fromPalette);
         }
         else if (element instanceof PathElement) {
-            this.renderPathElement(element, canvas, transform, parentSvg);
+            this.renderPathElement(element, canvas, transform, parentSvg, fromPalette);
         }
         else if (element instanceof TextElement) {
-            this.renderTextElement(element, canvas, transform, parentSvg);
+            this.renderTextElement(element, canvas, transform, parentSvg, fromPalette);
         }
         else if (element instanceof DiagramNativeElement) {
-            this.renderNativeElement(element, canvas, transform, parentSvg);
+            this.renderNativeElement(element, canvas, transform, parentSvg, fromPalette);
         }
         else if (element instanceof DiagramHtmlElement) {
-            this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg);
+            this.renderHTMLElement(element, canvas, htmlLayer, transform, parentSvg, fromPalette);
         }
@@ -485,3 +485,3 @@ else {
     };
-    DiagramRenderer.prototype.renderPathElement = function (element, canvas, transform, parentSvg) {
+    DiagramRenderer.prototype.renderPathElement = function (element, canvas, transform, parentSvg, fromPalette) {
         var options = this.getBaseAttributes(element, transform);
@@ -686,3 +686,3 @@ options.data = element.absolutePath;
     };
-    DiagramRenderer.prototype.renderTextElement = function (element, canvas, transform, parentSvg) {
+    DiagramRenderer.prototype.renderTextElement = function (element, canvas, transform, parentSvg, fromPalette) {
         var options = this.getBaseAttributes(element, transform);
@@ -714,3 +714,3 @@ options.cornerRadius = 0;
     };
-    DiagramRenderer.prototype.renderNativeElement = function (element, canvas, transform, parentSvg) {
+    DiagramRenderer.prototype.renderNativeElement = function (element, canvas, transform, parentSvg, fromPalette) {
         var templateWidth;
@@ -755,3 +755,3 @@ var templateHeight;
     };
-    DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg) {
+    DiagramRenderer.prototype.renderHTMLElement = function (element, canvas, htmlLayer, transform, parentSvg, fromPalette) {
         var options = this.getBaseAttributes(element, transform);
@@ -766,3 +766,3 @@ options.fill = 'transparent';
     };
-    DiagramRenderer.prototype.renderImageElement = function (element, canvas, transform, parentSvg) {
+    DiagramRenderer.prototype.renderImageElement = function (element, canvas, transform, parentSvg, fromPalette) {
         var options = this.getBaseAttributes(element, transform);
@@ -820,5 +820,5 @@ options.cornerRadius = 0;
         options.description = element.description ? element.description : element.id;
-        this.renderer.drawImage(canvas, options, parentSvg);
+        this.renderer.drawImage(canvas, options, parentSvg, fromPalette);
     };
-    DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent) {
+    DiagramRenderer.prototype.renderContainer = function (group, canvas, htmlLayer, transform, parentSvg, createParent, fromPalette) {
         var svgParent = { svg: parentSvg, g: canvas };
@@ -861,3 +861,3 @@ if (this.diagramId) {
                 }
-                this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true);
+                this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette);
             }
@@ -864,0 +864,0 @@ }

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

@@ -28,3 +28,3 @@ import { PointModel } from './../primitives/point-model';
     drawText(canvas: SVGElement, options: TextAttributes, parentSvg?: SVGSVGElement, ariaLabel?: Object, diagramId?: string): void;
-    drawImage(canvas: SVGElement | HTMLCanvasElement, obj: ImageAttributes, parentSvg?: SVGSVGElement): void;
+    drawImage(canvas: SVGElement | HTMLCanvasElement, obj: ImageAttributes, parentSvg?: SVGSVGElement, fromPalette?: boolean): void;
     /** @private */
@@ -31,0 +31,0 @@ drawHTMLContent(element: DiagramHtmlElement, canvas: HTMLElement, transform?: Transforms, value?: boolean): void;

src/diagram/rendering/svg-renderer.js

@@ -338,3 +338,3 @@ import { Point } from './../primitives/point';
     };
-    SvgRenderer.prototype.drawImage = function (canvas, obj, parentSvg) {
+    SvgRenderer.prototype.drawImage = function (canvas, obj, parentSvg, fromPalette) {
         var id = obj.id + '_image';
@@ -341,0 +341,0 @@ var image;

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

@@ -100,2 +100,4 @@ import { PointModel } from './../primitives/point-model';
 export declare function getElement(element: DiagramHtmlElement | DiagramNativeElement): Object;
+/** @private */
+export declare function getPoint(x: number, y: number, w: number, h: number, angle: number, offsetX: number, offsetY: number, cornerPoint: PointModel): PointModel;
 /**
@@ -102,0 +104,0 @@ * Get the object as Node | Connector

src/diagram/utility/diagram-util.js

@@ -1056,2 +1056,50 @@ import { Size } from './../primitives/size';
 }
+/** @private */
+export function getPoint(x, y, w, h, angle, offsetX, offsetY, cornerPoint) {
+    var pivot = { x: 0, y: 0 };
+    var trans = identityMatrix();
+    rotateMatrix(trans, angle, offsetX, offsetY);
+    switch (cornerPoint.x) {
+        case 0:
+            switch (cornerPoint.y) {
+                case 0:
+                    pivot = transformPointByMatrix(trans, ({ x: x, y: y }));
+                    break;
+                case 0.5:
+                    pivot = transformPointByMatrix(trans, ({ x: x, y: y + h / 2 }));
+                    break;
+                case 1:
+                    pivot = transformPointByMatrix(trans, ({ x: x, y: y + h }));
+                    break;
+            }
+            break;
+        case 0.5:
+            switch (cornerPoint.y) {
+                case 0:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y }));
+                    break;
+                case 0.5:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y + h / 2 }));
+                    break;
+                case 1:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w / 2, y: y + h }));
+                    break;
+            }
+            break;
+        case 1:
+            switch (cornerPoint.y) {
+                case 0:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w, y: y }));
+                    break;
+                case 0.5:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w, y: y + h / 2 }));
+                    break;
+                case 1:
+                    pivot = transformPointByMatrix(trans, ({ x: x + w, y: y + h }));
+                    break;
+            }
+            break;
+    }
+    return { x: pivot.x, y: pivot.y };
+}
 /**
@@ -1058,0 +1106,0 @@ * Get the object as Node | Connector

src/symbol-palette/symbol-palette.js

@@ -735,3 +735,3 @@ var __extends = (this && this.__extends) || (function () {
                 canvas.getContext('2d').setTransform(index, 0, 0, index, 0, 0);
-                this.diagramRenderer.renderElement(symbol.wrapper, gElement || canvas, undefined);
+                this.diagramRenderer.renderElement(symbol.wrapper, gElement || canvas, undefined, undefined, undefined, undefined, true);
             }
@@ -738,0 +738,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

19621630

increased by0.31%

Lines of code

143026

increased by0.3%

Dependency changes

• Updated@syncfusion/ej2-base@~16.3.21

• Updated@syncfusion/ej2-buttons@~16.3.21

• Updated@syncfusion/ej2-data@~16.3.21

• Updated@syncfusion/ej2-inputs@~16.3.21

• Updated@syncfusion/ej2-lists@~16.3.21

• Updated@syncfusion/ej2-navigations@~16.3.21

• Updated@syncfusion/ej2-popups@~16.3.21