@syncfusion/ej2-diagrams - npm Package Compare versions

Comparing version 16.4.52 to 16.4.53

CHANGELOG.md

@@ -7,5 +7,14 @@ # Changelog
 
+#### New Features
+
+- Support to flip the node/connector in both horizontal and vertical direction has been added.
+
+## 16.4.52 (2019-02-05)
+
+### Diagram
+
 #### Bug Fixes
 
 - Exception thrown while enable zoom and pan tool dynamically is now working fine.
+- Exception thrown while build the diagram component with production mode is now working fine.
 
@@ -12,0 +21,0 @@ ## 16.4.48 (2019-01-22)

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-diagrams",
-  "version": "16.4.52",
+  "version": "16.4.53",
   "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.",
@@ -13,6 +13,6 @@ "author": "Syncfusion Inc.",
     "@syncfusion/ej2-data": "~16.4.52",
-    "@syncfusion/ej2-navigations": "~16.4.52",
-    "@syncfusion/ej2-inputs": "~16.4.52",
-    "@syncfusion/ej2-popups": "~16.4.52",
-    "@syncfusion/ej2-buttons": "~16.4.52",
+    "@syncfusion/ej2-navigations": "~16.4.53",
+    "@syncfusion/ej2-inputs": "~16.4.53",
+    "@syncfusion/ej2-popups": "~16.4.53",
+    "@syncfusion/ej2-buttons": "~16.4.53",
     "@syncfusion/ej2-lists": "~16.4.52"
@@ -19,0 +19,0 @@ },

src/diagram/core/containers/canvas.js

