@syncfusion/ej2-vue-diagrams 19.2.60 → 19.3.45

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-diagrams@*",
-  "_id": "@syncfusion/ej2-vue-diagrams@19.2.59",
+  "_id": "@syncfusion/ej2-vue-diagrams@19.3.44",
   "_inBundle": false,
-  "_integrity": "sha512-QDEZhDE7RFbBnm0+ztHNSZcpRfScaV1HIGeN2CW1QtuXlerx420ogMXrRIpSYPkP2N4C2KD8X8BvJ9Vc0l44jw==",
+  "_integrity": "sha512-yhtj1EqIatAFQmm8Pz5q1lY1fYSd/qKLhWZpf2VbHVquEV/IxCZ5L7esEDA70tg3f+QFi/3jD5FZzN8J5iKhrA==",
   "_location": "/@syncfusion/ej2-vue-diagrams",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-diagrams/-/ej2-vue-diagrams-19.2.59.tgz",
-  "_shasum": "efd0e4613a6edf8dcafa80d8b1a73b6628f5f30a",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-vue-diagrams/-/ej2-vue-diagrams-19.3.44.tgz",
+  "_shasum": "0b73b8652f62be623f460b5cc6e5da918932ac4a",
   "_spec": "@syncfusion/ej2-vue-diagrams@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.2.60",
-    "@syncfusion/ej2-diagrams": "19.2.60",
-    "@syncfusion/ej2-vue-base": "~19.2.60"
+    "@syncfusion/ej2-base": "~19.3.43",
+    "@syncfusion/ej2-diagrams": "19.3.45",
+    "@syncfusion/ej2-vue-base": "~19.3.43"
   },
   "deprecated": false,
   "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. for Vue",
@@ -57,6 +57,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
   },
-  "version": "19.2.60",
+  "version": "19.3.45",
   "sideEffects": false
 }

package/src/diagram/diagram.component.js

@@ -30,7 +30,7 @@ import { NodeAnnotationsDirective, NodeAnnotationDirective, NodeAnnotationsPlugi
 import { PortsDirective, PortDirective, PortsPlugin, PortPlugin } from './ports.directive';
 import { NodesDirective, NodeDirective, NodesPlugin, NodePlugin } from './nodes.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['addInfo', 'annotationTemplate', 'backgroundColor', 'bridgeDirection', 'commandManager', 'connectorDefaults', 'connectors', 'constraints', 'contextMenuSettings', 'customCursor', 'dataSourceSettings', 'diagramSettings', 'drawingObject', 'enablePersistence', 'enableRtl', 'getConnectorDefaults', 'getCustomCursor', 'getCustomProperty', 'getCustomTool', 'getDescription', 'getNodeDefaults', 'height', 'historyManager', 'layers', 'layout', 'locale', 'mode', 'nodeDefaults', 'nodeTemplate', 'nodes', 'pageSettings', 'rulerSettings', 'scrollSettings', 'selectedItems', 'serializationSettings', 'setNodeTemplate', 'snapSettings', 'tool', 'tooltip', 'updateSelection', 'userHandleTemplate', 'width', 'animationComplete', 'click', 'collectionChange', 'commandExecute', 'connectionChange', 'contextMenuBeforeItemRender', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataLoaded', 'doubleClick', 'dragEnter', 'dragLeave', 'dragOver', 'drop', 'expandStateChange', 'fixedUserHandleClick', 'historyChange', 'historyStateChange', 'keyDown', 'keyUp', 'mouseEnter', 'mouseLeave', 'mouseOver', 'onImageLoad', 'onUserHandleMouseDown', 'onUserHandleMouseEnter', 'onUserHandleMouseLeave', 'onUserHandleMouseUp', 'positionChange', 'propertyChange', 'rotateChange', 'scrollChange', 'segmentCollectionChange', 'selectionChange', 'sizeChange', 'sourcePointChange', 'targetPointChange', 'textEdit'];