@@ -16,5 +16,5 @@ var __extends = (this && this.__extends) || (function () {
 import { rotateSize } from '../../utility/base-util';
-import { Transform } from '../../enum/enum';
 import { Size } from '../../primitives/size';
 import { Rect } from '../../primitives/rect';
+import { Transform, ElementAction } from '../../enum/enum';
 import { TextElement } from '../elements/text-element';
@@ -108,2 +108,6 @@ /**
                     child.parentTransform = this.parentTransform + this.rotateAngle;
+                    if (this.flip !== 'None' || this.elementActions & ElementAction.ElementIsGroup) {
+                        child.parentTransform = (this.flip === 'Horizontal' || this.flip === 'Vertical') ?
+                            -child.parentTransform : child.parentTransform;
+                    }
                     var childSize = child.desiredSize.clone();
@@ -110,0 +114,0 @@ var topLeft = void 0;

src/diagram/core/containers/container.js

@@ -19,2 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { rotatePoint, getOffset } from '../../utility/base-util';
+import { ElementAction } from '../../enum/enum';
 /**
@@ -135,2 +136,6 @@ * Container module is used to group related objects
                         child.parentTransform = this.parentTransform + this.rotateAngle;
+                        if (this.flip && (this.elementActions & ElementAction.ElementIsGroup)) {
+                            child.parentTransform = (this.flip === 'Horizontal' || this.flip === 'Vertical') ?
+                                -child.parentTransform : child.parentTransform;
+                        }
                         arrange = true;
@@ -137,0 +142,0 @@ }

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

@@ -1,2 +0,2 @@
-import { HorizontalAlignment, VerticalAlignment, UnitMode, Transform, RelativeMode } from '../../enum/enum';
+import { HorizontalAlignment, VerticalAlignment, UnitMode, Transform, RelativeMode, FlipDirection, ElementAction } from '../../enum/enum';
 import { MarginModel, ShapeStyleModel, ShadowModel } from '../appearance-model';
@@ -110,2 +110,8 @@ import { Size } from '../../primitives/size';
     /**
+     * Sets/Gets the mirror image of diagram element in both horizontal and vertical directions
+     * * FlipHorizontal - Translate the diagram element throughout its immediate parent
+     * * FlipVertical - Rotate the diagram element throughout its immediate parent
+     */
+    flip: FlipDirection;
+    /**
      * Sets whether the element has to be aligned with respect to a point/with respect to its immediate parent
@@ -175,2 +181,12 @@ * * Point - Diagram elements will be aligned with respect to a point
     /**
+     * Set the offset values for container in flipping
+     */
+    /** @private */
+    flipOffset: PointModel;
+    /**
+     * Defines whether the element is group or port
+     */
+    /** @private */
+    elementActions: ElementAction;
+    /**
      * Sets the offset of the element with respect to its parent
@@ -177,0 +193,0 @@ * @param x

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

@@ -1,2 +0,2 @@
-import { Transform } from '../../enum/enum';
+import { Transform, ElementAction } from '../../enum/enum';
 import { Size } from '../../primitives/size';
@@ -106,2 +106,8 @@ import { Rect } from '../../primitives/rect';
         /**
+         * Sets/Gets the mirror image of diagram element in both horizontal and vertical directions
+         * * FlipHorizontal - Translate the diagram element throughout its immediate parent
+         * * FlipVertical - Rotate the diagram element throughout its immediate parent
+         */
+        this.flip = 'None';
+        /**
          * Sets whether the element has to be aligned with respect to a point/with respect to its immediate parent
@@ -162,2 +168,12 @@ * * Point - Diagram elements will be aligned with respect to a point
         this.isCalculateDesiredSize = true;
+        /**
+         * Set the offset values for container in flipping
+         */
+        /** @private */
+        this.flipOffset = { x: 0, y: 0 };
+        /**
+         * Defines whether the element is group or port
+         */
+        /** @private */
+        this.elementActions = ElementAction.None;
         //private variables
@@ -164,0 +180,0 @@ this.position = undefined;

src/diagram/diagram-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove, Ajax } from '@syncfusion/ej2-base';import { Browser, ModuleDeclaration, Event, EmitType } from '@syncfusion/ej2-base';import { INotifyPropertyChanged } from '@syncfusion/ej2-base';import { CanvasRenderer } from './rendering/canvas-renderer';import { SvgRenderer } from './rendering/svg-renderer';import { DiagramRenderer } from './rendering/renderer';import { BaseAttributes } from './rendering/canvas-interface';import { PageSettings, ScrollSettings } from './diagram/page-settings';import { PageSettingsModel, ScrollSettingsModel } from './diagram/page-settings-model';import { DiagramElement } from './core/elements/diagram-element';import { ServiceLocator } from './objects/service';import { IElement, IDataLoadedEventArgs, ISelectionChangeEventArgs, IClickEventArgs, ScrollValues } from './objects/interface/IElement';import { ISizeChangeEventArgs, IConnectionChangeEventArgs, IEndChangeEventArgs, IDoubleClickEventArgs } from './objects/interface/IElement';import { ICollectionChangeEventArgs, IPropertyChangeEventArgs, IDraggingEventArgs, IRotationEventArgs } from './objects/interface/IElement';import { IDragEnterEventArgs, IDragLeaveEventArgs, IDragOverEventArgs, IDropEventArgs } from './objects/interface/IElement';import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs, IMouseEventArgs } from './objects/interface/IElement';import { StackEntryObject } from './objects/interface/IElement';import { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel } from './objects/interface/interfaces';import { View, IDataSource, IFields } from './objects/interface/interfaces';import { Container } from './core/containers/container';import { Node, BpmnShape, BpmnAnnotation, SwimLane, Path } from './objects/node';import { Segment } from './interaction/scroller';import { Connector } from './objects/connector';import { ConnectorModel, BpmnFlowModel } from './objects/connector-model';import { SnapSettings } from './diagram/grid-lines';import { RulerSettings } from './diagram/ruler-settings';import { removeRulerElements, updateRuler, getRulerSize } from './ruler/ruler';import { renderRuler, renderOverlapElement } from './ruler/ruler';import { RulerSettingsModel } from './diagram/ruler-settings-model';import { SnapSettingsModel } from './diagram/grid-lines-model';import { NodeModel, TextModel, BpmnShapeModel, BpmnAnnotationModel } from './objects/node-model';import { UmlActivityShapeModel, SwimLaneModel, LaneModel } from './objects/node-model';import { Size } from './primitives/size';import { Point } from './primitives/point';import { Keys, KeyModifiers, DiagramTools, AlignmentMode, AnnotationConstraints, NodeConstraints, RendererAction } from './enum/enum';import { DiagramConstraints, BridgeDirection, AlignmentOptions, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, ThumbsConstraints, NudgeDirection } from './enum/enum';import { RealAction } from './enum/enum';import { PathElement } from './core/elements/path-element';import { TextElement } from './core/elements/text-element';import { updateStyle, removeItem, updateConnector, updateShape, setUMLActivityDefaults, findNodeByName } from './utility/diagram-util';import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType, removeGradient } from './utility/diagram-util';import { Rect } from './primitives/rect';import { getPortShape } from './objects/dictionary/common';import { PointPortModel } from './objects/port-model';import { ShapeAnnotationModel, AnnotationModel, PathAnnotationModel } from './objects/annotation-model';import { ShapeAnnotation, PathAnnotation, Annotation } from './objects/annotation';import { PointModel } from './primitives/point-model';import { Canvas } from './core/containers/canvas';import { GridPanel } from './core/containers/grid';import { DataSourceModel } from './diagram/data-source-model';import { DataSource } from './diagram/data-source';import { LayoutModel } from './layout/layout-base-model';import { Layout, INode, ILayout } from './layout/layout-base';import { DataBinding } from './data-binding/data-binding';import { Selector } from './interaction/selector';import { SelectorModel } from './interaction/selector-model';import { DiagramEventHandler } from './interaction/event-handlers';import { CommandHandler } from './interaction/command-manager';import { DiagramScroller } from './interaction/scroller';import { Actions, isSelected } from './interaction/actions';import { ToolBase } from './interaction/tool';import { BpmnDiagrams } from './objects/bpmn';import { DiagramContextMenu } from './objects/context-menu';import { ConnectorBridging } from './objects/connector-bridging';import { SpatialSearch } from './interaction/spatial-search/spatial-search';import { HistoryEntry, History } from './diagram/history';import { UndoRedo } from './objects/undo-redo';import { ConnectorEditing } from './interaction/connector-editing';import { Ruler } from '../ruler/index';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs, EJ2Instance } from '@syncfusion/ej2-navigations';import { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements } from './utility/dom-util';import { getDiagramElement, getScrollerWidth, getHTMLLayer } from './utility/dom-util';import { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg } from './utility/dom-util';import { getPortLayerSvg, getDiagramLayerSvg } from './utility/dom-util';import { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';import { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';import { CommandManagerModel, CommandModel, ContextMenuSettingsModel } from './diagram/keyboard-commands-model';import { canDelete, canInConnect, canOutConnect, canRotate, canVitualize } 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, ShadowModel } from './core/appearance-model';import { TransformFactor } from './interaction/scroller';import { RadialTree } from './layout/radial-tree';import { HierarchicalTree } from './layout/hierarchical-tree';import { ComplexHierarchicalTree } from './layout/complex-hierarchical-tree';import { MindMap } from './layout/mind-map';import { DiagramTooltip, initTooltip } from './objects/tooltip';import { Tooltip } from '@syncfusion/ej2-popups';import { PrintAndExport } from './print-settings';import { Port, PointPort } from './objects/port';import { SymmetricLayout, IGraphObject } from './layout/symmetrical-layout';import { LayoutAnimation } from './objects/layout-animation';import { canShadow } from './utility/constraints-util';import { Layer } from './diagram/layer';import { LayerModel } from './diagram/layer-model';import { DiagramNativeElement } from './core/elements/native-element';import { DiagramHtmlElement } from './core/elements/html-element';import { IconShapeModel } from './objects/icon-model';import { canAllowDrop } from './utility/constraints-util';import { checkParentAsContainer, addChildToContainer } from './interaction/container-interaction';import { DataManager } from '@syncfusion/ej2-data';import { ContextMenuItemModel } from './../diagram/objects/interface/interfaces';
+import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove, Ajax } from '@syncfusion/ej2-base';import { Browser, ModuleDeclaration, Event, EmitType } from '@syncfusion/ej2-base';import { INotifyPropertyChanged } from '@syncfusion/ej2-base';import { CanvasRenderer } from './rendering/canvas-renderer';import { SvgRenderer } from './rendering/svg-renderer';import { DiagramRenderer } from './rendering/renderer';import { BaseAttributes } from './rendering/canvas-interface';import { PageSettings, ScrollSettings } from './diagram/page-settings';import { PageSettingsModel, ScrollSettingsModel } from './diagram/page-settings-model';import { DiagramElement } from './core/elements/diagram-element';import { ServiceLocator } from './objects/service';import { IElement, IDataLoadedEventArgs, ISelectionChangeEventArgs, IClickEventArgs, ScrollValues } from './objects/interface/IElement';import { ISizeChangeEventArgs, IConnectionChangeEventArgs, IEndChangeEventArgs, IDoubleClickEventArgs } from './objects/interface/IElement';import { ICollectionChangeEventArgs, IPropertyChangeEventArgs, IDraggingEventArgs, IRotationEventArgs } from './objects/interface/IElement';import { IDragEnterEventArgs, IDragLeaveEventArgs, IDragOverEventArgs, IDropEventArgs } from './objects/interface/IElement';import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs, IMouseEventArgs } from './objects/interface/IElement';import { StackEntryObject } 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 { Keys, KeyModifiers, DiagramTools, AlignmentMode, AnnotationConstraints, NodeConstraints, RendererAction } from './enum/enum';import { DiagramConstraints, BridgeDirection, AlignmentOptions, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, ThumbsConstraints, NudgeDirection } from './enum/enum';import { RealAction, ElementAction, FlipDirection } from './enum/enum';import { PathElement } from './core/elements/path-element';import { TextElement } from './core/elements/text-element';import { updateStyle, removeItem, updateConnector, updateShape, setUMLActivityDefaults, findNodeByName } from './utility/diagram-util';import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType, removeGradient } from './utility/diagram-util';import { Rect } from './primitives/rect';import { getPortShape } from './objects/dictionary/common';import { PointPortModel } from './objects/port-model';import { ShapeAnnotationModel, AnnotationModel, PathAnnotationModel } from './objects/annotation-model';import { ShapeAnnotation, PathAnnotation, Annotation } from './objects/annotation';import { PointModel } from './primitives/point-model';import { Canvas } from './core/containers/canvas';import { GridPanel } from './core/containers/grid';import { DataSourceModel } from './diagram/data-source-model';import { DataSource } from './diagram/data-source';import { LayoutModel } from './layout/layout-base-model';import { Layout, INode, ILayout } from './layout/layout-base';import { DataBinding } from './data-binding/data-binding';import { Selector } from './interaction/selector';import { SelectorModel } from './interaction/selector-model';import { DiagramEventHandler } from './interaction/event-handlers';import { CommandHandler } from './interaction/command-manager';import { DiagramScroller } from './interaction/scroller';import { Actions, isSelected } from './interaction/actions';import { ToolBase } from './interaction/tool';import { BpmnDiagrams } from './objects/bpmn';import { DiagramContextMenu } from './objects/context-menu';import { ConnectorBridging } from './objects/connector-bridging';import { SpatialSearch } from './interaction/spatial-search/spatial-search';import { HistoryEntry, History } from './diagram/history';import { UndoRedo } from './objects/undo-redo';import { ConnectorEditing } from './interaction/connector-editing';import { Ruler } from '../ruler/index';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs, EJ2Instance } from '@syncfusion/ej2-navigations';import { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements } from './utility/dom-util';import { getDiagramElement, getScrollerWidth, getHTMLLayer } from './utility/dom-util';import { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg } from './utility/dom-util';import { getPortLayerSvg, getDiagramLayerSvg } from './utility/dom-util';import { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';import { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';import { CommandManagerModel, CommandModel, ContextMenuSettingsModel } from './diagram/keyboard-commands-model';import { canDelete, canInConnect, canOutConnect, canRotate, canVitualize } 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, ShadowModel } from './core/appearance-model';import { TransformFactor } from './interaction/scroller';import { RadialTree } from './layout/radial-tree';import { HierarchicalTree } from './layout/hierarchical-tree';import { ComplexHierarchicalTree } from './layout/complex-hierarchical-tree';import { MindMap } from './layout/mind-map';import { DiagramTooltip, initTooltip } from './objects/tooltip';import { Tooltip } from '@syncfusion/ej2-popups';import { PrintAndExport } from './print-settings';import { Port, PointPort } from './objects/port';import { SymmetricLayout, IGraphObject } from './layout/symmetrical-layout';import { LayoutAnimation } from './objects/layout-animation';import { canShadow } from './utility/constraints-util';import { Layer } from './diagram/layer';import { LayerModel } from './diagram/layer-model';import { DiagramNativeElement } from './core/elements/native-element';import { DiagramHtmlElement } from './core/elements/html-element';import { IconShapeModel } from './objects/icon-model';import { canAllowDrop } from './utility/constraints-util';import { checkParentAsContainer, addChildToContainer } from './interaction/container-interaction';import { DataManager } from '@syncfusion/ej2-data';import { ContextMenuItemModel } from './../diagram/objects/interface/interfaces';import { flipConnector, updatePortEdges, alignElement } from './utility/diagram-util';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

src/diagram/diagram.d.ts

@@ -1528,2 +1528,4 @@ import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
     nodePropertyChange(actualObject: Node, oldObject: Node, node: Node, isLayout?: boolean, rotate?: boolean): void;
+    private updatePorts;
+    private updateFlipOffset;
     private updateUMLActivity;
@@ -1530,0 +1532,0 @@ private updateConnectorProperties;

src/diagram/enum/enum.js

@@ -295,2 +295,17 @@ /**
 })(NodeConstraints || (NodeConstraints = {}));
+/** Enables/Disables The element actions
+ * None - Diables all element actions are none
+ * ElementIsPort - Enable element action is port
+ * ElementIsGroup - Enable element action as Group
+ * @private
+ */
+export var ElementAction;
+(function (ElementAction) {
+    /** Disables all element actions are none  */
+    ElementAction[ElementAction["None"] = 0] = "None";
+    /** Enable the element action is Port  */
+    ElementAction[ElementAction["ElementIsPort"] = 2] = "ElementIsPort";
+    /** Enable the element action as Group  */
+    ElementAction[ElementAction["ElementIsGroup"] = 4] = "ElementIsGroup";
+})(ElementAction || (ElementAction = {}));
 /** Enables/Disables the handles of the selector
@@ -297,0 +312,0 @@ * Rotate - Enable Rotate Thumb

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

src/diagram/objects/connector.js

@@ -31,2 +31,3 @@ var __extends = (this && this.__extends) || (function () {
 import { randomId, getFunction } from './../utility/base-util';
+import { flipConnector } from './../utility/diagram-util';
 import { PathElement } from '../core/elements/path-element';
@@ -931,2 +932,3 @@ import { PathAnnotation } from './annotation';
         var points = [];
+        flipConnector(connector);
         points = this.getConnectorPoints(connector.type);
@@ -933,0 +935,0 @@ this.intermediatePoints = points;

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

@@ -1,2 +0,2 @@
-import { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';import { Margin } from '../core/appearance';import { PointPortModel } from './port-model';import { MarginModel } from '../core/appearance-model';import { DiagramTooltipModel } from './tooltip-model';import { IconShape } from './icon';import { IconShapeModel } from './icon-model';import { DiagramTooltip } from './tooltip';import { PointPort } from './port';
+import { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';import { Margin } from '../core/appearance';import { PointPortModel } from './port-model';import { MarginModel } from '../core/appearance-model';import { DiagramTooltipModel } from './tooltip-model';import { IconShape } from './icon';import { IconShapeModel } from './icon-model';import { DiagramTooltip } from './tooltip';import { PointPort } from './port';import { FlipDirection } from '../enum/enum';
 
@@ -76,2 +76,9 @@ /**
 
+    /**
+     * Flip the element in Horizontal/Vertical directions
+     * @aspDefaultValueIgnore
+     * @default None
+     */
+    flip?: FlipDirection;
+
 }

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