+export var properties = ['islazyUpdate', 'addInfo', 'annotationTemplate', 'backgroundColor', 'bridgeDirection', 'commandManager', 'connectorDefaults', 'connectors', 'constraints', 'contextMenuSettings', 'customCursor', 'dataSourceSettings', 'diagramSettings', 'drawingObject', 'enablePersistence', 'enableRtl', 'getConnectorDefaults', 'getCustomCursor', 'getCustomProperty', 'getCustomTool', 'getDescription', 'getNodeDefaults', 'height', 'historyManager', 'layers', 'layout', 'locale', 'mode', 'nodeDefaults', 'nodeTemplate', 'nodes', 'pageSettings', 'rulerSettings', 'scrollSettings', 'selectedItems', 'serializationSettings', 'setNodeTemplate', 'snapSettings', 'tool', 'tooltip', 'updateSelection', 'userHandleTemplate', 'width', 'animationComplete', 'click', 'collectionChange', 'commandExecute', 'connectionChange', 'contextMenuBeforeItemRender', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataLoaded', 'doubleClick', 'dragEnter', 'dragLeave', 'dragOver', 'drop', 'expandStateChange', 'fixedUserHandleClick', 'historyChange', 'historyStateChange', 'keyDown', 'keyUp', 'mouseEnter', 'mouseLeave', 'mouseOver', 'onImageLoad', 'onUserHandleMouseDown', 'onUserHandleMouseEnter', 'onUserHandleMouseLeave', 'onUserHandleMouseUp', 'positionChange', 'propertyChange', 'rotateChange', 'scrollChange', 'segmentCollectionChange', 'selectionChange', 'sizeChange', 'sourcePointChange', 'targetPointChange', 'textEdit'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -107,6 +107,7 @@ var DiagramComponent = /** @class */ (function (_super) {
                         }
                         else {
                             _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
                         }
                     }
                 });

package/src/overview/overview.component.js

@@ -21,7 +21,7 @@ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/e
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { Overview } from '@syncfusion/ej2-diagrams';
 import { Options } from 'vue-class-component';
-export var properties = ['enablePersistence', 'enableRtl', 'height', 'locale', 'sourceID', 'width', 'created'];
+export var properties = ['islazyUpdate', 'enablePersistence', 'enableRtl', 'height', 'locale', 'sourceID', 'width', 'created'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -98,6 +98,7 @@ var OverviewComponent = /** @class */ (function (_super) {
                         }
                         else {
                             _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
                         }
                     }
                 });

package/src/symbol-palette/symbolpalette.component.js

@@ -22,7 +22,7 @@ import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
 import { SymbolPalette } from '@syncfusion/ej2-diagrams';
 import { PalettesDirective, PaletteDirective, PalettesPlugin, PalettePlugin } from './palettes.directive';
 import { Options } from 'vue-class-component';
-export var properties = ['accessKey', 'allowDrag', 'connectorDefaults', 'enableAnimation', 'enablePersistence', 'enableRtl', 'enableSearch', 'expandMode', 'filterSymbols', 'getConnectorDefaults', 'getNodeDefaults', 'getSymbolInfo', 'getSymbolTemplate', 'height', 'ignoreSymbolsOnSearch', 'locale', 'nodeDefaults', 'palettes', 'symbolDragSize', 'symbolHeight', 'symbolInfo', 'symbolMargin', 'symbolPreview', 'symbolWidth', 'width', 'paletteExpanding', 'paletteSelectionChange'];
+export var properties = ['islazyUpdate', 'accessKey', 'allowDrag', 'connectorDefaults', 'enableAnimation', 'enablePersistence', 'enableRtl', 'enableSearch', 'expandMode', 'filterSymbols', 'getConnectorDefaults', 'getNodeDefaults', 'getSymbolInfo', 'getSymbolTemplate', 'height', 'ignoreSymbolsOnSearch', 'locale', 'nodeDefaults', 'palettes', 'symbolDragSize', 'symbolHeight', 'symbolInfo', 'symbolMargin', 'symbolPreview', 'symbolWidth', 'width', 'paletteExpanding', 'paletteSelectionChange'];
 export var modelProps = [];
 export var testProp = getProps({ props: properties });
 export var props = testProp[0];
@@ -99,6 +99,7 @@ var SymbolPaletteComponent = /** @class */ (function (_super) {
                         }
                         else {
                             _this.$emit('update:' + key, prop[key]);
+                            _this.$emit('modelchanged', prop[key]);
                         }
                     }
                 });

package/styles/bootstrap-dark.css

@@ -209,7 +209,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -234,44 +234,61 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #0070f0;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #0070f0;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #0070f0;
+  fill: #0070f0;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #676767;
+  fill: #acacac;
   opacity: 1;
-  stroke: #f0f0f0;
+  stroke: #fff;
+}
+
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #dfdfdf !important;
 }
 
 .e-diagram-bezier-handle {
-  fill: #0070f0;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #0070f0;
 }
 
 .e-diagram-bezier-line {
-  stroke: #0058bd;
+  stroke: #0070f0;
 }
 
 .e-diagram-resize-handle {
   fill: #0070f0;
+  stroke: #0070f0;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #0070f0;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #676767;
+  fill: #acacac;
   opacity: 1;
-  stroke: #f0f0f0;
+  stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #0070f0;
+  stroke: #0070f0;
 }
 
 .e-diagram-border {
@@ -280,7 +297,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #676767;
+  stroke: #acacac;
 }
 
 .e-diagram-border.e-thick-border {
@@ -289,7 +306,7 @@
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #0070f0;
   stroke-width: 2;
 }
 