@@ -6,2 +6,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 import { IconShapeModel } from './icon-model';
+import { FlipDirection } from '../enum/enum';
 /**
@@ -68,2 +69,8 @@ * Defines the common behavior of nodes, connectors and groups
     addInfo: Object;
+    /**
+     * Flip the element in Horizontal/Vertical directions
+     * @aspDefaultValueIgnore
+     * @default None
+     */
+    flip: FlipDirection;
 }

src/diagram/objects/node-base.js

@@ -66,4 +66,7 @@ var __extends = (this && this.__extends) || (function () {
     ], NodeBase.prototype, "addInfo", void 0);
+    __decorate([
+        Property('None')
+    ], NodeBase.prototype, "flip", void 0);
     return NodeBase;
 }(ChildProperty));
 export { NodeBase };

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

@@ -1,2 +0,2 @@
-import { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';import { ShapeStyle, Margin, TextStyle, Shadow } from '../core/appearance';import { ShapeStyleModel, TextStyleModel, ShadowModel, } from '../core/appearance-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { PointModel } from '../primitives/point-model';import { Shapes, BasicShapes, FlowShapes, UmlActivityShapes, Scale, ImageAlignment, Status } 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 { Property, Complex, Collection, ChildProperty, ComplexFactory } from '@syncfusion/ej2-base';import { ShapeStyle, Margin, TextStyle, Shadow } from '../core/appearance';import { ShapeStyleModel, TextStyleModel, ShadowModel } from '../core/appearance-model';import { Point } from '../primitives/point';import { Size } from '../primitives/size';import { PointModel } from '../primitives/point-model';import { Shapes, BasicShapes, FlowShapes, UmlActivityShapes, Scale, ImageAlignment, Status, ElementAction } from '../enum/enum';import { IElement } from './interface/IElement';import { Container } from '../core/containers/container';import { Canvas } from '../core/containers/canvas';import { getBasicShape } from './dictionary/basic-shapes';import { DiagramElement } from '../core/elements/diagram-element';import { PathElement } from '../core/elements/path-element';import { TextElement } from '../core/elements/text-element';import { ImageElement } from '../core/elements/image-element';import { DiagramNativeElement } from '../core/elements/native-element';import { Port, PointPort } from './port';import { PointPortModel } from './port-model';import { Annotation, ShapeAnnotation } from './annotation';import { ShapeAnnotationModel, HyperlinkModel } from './annotation-model';import { getPortShape, getIconShape } from './dictionary/common';import { getFlowShape } from './dictionary/flow-shapes';import { HorizontalAlignment, VerticalAlignment, BpmnShapes, BpmnEvents, BpmnTriggers, BpmnGateways, NodeConstraints } from '../enum/enum';import { BpmnDataObjects, BpmnTasks, BpmnSubProcessTypes, BpmnLoops } from '../enum/enum';import { BpmnBoundary, BpmnActivities, UmlScope } from '../enum/enum';import { MarginModel } from '../core/appearance-model';import { LayoutModel } from '../layout/layout-base-model';import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes, updatePortEdges } from './../utility/diagram-util';import { randomId, getFunction } from './../utility/base-util';import { NodeBase } from './node-base';import { canShadow } from './../utility/constraints-util';import { PortVisibility, Stretch } from '../enum/enum';import { IconShapeModel } from './icon-model';import { IconShape } from './icon';import { measurePath } from './../utility/dom-util';import { Rect } from '../primitives/rect';import { getPolygonPath } from './../utility/path-util';import { DiagramHtmlElement } from '../core/elements/html-element';import { StackPanel } from '../core/containers/stack-panel';import { GridPanel, RowDefinition, ColumnDefinition } from '../core/containers/grid';import { Orientation, ContainerTypes, ClassifierShape } from '../enum/enum';import { getULMClassifierShapes } from '../utility/uml-util';import { initSwimLane } from '../interaction/container-interaction';import { AnnotationModel } from './annotation-model';
 import {NodeBaseModel} from "./node-base-model";
@@ -3,0 +3,0 @@

src/diagram/objects/node.js

@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Size } from '../primitives/size';
+import { ElementAction } from '../enum/enum';
 import { Container } from '../core/containers/container';
@@ -39,3 +40,3 @@ import { Canvas } from '../core/containers/canvas';
 import { NodeConstraints } from '../enum/enum';
-import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes } from './../utility/diagram-util';
+import { checkPortRestriction, setUMLActivityDefaults, getUMLActivityShapes, updatePortEdges } from './../utility/diagram-util';
 import { randomId, getFunction } from './../utility/base-util';
@@ -788,2 +789,3 @@ import { NodeBase } from './node-base';
                     content = diagram.bpmnModule.initBPMNContent(content, this, diagram);
+                    this.wrapper.elementActions = this.wrapper.elementActions | ElementAction.ElementIsGroup;
                     var subProcess = this.shape.activity.subProcess;
@@ -868,2 +870,5 @@ if (subProcess.processes && subProcess.processes.length) {
         }
+        if (!(this.wrapper.elementActions & ElementAction.ElementIsGroup) && this.flip === 'Horizontal' || this.flip === 'Vertical') {
+            content.flip = this.flip;
+        }
         return content;
@@ -919,2 +924,3 @@ };
         canvas.margin = this.margin;