@@ -303,17 +320,17 @@
 }
 
 .e-diagram-pivot-line {
-  stroke: #fff;
+  stroke: #0070f0;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #959595;
-  border-radius: 0px;
+  background: #b9b9b9;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #676767;
-  border-radius: 0px;
+  background: #acacac;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -321,13 +338,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #6e6e6e;
-  color: #585858;
+  background-color: #313131;
+  color: #f0f0f0;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #6e6e6e;
+  background-color: #313131;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -336,11 +353,11 @@
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #0058bd;
+  border-color: #0070f0;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
-  color: #000;
+  color: #1a1a1a;
   min-width: 50px;
 }
 
@@ -350,11 +367,11 @@
 }
 
 .e-ruler-tick-label {
-  fill: #585858;
+  fill: #c6c6c6;
 }
 
 .e-ruler-tick {
-  stroke: #676767;
+  stroke: #858585;
 }
 
 .e-menu-item e-blankicon {

package/styles/bootstrap.css

@@ -209,7 +209,7 @@
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -234,44 +234,61 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #317ab9;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #317ab9;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #317ab9;
+  fill: #317ab9;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
-  fill: #adadad;
+  fill: #ccc;
   opacity: 1;
   stroke: #fff;
 }
 
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #fff !important;
+}
+
 .e-diagram-bezier-handle {
-  fill: #317ab9;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #317ab9;
 }
 
 .e-diagram-bezier-line {
-  stroke: #3071a9;
+  stroke: #317ab9;
 }
 
 .e-diagram-resize-handle {
   fill: #317ab9;
+  stroke: #317ab9;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #317ab9;
+}
+
 .e-diagram-resize-handle.e-disabled {
-  fill: #adadad;
+  fill: #ccc;
   opacity: 1;
   stroke: #fff;
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #317ab9;
+  stroke: #317ab9;
 }
 
 .e-diagram-border {
@@ -280,7 +297,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #adadad;
+  stroke: #ccc;
 }
 
 .e-diagram-border.e-thick-border {
@@ -289,7 +306,7 @@
 }
 
 .e-diagram-border.e-thick-border.e-diagram-lane {
-  stroke: #0078ff;
+  stroke: #317ab9;
   stroke-width: 2;
 }
 