+        canvas.flip = this.flip;
         this.wrapper = canvas;
@@ -929,2 +935,3 @@ return canvas;
             port = this.initPortWrapper(this.ports[i]);
+            port.elementActions = port.elementActions | ElementAction.ElementIsPort;
             // tslint:disable-next-line:no-any
@@ -1026,3 +1033,3 @@ var wrapperContent = void 0;
         portContent.verticalAlignment = ports.verticalAlignment;
-        portContent.setOffsetWithRespectToBounds(ports.offset.x, ports.offset.y, 'Fraction');
+        portContent = updatePortEdges(portContent, this.flip, ports);
         if (this.width !== undefined || this.height !== undefined) {
@@ -1029,0 +1036,0 @@ portContent.float = true;

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

 import { ShadowModel, GradientModel } from '../core/appearance-model';
 import { PointModel } from './../primitives/point-model';
-import { TextOverflow, Scale, ImageAlignment, Stretch, TextWrap } from '../enum/enum';
+import { TextOverflow, Scale, ImageAlignment, Stretch, TextWrap, FlipDirection } from '../enum/enum';
 /**
@@ -31,2 +31,3 @@ * canvas interface
     canApplyStyle?: boolean;
+    flip?: FlipDirection;
 }
@@ -33,0 +34,0 @@ /** @private */

src/diagram/rendering/canvas-renderer.js

@@ -218,5 +218,24 @@ import { Size } from './../primitives/size';
         var pivotX = options.x + options.width * options.pivotX;
-        this.rotateContext(canvas, options.angle, pivotX, pivotY);
+        if (options.flip === 'Horizontal' || options.flip === 'Vertical') {
+            ctx.translate(options.x + options.width / 2, options.y + options.height / 2);
+            ctx.rotate(-options.angle * Math.PI / 180);
+            ctx.translate(-options.x - options.width / 2, -options.y - options.height / 2);
+        }
+        else {
+            this.rotateContext(canvas, options.angle, pivotX, pivotY);
+        }
         this.setStyle(canvas, options);
         ctx.translate(options.x, options.y);
+        if (options.flip === 'Horizontal') {
+            ctx.scale(-1, 1);
+            ctx.translate(options.width * -1, 0);
+        }
+        else if (options.flip === 'Vertical') {
+            ctx.scale(1, -1);
+            ctx.translate(0, options.height * -1);
+        }
+        else if (options.flip === 'Both') {
+            ctx.scale(-1, -1);
+            ctx.translate(options.width * -1, options.height * -1);
+        }
         this.renderPath(canvas, options, collection);
@@ -532,2 +551,18 @@ ctx.fill();
         }
+        else if (alignOptions.flip !== 'None') {
+            var scaleX = 1;
+            var scaleY = 1;
+            if (alignOptions.flip === 'Horizontal' || alignOptions.flip === 'Both') {
+                x = -x;
+                width = -width;
+                scaleX = -1;
+            }
+            if (alignOptions.flip === 'Vertical' || alignOptions.flip === 'Both') {
+                y = -y;
+                height = -height;
+                scaleY = -1;
+            }
+            ctx.scale(scaleX, scaleY);
+            ctx.drawImage(image, x, y, width, height);
+        }
         else {
@@ -534,0 +569,0 @@ ctx.drawImage(image, x, y, width, height);

src/diagram/rendering/renderer.d.ts

@@ -12,3 +12,3 @@ import { DiagramElement } from '../core/elements/diagram-element';
 import { RectAttributes, BaseAttributes } from './canvas-interface';
-import { RendererAction } from '../enum/enum';
+import { RendererAction, FlipDirection } from '../enum/enum';
 import { ThumbsConstraints, SelectorConstraints } from '../enum/enum';
@@ -104,2 +104,3 @@ import { TransformFactor as Transforms } from '../interaction/scroller';
     renderContainer(group: Container, canvas: HTMLCanvasElement | SVGElement, htmlLayer: HTMLElement, transform?: Transforms, parentSvg?: SVGSVGElement, createParent?: boolean, fromPalette?: boolean, indexValue?: number): void;
+    renderFlipElement(element: DiagramElement, canvas: SVGElement | HTMLCanvasElement, flip: FlipDirection): void;
     /**   @private  */
@@ -106,0 +107,0 @@ hasNativeParent(children: DiagramElement[], count?: number): DiagramElement;

src/diagram/rendering/renderer.js

@@ -12,3 +12,3 @@ import { PathElement } from '../core/elements/path-element';
 import { SnapConstraints } from '../enum/enum';
-import { ThumbsConstraints, SelectorConstraints } from '../enum/enum';
+import { ThumbsConstraints, SelectorConstraints, ElementAction } from '../enum/enum';
 import { SvgRenderer } from './svg-renderer';
@@ -577,2 +577,6 @@ import { CanvasRenderer } from './canvas-renderer';
         var ariaLabel = element.description ? element.description : element.id;
+        if (!this.isSvgMode) {
+            options.x = element.flipOffset.x ? element.flipOffset.x : options.x;
+            options.y = element.flipOffset.y ? element.flipOffset.y : options.y;
+        }
         this.renderer.drawPath(canvas, options, this.diagramId, undefined, parentSvg, ariaLabel);
@@ -940,2 +944,3 @@ };
             var svgParent_1;
+            var flip = void 0;
             for (var _i = 0, _a = group.children; _i < _a.length; _i++) {
@@ -951,6 +956,57 @@ var child = _a[_i];
                 }
+                if (!this.isSvgMode) {
+                    child.flip = group.flip;
+                }
                 this.renderElement(child, parentG || canvas, htmlLayer, transform, parentSvg, true, fromPalette);
+                if (child instanceof TextElement && parentG && !(group.elementActions & ElementAction.ElementIsGroup)) {
+                    flip = (child.flip && child.flip !== 'None') ? child.flip : group.flip;
+                    this.renderFlipElement(child, parentG, flip);
+                }
+                if ((child.elementActions & ElementAction.ElementIsPort) && parentG) {
+                    flip = (child.flip && child.flip !== 'None') ? child.flip : group.flip;
+                    this.renderFlipElement(group, parentG, flip);
+                }
+                if (!(child instanceof TextElement) && group.flip !== 'None' &&
+                    (group.elementActions & ElementAction.ElementIsGroup)) {
+                    this.renderFlipElement(child, parentG || canvas, group.flip);
+                }
             }
+            if (!(group.elementActions & ElementAction.ElementIsGroup)) {
+                this.renderFlipElement(group, canvas, group.flip);
+            }
         }
     };