@@ -303,17 +320,17 @@
 }
 
 .e-diagram-pivot-line {
-  stroke: #fff;
+  stroke: #317ab9;
 }
 
 .e-symbolpalette .e-symbol-hover:hover {
-  background: #e6e6e6;
-  border-radius: 0px;
+  background: #f5f5f5;
+  border-radius: 4px;
 }
 
 .e-symbolpalette .e-symbol-selected {
-  background: #adadad;
-  border-radius: 0px;
+  background: #ccc;
+  border-radius: 4px;
 }
 
 .e-diagram-tooltip {
@@ -321,13 +338,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: #fff;
+  background-color: #f8f8f8;
   color: #8c8c8c;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: #fff;
+  background-color: #f8f8f8;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -336,7 +353,7 @@
 
 .e-diagram .e-diagram-text-edit {
   background: #fff;
-  border-color: #3071a9;
+  border-color: #317ab9;
   border-style: dashed;
   border-width: 1px;
   box-sizing: content-box;
@@ -345,16 +362,16 @@
 }
 
 .e-diagram-text-edit::selection {
-  background: #aaa;
+  background: #317ab9;
   color: #fff;
 }
 
 .e-ruler-tick-label {
-  fill: #8c8c8c;
+  fill: #444;
 }
 
 .e-ruler-tick {
-  stroke: #adadad;
+  stroke: #ddd;
 }
 
 .e-menu-item e-blankicon {

package/styles/bootstrap4.css

@@ -7,6 +7,111 @@
   text-transform: none;
 }
 
+.e-diagram-menu .e-bringforward::before {
+  content: '\e574';
+}
+
+.e-diagram-menu .e-bringfront::before {
+  content: '\e575';
+}
+
+.e-diagram-menu .e-sendback::before {
+  content: '\e576';
+}
+
+.e-diagram-menu .e-sendbackward::before {
+  content: '\e577';
+}
+
+.e-diagram-menu .e-delete::before {
+  content: '\e578';
+}
+
+.e-diagram-menu .e-ungroup::before {
+  content: '\e579';
+}
+
+.e-diagram-menu .e-group::before {
+  content: '\e57a';
+}
+
+.e-diagram-menu .e-undo::before {
+  content: '\e57c';
+}
+
+.e-diagram-menu .e-cut::before {
+  content: '\e57d';
+}
+
+.e-diagram-menu .e-save::before {
+  content: '\e57e';
+}
+
+.e-diagram-menu .e-paste::before {
+  content: '\e57f';
+}
+
+.e-diagram-menu .e-copy::before {
+  content: '\e580';
+}
+
+.e-diagram-menu .e-redo::before {
+  content: '\e581';
+}
+
+.e-diagram-menu .e-zoomin::before {
+  content: '\e582';
+}
+
+.e-diagram-menu .e-italic::before {
+  content: '\e583';
+}
+
+.e-diagram-menu .e-close::before {
+  content: '\e584';
+}
+
+.e-diagram-menu .e-pan::before {
+  content: '\e585';
+}
+
+.e-diagram-menu .e-bold::before {
+  content: '\e586';
+}
+
+.e-diagram-menu .e-underline::before {
+  content: '\e587';
+}
+
+.e-diagram-menu .e-zoomout::before {
+  content: '\e588';
+}
+
+.e-diagram-menu .e-export::before {
+  content: '\e589';
+}
+
+.e-diagram-menu .e-print::before {
+  content: '\e58a';
+}
+
+.e-diagram-menu .e-order::before {
+  content: '\e58b';
+}
+
+.e-symbolpalette .e-clear-searchtext::before {
+  content: '\e58c';
+}
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
 .e-diagram-menu .e-bringforward::before {
   content: '\e801';
 }
@@ -24,7 +129,7 @@
 }
 
 .e-diagram-menu .e-delete::before {
-  content: '\e773';
+  content: '\e7fd';
 }
 
 .e-diagram-menu .e-ungroup::before {
@@ -100,11 +205,11 @@
 }
 
 .e-symbolpalette .e-clear-searchtext::before {
-  content: '\e745';
+  content: '\e724';
 }
 
 .e-diagram {
-  background-color: transparent;
+  background-color: #fff;
   display: block;
 }
 
@@ -129,13 +234,13 @@
 }
 
 .e-diagram-endpoint-handle {
-  fill: #007bff;
-  stroke: #fff;
+  fill: #fff;
+  stroke: #007bff;
 }
 
 .e-diagram-endpoint-handle.e-connected {
-  fill: #fff;
-  stroke: #007bff;
+  fill: #007bff;
+  stroke: #fff;
 }
 
 .e-diagram-endpoint-handle.e-disabled {
@@ -144,9 +249,21 @@
   stroke: #fff;
 }
 
+.e-diagram-bezier-handle.e-source.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-diagram-bezier-handle.e-target.e-disabled {
+  opacity: 1 !important;
+}
+
+.e-symbolpalette .e-acrdn-content {
+  background-color: #fff !important;
+}
+
 .e-diagram-bezier-handle {
   fill: #007bff;
-  stroke: #fff;
+  stroke: #007bff;
 }
 
 .e-diagram-bezier-line {
@@ -155,9 +272,14 @@
 
 .e-diagram-resize-handle {
   fill: #007bff;
+  stroke: #007bff;
   stroke: #fff;
 }
 
+.e-diagram-helper {
+  stroke: #007bff;
+}
+
 .e-diagram-resize-handle.e-disabled {
   fill: #ced4da;
   opacity: 1;
@@ -165,8 +287,8 @@
 }
 
 .e-diagram-rotate-handle {
-  fill: #000;
-  stroke: #fff;
+  fill: #007bff;
+  stroke: #007bff;
 }
 
 .e-diagram-border {
@@ -175,7 +297,7 @@
 
 .e-diagram-border.e-disabled {
   opacity: 1;
-  stroke: #007bff;
+  stroke: #ced4da;
 }
 
 .e-diagram-border.e-thick-border {
@@ -216,13 +338,13 @@
 }
 
 .e-diagram .e-ruler {
-  background-color: transparent;
-  color: #adb5bd;
+  background-color: #f8f9fa;
+  color: #f8f9fa;
   font-size: 10px;
 }
 
 .e-diagram .e-ruler-overlap {
-  background-color: transparent;
+  background-color: #f8f9fa;
 }
 
 .e-diagram .e-d-ruler-marker {
@@ -249,7 +371,7 @@
 }
 
 .e-ruler-tick {
-  stroke: #adb5bd;
+  stroke: #dee2e6;
 }
 
 .e-menu-item e-blankicon {