+    DiagramRenderer.prototype.renderFlipElement = function (element, canvas, flip) {
+        var attr = {};
+        var scaleX = 1;
+        var scaleY = 1;
+        var posX = 0;
+        var posY = 0;
+        var offsetX = 0;
+        var offsetY = 0;
+        if (flip !== 'None') {
+            if (flip === 'Horizontal' || flip === 'Both') {
+                posX = element.bounds.center.x;
+                offsetX = -element.bounds.center.x;
+                scaleX = -1;
+            }
+            if (flip === 'Vertical' || flip === 'Both') {
+                posY = element.bounds.center.y;
+                offsetY = -element.bounds.center.y;
+                scaleY = -1;
+            }
+            attr = {
+                'transform': 'translate(' + posX + ',' + posY + ') scale(' + scaleX + ','
+                    + scaleY + ') translate(' + offsetX + ',' + offsetY + ')'
+            };
+        }
+        else {
+            attr = {
+                'transform': 'translate(' + 0 + ',' + 0 + ')'
+            };
+        }
+        if (attr) {
+            setAttributeSvg(canvas, attr);
+        }
+    };
     /**   @private  */
@@ -993,2 +1049,5 @@ DiagramRenderer.prototype.hasNativeParent = function (children, count) {
         };
+        if (element.flip) {
+            options.flip = element.flip;
+        }
         if (transform) {
@@ -995,0 +1054,0 @@ options.x += transform.tx;

src/diagram/rendering/svg-renderer.js

@@ -428,2 +428,3 @@ import { Point } from './../primitives/point';
     SvgRenderer.prototype.setNativTransform = function (element, nativeElement, height, width) {
+        var angle;
         var contentWidth = element.contentSize.width !== 0 ? element.contentSize.width : 1;
@@ -430,0 +431,0 @@ var contentHeight = element.contentSize.height !== 0 ? element.contentSize.height : 1;

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

@@ -133,1 +133,7 @@ import { PointModel } from './../primitives/point-model';
 export declare let getObjectType: Function;
+/** @private */
+export declare let flipConnector: Function;
+/** @private */
+export declare let updatePortEdges: Function;
+/** @private */
+export declare let alignElement: Function;

src/diagram/utility/diagram-util.js

@@ -1384,1 +1384,66 @@ import { Size } from './../primitives/size';
 };
+/** @private */
+export var flipConnector = function (connector) {
+    if (!connector.sourceID && !connector.targetID) {
+        var source = { x: connector.sourcePoint.x, y: connector.sourcePoint.y };
+        var target = { x: connector.targetPoint.x, y: connector.targetPoint.y };
+        if (connector.flip === 'Horizontal') {
+            connector.sourcePoint.x = target.x;
+            connector.targetPoint.x = source.x;
+        }
+        else if (connector.flip === 'Vertical') {
+            connector.sourcePoint.y = target.y;
+            connector.targetPoint.y = source.y;
+        }
+        else if (connector.flip === 'Both') {
+            connector.sourcePoint = target;
+            connector.targetPoint = source;
+        }
+    }
+};
+/** @private */
+export var updatePortEdges = function (portContent, flip, port) {
+    var offsetX = port.offset.x;
+    var offsetY = port.offset.y;
+    if (flip === 'Horizontal') {
+        offsetX = 1 - port.offset.x;
+        offsetY = port.offset.y;
+    }
+    else if (flip === 'Vertical') {
+        offsetX = port.offset.x;
+        offsetY = 1 - port.offset.y;
+    }
+    else if (flip === 'Both') {
+        offsetX = 1 - port.offset.x;
+        offsetY = 1 - port.offset.y;
+    }
+    portContent.setOffsetWithRespectToBounds(offsetX, offsetY, 'Fraction');
+    return portContent;
+};
+/** @private */
+export var alignElement = function (element, offsetX, offsetY, diagram, flip) {
+    if (element.hasChildren()) {
+        for (var _i = 0, _a = element.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var childX = ((offsetX - child.offsetX) + offsetX);
+            var childY = ((offsetY - child.offsetY) + offsetY);
+            if (flip === 'Horizontal' || flip === 'Both') {
+                child.offsetX = childX;
+                child.flipOffset.x = childX - child.desiredSize.width / 2;
+            }
+            if (flip === 'Vertical' || flip === 'Both') {
+                child.offsetY = childY;
+                child.flipOffset.y = childY - child.desiredSize.height / 2;
+            }
+            if (child instanceof Canvas || child instanceof Container) {
+                alignElement(child, offsetX, offsetY, diagram, flip);
+            }
+            child.measure(new Size(child.bounds.width, child.bounds.height));
+            child.arrange(child.desiredSize);
+            var node = diagram.nameTable[child.id];
+            if (node) {
+                diagram.updateConnectorEdges(node);
+            }
+        }
+    }
+};

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

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

Total package byte prevSize

22051625

increased by0.66%

Lines of code

162939

increased by0.61%

Dependency changes

• Updated@syncfusion/ej2-buttons@~16.4.53

• Updated@syncfusion/ej2-inputs@~16.4.53

• Updated@syncfusion/ej2-navigations@~16.4.53

• Updated@syncfusion/ej2-popups@~16.4.53