diff --git a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.js b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.js
index 9f4ad06e4..771248c04 100644
--- a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.js
+++ b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.js
@@ -42,4 +42,21 @@ var connectors = [
connector.targetPoint = { x: 300, y: 200 };
diagram.dataBind();
};
-
\ No newline at end of file
+
+ document.getElementById('dragSourceEnd').onclick = () => {
+ /**
+ * parameter 1 - connector whose source point needs to be moved.
+ * parameter 2 - A number representing the horizontal distance by which the source point should be moved.
+ * parameter 3 - A number representing the vertical distance by which the source point should be moved.
+ */
+ diagram.dragSourceEnd(diagram.connectors[0], 50, 50);
+ };
+
+ document.getElementById('dragTargetEnd').onclick = () => {
+ /**
+ * parameter 1 - connector whose target point needs to be moved.
+ * parameter 2 - A number representing the horizontal distance by which the target point should be moved.
+ * parameter 3 - A number representing the vertical distance by which the target point should be moved.
+ */
+ diagram.dragTargetEnd(diagram.connectors[0], 50, 50);
+ };
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.ts b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.ts
index 8e19db246..d44a36d62 100644
--- a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.ts
+++ b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/index.ts
@@ -41,4 +41,22 @@ diagram.appendTo('#element');
let connector = diagram.connectors[0];
connector.targetPoint = {x:300,y:200};
diagram.dataBind();
+ };
+
+ (document.getElementById('dragSourceEnd') as HTMLInputElement)..onclick = () => {
+ /**
+ * parameter 1 - connector whose source point needs to be moved.
+ * parameter 2 - A number representing the horizontal distance by which the source point should be moved.
+ * parameter 3 - A number representing the vertical distance by which the source point should be moved.
+ */
+ diagram.dragSourceEnd(diagram.connectors[0], 50, 50);
+ };
+
+ (document.getElementById('dragTargetEnd') as HTMLInputElement)..onclick = () => {
+ /**
+ * parameter 1 - connector whose target point needs to be moved.
+ * parameter 2 - A number representing the horizontal distance by which the target point should be moved.
+ * parameter 3 - A number representing the vertical distance by which the target point should be moved.
+ */
+ diagram.dragTargetEnd(diagram.connectors[0], 50, 50);
};
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/js/index.html b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/js/index.html
index 5a2a68051..7cbaa064d 100644
--- a/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/js/index.html
+++ b/ej2-javascript/code-snippet/diagram/connectors-EndPointDrag/js/index.html
@@ -21,6 +21,8 @@
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/diagram/bpmn-expandedSubProcess.md b/ej2-javascript/diagram/bpmn-expandedSubProcess.md
index 025502edd..2deeed5c6 100644
--- a/ej2-javascript/diagram/bpmn-expandedSubProcess.md
+++ b/ej2-javascript/diagram/bpmn-expandedSubProcess.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
## Expanded SubProcess
An expanded subProcess can contain certain child processess within it.
-### Create BPMN Expanded subProcess.
+### Create BPMN Expanded subProcess
To create expanded subProcess, set shape as [`activity`](../api/diagram/bpmnActivityModel/) and [`collapsed`](../api/diagram/bpmnSubProcessModel/#collapsed) as false. Enable [`AllowDrop`](../api/diagram/nodeConstraints/) constraint for node to allow child to drop inside the expanded subProcess.
@@ -44,7 +44,7 @@ To create expanded subProcess, set shape as [`activity`](../api/diagram/bpmnActi
{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-cs21" %}
{% endif %}
-### Add BPMN nodes into ExpandedSubProcess.
+### Add BPMN nodes into ExpandedSubProcess
[`Processes`](../api/diagram/bpmnSubProcessModel/#processes) is an array collection that defines the children values for BPMN subprocess.
@@ -77,7 +77,7 @@ Please refer the following code example.
{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-cs22" %}
{% endif %}
-### Add BPMN nodes into ExpandedSubProcess at runtime.
+### Add BPMN nodes into ExpandedSubProcess at runtime
Drag and drop the BPMN nodes to the BPMN ExpandedSubProcess.
While resizing or dragging the child element, if the child element bounds are within the ExpandedSubProcess bounds, the ExpandedSubProcess size will be updated along with that.
@@ -85,3 +85,35 @@ While resizing or dragging the child element, if the child element bounds are wi
The following image shows how to add BPMNNode into the BPMN ExpandedSubProcess at runtime.
+
+#### Add/remove Process Programmatically
+
+The process for the expanded sub-process can be added at runtime using the [`addProcess`](../api/diagram/#addprocess) method and removed at runtime using the [`removeProcess`](../api/diagram/#removeprocess) method. The following example shows how to add and remove a process at runtime.
+
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/bpmnShapes-addProcess/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/bpmnShapes-addProcess/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-addProcess" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/bpmnShapes-addProcess/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/bpmnShapes-addProcess/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-addProcess" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/bpmn-flows.md b/ej2-javascript/diagram/bpmn-flows.md
index 2740475af..cebf60164 100644
--- a/ej2-javascript/diagram/bpmn-flows.md
+++ b/ej2-javascript/diagram/bpmn-flows.md
@@ -58,11 +58,11 @@ The following table demonstrates the visual representation of association flows.
| Association | Image |
| -------- | -------- |
-| Default |  |
+| Default |  |
| Directional |  |
| BiDirectional |  |
->Note : The default value for the property `association` is **default**.
+N> The default value for the property `association` is **default**.
## Sequence flow
@@ -152,7 +152,7 @@ The following table contains various representation of message flows.
| Message | Image |
| -------- | -------- |
-| Default |  |
+| Default |  |
| InitiatingMessage |  |
| NonInitiatingMessage |  |
diff --git a/ej2-javascript/diagram/bpmn-textAnnotation.md b/ej2-javascript/diagram/bpmn-textAnnotation.md
index 923d73641..44f675ed8 100644
--- a/ej2-javascript/diagram/bpmn-textAnnotation.md
+++ b/ej2-javascript/diagram/bpmn-textAnnotation.md
@@ -107,3 +107,34 @@ There are several types of Text annotation directions as follows:
| Right |  |
| Top |  |
| Bottom |  |
+
+### Add text annotation at runtime
+
+Text annotations can be added dynamically using either the [`addTextAnnotation`](../api/diagram/#addtextannotation) method or the [`add`](../api/diagram/#add) method of the diagram. The following example shows how to use these methods to add a text annotation node.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/bpmnShapes-textAnnotationPalette-runtime" %}
+{% endif %}
diff --git a/ej2-javascript/diagram/context-menu.md b/ej2-javascript/diagram/context-menu.md
index ac403c782..0c6325631 100644
--- a/ej2-javascript/diagram/context-menu.md
+++ b/ej2-javascript/diagram/context-menu.md
@@ -12,12 +12,13 @@ domainurl: ##DomainURL##
# Context menu in ##Platform_Name## Diagram control
+In a graphical user interface (GUI), a context menu is a type of menu that appears when you perform a right-click operation. It offers users a set of actions relevant to the current context. In diagrams, context menus can be customized extensively. The Diagram control provides built-in context menu items while also allowing users to define custom menu items through the [`contextMenuSettings`](../api/diagram/contextmenusettingsmodel/) property. This flexibility enables tailoring menus to specific application needs, including creating nested levels of menu items for more intricate user interactions.
-In graphical user interface (GUI), a context menu is a type of menu that appears when you perform right-click operation. Nested level of context menu items can be created. Diagram provides some in-built context menu items and allows to define custom menu items through the [`contextMenuSettings`](../api/diagram#contextMenuSettings) property.
+N> If you want to use contextMenu in diagram, you need to inject `DiagramContextMenu` Module in the diagram.
-## Customize context menu
+## Default context menu
-The [`show`](../api/diagram/contextMenuSettings#show-boolean) property helps you to enable/disable the context menu. Diagram provides some default context menu items to ease the execution of some frequently used commands. The following code illustrates how to enable the default context menu items.
+Diagram provides some default context menu items to ease the execution of some frequently used commands. The [`show`](../api/diagram/contextMenuSettingsModel/#show) property helps you to enable/disable the context menu. The following code illustrates how to enable the default context menu items.
{% if page.publishingplatform == "typescript" %}
@@ -46,21 +47,20 @@ The [`show`](../api/diagram/contextMenuSettings#show-boolean) property helps you
{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs1" %}
{% endif %}
-Context menu can be defined for individual node with the desired context menu items.
+## Custom context menu
-* Apart from the default context menu items, define some additional context menu items. Those additional items have to be defined and added to the [`items`](../api/diagram/contextMenuSettingsModel#items) property of the context menu.
+Context menus can be customized for individual nodes by defining specific menu items beyond the default options. To add additional context menu items, you need to define and incorporate them into the [`items`](../api/diagram/contextMenuItemModel/) property of the context menu.
-* Set text and ID for context menu item using the context menu [`text`](../api/diagram/contextMenuItemModel#text-string) and [`ID`](../api/diagram/contextMenuItemModel#id-string) properties respectively.
+Each custom item can be defined with specific text and ID using the [`text`](../api/diagram/contextMenuItemModel/#text) and [`ID`](../api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](../api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](../api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](..api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](../api/diagram/contextMenuItemModel/#items) property of a parent menu item.
-* Set an image for the context menu item using the context menu [url](../api/diagram/contextMenuItemModel#url) property.
+### To Display custom menu alone
-* The [`iconCss`](../api/diagram/contextMenuItemModel#iconCss-string) property defines the class/multiple classes separated by a space for the menu item that is used to include an icon. Menu item can include font icon and sprite image.
+To display the custom context menu items alone, set the [`showCustomMenuOnly`](../api/diagram/contextMenuSettingsModel/#showcustommenuonly) property to true.
-* The [`target`](../api/diagram/contextMenuItemModel#target-string) property used to set the target to show the menu item.
+### Context menu click
-* The [`separator`](../api/diagram/contextMenuItemModel#separator-boolean) property defines the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property.
+Upon clicking custom menu items, actions are handled using the [`contextMenuClick`](../api/diagram/#contextmenuclick) event in the diagram. This event allows you to define actions based on which menu item is clicked. For instance, in the example below, the cloning of nodes and the change of fill color for nodes and annotations are efficiently managed and implemented through this event.
-The following code example illustrates how to add custom context menu items.
{% if page.publishingplatform == "typescript" %}
@@ -89,13 +89,73 @@ The following code example illustrates how to add custom context menu items.
{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs2" %}
{% endif %}
-To display the custom context menu items alone, set the [`showCustomMenuOnly`](../api/diagram/contextMenuSettingsModel#showCustomMenuOnly) property to true.
+### Context menu open
+
+In certain situations, you may want to hide specific menu items based on the selected elements in the diagram. This can be achieved using the [`contextMenuOpen`](../api/diagram/diagramBeforeMenuOpenEventArgs/) event. When the context menu is opened via right-click, the `contextMenuOpen` event is triggered. Within this event, you can create an array of menu items to hide for the selected element and pass it to the [`hiddenItems`](../api/diagram/diagramBeforeMenuOpenEventArgs/#hiddenitems) property of the contextMenuOpen event argument. The following example demonstrates how to display different custom menu items for nodes, connectors, and the diagram based on the selection.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/contextmenu-cs6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/contextmenu-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs6" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/contextmenu-cs6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/contextmenu-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs6" %}
+{% endif %}
+
+### Context menu with Url
+
+[`url`](../api/diagram/contextMenuItemModel/#url) property of the menu item is used to set the url of any website which will be opened upon clicking on them. The follwoing example shows the context menu with ulr for three websites.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/contextmenu-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/contextmenu-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/contextmenu-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/contextmenu-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs5" %}
+{% endif %}
## Template Support for Context menu
-* Diagram provides template support for context menu. The context menu items can be customized by using the `contextMenuBeforeItemRender` event. The contextMenuBeforeItemRender event triggers while rendering each menu item.
+Diagram provides template support for the context menu. The template for the context menu items can be customized before rendering by using the [`contextMenuBeforeItemRender`](../api/diagram/#contextmenubeforeitemrender) event, which triggers while rendering each menu item.
-* In the following sample, the menu item is rendered with key code for specified action in ContextMenu using the template. Here, the key code is specified for the cut and copy at right corner of the menu items by adding a span element in the `contextMenuBeforeItemRender` event.
+In the following example, menu items are rendered with shortcut key codes for specific actions in the context menu using a template. The key codes for cut, copy, and paste actions are displayed at the right corner of the menu items by adding a span element in the `contextMenuBeforeItemRender` event.
{% if page.publishingplatform == "typescript" %}
@@ -124,33 +184,45 @@ To display the custom context menu items alone, set the [`showCustomMenuOnly`](
{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs3" %}
{% endif %}
+
## Context menu events
-You would be notified with events, when you try to open the context menu items [`contextMenuOpen`](../api/diagram/diagramBeforeMenuOpenEventArgs#DiagramBeforeMenuOpenEventArgs) and when you click the menu items `contextMenuClick`.The following code example illustrates how to define those events.
+|Event|Description|
+|----|----|
+|[`contextMenuBeforeItemRender`](../api/diagram/#contextmenubeforeitemrender)|Triggers while initializing each menu item.|
+|[`contextMenuOpen`](../api/diagram/diagramBeforeMenuOpenEventArgs/)|Triggers upon right-click before opening the context menu.|
+|[`contextMenuClick`](../api/diagram/#contextmenuclick)|Triggers when a menu item is clicked.|
+
+The following example shows how to get these events.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/contextmenu-cs4/index.ts %}
+{% include code-snippet/diagram/contextmenu-events/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/contextmenu-cs4/index.html %}
+{% include code-snippet/diagram/contextmenu-events/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs4" %}
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-events" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/contextmenu-cs4/index.js %}
+{% include code-snippet/diagram/contextmenu-events/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/contextmenu-cs4/index.html %}
+{% include code-snippet/diagram/contextmenu-events/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-cs4" %}
-{% endif %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/diagram/contextmenu-events" %}
+{% endif %}
+
+
+## See Also
+
+* [How to open context menu on left click](https://support.syncfusion.com/kb/article/15100/how-to-perform-clipboard-operation-with-custom-context-menu-on-left-click-using-javascript-diagram)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/diagram-methods.md b/ej2-javascript/diagram/diagram-methods.md
new file mode 100644
index 000000000..cabf94ddf
--- /dev/null
+++ b/ej2-javascript/diagram/diagram-methods.md
@@ -0,0 +1,242 @@
+---
+layout: post
+title: Diagram in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Group in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Diagram API
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Diagram
+
+## Get diagram bounds
+
+The get the diagram bounds, the [`getDiagramBounds`](../api/diagram/#getdiagrambounds) method is used. The following code example shows how to get the diagram bounds
+
+``` javascript
+ /**
+ * Retrieves the bounding rectangle that encloses the entire diagram
+ */
+ let bounds = diagram.getDiagramBounds();
+
+```
+
+## Refresh diagram
+
+Refreshing the diagram will re-render the entire diagram component while preserving all the property changes you have made. The [`refresh`](../api/diagram/#refresh) method is used to refresh the diagram.
+
+``` javascript
+ /**
+ * Refresh the diagram
+ */
+ diagram.refresh();
+
+```
+
+## Clear diagram
+
+The [`clear`](../api/diagram/#clear) method is used to clear the diagram. It removes all nodes and objects, making the diagram empty.
+
+``` javascript
+ /**
+ * Clears the diagram
+ */
+ diagram.clear();
+
+```
+
+## Destroy diagram
+
+The [`destroy`](../api/diagram/#destroy) method is used to completely remove the diagram component from the DOM and free up any associated resources. This method is useful when you no longer need the diagram and want to ensure that all memory and resources allocated to it are properly released.
+
+``` javascript
+ /**
+ * Destroys the diagram
+ */
+ diagram.destroy();
+
+```
+
+## Custom cursor
+
+The [`customCursor`](../api/diagram/customCursorActionModel/) collection specified in the diagram is called on every mouse movement within the diagram is used to set the cursor based on the action. The `getCursor` function is then utilized to retrieve the cursor style for the specified action.
+
+The following example demonstrates how to apply custom cursors for the Select and Drag tools using the `customCursor` property.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/diagram-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/diagram-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs1" %}
+{% endif %}
+
+## Get custom tool
+
+The [`getCustomtTool`](../api/diagram/#getcustomtool) function is called when a mouse down event occurs on diagram elements. This function allows you to specify the tool to use based on the action. The [`getTool`](../api/diagram/#gettool) method is used to retrieve the tool that handles a particular action.
+
+In the following example, `getCustomTool` is used to clone a node when clicking on the user handle.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/diagram-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/diagram-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs2" %}
+{% endif %}
+
+## Background color
+
+The `backgroundColor` property of the diagram is used to set the background color for the entire diagram area. This property accepts various color formats such as color names, hex codes, RGB, or RGBA values.
+
+## AddInfo
+
+The `addInfo` property of the diagram is used to store additional information or metadata related to the diagram. This property can hold custom data that may be useful for various purposes.
+
+
+In the following example, both backgroundColor and addInfo are set for the diagram:
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/diagram-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/diagram-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs3" %}
+{% endif %}
+
+## Mode
+
+There are two types of [`mode`](../api/diagram/renderingMode/) available for rendering diagrams:
+
+- `SVG Mode:` Renders the diagram objects as SVG elements.
+- `Canvas Mode:` Renders the diagram in a canvas.
+
+## NodeDefaults and ConnectorDefaults
+
+The [`getNodeDefaults`](../api/diagram/#getnodedefaults) and [`getConnectorDefaults`](../api/diagram/#getconnectordefaults) properties are used to assign default values to nodes and connectors, respectively. The properties set in [`getNodeDefaults`](../api/diagram/#getnodedefaults) and [`getConnectorDefaults`](../api/diagram/#getconnectordefaults) have higher priority when setting default values.
+
+The following example demonstrates how to set getNodeDefaults and getConnectorDefaults.
+
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/diagram-cs4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs4" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/diagram-cs4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs4" %}
+{% endif %}
+
+## Diagram settings
+
+The `inversedAlignment` property in `diagramSettings` controls the alignment of labels and ports in a node. By default, inversedAlignment is set to true.
+
+The example below demonstrates how to set inversedAlignment for a diagram to align node labels accordingly.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/diagram-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/diagram-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/diagram-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/diagram-cs5" %}
+{% endif %}
+
+
+
diff --git a/ej2-javascript/diagram/events.md b/ej2-javascript/diagram/events.md
new file mode 100644
index 000000000..ee6950e60
--- /dev/null
+++ b/ej2-javascript/diagram/events.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: Events in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Group in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Events
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Events in ##Platform_Name## Diagram control
+
+Events in diagrams are triggered during interactions with diagram elements, allowing for extensive customization and enhancing the overall user experience. These events can be used to dynamically update the diagram, apply specific styles, validate user actions, and more. By leveraging these events, you can create interactive and responsive diagramming applications tailored to specific needs.
+
+## Load event
+
+The [`load`](../api/diagram/iLoadEventArgs/) event triggers before the diagram load.
+
+## Data loaded event
+
+The [`dataLoaded`](../api/diagram/iDataLoadedEventArgs/) event is triggered when the data source is loaded in diagram.
+
+## Created event
+
+The [`created`](../api/diagram/#created) event is triggered when the diagram component is rendered. You can perform any action in the created event such as selecting any object in the diagram or customizing the nodes/connector.
+
+The following example shows the order of these event triggers and how to handle these events in a diagram.
+
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/events-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/events-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/events-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/events-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/events-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/events-cs1" %}
+{% endif %}
+
+## Mouse wheel event
+
+The [`mouseWheel`](../api/diagram/iMouseWheelEventArgs/) event triggers when the mouse is scrolled over the diagram area. You can use this event to prevent zooming and scrolling with the mouse wheel. The following example demonstrates how to handle this event and customize it to prevent zooming and scrolling using the mouse wheel.
+
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/events-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/events-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/events-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/events-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/events-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/events-cs2" %}
+{% endif %}
+
+
+There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on [`node-events`](./nodes-events.md) , [`connector-events`](./connector-events.md) , [`port-events`](./ports-interaction.md/#events) , [`annotation-events`](./label-events.md) , [`scroll-events`](./scroll-settings.md/#scroll-change-event) , [`history-events`](./undo-redo.md/#history-change-event) , [`layout-events`](./layout-event.md), [`user-handle-events`](./user-handle.md/#user-handle-events) , [`fixed-user-handle-events`](./user-handle.md/#fixed-user-handle-events) , [`Symbol-palette-events`](./palette-events.md).
+
+
+
diff --git a/ej2-javascript/diagram/getting-started.md b/ej2-javascript/diagram/getting-started.md
deleted file mode 100644
index 484d4542f..000000000
--- a/ej2-javascript/diagram/getting-started.md
+++ /dev/null
@@ -1,425 +0,0 @@
----
-layout: post
-title: Getting started with ##Platform_Name## Diagram control | Syncfusion
-description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Getting started
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting started in ##Platform_Name## Diagram control
-
-This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control.
-
-
-
-## Dependencies
-
-The following list of dependencies are required to use the `Diagram` component in your application.
-
-```javascript
-|-- @syncfusion/ej2-diagrams
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-data
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-inputs
- |-- @syncfusion/ej2-popups
- |-- @syncfusion/ej2-buttons
- |-- @syncfusion/ej2-lists
- |-- @syncfusion/ej2-splitbuttons
-```
-
-## Set up development environment
-
-* To get started with the diagram component, clone the [`Essential JS 2 quickStart`](https://github.com/syncfusion/ej2-quickstart.git) project and install necessary packages by using the following commands.
-
-```
-git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
-cd quickstart
-npm install
-```
-
-## Add Syncfusion JavaScript packages
-
-* `Diagram packages` should be mapped in the `system.config.js` configuration file.
-
-```javascript
-System.config({
- paths: {
- 'syncfusion:': './node_modules/@syncfusion/',
- },
- map: {
- app: 'app',
- //Syncfusion packages mapping
- "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
- "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
- "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
- "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
- "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
- "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
- "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
- "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
- "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
- },
- packages: {
- 'app': { main: 'app', defaultExtension: 'js' }
- }
-});
-```
-
->The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js`) to start with all Essential JS 2 components.
-
-## Import the Syncfusion CSS styles
-
-The stylesheets of the dependent component.
-
-```html
-
-
-
-
-
-
-
-
-```
-
-## Module Injection
-
-The diagram component is divided into individual feature-wise modules. In order to use a particular feature, inject the required module. The following list describes the module names and their description.
-
-* `BpmnDiagrams`: Inject this provider to add built-in BPMN shapes to diagrams.
-* `ConnectorBridging`: Inject this provider to add bridges to connectors.
-* `ConnectorEditing`: Inject this provider to edit the segments for connector.
-* `ComplexHierarchicalTree`: Inject this provider to complex hierarchical tree like structure.
-* `DataBinding`: Inject this provider to populate nodes from given data source.
-* `DiagramContextMenu`: Inject this provider to manipulate context menu.
-* `HierarchicalTree`: Inject this provider to use hierarchical tree like structure.
-* `LayoutAnimation`: Inject this provider animation to layouts.
-* `MindMap`: Inject this provider to use mind map.
-* `PrintAndExport`: Inject this provider to print or export the objects.
-* `RadialTree`: Inject this provider to use radial tree like structure.
-* `Snapping`: Inject this provider to snap the objects.
-* `SymmetricLayout`: Inject this provider to render layout in symmetrical method.
-* `UndoRedo`: Inject this provider to revert and restore the changes.
-
-These modules should be imported and injected into the Diagram component using `Diagram.Inject` method as follows.
-
-```javascript
-import { Diagram, HierarchicalTree, MindMap, RadialTree, ComplexHierarchicalTree, DataBinding, Snapping, PrintAndExport, BpmnDiagrams, SymmetricLayout, ConnectorBridging, UndoRedo, LayoutAnimation, DiagramContextMenu, ConnectorEditing } from '@syncfusion/ej2-diagrams';
-
-Diagram.Inject(BpmnDiagrams, ConnectorBridging, ConnectorEditing, ComplexHierarchicalTree, DataBinding, DiagramContextMenu, HierarchicalTree, LayoutAnimation, MindMap, PrintAndExport, RadialTree, Snapping, SymmetricLayout, UndoRedo);
-```
-
-## Add diagram to the project
-
-Add the HTML div element for the diagram into your `index.html`. `[src/index.html]`
-
-```html
-
-
-
-
- EJ2 Diagram
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Now, import the diagram component into your `app.ts` to instantiate a diagram and append the diagram instance to the `#container`. `[src/app/app.ts]`
-
-The following example shows a basic diagram.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/getting-started-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/getting-started-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs1" %}
-{% endif %}
-
-Now, the `npm run start` command is used to run the application in the browser.
-
-```
-
-npm run start
-
-```
-
-## Basic Diagram elements
-
-* `Node`: Visualizes any graphical object using nodes, which can also be arranged and manipulated on a diagram page.
-* `Connector`: Represents the relationship between two nodes. Three types of connectors provided as follows:
-
-```
-
-1) Orthogonal
-2) Bezier
-3) Straight
-
-```
-* `Port`: Acts as the connection points of node or connector and allows you to create connections with only specific points.
-* `Annotation`: Shows additional information by adding text or labels on nodes and connectors.
-
-## Flow Diagram
-
-### Create and add node to the diagram
-
-Create and add a `node` (JSON data) with specific position, size.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/getting-started-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/getting-started-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs2" %}
-{% endif %}
-
-### Apply shape and style to node
-
-Syncfusion diagram control provides support to render many build-in shapes in diagram.
-Please refer to [`Shapes`](https://ej2.syncfusion.com/javascript/documentation/api/diagram/shapes/) to know about built-in Shapes.
-
-* The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel#fill-string) color, [`strokeColor`](../api/diagram/shapeStyleModel#strokecolor-string), [`strokeWidth`](../api/diagram/shapeStyleModel#strokewidth-number), [`borderColor`](../api/diagram/node#borderColor-string), [`borderWidth`](../api/diagram/node#borderWidth-number), [`strokeDashArray`](../api/diagram/shapeStyleModel#strokeDashArray-number), [`opacity`](../api/diagram/shapeStyleModel#opacity-number), and [`shadow`](../api/diagram/shapeStyleModel#shadow-number).
-
-```javascript
-
-var nodes = [
- {
- id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
- //To define annotations for the node
- annotations: [{
- id: 'label1',
- content: 'Start'
- }],
- //To define the shape of the node
- shape: { type: 'Flow', shape: 'Terminator'},
- //To define border style for the node.
- borderColor:'orange',borderWidth:10,
- //To define style for the node.
- style:{fill:'red',strokeColor:'pink',strokeWidth:5,strokeDashArray:'2 2'}
- }
-];
-
-```
-
-N> The `annotations` property is an array, which indicates that more than one label can be added to a node.
-
-### Add other flowchart nodes to the diagram
-
-You can add multiple nodes with different shapes into diagram.
-
-```javascript
-
-var nodes = [
- { id: 'Start', offsetX:300, offsetY: 50, annotations: [{ content: 'Start' }], shape: { type: 'Flow', shape: 'Terminator' } },
- { id: 'Init', offsetX:300, offsetY: 140, annotations: [{ content: 'var i = 0;' }], shape: { type: 'Flow', shape: 'Process' } },
- { id: 'Condition', offsetX:300, offsetY: 230, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' } },
- { id: 'Print', offsetX:300, offsetY: 320, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } },
- { id: 'Increment', offsetX:300, offsetY: 410, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' } },
- { id: 'End', offsetX:300, offsetY: 500, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' } },
-];
-
-```
-
-### Connect flow chart nodes
-
-Connect these nodes by adding a connector using the `connector` property and refer the source and target end by using the `sourceNode` and `targetNode` properties. The required nodes and connectors can be added to form a complete flow diagram.
-
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/getting-started-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/getting-started-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs4" %}
-{% endif %}
-
-
-Default values for all `nodes` and `connectors` can be set using the `getNodeDefaults` and `getConnectorDefaults` properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into `getNodeDefaults`.
-
-## Automatic organization chart
-
-In the 'Flow Diagram' section, how to create a diagram manually was discussed. This section explains how to create and position the diagram automatically.
-
-### Create Business object (Employee information)
-
-Define Employee Information as JSON data. The following code example shows an employee array whose, `Name` is used as an unique identifier and `ReportingPerson` is used to identify the person to whom an employee report to, in the organization.
-
-```ts
-
-//Initialize data source...
-let data: object[] = [{Name: "Elizabeth", Role: "Director" },
-{ Name: "Christina", ReportingPerson: "Elizabeth", Role: "Manager" },
-{ Name: "Yoshi", ReportingPerson: "Christina", Role: "Lead" },
-{ Name: "Philip", ReportingPerson: "Christina", Role: "Lead" },
-{ Name: "Yang", ReportingPerson: "Elizabeth", Role: "Manager" },
-{ Name: "Roland", ReportingPerson: "Yang", Role: "Lead" },
-{ Name: "Yvonne", ReportingPerson: "Yang", Role: "Lead" }
-];
-
-```
-
-### Map data source to diagram
-
-You can configure the above "Employee Information" with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example show how `dataSourceSettings` is used to map ID and parent with property name identifiers for employee information.
-
-```ts
-
-//Initialize data source...
-
-let data: object[] = [{Name: "Elizabeth", Role: "Director" },
-{ Name: "Christina", ReportingPerson: "Elizabeth", Role: "Manager" },
-{ Name: "Yoshi", ReportingPerson: "Christina", Role: "Lead" },
-{ Name: "Philip", ReportingPerson: "Christina", Role: "Lead" },
-{ Name: "Yang", ReportingPerson: "Elizabeth", Role: "Manager" },
-{ Name: "Roland", ReportingPerson: "Yang", Role: "Lead" },
-{ Name: "Yvonne", ReportingPerson: "Yang", Role: "Lead" }
-];
-let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
-//Initialize data source...
-let diagram: Diagram = new Diagram({
- width: '100%', height: '600px',
-//Configure data source for diagram
- dataSourceSettings: {
- id: 'Name', parentId: 'ReportingPerson', dataManager: items
- }
-});
-
-```
-
-### Rendering layout with Datasource
-
-To create an organizational chart, the [`type`](../api/diagram/layout) of layout should be set as an `OrganizationalChart`. The following code example shows how DataManager is used to generate Layout based on the DataSourceSettings of the Diagram.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/getting-started-cs16/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs16/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs16" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/getting-started-cs16/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs16/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs16" %}
-{% endif %}
-
-### Customize employee appearance
-
-The following code examples indicate how to define the default appearance of nodes and connectors. The `setNodeTemplate` is used to update each node based on employee data.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/getting-started-cs5/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs5" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/getting-started-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/getting-started-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/getting-started-cs5" %}
-{% endif %}
-
-> You can refer to our [JavaScript Diagram](https://www.syncfusion.com/javascript-ui-controls/js-diagram) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Diagram example](https://ej2.syncfusion.com/demos/#/material/diagram/default-functionalities.html) that shows how to render the Diagram in JavaScript.
\ No newline at end of file
diff --git a/ej2-javascript/diagram/images/0.5after.png b/ej2-javascript/diagram/images/0.5after.png
new file mode 100644
index 000000000..667183502
Binary files /dev/null and b/ej2-javascript/diagram/images/0.5after.png differ
diff --git a/ej2-javascript/diagram/images/0.5before.png b/ej2-javascript/diagram/images/0.5before.png
new file mode 100644
index 000000000..89ecb8da7
Binary files /dev/null and b/ej2-javascript/diagram/images/0.5before.png differ
diff --git a/ej2-javascript/diagram/images/0.5center.png b/ej2-javascript/diagram/images/0.5center.png
index efd81b794..9fbe2c016 100644
Binary files a/ej2-javascript/diagram/images/0.5center.png and b/ej2-javascript/diagram/images/0.5center.png differ
diff --git a/ej2-javascript/diagram/images/0Center.png b/ej2-javascript/diagram/images/0Center.png
new file mode 100644
index 000000000..f16e16667
Binary files /dev/null and b/ej2-javascript/diagram/images/0Center.png differ
diff --git a/ej2-javascript/diagram/images/0after.png b/ej2-javascript/diagram/images/0after.png
new file mode 100644
index 000000000..8605c339c
Binary files /dev/null and b/ej2-javascript/diagram/images/0after.png differ
diff --git a/ej2-javascript/diagram/images/0before.png b/ej2-javascript/diagram/images/0before.png
index 4e939363c..4211b5b5c 100644
Binary files a/ej2-javascript/diagram/images/0before.png and b/ej2-javascript/diagram/images/0before.png differ
diff --git a/ej2-javascript/diagram/images/1Center.png b/ej2-javascript/diagram/images/1Center.png
new file mode 100644
index 000000000..cd749862c
Binary files /dev/null and b/ej2-javascript/diagram/images/1Center.png differ
diff --git a/ej2-javascript/diagram/images/1after.png b/ej2-javascript/diagram/images/1after.png
index 33fc07e25..7fde8de2d 100644
Binary files a/ej2-javascript/diagram/images/1after.png and b/ej2-javascript/diagram/images/1after.png differ
diff --git a/ej2-javascript/diagram/images/1before.png b/ej2-javascript/diagram/images/1before.png
new file mode 100644
index 000000000..e82959c46
Binary files /dev/null and b/ej2-javascript/diagram/images/1before.png differ
diff --git a/ej2-javascript/diagram/images/alignObject.png b/ej2-javascript/diagram/images/alignObject.png
new file mode 100644
index 000000000..d6d097743
Binary files /dev/null and b/ej2-javascript/diagram/images/alignObject.png differ
diff --git a/ej2-javascript/diagram/images/alignOrginal.png b/ej2-javascript/diagram/images/alignOrginal.png
new file mode 100644
index 000000000..ca6efa2c0
Binary files /dev/null and b/ej2-javascript/diagram/images/alignOrginal.png differ
diff --git a/ej2-javascript/diagram/images/alignSelector.png b/ej2-javascript/diagram/images/alignSelector.png
new file mode 100644
index 000000000..d984dfd80
Binary files /dev/null and b/ej2-javascript/diagram/images/alignSelector.png differ
diff --git a/ej2-javascript/diagram/images/bezier-control-point.png b/ej2-javascript/diagram/images/bezier-control-point.png
new file mode 100644
index 000000000..d6a16c654
Binary files /dev/null and b/ej2-javascript/diagram/images/bezier-control-point.png differ
diff --git a/ej2-javascript/diagram/images/bezier-segmentThumb.png b/ej2-javascript/diagram/images/bezier-segmentThumb.png
new file mode 100644
index 000000000..e0076662f
Binary files /dev/null and b/ej2-javascript/diagram/images/bezier-segmentThumb.png differ
diff --git a/ej2-javascript/diagram/images/bpmn-flow-defaultAssociation.png b/ej2-javascript/diagram/images/bpmn-flow-defaultAssociation.png
new file mode 100644
index 000000000..990b414f6
Binary files /dev/null and b/ej2-javascript/diagram/images/bpmn-flow-defaultAssociation.png differ
diff --git a/ej2-javascript/diagram/images/bpmn-flow-defaultMessage.png b/ej2-javascript/diagram/images/bpmn-flow-defaultMessage.png
new file mode 100644
index 000000000..83a4ae3fd
Binary files /dev/null and b/ej2-javascript/diagram/images/bpmn-flow-defaultMessage.png differ
diff --git a/ej2-javascript/diagram/images/commands_image1.gif b/ej2-javascript/diagram/images/commands_image1.gif
new file mode 100644
index 000000000..36e585376
Binary files /dev/null and b/ej2-javascript/diagram/images/commands_image1.gif differ
diff --git a/ej2-javascript/diagram/images/commands_image2.gif b/ej2-javascript/diagram/images/commands_image2.gif
new file mode 100644
index 000000000..243d06591
Binary files /dev/null and b/ej2-javascript/diagram/images/commands_image2.gif differ
diff --git a/ej2-javascript/diagram/images/connectorEndPoint.png b/ej2-javascript/diagram/images/connectorEndPoint.png
new file mode 100644
index 000000000..80032cd58
Binary files /dev/null and b/ej2-javascript/diagram/images/connectorEndPoint.png differ
diff --git a/ej2-javascript/diagram/images/connectorEndPoint2.png b/ej2-javascript/diagram/images/connectorEndPoint2.png
new file mode 100644
index 000000000..18f1f48f1
Binary files /dev/null and b/ej2-javascript/diagram/images/connectorEndPoint2.png differ
diff --git a/ej2-javascript/diagram/images/connectorEndPoint3.png b/ej2-javascript/diagram/images/connectorEndPoint3.png
new file mode 100644
index 000000000..233b2ecc8
Binary files /dev/null and b/ej2-javascript/diagram/images/connectorEndPoint3.png differ
diff --git a/ej2-javascript/diagram/images/freehand-draw.gif b/ej2-javascript/diagram/images/freehand-draw.gif
new file mode 100644
index 000000000..c78b9486f
Binary files /dev/null and b/ej2-javascript/diagram/images/freehand-draw.gif differ
diff --git a/ej2-javascript/diagram/images/ortho-segmentThumb.png b/ej2-javascript/diagram/images/ortho-segmentThumb.png
new file mode 100644
index 000000000..4a42f035d
Binary files /dev/null and b/ej2-javascript/diagram/images/ortho-segmentThumb.png differ
diff --git a/ej2-javascript/diagram/images/page-break.png b/ej2-javascript/diagram/images/page-break.png
new file mode 100644
index 000000000..c74d4de23
Binary files /dev/null and b/ej2-javascript/diagram/images/page-break.png differ
diff --git a/ej2-javascript/diagram/images/pivot-line.png b/ej2-javascript/diagram/images/pivot-line.png
new file mode 100644
index 000000000..153a6a878
Binary files /dev/null and b/ej2-javascript/diagram/images/pivot-line.png differ
diff --git a/ej2-javascript/diagram/images/polygon-drawing.gif b/ej2-javascript/diagram/images/polygon-drawing.gif
new file mode 100644
index 000000000..599ba0946
Binary files /dev/null and b/ej2-javascript/diagram/images/polygon-drawing.gif differ
diff --git a/ej2-javascript/diagram/images/polyline-draw.gif b/ej2-javascript/diagram/images/polyline-draw.gif
new file mode 100644
index 000000000..5b1f4eeac
Binary files /dev/null and b/ej2-javascript/diagram/images/polyline-draw.gif differ
diff --git a/ej2-javascript/diagram/images/resize-handle.png b/ej2-javascript/diagram/images/resize-handle.png
new file mode 100644
index 000000000..76b92b02b
Binary files /dev/null and b/ej2-javascript/diagram/images/resize-handle.png differ
diff --git a/ej2-javascript/diagram/images/rotate-handle.png b/ej2-javascript/diagram/images/rotate-handle.png
new file mode 100644
index 000000000..d024c2140
Binary files /dev/null and b/ej2-javascript/diagram/images/rotate-handle.png differ
diff --git a/ej2-javascript/diagram/images/ruler.png b/ej2-javascript/diagram/images/ruler.png
new file mode 100644
index 000000000..76a843c5d
Binary files /dev/null and b/ej2-javascript/diagram/images/ruler.png differ
diff --git a/ej2-javascript/diagram/images/ruler2.png b/ej2-javascript/diagram/images/ruler2.png
new file mode 100644
index 000000000..1ce4e3b0a
Binary files /dev/null and b/ej2-javascript/diagram/images/ruler2.png differ
diff --git a/ej2-javascript/diagram/images/ruler3.png b/ej2-javascript/diagram/images/ruler3.png
new file mode 100644
index 000000000..3047733a1
Binary files /dev/null and b/ej2-javascript/diagram/images/ruler3.png differ
diff --git a/ej2-javascript/diagram/images/selector.png b/ej2-javascript/diagram/images/selector.png
new file mode 100644
index 000000000..c66012742
Binary files /dev/null and b/ej2-javascript/diagram/images/selector.png differ
diff --git a/ej2-javascript/diagram/images/straight-segmentThumb.png b/ej2-javascript/diagram/images/straight-segmentThumb.png
new file mode 100644
index 000000000..72beba0ce
Binary files /dev/null and b/ej2-javascript/diagram/images/straight-segmentThumb.png differ
diff --git a/ej2-javascript/diagram/images/symbol-palette-drag-drop.gif b/ej2-javascript/diagram/images/symbol-palette-drag-drop.gif
new file mode 100644
index 000000000..2a93f6dc1
Binary files /dev/null and b/ej2-javascript/diagram/images/symbol-palette-drag-drop.gif differ
diff --git a/ej2-javascript/diagram/images/symbol-palette-hover.png b/ej2-javascript/diagram/images/symbol-palette-hover.png
new file mode 100644
index 000000000..2b713bf31
Binary files /dev/null and b/ej2-javascript/diagram/images/symbol-palette-hover.png differ
diff --git a/ej2-javascript/diagram/images/symbol-palette-selected.png b/ej2-javascript/diagram/images/symbol-palette-selected.png
new file mode 100644
index 000000000..af333fe03
Binary files /dev/null and b/ej2-javascript/diagram/images/symbol-palette-selected.png differ
diff --git a/ej2-javascript/diagram/images/text-edit-box.png b/ej2-javascript/diagram/images/text-edit-box.png
new file mode 100644
index 000000000..0b3715d5f
Binary files /dev/null and b/ej2-javascript/diagram/images/text-edit-box.png differ
diff --git a/ej2-javascript/diagram/images/text-edit-box2.png b/ej2-javascript/diagram/images/text-edit-box2.png
new file mode 100644
index 000000000..e71a76487
Binary files /dev/null and b/ej2-javascript/diagram/images/text-edit-box2.png differ
diff --git a/ej2-javascript/diagram/images/text-edit-box3.png b/ej2-javascript/diagram/images/text-edit-box3.png
new file mode 100644
index 000000000..5ff60b2cb
Binary files /dev/null and b/ej2-javascript/diagram/images/text-edit-box3.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign1.png b/ej2-javascript/diagram/images/userhandleAlign1.png
new file mode 100644
index 000000000..23f12b71f
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign1.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign2.png b/ej2-javascript/diagram/images/userhandleAlign2.png
new file mode 100644
index 000000000..86a40baed
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign2.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign3.png b/ej2-javascript/diagram/images/userhandleAlign3.png
new file mode 100644
index 000000000..d49df109e
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign3.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign4.png b/ej2-javascript/diagram/images/userhandleAlign4.png
new file mode 100644
index 000000000..8921a1d94
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign4.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign5.png b/ej2-javascript/diagram/images/userhandleAlign5.png
new file mode 100644
index 000000000..ca9bb28c8
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign5.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign6.png b/ej2-javascript/diagram/images/userhandleAlign6.png
new file mode 100644
index 000000000..4e98887bb
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign6.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign7.png b/ej2-javascript/diagram/images/userhandleAlign7.png
new file mode 100644
index 000000000..45cca1cff
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign7.png differ
diff --git a/ej2-javascript/diagram/images/userhandleAlign8.png b/ej2-javascript/diagram/images/userhandleAlign8.png
new file mode 100644
index 000000000..a1d714fb3
Binary files /dev/null and b/ej2-javascript/diagram/images/userhandleAlign8.png differ
diff --git a/ej2-javascript/diagram/js/bezier-controlPoint.md b/ej2-javascript/diagram/js/bezier-controlPoint.md
index aaf414f1d..b505ad24d 100644
--- a/ej2-javascript/diagram/js/bezier-controlPoint.md
+++ b/ej2-javascript/diagram/js/bezier-controlPoint.md
@@ -17,10 +17,10 @@ While interacting with multiple bezier segments, maintain their control points a
| BezierSmoothness value | Description | Output |
|-------- | -------- | -------- |
-| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. |  |
-| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. |  |
-| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. |  |
-| None | Segment’s control points are interacted independently from each other. |  |
+| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. |  |
+| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. |  |
+| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. |  |
+| None | Segment’s control points are interacted independently from each other. |  |
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -39,8 +39,8 @@ By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/
| ControlPointsVisibility value | Description | Output |
|-------- | -------- | -------- |
-| None |It allows you to hide all control points of the bezier connector. |  |
-| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. |  |
-| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. |  |
-| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.|  |
-| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. |  |
+| None |It allows you to hide all control points of the bezier connector. |  |
+| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. |  |
+| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. |  |
+| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.|  |
+| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. |  |
diff --git a/ej2-javascript/diagram/js/bezier-segEditOrientation.md b/ej2-javascript/diagram/js/bezier-segEditOrientation.md
index c0f9526f1..bfa8118d0 100644
--- a/ej2-javascript/diagram/js/bezier-segEditOrientation.md
+++ b/ej2-javascript/diagram/js/bezier-segEditOrientation.md
@@ -17,8 +17,8 @@ The intermediate point of two adjacent bezier segments can be edited interactive
| SegmentEditOrientation value | Description | Output |
|-------- | -------- | -------- |
-| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. |  |
-| Freeform | It allows the intermediate points to be dragged in any direction. |  |
+| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. |  |
+| Freeform | It allows the intermediate points to be dragged in any direction. |  |
The following code illustrates how to interact with Bezier efficiently by using the [`smoothness`](../api/diagram/bezierSmoothness/) and `segmentEditOrientation` properties of the `bezierSettings`.
diff --git a/ej2-javascript/diagram/js/commands.md b/ej2-javascript/diagram/js/commands.md
index 48a363afd..b5e5e62f1 100644
--- a/ej2-javascript/diagram/js/commands.md
+++ b/ej2-javascript/diagram/js/commands.md
@@ -13,10 +13,10 @@ domainurl: ##DomainURL##
-There are several commands available in the diagram as follows.
+The commands in diagram control are used to perform various interactions within the diagram when called. Several commands are available in the diagram, as follows:
* Alignment commands
-* Spacing commands
+* Distribute commands
* Sizing commands
* Clipboard commands
* Grouping commands
@@ -26,227 +26,141 @@ There are several commands available in the diagram as follows.
* FitToPage commands
* Undo/Redo commands
-## Align
+## Align commands
-Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to [`align`](../api/diagram#align) commands which shows how to use align methods in the diagram.
+The alignment command enables you to align selected or defined objects, such as nodes and connectors, with respect to the selection boundary or the first selected object. The [`align`](../api/diagram/#align) method parameters are explained below.
+
+### Alignment Options
+
+The [`Alignment Options`](../api/diagram/alignmentOptions/) defines the alignment position of objects to be aligned.
+
+|Alignment|Description|
+|----|----|
+|Left| Aligns all the selected objects at the left of the selection boundary|
+|Right| Aligns all the selected objects at the right of the selection boundary|
+|Center| Aligns all the selected objects at the center of the selection boundary|
+|Top| Aligns all the selected objects at the top of the selection boundary|
+|Bottom| Aligns all the selected objects at the bottom of the selection boundary|
+|Middle| Aligns all the selected objects at the middle of the selection boundary|
-| Parameters | Description |
-|:------------| :------: |
-|[`Alignment Options`](../api/diagram/alignmentOptions#AlignmentOptions) |
Defines the specific direction, with respect to which the objects to be aligned. The accepted values of the argument "alignment options" are as follows.
Left
Aligns all the selected objects at the left of the selection boundary.
Right
Aligns all the selected objects at the right of the selection boundary.
Center
Aligns all the selected objects at the center of the selection boundary.
Top
Aligns all the selected objects at the top of the selection boundary.
Bottom
Aligns all the selected objects at the bottom of the selection boundary.
Middle
Aligns all the selected objects at the middle of the selection boundary.
|
-| Objects |
Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned.
Defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`. The accepted values of the argument "alignment mode" are as follows.
Object
Aligns the objects based on the first object in the selected list.
Selector
Aligns the objects based on the selection boundary.
|
+### Objects
-The following code example illustrates how to align all the selected objects at the left side of the selection boundary.
+Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned.
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.NodeModel);
-//Initializes the node
-var node = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node2 = {
- id: 'node2',
- width: 100,
- height: 60,
- offsetX: 100,
- offsetY: 170,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node3 = {
- id: 'node3',
- width: 140,
- height: 60,
- offsetX: 100,
- offsetY: 240,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-//Initializes the Diagram Component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-},'#element');
-var selArray = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Sets direction as left
-diagram.align('Left', diagram.selectedItems.nodes, 'Selector');
+### Alignment Mode
-```
+[`Alignment Mode`](../api/diagram/alignmentMode/) defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`. The accepted values of the argument "alignment mode" are as follows.
+
+The below table shows the alignment as `Left` for different alignment modes.
+
+|Nodes before alignment|Alignment mode|Description|Output image|
+|----|----|----|----|
+||Object (Default)|Aligns the objects based on the bounds of first object in the selected list.||
+||Selector|Aligns the objects based on the selection boundary.||
+
+
+The following code example illustrates how to align all the selected objects at the left side of the selection boundary.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs13/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs13" %}
+
+
-## Distribute
+## Distribute commands
-The [`Distribute`](../api/diagram#distribute) commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary.
+The [`distribute`](../api/diagram/#distribute) method enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The [`distribute`](../api/diagram/#distribute) method parameters are explained below.
-The factor to distribute the shapes [`DistributeOptions`](../api/diagram/distributeOptions#DistributeOptions) are listed as follows:
+### Distribute options
-* RightToLeft: Distributes the objects based on the distance between the right and left sides of the adjacent objects.
-* Left: Distributes the objects based on the distance between the left sides of the adjacent objects.
-* Right: Distributes the objects based on the distance between the right sides of the adjacent objects.
-* Center: Distributes the objects based on the distance between the center of the adjacent objects.
-* BottomToTop: Distributes the objects based on the distance between the bottom and top sides of the adjacent objects.
-* Top: Distributes the objects based on the distance between the top sides of the adjacent objects.
-* Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects.
-* Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects.
+The factors for distributing shapes using [DistributeOptions](../api/diagram/distributeOptions/) are listed as follows:
-The following code example illustrates how to execute the space commands.
+|Distribute option| Description|
+|----|----|
+| RightToLeft | Distributes the objects based on the distance between the right and left sides of the adjacent objects. |
+| Left | Distributes the objects based on the distance between the left sides of the adjacent objects. |
+| Right | Distributes the objects based on the distance between the right sides of the adjacent objects. |
+| Center | Distributes the objects based on the distance between the center of the adjacent objects. |
+| BottomToTop | Distributes the objects based on the distance between the bottom and top sides of the adjacent objects. |
+| Top | Distributes the objects based on the distance between the top sides of the adjacent objects. |
+| Bottom | Distributes the objects based on the distance between the bottom sides of the adjacent objects. |
+| Middle | Distributes the objects based on the distance between the vertical center of the adjacent objects. |
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.NodeModel);
-//Initializes the node
-var node = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node2 = {
- id: 'node2',
- width: 90,
- height: 60,
- offsetX: 240,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node3 = {
- id: 'node3',
- width: 90,
- height: 60,
- offsetX: 170,
- offsetY: 150,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-//Initializes the diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-},'#element');
-let selArray: (NodeModel | ConnectorModel)[] = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Distributes space between the nodes
-diagram.distribute('RightToLeft', diagram.selectedItems.nodes);
+### Objects
-```
+Defines the objects to be distributed. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets distributed.
+
+The following code example illustrates how the nodes are distributed using the `RightToLeft` option.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs14/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs14" %}
-## Sizing
+## Sizing commands
-Sizing [`sameSize`](../api/diagram#sameSize) commands enable to equally size the selected nodes with respect to the first selected object.
+The [`sameSize`](../api/diagram/#samesize) command enables you to size all selected nodes to match the size of the first selected object or the first node in the objects collection you provide as the second parameter. The parameters for the [`sameSize`](../api/diagram/#samesize) method are explained below.
-[`SizingOptions`](../api/diagram/sizingOptions) are as follows:
+### Sizing options
-* Width: Scales the width of the selected objects.
-* Height: Scales the height of the selected objects.
-* Size: Scales the selected objects both vertically and horizontally.
+[`SizingOptions`](../api/diagram/sizingOptions) include:
-The following code example illustrates how to execute the size commands.
+|Sizing options|Description|
+|----|----|
+| Width | Adjusts the width of all objects to match the width of the first node in the objects collection. |
+| Height | Adjusts the height of all objects to match the height of the first node in the objects collection. |
+| Size | Adjusts both the width and height of all objects to match the size of the first node in the objects collection. |
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.NodeModel);
-//Initializes the node
-var node = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node2 = {
- id: 'node2',
- width: 100,
- height: 60,
- offsetX: 100,
- offsetY: 170,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-var node3 = {
- id: 'node3',
- width: 130,
- height: 60,
- offsetX: 100,
- offsetY: 230,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
+### Objects
-//Initializes the diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-},'#element');
-let selArray: (NodeModel)[] = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Resizes the selected nodes with the same width
-diagram.sameSize('Width', diagram.selectedItems.nodes);
+This optional parameter defines which objects should be scaled. By default, all nodes and connectors within the selected region of the diagram are scaled.
-```
+The following code example illustrates how to execute the size commands.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs15/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs15" %}
-
-## Clipboard
+
-Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link which shows how to use clipboard methods in the diagram.
+## Clipboard commands
-* Cuts the selected elements from the diagram to the diagram’s clipboard, [`cut`](../api/diagram#cut).
+Clipboard commands are used to cut, copy, or paste selected elements in the diagram using the [`cut`](../api/diagram/#cut), [`copy`](../api/diagram/#copy), [`paste`](../api/diagram/#paste) methods. You can also use keyboard shortcuts for these actions. For detailed information on using these methods refer the below table.
-* Copies the selected elements from the diagram to the diagram’s clipboard, [`copy`](../api/diagram#copy).
+| Command (Shortcut key) | Description |
+|---------|-------------|
+| `Cut` (CTRL+X) | Removes the selected elements from the diagram and places them onto the diagram’s clipboard. This operation is performed using the [`cut`](../api/diagram/#cut) method. |
+| `Copy`(CTRL+C) | Duplicates the selected elements and places them onto the diagram’s clipboard without removing them from their original location. Use the [`copy`](../api/diagram/#copy) method for this operation. |
+| `Paste`(CTRL+V) | Inserts the elements stored on the diagram’s clipboard (nodes and connectors) into the diagram. This can be done using the [`paste`](../api/diagram/#paste) method. |
-* Pastes the diagram’s clipboard data (nodes/connectors) into the diagram, [`paste`](../api/diagram#paste).
+The [`paste`](../api/diagram/#paste) method optionally accepts a collection of nodes or connectors to be added to the diagram.
The following code illustrates how to execute the clipboard commands.
@@ -261,15 +175,16 @@ The following code illustrates how to execute the clipboard commands.
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs1" %}
-## Grouping
-
-**Grouping commands** are used to group/ungroup the selected elements on the diagram. Refer to the following link which shows how to use grouping commands in the diagram.
+## Grouping commands
-[`Group`](../api/diagram#group) the selected nodes and connectors in the diagram.
+Grouping Commands are used to group or ungroup selected elements in the diagram. Grouping commands help in managing and organizing multiple elements by combining them into a single group or separating them into individual elements. You can also use keyboard shortcuts for these actions. The following table provides more details on these commands:
-[`Ungroup`](../api/diagram#ungroup) the selected nodes and connectors in the diagram.
+| Commands (Shortcut key) | Description|
+|----|----|
+| [`Group`](../api/diagram/#group) (CTRL+G) | Combines the selected nodes and connectors into a single group, allowing you to move, resize, or apply other operations to all grouped elements as a unit. |
+| [`Ungroup`](../api/diagram/#ungroup) (CTRL+Shift+U) | Splits a previously grouped set of nodes and connectors into individual elements, enabling you to modify or manipulate them separately. |
-The following code illustrates how to execute the grouping commands.
+The following code examples demonstrate how to use the grouping commands in diagram:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -282,13 +197,38 @@ The following code illustrates how to execute the grouping commands.
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs2" %}
+## Rotate commands
+
+The [`rotate`](../api/diagram/#rotate) commands in the diagram allow users to rotate selected elements by specified angles. These commands are useful for adjusting the rotate angle of nodes or shapes within the diagram.
+
+| Parameter | Type | Description |
+|----------|-------|-------------|
+| obj | NodeModel / ConnectorModel/ SelectorModel | The objects to be rotated. |
+| angle | number | The angle by which the objects should be rotated (in degrees). |
+| pivot (optional) | PointModel| The reference point with respect to which the objects will be rotated. |
+| rotateUsingHandle (optional) | boolean | Whether to rotate using the handle. |
+
+You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. The following example shows how to rotate nodes in clockwise and anti-clockwise direction.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs19/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs19/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs19" %}
+
+
## Z-Order command
-**Z-Order commands** enable you to visually arrange the selected objects such as nodes and connectors on the page.
+**Z-Order commands** allow you to control the stacking order of selected objects, such as nodes and connectors, on the diagram page.
-### bringToFront command
+### Bring to front command
-The [`bringToFront`](../api/diagram#bringToFront) command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the `bringToFront` command.
+The [`bringToFront`](../api/diagram/#bringtofront) command moves the selected element to the front, placing it above all other elements in the diagram. The following code illustrates how to use the `bringToFront` command.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -301,9 +241,9 @@ The [`bringToFront`](../api/diagram#bringToFront) command visually brings the se
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs3" %}
-### sendToBack command
+### Send to back command
-The [`sendToBack`](../api/diagram#sendToBack) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `sendToBack` command.
+The [`sendToBack`](../api/diagram/#sendtoback) command moves the selected element to the back, placing it behind all other elements in the diagram. The following code illustrates how to use the `sendToBack` command.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -316,9 +256,9 @@ The [`sendToBack`](../api/diagram#sendToBack) command visually moves the selecte
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs4" %}
-### moveForward command
+### Move forward command
-The [`moveForward`](../api/diagram#moveForward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `moveForward` command.
+The [`moveForward`](../api/diagram/#moveforward) command moves the selected element one step forward in the stack, placing it above the nearest overlapping element. The following code illustrates how to use the `moveForward` command.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -331,9 +271,9 @@ The [`moveForward`](../api/diagram#moveForward) command visually moves the selec
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs5" %}
-### sendBackward command
+### send backward command
-The [`sendBackward`](../api/diagram#sendBackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `sendBackward` command.
+The [`sendBackward`](../api/diagram/#sendbackward) command moves the selected element one step backward in the stack, placing it behind the underlying element. The following code illustrates how to use the `sendBackward` command.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -346,24 +286,27 @@ The [`sendBackward`](../api/diagram#sendBackward) command visually moves the sel
{% previewsample "page.domainurl/code-snippet/diagram/commands-cs6" %}
+
+The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction.md/#keyboard).
+
## Zoom
-The [`zoom`](../api/diagram#zoom) command is used to zoom-in and zoom-out the diagram view.
+The [`zoom`](../api/diagram/#zoom) command is used to zoom-in and zoom-out the diagram view.
-The following code illustrates how to zoom-in/zoom out the diagram.
+The following code illustrates how to zoom-in the diagram.
```javascript
import {
Diagram
} from '@syncfusion/ej2-diagrams';
//Initializes the diagram component
-let diagram: Diagram = new Diagram({
+var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '350px',
});
diagram.appendTo('#element');
-// Sets the zoomFactor
-//Defines the focusPoint to zoom the diagram with respect to any point
+// parameter 1 - Sets the zoomFactor
+// parameter 2 - Defines the focusPoint to zoom the diagram with respect to any point
//When you do not set focus point, zooming is performed with reference to the center of current diagram view.
diagram.zoom(1.2, {
x: 100,
@@ -371,213 +314,166 @@ diagram.zoom(1.2, {
});
```
+For more information about zoom refer to the [zoom](./scroll-settings.md/#update-zoom-at-runtime)
+
## Nudge command
-The [`nudge`](../api/diagram#nudge) commands move the selected elements towards up, down, left, or right by 1 pixel.
+The [`nudge`](../api/diagram/#nudge) command moves the selected elements up, down, left, or right by 1 pixel. The parameters of [`nudge`](../api/diagram/#nudge) method is explained below.
-[`NudgeDirection`](../api/diagram/nudgeDirection) nudge command moves the selected elements towards the specified direction by 1 pixel, by default.
+| Parameter | Type | Description |
+|--------------|-----------|-----------|
+| direction |[`NudgeDirection`](../api/diagram/nudgeDirection/) | Defines the direction in which the objects should be moved. |
+| x (optional) | number | The horizontal distance by which the selected objects should be moved. |
+| y (optional) | number | The vertical distance by which the selected objects should be moved. |
+| type (optional) | string | A string that defines the type of nudge action. |
-The accepted values of the argument "direction" are as follows:
+The accepted values for the "direction" argument are as follows:
-* Up: Moves the selected elements towards up by the specified delta value.
-* Down: Moves the selected elements towards down by the specified delta value.
-* Left: Moves the selected elements towards left by the specified delta value.
-* Right: Moves the selected elements towards right by the specified delta value.
+* Up: Moves the selected elements up by the specified delta value.
+* Down: Moves the selected elements down by the specified delta value.
+* Left: Moves the selected elements left by the specified delta value.
+* Right: Moves the selected elements right by the specified delta value.
-The following code illustrates how to execute nudge command.
+The following code illustrates how to execute the nudge command.
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram);
-//Initializes the Diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
-},'#element');
-//Nudges to right
-diagram.nudge('Right');
-```
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs7" %}
-## Nudge by using arrow keys
+### Nudge by using arrow keys
-The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel.
+The arrow keys can be used to move the selected elements up, down, left, or right by 1 pixel.
-Nudge commands are particularly useful for accurate placement of elements.
+Nudge commands are particularly useful for accurate placement of elements.
## BringIntoView
-The [`bringIntoView`](../api/diagram#bringIntoView) command brings the specified rectangular region into the viewport of the diagram.
+The [`bringIntoView`](../api/diagram/#bringintoview) command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view.
-The following code illustrates how to execute the `bringIntoView` command.
+The [`bringIntoView`](../api/diagram/#bringintoview) method takes a single parameter, an object that defines the rectangular region to bring into view. This object should include properties such as x, y, width, and height to specify the exact region to be made visible.
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram);
-//Initializes the diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
-},'#element');
-//Brings the specified rectangular region of the diagram content to the viewport of the page.
-let bound: Rect = new Rect(200, 400, 500, 400);
-diagram.bringIntoView(bound);
+The following code illustrates how to execute the bringIntoView command:
-```
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs8/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs8" %}
## BringToCenter
-The [`bringToCenter`](../api/diagram#bringToCenter) command brings the specified rectangular region of the diagram content to the center of the viewport.
+The [`bringToCenter`](../api/diagram/#bringtocenter) command centers the specified rectangular region of the diagram content within the viewport.
-The following code illustrates how to execute the `bringToCenter` command.
+The [`bringToCenter`](../api/diagram/#bringtocenter) method takes a single parameter, an object that defines the rectangular region to be centered. This object should include properties such as x, y, width, and height to specify the exact region to be brought to the center.
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram,ej.diagrams.React);
-//Initializes the Diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
-},'#element');
-//Brings the specified rectangular region of the Diagram content to the center of the viewport.
-var bound = ej.diagram.Rect(200, 400, 500, 400);
-diagram.bringToCenter(bound);
-```
+The following code illustrates how to execute the bringToCenter command.
-## FitToPage command
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs9/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs9" %}
+
+## FitToPage
+
+The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](api/diagram/iFitOptions/), which specifies the options for fitting the diagram to the page.
+
+### FitOptions
-The [`fitToPage`](../api/diagram#fitToPage) command helps to fit the diagram content into the view with respect to either width, height, or at the whole.
+The [`mode`](../api/diagram/fitModes/) parameter defines how the diagram should fit into the viewport—horizontally, vertically, or based on the entire bounds of the diagram.
-The [`mode`](../api/diagram/fitModes#modes) parameter defines whether the diagram has to be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram.
+The [`region`](../api/diagram/diagramRegions/) parameter specifies the region of the diagram that should be fit within viewport.
-The [`region`](../api/diagram/diagramRegions#region) parameter defines the region that has to be drawn as an image.
+The [`margin`](../api/diagram/marginModel/) parameter sets the margin around the diagram content that should be included in the view.
-The [`margin`](../api/diagram/iFitOptions#margin) parameter defines the region/bounds of the diagram content that is to be fit into the view.
+The [`canZoomIn`](../api/diagram/iFitOptions/#canzoomin) parameter enables or disables zooming in to fit smaller content into a larger viewport.
-The [`canZoomIn`](../api/diagram/iFitOptions#canZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport.
+The [`canZoomOut`](../api/diagram/iFitOptions/#canzoomout) parameter enables or disables zooming out to fit larger content into a smaller viewport.
-The [`customBounds`](../api/diagram/iFitOptions#customBounds) parameter the custom region that has to be fit into the viewport.
+The [`customBounds`](../api/diagram/iFitOptions/#custombounds) parameter defines a custom region that should be fit into the viewport.
The following code illustrates how to execute `FitToPage` command.
-```javascript
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram);
-//Initializes the Diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
-},'#element');
-//fit the diagram to the page with respect to mode and region
-diagram.fitToPage({
- mode: 'Page',
- region: 'Content',
- margin: {
- bottom: 50
- },
- canZoomIn: false
-});
-```
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs10/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs10" %}
## Command manager
-Diagram provides support to map/bind command execution with desired combination of key gestures. Diagram provides some built-in commands.
-[`CommandManager`](../api/diagram/commandManager#commandManager) provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized.
+The Diagram provides support for mapping or binding command execution to specific key gestures. It includes built-in commands and allows for the definition of custom commands through the [`commandManager`](../api/diagram/commandManagerModel/). Custom commands are executed when the specified key gesture is recognized.
-## Custom command
+### Custom Command
-To define a custom command, specify the following properties:
-* [`execute`](../api/diagram/command#execute): A method to be executed.
-* [`canExecute`](../api/diagram/command#canexecute): A method to define whether the command can be executed at the moment.
-* [`gesture`](../api/diagram/keyGestureModel#gesture): A combination of [`keys`](../api/diagram/keys#key) and [`KeyModifiers`](../api/diagram/keyModifiers#keymodifiers).
-* [`parameter`](../api/diagram/command#parameter): Defines any additional parameters that are required at runtime.
-* [`name`](../api/diagram/command#name): Defines the name of the command.
+To define a custom command, you need to specify the following properties:
-To explore the properties of custom commands, refer to [`Commands`](../api/diagram/command#commands).
+* [`execute`](../api/diagram/commandModel/#execute): A method to be executed when the command is triggered.
+* [`canExecute`](../api/diagram/commandModel/#canexecute): A method that determines whether the command can be executed at a given moment.
+* [`gesture`](../api/diagram/keyGestureModel/): A combination of [`keys`](../api/diagram/keys/) and [`KeyModifiers`](../api/diagram/keyModifiers/) that defines the key gesture for the command.
+* [`parameter`](../api/diagram/commandModel/#parameter): Any additional parameters required at runtime for the command.
+* [`name`](../api/diagram/commandModel/#name): The name of the command.
-The following code example illustrates how to define a custom command.
+To explore the properties of custom commands, refer to [`Commands`](../api/diagram/commandModel/).
-```javascript
-import {
- Diagram,
- Keys,
- KeyModifiers
-} from '@syncfusion/ej2-diagrams';
-//Initializes the Diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
- commandManager: {
- commands: [{
- name: 'customCopy',
- parameter: 'node',
- //Method to define whether the command can be executed at the current moment
- canExecute: function() {
- //Defines that the clone command can be executed, if and only if the selection list is not empty.
- if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
- return true;
- } else {
- return false;
- }
- },
- //Command handler
- execute: function() {
- //Logic to clone the selected element
- diagram.copy();
- diagram.paste();
- diagram.dataBind();
- },
- //Defines that the clone command has to be executed on the recognition of key press.
- gesture: {
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt
- }
- }]
- },
-},'#element');
-```
+The following code example illustrates how to use the command manager to clone a node and change the fill color of a node while pressing `G` and `Shift+G` or `Alt+G`, respectively:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs17/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs17/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs17" %}
-## Modify the existing command
+### Disable/Modify the existing command
-When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified.
+When any of the default commands are not desired, they can be disabled. Additionally, if you need to change the functionality of a specific command, it can be completely modified.
-The following code example illustrates how to disable a command and how to modify the built-in commands.
+The following code example illustrates how to disable the default cut and delete commands using CTRL+X and Delete keys, and how to modify the copy command to clone a node using CTRL+C:
-```javascript
-import {
- Diagram,
- Keys,
- KeyModifiers
-} from '@syncfusion/ej2-diagrams';
-//Initializes the diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '350px',
- //Disables the nudging commands
- commandManager: {
- commands: {
- //Assigns null value to an existing command and disables its execution
- "nudgeUp": null,
- "nudgeDown": null,
- "nudgeRight": null,
-
- //Modifies the existing command - nudgeLeft
- "nudgeLeft": {
- canExecute: function(args){
- if (args.model.selectedItems.length) {
- return true;
- }
- }
- },
- //Command handler
- execute: function(args) {
- diagram.nudge("left");
- },
-
- gesture: {
- key: Keys.Left
- }
- }
- }
-},'#element');
-```
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/commands-cs18/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs18/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs18" %}
+
+## Undo-redo
+
+Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo.md)
## See Also
diff --git a/ej2-javascript/diagram/js/connector-customization.md b/ej2-javascript/diagram/js/connector-customization.md
index 659051136..b3c7bdb74 100644
--- a/ej2-javascript/diagram/js/connector-customization.md
+++ b/ej2-javascript/diagram/js/connector-customization.md
@@ -256,6 +256,21 @@ The property [`maxSegmentThumb`](../api/diagram/connector#maxSegmentThumb) is us
+## Reset segments
+
+The [`resetSegments`](../api/diagram/#resetsegments) method resets the segments of connectors to their default state based on their connection points. This operation removes any custom segments and restores the connectors to their original configuration. The following example demonstrates how to reset connector segments at runtime.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/connectors-resetSeg/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-resetSeg/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-resetSeg" %}
+
## Enable Connector Splitting
The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) as true. The default value of the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) is false
@@ -275,3 +290,20 @@ The following code illustrates how to split the connector and create a connectio
+### Preserve connector style while connector splitting
+
+When splitting a connector using [`enableConnectorSplit`](../api/diagram/enableConnectorSplit), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles.
+
+The following example demonstrates how to apply the same style of the original connector to the newly added connector:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/connectors-split/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-split/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-split" %}
+
diff --git a/ej2-javascript/diagram/js/connector-events.md b/ej2-javascript/diagram/js/connector-events.md
index 9a1bb65c8..ee33dc61a 100644
--- a/ej2-javascript/diagram/js/connector-events.md
+++ b/ej2-javascript/diagram/js/connector-events.md
@@ -13,11 +13,25 @@ domainurl: ##DomainURL##
Diagram provides some events support for connectors that triggers when interacting with the connector.
-## Selection change event.
+## Click event
-When selecting/unselecting the connector, the selection chang event will be triggered.
-The following code example explains how to get the [`selection change`](../api/diagram/iselectionchangeeventargs/) event in the diagram.
+Triggers when the connector is clicked. The following code example explains how to get the [`click`](../api/diagram/iClickEventArgs/) event in the diagram.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-clickEvent" %}
+## Selection change event
+
+When selecting/unselecting the connector, the selection change event will be triggered.
+The following code example explains how to get the [`selection change`](../api/diagram/iselectionchangeeventargs/) event in the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -30,7 +44,19 @@ The following code example explains how to get the [`selection change`](../api/d
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SelectEvent" %}
-## Position change event.
+ You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](../api/diagram/iSelectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+```ts
+ selectionChange: function (args) {
+ if (args.state == 'Changing') {
+ //Prevents selection
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Position change event
Triggers when the connector's position is changed in diagram.
The following code example explains how to get the [`position change`](../api/diagram/iDraggingEventArgs/) event in the diagram.
@@ -47,7 +73,19 @@ The following code example explains how to get the [`position change`](../api/di
{% previewsample "page.domainurl/code-snippet/diagram/connectors-PositionEvent" %}
-## Connection change event.
+ You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](../api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ positionChange: function (args) {
+ if (args.state == 'Progress') {
+ //Prevents dragging
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Connection change event
Triggers when the connector’s source or target point is connected or disconnected from the source or target.
The following code example explains how to get the [`connection change`](../api/diagram/iConnectionChangeEventArgs/) event in the diagram.
@@ -63,7 +101,7 @@ The following code example explains how to get the [`connection change`](../api/
{% previewsample "page.domainurl/code-snippet/diagram/connectors-ConnectionEvent" %}
-## Source Point change event.
+## Source Point change event
Triggers when the connector's source point is changed.
The following code example explains how to get the [`source Point change`](../api/diagram/iendchangeeventargs/) event in the diagram.
@@ -79,7 +117,21 @@ The following code example explains how to get the [`source Point change`](../ap
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SourcePointEvent" %}
-## Target Point change event.
+ You can prevent source point dragging by setting the `cancel` property of [`EndChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+```javascript
+
+ sourcePointChange: function (args) {
+ if (args.state === 'Progress') {
+ //Prevents source point dragging
+ args.cancel = true;
+ //Customize
+ }
+ },
+
+```
+
+## Target Point change event
Triggers when the connector's target point is changed.
The following code example explains how to get the [`target Point change`](../api/diagram/iEndChangeEventArgs/) event in the diagram.
@@ -95,11 +147,26 @@ The following code example explains how to get the [`target Point change`](../ap
{% previewsample "page.domainurl/code-snippet/diagram/connectors-TargetPointEvent" %}
-## Segment Collection Change event.
+ You can prevent target point dragging by setting the `cancel` property of [`EndChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+```javascript
+
+targetPointChange: function (args) {
+ if (args.state === 'Progress') {
+ //Prevents target point dragging
+ args.cancel = true;
+ //Customize
+ }
+ },
+
+```
+
+## Segment Collection Change event
Triggers when the connector's segments added or removed at runtime.
-The following code example explains how to get the [`segment collection change`](../api/diagram/isegmentcollectionchangeeventargs/) event in the diagram.
+The following code example explains how to get the [`segment collection change`](../api/diagram/isegmentcollectionchangeeventargs/) event in the diagram.
+Use `CTRL+Shift+Click` on connector to add/remove segments.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -112,7 +179,7 @@ The following code example explains how to get the [`segment collection change`]
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SegmentEvent" %}
-## Segment Change event.
+## Segment Change event
Triggers when the connector's segments were adjusted or edited.
The following code example explains how to get the [`segment change`](../api/diagram/isegmentchangeeventargs/) event in the diagram.
@@ -129,6 +196,18 @@ The following code example explains how to get the [`segment change`](../api/dia
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SegmentEditEvent" %}
+ You can prevent segment editing by setting the `cancel` property of [`SegmentChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+``` javascript
+ segmentChange: function (args) {
+ if (args.state === 'Start') {
+ //Prevents the segment editing
+ args.cancel = true;
+ }
+ },
+
+```
+
## Collection change event
Triggers when the connector is added or removed from diagram.
@@ -145,19 +224,14 @@ The following code example explains how to get the [`collection change`](../api/
{% previewsample "page.domainurl/code-snippet/diagram/connectors-CollectionEvent" %}
-## Get Connector defaults
-
-Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties.
+You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the `cancel` property of [`CollectionChangeEventArgs`](../api/diagram/iCollectionChangeEventArgs/) to true, as shown in the code snippet below.
-The following code example explains how to customize the connector using [`getConnectorDefaults`](../api/diagram/#getconnectorobject).
+``` javascript
+collectionChange: function (args) {
+ if (args.state === 'Changing') {
+ //Prevents collection change - Prevents Adding or deleting connectors
+ args.cancel = true;
+ }
+ },
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/connectors-getConDef/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/connectors-getConDef/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/connectors-getConDef" %}
+````
diff --git a/ej2-javascript/diagram/js/connector-interaction.md b/ej2-javascript/diagram/js/connector-interaction.md
index af04517a9..45d074be6 100644
--- a/ej2-javascript/diagram/js/connector-interaction.md
+++ b/ej2-javascript/diagram/js/connector-interaction.md
@@ -55,7 +55,9 @@ The connector can be selected by clicking it. When the connector is selected, ci
-The following code example shows how to drag connector end point at runtime.
+You can also update the endPoints of diagram by using [`dragSourceEnd`](../api/diagram/#dragsourceend) and [`dragTargetEnd`](../api/diagram/#dragtargetend) methods of diagram.
+
+The following code example shows the ways to drag connector end point at runtime.
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/ej2-javascript/diagram/js/connector-orthogonal.md b/ej2-javascript/diagram/js/connector-orthogonal.md
index 1b3655ed7..9587de033 100644
--- a/ej2-javascript/diagram/js/connector-orthogonal.md
+++ b/ej2-javascript/diagram/js/connector-orthogonal.md
@@ -71,7 +71,7 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w
## How to customize Orthogonal Segment Thumb Shape
-The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the rhombus shape by default. The [`segmentThumbShape`](../api/diagram#segmentThumbShape-SegmentThumbShapes) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided:
+The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the circle shape by default. The [`segmentThumbShape`](../api/diagram#segmentThumbShape-SegmentThumbShapes) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided:
| Shape name | Shape |
|-------- | -------- |
diff --git a/ej2-javascript/diagram/js/connector-straight.md b/ej2-javascript/diagram/js/connector-straight.md
index ba739e457..9dd40b9e6 100644
--- a/ej2-javascript/diagram/js/connector-straight.md
+++ b/ej2-javascript/diagram/js/connector-straight.md
@@ -38,11 +38,11 @@ The [`point`](../api/diagram/straightSegment#point-PointModel) property of strai
### Straight segment editing
-* End point of each straight segment is represented by a thumb that enables to edit the segment.
-* Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
-* Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
+End point of each straight segment is represented by a thumb that enables to edit the segment.
+Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
+Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). You can also add/remove segments by using the [`editSegment`](../api/diagram/#editsegment) method of diagram.
-Refer the sample below
+The following example shows how to add segments at runtime for the straight connector.
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/ej2-javascript/diagram/js/connectors.md b/ej2-javascript/diagram/js/connectors.md
index ad2febcc0..9afbcfa3a 100644
--- a/ej2-javascript/diagram/js/connectors.md
+++ b/ej2-javascript/diagram/js/connectors.md
@@ -15,7 +15,7 @@ Connectors are objects used to create link between two points, nodes or ports to
## Create connector
-Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](../api/diagram/connector), refer to [`Connector Properties`](../api/diagram/connector).
+Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](../api/diagram/connector), refer to [`Connector Properties`](../api/diagram/connector). The [`id`](../api/diagram/connectorModel/#id) property of a connector is used to define its unique identifier and can later be used to find the connector at runtime for customization.
``` javascript
var connector = { id: "connector1",
@@ -25,6 +25,8 @@ var connector = { id: "connector1",
}
```
+N> Note: There should not be any white-spaces in the ID string while setting the ID.
+
## Add connectors through connectors collection
The [`sourcePoint`](../api/diagram/connector#sourcepoint-PointModel) and [`targetPoint`](../api/diagram/connector#targetpoint-PointModel) properties of connector allow you to define the end points of a connector.
@@ -147,6 +149,23 @@ The following code example illustrates how to clone a connector
{% previewsample "page.domainurl/code-snippet/diagram/connectors-clone" %}
+## Get Connector defaults
+
+Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties.
+
+The following code example explains how to customize the connector using [`getConnectorDefaults`](..api/diagram/#getconnectordefaults).
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/connectors-getConDef/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-getConDef/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-getConDef" %}
+
## Connections
### Connection with nodes
diff --git a/ej2-javascript/diagram/js/customization.md b/ej2-javascript/diagram/js/customization.md
index bd6572a0d..3411e9c06 100644
--- a/ej2-javascript/diagram/js/customization.md
+++ b/ej2-javascript/diagram/js/customization.md
@@ -242,6 +242,8 @@ The following code illustrates how to change the `pivot` value.
## Get connected connector from node
+The getEdges method
+
Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can fetch these connectors by using the [`getObject`](../api/diagram#getObject) method in the diagram.
```javascript
diff --git a/ej2-javascript/diagram/js/data-binding.md b/ej2-javascript/diagram/js/data-binding.md
index 9b2f0ce90..2a75bcbf6 100644
--- a/ej2-javascript/diagram/js/data-binding.md
+++ b/ej2-javascript/diagram/js/data-binding.md
@@ -11,19 +11,21 @@ domainurl: ##DomainURL##
# Data binding in ##Platform_Name## Diagram control
-* Diagram can be populated with the `nodes` and `connectors` based on the information provided from an external data source.
+Its essential for binding external data to the diagram, enabling dynamic creation of nodes and connectors based on the provided data. Here's a detailed explanation of the key properties and their usage:
-* Diagram exposes its specific data-related properties allowing you to specify the data source fields from where the node information has to be retrieved from.
+## DataSource settings
-* The [`dataManager`](../api/diagram/dataSourceModel/#datamanager-datamanager) property is used to define the data source either as a collection of objects or as an instance of `DataManager` that needs to be populated in the diagram.
+The [`dataSourceSettings`](../api/diagram/dataSourceModel/) property of diagram configures the external data source that binds to the diagram, making it possible to populate the diagram with nodes and connectors dynamically.
-* The [`ID`](../api/diagram/dataSourceModel/#id-string) property is used to define the unique field of each JSON data.
+* [`Data Manager`](../api/diagram/dataSourceModel/#datamanager) - Defines the data source as a collection of objects or an instance of DataManager to populate the diagram.
-* The [`parentId`](../api/diagram/dataSourceModel/#parentid-string) property is used to defines the parent field which builds the relationship between ID and parent field.
+* [`ID`](../api/diagram/dataSourceModel/#id) - The unique identifier for each data in the data source.
-* The [`root`](../api/diagram/dataSourceModel/#root-string) property is used to define the root node for the diagram populated from the data source.
+* [`parentId`](../api/diagram/dataSourceModel/#parentid) - Establishes the hierarchical relationship between nodes by linking each node to its parent node. This property is vital for creating tree structures within the diagram.
-* To explore those properties, see [`DataSourceSettings`](../api/diagram/dataSourceModel/).
+* [`root`](../api/diagram/dataSourceModel/#root) - Specifies the root node of the diagram when data is loaded. This root node serves as the starting point for the diagram's structure.
+
+* The [`doBinding`](../api/diagram/dataSourceModel/#dobinding) function is used to customize a node based on the data source. It is triggered during the initialization of each node, allowing you to apply specific configurations or data-driven customizations to the node.
* Diagram supports two types of data binding. They are:
@@ -32,9 +34,9 @@ domainurl: ##DomainURL##
## Local data
-Diagram can be populated based on the user defined JSON data (Local Data) by mapping the relevant data source fields.
+Diagram can be populated based on user-defined JSON data (Local Data) by mapping the relevant data source fields.
-To map the user defined JSON data with diagram, configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel/). The following code example illustrates how to bind local data with the diagram.
+To map user-defined JSON data to the diagram, configure the fields in [`dataSourceSettings`](../api/diagram/dataSourceModel/). The following code example illustrates how to bind local data with the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -47,15 +49,17 @@ To map the user defined JSON data with diagram, configure the fields of [`dataSo
{% previewsample "page.domainurl/code-snippet/diagram/dataBinding-cs1" %}
+N> To convert the data source into nodes and connectors, `DataBinding` should be injected into the diagram.
+
## Remote data
-You can bind the diagram with remote data by using [`dataManager`].
+You can bind the diagram with remote data by using [`dataManager`](../api/diagram/dataSourceModel/#datamanager).
-It uses two different classes: `DataManager` for processing and `Query` for serving data. `DataManager` communicates with data source and `Query` generates data queries that are read by the [`dataManager`](../api/diagram/dataSourceModel/).
+[`DataManager`](https://ej2.syncfusion.com/documentation/data) can be bound to remote data source by assigning service end point URL to the `url` property. With the provided url, the DataManager handles all communication with the data server with help of queries.
-To learn more about data manager, refer to [`Data Manager`](../api/diagram/dataSourceModel/).
+When querying data, the **DataManager** will convert the query object(Query) into server request after calling [`executeQuery`](../api/data/dataManager/#executequery) and waits for the server response(`JSON` format).
-To bind remote data to the diagram,configure the fields of [`dataSourceSettings`](../api/diagram/dataSourceModel/). The following code illustrates how to bind remote data to the diagram.
+ The following code illustrates how to bind remote data to the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/ej2-javascript/diagram/js/export.md b/ej2-javascript/diagram/js/export.md
index 6a7197457..c6021f37d 100644
--- a/ej2-javascript/diagram/js/export.md
+++ b/ej2-javascript/diagram/js/export.md
@@ -11,16 +11,18 @@ domainurl: ##DomainURL##
# Export in ##Platform_Name## Diagram control
-Diagram provides support to export its content as image/svg files. The client-side method [`exportDiagram`](../api/diagram#exportDiagram) helps to export the diagram. The following code illustrates how to export the diagram as image.
+Diagram provides support to export its content as image/svg files. The [`exportDiagram`](../api/diagram#exportDiagram) method of diagram helps to export the diagram. The following code illustrates how to export the diagram as image.
-N> To use Print and Export, you need to inject `PrintAndExport` in the diagram.
+N> To Export diagram, you need to inject `PrintAndExport` in the diagram.
-```javascript
-var diagram = new ej.diagrams.Diagram({
+```JavaScript
+
+var diagram = new ej.diargams.Diagram({
width: 1500, height: 1500
-},'#element');
+});
+diagram.appendTo('#element');
var options = {};
options.mode = 'Download';
diagram.exportDiagram(options);
@@ -28,170 +30,170 @@ diagram.exportDiagram(options);
## Exporting options
-Diagram provides support to export the desired region of the diagram to desired formats.
+The diagram provides support to export the desired region of the diagram to various formats. The following table shows the list of [`exportOptions`](../api/diagram/iExportOptions/) in diagram.
+
+| Name | Type | Description|
+|-------- | -------- | -------- |
+| bounds | object | Sets the bounds that has to be exported |
+| region | enum | Sets the region of the diagram to be exported. |
+| fileName | string | Sets the file name of the exported image. |
+| format | string | Sets the export image format. |
+| mode | string | Sets the Mode for the file to be downloaded. |
+| margin | object | Sets the margin of the page to be exported. |
+| stretch| enum | Sets the aspect ratio of the exported image.|
+| multiplePage | boolean | exports the diagram into multiple pages. |
+| pageWidth | number | Sets the page width of the diagram while exporting the diagram into multiple pages. |
+| pageHeight| number | Sets the page height of the diagram while exporting the diagram into multiple pages.|
+| pageOrientation | enum | Sets the orientation of the page. |
-## File Name
+### File Name
[`FileName`](../api/diagram/iExportOptions#fileName-string) is the name of the file to be downloaded. By default, the file name is set to **Diagram**.
-## Format
+### Format
-[`Format`](../api/diagram/iExportOptions#format-fileformat) is to specify the type/format of the exported file. By default, the diagram is exported as .jpg format. You can export diagram to the following formats:
+[`Format`](../api/diagram/iExportOptions#format-fileformat) specifies the type/format of the exported file. By default, the diagram is exported in .jpg format. You can export the diagram to the following formats:
* JPG
* PNG
* BMP
* SVG
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.format = 'SVG';
-diagram.exportDiagram(options);
-```
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-1" %}
-## Margin
-[`Margin`](../api/diagram/iExportOptions#margin-marginmodel) specifies the amount of space that has to be left around the diagram.
+### Margin
-
+The [`margin`](../api/diagram/iExportOptions#margin-marginmodel) specifies the amount of space that has to be left around the diagram while exporting.
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-diagram.exportDiagram(options);
-```
+The following code example demonstrates how to set margin for the exported image.
-## Mode
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-2" %}
-[`Mode`](../api/diagram/iExportOptions#mode-exportmodes) specifies whether the diagram will be exported as files or get base64 data(ImageURL/SVG). The export options are as follows:
+### Mode
-* Download: Exports and downloads the diagram as image/SVG.
-* Data: return a base64 string.
+The [`mode`](../api/diagram/iExportOptions#mode-exportmodes) option specifies whether to export the diagram as an image or to return the base64 data of the diagram. The available export modes are:
-The following code example illustrates how to export the diagram as raw data.
+* Download: Exports and downloads the diagram as an image or SVG file.
+* Data: Returns a base64 string representation of the diagram.
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Data';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-var base64data = diagram.exportDiagram(options);
-```
+The following code example demonstrates how to export the diagram as raw data.
-## Region
+
-You can export any particular [`region`](../api/diagram/iExportOptions#region-diagramregions) of the diagram and it is categorized into three types as follows.
+```JavaScript
-* PageSettings
-* Content
-* CustomBounds
+var diagram = new ej.diargams.Diagram({
+ width: 1500, height: 1500
+});
+diagram.appendTo('#element');
+ var options = {};
+ options.mode = 'Data';
+ options.format = 'JPG';
+ var base64data = diagram.exportDiagram(options);
+```
-## PageSettings
+### Region
-Diagram is exported based on the given PageSettings width and height. The Properties available in page settings are as follows.
-* width
-* height
-* margin
-* orientation
-* boundaryConstraints
-* background
-* multiplePage
-* showPageBreaks
-* fitOptions
+Exporting particular region of diagram is possible by using the [`region`](../api/diagram/iExportOptions/#region) property of the [`exportOptions`](../api/diagram/iExportOptions/). The available export regions are listed in the table below.
-### boundaryConstraints
+| Region | Description |
+|-------- | -------- |
+| PageSettings | The region to be exported will be based on the given page settings |
+| Content | Only the content of the diagram control will be exported |
+| CustomBounds | The region to be exported will be explicitly defined |
-Defines the editable region of the diagram.
-* Infinity - Allow the interactions to take place at infinite height and width.
-* Diagram - Allow the interactions to take place around the diagram’s height and width.
-* Page - Allow the interactions to take place around the page’s height and width.
+The following example shows how to export diagram with different regions.
-### multiplePage
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-3" %}
-While setting multiple pages as false, the diagram is exported as a single image and while setting multiple pages as true, the diagram is exported as a separate image based on width and height.
+N> The [`bounds`](../api/diagram/iExportOptions/#bounds) property of [`exportOptions`](../api/diagram/iExportOptions/) should be defined to export the diagram with CustomBounds region.
-The following code example illustrates how to export the region occupied by the diagram elements.
+### MultiplePage
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-options.region = 'PageSettings';
-diagram.exportDiagram(options);
-```
+When the [`multiplePage`](../api/diagram/iExportOptions/#multiplepage) option is set to false, the diagram is exported as a single image. When it set to true, the diagram is exported as multiple images based on its width and height.
-## Content
+The following code example demonstrates how to export the diagram as multiple images.
-The diagram content alone will be exported as an image.
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-4" %}
-The following code example illustrates how to export the region occupied by the diagram elements.
+### Export image
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-options.region = 'Content';
-diagram.exportDiagram(options);
-```
+You can pass the base64 data of an image to the [`exportImage`](../api/diagram/#exportimage) method to export it directly. The following example shows how to export base64 data using the `exportImage` method.
-## Custom bounds
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-5" %}
-Diagram provides support to export any specific region of the diagram by using [`bounds`](../api/diagram/iExportOptions#bounds-rect).
+### Get diagram content
-The following code example illustrates how to export the region occupied by the diagram elements.
+To get the html diagram content, the [`getDiagramContent`](../api/diagram/#getdiagramcontent) method is used. the following example shows how to get the diagram content at runtime.
-```ts
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/export-cs-6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-6" %}
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'region';
-options.format = 'SVG';
-options.region = 'CustomBounds';
-options.bounds.x = 10;
-options.bounds.y = 10;
-options.bounds.height = 100;
-options.bounds.width = 100;
-diagram.exportDiagram(options);
-```
-
-## Export diagram with stretch option
+### Export diagram with stretch option
Diagram provides support to export the diagram as image for [`stretch`](../api/diagram/iExportOptions#stretch-stretch) option. The exported images will be clearer but larger in file size.
The following code example illustrates how to export the region occupied by the diagram elements.
-```javascript
-var diagram = new ej.diagrams.Diagram({
+```JavaScript
+var diagram = new ej.diargams.Diagram({
width: 1500, height: 1500
-},'#element');
+});
+diagram.appendTo('#element');
var options = {};
options.mode = 'Download';
options.margin = { left: 10, right: 10, top: 10, bottom: 10};
@@ -202,37 +204,6 @@ options.stretch = 'Stretch';
diagram.exportDiagram(options);
```
-## Print
-
-The client-side method [`print`](../api/diagram#print) helps to print the diagram as image.
-
-| Name | Type | Description|
-|-------- | -------- | -------- |
-| region | enum | Sets the region of the diagram to be printed. |
-| bounds | object | Prints any custom region of diagram. |
-| stretch| enum | Resizes the diagram content to fill its allocated space and printed.|
-| multiplePage | boolean | Prints the diagram into multiple pages. |
-| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. |
-| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.|
-| pageOrientation | enum | Sets the orientation of the page. |
-
-The following code example illustrates how to export the region occupied by the diagram elements.
-
-```ts
-
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
- options.mode = 'Download';
- options.region = 'PageSettings';
- options.multiplePage = true;
- options.pageHeight = 300;
- options.pageWidth = 300;
- diagram.print(options);
-```
-
## Limitations
-We have a limitation in exporting the image with HTML and Native node. So, Syncfusion Essential PDF library is used, which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine. You can refer to the following KB link for more details.
-[`https://www.syncfusion.com/kb/13298/how-to-print-or-export-the-html-and-native-node-into-image-format`]
\ No newline at end of file
+Currently, exporting diagram into image format with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential PDF library. This library incorporates the Syncfusion Essential HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/14031/how-to-export-html-node-using-blink-rendering-in-javascript-diagram) kb for more information.
diff --git a/ej2-javascript/diagram/js/es5-getting-started.md b/ej2-javascript/diagram/js/getting-started.md
similarity index 100%
rename from ej2-javascript/diagram/js/es5-getting-started.md
rename to ej2-javascript/diagram/js/getting-started.md
diff --git a/ej2-javascript/diagram/js/interaction.md b/ej2-javascript/diagram/js/interaction.md
index 6b96eaf05..098be0181 100644
--- a/ej2-javascript/diagram/js/interaction.md
+++ b/ej2-javascript/diagram/js/interaction.md
@@ -11,67 +11,152 @@ domainurl: ##DomainURL##
# Interaction in ##Platform_Name## Diagram control
-## Selection
+## Selector
-Selector provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time.
+The selector visually represents selected elements, acting as a container to modify their size, position, and rotation angle interactively or programmatically. It supports selecting both single and multiple elements simultaneously.
-## Single selection
+## Selection
An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
-* While selecting the diagram elements, the following events can be used to do your customization.
-* When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram#selectionChange--emittypeiselectionchangeeventargs) event gets triggered.
+When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram/iSelectionChangeEventArgs/) event and [`click`](../api/diagram/iclickeventargs/) gets triggered.
+These events enable you to customize the selected elements as needed.
-## Selecting a group
+### Selecting a group
When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent group to its children.
-## Multiple selection
+### Multiple selection
Multiple elements can be selected with the following ways:
-* Ctrl+Click
+#### Ctrl+Click
+
+During a single click, any existing item in the selection list will be cleared, leaving only the most recently clicked item in the selection list. To avoid clearing the previously selected items, hold down the Ctrl key while clicking.
+
+#### Rubber band selection
+
+Clicking and dragging in the diagram area allows you to create a rectangular region. The elements covered within this rectangular region will be selected when you release the mouse button.
-During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.
+In rubber band selection, you can set the selection of items by region using the following modes:
-* Selection rectangle/rubber band selection
+- CompleteIntersect: Selects items that are fully covered within the rectangular selection region.
+- PartialIntersect: Selects items that are partially covered within the rectangular selection region.
-Clicking and dragging the diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end.
+This can be configured with the [`rubberBandSelectionMode`](../api/diagram/rubberBandSelectionMode/).
-## Select/Unselect elements using program
+### Select/Unselect elements using API
+
+
+The [`select`](../api/diagram#select) and [`clearSelection`](../api/diagram#clearselection) methods are used to dynamically select or clear the selection of elements at runtime. The following code example demonstrates how these methods can be utilized to select or clear the selection of elements.
+
+```javascript
+var diagram = ej.diagrams.Diagram({
+ width: '100%', height: 900,
+ nodes:[{
+ id: 'node1',
+ width: 90,
+ height: 60,
+ offsetX: 100,
+ offsetY: 100,
+ style: {
+ fill: '#6BA5D7',
+ strokeColor: 'white',
+ strokeWidth: 1
+ },
+ }]
+});
+diagram.appendTo('#diagram');
+//Select a specified collection of nodes and connectors in the diagram
+diagram.select([diagram.nodes[0]]);
+//Removes all elements from the selection list, clearing the current selection.
+diargam.clearSelection();
+```
+### Get selected items
+
+You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diargam.
+
+```javascript
+
+var selectedNodes = diagram.selectedItems.nodes;
+var selectedConnectors = diagram.selectedItems.connectors;
+
+```
+
+You can also get the currently selected objects, both nodes and connectors, in a single array called [`selectedObjects`](../api/diagram/selectorModel/#selectedobjects) within the [`selectedItems`](../api/diagram/selectorModel/) property of the diagram.
+
+```javascript
+
+var selectedObjects = diagram.selectedItems.selectedObjects;
+
+```
+
+### Toggle selection
+
+The [`canToggleSelection`](../api/diagram/selectorModel#canToggleSelection) property determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. In the following example, the node can be selected with the first click and unselected with the second click.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/interaction-toggle/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-toggle/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-toggle" %}
+
+### Select entire elements in diagram programmatically
-The client-side methods [`select`](../api/diagram#select) and [`clearSelection`](../api/diagram#clearselection) help to select or clear the selection of the elements at runtime. The following code example illustrates how to select or clear the selection of an item using program.
+The [`selectAll`](../api/diagram#selectAll) method of diagram is used to select all the elements such as nodes/connectors in the diagram. Refer to the following code snippet.
-Get the current selected items from the [`nodes`](../api/diagram/selectorModel#nodes-nodemodel[]) and [`connectors`](../api/diagram/selectorModel#connectors-connectormodel[]) collection of the [`selectedItems`](../api/diagram#selectAll#selecteditems-selectormodel) property of the diagram model.
+```javascript
+//Selects all the nodes and connectors in diagram
+diagram.selectAll();
-## Select entire elements in diagram programmatically
+```
-The client-side method [`selectAll`](../api/diagram#selectAll) used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use [`selectAll`](../api/diagram#selectAll) method on the diagram.
+You can also use the CTRL+A keys to select all nodes and connectors in the diagram.
## Drag
-* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element.
-* When you drag the elements in the diagram, the [`positionChange`](../api/diagram#positionChange--emittypeidraggingeventargs) event gets triggered and to do customization in this event.
+You can drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of them moves all selected elements together.
+As you drag elements within the diagram, the [`positionChange`](../api/diagram/idraggingeventargs/) event is triggered, providing opportunities to customize the dragged elements.
## Resize
-* Selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized.
-* When one corner of the selector is dragged, opposite corner is in a static position.
-* When a node is resized, the [`sizeChange`](../api/diagram#sizeChange--emittypeisizechangeeventargs) event gets triggered.
+The selector in the diagram is designed with eight resizing handles, commonly referred to as thumbs. These handles allow users to adjust the size of selected items by clicking and dragging them. When resizing, dragging any handle modifies the dimensions of the selected elements accordingly. Notably, when dragging one corner handle, the opposite corner remains fixed to specific alignment of the selected item.
+
+During the resizing process, the diagram triggers the [`sizeChange`](../api/diagram/isizechangeeventargs/) event, allowing customization based on the size of the element.
-N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`.
+N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments.
+
+### Aspect ratio
+
+Maintaining aspect ratio in diagram means that when you resize a node, by dragging its corner, both its width and height adjust proportionally. This ensures that the node retains its original shape and proportions. Aspect ratio constraints can be applied by configuring the [`NodeConstraints`](../api/diagram/nodeconstraints/) property.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/interaction-aspect/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-aspect/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-aspect" %}
-## Customize the resize-thumb
+### Customing resize-thumb size
-You can change the size of the node resize thumb and the connector end point handle by using the `handleSize` property. The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively.
+You can change the size of the node resize thumb and the connector end point handle by using the [`handleSize`](../api/diagram/selectorModel/#handlesize) property. The following example shows the resize handle size customization.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -86,87 +171,111 @@ You can change the size of the node resize thumb and the connector end point han
+The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively.
+
## Rotate
-* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node.
-* The node is rotated with reference to the static pivot point.
-* Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point.
+A rotation handler is positioned above the selector. Clicking and dragging this handler in a circular motion rotates the node. The node rotates around a fixed pivot point. A pivot thumb, located at the center of the node, appears during rotation to indicate the fixed point.
+Rotating a node triggers the [`rotateChange`](../api/diagram/iRotationEventArgs/) event.
-## Connection editing
+### Customize rotate handle position
+
+The position of the rotate handle can be adjusted by modifying the pivot point of the node using the [`pivot`](../api/diagram/nodeModel/#pivot) property. By default, the pivot point is set to (0.5, 0.5). The following example shows how to render the rotate handle at the left top corner of the node.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/interaction-pivot/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-pivot/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-pivot" %}
+
+## Connector editing
-* Each segment of a selected connector is editable with some specific handles/thumbs.
+Each segment of a selected connector is editable with some specific handles/thumbs.
N> For connector editing, you have to inject the [`ConnectorEditing`](../api/diagram/connectorEditing) module.
-## End point handles
+### Drag connector end points
-Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points.
+Source and target points of selected connectors are represented by two handles. Clicking and dragging these handles allows you to adjust the source and target points.
-* If you drag the connector end points, then the following events can be used to do your customization.
-* When the connector source point is changed, the [`sourcePointChange`](../api/diagram#sourcePointChange--emittypeiendchangeeventargs) event gets triggered.
-* When the connector target point is changed, the [`targetPointChange`](../api/diagram#targetPointChange--emittypeiendchangeeventargs) event gets triggered.
-* When you connect connector with ports/node or disconnect from it, the [`connectionChange`](../api/diagram#connectionChange--emittypeiconnectionchangeeventargs) event gets triggered.
+Dragging the connector end points triggers the following events for customization:
-## Straight segment editing
+When the connector's source point is changed, the [`sourcePointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered.
+When the connector's target point is changed, the [`targetPointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered.
+Connecting a connector to port/node or disconnecting from them triggers the [`connectionChange`](../api/diagram/iConnectionChangeEventArgs/) event.
-* End point of each straight segment is represented by a thumb that enables to edit the segment.
-* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
+### Straight segment editing
+
+The end point of each straight segment is represented by a thumb that allows you to edit the segment. You can insert any number of new segments into a straight line by clicking while holding the Shift and Ctrl keys (Ctrl+Shift+Click).
-* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
+Straight segments can be removed by clicking the segment end point while holding the Ctrl and Shift keys (Ctrl+Shift+Click).
-## Orthogonal thumbs
+### Orthogonal segment editing
+
+Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. When necessary, segments are automatically added or removed during dragging to maintain proper orthogonal routing.
-* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it.
-* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments.
+When editing a segment, the [`segmentChange`](../api/diagram/iSegmentChangeEventArgs/) event is triggered. When new segments are added to the collection of connector segments, the [`segmentCollectionChange`](../api/diagram/iSegmentCollectionChangeEventArgs/) event is triggered.
-## Bezier thumbs
-* Bezier segments are annotated with two thumbs to represent the control points. Control points of the curve can be configured by clicking and dragging the control thumbs.
+### Bezier segment editing
-
+Bezier segment thumbs allow you to adjust the segments by clicking and dragging them.
-## Drag and drop nodes over other elements
+
-Diagram provides support to drop a node/connector over another node/connector. The [`drop`](../api/diagram#drop--emittypeidropeventargs) event is raised to notify that an element is dropped over another one and it is disabled, by default. It can enabled with the constraints property.
+#### Bezier Control Points
-## User handles
+Bezier segments are annotated with two thumbs representing the control points. These control points can be adjusted by clicking and dragging the control thumbs. Dragging the control point changes the angle and distance of the points from the segment point, modifying the curve.
-* User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) collection of the [`selectedItems`](../api/diagram#selectAll#selecteditems-selectormodel) property.
-* The name property of user handle is used to define the name of the user handle and its further used to find the user handle at runtime and do any customization.
+
-## Alignment
+## User handles
-User handles can be aligned relative to the node boundaries. It has [`margin`](../api/diagram/userHandle#margin-marginmodel), [`offset`](../api/diagram/userHandle#offset-number), [`side`](../api/diagram/userHandle#side-side), [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment), and [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) settings. It is quite tricky when all four alignments are used together but gives more control over alignment.
+User handles are used to add frequently used commands around the selector. To create user handles, define and add them to the [`userHandles`](../api/diagram/userHandleModel/) collection of the [`selectedItems`](../api/diagram/selectorModel/) property. The [`name`](../api/diagram/userHandleModel/#name) property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization.
-## Offset
+The following events are triggered when interacting with a user handle:
-The [`offset`](../api/diagram/userHandle#offset-number) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the user handle is clicked.
+* [`onUserHandleMouseEnter`](../api/diagram/#onuserhandlemouseenter) - Triggered when the mouse enters the user handle region.
+* [`onUserHandleMouseDown`](../api/diagram/#onuserhandlemousedown) - Triggered when the mouse is pressed down on the user handle.
+* [`onUserHandleMouseUp`](../api/diagram/#onuserhandlemouseup) - Triggered when the mouse is released on the user handle.
+* [`onUserHandleMouseLeave`](../api/diagram/#onuserhandlemouseleave) - Triggered when the mouse leaves the user handle region.
-## Side
+For more information, refer to the [`user handle events`](./user-handle.md/#user-handle-events).
-The [`side`](../api/diagram/userHandle#side-side) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle by using the [`Top`](../api/diagram/side#top), [`Bottom`](../api/diagram/side#bottom), [`Left`](../api/diagram/side#left), and [`Right`](../api/diagram/side#right) options.
+## Fixed user handle
-## Horizontal and vertical alignments
+Fixed user handles are used to perform specific actions when interacted with. Unlike regular user handles, [`fixedUserHandles`](../api/diagram/nodeFixedUserHandleModel/) are defined within the node/connector object, allowing different fixed user handles to be added to different nodes.
-The [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to set how the user handle is horizontally aligned at the position based on the [`offset`](../api/diagram/userHandle#offset-number). The [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) property is used to set how user handle is vertically aligned at the position.
+The following events are triggered when interacting with a fixed user handle:
-## Margin
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the fixed user handle is clicked.
+* [`onFixedUserHandleMouseEnter`](../api/diagram/#onfixeduserhandlemouseenter) - Triggered when the mouse enters the fixed user handle region.
+* [`onFixedUserHandleMouseDown`](../api/diagram/#onfixeduserhandlemousedown) - Triggered when the mouse is pressed down on the fixed user handle.
+* [`onFixedUserHandleMouseUp`](../api/diagram/#onfixeduserhandlemouseup) - Triggered when the mouse is released on the fixed user handle.
+* [`onFixedUserHandleMouseLeave`](../api/diagram/#onfixeduserhandlemouseleave) - Triggered when the mouse leaves the fixed user handle region.
+* [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) - Triggered when the fixed user handle is clicked.
-Margin is an absolute value used to add some blank space in any one of its four sides. The [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) can be displaced with the [`margin`](../api/diagram/userHandle#margin-marginmodel) property.
+For more information, refer to the [`fixed user handle events`](./user-handle.md/#fixed-user-handle-events).
-## Notification for the mouse button clicked
+## Determining Mouse Button Clicks
-The diagram component notifies the mouse button clicked. For example, when the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with,
+The diagram component can determine which mouse button was clicked. For example, when the right mouse button is clicked, the click event will specify that the right button was clicked. This is handled through the mouse [`click`](../api/diagram/iclickeventargs/) event, which provides details about whether the left or right button was clicked.
| Notification | Description |
|----------------|--------------|
@@ -178,38 +287,20 @@ The diagram component notifies the mouse button clicked. For example, when the r
var diagram = new ej.diagrams.Diagram({
width: '100%', height: 900
},'#diagram');
-diagram.click = function (args: IClickEventArgs) {
+diagram.click = function (args) {
// Obtains the mouse button clicked
let clickedButtons = args.button
};
```
-## Appearance
+## Allow drop
-The appearance of the user handle can be customized by using the [`size`](../api/diagram/userHandle#size-number), [`borderColor`](../api/diagram/userHandle#bordercolor-string), [`backgroundColor`](../api/diagram/userHandle#backgroundcolor-string), [`visible`](../api/diagram/userHandle#visible-boolean), [`pathData`](../api/diagram/userHandle#pathdata-string), and [`pathColor`](../api/diagram/userHandle#pathcolor-string) properties of the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]).
+The diagram supports dropping a node or connector onto another node or connector. To determine the target where the node or connector is dropped, you need to enable the [`allowDrop`](../api/diagram/nodeConstraints/) constraint in the node's or connector's constraints property. This setting enables a highlighter to indicate potential drop targets when dragging any node or connector over another one. Upon dropping the node or connector, the [`drop`](../api/diagram/iDropEventArgs/) event is triggered to indicate which element was dropped over which other element.
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs2" %}
## Zoom pan
-* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram.
-* Diagram can be zoomed in or out by using Ctrl + mouse wheel.
-* When the diagram is zoomed or panned, the [`scrollChange`](../api/diagram#scrollChange--emittypeiscrollchangeeventargs) event gets triggered.
-
-
-
-## Zoom pan status
-
-Diagram provides the support to notify the pan status of the zoom pan tool. Whenever the diagram is panning [`scrollChange`](../api/diagram#scrollChange--emittypeiscrollchangeeventargs) event is triggered and hence the pan status can be obtained. The pan status is notified with Start, Progress, and Completed.
+When loading a large diagram, only a certain portion of the diagram is initially visible, the remaining parts are clipped. You can explore these clipped portions by scrolling the scrollbars or panning the diagram. You can zoom in or out on the diagram by using Ctrl + mouse wheel. When the diagram is zoomed or panned, the [`scrollChange`](../api/diagram/iScrollChangeEventArgs/) event is triggered.
| Pan Status | Description|
|--------------|---------|
@@ -217,18 +308,7 @@ Diagram provides the support to notify the pan status of the zoom pan tool. When
| Progress | When the mouse is in motion the status is notified as progress.|
| Completed | When panning is stopped the status is notified with completed.|
-```ts
-
-let diagram: Diagram = new Diagram({
- width: '100%', height: 900
- tool: DiagramTools.ZoomPan, scrollChange:function (args:IScrollChangeEventArgs | IBlazorScrollChangeEventArgs) {
- // Obtains the zoom pan status
- let mouseButton = args.panState
- }
-});
-diagram.appendTo('#element');
-
-```
+
## Keyboard
@@ -245,7 +325,7 @@ The following table illustrates those commands with the associated key values.
| Ctrl + Z | undo | Reverses the last editing action performed on the diagram.|
| Ctrl + Y | redo | Restores the last editing action when no other actions have occurred since the last undo on the diagram.|
| Delete | delete | Deletes the selected elements.|
-| Ctrl/Shift + Click on object | | Multiple selection (Selector binds all selected nodes/connectors).|
+| Ctrl/Shift + Click on object | Multiple selection | Selector binds all selected nodes/connectors.|
| Up Arrow | nudge(“up”) | `nudgeUp`: Moves the selected elements towards up by one pixel.|
| Down Arrow | nudge(“down”) | `nudgeDown`: Moves the selected elements towards down by one pixel.|
| Left Arrow | nudge(“left”) | `nudgeLeft`: Moves the selected elements towards left by one pixel.|
@@ -288,6 +368,8 @@ The following table illustrates those commands with the associated key values.
| Control + [ | Send Backward | Move the selected shape one step backward in the layer order. |
| Control + ] | Bring Forward | Move the selected shape one step forward in the layer order.|
+N> Please note that the positionChange event is triggered for dragging nodes/connectors using mouse interactions only and not supported for Keyboard interactions
+
## See Also
* [How to create diagram nodes using drawing tools](./tools#Shapes)
diff --git a/ej2-javascript/diagram/js/label-appearance.md b/ej2-javascript/diagram/js/label-appearance.md
index 9b5875651..0325e36ba 100644
--- a/ej2-javascript/diagram/js/label-appearance.md
+++ b/ej2-javascript/diagram/js/label-appearance.md
@@ -133,7 +133,7 @@ The following code illustrates how to define a template in annotation.
{% previewsample "page.domainurl/code-snippet/diagram/annotations-cs11" %}
-N> We need to mention width and height for the annotation while using template
+N> For the proper alignment of template, we need to mention width and height for the annotation while using template.
### Annotation template
diff --git a/ej2-javascript/diagram/js/label-events.md b/ej2-javascript/diagram/js/label-events.md
index c46656835..ad934d20c 100644
--- a/ej2-javascript/diagram/js/label-events.md
+++ b/ej2-javascript/diagram/js/label-events.md
@@ -19,7 +19,8 @@ There are some events which will trigger while interacting with annotation.
## KeyDown event
-Triggers when we press any key while editing the annotation text. The following example shows how to get [`keyDown`](../api/diagram/iKeyEventArgs/) event.
+
+The [`keyDown`](../api/diagram/iKeyEventArgs/) event is triggered whenever any key is pressed. The following example shows how to capture the keyDown event and modify the fill color of a node on each key press:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -34,7 +35,7 @@ Triggers when we press any key while editing the annotation text. The following
## KeyUp event
-Triggers when we press and release any key while editing the annotation text. The following example shows how to get [`keyUp`](../api/diagram/iKeyEventArgs/)event
+The [`keyUp`](../api/diagram/iKeyEventArgs/) event is triggered whenever we press and release any key. The following example shows how to capture the keyUp event and modify the fill color of a node on each key press:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -49,7 +50,7 @@ Triggers when we press and release any key while editing the annotation text. Th
## Double click event
-Triggers when we double click on the node or connector. while double click on diagram element, the annotation editing mode will be activated. The following code example shows how to get [`doubleClick`](../api/diagram/idoubleclickeventargs/) event
+The [`doubleClick`](../api/diagram/idoubleclickeventargs/) event is triggered when you double-click on a node, connector, or the diagram surface. Double-clicking on a diagram element activates the annotation editing mode. The following code example shows how to capture the [`doubleClick`](../api/diagram/idoubleclickeventargs/) event:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -64,7 +65,7 @@ Triggers when we double click on the node or connector. while double click on di
## TextEdit event
-Triggers when you finish editing the annotation text and the focus is removed from the annotation text.
+The [`textEdit`](../api/diagram/iTextEditEventArgs/) event triggers when you finish editing the annotation text and the focus is removed from the annotation text.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -77,5 +78,12 @@ Triggers when you finish editing the annotation text and the focus is removed fr
{% previewsample "page.domainurl/code-snippet/diagram/annotations-textEdit" %}
+You can prevent adding new text to the annotation by setting the `cancel` property of [`textEdit`](../api/diagram/iTextEditEventArgs/) to true.
+``` javascript
+textEdit: function (args) {
+ // Prevents any new content from being added to the annotation
+ args.cancel = true;
+ },
+```
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/layers.md b/ej2-javascript/diagram/js/layers.md
index 4b4ff15d9..f05493398 100644
--- a/ej2-javascript/diagram/js/layers.md
+++ b/ej2-javascript/diagram/js/layers.md
@@ -11,237 +11,79 @@ domainurl: ##DomainURL##
# Layers in ##Platform_Name## Diagram control
-**Layer** is used to organize related shapes on a diagram control. A layer is a named category of shapes. By assigning shapes to different layers, you can selectively view, remove, and lock different categories of shapes.
+**Layer** organizes related shapes within a diagram control as named categories. Assigning shapes to different layers enables selective viewing, removal, and locking of distinct shape categories.
-In diagram, [Layers](../api/diagram) provide a way to change the properties of all shapes that have been assigned to that layer. The following properties can be set.
+In a diagram, [Layers](../api/diagram/layermodel/) facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include:
+* Objects
* Visible
* Lock
-* Objects
* AddInfo
-## Visible
-
-The layer's [visible](../api/diagram/layer#visible-boolean) property is used to control the visibility of the elements assigned to the layer.
+## Objects
-```javascript
+The layer's [objects](../api/diagram/layer/#objects) property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses.
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram, ej.diagrams.ConnectorModel,ej.diagrams.NodeModel,ej.diagrams.LayerModel);
+In the following example, the basic shapes are categorized in layer 1, and the flow shapes are categorized in layer 2.
-// A node is created and stored in nodes array.
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs3" %}
-var nodes = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-var connectors = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-// initialize diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [{
- id: 'layer1',
- visible: true,
- objects: ['node1']
- }
- ]
-},'#element');
-
-```
+## Visible
-## Lock
+The layer's [visible](../api/diagram/layer/#visible) property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer.
-The layer's [lock](../api/diagram/layer#lock-boolean) property is used to prevent or allow changes to the elements dimension and position.
+In the following example, the visibility of layer one is set to false. By default, the `visible` property of a layer is set to **true**.
-```javascript
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram, ej.diagrams.ConnectorModel,ej.diagrams.NodeModel,ej.diagrams.LayerModel);
-// A node is created and stored in nodes array.
-var nodes = [
- {
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-var connectors = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-// initialize diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [
- {
- id: 'layer1',
- visible: true,
- objects: ['node1'],
- lock: true
- },
- {
- id: 'layer2',
- visible: true,
- objects: ['node2'],
- lock: false
- }
- ]
-},'#element');
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs1" %}
-```
+## Lock
-## Objects
+The layer's [lock](../api/diagram/layer/#lock) property is used to prevent or allow changes to the element's dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting.
-The layer's [objects](../api/diagram/layer#objects-string[]) property defines the diagram elements to the layer.
+In the following example the objects in layer one is locked. By default, the `lock` property of a layer is set to **false**.
-```javascript
-
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram, ej.diagrams.ConnectorModel,ej.diagrams.NodeModel,ej.diagrams.LayerModel);
-// A node is created and stored in nodes array.
-var nodes = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-var connectors = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-// initialize diagram component
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [
- {
- id: 'layer1',
- visible: true,
- objects: ['node1', 'node2']
- },
- {
- id: 'layer2',
- visible: true,
- objects: ['node2']
- }
- ]
-},'#element');
-
-```
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs2" %}
## AddInfo
-The [`addInfo`](../api/diagram/layer#addinfo-Object) property of layers allow you to maintain additional information to the layers.
+The [`addInfo`](../api/diagram/layer/#addinfo) property of layers allow you to maintain additional information to the layers.
The following code illustrates how to add additional information to the layers.
```javascript
-
-ej.diagrams.Diagram.Inject(ej.diagrams.Diagram, ej.diagrams.ConnectorModel,ej.diagrams.NodeModel,ej.diagrams.LayerModel);
-// A node is created and stored in nodes array.
var nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
},
{
id: 'node2',
@@ -249,14 +91,6 @@ var nodes = [{
height: 100,
offsetX: 300,
offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
}
];
var connectors = [{
@@ -271,6 +105,7 @@ var connectors = [{
y: 400
},
}];
+//Additional informations of layer
var addInfo = { Description: 'Layer1' };
// initialize Diagram component
var diagram = new ej.diagrams.Diagram({
@@ -287,148 +122,159 @@ var diagram = new ej.diagrams.Diagram({
{
id: 'layer2',
visible: true,
- objects: ['node2']
+ objects: ['connector1']
}
]
});
```
-### Add layer at runtime
+## Add layer at runtime
-Layers can be added at runtime by using the [`addLayer`](../api/diagram#addLayer) public method.
+Layers can be added at runtime using the [`addLayer`](../api/diagram/#addlayer) public method.
-The layer's [`ID`](../api/diagram/layer#id-string) property defines the ID of the layer, and its further used to find the layer at runtime and do any customization.
+The layer's [`id`](../api/diagram/layer/#id) property defines the ID of the layer, which is used to find the layer at runtime and apply any customizations. You can also add new objects to the new layer using the `addLayer` method.
-The following code illustrates how to add a layer.
+The following code illustrates how to add a new layer with new connectors stored in an object array of the new layer:
-```javascript
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs4" %}
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
-// add the layers to the existing diagram layer collection
-diagram.addLayer(
- {
- id: 'newlayer',
- objects: [],
- visible: true,
- lock: false,
- zIndex: -1
- },
- [{
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- }
-}]);
-
-```
-
-### Remove layer at runtime
+## Remove layer at runtime
Layers can be removed at runtime by using the [`removeLayer`](../api/diagram#removeLayer) public method.
+To remove a layer, pass the ID of the layer you want to remove as a parameter to the `removeLayer` method.
+
The following code illustrates how to remove a layer.
-```javascript
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
-// remove the diagram layers
-diagram.removeLayer([diagram.model.layers[i]]);
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs5" %}
-```
-### moveObjects
+## moveObjects
-Objects of the layers can be moved by using the [`moveObjects`](../api/diagram#moveObjects) public method.
+You can move objects from one layer to another dynamically using the [`moveObjects`](../api/diagram#moveObjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions..
-The following code illustrates how to move objects from one layer to another layer from the diagram.
+The following code illustrates how to move objects from one layer to another layer.
-```javascript
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs6" %}
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
-// move the objects of diagram layers
-diagram.moveObjects(['connector1'], 'layer2');
+## Z-Index
-```
+[`zIndex`](../api/diagram/layer/#zindex) property of a layer defines its Z order within the diagram. This property allows you to control the layer's position in the stacking order. You can adjust the layer's z-index by moving it forward or backward relative to other layers in the diagram.
-### bringLayerForward
+### Bring Layer Forward
Layers can be moved forward at runtime by using the [`bringLayerForward`](../api/diagram#bringLayerForward) public method.
-The following code illustrates how to bring forward to layer.
-
```javascript
-
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
// move the layer forward
diagram.bringLayerForward('layer1');
```
-### sendLayerBackward
+### Send Layer Backward
Layers can be moved backward at runtime by using the [`sendLayerBackward`](../api/diagram#sendLayerBackward) public method.
-The following code illustrates how to send backward to layer.
-
```javascript
-
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
// move the layer backward
diagram.sendLayerBackward('layer1');
```
-### cloneLayer
+The following code illustrates how to send the layer forward/backward to another layer.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs7" %}
+
+### Layer and objects rendering order
+
+The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](../api/diagram#bringLayerForward) and [`sendLayerBackward`](../api/diagram#sendLayerBackward), the native SVG elements will always render above the basic shape elements.
+
+The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes.
+
+## Clone Layer
Layers can be cloned with its object by using the [`cloneLayer`](../api/diagram#cloneLayer) public method.
-The following code illustrates how to bring forward to layer.
+The following code illustrates how to clone the layer.
-```javascript
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
-// clone a layer with its object
-diagram.cloneLayer('layer2');
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/layers-cs8/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs8" %}
-```
-### getActiveLayer
+## Active layer
+
+Active Layer refers to the layer with the highest z-index in a diagram compared to other layers. When adding objects at runtime, they are stored in this active layer. If no layers are explicitly defined in the diagram, a default layer is created and automatically set as the active layer. However, when multiple layers are defined, the layer with the highest z-index takes precedence as the active layer.
+
+Public methods are available to get and set the active layer, which are explained below.
+
+### Get ActiveLayer
-To get the active layers back in diagram, use the [`getActiveLayer`](../api/diagram#getActiveLayer) public method.
+Active layer of the diagram can be retrieved by using the [`getActiveLayer`](../api/diagram#getActiveLayer) public method.
-The following code illustrates how to bring forward to layer.
+The following code illustrates how fetch active layer from the diagram
```javascript
-var diagramElement = document.getElementById('element');
-var diagram: Object[] = diagramElement.ej2_instances[0];
-// gets the active layer back
-diagram.getActiveLayer();
+// gets the active layer of diagram
+let activeLayer = diagram.getActiveLayer();
```
-### setActiveLayer
+### Set ActiveLayer
-Set the active layer by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method.
+You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method.
-The following code illustrates how to bring forward to layer.
+The following code illustrates how to set active layer for diagram
```javascript
-var diagramElement = document.getElementById('element');
-var diagram: Object[] = diagramElement.ej2_instances[0];
// set the active layer
//@param layerName defines the name of the layer which is to be active layer
diagram.setActiveLayer('layer2');
diff --git a/ej2-javascript/diagram/js/layout-customization.md b/ej2-javascript/diagram/js/layout-customization.md
index 34eae62d5..516ef4e9a 100644
--- a/ej2-javascript/diagram/js/layout-customization.md
+++ b/ej2-javascript/diagram/js/layout-customization.md
@@ -115,6 +115,23 @@ The following code demonstrates how to set the initial orientation for the layou
{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-cs13" %}
+## Exclude from layout
+
+In some cases, you may need one or two nodes not to be arranged based on the layout algorithm but instead positioned manually. You can exclude these nodes from the layout algorithm by setting the [`excludeFromLayout`](../api/diagram/nodeModel/#excludefromlayout) property to true.
+
+The following code example demonstrates how to exclude a node from the layout and position it manually:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/AutomaticLayout-exclude/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-exclude/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-exclude" %}
+
## Fixed node
Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [`fixedNode`](../api/diagram/layoutModel/#fixednode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed.
diff --git a/ej2-javascript/diagram/js/layout-event.md b/ej2-javascript/diagram/js/layout-event.md
index bcdd29fb6..c58d37be3 100644
--- a/ej2-javascript/diagram/js/layout-event.md
+++ b/ej2-javascript/diagram/js/layout-event.md
@@ -45,30 +45,29 @@ The [`expandStateChange`](../api/diagram/iExpandStateChangeEventArgs/) will be t
The following code example explains the `expandStateChange` event in the diagram.
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '550px',
- layout: {
- type: 'HierarchicalTree',
- },
- dataSourceSettings: {
- id: 'Name',
- parentId: 'ReportingPerson',
- dataManager: items,
- },
- getNodeDefaults: (obj) => {
- obj.width = 200;
- obj.height = 60;
- obj.expandIcon.shape = 'Minus';
- obj.collapseIcon.shape = 'Plus';
- return obj;
- },
- expandStateChange: function (args) {
- //We can get the expanded or collapsed node in args
- console.log(args);
- },
-});
-diagram.appendTo('#element');
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/AutomaticLayout-expState/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-expState/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-expState" %}
-```
+## Animation complete event
+
+The [`animationComplete`](../api/diagram/#animationcomplete) event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.
+
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/AutomaticLayout-animComplete/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-animComplete/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-animComplete" %}
diff --git a/ej2-javascript/diagram/js/nodes-events.md b/ej2-javascript/diagram/js/nodes-events.md
index 942177285..f07163e34 100644
--- a/ej2-javascript/diagram/js/nodes-events.md
+++ b/ej2-javascript/diagram/js/nodes-events.md
@@ -13,6 +13,21 @@ domainurl: ##DomainURL##
Diagram provides some events support for node that triggers when interacting with the node.
+## Click event
+
+Triggers when the node is clicked. The following code example explains how to get the [`click`](../api/diagram/iClickEventArgs/) event in the diagram.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-clickEvent" %}
+
## Selection change event
Triggers when the node is selected in diagram.
@@ -30,6 +45,18 @@ The following code example explains how to get the [`selectionChange`](../api/di
{% previewsample "page.domainurl/code-snippet/diagram/nodes-selectionEvent" %}
+ You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](../api/diagram/iSelectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+```ts
+ selectionChange: function (args) {
+ if (args.state == 'Changing') {
+ //Prevents selection
+ args.cancel = true;
+ }
+ },
+
+```
+
## Position change event
While dragging the node through interaction, the position change event can be used to do the customization.
@@ -47,10 +74,22 @@ The following code example explains how to get the [`positionChange`](../api/dia
{% previewsample "page.domainurl/code-snippet/diagram/nodes-positionEvent" %}
+ You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](../api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ positionChange: function (args) {
+ if (args.state == 'Progress') {
+ //Prevents dragging
+ args.cancel = true;
+ }
+ },
+
+```
+
## Size change event
While resizing the node during the interaction, the size change event can be used to do the customization.
-The following code example explains how to get the [`sizeChange`](../api/diagram/isizechangeeventargs/) event in the diagram.
+The following code example explains how to get the [`sizeChange`](../api/diagram/iSizeChangeEventArgs/) event in the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -63,10 +102,22 @@ The following code example explains how to get the [`sizeChange`](../api/diagram
{% previewsample "page.domainurl/code-snippet/diagram/nodes-resizeEvent" %}
+ You can prevent resizing by setting the `cancel` property of [`SizeChangeEventArgs`](../api/diagram/iSizeChangeEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ sizeChange: function (args) {
+ if (args.state == 'Progress') {
+ //Prevents resizing
+ args.cancel = true;
+ }
+ },
+
+```
+
## Rotate change event
While rotating the node during the interaction, the rotate change event can be used to do the customization.
-The following code example explains how to get the [`rotateChange`](../api/diagram/irotationeventargs/) event in the diagram.
+The following code example explains how to get the [`rotateChange`](../api/diagram/iRotationEventArgs/) event in the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -79,10 +130,37 @@ The following code example explains how to get the [`rotateChange`](../api/diagr
{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotateEvent" %}
+ You can prevent rotation by setting the `cancel` property of [`RotationEventArgs`](../api/diagram/iRotationEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ rotateChange: function (args) {
+ if (args.state == 'Progress') {
+ //Prevents rotation
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Property change event
+
+Triggers when there is any property change occurred for the node. The following code example explains how to get the [`propertyChange`](../api/diagram/iPropertyChangeEventArgs/) event in the diagram.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/nodes-propertyChange/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-propertyChange/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-propertyChange" %}
+
## Collection change event
Triggers when the node is added or removed in diagram dynamically.
-The following code example explains how to get the [`collectionChange`](../api/diagram/icollectionchangeeventargs/) event in the diagram.
+The following code example explains how to get the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event in the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -93,4 +171,46 @@ The following code example explains how to get the [`collectionChange`](../api/d
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/nodes-collectionEvent" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-collectionEvent" %}
+
+You can prevent changes to the diagram collection, such as adding or deleting nodes, by setting the `cancel` property of [`CollectionChangeEventArgs`](../api/diagram/iCollectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ collectionChange: function (args) {
+ if (args.state == 'Changing') {
+ //Prevents collection change - Prevents Adding or deleting nodes
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Mouse Events
+
+### Mouse enter event
+
+The [`mouseEnter`](../api/diagram/iMouseEventArgs/) is triggered when the mouse enters the node surface.
+
+### Mouse over event
+
+The [`mouseOver`](../api/diagram/iMouseEventArgs/) is triggered when the mouse hover over the node surface.
+
+### Mouse leave event
+
+The [`mouseLeave`](../api/diagram/iMouseEventArgs/) is triggered when the mouse leaves the node surface.
+
+The following code example shows how to handle these events in the diagram and change the color of a node based on these events:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/nodes-mouseEvent/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-mouseEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-mouseEvent" %}
+
+
+
diff --git a/ej2-javascript/diagram/js/nodes-interaction.md b/ej2-javascript/diagram/js/nodes-interaction.md
index 5c5757775..08b9ecd1f 100644
--- a/ej2-javascript/diagram/js/nodes-interaction.md
+++ b/ej2-javascript/diagram/js/nodes-interaction.md
@@ -22,7 +22,7 @@ You can simply click on the node to select it and click on diagram canvas to uns
### To select node programatically
-A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearSelection) method. The following code explains how to select and clear selection in the diagram.
+A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearSelection) or [`unSelect`](../api/diagram/#unselect) method. The following code explains how to select and clear selection in the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -35,6 +35,11 @@ A node can be selected at runtime by using the [`select`](../api/diagram/#select
{% previewsample "page.domainurl/code-snippet/diagram/nodes-select" %}
+|Method | Parameter | Description|
+|----|----|----|
+|[`unSelect`](../api/diagram/#unselect)| NodeModel/ConnectorModel | The object to remove from the selection.|
+|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diargam.|
+
## Drag
You can simply mousedown on a node and drag it anywhere on the diagram canvas like below.
diff --git a/ej2-javascript/diagram/js/nodes.md b/ej2-javascript/diagram/js/nodes.md
index bd2e2f8f0..40164525b 100644
--- a/ej2-javascript/diagram/js/nodes.md
+++ b/ej2-javascript/diagram/js/nodes.md
@@ -19,11 +19,13 @@ Nodes are graphical objects used to visually represent the geometrical informati
## Create node
-A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked on the diagram area from bottom to top in the order they are added.
+A node can be created and added to the diagram either programmatically or interactively. The [`id`](../api/diagram/nodeModel/#id) property of a node is used to define its unique identifier and can later be used to find the node at runtime for customization. Nodes are stacked on the diagram area from bottom to top in the order they are added.
+
+N> Note: There should not be any white-spaces in the ID string while setting the ID.
### Add node through nodes collection
-To create a node, define the [`node`](../api/diagram/node) object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram.
+To create a node, define the [`node`](../api/diagram/node) object and add that to [`nodes`](../api/diagram/nodeModel/) collection of the [`diagram model`](../api/diagram/). The following code example illustrates how to add a node to the diagram.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -36,11 +38,11 @@ To create a node, define the [`node`](../api/diagram/node) object and add that t
{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs1" %}
-N> Node id should not begin with numbers(should begin with a letter).Node Id should be unique for all the shapes and connectors.
+N> Node id should not begin with numbers(should begin with a letter). Node Id should be unique for all the shapes and connectors.
### Add/Remove node at runtime
-Nodes can be added at runtime by using public method, [`add`](../api/diagram/#add) and can be removed at runtime by using public method, [`remove`](../api/diagram/#remove). On adding node at runtime, the nodes collection is changed and the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will trigger.
+Nodes can be added at runtime by using public method, [`add`](../api/diagram/#add) and can be removed at runtime by using public method, [`remove`](../api/diagram/#remove). On adding/removing node at runtime, the nodes collection is changed and the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will trigger.
The following code illustrates how to add a node and remove a selected node.
@@ -56,9 +58,9 @@ The following code illustrates how to add a node and remove a selected node.
{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs2" %}
-## Add collection of nodes at runtime
+### Add collection of nodes at runtime
-The collection of nodes can be dynamically added using [`addElements`](../api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
+The collection of nodes can be dynamically added using [`addElements`](../api/diagram/#addelements) method. Each time an element is added to the diagram canvas, the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will be triggered.
The following code illustrates how to add a nodes collection at runtime.
@@ -91,7 +93,7 @@ Nodes can be predefined and added to the palette, and can be dropped into the di
### Create node through data source
-Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about data source, refer to [`DataBinding`](./data-binding.md).
+Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to [`DataBinding`](./data-binding.md).
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -140,7 +142,10 @@ N> Once the property is updated, you should call the [`dataBind`](../api/diagram
## Clone node at runtime
-Cloning a node creates a new node instance with identical properties and attributes.
+Cloning a node creates a new node instance with identical properties and attributes. You can clone a node using the [`copy`](../api/diagram/#copy) and [`paste`](../api/diagram/#paste) public methods of the diagram model.
+
+
+The following code example illustrates how to clone node at runtime
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -155,7 +160,9 @@ Cloning a node creates a new node instance with identical properties and attribu
## Add nodes from tree view
-By customizing the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) functionality, we can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element.
+By customizing the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) functionality, you can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element.
+
+The following code example demonstrates how to convert a tree view element into a node while dragging it onto the diagram canvas
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/ej2-javascript/diagram/js/org-chart.md b/ej2-javascript/diagram/js/org-chart.md
index d84338c00..a8f0d253b 100644
--- a/ej2-javascript/diagram/js/org-chart.md
+++ b/ej2-javascript/diagram/js/org-chart.md
@@ -132,3 +132,5 @@ The following code example illustrates how to add assistants to layout.
+N> An Assistant node cannot have any child nodes
+
diff --git a/ej2-javascript/diagram/js/palette-customization.md b/ej2-javascript/diagram/js/palette-customization.md
new file mode 100644
index 000000000..a18554365
--- /dev/null
+++ b/ej2-javascript/diagram/js/palette-customization.md
@@ -0,0 +1,331 @@
+---
+layout: post
+title: Symbol Palette customization in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Symbol palette
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Symbol Palette customization in ##Platform_Name## Diagram control
+
+## Customize the palette properties
+
+Palettes can be annotated with its header texts.
+
+The [`title`](../api/diagram/palette/#title-string) property is displayed as the header text of the palette.
+
+The [`expanded`](../api/diagram/palette/#expanded-boolean) property allows the palette items to be expanded or collapsed.
+
+The [`height`](../api/diagram/palette/#height-number) property sets the height of the symbol group / palette.
+
+The [`iconCss`](../api/diagram/palette/#iconCss-string) property sets the icon to be rendered with the title.
+
+The following example demonstrates how to customize the palette properties.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-header/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-header/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-header" %}
+
+## Animation
+
+The expand and collpase operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs12/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs12" %}
+
+## Description for symbols
+
+The [`description`](../api/diagram/symbolDescription/) property defines the descriptive text that appears beneath each symbol in the palette. This text provides additional information about the symbol's purpose or usage within the diagramming context. The description can be dynamically retrieved and defined using the [`getSymbolInfo`](../api/diagram/symbolPaletteModel/#getsymbolinfo) property, allowing information to assist users in understanding the function or meaning of each symbol.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs2" %}
+
+### Text wrapping and text overflow
+
+The descriptive text that appears beneath each symbol can vary in length. In cases where the text might overlap neighboring symbols in the palette, text wrapping is employed. Text wrapping is controlled using the wrap property of symbolInfo, which supports three modes: `Wrap`, `NoWrap`, `WrapWithOverflow`. By default, text wrapping is set to '`Wrap`'.
+
+Additionally, to handle overflowing text, the overflow property can be used. By default, textOverflow is set to '`Ellipsis`', which truncates overflowing text with an ellipsis (...).
+
+The following example demonstrates how text wrapping and text overflow are applied based on the symbol ID:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-wrap/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-wrap/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-wrap" %}
+
+### Appearance of symbol description
+
+The appearance of a symbol description in the palette can be customized by changing its [`color`](../api/diagram/symbolDescription/#color) , [`fill`](../api/diagram/symbolDescription/#fill), [`fontSize`](../api/diagram/symbolDescription/#fontsize) , [`fontFamily`](../api/diagram/symbolDescription/#fontfamily), [`bold`](../api/diagram/symbolDescription/#bold) [`italic`](../api/diagram/symbolDescription/#italic), [`textDecoration`](../api/diagram/textDecoration/) and [`margin`](../api/diagram/symbolDescription/#margin)
+
+The following code example shows how to customize the symbol description.
+
+ {% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs9/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs9" %}
+
+
+## Symbol size and symbol margin
+
+The size of the individual symbol can be customized. The [`symbolWidth`](../api/diagram/symbolPaletteModel/#symbolwidth) and [`symbolHeight`](../api/diagram/symbolPaletteModel/#symbolheight) properties of node enables you to define the size of the symbols.
+
+The [`symbolMargin`](../api/diagram/symbolPaletteModel/#symbolmargin) defines the space between the shape and its outer boundary. By setting the symbol margin with specific values for left, right, top, and bottom, you can create consistent spacing on all sides around the shape. This ensures there is adequate padding between the shape and its outer boundary.
+
+The following code example illustrates how to set symbol size and symbol margin for the symbol palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs5" %}
+
+## Symbol preview
+
+The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPaletteModel/#symbolpreview) property of symbol palette.The [`width`](../api/diagram/symbolPreviewModel/#width) and [`height`](../api/diagram/symbolPreviewModel/#height) properties of `symbolPreview` allow you to define the preview size for all the symbol palette items. The The [`offset`](../api/diagram/symbolPreviewModel/#offset) property specifies the position of the dragging helper relative to the mouse cursor.
+
+The following code example illustrates how to change the preview size of a palette item.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs6" %}
+
+## Symbol drag size
+
+The [`symbolDragSize`](../api/diagram/symbolPaletteModel/#symboldragsize) property sets the dimensions (height and width) of a shape while it is being dragged from the palette to the diagram canvas. The following code illustrates how to set `symbolDragSize` for the symbol palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-dragSize/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-dragSize/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-dragSize" %}
+
+## Expand Mode
+
+You can customize whether to expand all the palettes of symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](../api/diagram/symbolPaletteModel/#expandmode) property of symbol palette.
+
+You can customize whether to expand all the palettes of the symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](../api/diagram/symbolPaletteModel/#expandmode) property of the symbol palette.
+
+The following example demonstrates how to set the `expandMode` property to control the expansion behavior of the palettes:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-expandMode/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-expandMode/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-expandMode" %}
+
+
+### Restrict expand/collapse of the palette
+
+The symbol palette panel can be restricted from expanding. When we click on the expand icon of the palette, the [paletteExpanding](../api/diagram/symbolPaletteModel/#paletteexpanding) event is triggered. In this event, we can determine whether the palette's panel should be expanded or collapsed by utilizing the `cancel` argument of the event. By default, the panel is expanded. This restriction can be applied to each palette in the symbol palette as desired.
+
+In the following code example, the basic shapes palette is restricted from expanding, and the flow shapes palette is restricted from collapsing, whereas the swimlane shapes palette can be expanded or collapsed:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs3" %}
+
+## Tooltip for symbols in symbol palette
+
+The Symbol palette supports displaying tooltips when mouse hovers over the symbols. You can customize the tooltip for each symbol in the symbol palette.
+
+### Default tooltip for symbols
+When hovering over symbols in the symbol palette, the default tooltip displays the symbol's ID.
+Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
+
+
+
+
+### Custom tooltip for symbols
+
+To customize the tooltips for symbols in the symbol palette, assign a custom tooltip to the [`content`](../api/diagram/diagramTooltipModel/#content) property of [`tooltip`](../api/diagram/diagramtooltipmodel/) for each symbol. Once you define the custom tooltip, enable the [`Tooltip`](../api/diagram/nodeConstraints/) constraints for each symbol to ensure the tooltips are displayed when users hover over them.
+
+The code provided below demonstrates how to define tooltip content for symbols within a symbol palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs8/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs8" %}
+
+### How to provide different tooltip for Symbol palette and diagram elements.
+
+To differentiate the tooltips between symbols in the symbol palette and the dropped nodes, utilize the dragEnter event. In the symbol palette, you can define tooltips for the symbols. When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the node.
+
+The following code example demonstrates how to define different tooltips for the same symbol in the symbol palette and for the dropped node in the diagram canvas.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs10/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs10" %}
+
+The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
+
+
+
+The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
+
+## Lacalization
+
+To localize the symbol palette search box, we need to define the [`locale`](../api/diagram/symbolPaletteModel/#locale) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany.
+
+The following code shows how to localize symbol palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/locale-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/locale-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/locale-cs2" %}
+
+## Restrict symbol dragging from palette
+
+You can restrict the symbols getting dragged from the symbol palette by setting the [`allowDrag`](../api/diagram/symbolPaletteModel/#allowdrag) property of symbol palette as false. By default, the allowDrag is set as **true**.
+
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs11/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs11/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs11" %}
+
+
+## Search symbol
+
+The diagram provides support for enabling the search option in the palette. The [`enableSearch`](../api/diagram/symbolPaletteModel/#enablesearch) property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., “rectangle”) and search keywords into the search text box. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-search/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-search/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-search" %}
+
+## Ignore symbols on search
+
+The [`ignoreSymbolsOnSearch`](../api/diagram/symbolPaletteModel/#ignoresymbolsonsearch) property allows you to specify which symbols should be excluded from search results within the symbol palette. By setting this property, you can control the visibility of specific symbols during a search operation. This feature is useful for hiding certain symbols that you don't want to be shown via search.
+
+In the following example, we ignored the symbol with the ID of 'plus', so it will not appear in the search results.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-ignoreSearch/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-ignoreSearch/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-ignoreSearch" %}
+
+## Filter search
+
+You can filter the search results based on your specific requirements. To achieve this, customize the [`filterSymbols`](../api/diagram/symbolPaletteModel/#filtersymbols) method of the symbol palette according to your needs. In the following example, we filter the results to display only flow shapes in the search palette.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs13/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs13" %}
+
+
+N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed
+
+## See Also
+
+* [How to add the symbol to the diagram](./nodes)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/palette-events.md b/ej2-javascript/diagram/js/palette-events.md
new file mode 100644
index 000000000..6e764ce06
--- /dev/null
+++ b/ej2-javascript/diagram/js/palette-events.md
@@ -0,0 +1,105 @@
+---
+layout: post
+title: Symbol Palette Events in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Symbol palette
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Symbol Palette events in ##Platform_Name## Diagram control
+
+There are some events which will get triggered while interacting with the symbol palette. They are explained below.
+
+## DragEnter event
+
+[`DragEnter`](../api/diagram/iDragEnterEventArgs/) event triggers when the shape enters the diagram surface while dragging it from symbol palette. You can customize the style of the dragged shape using this event. This allows for dynamic styling changes based on the diagram's context.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs19/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs19/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs19" %}
+
+## DragLeave event
+
+[`DragLeave`](../api/diagram/iDragLeaveEventArgs/) event occurs when a shape leaves the diagram surface after being dragged inside but not dropped. This can be useful for resetting styles or handling any clean-up tasks when a shape is not intended to be placed on the diagram.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs20/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs20/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs20" %}
+
+## DragOver event
+
+[`DragOver`](../api/diagram/iDragOverEventArgs/) event triggered when a shape is dragged over diagram while being moved from the symbol palette. This event can be used to provide visual feedback or to determine if the current drop target is valid.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs21/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs21/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs21" %}
+
+## Drop event
+
+[`Drop`](../api/diagram/idropeventargs/) event triggered when a shape is dropped onto the diagram surface. This event is useful for customizing the shape's appearance and properties after it is dropped.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs22/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs22/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs22" %}
+
+## PaletteExpanding event
+
+[`PaletteExpanding`](../api/diagram/iPaletteExpandArgs/) event triggered when the palette expanded / collapsed.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs23/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs23/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs23" %}
+
+## PaletteSelectionChange event
+
+[`PaletteSelectionChange`](../api/diagram/iPaletteSelectionChangeArgs/) event triggered after the selection changes in the symbol palette. This event can be used to enable/disable functionality based on the selected symbol.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/symbol-palette-cs24/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs24/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs24" %}
+
diff --git a/ej2-javascript/diagram/js/print.md b/ej2-javascript/diagram/js/print.md
new file mode 100644
index 000000000..3723fbab4
--- /dev/null
+++ b/ej2-javascript/diagram/js/print.md
@@ -0,0 +1,133 @@
+---
+layout: post
+title: Print in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Export in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Print
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Print in ##Platform_Name## Diagram control
+
+The [`print`](../api/diagram#print) method helps to print the diagram as image.
+
+```JavaScript
+
+ let options: IPrintOptions = {};
+ diagram.print(options);
+
+```
+N> To Print diagram you need to inject `PrintAndExport` in the diagram.
+
+## Print Options
+
+The diagram can be customized while printing using the following properties of [`printOptions`](../api/diagram/iPrintOptions/).
+
+The available print options are listed in the table below.
+
+| Name | Type | Description|
+|-------- | -------- | -------- |
+| region | enum | Sets the region of the diagram to be printed. |
+| margin | object | Sets the margin of the page to be printed. |
+| stretch| enum | Resizes the diagram content to fill its allocated space and printed.|
+| multiplePage | boolean | Prints the diagram into multiple pages. |
+| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. |
+| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.|
+| pageOrientation | enum | Sets the orientation of the page. |
+
+### Region
+
+Printing particular region of diagram is possible by using the [`region`](../api/diagram/iPrintOptions/#region) property of the [`printOptions`](../api/diagram/iPrintOptions/).
+
+The following code example illustrates how to print the diagram based on region.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/print-cs-1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-1" %}
+
+### Multiple page
+
+Printing a diagram across multiple pages is possible by setting the [`multiplePage`](../api/diagram/iPrintOptions/#multiplepage) property of `printOptions` to true.
+
+The following code example demonstrates how to set multiplePage to true:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/print-cs-2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-2" %}
+
+### Margin
+
+The margin for the print region can be set using the [`margin`](../api/diagram/iPrintOptions/#margin) property of the `printOptions`
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/print-cs-4/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-4" %}
+
+### Page width and Page height
+
+The [`pageWidth`](../api/diagram/iPrintOptions/#pageheight) and [`pageHeight`](../api/diagram/iPrintOptions/#pagewidth) property of `printOptions` is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/print-cs-3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-3" %}
+
+### Page Orientation
+
+[`pageOrientation`](../api/diagram/iPrintOptions/#pageorientation) of `printOptions` is used to set the orientation of the page to be printed.
+
+* Landscape - Display with page Width is more than the page Height.
+* Portrait - Display with page Height is more than the page width.
+
+The following example shows how to set pageOrientation for the printOptions.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/print-cs-5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-5" %}
+
+
+## Limitations
+
+
+Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential PDF library. This library incorporates the Syncfusion Essential HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/14031/how-to-export-html-node-using-blink-rendering-in-javascript-diagram) kb for more information.
+
+
+## See Also
+
+* [How to Print multiple diagrams in single click](https://support.syncfusion.com/kb/article/15143/how-to-print-multiple-diagrams-in-a-single-shot-in-javascript)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/serialization.md b/ej2-javascript/diagram/js/serialization.md
index 78355272b..aec658e29 100644
--- a/ej2-javascript/diagram/js/serialization.md
+++ b/ej2-javascript/diagram/js/serialization.md
@@ -11,42 +11,46 @@ domainurl: ##DomainURL##
# Serialization in ##Platform_Name## Diagram control
-**Serialization** is the process of saving and loading for state persistence of the diagram.
+**Serialization** is the process of converting the state of the diagram into a format that can be saved and later restored. This ensures that the diagram's current state, including its nodes, connectors, and configurations, can be persisted across sessions.
+
+Serialization involves saving the diagram's state as a JSON string, which can then be stored in a database, file, or other storage medium. When needed, the serialized string can be deserialized to recreate the diagram in its previous state.
## Save
-The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](../api/diagram#saveDiagram) helps to serialize the diagram as a string. The following code illustrates how to save the diagram.
+The diagram method [`saveDiagram`](../api/diagram/#savediagram), helps to serialize the diagram as a string. This method captures the entire diagram's configuration and content, converting it into a string representation.
+
+The following code illustrates how to save the diagram:
```javascript
-var diagramElement = document.getElementById('element');
-var diagram = diagramElement.ej2_instances[0];
-var saveData;
//returns serialized string of the Diagram
-saveData = diagram.saveDiagram();
+var savedData = diagram.saveDiagram();
```
-This string can be converted to JSON data and stored for future use. The following snippet illustrates how to save the serialized string into local storage.
+This JSON string can be stored in local storage for future use. The following code illustrates how to save the serialized string into local storage and how to retrieve it:
```javascript
-//Saves the string in to local storage
-localStorage.setItem('fileName', saveData);
-saveData = localStorage.getItem('fileName');
+// Store the serialized string in local storage
+localStorage.setItem('fileName', savedData);
+
+// Retrieve the saved string from local storage
+savedData = localStorage.getItem('fileName');
```
-Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to `Print and Export`.
+The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print.md) and [`Export`](./export.md) section.
## Load
-Diagram is loaded from the serialized string data by client-side method, [`loadDiagram`](../api/diagram#loadDiagram).
-The following code illustrates how to load the diagram from serialized string data.
+The diagram can be loaded from serialized string data using the [`loadDiagram`](../api/diagram#loadDiagram) method. The saved string should be passed as the parameter of the loadDiagram method. The following code illustrates how to load the diagram from serialized string data:
```javascript
-var diagramElement = document.getElementById('element');
-var diagram: Object[] = diagramElement.ej2_instances[0];
-//Loads the diagram from saved json data
-diagram.loadDiagram(saveData);
+/*
+ * Loads the diagram from saved JSON data.
+ * parameter 1 - The string representing the diagram model JSON to be loaded.
+ * parameter 2 - Whether it is ej1 data or not (optional)
+ */
+diagram.loadDiagram(savedData);
```
@@ -56,11 +60,33 @@ N> Before loading a new diagram, existing diagram is cleared.
The [`preventDefaults`](../api/diagram/serializationSettingsModel) property of serializationSettings is used to simplifying the saved JSON object without adding the default properties that are presented in the diagram.
-The following code illustrates how to simplify the JSON object.
+The [`preventDefaults`](../api/diagram/serializationSettingsModel/#preventdefaults) property of [`serializationSettings`](../api/diagram/serializationSettingsModel/) is used to simplify the saved JSON object by excluding default properties that are inherent to the diagram. This helps reduce the size of the serialized data and improves efficiency when saving and loading diagrams.
+
+By enabling preventDefaults, only properties that you set in diagram are included in the serialized JSON object. This optimization is useful for scenarios where minimizing data size is crucial, such as in applications with large diagrams or when optimizing network transfers.
+
+The following code illustrates how to enable the preventDefaults property to simplify the JSON object:
+
```javascript
var diagram = new ej.diagrams.Diagram({
serializationSettings: { preventDefaults: true },
});
-```
\ No newline at end of file
+```
+
+## Save and load diagram using uploader control
+
+The JSON files can be uploaded using the uploader component, where they are parsed to extract the JSON data they contain. To achieve this, configure the uploader component with the saveUrl property to receive uploaded files and store them on the server. Similarly, use the removeUrl property to handle file removal operations on the server.
+
+When a JSON file is uploaded, it undergoes parsing to extract its JSON data. This data is then loaded into the diagram using the [`loadDiagram`](../api/diagram#loadDiagram) method.
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/serialisation-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/serialisation-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/serialisation-cs1" %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/symbol-palette.md b/ej2-javascript/diagram/js/symbol-palette.md
index 9bfe6a713..462b43d87 100644
--- a/ej2-javascript/diagram/js/symbol-palette.md
+++ b/ej2-javascript/diagram/js/symbol-palette.md
@@ -11,14 +11,14 @@ domainurl: ##DomainURL##
# Symbol palette in ##Platform_Name## Diagram control
-The **SymbolPalette** displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram.
+The [`symbolPalette`](../api/diagram/symbolPaletteModel/) is a gallery of reusable symbols and diagram elements that can be dragged and dropped on the diagram surface multiple times.
## Create symbol palette
-The [`width`](../api/diagram/palette/#width-number) and [`height`](../api/diagram/palette/#height-number) properties of the symbol palette allows to define the size of the symbol palette.
+The [`width`](../api/diagram/symbolPaletteModel/#width) and [`height`](../api/diagram/symbolPaletteModel/#height) properties of the symbol palette allows you to define the size of the symbol palette.
```javascript
@@ -31,15 +31,15 @@ var palette = new ej.diagrams.SymbolPalette({
```
-## Add palettes to SymbolPalette
+## Add nodes and palettes to SymbolPalette
-A palette allows to display a group of related symbols and it textually annotates the group with its header. A [`Palettes`](../api/diagram/palette/#palettes-PaletteModel[]) can be added as a collection of symbol groups.
+The collection of predefined symbols can be added to palettes using the [`symbols`](../api/diagram/paletteModel/#symbols) property.
-The collection of predefined symbols can be added in palettes using the [`symbols`](../api/diagram/palette/#symbols-[]) property.
+A palette displays a group of related symbols and textually annotates the group with its header. A [`Palettes`](../api/diagram/paletteModel/) can be added as a collection of symbol groups.
-To initialize a palette, define a JSON object with the property [`ID`](../api/diagram/palette/#id-string) that is unique ID is set to the palettes.
+To initialize a palette, define a JSON object with the unique property [`ID`](../api/diagram/paletteModel/#id). Additionally, include the symbols property, which contains an array of different symbols.
-The following code example illustrates how to define a palette and how its added to symbol palette.
+The following code example illustrates how to define symbols in a palette and how to add them to the symbol palette:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -52,111 +52,78 @@ The following code example illustrates how to define a palette and how its added
{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs1" %}
-## Customize the palette header
+## Add connectors in symbol palette
-Palettes can be annotated with its header texts.
-
-The [`title`](../api/diagram/palette/#title-string) displayed as the header text of palette.
-
-The [`expanded`](../api/diagram/palette/#expanded-boolean) property of palette allows to expand/collapse its palette items.
-
-The [`height`](../api/diagram/palette/#height-number) property of palette sets the height of the symbol group.
-
-The [`iconCss`](../api/diagram/palette/#iconCss-string) property sets the content of the symbol group.
-
-The [`description`](../api/diagram/symbolDescription/#description) defines the text to be displayed and how that is to be handled in `getSymbolInfo`.
-
-Also, any HTML element into a palette header can be embedded by defining the getSymbolInfo property.
-The following code example illustrates how to customize palette headers.
+Connectors can be added to the symbol palette by defining them in the symbols array of the palette.
+The following example shows how to render connectors in the symbol palette:
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs2/index.js %}
+{% include code-snippet/diagram/symbol-palette-con/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs2/index.html %}
+{% include code-snippet/diagram/symbol-palette-con/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs2" %}
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-con" %}
-## Restrict expansion of the palette panel
+## Add group nodes in symbol palette
-The symbol palette panel can be restricted from getting expanded. The [`cancel`] argument of the [`paletteExpanding`] property defines whether the palette's panel should be expanded or collapsed. By default, the panel is expanded. This restriction can be done for each of the palettes in the symbol palette as desired.
-In the following code example the basic shapes palette is restricted from getting collapsed whereas the swimlane shapes palette can be expanded or collapsed.
+The symbol palette supports adding group nodes. To add group nodes to the palette, the child nodes should be defined first, followed by the parent node. Refer to the following code to see how to render group nodes in the symbol palette:
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs3/index.js %}
+{% include code-snippet/diagram/symbol-palette-group/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs3/index.html %}
+{% include code-snippet/diagram/symbol-palette-group/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs3" %}
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-group" %}
-## Stretch the symbols into the palette
+## Drag and drop symbols from palette to diagram
-The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
+To drag and drop symbols from the palette to the diagram canvas, mousedown on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it.
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs4" %}
-
-## Add/Remove symbols to palette at runtime
-
-* Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette/#addPaletteItem-number).
-
-* Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette/#removePaletteItem-number).
+
-## Customize the size of symbols
+## Add symbols to palette at runtime
-The size of the individual symbol can be customized. The [`symbolWidth`](../api/diagram/symbolPaletteModel/#symbolwidth) and [`symbolHeight`](../api/diagram/symbolPaletteModel/#symbolheight) properties of node enables you to define the size of the symbols. The following code example illustrates how to change the size of a symbol.
+Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette/#addPaletteItem-number). The following example shows how to add shapes to the palette at runtime.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs5/index.js %}
+{% include code-snippet/diagram/symbol-palette-add/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs5/index.html %}
+{% include code-snippet/diagram/symbol-palette-add/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs5" %}
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-add" %}
-The [`symbolMargin`](../api/diagram/symbolPaletteModel/#symbolmargin) property is used to create the space around
-elements, outside of any defined borders.
+## Remove symbols from palette at runtime
-## Symbol preview
-
-The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPreview/).
-The [`width`](../api/diagram/symbolPreview/#width-number) and [`height`](../api/diagram/symbolPreview/#height-number) properties of SymbolPalette enables you to define the preview size to all the symbol palette items.
-The [`offset`](../api/diagram/symbolPreview/#offset-PointModel) of the dragging helper relative to the mouse cursor.
-
-The following code example illustrates how to change the preview size of a palette item.
+Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette/#removePaletteItem-number). The following example shows how to remove shapes from the palette at runtime.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.js %}
+{% include code-snippet/diagram/symbol-palette-remove/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.html %}
+{% include code-snippet/diagram/symbol-palette-remove/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs6" %}
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-remove" %}
+
+## Symbol defaults
-## Default settings
+While adding more symbols such as nodes and connectors to the palette, you can define the default settings for these objects using the [`getNodeDefaults`](../api/diagram/symbolPaletteModel/#getnodedefaults) and the [`getConnectorDefaults`](../api/diagram/symbolPaletteModel/#getconnectordefaults) properties of the diagram. These properties allow you to specify default configurations for nodes and connectors, ensuring consistency and saving time when adding multiple symbols. By setting these properties, you can predefine attributes such as size, color, shape for nodes and line style, thickness, for connectors.
-While adding more number of symbols such as nodes and connectors to the palette, define the default settings for those objects through the [`getNodeDefaults`](../api/diagram/symbolPaletteModel/#getnodedefaults) and the [`getConnectorDefaults`](../api/diagram/symbolPaletteModel/#getconnectordefaults) properties of diagram allows to define the default settings for nodes and connectors.
+In the following example, the fill color of node and target decorator shape of connector is defined in getNodeDefaults and getConnectorDefaults respectively.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -169,118 +136,68 @@ While adding more number of symbols such as nodes and connectors to the palette,
{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs7" %}
-## Adding symbol description for symbols in the palette
+## Add palettes at runtime
-The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually.
-* The property `getSymbolInfo`, can be used to add the symbol description at runtime.
- The following code is an example to set a symbol description for symbols in the palette.
+You can dynamically add palettes to the symbol palette at runtime to enhance flexibility and customization. This allows you to introduce new groups of symbols as needed without having to reload or reinitialize the diagram. The `addPalettes` method of the symbol palette enables you to create and configure new palettes programmatically. This method takes parameters that define the palette's properties, such as the palette `ID`, `title`, and the `symbols` it contains.
+
+Follow the example below to see how to add a palette at runtime.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs8/index.js %}
+{% include code-snippet/diagram/symbol-palette-addPalette/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs8/index.html %}
+{% include code-snippet/diagram/symbol-palette-addPalette/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs8" %}
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-addPalette" %}
+
+
+## Remove palettes at runtime
-## Appearance of symbol description
+You can remove palettes from the symbol palette at runtime. There are two ways to do this:
-The appearance of a symbol description in the palette can be customized by changing its `color,` `fontSize,` `fontFamily,` `bold,` `italic,` `textDecoration,` and `margin.`
+* Use the `removePalette` method to remove a single palette by its ID.
+* Use the `removePalettes` method to remove multiple palettes by passing an array of palette IDs as a parameter.
-The following code is an example to change the color of a symbol description for symbols in the palette.
+Follow the example below to see how to remove palettes at runtime.
- {% tabs %}
+{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs9/index.js %}
+{% include code-snippet/diagram/symbol-palette-removePalette/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs9/index.html %}
+{% include code-snippet/diagram/symbol-palette-removePalette/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs9" %}
-
-## Tooltip for symbols in symbol palette
-
-The Symbol palette supports displaying tooltips when mouse hovers over the symbols. You can customize the tooltip for each symbol in the symbol palette.
-
-### Default tooltip for symbols
-When hovering over symbols in the symbol palette, the default tooltip displays the symbol's ID.
-Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-removePalette" %}
-
-
-### Custom tooltip for symbols
-
-To customize the tooltips for symbols in the symbol palette, assign a custom tooltip to the 'Tooltip' content property of each symbol. Once you define the custom tooltip, enable the Tooltip constraints for each symbol, ensuring that the tooltips are displayed when users hover over them.
+## Stretch the symbols into the palette
-Here, the code provided below demonstrates how to define tooltip content to symbols within a symbol palette.
+The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.js %}
+{% include code-snippet/diagram/symbol-palette-cs4/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.html %}
+{% include code-snippet/diagram/symbol-palette-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs6" %}
-
-### How to provide different tooltip for Symbol palette and diagram elements.
-
-Differentiate the tooltips between symbols in the symbol palette and dropped nodes by utilizing the dragEnter event. When a custom tooltip is defined for a symbol, it will be displayed for both the symbol and the dropped node in the diagram canvas. However, to provide distinct tooltips for symbols in the palette and dropped nodes, capture the dragEnter event and assign specific tooltips dynamically.
-
-When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node.
-
-The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs4" %}
-
+## Refresh symbol palette
-The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
+The `refresh` method allows you to refresh the symbols dynamically in the SymbolPalette.
```ts
- let diagram: Diagram = new Diagram({
- width: '100%', height: '500px',
- connectors: connectors, nodes: nodes,
- //event to change tooltip content while dragging symbols into Diagram
- dragEnter: dragEnter,
- });
- diagram.appendTo('#diagram');
-
-function dragEnter(args:IDragEnterEventArgs)
- {
- //enable tooltip connstraints for the dragged symbol
- args.dragItem.constraints = NodeConstraints.Default | NodeConstraints.Tooltip;
-
- //change the tooltip content of the dragged symbol
- args.dragItem.tooltip.content='This is Diagram Tooltip';
- }
-```
-
-## Palette interaction
-
-Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram.
-
-## DragEnter
-
-[`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) notifies, when the element enter into the diagram from symbol palette.
+//To refresh the symbols in symbol palette
+symbolPalette.refresh();
-## DragLeave
-
-[`DragLeave`] [`IDragLeaveEventArgs`](../api/diagram/iDragLeaveEventArgs/) notifies, when the element leaves from the diagram.
-
-## DragOver
-
-[`DragOver`] [`IDragOverEventArgs`](../api/diagram/iDragOverEventArgs/) notifies, when an element drag over another diagram element.
-
-N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed
-
-## See Also
+```
-* [How to add the symbol to the diagram](./nodes)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/tools.md b/ej2-javascript/diagram/js/tools.md
index 2f5faa5df..d27bdc089 100644
--- a/ej2-javascript/diagram/js/tools.md
+++ b/ej2-javascript/diagram/js/tools.md
@@ -11,13 +11,21 @@ domainurl: ##DomainURL##
# Tools in ##Platform_Name## Diagram control
+The tools in the diagram control can perform various actions such as selecting, panning, and drawing. These tools are explained below.
+
+- `Select`: Allows you to choose specific elements within the diagram.
+- `Pan`: Enables you to move the view of the diagram to different areas without altering the elements.
+- `Draw`: Provides the ability to draw new shapes, connectors, on the diagram surface.
+
+These tools are essential for creating, editing, and navigating complex diagrams efficiently.
+
## Drawing tools
Drawing tool allows you to draw any kind of node/connector during runtime by clicking and dragging on the diagram page.
-## Shapes
+### Draw nodes
-To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the [`tool`](../api/diagram) property. The following code example illustrates how to draw a rectangle at runtime.
+To draw a shape, set the JSON of that shape to the [`drawingObject`](../api/diagram/#drawingobject) property of the diagram and activate the drawing tool by using the [`tool`](../api/diagram#tool) property. The following code example illustrates how to draw a rectangle at runtime:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -30,7 +38,7 @@ To draw a shape, set the JSON of that shape to the drawType property of the diag
{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs1" %}
-The following code example illustrates how to draw a path.
+The following code example illustrates how to draw a path shape.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -41,44 +49,46 @@ The following code example illustrates how to draw a path.
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs2" %}
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs1" %}
-## Connectors
+### Text Nodes
-To draw connectors, set the JSON of the connector to the drawType property. The drawing [`tool`](../api/diagram) can be activated by using the tool property. The following code example illustrates how to draw a straight line connector.
+Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add thae content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime:
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/Tools-cs3/index.js %}
+{% include code-snippet/diagram/Tools-cs4/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs3/index.html %}
+{% include code-snippet/diagram/Tools-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs3" %}
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs4" %}
-## Text
+### Draw Connectors
-Diagram allows you to create a textNode, when you click on the diagram page. The following code illustrates how to draw a text.
+To draw connector, set the JSON of that connector to the [`drawingObject`](../api/diagram/#drawingobject) property of the diagram. The drawing tool can be activated by using the [`tool`](../api/diagram/#tool) property. The following code example illustrates how to draw different types of connector using drawing tool.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/Tools-cs4/index.js %}
+{% include code-snippet/diagram/Tools-cs3/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs4/index.html %}
+{% include code-snippet/diagram/Tools-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs4" %}
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs3" %}
+
-Once you activate the TextTool, perform label editing of a node/connector.
+### Polygon shape
-**Polygon shape**
-Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.
+The diagram allows you to create polygon shapes by clicking and moving the mouse at runtime on the diagram page. This interactive feature enables users to define custom shapes with multiple sides by specifying points directly on the diagram canvas.
-The following code illustrates how to draw a polygon shape.
+To draw a polygon shape, you need to set the [`drawingObject`](../api/diagram/#drawingobject) property with the appropriate JSON configuration for a `polygon`. This includes specifying the type as 'Polygon'.
+
+The following code illustrates how to draw a polygon shape at runtime:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -91,11 +101,15 @@ The following code illustrates how to draw a polygon shape.
{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs5" %}
-## Polyline Connector
+
+
+### Polyline Connector
+
+The diagram control enables users to create polyline connectors interactively by clicking and dragging the mouse on the diagram canvas at runtime. It allows creating polyline segments with straight lines and angled vertices at control points directly within the diagram interface.
-Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.
+To draw a polyline connector, set the type of the [`drawingObject`](../api/diagram/#drawingobject) as '`Polyline`'.
-The following code illustrates how to draw a polyline connector.
+The following code illustrates how to draw a Polyline connector at runtime:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -108,27 +122,57 @@ The following code illustrates how to draw a polyline connector.
{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs6" %}
+The segments of a polyline connector can be adjusted at runtime by dragging the segment thumb, as shown in the image below. To enable segment editing, you should set the [`DragSegmentThumb`](../api/diagram/connectorConstraints/) constraint for the connector.
+
+
+
+N> To make the segment thumb visible, inject the [`ConnectorEditing`](../api/diagram/connectorEditing/) module into the diagram.
+
+### Freehand Drawing
+
+The diagram supports free-hand drawing, allowing users to draw anything independently on the diagram page. Free-hand drawing is enabled by setting the type of the [`drawingObject`](../api/diagram/#drawingobject) property to '`Freehand`'.
+
+The following code illustrates how to perform freehand drawing:
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/Tools-cs9/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/Tools-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs9" %}
+
+The segments of a freehand connector can be adjusted at runtime by dragging the segment thumb, as shown in the image below. To enable segment editing, you should set the [`DragSegmentThumb`](../api/diagram/connectorConstraints/) constraint for the connector.
+
+
+
## Tool selection
There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.
* Draw selection rectangle: MultipleSelect tool
-* Pan the diagram: Zoom pan
-* Draw nodes/connectors: DrawOnce/DrawOnce
+* Pan the diagram: ZoomPan tool
+* Draw nodes/connectors: DrawOnce/ContinuousDraw tool
-As all the three behaviors are completely different, you can achieve only one behavior at a time based on the tool that you choose.
-When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.
+Since these behaviors are distinct, only one can be active at a time based on the selected tool. When multiple tools are applied, precedence is determined as follows:
|Precedence|Tools|Description|
|----------|-----|-----------|
|1st|ContinuesDraw|Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.|
|2nd|DrawOnce|Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.|
|3rd|ZoomPan|Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.|
-|4th|MultipleSelect|Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.|
+|4th|MultipleSelect|Allows you to select multiple nodes and connectors. If both the MultipleSelect and ZoomPan tools are enabled, the rubber band selection (click and drag to select) is disabled when hovering over the diagram. However, panning is enabled while hovering over the diagram. To select multiple nodes, hold down the CTRL key and click on each node you want to select. Similarly, to unselect a node that is already selected, hold down the CTRL key and click on the node again.|
|5th|SingleSelect|Allows you to select individual nodes or connectors.|
|6th|None|Disables all tools.|
-Set the desired [`tool`](../api/diagram) to the tool property of the diagram model. The following code illustrates how to enable Zoom pan in the diagram
+These tools provide flexibility and functionality for creating and interacting with elements within the diagram interface.
+
+### Zoom pan tool
+
+To activate panning mode set the [`tool`](../api/diagram#tool) property of the diagram as `ZoomPan`. The following code illustrates how to enable Zoom pan in the diagram
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -143,7 +187,7 @@ Set the desired [`tool`](../api/diagram) to the tool property of the diagram mod
## Events
-[`elementDraw`](../api/diagram) event is triggered when node or connector is drawn using drawing tool.
+The [`elementDraw`](../api/diagram/iElementDrawEventArgs/) event is triggered whenever a node or connector is drawn using a drawing tool in the diagram. This event provides a way to capture and respond to actions when elements are created on the canvas.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -156,19 +200,3 @@ Set the desired [`tool`](../api/diagram) to the tool property of the diagram mod
{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs8" %}
-## Freehand Drawing
-
-Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.
-
-The following code illustrates how to draw a freehand drawing.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/Tools-cs9/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs9/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs9" %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/undo-redo.md b/ej2-javascript/diagram/js/undo-redo.md
index 256b29117..7a67bc3b8 100644
--- a/ej2-javascript/diagram/js/undo-redo.md
+++ b/ej2-javascript/diagram/js/undo-redo.md
@@ -149,24 +149,43 @@ diagram.historyManager.push(entry);
```
-## History change event
+## Clear history
+
+The [`clearHistory`](../api/diagram/#clearhistory) method of diagram is used to remove all the recorded actions from the undo and redo history.
+
+```javascript
+//Clears all the histories
+diagram.clearHistory();
+
+```
-The [`historyChange`](../api/diagram) event triggers, whenever the interaction of the node and connector is take place. When interacting, the entries get added to the history manager to trigger this event.
+## Get history stack
+The [`getHistoryStack`](../api/diagram/#gethistorystack) method of the diagram retrieves the [`undoStack`](../api/diagram/history/#undostack) or [`redoStack`](../api/diagram/history/#redostack) from the historyManager. This method takes a single parameter, isUndoStack. Pass true to get the undoStack or false to get the redoStack.
```javascript
+// Fetch undoStack from history manager
+diagram.getHistoryStack(true)
-let diagram = new ej.diagrams.Diagram({
- width: '100%',
- height: '600px',
- nodes: nodes,
- },'#element');
-// history change event
-diagram.historyChange = (arg) => {
- //causes of history change
- let cause: string = arg.cause;
-}
+// Fetch redoStack from history manager
+diagram.getHistoryStack(false)
```
+## History change event
+
+The [`historyChange`](../api/diagram/iHistoryChangeArgs/) event triggers, whenever the interaction of the node and connector is take place. When interacting, the entries get added to the history manager to trigger this event. The following example shows how to get this event in diagram.
+
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/undoredo-historyEvent/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/undoredo-historyEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/undoredo-historyEvent" %}
+
While interacting with diagram, this event can be used to do the customization.
\ No newline at end of file
diff --git a/ej2-javascript/diagram/js/virtualization.md b/ej2-javascript/diagram/js/virtualization.md
index 609c9db3a..2da9e084c 100644
--- a/ej2-javascript/diagram/js/virtualization.md
+++ b/ej2-javascript/diagram/js/virtualization.md
@@ -11,21 +11,25 @@ domainurl: ##DomainURL##
# Virtualization in ##Platform_Name## Diagram control
-## Virtualization in Diagram
+Virtualization is a technique to optimize the performance of diagrams, especially when working with larger diagrams
-Virtualization is the process of loading the diagramming objects available in the visible area of the Diagram control, that is, only the diagramming objects that lie within the ViewPort of the Scroll Viewer are loaded (remaining objects are loaded only when they come into view).
+## Virtualization in Diagram
-This feature gives an optimized performance while loading and dragging items to the Diagram that consists of many Nodes and Connectors.
+Virtualization optimizes the diagram performance by loading only the diagramming objects within the visible area, or ViewPort, of the Scroll Viewer. This means that only the nodes and connectors that are currently in view are loaded, while the remaining objects are loaded dynamically as they come into view.
-The following code illustrates how to enable Virtualization mode in the diagram.
+This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram.
-```ts
+To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints.md/#diagram-constraints).
-//Initialize diagram
-var diagram = new ej.diagrams.Diagram({
- width: '800px', height: '500px',
- //Enable virtualization in diagram
- constraints: DiagramConstraints.Default | DiagramConstraints.Virtualization,
-},'#diagram');
+The following code example demonstrates how to enable Virtualization mode in the diagram:
-```
\ No newline at end of file
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/virtualization-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/virtualization-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/virtualization-cs1" %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/lane.md b/ej2-javascript/diagram/lane.md
index 403b4ed11..95879cfdc 100644
--- a/ej2-javascript/diagram/lane.md
+++ b/ej2-javascript/diagram/lane.md
@@ -150,9 +150,9 @@ The following code example illustrates how to customize the lane header.
{% previewsample "page.domainurl/code-snippet/diagram/swimlane-cs8" %}
{% endif %}
-### Add lane at runtime
+### Add/remove lane at runtime
- You can add the a lane at runtime by using the client side API method called [`addLanes`](../api/diagram/#addlanes). The following code illustrates how to dynamically add lane to swimlane.
+ You can add the a lanes at runtime by using the [`addLanes`](../api/diagram/#addlanes) method and remove lane at runtime using the [`removeLane`](../api/diagram/#removelane) method. The following code illustrates how to dynamically add and remove lane in swimlane.
{% if page.publishingplatform == "typescript" %}
@@ -252,6 +252,41 @@ We can also drag nodes from palette or diagram and drop it inside the lane.
+### Prevent child movement outside lane
+
+To prevent child nodes from moving outside their designated lanes, you can use specific constraints. By default, nodes are allowed to move freely. To restrict their movement, you need to set the constraints accordingly.
+
+Here is an example of how to apply these constraints:
+
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/swimlane-cs5-prevNodeDrag/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/swimlane-cs5-prevNodeDrag/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/swimlane-cs5-prevNodeDrag" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/swimlane-cs5-prevNodeDrag/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/swimlane-cs5-prevNodeDrag/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/swimlane-cs5-prevNodeDrag" %}
+{% endif %}
+
+
### AddInfo
AddInfo for lanes similar to the nodes. we can store additional informations about the specific lane by using the [`addInfo`](../api/diagram/laneModel/#addinfo).
diff --git a/ej2-javascript/diagram/page-settings.md b/ej2-javascript/diagram/page-settings.md
index 91a4113c9..e833ef9cf 100644
--- a/ej2-javascript/diagram/page-settings.md
+++ b/ej2-javascript/diagram/page-settings.md
@@ -11,19 +11,15 @@ domainurl: ##DomainURL##
# Page settings in ##Platform_Name## Diagram control
-Page settings enable to customize the appearance, width, and height of the diagram page.
+Page settings allow customization of the appearance, size, and orientation of the diagram page.
## Page size and appearance
-* The size and appearance of the diagram pages can be customized with the page settings property.
+The [`width`](../api/diagram/pageSettingsModel/#width) and [`height`](../api/diagram/pageSettingsModel/#height) properties in page settings determine the size of the page. Additionally, the [`background`](../api/diagram/backgroundModel/) property allows customization of the page's appearance. The [`color`](../api/diagram/backgroundModel/#color) property of background is used to define the color of the page. The [`margin`](../api/diagram/marginModel/) property defines the page margins.
-* The [`width`](../api/diagram/pageSettings/#width-number) and [`height`](../api/diagram/pageSettings/#height-number) properties of page settings define the size of the page and based on the size, the [`orientation`](../api/diagram/pageSettings/#orientation-PageOrientation) will be set for the page. In addition to that, the appearance of the page can be customized with [`source`](../api/diagram/background/#source-string) and set of appearance specific properties.
+To explore those properties, refer to [`Page Settings`](../api/diagram/pageSettingsModel/).
-* The [`color`](../api/diagram/background/#color-string) property is used to customize the background color and border color of the page.
-
-* The [`margin`](../api/diagram/pageSettings/#margin-MarginModel) property is used to define the page margin.
-
-* To explore those properties, refer to [`Page Settings`](../api/diagram/pageSettings/).
+The following example shows the customization of page settings.
{% if page.publishingplatform == "typescript" %}
@@ -54,9 +50,10 @@ Page settings enable to customize the appearance, width, and height of the diagr
## Set background image
-Stretch and align the background image anywhere over the diagram area. The [`source`](../api/diagram/background/#source-string) property of [`background`](../api/diagram/pageSettings/#background-BackgroundModel) allows you to set the path of the image. The [`scale`](../api/diagram/background/#scale-string) and the [`align`](../api/diagram/background/#align-ImageAlignment) properties help to stretch/align the background images.
+A background image can be attached to the page by using the [`source`](../api/diagram/backgroundModel/#source) property of [`background`](../api/diagram/backgroundModel/). The [`scale`](../api/diagram/backgroundModel/#scale) property adjusts how the background image stretches, while the [`align`](../api/diagram/backgroundModel/#align) property aligns the image within the diagram page.
-The following code illustrates how to stretch and align the background image.
+
+The following code illustrates how to set background image to the diagram page.
{% if page.publishingplatform == "typescript" %}
@@ -85,13 +82,49 @@ The following code illustrates how to stretch and align the background image.
{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs2" %}
{% endif %}
-## Multiple page and page breaks
+## Page orientation
-When multiple page is enabled, the size of the page dynamically increases or decreases in multiples of page width and height and completely fits diagram within the page boundaries. Page breaks is used as a visual guide to see how pages are split into multiple pages.
+There are two types of page orientations:
-The [`multiplePage`](../api/diagram/pageSettings/#multiplepage-boolean) and [`showPageBreak`](../api/diagram/pageSettings/#showpagebreaks-boolean) properties of page settings allow you to enable/disable multiple pages and page breaks respectively.
+- Landscape
+- Portrait
+
+Depending on the orientation selected, the width and height properties are adjusted accordingly. By default, the orientation is set to 'Landscape'. In the following example, the height and width properties of pageSettings are swapped when setting the orientation to 'Portrait'.
-The following code illustrates how to enable multiple page and page break lines.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/pagesettings-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/pagesettings-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/pagesettings-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/pagesettings-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs5" %}
+{% endif %}
+
+
+## Multiple page and page breaks
+
+When multiple pages are enabled, the page size dynamically adjusts in multiples of the specified width and height, ensuring the entire diagram fits within the page boundaries. Page breaks serve as visual guides indicating how pages are split.
+
+The [`multiplePage`](../api/diagram/pageSettingsModel/#multiplepage) and [`showPageBreak`](../api/diagram/pageSettingsModel/#showpagebreaks) properties in page settings control the ability to enable multiple pages and display page break lines, respectively.
{% if page.publishingplatform == "typescript" %}
@@ -120,11 +153,19 @@ The following code illustrates how to enable multiple page and page break lines.
{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs3" %}
{% endif %}
+The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to [`CSS customization`](./style.md/#customizing-the-page-breaks)
+
## Boundary constraints
-The diagram provides support to restrict/customize the interactive region, out of which the elements cannot be dragged, resized, or rotated. The [`boundaryConstraints`](../api/diagram/pageSettings/#boundaryconstraints-BoundaryConstraints) property of page settings allows you to customize the interactive region. To explore the boundary constraints, refer to [`Boundary Constraints`](../api/diagram/boundaryConstraints/).
+The diagram supports restricting or customizing the interactive region where elements cannot be dragged, resized, or rotated. You can achieve this using the [`boundaryConstraints`](../api/diagram/boundaryConstraints/) property in page settings.
+
+There are three types of boundary constraints. They are:
+- Infinity
+- Diagram
+- Page
+To explore these constraints further, refer to [`Boundary Constraints`](./constraints.md/#boundary-constraints).
-The following code example illustrates how to define boundary constraints with respect to the page.
+Below is an example illustrating how to define boundary constraints within the diagram:
{% if page.publishingplatform == "typescript" %}
@@ -151,4 +192,37 @@ The following code example illustrates how to define boundary constraints with r
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs4" %}
+{% endif %}
+
+## Fit options
+
+The [`fitOptions`](api/diagram/fitOptionsModel/) in page settings control how diagram content is fitted within the diagram page. The [`canFit`](../api/diagram/fitOptionsModel/#canfit) property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the [`region`](../api/diagram/diagramRegions/) property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the [`region`](../api/diagram/diagramRegions/) allows fitting custom bounds within the diagram by defining them in the [`customBounds`](../api/diagram/fitOptionsModel/#custombounds) property of fitOptions. The [`canZoomIn`](../api/diagram/fitOptionsModel/#canzoomin) property enables zooming in to fit smaller content within the viewport. Additionally, the [`margin`](../api/diagram/marginModel/) property defines the space around the fitted content within the viewport, while the [`mode`](../api/diagram/fitModes/) property sets the fitting mode, typically defaulting to 'Page' but also offering options like 'Width' and 'Height' for specific dimension constraints.
+
+The following example demonstrates how fitOptions are utilized in diagram page settings.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/pagesettings-cs6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/pagesettings-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs6" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/pagesettings-cs6/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/pagesettings-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs6" %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/phase.md b/ej2-javascript/diagram/phase.md
index 95f64b40f..9d58074e7 100644
--- a/ej2-javascript/diagram/phase.md
+++ b/ej2-javascript/diagram/phase.md
@@ -42,9 +42,9 @@ The following code example illustrates how to create phase.
{% previewsample "page.domainurl/code-snippet/diagram/swimlane-cs12" %}
{% endif %}
-### Dynamically add phase to Lane
+### Dynamically add/remove phase to Lane
- You can add the a phase at runtime by using client side API method called `addPhases`. The following code example illustrates how to add phase at run time.
+ You can add the a phase at runtime by using [`addPhases`](../api/diagram/#addphases) method and remove phase by using [`removePhase`](../api/diagram/#removephase) method. The following code example illustrates how to add and remove phase at run time.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/diagram/ports-interaction.md b/ej2-javascript/diagram/ports-interaction.md
index 6922573f4..54adb4c92 100644
--- a/ej2-javascript/diagram/ports-interaction.md
+++ b/ej2-javascript/diagram/ports-interaction.md
@@ -153,12 +153,42 @@ The following code explains how to enable port tooltip.
There are several events that can be triggered while interacting with ports. These events are listed in the table below.
-| Event | Description |
+| Event| Description|
|----|----|
-| Click | Triggers when the port is clicked. |
-| Element Draw | Triggers when drawing a connector from the port. |
-| Position Change | Triggers when the port is dragged. |
-| Connection Change| Triggers when a connector is connected or disconnected from the port|. |
+| [`Click`](../api/diagram/iClickEventArgs/) | Triggers when the port is clicked. |
+| [`Element Draw`](../api/diagram/iElementDrawEventArgs/) | Triggers when drawing a connector from the port. |
+| [`Position Change`](../api/diagram/iDraggingEventArgs/) | Triggers when the port is dragged. |
+| [`Connection Change`](../api/diagram/iConnectionChangeEventArgs/) | Triggers when a connector is connected or disconnected from the port|
+
+The following example shows how to get these events in diagram.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/ports-interact5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/ports-interact5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/ports-interact5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/ports-interact5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/ports-interact5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/ports-interact5" %}
+
+{% endif %}
diff --git a/ej2-javascript/diagram/scroll-settings.md b/ej2-javascript/diagram/scroll-settings.md
index bac0e86ee..de760009b 100644
--- a/ej2-javascript/diagram/scroll-settings.md
+++ b/ej2-javascript/diagram/scroll-settings.md
@@ -11,17 +11,19 @@ domainurl: ##DomainURL##
# Scroll settings in ##Platform_Name## Diagram control
-The diagram can be scrolled by using the vertical and horizontal scrollbars. In addition to the scrollbars,mousewheel can be used to scroll the diagram. Diagram’s [`scrollSettings`](../api/diagram) enable you to read the current scroll status, view port size, current zoom, and zoom factor. It also allows you to scroll the diagram programmatically.
+The diagram can be scrolled using both the vertical and horizontal scrollbars. Additionally, the mouse wheel can be used to scroll the diagram. The diagram's [`scrollSettings`](../api/diagram/scrollSettingsModel/) allow you to read the current scroll status, view port size, current zoom level, and zoom factor. These settings also provide the capability to programmatically control the scrolling of the diagram.
-## Get current scroll status
+## Access and Customize Scroll Settings
-Scroll settings allow you to read the scroll status, [`viewPortWidth`](../api/diagram/scrollSettings), [`viewPortHeight`](../api/diagram/scrollSettings), and [`currentZoom`](../api/diagram/scrollSettings) with a set of properties. To explore those properties, see [`Scroll Settings`](../api/diagram/scrollSettings).
+Scroll settings in a diagram allow you to access and customize various properties such as [`horizontalOffset`](../api/diagram/scrollSettingsModel/#horizontaloffset), [`verticalOffset`](../api/diagram/scrollSettingsModel/#verticaloffset), [`viewPortWidth`](../api/diagram/scrollSettingsModel/#viewportwidth), [`viewPortHeight`](../api/diagram/scrollSettingsModel/#viewportheight), [`currentZoom`](../api/diagram/scrollSettingsModel/#currentzoom), [`zoomFactor`](../api/diagram/scrollSettingsModel/#zoomfactor), [`maxZoom`](../api/diagram/scrollSettingsModel/#maxzoom), [`minZoom`](../api/diagram/scrollSettingsModel/#minzoom), [`scrollLimit`](../api/diagram/scrollSettingsModel/#scrolllimit) , [`canAutoScroll`](../scrollSettingsModel/#canautoscroll) , [`autoScrollBorder`](../api/diagram/marginmodel/), [`padding`](../api/diagram/marginmodel/) , [`scrollableArea`](../api/diagram/rect/).
-## Define scroll status
+These properties enable you to read and adjust the scroll status, scroll offset, zoom levels, and more. For a comprehensive overview of these properties, refer to the [`Scroll Settings`](../api/diagram/scrollSettingsModel/)
-Diagram allows you to pan the diagram before loading, so that any desired region of a large diagram is made to view. You can programmatically pan the diagram with the [`horizontalOffset`](../api/diagram/scrollSettings) and [`verticalOffset`](../api/diagram/scrollSettings) properties of scroll settings. The following code illustrates how to set pan the diagram programmatically.
+## Define scroll offset
-In the following example, the vertical scroll bar is scrolled down by 50 px and horizontal scroll bar is scrolled to right by 100 px.
+The diagram allows you to pan before loading, ensuring that any desired region of a large diagram is visible. You can programmatically pan the diagram using the [`horizontalOffset`](../api/diagram/scrollSettingsModel/#horizontaloffset) and [`verticalOffset`](../api/diagram/scrollSettingsModel/#verticaloffset) properties of the scroll settings. The following code illustrates how to programmatically pan the diagram upon initialization also defined scrollLimit as 'Infinity' to scroll infinitely in diagram. To learn more about scrollLimit refer to [`scrollLimit`](#scroll-limit)
+
+In the example below, the vertical scrollbar is scrolled down by 100 px, and the horizontal scrollbar is scrolled to the right by 100 px.
{% if page.publishingplatform == "typescript" %}
@@ -50,9 +52,18 @@ In the following example, the vertical scroll bar is scrolled down by 50 px and
{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs1" %}
{% endif %}
-## Update scroll status
+## Update scroll offset at runtime
+
+There are several ways to update the scroll offset at runtime:
+
+* `Scrollbar`: Use the horizontal and vertical scrollbars of the diagram.
+* `Mousewheel`: Scroll vertically with the mouse wheel. Hold the Shift key while scrolling to scroll horizontally.
+* `Pan Tool`: Activate the ZoomPan [`tool`](../api/diagram/diagramTools/) in the diagram to scroll by panning.
+* `Touch`: Use touchpad gestures for scrolling.
+
+### Programmatically update Scroll Offset
-You can programmatically change the scroll offsets at runtime by using the client-side method update. The following code illustrates how to change the scroll offsets and zoom factor at runtime.
+You can programmatically change the scroll offsets of diagram by customizing the [`horizontalOffset`](../api/diagram/scrollSettingsModel/#horizontaloffset) and [`verticalOffset`](../api/diagram/scrollSettingsModel/#verticaloffset) of [`Scroll Settings`](../api/diagram/scrollSettingsModel/) at runtime. The following code illustrates how to change the scroll offsets at runtime.
{% if page.publishingplatform == "typescript" %}
@@ -81,88 +92,128 @@ You can programmatically change the scroll offsets at runtime by using the clien
{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs2" %}
{% endif %}
-## AutoScroll
+## Update zoom at runtime
-Autoscroll feature automatically scrolls the diagram, whenever the node or connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the diagram.
+### Zoom using mouse wheel
-* Node dragging, resizing
-* Connection editing
-* Rubber band selection
-* Label dragging
+Another way to zoom in and out the diagram is by using the mouse wheel. This method is a quick and convenient way to zoom in and out without having to use any additional tools or gestures.
-The diagram client-side event [`ScrollChange`](../api/diagram) gets triggered when the autoscroll (scrollbars) is changed and you can do your own customization in this event.
+- Zoom in: Press Ctrl+mouse wheel, then scroll upward.
-The autoscroll behavior in your diagram can be enabled/disabled by using the [`canAutoScroll`](../api/diagram/scrollSettings) property of the diagram. The following code example illustrates how to set autoscroll.
+- Zoom out: Press Ctrl+mouse wheel, then scroll downward.
-{% if page.publishingplatform == "typescript" %}
+### Zoom using Keyboard Shortcuts
+
+Using keyboard shortcuts is a quick and easy way to zoom the diagram without having to use the mouse or touchpad.
+
+- Zoom in: Press Ctrl and the plus(+) key.
+
+- Zoom out: Press Ctrl and the minus(-) key.
+
+### Programmatically update zoom
+
+You can programmatically change the current zoom of diagram by utilizing the [`zoomTo`](../api/diagram/#zoomto) public method.
+
+#### ZoomOptions
+
+The [`zoomTo`](../api/diagram/#zoomto) method takes one parameter [`zoomOptions`](../api/diagram/zoomOptions/). In that zoomOptions we can specify the [`focusPoint`](../api/diagram/pointModel/), [`type`](../api/diagram/zoomTypes/) and [`zoomFactor`](../api/diagram/zoomOptions/#zoomfactor)
+
+ The following example shows how to zoom-in and zoom-out the diagram using zoomTo method
+
+ {% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/scrollSettings-cs3/index.ts %}
+{% include code-snippet/diagram/scrollSettings-cs8/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs3/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs3" %}
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs8" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/scrollSettings-cs3/index.js %}
+{% include code-snippet/diagram/scrollSettings-cs8/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs3/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs3" %}
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs8" %}
{% endif %}
-## Autoscroll border
+For more information on various ways to zoom and pan the diagram, refer to [`zoomPan with various ways`](https://support.syncfusion.com/kb/article/15147/how-to-zoom-and-pan-in-javascript-diagram-with-various-ways)
+
+## AutoScroll
+
+The autoscroll feature automatically scrolls the diagram when a node or connector is moved beyond its boundary. This ensures that the element remains visible during operations like dragging, resizing, and selection.
+
+The autoscroll behavior triggers automatically when any of the following actions occur towards the edges of the diagram:
+
+- Node dragging or resizing
+- Connector control point editing
+- Rubber band selection
+
+The client-side event [`ScrollChange`](../api/diagram/iScrollChangeEventArgs/) is triggered when autoscroll occurs, allowing for customizations. Refer [`scollChange-event`](#scroll-change-event) for more information.
+
+Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](../scrollSettingsModel/#canautoscroll) property of the diagram.
-The autoscroll border is used to specify the maximum distance between the object and diagram edge to trigger autoscroll. The default value is set as 15 for all sides (left, right, top, and bottom) and it can be changed by using the [`autoScrollBorder`](../api/diagram/scrollSettings) property of page settings. The following code example illustrates how to set autoscroll border.
+### Autoscroll border
+
+The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). You can adjust this using the [`autoScrollBorder`](../api/diagram/marginmodel/) property of the scroll settings.
+
+The following example demonstrates how to configure autoscroll:
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/scrollSettings-cs4/index.ts %}
+{% include code-snippet/diagram/scrollSettings-cs3/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs4/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs4" %}
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs3" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/scrollSettings-cs4/index.js %}
+{% include code-snippet/diagram/scrollSettings-cs3/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs4/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs4" %}
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs3" %}
{% endif %}
+N> To use auto scroll the scrollLimit should be set as 'Infinity'
+
+
## Scroll limit
-The scroll limit allows you to define the scrollable region of the diagram. It includes the following options:
+The [`scrollLimit`](../api/diagram/scrollSettingsModel/#scrolllimit) allows you to define the scrollable region of the diagram. It includes the following options:
+
+* `Infinity`: Allows scrolling in all directions without any restriction.
+* `Diagram`: Allows scrolling within the diagram region.
+* `Limited`: Allows scrolling within a specified scrollable area.
-* Allows to scroll in all directions without any restriction.
-* Allows to scroll within the diagram content.
-* Allows to scroll within the specified scrollable area.
-* The [`scrollLimit`](../api/diagram/scrollSettings) property of scroll settings helps to limit the scrolling.
+The `scrollLimit` property in scroll settings helps to define these limits.
-The scrollSettings [`scrollableArea`](../api/diagram/scrollSettings) allow to extend the scrollable region that is based on the scroll limit.
-The following code example illustrates how to specify the scroll limit.
+### Scrollable Area
+
+Scrolling beyond a particular rectangular area can be restricted by using the [`scrollableArea`](../api/diagram/rect/) property in [`scrollSettings`](../api/diagram/scrollSettingsModel/). To restrict scrolling beyond a custom region, set the scrollLimit to "limited" and define the desired bounds in `scrollableArea` property.
+
+The following code example illustrates how to specify the scroll limit and customize the scrollable area.
{% if page.publishingplatform == "typescript" %}
@@ -193,9 +244,9 @@ The following code example illustrates how to specify the scroll limit.
## Scroll Padding
-The [`padding`](../api/diagram/scrollSettings) property of scroll settings allows you to extend the scrollable region that is based on the scroll limit.
+The [`padding`](../api/diagram/marginmodel/) property of the scroll settings allows you to extend the scrollable region based on the scroll limit. This property is useful for adding extra space around the diagram content, making it easier to navigate and interact with elements near the edges.
-The following code example illustrates how to set scroll padding to diagram region.
+The following code example illustrates how to set scroll padding for the diagram region:
{% if page.publishingplatform == "typescript" %}
@@ -224,37 +275,55 @@ The following code example illustrates how to set scroll padding to diagram regi
{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs6" %}
{% endif %}
-## Scrollable Area
+## Reset scroll
+
+The [`reset`](../api/diagram/#reset) method resets the zoom and scroller offsets to their default values.
-Scrolling beyond any particular rectangular area can be restricted by using the [`scrollableArea`](../api/diagram/scrollSettings) property of scroll settings. To restrict scrolling beyond any custom region, set the [`scrollLimit`](../api/diagram/scrollSettings) as “limited”. The following code example illustrates how to customize scrollable area.
+``` javascript
+//Resets the scroll and zoom to default values
+ diagram.reset();
+
+```
+
+## UpdateViewport
+
+The [`updateViewPort`](../api/diagram) method is used to update the dimensions of the diagram viewport.
+
+```javascript
+//Updates diagram viewport
+diagram.updateViewPort();
+
+```
+
+## Events
+
+### Scroll change event
+
+The [`scrollChange`](../api/diagram/iScrollChangeEventArgs/) event is triggered whenever the scrollbar is updated. This can occur during actions such as zooming in, zooming out, using the mouse wheel, or panning. The following example shows how to capture the `scrollChange` event.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/scrollSettings-cs7/index.ts %}
+{% include code-snippet/diagram/scrollSettings-cs9/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs7/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs9/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs7" %}
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs9" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/scrollSettings-cs7/index.js %}
+{% include code-snippet/diagram/scrollSettings-cs9/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/scrollSettings-cs7/index.html %}
+{% include code-snippet/diagram/scrollSettings-cs9/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs7" %}
-{% endif %}
-
-## UpdateViewport
-
-The [`updateViewPort`](../api/diagram) method is used to update the diagram page and view size at runtime.
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/diagram/scrollSettings-cs9" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/style.md b/ej2-javascript/diagram/style.md
index fc15d4403..22353a163 100644
--- a/ej2-javascript/diagram/style.md
+++ b/ej2-javascript/diagram/style.md
@@ -20,9 +20,11 @@ Use the following CSS to customize the connector end point handle.
.e-diagram-endpoint-handle {
fill: red;
stroke: green;
+ stroke-width: 3px;
}
```
+
## Customizing the connector end point handle when connected
@@ -33,9 +35,11 @@ Use the following CSS to customize the connector end point handle when connected
.e-diagram-endpoint-handle.e-connected {
fill: red;
stroke: green;
+ stroke-width: 3px;
}
```
+
## Customizing the connector end point handle when disabled
@@ -43,38 +47,74 @@ Use the following CSS to customize the connector end point handle when disabled.
```scss
-.e-diagram-endpoint-handle.e-disabled {
- fill: red;
- opacity: 1;
- stroke: green;
- }
+ .e-diagram-endpoint-handle.e-disabled {
+ fill: lightgrey;
+ opacity: 1;
+ stroke: black;
+ }
```
+
-## Customizing the bezier connector handle
+## Customizing the bezier segment thumb
-Use the following CSS to customize the bezier handle properties.
+Use the following CSS to customize the bezier segment thumb.
```scss
-.e-diagram-bezier-handle {
- fill: red;
- stroke: green;
+ .e-diagram-bezier-segment-handle{
+ stroke:yellow;
+ stroke-width:2px;
+ fill:green;
}
```
+
-## Customizing the bezier connector line
+## Customizing the bezier control points
-Use the following CSS to customize the bezier line properties.
+Use the following CSS to customize the bezier control points.
```scss
-.e-diagram-bezier-line {
- stroke: black;
- }
+ .e-diagram-bezier-control-handle {
+ stroke:yellow;
+ stroke-width:2px;
+ fill:green;
+ }
+
+```
+
+
+## Customizing the orthogonal segment thumb
+
+Use the following CSS to customize the orthogonal segment thumb.
+
+```scss
+
+ .e-diagram-ortho-segment-handle {
+ stroke:yellow;
+ stroke-width:2px;
+ fill:green;
+ }
+
+```
+
+
+## Customizing the straight segment thumb
+
+Use the following CSS to customize the straight segment thumb.
+
+```scss
+
+ .e-diagram-straight-segment-handle {
+ stroke:yellow;
+ stroke-width:2px;
+ fill:green;
+ }
```
+
## Customizing the resize handle
@@ -83,12 +123,28 @@ Use the following CSS to customize the resize handle.
```scss
.e-diagram-resize-handle {
- fill: white;
+ fill: yellow;
opacity: 1;
- stroke: white;
+ stroke: orange;
}
```
+
+
+## Customizing the selector
+
+Use the following CSS to customize the selector.
+
+```scss
+
+.e-diagram-selector{
+ stroke:yellow;
+ stroke-width:2px;
+ }
+```
+
+
+
## Customizing the selector pivot line
Use the following CSS to customize the line between the selector and rotate handle.
@@ -96,10 +152,12 @@ Use the following CSS to customize the line between the selector and rotate hand
```scss
.e-diagram-pivot-line {
- stroke: red;
+ stroke: black;
+ stroke-width:2px;
}
```
+
## Customizing the selector border
@@ -120,11 +178,12 @@ Use the following CSS to customize the rotate handle properties.
```scss
.e-diagram-rotate-handle {
- fill: red;
- stroke: green;
+ fill: yellow;
+ stroke: orange;
}
```
+
## Customizing the symbolpalette while hovering
@@ -137,6 +196,7 @@ Use the following CSS to customize the symbolpalette while hovering.
}
```
+
## Customizing the symbolpalette when selected
@@ -145,11 +205,13 @@ Use the following CSS to customize the symbolpalette when selected.
```scss
.e-symbolpalette .e-symbol-selected {
- background: white;
+ background: yellow;
}
```
+
+
## Customizing the ruler
Use the following CSS to customize the ruler properties.
@@ -157,11 +219,12 @@ Use the following CSS to customize the ruler properties.
```scss
.e-diagram .e-ruler {
- background-color: red;
+ background-color: blue;
font-size: 13px;
}
```
+
## Customizing the ruler overlap
@@ -174,6 +237,8 @@ Use the following CSS to ruler overlap properties.
}
```
+
+
## Customizing the ruler marker color
Use the following CSS to customize the marker color
@@ -182,9 +247,11 @@ Use the following CSS to customize the marker color
.e-diagram .e-d-ruler-marker {
stroke: yellow;
+ stroke-width:3px;
}
```
+
## Customizing the text edit
@@ -193,16 +260,17 @@ Use the following CSS to customize the text edit properties.
```scss
.e-diagram .e-diagram-text-edit {
- background: white;
- border-color: red;
- border-style: dashed;
- border-width: 1px;
- box-sizing: content-box;
- color: black;
- min-width: 50px;
+ background: white;
+ border-color: blue;
+ border-style: dashed;
+ border-width: 3px;
+ box-sizing: content-box;
+ color: black;
+ min-width: 50px;
}
```
+ 
## Customizing the text edit on selection
@@ -211,8 +279,22 @@ Use the following CSS to customize the text edit on selection properties.
```scss
.e-diagram-text-edit::selection {
- background: red;
+ background: yellow;
color: green;
}
```
+
+
+## Customizing the page breaks
+
+Use the following CSS to customize the page breaks line color
+
+```scss
+.e-diagram-page-break {
+ stroke: red;
+ stroke-width: 2px;
+ }
+```
+
+
\ No newline at end of file
diff --git a/ej2-javascript/diagram/tool-tip.md b/ej2-javascript/diagram/tool-tip.md
index fa3288334..111c63014 100644
--- a/ej2-javascript/diagram/tool-tip.md
+++ b/ej2-javascript/diagram/tool-tip.md
@@ -463,4 +463,36 @@ The following code example shows how to set the size for the tooltip:
{% previewsample "page.domainurl/code-snippet/diagram/tooltip-size" %}
{% endif %}
+## Show/Hide tooltip at runtime
+
+You can show or hide the tooltip dynamically using a button click with the [`showTooltip`](../api/diagram/#showtooltip) and [`hideTooltip`](../api/diagram/#hidetooltip) methods of the diagram. This allows you to control the tooltip visibility programmatically rather than relying on user hover actions. In some cases, you may want to display the tooltip without requiring the user to hover over the object.
+
+The following example demonstrates how to show or hide the tooltip at runtime:
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/tooltip-runtime/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/tooltip-runtime/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/tooltip-runtime" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/tooltip-runtime/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/tooltip-runtime/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/tooltip-runtime" %}
+{% endif %}
diff --git a/ej2-javascript/diagram/ts/bezier-controlPoint.md b/ej2-javascript/diagram/ts/bezier-controlPoint.md
index 6b9e84ee2..c6058d223 100644
--- a/ej2-javascript/diagram/ts/bezier-controlPoint.md
+++ b/ej2-javascript/diagram/ts/bezier-controlPoint.md
@@ -16,10 +16,10 @@ While interacting with multiple bezier segments, maintain their control points a
| BezierSmoothness value | Description | Output |
|-------- | -------- | -------- |
-| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. |  |
-| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. |  |
-| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. |  |
-| None | Segment’s control points are interacted independently from each other. |  |
+| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. |  |
+| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. |  |
+| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. |  |
+| None | Segment’s control points are interacted independently from each other. |  |
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -38,8 +38,8 @@ By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/
| ControlPointsVisibility value | Description | Output |
|-------- | -------- | -------- |
-| None |It allows you to hide all control points of the bezier connector. |  |
-| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. |  |
-| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. |  |
-| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.|  |
-| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. |  |
+| None |It allows you to hide all control points of the bezier connector. |  |
+| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. |  |
+| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. |  |
+| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.|  |
+| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. |  |
diff --git a/ej2-javascript/diagram/ts/bezier-segEditOrientation.md b/ej2-javascript/diagram/ts/bezier-segEditOrientation.md
index b210fadee..67a159037 100644
--- a/ej2-javascript/diagram/ts/bezier-segEditOrientation.md
+++ b/ej2-javascript/diagram/ts/bezier-segEditOrientation.md
@@ -16,8 +16,8 @@ The intermediate point of two adjacent bezier segments can be edited interactive
| SegmentEditOrientation value | Description | Output |
|-------- | -------- | -------- |
-| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. |  |
-| Freeform | It allows the intermediate points to be dragged in any direction. |  |
+| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. |  |
+| Freeform | It allows the intermediate points to be dragged in any direction. |  |
The following code illustrates how to interact with Bezier efficiently by using the [`smoothness`](../api/diagram/bezierSmoothness/) and `segmentEditOrientation` properties of the `bezierSettings`.
diff --git a/ej2-javascript/diagram/ts/commands.md b/ej2-javascript/diagram/ts/commands.md
index cdc94feab..0b57aeb51 100644
--- a/ej2-javascript/diagram/ts/commands.md
+++ b/ej2-javascript/diagram/ts/commands.md
@@ -13,10 +13,10 @@ domainurl: ##DomainURL##
-There are several commands available in the diagram as follows.
+The commands in diagram control are used to perform various interactions within the diagram when called. Several commands are available in the diagram, as follows:
* Alignment commands
-* Spacing commands
+* Distribute commands
* Sizing commands
* Clipboard commands
* Grouping commands
@@ -26,588 +26,452 @@ There are several commands available in the diagram as follows.
* FitToPage commands
* Undo/Redo commands
-## Align
+## Align commands
-Alignment commands enable you to align the selected or defined objects such as nodes and connectors with respect to the selection boundary. Refer to [`align`](../api/diagram#align) commands which shows how to use align methods in the diagram.
+The alignment command enables you to align selected or defined objects, such as nodes and connectors, with respect to the selection boundary or the first selected object. The [`align`](../api/diagram/#align) method parameters are explained below.
+
+### Alignment Options
+
+The [`Alignment Options`](../api/diagram/alignmentOptions/) defines the alignment position of objects to be aligned.
+
+|Alignment|Description|
+|----|----|
+|Left| Aligns all the selected objects at the left of the selection boundary|
+|Right| Aligns all the selected objects at the right of the selection boundary|
+|Center| Aligns all the selected objects at the center of the selection boundary|
+|Top| Aligns all the selected objects at the top of the selection boundary|
+|Bottom| Aligns all the selected objects at the bottom of the selection boundary|
+|Middle| Aligns all the selected objects at the middle of the selection boundary|
-| Parameters | Description |
-|:------------| :------: |
-|[`Alignment Options`](../api/diagram/alignmentOptions#AlignmentOptions) |
Defines the specific direction, with respect to which the objects to be aligned. The accepted values of the argument "alignment options" are as follows.
Left
Aligns all the selected objects at the left of the selection boundary.
Right
Aligns all the selected objects at the right of the selection boundary.
Center
Aligns all the selected objects at the center of the selection boundary.
Top
Aligns all the selected objects at the top of the selection boundary.
Bottom
Aligns all the selected objects at the bottom of the selection boundary.
Middle
Aligns all the selected objects at the middle of the selection boundary.
|
-| Objects |
Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned.
Defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`. The accepted values of the argument "alignment mode" are as follows.
Object
Aligns the objects based on the first object in the selected list.
Selector
Aligns the objects based on the selection boundary.
|
+### Objects
+
+Defines the objects to be aligned. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets aligned.
+
+### Alignment Mode
+
+[`Alignment Mode`](../api/diagram/alignmentMode/) defines the specific mode, with respect to which the objects to be aligned. This is an optional parameter. The default alignment mode is `Object`. The accepted values of the argument "alignment mode" are as follows.
+
+The below table shows the alignment as `Left` for different alignment modes.
+
+|Nodes before alignment|Alignment mode|Description|Output image|
+|----|----|----|----|
+||Object (Default)|Aligns the objects based on the bounds of first object in the selected list.||
+||Selector|Aligns the objects based on the selection boundary.||
+
The following code example illustrates how to align all the selected objects at the left side of the selection boundary.
-```ts
-import {
- Diagram,
- NodeModel
-} from '@syncfusion/ej2-diagrams';
-//Initializes the node
-let node: NodeModel = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node2: NodeModel = {
- id: 'node2',
- width: 100,
- height: 60,
- offsetX: 100,
- offsetY: 170,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node3: NodeModel = {
- id: 'node3',
- width: 140,
- height: 60,
- offsetX: 100,
- offsetY: 240,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-//Initializes the Diagram Component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-});
-diagram.appendTo('#element');
-let selArray: (NodeModel | ConnectorModel)[] = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Sets direction as left
-diagram.align('Left', diagram.selectedItems.nodes, 'Selector');
-diagram.dataBind();
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs13/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs13" %}
-## Distribute
+## Distribute commands
-The [`Distribute`](../api/diagram#distribute) commands enable to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary.
+The [`distribute`](../api/diagram/#distribute) method enable you to place the selected objects on the page at equal intervals from each other. The selected objects are equally spaced within the selection boundary. The [`distribute`](../api/diagram/#distribute) method parameters are explained below.
-The factor to distribute the shapes [`DistributeOptions`](../api/diagram/distributeOptions#DistributeOptions) are listed as follows:
+### Distribute options
-* RightToLeft: Distributes the objects based on the distance between the right and left sides of the adjacent objects.
-* Left: Distributes the objects based on the distance between the left sides of the adjacent objects.
-* Right: Distributes the objects based on the distance between the right sides of the adjacent objects.
-* Center: Distributes the objects based on the distance between the center of the adjacent objects.
-* BottomToTop: Distributes the objects based on the distance between the bottom and top sides of the adjacent objects.
-* Top: Distributes the objects based on the distance between the top sides of the adjacent objects.
-* Bottom: Distributes the objects based on the distance between the bottom sides of the adjacent objects.
-* Middle: Distributes the objects based on the distance between the vertical center of the adjacent objects.
+The factors for distributing shapes using [DistributeOptions](../api/diagram/distributeOptions/) are listed as follows:
-The following code example illustrates how to execute the space commands.
+|Distribute option| Description|
+|----|----|
+| RightToLeft | Distributes the objects based on the distance between the right and left sides of the adjacent objects. |
+| Left | Distributes the objects based on the distance between the left sides of the adjacent objects. |
+| Right | Distributes the objects based on the distance between the right sides of the adjacent objects. |
+| Center | Distributes the objects based on the distance between the center of the adjacent objects. |
+| BottomToTop | Distributes the objects based on the distance between the bottom and top sides of the adjacent objects. |
+| Top | Distributes the objects based on the distance between the top sides of the adjacent objects. |
+| Bottom | Distributes the objects based on the distance between the bottom sides of the adjacent objects. |
+| Middle | Distributes the objects based on the distance between the vertical center of the adjacent objects. |
-```ts
-import {
- Diagram,
- NodeModel
-} from '@syncfusion/ej2-diagrams';
-//Initializes the node
-let node: NodeModel = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node2: NodeModel = {
- id: 'node2',
- width: 90,
- height: 60,
- offsetX: 240,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node3: NodeModel = {
- id: 'node3',
- width: 90,
- height: 60,
- offsetX: 170,
- offsetY: 150,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-//Initializes the diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-});
-diagram.appendTo('#element');
-let selArray: (NodeModel | ConnectorModel)[] = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Distributes space between the nodes
-diagram.distribute('RightToLeft', diagram.selectedItems.nodes);
-```
+### Objects
+
+Defines the objects to be distributed. This is an optional parameter. By default, all the nodes and connectors in the selected region of the diagram gets distributed.
+
+The following code example illustrates how the nodes are distributed using the `RightToLeft` option.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs14/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs14/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs14" %}
-## Sizing
+## Sizing commands
+
+The [`sameSize`](../api/diagram/#samesize) command enables you to size all selected nodes to match the size of the first selected object or the first node in the objects collection you provide as the second parameter. The parameters for the [`sameSize`](../api/diagram/#samesize) method are explained below.
+
+### Sizing options
-Sizing [`sameSize`](../api/diagram#sameSize) commands enable to equally size the selected nodes with respect to the first selected object.
+[`SizingOptions`](../api/diagram/sizingOptions) include:
-[`SizingOptions`](../api/diagram/sizingOptions) are as follows:
+|Sizing options|Description|
+|----|----|
+| Width | Adjusts the width of all objects to match the width of the first node in the objects collection. |
+| Height | Adjusts the height of all objects to match the height of the first node in the objects collection. |
+| Size | Adjusts both the width and height of all objects to match the size of the first node in the objects collection. |
-* Width: Scales the width of the selected objects.
-* Height: Scales the height of the selected objects.
-* Size: Scales the selected objects both vertically and horizontally.
+### Objects
+
+This optional parameter defines which objects should be scaled. By default, all nodes and connectors within the selected region of the diagram are scaled.
The following code example illustrates how to execute the size commands.
-```ts
-import {
- Diagram,
- NodeModel
-} from '@syncfusion/ej2-diagrams';
-//Initializes the node
-let node: NodeModel = {
- id: 'node1',
- width: 90,
- height: 60,
- offsetX: 100,
- offsetY: 100,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node2: NodeModel = {
- id: 'node2',
- width: 100,
- height: 60,
- offsetX: 100,
- offsetY: 170,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-let node3: NodeModel = {
- id: 'node3',
- width: 130,
- height: 60,
- offsetX: 100,
- offsetY: 230,
- style: {
- fill: '#6BA5D7',
- strokeColor: 'white',
- strokeWidth: 1
- },
-};
-//Initializes the diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
- nodes: [node, node2, node3]
-});
-diagram.appendTo('#element');
-let selArray: (NodeModel)[] = [];
-selArray.push(diagram.nodes[0], diagram.nodes[1], diagram.nodes[2]);
-//Selects the nodes
-diagram.select(selArray);
-//Resizes the selected nodes with the same width
-diagram.sameSize('Width', diagram.selectedItems.nodes);
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs15/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs15" %}
-
-## Clipboard
+
-Clipboard commands are used to cut, copy, or paste the selected elements. Refer to the following link which shows how to use clipboard methods in the diagram.
+## Clipboard commands
-* Cuts the selected elements from the diagram to the diagram’s clipboard, [`cut`](../api/diagram#cut).
+Clipboard commands are used to cut, copy, or paste selected elements in the diagram using the [`cut`](../api/diagram/#cut), [`copy`](../api/diagram/#copy), [`paste`](../api/diagram/#paste) methods. You can also use keyboard shortcuts for these actions. For detailed information on using these methods refer the below table.
-* Copies the selected elements from the diagram to the diagram’s clipboard, [`copy`](../api/diagram#copy).
+| Command (Shortcut key) | Description |
+|---------|-------------|
+| `Cut` (CTRL+X) | Removes the selected elements from the diagram and places them onto the diagram’s clipboard. This operation is performed using the [`cut`](../api/diagram/#cut) method. |
+| `Copy`(CTRL+C) | Duplicates the selected elements and places them onto the diagram’s clipboard without removing them from their original location. Use the [`copy`](../api/diagram/#copy) method for this operation. |
+| `Paste`(CTRL+V) | Inserts the elements stored on the diagram’s clipboard (nodes and connectors) into the diagram. This can be done using the [`paste`](../api/diagram/#paste) method. |
-* Pastes the diagram’s clipboard data (nodes/connectors) into the diagram, [`paste`](../api/diagram#paste).
+The [`paste`](../api/diagram/#paste) method optionally accepts a collection of nodes or connectors to be added to the diagram.
The following code illustrates how to execute the clipboard commands.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs7/index.ts %}
+{% include code-snippet/diagram/commands-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs7/index.html %}
+{% include code-snippet/diagram/commands-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs7" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs1" %}
+
+## Grouping commands
+
+Grouping Commands are used to group or ungroup selected elements in the diagram. Grouping commands help in managing and organizing multiple elements by combining them into a single group or separating them into individual elements. You can also use keyboard shortcuts for these actions. The following table provides more details on these commands:
+
+| Commands (Shortcut key) | Description|
+|----|----|
+| [`Group`](../api/diagram/#group) (CTRL+G) | Combines the selected nodes and connectors into a single group, allowing you to move, resize, or apply other operations to all grouped elements as a unit. |
+| [`Ungroup`](../api/diagram/#ungroup) (CTRL+Shift+U) | Splits a previously grouped set of nodes and connectors into individual elements, enabling you to modify or manipulate them separately. |
-## Grouping
+The following code examples demonstrate how to use the grouping commands in diagram:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs2" %}
-**Grouping commands** are used to group/ungroup the selected elements on the diagram. Refer to the following link which shows how to use grouping commands in the diagram.
+## Rotate commands
-[`Group`](../api/diagram#group) the selected nodes and connectors in the diagram.
+The [`rotate`](../api/diagram/#rotate) commands in the diagram allow users to rotate selected elements by specified angles. These commands are useful for adjusting the rotate angle of nodes or shapes within the diagram.
-[`Ungroup`](../api/diagram#ungroup) the selected nodes and connectors in the diagram.
+| Parameter | Type | Description |
+|----------|-------|-------------|
+| obj | NodeModel / ConnectorModel/ SelectorModel | The objects to be rotated. |
+| angle | number | The angle by which the objects should be rotated (in degrees). |
+| pivot (optional) | PointModel| The reference point with respect to which the objects will be rotated. |
+| rotateUsingHandle (optional) | boolean | Whether to rotate using the handle. |
-The following code illustrates how to execute the grouping commands.
+You can also use CTRL+R to rotate clockwise and CTRL+L to rotate anti-clockwise. The following example shows how to rotate nodes in clockwise and anti-clockwise direction.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs8/index.ts %}
+{% include code-snippet/diagram/commands-cs19/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs8/index.html %}
+{% include code-snippet/diagram/commands-cs19/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs8" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs19" %}
+
## Z-Order command
-**Z-Order commands** enable you to visually arrange the selected objects such as nodes and connectors on the page.
+**Z-Order commands** allow you to control the stacking order of selected objects, such as nodes and connectors, on the diagram page.
-### bringToFront command
+### Bring to front command
-The [`bringToFront`](../api/diagram#bringToFront) command visually brings the selected element to front over all the other overlapped elements. The following code illustrates how to execute the `bringToFront` command.
+The [`bringToFront`](../api/diagram/#bringtofront) command moves the selected element to the front, placing it above all other elements in the diagram. The following code illustrates how to use the `bringToFront` command.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs9/index.ts %}
+{% include code-snippet/diagram/commands-cs3/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs9/index.html %}
+{% include code-snippet/diagram/commands-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs9" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs3" %}
-### sendToBack command
+### Send to back command
-The [`sendToBack`](../api/diagram#sendToBack) command visually moves the selected element behind all the other overlapped elements. The following code illustrates how to execute the `sendToBack` command.
+The [`sendToBack`](../api/diagram/#sendtoback) command moves the selected element to the back, placing it behind all other elements in the diagram. The following code illustrates how to use the `sendToBack` command.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs10/index.ts %}
+{% include code-snippet/diagram/commands-cs4/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs10/index.html %}
+{% include code-snippet/diagram/commands-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs10" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs4" %}
-### moveForward command
+### Move forward command
-The [`moveForward`](../api/diagram#moveForward) command visually moves the selected element over the nearest overlapping element. The following code illustrates how to execute the `moveForward` command.
+The [`moveForward`](../api/diagram/#moveforward) command moves the selected element one step forward in the stack, placing it above the nearest overlapping element. The following code illustrates how to use the `moveForward` command.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs11/index.ts %}
+{% include code-snippet/diagram/commands-cs5/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs11/index.html %}
+{% include code-snippet/diagram/commands-cs5/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs11" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs5" %}
-### sendBackward command
+### send backward command
-The [`sendBackward`](../api/diagram#sendBackward) command visually moves the selected element behind the underlying element. The following code illustrates how to execute the `sendBackward` command.
+The [`sendBackward`](../api/diagram/#sendbackward) command moves the selected element one step backward in the stack, placing it behind the underlying element. The following code illustrates how to use the `sendBackward` command.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/commands-cs12/index.ts %}
+{% include code-snippet/diagram/commands-cs6/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/commands-cs12/index.html %}
+{% include code-snippet/diagram/commands-cs6/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/commands-cs12" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs6" %}
+
+
+The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction.md/#keyboard).
## Zoom
-The [`zoom`](../api/diagram#zoom) command is used to zoom-in and zoom-out the diagram view.
+The [`zoom`](../api/diagram/#zoom) command is used to zoom-in and zoom-out the diagram view.
-The following code illustrates how to zoom-in/zoom out the diagram.
+The following code illustrates how to zoom-in the diagram.
-```ts
+```javascript
import {
Diagram
} from '@syncfusion/ej2-diagrams';
//Initializes the diagram component
-let diagram: Diagram = new Diagram({
+let diagram:Diagram = new Diagram({
width: '100%',
height: '350px',
});
diagram.appendTo('#element');
-// Sets the zoomFactor
-//Defines the focusPoint to zoom the diagram with respect to any point
+// parameter 1 - Sets the zoomFactor
+// parameter 2 - Defines the focusPoint to zoom the diagram with respect to any point
//When you do not set focus point, zooming is performed with reference to the center of current diagram view.
diagram.zoom(1.2, {
x: 100,
y: 100
});
-
```
+For more information about zoom refer to the [zoom](./scroll-settings.md/#update-zoom-at-runtime)
+
## Nudge command
-The [`nudge`](../api/diagram#nudge) commands move the selected elements towards up, down, left, or right by 1 pixel.
+The [`nudge`](../api/diagram/#nudge) command moves the selected elements up, down, left, or right by 1 pixel. The parameters of [`nudge`](../api/diagram/#nudge) method is explained below.
-[`NudgeDirection`](../api/diagram/nudgeDirection) nudge command moves the selected elements towards the specified direction by 1 pixel, by default.
+| Parameter | Type | Description |
+|--------------|-----------|-----------|
+| direction |[`NudgeDirection`](../api/diagram/nudgeDirection/) | Defines the direction in which the objects should be moved. |
+| x (optional) | number | The horizontal distance by which the selected objects should be moved. |
+| y (optional) | number | The vertical distance by which the selected objects should be moved. |
+| type (optional) | string | A string that defines the type of nudge action. |
-The accepted values of the argument "direction" are as follows:
+The accepted values for the "direction" argument are as follows:
-* Up: Moves the selected elements towards up by the specified delta value.
-* Down: Moves the selected elements towards down by the specified delta value.
-* Left: Moves the selected elements towards left by the specified delta value.
-* Right: Moves the selected elements towards right by the specified delta value.
+* Up: Moves the selected elements up by the specified delta value.
+* Down: Moves the selected elements down by the specified delta value.
+* Left: Moves the selected elements left by the specified delta value.
+* Right: Moves the selected elements right by the specified delta value.
-The following code illustrates how to execute nudge command.
+The following code illustrates how to execute the nudge command.
-```ts
-import {
- Diagram
-} from '@syncfusion/ej2-diagrams';
-//Initializes the Diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
-});
-diagram.appendTo('#element');
-//Nudges to right
-diagram.nudge('Right');
-
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs7" %}
-## Nudge by using arrow keys
+### Nudge by using arrow keys
-The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel.
+The arrow keys can be used to move the selected elements up, down, left, or right by 1 pixel.
-Nudge commands are particularly useful for accurate placement of elements.
+Nudge commands are particularly useful for accurate placement of elements.
## BringIntoView
-The [`bringIntoView`](../api/diagram#bringIntoView) command brings the specified rectangular region into the viewport of the diagram.
+The [`bringIntoView`](../api/diagram/#bringintoview) command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view.
-The following code illustrates how to execute the `bringIntoView` command.
+The [`bringIntoView`](../api/diagram/#bringintoview) method takes a single parameter, an object that defines the rectangular region to bring into view. This object should include properties such as x, y, width, and height to specify the exact region to be made visible.
-```ts
-import {
- Diagram,
- Rect
-} from '@syncfusion/ej2-diagrams';
-//Initializes the diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
-});
-diagram.appendTo('#element');
-//Brings the specified rectangular region of the diagram content to the viewport of the page.
-let bound: Rect = new Rect(200, 400, 500, 400);
-diagram.bringIntoView(bound);
+The following code illustrates how to execute the bringIntoView command:
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs8/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs8" %}
## BringToCenter
-The [`bringToCenter`](../api/diagram#bringToCenter) command brings the specified rectangular region of the diagram content to the center of the viewport.
+The [`bringToCenter`](../api/diagram/#bringtocenter) command centers the specified rectangular region of the diagram content within the viewport.
-The following code illustrates how to execute the `bringToCenter` command.
+The [`bringToCenter`](../api/diagram/#bringtocenter) method takes a single parameter, an object that defines the rectangular region to be centered. This object should include properties such as x, y, width, and height to specify the exact region to be brought to the center.
-```ts
-import {
- Diagram,
- Rect
-} from '@syncfusion/ej2-diagrams';
-//Initializes the Diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
-});
-diagram.appendTo('#element');
-//Brings the specified rectangular region of the Diagram content to the center of the viewport.
-let bound: Rect = new Rect(200, 400, 500, 400);
-diagram.bringToCenter(bound);
+The following code illustrates how to execute the bringToCenter command.
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs9/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs9" %}
+
+## FitToPage
+
+The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](api/diagram/iFitOptions/), which specifies the options for fitting the diagram to the page.
-## FitToPage command
+### FitOptions
-The [`fitToPage`](../api/diagram#fitToPage) command helps to fit the diagram content into the view with respect to either width, height, or at the whole.
+The [`mode`](../api/diagram/fitModes/) parameter defines how the diagram should fit into the viewport—horizontally, vertically, or based on the entire bounds of the diagram.
-The [`mode`](../api/diagram/fitModes#modes) parameter defines whether the diagram has to be horizontally/vertically fit into the viewport with respect to width, height, or entire bounds of the diagram.
+The [`region`](../api/diagram/diagramRegions/) parameter specifies the region of the diagram that should be fit within viewport.
-The [`region`](../api/diagram/diagramRegions#region) parameter defines the region that has to be drawn as an image.
+The [`margin`](../api/diagram/marginModel/) parameter sets the margin around the diagram content that should be included in the view.
-The [`margin`](../api/diagram/iFitOptions#margin) parameter defines the region/bounds of the diagram content that is to be fit into the view.
+The [`canZoomIn`](../api/diagram/iFitOptions/#canzoomin) parameter enables or disables zooming in to fit smaller content into a larger viewport.
-The [`canZoomIn`](../api/diagram/iFitOptions#canZoomIn) parameter enables/disables zooming to fit the smaller content into a larger viewport.
+The [`canZoomOut`](../api/diagram/iFitOptions/#canzoomout) parameter enables or disables zooming out to fit larger content into a smaller viewport.
-The [`customBounds`](../api/diagram/iFitOptions#customBounds) parameter the custom region that has to be fit into the viewport.
+The [`customBounds`](../api/diagram/iFitOptions/#custombounds) parameter defines a custom region that should be fit into the viewport.
The following code illustrates how to execute `FitToPage` command.
-```ts
-import {
- Diagram
-} from '@syncfusion/ej2-diagrams';
-//Initializes the Diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
-});
-diagram.appendTo('#element');
-//fit the diagram to the page with respect to mode and region
-diagram.fitToPage({
- mode: 'Page',
- region: 'Content',
- margin: {
- bottom: 50
- },
- canZoomIn: false
-});
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs10/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs10" %}
## Command manager
-Diagram provides support to map/bind command execution with desired combination of key gestures. Diagram provides some built-in commands.
-[`CommandManager`](../api/diagram/commandManager#commandManager) provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized.
+The Diagram provides support for mapping or binding command execution to specific key gestures. It includes built-in commands and allows for the definition of custom commands through the [`commandManager`](../api/diagram/commandManagerModel/). Custom commands are executed when the specified key gesture is recognized.
-## Custom command
+### Custom Command
-To define a custom command, specify the following properties:
-* [`execute`](../api/diagram/command#execute): A method to be executed.
-* [`canExecute`](../api/diagram/command#canexecute): A method to define whether the command can be executed at the moment.
-* [`gesture`](../api/diagram/keyGestureModel#gesture): A combination of [`keys`](../api/diagram/keys#key) and [`KeyModifiers`](../api/diagram/keyModifiers#keymodifiers).
-* [`parameter`](../api/diagram/command#parameter): Defines any additional parameters that are required at runtime.
-* [`name`](../api/diagram/command#name): Defines the name of the command.
+To define a custom command, you need to specify the following properties:
-To explore the properties of custom commands, refer to [`Commands`](../api/diagram/command#commands).
+* [`execute`](../api/diagram/commandModel/#execute): A method to be executed when the command is triggered.
+* [`canExecute`](../api/diagram/commandModel/#canexecute): A method that determines whether the command can be executed at a given moment.
+* [`gesture`](../api/diagram/keyGestureModel/): A combination of [`keys`](../api/diagram/keys/) and [`KeyModifiers`](../api/diagram/keyModifiers/) that defines the key gesture for the command.
+* [`parameter`](../api/diagram/commandModel/#parameter): Any additional parameters required at runtime for the command.
+* [`name`](../api/diagram/commandModel/#name): The name of the command.
-The following code example illustrates how to define a custom command.
+To explore the properties of custom commands, refer to [`Commands`](../api/diagram/commandModel/).
-```ts
-import {
- Diagram,
- Keys,
- KeyModifiers
-} from '@syncfusion/ej2-diagrams';
-//Initializes the Diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
- commandManager: {
- commands: [{
- name: 'customCopy',
- parameter: 'node',
- //Method to define whether the command can be executed at the current moment
- canExecute: function() {
- //Defines that the clone command can be executed, if and only if the selection list is not empty.
- if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
- return true;
- } else {
- return false;
- }
- },
- //Command handler
- execute: function() {
- //Logic to clone the selected element
- diagram.copy();
- diagram.paste();
- diagram.dataBind();
- },
- //Defines that the clone command has to be executed on the recognition of key press.
- gesture: {
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt
- }
- }]
- },
-});
-diagram.appendTo('#element');
-```
+The following code example illustrates how to use the command manager to clone a node and change the fill color of a node while pressing `G` and `Shift+G` or `Alt+G`, respectively:
-## Modify the existing command
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs17/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs17/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs17" %}
-When any one of the default commands is not desired, they can be disabled. To change the functionality of a specific command, the command can be completely modified.
+### Disable/Modify the existing command
-The following code example illustrates how to disable a command and how to modify the built-in commands.
+When any of the default commands are not desired, they can be disabled. Additionally, if you need to change the functionality of a specific command, it can be completely modified.
-```ts
-import {
- Diagram,
- Keys,
- KeyModifiers
-} from '@syncfusion/ej2-diagrams';
-//Initializes the diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '350px',
- //Disables the nudging commands
- commandManager: {
- commands: {
- //Assigns null value to an existing command and disables its execution
- "nudgeUp": null,
- "nudgeDown": null,
- "nudgeRight": null,
-
- //Modifies the existing command - nudgeLeft
- "nudgeLeft": {
- canExecute: function(args){
- if (args.model.selectedItems.length) {
- return true;
- }
- }
- },
- //Command handler
- execute: function(args) {
- diagram.nudge("left");
- },
-
- gesture: {
- key: Keys.Left
- }
- }
- }
-});
-diagram.appendTo('#element');
+The following code example illustrates how to disable the default cut and delete commands using CTRL+X and Delete keys, and how to modify the copy command to clone a node using CTRL+C:
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/commands-cs18/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/commands-cs18/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/commands-cs18" %}
+
+## Undo-redo
+
+Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo.md)
## See Also
diff --git a/ej2-javascript/diagram/ts/connector-customization.md b/ej2-javascript/diagram/ts/connector-customization.md
index 01ebcadd7..6ad549326 100644
--- a/ej2-javascript/diagram/ts/connector-customization.md
+++ b/ej2-javascript/diagram/ts/connector-customization.md
@@ -257,6 +257,21 @@ The property [`maxSegmentThumb`](../api/diagram/connector#maxSegmentThumb) is us
+## Reset segments
+
+The [`resetSegments`](../api/diagram/#resetsegments) method resets the segments of connectors to their default state based on their connection points. This operation removes any custom segments and restores the connectors to their original configuration. The following example demonstrates how to reset connector segments at runtime.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/connectors-resetSeg/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-resetSeg/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-resetSeg" %}
+
## Enable Connector Splitting
The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) as true. The default value of the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) is false
@@ -276,3 +291,20 @@ The following code illustrates how to split the connector and create a connectio
+### Preserve connector style while connector splitting
+
+When splitting a connector using [`enableConnectorSplit`](../api/diagram/enableConnectorSplit), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles.
+
+The following example demonstrates how to apply the same style of the original connector to the newly added connector:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/connectors-split/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-split/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-split" %}
+
diff --git a/ej2-javascript/diagram/ts/connector-events.md b/ej2-javascript/diagram/ts/connector-events.md
index 25e1475fd..870cb9d92 100644
--- a/ej2-javascript/diagram/ts/connector-events.md
+++ b/ej2-javascript/diagram/ts/connector-events.md
@@ -13,12 +13,25 @@ domainurl: ##DomainURL##
Diagram provides some events support for connectors that triggers when interacting with the connector.
+## Click event
-## Selection change event.
+Triggers when the connector is clicked. The following code example explains how to get the [`click`](../api/diagram/iClickEventArgs/) event in the diagram.
-When selecting/unselecting the connector, the selection chang event will be triggered.
-The following code example explains how to get the [`selection change`](../api/diagram/iselectionchangeeventargs/) event in the diagram.
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-clickEvent" %}
+
+## Selection change event
+When selecting/unselecting the connector, the selection change event will be triggered.
+The following code example explains how to get the [`selection change`](../api/diagram/iselectionchangeeventargs/) event in the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -31,7 +44,19 @@ The following code example explains how to get the [`selection change`](../api/d
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SelectEvent" %}
-## Position change event.
+ You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](../api/diagram/iSelectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+```ts
+ selectionChange: function (args: ISelectionChangeEventArgs) {
+ if (args.state == 'Changing') {
+ //Prevents selection
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Position change event
Triggers when the connector's position is changed in diagram.
The following code example explains how to get the [`position change`](../api/diagram/iDraggingEventArgs/) event in the diagram.
@@ -48,7 +73,19 @@ The following code example explains how to get the [`position change`](../api/di
{% previewsample "page.domainurl/code-snippet/diagram/connectors-PositionEvent" %}
-## Connection change event.
+ You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](../api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ positionChange: function (args: IDraggingEventArgs) {
+ if (args.state == 'Progress') {
+ //Prevents dragging
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Connection change event
Triggers when the connector’s source or target point is connected or disconnected from the source or target.
The following code example explains how to get the [`connection change`](../api/diagram/iConnectionChangeEventArgs/) event in the diagram.
@@ -64,7 +101,7 @@ The following code example explains how to get the [`connection change`](../api/
{% previewsample "page.domainurl/code-snippet/diagram/connectors-ConnectionEvent" %}
-## Source Point change event.
+## Source Point change event
Triggers when the connector's source point is changed.
The following code example explains how to get the [`source Point change`](../api/diagram/iendchangeeventargs/) event in the diagram.
@@ -80,7 +117,21 @@ The following code example explains how to get the [`source Point change`](../ap
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SourcePointEvent" %}
-## Target Point change event.
+ You can prevent source point dragging by setting the `cancel` property of [`EndChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+```javascript
+
+ sourcePointChange: function (args: IEndChangeEventArgs) {
+ if (args.state === 'Progress') {
+ //Prevents source point dragging
+ args.cancel = true;
+ //Customize
+ }
+ },
+
+```
+
+## Target Point change event
Triggers when the connector's target point is changed.
The following code example explains how to get the [`target Point change`](../api/diagram/iEndChangeEventArgs/) event in the diagram.
@@ -96,11 +147,26 @@ The following code example explains how to get the [`target Point change`](../ap
{% previewsample "page.domainurl/code-snippet/diagram/connectors-TargetPointEvent" %}
-## Segment Collection Change event.
+ You can prevent target point dragging by setting the `cancel` property of [`EndChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+```javascript
+
+targetPointChange: function (args: IEndChangeEventArgs) {
+ if (args.state === 'Progress') {
+ //Prevents target point dragging
+ args.cancel = true;
+ //Customize
+ }
+ },
+
+```
+
+## Segment Collection Change event
Triggers when the connector's segments added or removed at runtime.
-The following code example explains how to get the [`segment collection change`](../api/diagram/isegmentcollectionchangeeventargs/) event in the diagram.
+The following code example explains how to get the [`segment collection change`](../api/diagram/isegmentcollectionchangeeventargs/) event in the diagram.
+Use `CTRL+Shift+Click` on connector to add/remove segments.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -113,7 +179,7 @@ The following code example explains how to get the [`segment collection change`]
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SegmentEvent" %}
-## Segment Change event.
+## Segment Change event
Triggers when the connector's segments were adjusted or edited.
The following code example explains how to get the [`segment change`](../api/diagram/isegmentchangeeventargs/) event in the diagram.
@@ -130,6 +196,18 @@ The following code example explains how to get the [`segment change`](../api/dia
{% previewsample "page.domainurl/code-snippet/diagram/connectors-SegmentEditEvent" %}
+ You can prevent segment editing by setting the `cancel` property of [`SegmentChangeEventArgs`](../api/diagram/iEndChangeEventArgs/) to true, as shown in the code snippet below.
+
+``` javascript
+ segmentChange: function (args: ISegmentChangeEventArgs) {
+ if (args.state === 'Start') {
+ //Prevents the segment editing
+ args.cancel = true;
+ }
+ },
+
+```
+
## Collection change event
Triggers when the connector is added or removed from diagram.
@@ -146,19 +224,14 @@ The following code example explains how to get the [`collection change`](../api/
{% previewsample "page.domainurl/code-snippet/diagram/connectors-CollectionEvent" %}
-## Get Connector defaults
+You can prevent changes to the diagram collection, such as adding or deleting connectors, by setting the `cancel` property of [`CollectionChangeEventArgs`](../api/diagram/iCollectionChangeEventArgs/) to true, as shown in the code snippet below.
-Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties.
+``` javascript
+collectionChange: function (args: ICollectionChangeEventArgs) {
+ if (args.state === 'Changing') {
+ //Prevents collection change - Prevents Adding or deleting connectors
+ args.cancel = true;
+ }
+ },
-The following code example explains how to customize the connector using [`getConnectorDefaults`](../api/diagram/#getconnectorobject).
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/connectors-getConDef/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/connectors-getConDef/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/connectors-getConDef" %}
+````
diff --git a/ej2-javascript/diagram/ts/connector-interaction.md b/ej2-javascript/diagram/ts/connector-interaction.md
index d83ed8b8f..598684a94 100644
--- a/ej2-javascript/diagram/ts/connector-interaction.md
+++ b/ej2-javascript/diagram/ts/connector-interaction.md
@@ -55,7 +55,9 @@ The connector can be selected by clicking it. When the connector is selected, ci
-The following code example shows how to drag connector end point at runtime.
+You can also update the endPoints of diagram by using [`dragSourceEnd`](../api/diagram/#dragsourceend) and [`dragTargetEnd`](../api/diagram/#dragtargetend) methods of diagram.
+
+The following code example shows the ways to drag connector end point at runtime.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
diff --git a/ej2-javascript/diagram/ts/connector-orthogonal.md b/ej2-javascript/diagram/ts/connector-orthogonal.md
index f17bdd5c6..69a0367ac 100644
--- a/ej2-javascript/diagram/ts/connector-orthogonal.md
+++ b/ej2-javascript/diagram/ts/connector-orthogonal.md
@@ -71,7 +71,7 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w
## How to customize Orthogonal Segment Thumb Shape
-The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the rhombus shape by default. The [`segmentThumbShape`](../api/diagram#segmentThumbShape-SegmentThumbShapes) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided:
+The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the circle shape by default. The [`segmentThumbShape`](../api/diagram#segmentThumbShape-SegmentThumbShapes) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided:
| Shape name | Shape |
|-------- | -------- |
diff --git a/ej2-javascript/diagram/ts/connector-straight.md b/ej2-javascript/diagram/ts/connector-straight.md
index 6c34401e7..c7e486ce9 100644
--- a/ej2-javascript/diagram/ts/connector-straight.md
+++ b/ej2-javascript/diagram/ts/connector-straight.md
@@ -38,11 +38,11 @@ The [`point`](../api/diagram/straightSegment#point-PointModel) property of strai
### Straight segment editing
-* End point of each straight segment is represented by a thumb that enables to edit the segment.
-* Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
-* Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
+End point of each straight segment is represented by a thumb that enables to edit the segment.
+Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
+Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). You can also add/remove segments by using the [`editSegment`](../api/diagram/#editsegment) method of diagram.
-Refer the sample below
+The following example shows how to add segments at runtime for the straight connector.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
diff --git a/ej2-javascript/diagram/ts/connectors.md b/ej2-javascript/diagram/ts/connectors.md
index b5962b25f..a04df5b30 100644
--- a/ej2-javascript/diagram/ts/connectors.md
+++ b/ej2-javascript/diagram/ts/connectors.md
@@ -15,16 +15,19 @@ Connectors are objects used to create link between two points, nodes or ports to
## Create connector
-Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](../api/diagram/connector), refer to [`Connector Properties`](../api/diagram/connector).
+Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a [`connector`](../api/diagram/connector), refer to [`Connector Properties`](../api/diagram/connector). The [`id`](../api/diagram/connectorModel/#id) property of a connector is used to define its unique identifier and can later be used to find the connector at runtime for customization.
``` javascript
-var connector = { id: "connector1",
+let connector = { id: "connector1",
type:'Straight',
sourcePoint: {x: 100,y: 100},
targetPoint: { x: 200,y: 200}
}
```
+
+N> Note: There should not be any white-spaces in the ID string while setting the ID.
+
## Add connectors through connectors collection
The [`sourcePoint`](../api/diagram/connector#sourcepoint-PointModel) and [`targetPoint`](../api/diagram/connector#targetpoint-PointModel) properties of connector allow you to define the end points of a connector.
@@ -147,6 +150,23 @@ The following code example illustrates how to clone a connector
{% previewsample "page.domainurl/code-snippet/diagram/connectors-clone" %}
+## Get Connector defaults
+
+Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties.
+
+The following code example explains how to customize the connector using [`getConnectorDefaults`](..api/diagram/#getconnectordefaults).
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/connectors-getConDef/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/connectors-getConDef/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/connectors-getConDef" %}
+
## Connections
### Connection with nodes
diff --git a/ej2-javascript/diagram/ts/export.md b/ej2-javascript/diagram/ts/export.md
index f6d023e18..7c2905dfe 100644
--- a/ej2-javascript/diagram/ts/export.md
+++ b/ej2-javascript/diagram/ts/export.md
@@ -11,9 +11,9 @@ domainurl: ##DomainURL##
# Export in ##Platform_Name## Diagram control
-Diagram provides support to export its content as image/svg files. The client-side method [`exportDiagram`](../api/diagram#exportDiagram) helps to export the diagram. The following code illustrates how to export the diagram as image.
+Diagram provides support to export its content as image/svg files. The [`exportDiagram`](../api/diagram#exportDiagram) method of diagram helps to export the diagram. The following code illustrates how to export the diagram as image.
-N> To use Print and Export, you need to inject `PrintAndExport` in the diagram.
+N> To Export diagram, you need to inject `PrintAndExport` in the diagram.
@@ -30,61 +30,74 @@ diagram.exportDiagram(options);
## Exporting options
-Diagram provides support to export the desired region of the diagram to desired formats.
+The diagram provides support to export the desired region of the diagram to various formats. The following table shows the list of [`exportOptions`](../api/diagram/iExportOptions/) in diagram.
-## File Name
+| Name | Type | Description|
+|-------- | -------- | -------- |
+| bounds | object | Sets the bounds that has to be exported |
+| region | enum | Sets the region of the diagram to be exported. |
+| fileName | string | Sets the file name of the exported image. |
+| format | string | Sets the export image format. |
+| mode | string | Sets the Mode for the file to be downloaded. |
+| margin | object | Sets the margin of the page to be exported. |
+| stretch| enum | Sets the aspect ratio of the exported image.|
+| multiplePage | boolean | exports the diagram into multiple pages. |
+| pageWidth | number | Sets the page width of the diagram while exporting the diagram into multiple pages. |
+| pageHeight| number | Sets the page height of the diagram while exporting the diagram into multiple pages.|
+| pageOrientation | enum | Sets the orientation of the page. |
+
+### File Name
[`FileName`](../api/diagram/iExportOptions#fileName-string) is the name of the file to be downloaded. By default, the file name is set to **Diagram**.
-## Format
+### Format
-[`Format`](../api/diagram/iExportOptions#format-fileformat) is to specify the type/format of the exported file. By default, the diagram is exported as .jpg format. You can export diagram to the following formats:
+[`Format`](../api/diagram/iExportOptions#format-fileformat) specifies the type/format of the exported file. By default, the diagram is exported in .jpg format. You can export the diagram to the following formats:
* JPG
* PNG
* BMP
* SVG
-```ts
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-1" %}
-let diagram: Diagram = new Diagram({
- width: 1500, height: 1500
-});
-diagram.appendTo('#element');
-let options: IExportOptions = {};
-options.mode = 'Download';
-options.format = 'SVG';
-diagram.exportDiagram(options);
-```
-## Margin
+### Margin
-[`Margin`](../api/diagram/iExportOptions#margin-marginmodel) specifies the amount of space that has to be left around the diagram.
+The [`margin`](../api/diagram/iExportOptions#margin-marginmodel) specifies the amount of space that has to be left around the diagram while exporting.
-
+The following code example demonstrates how to set margin for the exported image.
-```ts
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-2" %}
-let diagram: Diagram = new Diagram({
- width: 1500, height: 1500
-});
-diagram.appendTo('#element');
-let options: IExportOptions = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-diagram.exportDiagram(options);
-```
+### Mode
-## Mode
+The [`mode`](../api/diagram/iExportOptions#mode-exportmodes) option specifies whether to export the diagram as an image or to return the base64 data of the diagram. The available export modes are:
-[`Mode`](../api/diagram/iExportOptions#mode-exportmodes) specifies whether the diagram will be exported as files or get base64 data (ImageURL/SVG). The export options are as follows:
+* Download: Exports and downloads the diagram as an image or SVG file.
+* Data: Returns a base64 string representation of the diagram.
-* Download: Exports and downloads the diagram as image/SVG.
-* Data: return a base64 string.
+The following code example demonstrates how to export the diagram as raw data.
-The following code example illustrates how to export the diagram as raw data.
+
```ts
@@ -92,105 +105,85 @@ let diagram: Diagram = new Diagram({
width: 1500, height: 1500
});
diagram.appendTo('#element');
-let options: IExportOptions = {};
-options.mode = 'Data';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-let base64data = diagram.exportDiagram(options);
+ let options: IExportOptions = {};
+ options.mode = 'Data';
+ options.format = 'JPG';
+ let base64data = diagram.exportDiagram(options);
```
-## Region
+### Region
-You can export any particular [`region`](../api/diagram/iExportOptions#region-diagramregions) of the diagram and it is categorized into three types as follows.
+Exporting particular region of diagram is possible by using the [`region`](../api/diagram/iExportOptions/#region) property of the [`exportOptions`](../api/diagram/iExportOptions/). The available export regions are listed in the table below.
-* PageSettings
-* Content
-* CustomBounds
+| Region | Description |
+|-------- | -------- |
+| PageSettings | The region to be exported will be based on the given page settings |
+| Content | Only the content of the diagram control will be exported |
+| CustomBounds | The region to be exported will be explicitly defined |
-## PageSettings
+The following example shows how to export diagram with different regions.
-Diagram is exported based on the given PageSettings width and height. The Properties available in page settings are as follows.
-* width
-* height
-* margin
-* orientation
-* boundaryConstraints
-* background
-* multiplePage
-* showPageBreaks
-* fitOptions
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-3" %}
-### boundaryConstraints
+N> The [`bounds`](../api/diagram/iExportOptions/#bounds) property of [`exportOptions`](../api/diagram/iExportOptions/) should be defined to export the diagram with CustomBounds region.
-Defines the editable region of the diagram.
-* Infinity - Allow the interactions to take place at infinite height and width.
-* Diagram - Allow the interactions to take place around the diagram’s height and width.
-* Page - Allow the interactions to take place around the page’s height and width.
+### MultiplePage
-### multiplePage
+When the [`multiplePage`](../api/diagram/iExportOptions/#multiplepage) option is set to false, the diagram is exported as a single image. When it set to true, the diagram is exported as multiple images based on its width and height.
-While setting multiple pages as false, the diagram is exported as a single image and while setting multiple pages as true, the diagram is exported as a separate image based on width and height.
+The following code example demonstrates how to export the diagram as multiple images.
-The following code example illustrates how to export the region occupied by the diagram elements.
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-4" %}
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-options.region = 'PageSettings';
-diagram.exportDiagram(options);
-```
+### Export image
-## Content
+You can pass the base64 data of an image to the [`exportImage`](../api/diagram/#exportimage) method to export it directly. The following example shows how to export base64 data using the `exportImage` method.
-The diagram content alone will be exported as an image.
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-5" %}
-The following code example illustrates how to export the region occupied by the diagram elements.
+### Get diagram content
-```javascript
-var diagram = new ej.diagrams.Diagram({
- width: 1500, height: 1500
-},'#element');
-var options = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'format';
-options.format = 'SVG';
-options.region = 'Content';
-diagram.exportDiagram(options);
-```
-
-## Custom bounds
-
-Diagram provides support to export any specific region of the diagram by using [`bounds`](../api/diagram/iExportOptions#bounds-rect).
-
-The following code example illustrates how to export the region occupied by the diagram elements.
+To get the html diagram content, the [`getDiagramContent`](../api/diagram/#getdiagramcontent) method is used. the following example shows how to get the diagram content at runtime.
-```ts
-let diagram: Diagram = new Diagram({
- width: 1500, height: 1500
-});
-diagram.appendTo('#element');
-let options: IExportOptions = {};
-options.mode = 'Download';
-options.margin = { left: 10, right: 10, top: 10, bottom: 10};
-options.fileName = 'region';
-options.format = 'SVG';
-options.region = 'CustomBounds';
-options.bounds.x = 10;
-options.bounds.y = 10;
-options.bounds.height = 100;
-options.bounds.width = 100;
-diagram.exportDiagram(options);
-```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/export-cs-6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/export-cs-6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/export-cs-6" %}
-## Export diagram with stretch option
+### Export diagram with stretch option
Diagram provides support to export the diagram as image for [`stretch`](../api/diagram/iExportOptions#stretch-stretch) option. The exported images will be clearer but larger in file size.
@@ -211,37 +204,6 @@ options.stretch = 'Stretch';
diagram.exportDiagram(options);
```
-## Print
-
-The client-side method [`print`](../api/diagram#print) helps to print the diagram as image.
-
-| Name | Type | Description|
-|-------- | -------- | -------- |
-| region | enum | Sets the region of the diagram to be printed. |
-| bounds | object | Prints any custom region of diagram. |
-| stretch| enum | Resizes the diagram content to fill its allocated space and printed.|
-| multiplePage | boolean | Prints the diagram into multiple pages. |
-| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. |
-| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.|
-| pageOrientation | enum | Sets the orientation of the page. |
-
-The following code example illustrates how to export the region occupied by the diagram elements.
-
-```ts
-let diagram: Diagram = new Diagram({
- width: 1500, height: 1500
-});
-diagram.appendTo('#element');
-let options: IExportOptions = {};
- options.mode = 'Download';
- options.region = 'PageSettings';
- options.multiplePage = true;
- options.pageHeight = 300;
- options.pageWidth = 300;
- diagram.print(options);
-```
-
## Limitations
-We have a limitation in exporting the image with HTML and Native node. So, Syncfusion Essential PDF library is used, which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine. You can refer to the following KB link for more details.
-[`https://www.syncfusion.com/kb/13298/how-to-print-or-export-the-html-and-native-node-into-image-format`]
\ No newline at end of file
+Currently, exporting diagram into image format with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential PDF library. This library incorporates the Syncfusion Essential HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/14031/how-to-export-html-node-using-blink-rendering-in-javascript-diagram) kb for more information.
diff --git a/ej2-javascript/diagram/ts/interaction.md b/ej2-javascript/diagram/ts/interaction.md
index 46e4d7869..50febc449 100644
--- a/ej2-javascript/diagram/ts/interaction.md
+++ b/ej2-javascript/diagram/ts/interaction.md
@@ -11,162 +11,271 @@ domainurl: ##DomainURL##
# Interaction in ##Platform_Name## Diagram control
-## Selection
+## Selector
-Selector provides a visual representation of selected elements. It behaves like a container and allows to update the size, position, and rotation angle of the selected elements through interaction and by using program. Single or multiple elements can be selected at a time.
+The selector visually represents selected elements, acting as a container to modify their size, position, and rotation angle interactively or programmatically. It supports selecting both single and multiple elements simultaneously.
-## Single selection
+## Selection
An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
-* While selecting the diagram elements, the following events can be used to do your customization.
-* When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram#selectionChange--emittypeiselectionchangeeventargs) event gets triggered.
+When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram/iSelectionChangeEventArgs/) event and [`click`](../api/diagram/iclickeventargs/) gets triggered.
+These events enable you to customize the selected elements as needed.
-## Selecting a group
+### Selecting a group
When a child element of any group is clicked, its contained group is selected instead of the child element. With consecutive clicks on the selected element, selection is changed from top to bottom in the hierarchy of parent group to its children.
-## Multiple selection
+### Multiple selection
Multiple elements can be selected with the following ways:
-* Ctrl+Click
+#### Ctrl+Click
+
+During a single click, any existing item in the selection list will be cleared, leaving only the most recently clicked item in the selection list. To avoid clearing the previously selected items, hold down the Ctrl key while clicking.
+
+#### Rubber band selection
+
+Clicking and dragging in the diagram area allows you to create a rectangular region. The elements covered within this rectangular region will be selected when you release the mouse button.
+
+In rubber band selection, you can set the selection of items by region using the following modes:
+
+- CompleteIntersect: Selects items that are fully covered within the rectangular selection region.
+- PartialIntersect: Selects items that are partially covered within the rectangular selection region.
+
+This can be configured with the [`rubberBandSelectionMode`](../api/diagram/rubberBandSelectionMode/).
+
+
+
+### Select/Unselect elements using API
+
+
+The [`select`](../api/diagram#select) and [`clearSelection`](../api/diagram#clearselection) methods are used to dynamically select or clear the selection of elements at runtime. The following code example demonstrates how these methods can be utilized to select or clear the selection of elements.
+
+```ts
+let diagram = new Diagram({
+ width: '100%', height: 900,
+ nodes:[{
+ id: 'node1',
+ width: 90,
+ height: 60,
+ offsetX: 100,
+ offsetY: 100,
+ style: {
+ fill: '#6BA5D7',
+ strokeColor: 'white',
+ strokeWidth: 1
+ },
+ }]
+});
+diagram.appendTo('#diagram');
+//Select a specified collection of nodes and connectors in the diagram
+diagram.select([diagram.nodes[0]]);
+//Removes all elements from the selection list, clearing the current selection.
+diargam.clearSelection();
+```
+### Get selected items
+
+You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diargam.
+
+```ts
+
+let selectedNodes = diagram.selectedItems.nodes;
+let selectedConnectors = diagram.selectedItems.connectors;
+
+```
+
+You can also get the currently selected objects, both nodes and connectors, in a single array called [`selectedObjects`](../api/diagram/selectorModel/#selectedobjects) within the [`selectedItems`](../api/diagram/selectorModel/) property of the diagram.
+
+```ts
+
+let selectedObjects = diagram.selectedItems.selectedObjects;
-During single click, any existing item in the selection list be cleared, and only the item clicked recently is there in the selection list. To avoid cleaning the old selected item, Ctrl key must be on hold when clicking.
+```
-* Selection rectangle/rubber band selection
+### Toggle selection
-Clicking and dragging the diagram area allows to create a rectangular region. The elements that are covered under the rectangular region are selected at the end.
+The [`canToggleSelection`](../api/diagram/selectorModel#canToggleSelection) property determines whether the selection state of a diagram element should toggle with a mouse click at runtime. By default, this property is set to false. In the following example, the node can be selected with the first click and unselected with the second click.
-
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/interaction-toggle/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-toggle/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-toggle" %}
-## Select/Unselect elements using program
+### Select entire elements in diagram programmatically
-The client-side methods [`select`](../api/diagram#select) and [`clearSelection`](../api/diagram#clearselection) help to select or clear the selection of the elements at runtime. The following code example illustrates how to select or clear the selection of an item using program.
+The [`selectAll`](../api/diagram#selectAll) method of diagram is used to select all the elements such as nodes/connectors in the diagram. Refer to the following code snippet.
-Get the current selected items from the [`nodes`](../api/diagram/selectorModel#nodes-nodemodel[]) and [`connectors`](../api/diagram/selectorModel#connectors-connectormodel[]) collection of the [`selectedItems`](../api/diagram#selectAll#selecteditems-selectormodel) property of the diagram model.
+```ts
+//Selects all the nodes and connectors in diagram
+diagram.selectAll();
-## Select entire elements in diagram programmatically
+```
-The client-side method [`selectAll`](../api/diagram#selectAll) used to select all the elements such as nodes/connectors in the diagram. Refer to the following link which shows how to use [`selectAll`](../api/diagram#selectAll) method on the diagram.
+You can also use the CTRL+A keys to select all nodes and connectors in the diagram.
## Drag
-* An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element.
-* When you drag the elements in the diagram, the [`positionChange`](../api/diagram#positionChange--emittypeidraggingeventargs) event gets triggered and to do customization in this event.
+You can drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of them moves all selected elements together.
+As you drag elements within the diagram, the [`positionChange`](../api/diagram/idraggingeventargs/) event is triggered, providing opportunities to customize the dragged elements.
## Resize
-* Selector is surrounded by eight thumbs. When dragging these thumbs, selected items can be resized.
-* When one corner of the selector is dragged, opposite corner is in a static position.
-* When a node is resized, the [`sizeChange`](../api/diagram#sizeChange--emittypeisizechangeeventargs) event gets triggered.
+The selector in the diagram is designed with eight resizing handles, commonly referred to as thumbs. These handles allow users to adjust the size of selected items by clicking and dragging them. When resizing, dragging any handle modifies the dimensions of the selected elements accordingly. Notably, when dragging one corner handle, the opposite corner remains fixed to specific alignment of the selected item.
+
+During the resizing process, the diagram triggers the [`sizeChange`](../api/diagram/isizechangeeventargs/) event, allowing customization based on the size of the element.
-N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to `Snapping`.
+N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments.
-## Customize the resize-thumb
+### Aspect ratio
-You can change the size of the node resize thumb and the connector end point handle by using the `handleSize` property. The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively.
+Maintaining aspect ratio in diagram means that when you resize a node, by dragging its corner, both its width and height adjust proportionally. This ensures that the node retains its original shape and proportions. Aspect ratio constraints can be applied by configuring the [`NodeConstraints`](../api/diagram/nodeconstraints/) property.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs3/index.ts %}
+{% include code-snippet/diagram/interaction-aspect/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs3/index.html %}
+{% include code-snippet/diagram/interaction-aspect/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs3" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-aspect" %}
+
+### Customing resize-thumb size
+
+You can change the size of the node resize thumb and the connector end point handle by using the [`handleSize`](../api/diagram/selectorModel/#handlesize) property. The following example shows the resize handle size customization.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/interaction-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs1" %}
+The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively.
+
## Rotate
-* A rotate handler is placed above the selector. Clicking and dragging the handler in a circular direction lead to rotate the node.
-* The node is rotated with reference to the static pivot point.
-* Pivot thumb (thumb at the middle of the node) appears while rotating the node to represent the static point.
+A rotation handler is positioned above the selector. Clicking and dragging this handler in a circular motion rotates the node. The node rotates around a fixed pivot point. A pivot thumb, located at the center of the node, appears during rotation to indicate the fixed point.
+Rotating a node triggers the [`rotateChange`](../api/diagram/iRotationEventArgs/) event.
-## Connection editing
+### Customize rotate handle position
+
+The position of the rotate handle can be adjusted by modifying the pivot point of the node using the [`pivot`](../api/diagram/nodeModel/#pivot) property. By default, the pivot point is set to (0.5, 0.5). The following example shows how to render the rotate handle at the left top corner of the node.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/interaction-pivot/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/interaction-pivot/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/interaction-pivot" %}
+
+## Connector editing
-* Each segment of a selected connector is editable with some specific handles/thumbs.
+Each segment of a selected connector is editable with some specific handles/thumbs.
N> For connector editing, you have to inject the [`ConnectorEditing`](../api/diagram/connectorEditing) module.
-## End point handles
+### Drag connector end points
-Source and target points of the selected connectors are represented with two handles. Clicking and dragging those handles help you to adjust the source and target points.
+Source and target points of selected connectors are represented by two handles. Clicking and dragging these handles allows you to adjust the source and target points.
-* If you drag the connector end points, then the following events can be used to do your customization.
-* When the connector source point is changed, the [`sourcePointChange`](../api/diagram#sourcePointChange--emittypeiendchangeeventargs) event gets triggered.
-* When the connector target point is changed, the [`targetPointChange`](../api/diagram#targetPointChange--emittypeiendchangeeventargs) event gets triggered.
-* When you connect connector with ports/node or disconnect from it, the [`connectionChange`](../api/diagram#connectionChange--emittypeiconnectionchangeeventargs) event gets triggered.
+Dragging the connector end points triggers the following events for customization:
+
+When the connector's source point is changed, the [`sourcePointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered.
+When the connector's target point is changed, the [`targetPointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered.
+Connecting a connector to port/node or disconnecting from them triggers the [`connectionChange`](../api/diagram/iConnectionChangeEventArgs/) event.
-## Straight segment editing
+### Straight segment editing
-* End point of each straight segment is represented by a thumb that enables to edit the segment.
-* Any number of new segments can be inserted into a straight line by clicking, when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
+The end point of each straight segment is represented by a thumb that allows you to edit the segment. You can insert any number of new segments into a straight line by clicking while holding the Shift and Ctrl keys (Ctrl+Shift+Click).
-* Straight segments can be removed by clicking the segment end point, when Ctrl and Shift keys are pressed (Ctrl+Shift+Click).
+Straight segments can be removed by clicking the segment end point while holding the Ctrl and Shift keys (Ctrl+Shift+Click).
-## Orthogonal thumbs
+### Orthogonal segment editing
+
+Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. When necessary, segments are automatically added or removed during dragging to maintain proper orthogonal routing.
-* Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging it.
-* When necessary, some segments are added or removed automatically, when dragging the segment. This is to maintain proper routing of orthogonality between segments.
+When editing a segment, the [`segmentChange`](../api/diagram/iSegmentChangeEventArgs/) event is triggered. When new segments are added to the collection of connector segments, the [`segmentCollectionChange`](../api/diagram/iSegmentCollectionChangeEventArgs/) event is triggered.
-## Bezier thumbs
-* Bezier segments are annotated with two thumbs to represent the control points. Control points of the curve can be configured by clicking and dragging the control thumbs.
+### Bezier segment editing
-
+Bezier segment thumbs allow you to adjust the segments by clicking and dragging them.
-## Drag and drop nodes over other elements
+
-Diagram provides support to drop a node/connector over another node/connector. The [`drop`](../api/diagram#drop--emittypeidropeventargs) event is raised to notify that an element is dropped over another one and it is disabled, by default. It can enabled with the constraints property.
+#### Bezier Control Points
-## User handles
+Bezier segments are annotated with two thumbs representing the control points. These control points can be adjusted by clicking and dragging the control thumbs. Dragging the control point changes the angle and distance of the points from the segment point, modifying the curve.
-* User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) collection of the [`selectedItems`](../api/diagram#selectAll#selecteditems-selectormodel) property.
-* The name property of user handle is used to define the name of the user handle and its further used to find the user handle at runtime and do any customization.
+
-## Alignment
+## User handles
-User handles can be aligned relative to the node boundaries. It has [`margin`](../api/diagram/userHandle#margin-marginmodel), [`offset`](../api/diagram/userHandle#offset-number), [`side`](../api/diagram/userHandle#side-side), [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment), and [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) settings. It is quite tricky when all four alignments are used together but gives more control over alignment.
+User handles are used to add frequently used commands around the selector. To create user handles, define and add them to the [`userHandles`](../api/diagram/userHandleModel/) collection of the [`selectedItems`](../api/diagram/selectorModel/) property. The [`name`](../api/diagram/userHandleModel/#name) property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization.
-## Offset
+The following events are triggered when interacting with a user handle:
-The [`offset`](../api/diagram/userHandle#offset-number) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the user handle is clicked.
+* [`onUserHandleMouseEnter`](../api/diagram/#onuserhandlemouseenter) - Triggered when the mouse enters the user handle region.
+* [`onUserHandleMouseDown`](../api/diagram/#onuserhandlemousedown) - Triggered when the mouse is pressed down on the user handle.
+* [`onUserHandleMouseUp`](../api/diagram/#onuserhandlemouseup) - Triggered when the mouse is released on the user handle.
+* [`onUserHandleMouseLeave`](../api/diagram/#onuserhandlemouseleave) - Triggered when the mouse leaves the user handle region.
-## Side
+For more information, refer to the [`user handle events`](./user-handle.md/#user-handle-events).
-The [`side`](../api/diagram/userHandle#side-side) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle by using the [`Top`](../api/diagram/side#top), [`Bottom`](../api/diagram/side#bottom), [`Left`](../api/diagram/side#left), and [`Right`](../api/diagram/side#right) options.
+## Fixed user handle
-## Horizontal and vertical alignments
+Fixed user handles are used to perform specific actions when interacted with. Unlike regular user handles, [`fixedUserHandles`](../api/diagram/nodeFixedUserHandleModel/) are defined within the node/connector object, allowing different fixed user handles to be added to different nodes.
-The [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to set how the user handle is horizontally aligned at the position based on the [`offset`](../api/diagram/userHandle#offset-number). The [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) property is used to set how user handle is vertically aligned at the position.
+The following events are triggered when interacting with a fixed user handle:
-## Margin
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the fixed user handle is clicked.
+* [`onFixedUserHandleMouseEnter`](../api/diagram/#onfixeduserhandlemouseenter) - Triggered when the mouse enters the fixed user handle region.
+* [`onFixedUserHandleMouseDown`](../api/diagram/#onfixeduserhandlemousedown) - Triggered when the mouse is pressed down on the fixed user handle.
+* [`onFixedUserHandleMouseUp`](../api/diagram/#onfixeduserhandlemouseup) - Triggered when the mouse is released on the fixed user handle.
+* [`onFixedUserHandleMouseLeave`](../api/diagram/#onfixeduserhandlemouseleave) - Triggered when the mouse leaves the fixed user handle region.
+* [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) - Triggered when the fixed user handle is clicked.
-Margin is an absolute value used to add some blank space in any one of its four sides. The [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) can be displaced with the [`margin`](../api/diagram/userHandle#margin-marginmodel) property.
+For more information, refer to the [`fixed user handle events`](./user-handle.md/#fixed-user-handle-events).
-## Notification for the mouse button clicked
+## Determining Mouse Button Clicks
-The diagram component notifies the mouse button clicked. For example, when the right mouse button is clicked, the clicked button is notified as right. The mouse click is notified with,
+The diagram component can determine which mouse button was clicked. For example, when the right mouse button is clicked, the click event will specify that the right button was clicked. This is handled through the mouse [`click`](../api/diagram/iclickeventargs/) event, which provides details about whether the left or right button was clicked.
| Notification | Description |
|----------------|--------------|
@@ -175,42 +284,23 @@ The diagram component notifies the mouse button clicked. For example, when the r
| Right | When the right mouse button is clicked, right is notified |
```ts
-let diagram: Diagram = new Diagram({
+let diagram = new Diagram({
width: '100%', height: 900
-});
-diagram.appendTo('#diagram');
-diagram.click = function (args: IClickEventArgs) {
+},'#diagram');
+diagram.click = function (args) {
// Obtains the mouse button clicked
let clickedButtons = args.button
};
```
-## Appearance
+## Allow drop
-The appearance of the user handle can be customized by using the [`size`](../api/diagram/userHandle#size-number), [`borderColor`](../api/diagram/userHandle#bordercolor-string), [`backgroundColor`](../api/diagram/userHandle#backgroundcolor-string), [`visible`](../api/diagram/userHandle#visible-boolean), [`pathData`](../api/diagram/userHandle#pathdata-string), and [`pathColor`](../api/diagram/userHandle#pathcolor-string) properties of the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]).
+The diagram supports dropping a node or connector onto another node or connector. To determine the target where the node or connector is dropped, you need to enable the [`allowDrop`](../api/diagram/nodeConstraints/) constraint in the node's or connector's constraints property. This setting enables a highlighter to indicate potential drop targets when dragging any node or connector over another one. Upon dropping the node or connector, the [`drop`](../api/diagram/iDropEventArgs/) event is triggered to indicate which element was dropped over which other element.
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs4" %}
## Zoom pan
-* When a large diagram is loaded, only certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by scrolling the scrollbars or panning the diagram.
-* Diagram can be zoomed in or out by using Ctrl + mouse wheel.
-* When the diagram is zoomed or panned, the [`scrollChange`](../api/diagram#scrollChange--emittypeiscrollchangeeventargs) event gets triggered.
-
-
-
-## Zoom pan status
-
-Diagram provides the support to notify the pan status of the zoom pan tool. Whenever the diagram is panning [`scrollChange`](../api/diagram#scrollChange--emittypeiscrollchangeeventargs) event is triggered and hence the pan status can be obtained. The pan status is notified with Start, Progress, and Completed.
+When loading a large diagram, only a certain portion of the diagram is initially visible, the remaining parts are clipped. You can explore these clipped portions by scrolling the scrollbars or panning the diagram. You can zoom in or out on the diagram by using Ctrl + mouse wheel. When the diagram is zoomed or panned, the [`scrollChange`](../api/diagram/iScrollChangeEventArgs/) event is triggered.
| Pan Status | Description|
|--------------|---------|
@@ -218,17 +308,7 @@ Diagram provides the support to notify the pan status of the zoom pan tool. When
| Progress | When the mouse is in motion the status is notified as progress.|
| Completed | When panning is stopped the status is notified with completed.|
-```ts
-let diagram: Diagram = new Diagram({
- width: '100%', height: 900
- tool: DiagramTools.ZoomPan, scrollChange:function (args:IScrollChangeEventArgs | IBlazorScrollChangeEventArgs) {
- // Obtains the zoom pan status
- let mouseButton = args.panState
- }
-});
-diagram.appendTo('#element');
-
-```
+
## Keyboard
@@ -245,7 +325,7 @@ The following table illustrates those commands with the associated key values.
| Ctrl + Z | undo | Reverses the last editing action performed on the diagram.|
| Ctrl + Y | redo | Restores the last editing action when no other actions have occurred since the last undo on the diagram.|
| Delete | delete | Deletes the selected elements.|
-| Ctrl/Shift + Click on object | | Multiple selection (Selector binds all selected nodes/connectors).|
+| Ctrl/Shift + Click on object | Multiple selection | Selector binds all selected nodes/connectors.|
| Up Arrow | nudge(“up”) | `nudgeUp`: Moves the selected elements towards up by one pixel.|
| Down Arrow | nudge(“down”) | `nudgeDown`: Moves the selected elements towards down by one pixel.|
| Left Arrow | nudge(“left”) | `nudgeLeft`: Moves the selected elements towards left by one pixel.|
@@ -288,6 +368,8 @@ The following table illustrates those commands with the associated key values.
| Control + [ | Send Backward | Move the selected shape one step backward in the layer order. |
| Control + ] | Bring Forward | Move the selected shape one step forward in the layer order.|
+N> Please note that the positionChange event is triggered for dragging nodes/connectors using mouse interactions only and not supported for Keyboard interactions
+
## See Also
* [How to create diagram nodes using drawing tools](./tools#Shapes)
diff --git a/ej2-javascript/diagram/ts/label-appearance.md b/ej2-javascript/diagram/ts/label-appearance.md
index 27eab8bc8..15b58ebf2 100644
--- a/ej2-javascript/diagram/ts/label-appearance.md
+++ b/ej2-javascript/diagram/ts/label-appearance.md
@@ -133,7 +133,7 @@ The following code illustrates how to define a template in annotation.
{% previewsample "page.domainurl/code-snippet/diagram/annotations-cs11" %}
-N> We need to mention width and height for the annotation while using template
+N> For the proper alignment of template, we need to mention width and height for the annotation while using template.
### Annotation template
diff --git a/ej2-javascript/diagram/ts/label-events.md b/ej2-javascript/diagram/ts/label-events.md
index 6c1976425..4fac22600 100644
--- a/ej2-javascript/diagram/ts/label-events.md
+++ b/ej2-javascript/diagram/ts/label-events.md
@@ -19,7 +19,8 @@ There are some events which will trigger while interacting with annotation.
## KeyDown event
-Triggers when we press any key while editing the annotation text. The following example shows how to get [`keyDown`](../api/diagram/iKeyEventArgs/) event.
+
+The [`keyDown`](../api/diagram/iKeyEventArgs/) event is triggered whenever any key is pressed. The following example shows how to capture the keyDown event and modify the fill color of a node on each key press:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -34,7 +35,7 @@ Triggers when we press any key while editing the annotation text. The following
## KeyUp event
-Triggers when we press and release any key while editing the annotation text. The following example shows how to get [`keyUp`](../api/diagram/iKeyEventArgs/)event
+The [`keyUp`](../api/diagram/iKeyEventArgs/) event is triggered whenever we press and release any key. The following example shows how to capture the keyUp event and modify the fill color of a node on each key press:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -49,7 +50,7 @@ Triggers when we press and release any key while editing the annotation text. Th
## Double click event
-Triggers when we double click on the node or connector. while double click on diagram element, the annotation editing mode will be activated. The following code example shows how to get [`doubleClick`](../api/diagram/idoubleclickeventargs/) event
+The [`doubleClick`](../api/diagram/idoubleclickeventargs/) event is triggered when you double-click on a node, connector, or the diagram surface. Double-clicking on a diagram element activates the annotation editing mode. The following code example shows how to capture the [`doubleClick`](../api/diagram/idoubleclickeventargs/) event:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -64,7 +65,7 @@ Triggers when we double click on the node or connector. while double click on di
## TextEdit event
-Triggers when you finish editing the annotation text and the focus is removed from the annotation text.
+The [`textEdit`](../api/diagram/iTextEditEventArgs/) event triggers when you finish editing the annotation text and the focus is removed from the annotation text.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -77,5 +78,12 @@ Triggers when you finish editing the annotation text and the focus is removed fr
{% previewsample "page.domainurl/code-snippet/diagram/annotations-textEdit" %}
+You can prevent adding new text to the annotation by setting the `cancel` property of [`textEdit`](../api/diagram/iTextEditEventArgs/) to true.
+``` javascript
+textEdit: function (args: ITextEditEventArgs) {
+ // Prevents any new content from being added to the annotation
+ args.cancel = true;
+ },
+```
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/layers.md b/ej2-javascript/diagram/ts/layers.md
index 3fdb4ca17..ad663661e 100644
--- a/ej2-javascript/diagram/ts/layers.md
+++ b/ej2-javascript/diagram/ts/layers.md
@@ -1,7 +1,7 @@
---
layout: post
title: Layers in ##Platform_Name## Diagram control | Syncfusion
-description: Learn here all about Layers in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+description: Learn here all about Layers in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential 2 and more.
platform: ej2-javascript
control: Layers
publishingplatform: ##Platform_Name##
@@ -11,200 +11,89 @@ domainurl: ##DomainURL##
# Layers in ##Platform_Name## Diagram control
-**Layer** is used to organize related shapes on a diagram control. A layer is a named category of shapes. By assigning shapes to different layers, you can selectively view, remove, and lock different categories of shapes.
+**Layer** organizes related shapes within a diagram control as named categories. Assigning shapes to different layers enables selective viewing, removal, and locking of distinct shape categories.
-In diagram, [Layers](../api/diagram) provide a way to change the properties of all shapes that have been assigned to that layer. The following properties can be set.
+In a diagram, [Layers](../api/diagram/layermodel/) facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include:
+* Objects
* Visible
* Lock
-* Objects
* AddInfo
+## Objects
+
+The layer's [objects](../api/diagram/layer/#objects) property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses.
+
+In the following example, the basic shapes are categorized in layer 1, and the flow shapes are categorized in layer 2.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs3" %}
+
## Visible
-The layer's [visible](../api/diagram/layer#visible-boolean) property is used to control the visibility of the elements assigned to the layer.
+The layer's [visible](../api/diagram/layer/#visible) property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer.
-```ts
+In the following example, the visibility of layer one is set to false. By default, the `visible` property of a layer is set to **true**.
-import {
- Diagram,
- ConnectorModel,
- NodeModel,
- LayerModel
-} from '@syncfusion/ej2-diagrams';
-// A node is created and stored in nodes array.
-let nodes: NodeModel[] = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-let connectors: ConnectorModel[] = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-// initialize diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [{
- id: 'layer1',
- visible: true,
- objects: ['node1']
- }
- ]
-});
-// render initialized diagram
-diagram.appendTo('#element');
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs1" %}
## Lock
-The layer's [lock](../api/diagram/layer#lock-boolean) property is used to prevent or allow changes to the elements dimension and position.
+The layer's [lock](../api/diagram/layer/#lock) property is used to prevent or allow changes to the element's dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting.
-```ts
+In the following example the objects in layer one is locked. By default, the `lock` property of a layer is set to **false**.
-import {
- Diagram,
- ConnectorModel,
- NodeModel,
- LayerModel
-} from '@syncfusion/ej2-diagrams';
-// A node is created and stored in nodes array.
-let nodes: NodeModel[] = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-let connectors: ConnectorModel[] = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-// initialize diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [{
- id: 'layer1',
- visible: true,
- objects: ['node1'],
- lock: true
- },
- {
- id: 'layer2',
- visible: true,
- objects: ['node2'],
- lock: false
- }
- ]
-});
-// render initialized diagram
-diagram.appendTo('#element');
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs2" %}
-```
+## AddInfo
-## Objects
+The [`addInfo`](../api/diagram/layer/#addinfo) property of layers allow you to maintain additional information to the layers.
-The layer's [objects](../api/diagram/layer#objects-string[]) property defines the diagram elements to the layer.
+The following code illustrates how to add additional information to the layers.
```ts
-
-import {
- Diagram,
- ConnectorModel,
- NodeModel,
- LayerModel
-} from '@syncfusion/ej2-diagrams';
-// A node is created and stored in nodes array.
-let nodes: NodeModel[] = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
+let nodes:NodeModel[] = [{
+ id: 'node1',
+ width: 100,
+ height: 100,
+ offsetX: 100,
+ offsetY: 100,
},
{
id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
+ width: 100,
+ height: 100,
+ offsetX: 300,
+ offsetY: 100,
}
];
-let connectors: ConnectorModel[] = [{
+let connectors:ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: {
@@ -216,8 +105,10 @@ let connectors: ConnectorModel[] = [{
y: 400
},
}];
-// initialize diagram component
-let diagram: Diagram = new Diagram({
+//Additional informations of layer
+let addInfo = { Description: 'Layer1' };
+// initialize Diagram component
+let diagram = new Diagram({
width: '100%',
height: '600px',
connectors: connectors,
@@ -225,230 +116,165 @@ let diagram: Diagram = new Diagram({
layers: [{
id: 'layer1',
visible: true,
- objects: ['node1', 'node2']
+ objects: ['node1', 'node2'],
+ addInfo: addInfo
},
{
id: 'layer2',
visible: true,
- objects: ['node2']
+ objects: ['connector1']
}
]
});
-// render initialized diagram
-diagram.appendTo('#element');
```
-## AddInfo
-
-The [`addInfo`](../api/diagram/layer#addinfo-Object) property of layers allow you to maintain additional information to the layers.
-
-The following code illustrates how to add additional information to the layers.
-
-```ts
+## Add layer at runtime
-import {
- Diagram,
- ConnectorModel,
- NodeModel,
- LayerModel
-} from '@syncfusion/ej2-diagrams';
-// A node is created and stored in nodes array.
-let nodes: NodeModel[] = [{
- id: 'node1',
- width: 100,
- height: 100,
- offsetX: 100,
- offsetY: 100,
- annotations: [{
- content: 'Default Shape'
- }]
- },
- {
- id: 'node2',
- width: 100,
- height: 100,
- offsetX: 300,
- offsetY: 100,
- shape: {
- type: 'Path',
- data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,' +
- '179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z'
- },
- annotations: [{
- content: 'Path Element'
- }]
- }
-];
-let connectors: ConnectorModel[] = [{
- id: 'connector1',
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- },
-}];
-
-let addInfo: Object = { Description: 'Layer1' };
-// initialize Diagram component
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '600px',
- connectors: connectors,
- nodes: nodes,
- layers: [{
- id: 'layer1',
- visible: true,
- objects: ['node1', 'node2'],
- addInfo: addInfo
- },
- {
- id: 'layer2',
- visible: true,
- objects: ['node2']
- }
- ]
-});
-
-```
+Layers can be added at runtime using the [`addLayer`](../api/diagram/#addlayer) public method.
-### Add layer at runtime
+The layer's [`id`](../api/diagram/layer/#id) property defines the ID of the layer, which is used to find the layer at runtime and apply any customizations. You can also add new objects to the new layer using the `addLayer` method.
-Layers can be added at runtime by using the [`addLayer`](../api/diagram#addLayer) public method.
+The following code illustrates how to add a new layer with new connectors stored in an object array of the new layer:
-The layer's [`ID`](../api/diagram/layer#id-string) property defines the ID of the layer, and its further used to find the layer at runtime and do any customization.
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs4" %}
-The following code illustrates how to add a layer.
-
-```ts
-
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-// add the layers to the existing diagram layer collection
-diagram.addLayer({
- id: 'newlayer',
- objects: [],
- visible: true,
- lock: false,
- zIndex: -1
-}, [{
- type: 'Straight',
- sourcePoint: {
- x: 100,
- y: 300
- },
- targetPoint: {
- x: 200,
- y: 400
- }
-}]);
-
-```
-
-### Remove layer at runtime
+## Remove layer at runtime
Layers can be removed at runtime by using the [`removeLayer`](../api/diagram#removeLayer) public method.
+To remove a layer, pass the ID of the layer you want to remove as a parameter to the `removeLayer` method.
+
The following code illustrates how to remove a layer.
-```ts
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-// remove the diagram layers
-diagram.removeLayer([diagram.model.layers[i]]);
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs5" %}
-```
-### moveObjects
+## moveObjects
-Objects of the layers can be moved by using the [`moveObjects`](../api/diagram#moveObjects) public method.
+You can move objects from one layer to another dynamically using the [`moveObjects`](../api/diagram#moveObjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions..
-The following code illustrates how to move objects from one layer to another layer from the diagram.
+The following code illustrates how to move objects from one layer to another layer.
-```ts
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs6" %}
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-// move the objects of diagram layers
-diagram.moveObjects(['connector1'], 'layer2');
+## Z-Index
-```
+[`zIndex`](../api/diagram/layer/#zindex) property of a layer defines its Z order within the diagram. This property allows you to control the layer's position in the stacking order. You can adjust the layer's z-index by moving it forward or backward relative to other layers in the diagram.
-### bringLayerForward
+### Bring Layer Forward
Layers can be moved forward at runtime by using the [`bringLayerForward`](../api/diagram#bringLayerForward) public method.
-The following code illustrates how to bring forward to layer.
-
-```ts
-
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
+```javascript
// move the layer forward
diagram.bringLayerForward('layer1');
```
-### sendLayerBackward
+### Send Layer Backward
Layers can be moved backward at runtime by using the [`sendLayerBackward`](../api/diagram#sendLayerBackward) public method.
-The following code illustrates how to send backward to layer.
-
-```ts
-
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
+```javascript
// move the layer backward
diagram.sendLayerBackward('layer1');
```
-### cloneLayer
+The following code illustrates how to send the layer forward/backward to another layer.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs7" %}
+
+### Layer and objects rendering order
+
+The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](../api/diagram#bringLayerForward) and [`sendLayerBackward`](../api/diagram#sendLayerBackward), the native SVG elements will always render above the basic shape elements.
+
+The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes.
+
+## Clone Layer
Layers can be cloned with its object by using the [`cloneLayer`](../api/diagram#cloneLayer) public method.
-The following code illustrates how to bring forward to layer.
+The following code illustrates how to clone the layer.
-```ts
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-// clone a layer with its object
-diagram.cloneLayer('layer2');
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/layers-cs8/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/layers-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/layers-cs8" %}
-```
-### getActiveLayer
+## Active layer
-To get the active layers back in diagram, use the [`getActiveLayer`](../api/diagram#getActiveLayer) public method.
+Active Layer refers to the layer with the highest z-index in a diagram compared to other layers. When adding objects at runtime, they are stored in this active layer. If no layers are explicitly defined in the diagram, a default layer is created and automatically set as the active layer. However, when multiple layers are defined, the layer with the highest z-index takes precedence as the active layer.
-The following code illustrates how to bring forward to layer.
+Public methods are available to get and set the active layer, which are explained below.
-```ts
+### Get ActiveLayer
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-// gets the active layer back
-diagram.getActiveLayer();
+Active layer of the diagram can be retrieved by using the [`getActiveLayer`](../api/diagram#getActiveLayer) public method.
+
+The following code illustrates how fetch active layer from the diagram
+
+```javascript
+
+// gets the active layer of diagram
+let activeLayer = diagram.getActiveLayer();
```
-### setActiveLayer
+### Set ActiveLayer
-Set the active layer by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method.
+You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method.
-The following code illustrates how to bring forward to layer.
+The following code illustrates how to set active layer for diagram
-```ts
+```javascript
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
// set the active layer
//@param layerName defines the name of the layer which is to be active layer
diagram.setActiveLayer('layer2');
diff --git a/ej2-javascript/diagram/ts/layout-customization.md b/ej2-javascript/diagram/ts/layout-customization.md
index 571575753..cb52977ba 100644
--- a/ej2-javascript/diagram/ts/layout-customization.md
+++ b/ej2-javascript/diagram/ts/layout-customization.md
@@ -116,6 +116,24 @@ The following code demonstrates how to set the initial orientation for the layou
{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-cs13" %}
+## Exclude from layout
+
+In some cases, you may need one or two nodes not to be arranged based on the layout algorithm but instead positioned manually. You can exclude these nodes from the layout algorithm by setting the [`excludeFromLayout`](../api/diagram/nodeModel/#excludefromlayout) property to true.
+
+The following code example demonstrates how to exclude a node from the layout and position it manually:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/AutomaticLayout-exclude/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-exclude/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-exclude" %}
+
+
## Fixed node
Layout provides support to arrange the nodes with reference to the position of a fixed node and set it to the [`fixedNode`](../api/diagram/layoutModel/#fixednode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed.
diff --git a/ej2-javascript/diagram/ts/layout-event.md b/ej2-javascript/diagram/ts/layout-event.md
index d780656a9..1b058ae1c 100644
--- a/ej2-javascript/diagram/ts/layout-event.md
+++ b/ej2-javascript/diagram/ts/layout-event.md
@@ -47,36 +47,29 @@ The [`expandStateChange`](../api/diagram/iExpandStateChangeEventArgs/) will be t
The following code example explains the `expandStateChange` event in the diagram.
-```javascript
-// Initializes the diagram
-let diagram: Diagram = new Diagram({
- width: '100%',
- height: '550px',
- layout: {
- type: 'HierarchicalTree',
- horizontalSpacing: 25,
- verticalSpacing: 30,
- horizontalAlignment: 'Left',
- verticalAlignment: 'Top',
- },
- dataSourceSettings: {
- id: 'Name',
- parentId: 'ReportingPerson',
- dataManager: items,
- },
- getNodeDefaults: (obj: NodeModel) => {
- obj.width = 200;
- obj.height = 60;
- obj.expandIcon.shape = 'Minus';
- obj.collapseIcon.shape = 'Plus';
- return obj;
- },
- expandStateChange: function (args) {
- //We can get the expanded or collapsed node in args
- console.log(args);
- },
-});
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/AutomaticLayout-expState/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-expState/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-expState" %}
-diagram.appendTo('#element');
+## Animation complete event
-```
+The [`animationComplete`](../api/diagram/#animationcomplete) event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.
+
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/AutomaticLayout-animComplete/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/AutomaticLayout-animComplete/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-animComplete" %}
diff --git a/ej2-javascript/diagram/ts/nodes-events.md b/ej2-javascript/diagram/ts/nodes-events.md
index 7735a08e3..2191199a5 100644
--- a/ej2-javascript/diagram/ts/nodes-events.md
+++ b/ej2-javascript/diagram/ts/nodes-events.md
@@ -13,11 +13,27 @@ domainurl: ##DomainURL##
Diagram provides some events support for node that triggers when interacting with the node.
+## Click event
+
+Triggers when the node is clicked. The following code example explains how to get the [`click`](../api/diagram/iClickEventArgs/) event in the diagram.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-clickEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-clickEvent" %}
+
## Selection change event
Triggers when the node is selected in diagram.
The following code example explains how to get the [`selectionChange`](../api/diagram/iSelectionChangeEventArgs/) event in the diagram.
+
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
{% include code-snippet/diagram/nodes-selectionEvent/index.ts %}
@@ -29,11 +45,24 @@ The following code example explains how to get the [`selectionChange`](../api/di
{% previewsample "page.domainurl/code-snippet/diagram/nodes-selectionEvent" %}
+ You can prevent selection by setting the `cancel` property of [`SelectionChangeEventArgs`](../api/diagram/iSelectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+```ts
+ selectionChange: function (args: ISelectionChangeEventArgs) {
+ if (args.state == 'Changing') {
+ //Prevents selection
+ args.cancel = true;
+ }
+ },
+
+```
+
## Position change event
While dragging the node through interaction, the position change event can be used to do the customization.
The following code example explains how to get the [`positionChange`](../api/diagram/iDraggingEventArgs/) event in the diagram.
+
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
{% include code-snippet/diagram/nodes-positionEvent/index.ts %}
@@ -45,10 +74,22 @@ The following code example explains how to get the [`positionChange`](../api/dia
{% previewsample "page.domainurl/code-snippet/diagram/nodes-positionEvent" %}
+ You can prevent dragging by setting the `cancel` property of [`DraggingEventArgs`](../api/diagram/iDraggingEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ positionChange: function (args: IDraggingEventArgs) {
+ if (args.state == 'Progress') {
+ //Prevents dragging
+ args.cancel = true;
+ }
+ },
+
+```
+
## Size change event
While resizing the node during the interaction, the size change event can be used to do the customization.
-The following code example explains how to get the [`sizeChange`](../api/diagram/isizechangeeventargs/) event in the diagram.
+The following code example explains how to get the [`sizeChange`](../api/diagram/iSizeChangeEventArgs/) event in the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -58,13 +99,25 @@ The following code example explains how to get the [`sizeChange`](../api/diagram
{% include code-snippet/diagram/nodes-resizeEvent/index.html %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "page.domainurl/code-snippet/diagram/nodes-resizeEvent" %}
+ You can prevent resizing by setting the `cancel` property of [`SizeChangeEventArgs`](../api/diagram/iSizeChangeEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ sizeChange: function (args: ISizeChangeEventArgs) {
+ if (args.state == 'Progress') {
+ //Prevents resizing
+ args.cancel = true;
+ }
+ },
+
+```
+
## Rotate change event
While rotating the node during the interaction, the rotate change event can be used to do the customization.
-The following code example explains how to get the [`rotateChange`](../api/diagram/irotationeventargs/) event in the diagram.
+The following code example explains how to get the [`rotateChange`](../api/diagram/iRotationEventArgs/) event in the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -77,10 +130,37 @@ The following code example explains how to get the [`rotateChange`](../api/diagr
{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotateEvent" %}
+ You can prevent rotation by setting the `cancel` property of [`RotationEventArgs`](../api/diagram/iRotationEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ rotateChange: function (args: IRotationEventArgs) {
+ if (args.state == 'Progress') {
+ //Prevents rotation
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Property change event
+
+Triggers when there is any property change occurred for the node. The following code example explains how to get the [`propertyChange`](../api/diagram/iPropertyChangeEventArgs/) event in the diagram.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/nodes-propertyChange/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-propertyChange/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-propertyChange" %}
+
## Collection change event
Triggers when the node is added or removed in diagram dynamically.
-The following code example explains how to get the [`collectionChange`](../api/diagram/icollectionchangeeventargs/) event in the diagram.
+The following code example explains how to get the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event in the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -91,4 +171,46 @@ The following code example explains how to get the [`collectionChange`](../api/d
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/nodes-collectionEvent" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-collectionEvent" %}
+
+You can prevent changes to the diagram collection, such as adding or deleting nodes, by setting the `cancel` property of [`CollectionChangeEventArgs`](../api/diagram/iCollectionChangeEventArgs/) to true, as shown in the code snippet below.
+
+ ```ts
+ collectionChange: function (args: ICollectionChangeEventArgs) {
+ if (args.state == 'Changing') {
+ //Prevents collection change - Prevents Adding or deleting nodes
+ args.cancel = true;
+ }
+ },
+
+```
+
+## Mouse Events
+
+### Mouse enter event
+
+The [`mouseEnter`](../api/diagram/iMouseEventArgs/) is triggered when the mouse enters the node surface.
+
+### Mouse over event
+
+The [`mouseOver`](../api/diagram/iMouseEventArgs/) is triggered when the mouse hover over the node surface.
+
+### Mouse leave event
+
+The [`mouseLeave`](../api/diagram/iMouseEventArgs/) is triggered when the mouse leaves the node surface.
+
+The following code example shows how to handle these events in the diagram and change the color of a node based on these events:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/nodes-mouseEvent/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/nodes-mouseEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/nodes-mouseEvent" %}
+
+
+
diff --git a/ej2-javascript/diagram/ts/nodes-interaction.md b/ej2-javascript/diagram/ts/nodes-interaction.md
index 04d7491a4..d730c2b15 100644
--- a/ej2-javascript/diagram/ts/nodes-interaction.md
+++ b/ej2-javascript/diagram/ts/nodes-interaction.md
@@ -22,7 +22,7 @@ You can simply click on the node to select it and click on diagram canvas to uns
### To select node programatically
-A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearSelection) method. The following code explains how to select and clear selection in the diagram.
+A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearSelection) or [`unSelect`](../api/diagram/#unselect) method. The following code explains how to select and clear selection in the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -35,6 +35,11 @@ A node can be selected at runtime by using the [`select`](../api/diagram/#select
{% previewsample "page.domainurl/code-snippet/diagram/nodes-select" %}
+|Method | Parameter | Description|
+|----|----|----|
+|[`unSelect`](../api/diagram/#unselect)| NodeModel/ConnectorModel | The object to remove from the selection.|
+|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diargam.|
+
## Drag
You can simply mousedown on a node and drag it anywhere on the diagram canvas like below.
diff --git a/ej2-javascript/diagram/ts/nodes.md b/ej2-javascript/diagram/ts/nodes.md
index b640c8e64..b3b322d03 100644
--- a/ej2-javascript/diagram/ts/nodes.md
+++ b/ej2-javascript/diagram/ts/nodes.md
@@ -19,11 +19,13 @@ Nodes are graphical objects used to visually represent the geometrical informati
## Create node
-A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked on the diagram area from bottom to top in the order they are added.
+A node can be created and added to the diagram either programmatically or interactively. The [`id`](../api/diagram/nodeModel/#id) property of a node is used to define its unique identifier and can later be used to find the node at runtime for customization. Nodes are stacked on the diagram area from bottom to top in the order they are added.
+
+N> Note: There should not be any white-spaces in the ID string while setting the ID.
### Add node through nodes collection
-To create a node, define the [`node`](../api/diagram/node) object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram.
+To create a node, define the [`node`](../api/diagram/node) object and add that to [`nodes`](../api/diagram/nodeModel/) collection of the [`diagram model`](../api/diagram/). The following code example illustrates how to add a node to the diagram.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -36,11 +38,11 @@ To create a node, define the [`node`](../api/diagram/node) object and add that t
{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs1" %}
-N> Node id should not begin with numbers(should begin with a letter).Node Id should be unique for all the shapes and connectors.
+N> Node id should not begin with numbers(should begin with a letter). Node Id should be unique for all the shapes and connectors.
### Add/Remove node at runtime
-Nodes can be added at runtime by using public method, [`add`](../api/diagram/#add) and can be removed at runtime by using public method, [`remove`](../api/diagram/#remove). On adding node at runtime, the nodes collection is changed and the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will trigger.
+Nodes can be added at runtime by using public method, [`add`](../api/diagram/#add) and can be removed at runtime by using public method, [`remove`](../api/diagram/#remove). On adding/removing node at runtime, the nodes collection is changed and the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will trigger.
The following code illustrates how to add a node and remove a selected node.
@@ -56,9 +58,9 @@ The following code illustrates how to add a node and remove a selected node.
{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs2" %}
-## Add collection of nodes at runtime
+### Add collection of nodes at runtime
-The collection of nodes can be dynamically added using [`addElements`](../api/diagram/#addelements) method.Each time an element is added to the diagram canvas, the 'collectionChange' event will be triggered.
+The collection of nodes can be dynamically added using [`addElements`](../api/diagram/#addelements) method. Each time an element is added to the diagram canvas, the [`collectionChange`](../api/diagram/iCollectionChangeEventArgs/) event will be triggered.
The following code illustrates how to add a nodes collection at runtime.
@@ -91,7 +93,7 @@ Nodes can be predefined and added to the palette, and can be dropped into the di
### Create node through data source
-Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about data source, refer to [`DataBinding`](./data-binding.md).
+Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to [`DataBinding`](./data-binding.md).
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -140,7 +142,10 @@ N> Once the property is updated, you should call the [`dataBind`](../api/diagram
## Clone node at runtime
-Cloning a node creates a new node instance with identical properties and attributes.
+Cloning a node creates a new node instance with identical properties and attributes. You can clone a node using the [`copy`](../api/diagram/#copy) and [`paste`](../api/diagram/#paste) public methods of the diagram model.
+
+
+The following code example illustrates how to clone node at runtime
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -155,7 +160,9 @@ Cloning a node creates a new node instance with identical properties and attribu
## Add nodes from tree view
-By customizing the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) functionality, we can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element.
+By customizing the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) functionality, you can allow elements from other components, such as the tree view, to be converted into nodes based on the data of the dragged element.
+
+The following code example demonstrates how to convert a tree view element into a node while dragging it onto the diagram canvas
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
diff --git a/ej2-javascript/diagram/ts/org-chart.md b/ej2-javascript/diagram/ts/org-chart.md
index 4c797511e..26513f07e 100644
--- a/ej2-javascript/diagram/ts/org-chart.md
+++ b/ej2-javascript/diagram/ts/org-chart.md
@@ -132,3 +132,4 @@ The following code example illustrates how to add assistants to layout.
+N> An Assistant node cannot have any child nodes
diff --git a/ej2-javascript/diagram/ts/palette-customization.md b/ej2-javascript/diagram/ts/palette-customization.md
new file mode 100644
index 000000000..2c594cce2
--- /dev/null
+++ b/ej2-javascript/diagram/ts/palette-customization.md
@@ -0,0 +1,332 @@
+---
+layout: post
+title: Symbol Palette customization in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Symbol palette
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Symbol Palette customization in ##Platform_Name## Diagram control
+
+## Customize the palette properties
+
+Palettes can be annotated with its header texts.
+
+The [`title`](../api/diagram/palette/#title-string) property is displayed as the header text of the palette.
+
+The [`expanded`](../api/diagram/palette/#expanded-boolean) property allows the palette items to be expanded or collapsed.
+
+The [`height`](../api/diagram/palette/#height-number) property sets the height of the symbol group / palette.
+
+The [`iconCss`](../api/diagram/palette/#iconCss-string) property sets the icon to be rendered with the title.
+
+The following example demonstrates how to customize the palette properties.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-header/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-header/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-header" %}
+
+## Animation
+
+The expand and collpase operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs12/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs12/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs12" %}
+
+## Description for symbols
+
+The [`description`](../api/diagram/symbolDescription/) property defines the descriptive text that appears beneath each symbol in the palette. This text provides additional information about the symbol's purpose or usage within the diagramming context. The description can be dynamically retrieved and defined using the [`getSymbolInfo`](../api/diagram/symbolPaletteModel/#getsymbolinfo) property, allowing information to assist users in understanding the function or meaning of each symbol.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs2" %}
+
+### Text wrapping and text overflow
+
+The descriptive text that appears beneath each symbol can vary in length. In cases where the text might overlap neighboring symbols in the palette, text wrapping is employed. Text wrapping is controlled using the wrap property of symbolInfo, which supports three modes: `Wrap`, `NoWrap`, `WrapWithOverflow`. By default, text wrapping is set to '`Wrap`'.
+
+Additionally, to handle overflowing text, the overflow property can be used. By default, textOverflow is set to '`Ellipsis`', which truncates overflowing text with an ellipsis (...).
+
+The following example demonstrates how text wrapping and text overflow are applied based on the symbol ID:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-wrap/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-wrap/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-wrap" %}
+
+### Appearance of symbol description
+
+The appearance of a symbol description in the palette can be customized by changing its [`color`](../api/diagram/symbolDescription/#color) , [`fill`](../api/diagram/symbolDescription/#fill), [`fontSize`](../api/diagram/symbolDescription/#fontsize) , [`fontFamily`](../api/diagram/symbolDescription/#fontfamily), [`bold`](../api/diagram/symbolDescription/#bold) [`italic`](../api/diagram/symbolDescription/#italic), [`textDecoration`](../api/diagram/textDecoration/) and [`margin`](../api/diagram/symbolDescription/#margin)
+
+The following code example shows how to customize the symbol description.
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs9/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs9" %}
+
+
+## Symbol size and symbol margin
+
+The size of the individual symbol can be customized. The [`symbolWidth`](../api/diagram/symbolPaletteModel/#symbolwidth) and [`symbolHeight`](../api/diagram/symbolPaletteModel/#symbolheight) properties of node enables you to define the size of the symbols.
+
+The [`symbolMargin`](../api/diagram/symbolPaletteModel/#symbolmargin) defines the space between the shape and its outer boundary. By setting the symbol margin with specific values for left, right, top, and bottom, you can create consistent spacing on all sides around the shape. This ensures there is adequate padding between the shape and its outer boundary.
+
+The following code example illustrates how to set symbol size and symbol margin for the symbol palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs5" %}
+
+## Symbol preview
+
+The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPaletteModel/#symbolpreview) property of symbol palette.The [`width`](../api/diagram/symbolPreviewModel/#width) and [`height`](../api/diagram/symbolPreviewModel/#height) properties of `symbolPreview` allow you to define the preview size for all the symbol palette items. The The [`offset`](../api/diagram/symbolPreviewModel/#offset) property specifies the position of the dragging helper relative to the mouse cursor.
+
+The following code example illustrates how to change the preview size of a palette item.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs6/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs6/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs6" %}
+
+## Symbol drag size
+
+The [`symbolDragSize`](../api/diagram/symbolPaletteModel/#symboldragsize) property sets the dimensions (height and width) of a shape while it is being dragged from the palette to the diagram canvas. The following code illustrates how to set `symbolDragSize` for the symbol palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-dragSize/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-dragSize/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-dragSize" %}
+
+
+## Expand Mode
+
+You can customize whether to expand all the palettes of symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](../api/diagram/symbolPaletteModel/#expandmode) property of symbol palette.
+
+You can customize whether to expand all the palettes of the symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](../api/diagram/symbolPaletteModel/#expandmode) property of the symbol palette.
+
+The following example demonstrates how to set the `expandMode` property to control the expansion behavior of the palettes:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-expandMode/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-expandMode/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-expandMode" %}
+
+
+### Restrict expand/collapse of the palette
+
+The symbol palette panel can be restricted from expanding. When we click on the expand icon of the palette, the [paletteExpanding](../api/diagram/symbolPaletteModel/#paletteexpanding) event is triggered. In this event, we can determine whether the palette's panel should be expanded or collapsed by utilizing the `cancel` argument of the event. By default, the panel is expanded. This restriction can be applied to each palette in the symbol palette as desired.
+
+In the following code example, the basic shapes palette is restricted from expanding, and the flow shapes palette is restricted from collapsing, whereas the swimlane shapes palette can be expanded or collapsed:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs3" %}
+
+## Tooltip for symbols in symbol palette
+
+The Symbol palette supports displaying tooltips when mouse hovers over the symbols. You can customize the tooltip for each symbol in the symbol palette.
+
+### Default tooltip for symbols
+When hovering over symbols in the symbol palette, the default tooltip displays the symbol's ID.
+Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
+
+
+
+
+### Custom tooltip for symbols
+
+To customize the tooltips for symbols in the symbol palette, assign a custom tooltip to the [`content`](../api/diagram/diagramTooltipModel/#content) property of [`tooltip`](../api/diagram/diagramtooltipmodel/) for each symbol. Once you define the custom tooltip, enable the [`Tooltip`](../api/diagram/nodeConstraints/) constraints for each symbol to ensure the tooltips are displayed when users hover over them.
+
+The code provided below demonstrates how to define tooltip content for symbols within a symbol palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs8/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs8/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs8" %}
+
+### How to provide different tooltip for Symbol palette and diagram elements.
+
+To differentiate the tooltips between symbols in the symbol palette and the dropped nodes, utilize the dragEnter event. In the symbol palette, you can define tooltips for the symbols. When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`dragEnter`](../api/diagram/iDragEnterEventArgs/) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the node.
+
+The following code example demonstrates how to define different tooltips for the same symbol in the symbol palette and for the dropped node in the diagram canvas.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs10/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs10/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs10" %}
+
+The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
+
+
+
+The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
+
+## Lacalization
+
+To localize the symbol palette search box, we need to define the [`locale`](../api/diagram/symbolPaletteModel/#locale) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany.
+
+The following code shows how to localize symbol palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/locale-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/locale-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/locale-cs2" %}
+
+## Restrict symbol dragging from palette
+
+You can restrict the symbols getting dragged from the symbol palette by setting the [`allowDrag`](../api/diagram/symbolPaletteModel/#allowdrag) property of symbol palette as false. By default, the allowDrag is set as **true**.
+
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs11/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs11/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs11" %}
+
+
+## Search symbol
+
+The diagram provides support for enabling the search option in the palette. The [`enableSearch`](../api/diagram/symbolPaletteModel/#enablesearch) property of the palette is used to show or hide the search textbox in the palette. You can search for symbols in the palette by entering the symbol ID (e.g., “rectangle”) and search keywords into the search text box. The symbols are retrieved by matching the value of the ID property with the string entered in the search textbox.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-search/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-search/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-search" %}
+
+## Ignore symbols on search
+
+The [`ignoreSymbolsOnSearch`](../api/diagram/symbolPaletteModel/#ignoresymbolsonsearch) property allows you to specify which symbols should be excluded from search results within the symbol palette. By setting this property, you can control the visibility of specific symbols during a search operation. This feature is useful for hiding certain symbols that you don't want to be shown via search.
+
+In the following example, we ignored the symbol with the ID of 'plus', so it will not appear in the search results.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-ignoreSearch/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-ignoreSearch/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-ignoreSearch" %}
+
+## Filter search
+
+You can filter the search results based on your specific requirements. To achieve this, customize the [`filterSymbols`](../api/diagram/symbolPaletteModel/#filtersymbols) method of the symbol palette according to your needs. In the following example, we filter the results to display only flow shapes in the search palette.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs13/index.to %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs13" %}
+
+
+N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed
+
+## See Also
+
+* [How to add the symbol to the diagram](./nodes)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/palette-events.md b/ej2-javascript/diagram/ts/palette-events.md
new file mode 100644
index 000000000..2ef986960
--- /dev/null
+++ b/ej2-javascript/diagram/ts/palette-events.md
@@ -0,0 +1,105 @@
+---
+layout: post
+title: Symbol Palette Events in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Symbol palette
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Symbol Palette events in ##Platform_Name## Diagram control
+
+There are some events which will get triggered while interacting with the symbol palette. They are explained below.
+
+## DragEnter event
+
+[`DragEnter`](../api/diagram/iDragEnterEventArgs/) event triggers when the shape enters the diagram surface while dragging it from symbol palette. You can customize the style of the dragged shape using this event. This allows for dynamic styling changes based on the diagram's context.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs19/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs19/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs19" %}
+
+## DragLeave event
+
+[`DragLeave`](../api/diagram/iDragLeaveEventArgs/) event occurs when a shape leaves the diagram surface after being dragged inside but not dropped. This can be useful for resetting styles or handling any clean-up tasks when a shape is not intended to be placed on the diagram.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs20/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs20/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs20" %}
+
+## DragOver event
+
+[`DragOver`](../api/diagram/iDragOverEventArgs/) event triggered when a shape is dragged over diagram while being moved from the symbol palette. This event can be used to provide visual feedback or to determine if the current drop target is valid.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs21/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs21/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs21" %}
+
+## Drop event
+
+[`Drop`](../api/diagram/idropeventargs/) event triggered when a shape is dropped onto the diagram surface. This event is useful for customizing the shape's appearance and properties after it is dropped.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs22/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs22/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs22" %}
+
+## PaletteExpanding event
+
+[`PaletteExpanding`](../api/diagram/iPaletteExpandArgs/) event triggered when the palette expanded / collapsed.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs23/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs23/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs23" %}
+
+## PaletteSelectionChange event
+
+[`PaletteSelectionChange`](../api/diagram/iPaletteSelectionChangeArgs/) event triggered after the selection changes in the symbol palette. This event can be used to enable/disable functionality based on the selected symbol.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs24/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/symbol-palette-cs24/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs24" %}
+
diff --git a/ej2-javascript/diagram/ts/print.md b/ej2-javascript/diagram/ts/print.md
new file mode 100644
index 000000000..4bfff6675
--- /dev/null
+++ b/ej2-javascript/diagram/ts/print.md
@@ -0,0 +1,133 @@
+---
+layout: post
+title: Print in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Export in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Print
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Print in ##Platform_Name## Diagram control
+
+The [`print`](../api/diagram#print) method helps to print the diagram as image.
+
+```JavaScript
+
+ let options: IPrintOptions = {};
+ diagram.print(options);
+
+```
+
+N> To Print diagram you need to inject `PrintAndExport` in the diagram.
+
+## Print Options
+
+The diagram can be customized while printing using the following properties of [`printOptions`](../api/diagram/iPrintOptions/).
+
+The available print options are listed in the table below.
+
+| Name | Type | Description|
+|-------- | -------- | -------- |
+| region | enum | Sets the region of the diagram to be printed. |
+| margin | object | Sets the margin of the page to be printed. |
+| stretch| enum | Resizes the diagram content to fill its allocated space and printed.|
+| multiplePage | boolean | Prints the diagram into multiple pages. |
+| pageWidth | number | Sets the page width of the diagram while printing the diagram into multiple pages. |
+| pageHeight| number | Sets the page height of the diagram while printing the diagram into multiple pages.|
+| pageOrientation | enum | Sets the orientation of the page. |
+
+### Region
+
+Printing particular region of diagram is possible by using the [`region`](../api/diagram/iPrintOptions/#region) property of the [`printOptions`](../api/diagram/iPrintOptions/).
+
+The following code example illustrates how to print the diagram based on region.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/print-cs-1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-1" %}
+
+### Multiple page
+
+Printing a diagram across multiple pages is possible by setting the [`multiplePage`](../api/diagram/iPrintOptions/#multiplepage) property of `printOptions` to true.
+
+The following code example demonstrates how to set multiplePage to true:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/print-cs-2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-2" %}
+
+### Margin
+
+The margin for the print region can be set using the [`margin`](../api/diagram/iPrintOptions/#margin) property of the `printOptions`
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/print-cs-4/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-4/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-4" %}
+
+### Page width and Page height
+
+The [`pageWidth`](../api/diagram/iPrintOptions/#pageheight) and [`pageHeight`](../api/diagram/iPrintOptions/#pagewidth) property of `printOptions` is used to set the size of the printing image. The following example demonstrates how to set the pageWidth and pageHeight.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/print-cs-3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-3" %}
+
+### Page Orientation
+
+[`pageOrientation`](../api/diagram/iPrintOptions/#pageorientation) of `printOptions` is used to set the orientation of the page to be printed.
+
+* Landscape - Display with page Width is more than the page Height.
+* Portrait - Display with page Height is more than the page width.
+
+The following example shows how to set pageOrientation for the printOptions.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/print-cs-5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/print-cs-5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/print-cs-5" %}
+
+
+## Limitations
+
+
+Currently, printing diagram with native and HTML nodes is not supported. To overcome this limitation, we make use of the Syncfusion Essential PDF library. This library incorporates the Syncfusion Essential HTML converter, which employs the advanced Blink rendering engine. This converter seamlessly transforms HTML content into images. Refer to [`export Html-and-Native node`](https://support.syncfusion.com/kb/article/14031/how-to-export-html-node-using-blink-rendering-in-javascript-diagram) kb for more information.
+
+## See Also
+
+* [How to Print multiple diagrams in single click](https://support.syncfusion.com/kb/article/15143/how-to-print-multiple-diagrams-in-a-single-shot-in-javascript)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/serialization.md b/ej2-javascript/diagram/ts/serialization.md
index 827774cc4..946f40a31 100644
--- a/ej2-javascript/diagram/ts/serialization.md
+++ b/ej2-javascript/diagram/ts/serialization.md
@@ -11,42 +11,46 @@ domainurl: ##DomainURL##
# Serialization in ##Platform_Name## Diagram control
-**Serialization** is the process of saving and loading for state persistence of the diagram.
+**Serialization** is the process of converting the state of the diagram into a format that can be saved and later restored. This ensures that the diagram's current state, including its nodes, connectors, and configurations, can be persisted across sessions.
+
+Serialization involves saving the diagram's state as a JSON string, which can then be stored in a database, file, or other storage medium. When needed, the serialized string can be deserialized to recreate the diagram in its previous state.
## Save
-The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](../api/diagram#saveDiagram) helps to serialize the diagram as a string. The following code illustrates how to save the diagram.
+The diagram method [`saveDiagram`](../api/diagram/#savediagram), helps to serialize the diagram as a string. This method captures the entire diagram's configuration and content, converting it into a string representation.
+
+The following code illustrates how to save the diagram:
```ts
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-let saveData: string;
//returns serialized string of the Diagram
-saveData = diagram.saveDiagram();
+var savedData = diagram.saveDiagram();
```
-This string can be converted to JSON data and stored for future use. The following snippet illustrates how to save the serialized string into local storage.
+This JSON string can be stored in local storage for future use. The following code illustrates how to save the serialized string into local storage and how to retrieve it:
```ts
-//Saves the string in to local storage
-localStorage.setItem('fileName', saveData);
-saveData = localStorage.getItem('fileName');
+// Store the serialized string in local storage
+localStorage.setItem('fileName', savedData);
+
+// Retrieve the saved string from local storage
+savedData = localStorage.getItem('fileName');
```
-Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to `Print and Export`.
+The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print.md) and [`Export`](./export.md) section.
## Load
-Diagram is loaded from the serialized string data by client-side method, [`loadDiagram`](../api/diagram#loadDiagram). The following code illustrates how to load the diagram from serialized string data.
+The diagram can be loaded from serialized string data using the [`loadDiagram`](../api/diagram#loadDiagram) method. The saved string should be passed as the parameter of the loadDiagram method. The following code illustrates how to load the diagram from serialized string data:
```ts
-let diagramElement = document.getElementById('element');
-let diagram: Object[] = diagramElement.ej2_instances[0];
-
-//Loads the diagram from saved json data
-diagram.loadDiagram(saveData);
+/*
+ * Loads the diagram from saved JSON data.
+ * parameter 1 - The string representing the diagram model JSON to be loaded.
+ * parameter 2 - Whether it is ej1 data or not (optional)
+ */
+diagram.loadDiagram(savedData);
```
@@ -56,11 +60,33 @@ N> Before loading a new diagram, existing diagram is cleared.
The [`preventDefaults`](../api/diagram/serializationSettingsModel) property of serializationSettings is used to simplifying the saved JSON object without adding the default properties that are presented in the diagram.
-The following code illustrates how to simplify the JSON object.
+The [`preventDefaults`](../api/diagram/serializationSettingsModel/#preventdefaults) property of [`serializationSettings`](../api/diagram/serializationSettingsModel/) is used to simplify the saved JSON object by excluding default properties that are inherent to the diagram. This helps reduce the size of the serialized data and improves efficiency when saving and loading diagrams.
+
+By enabling preventDefaults, only properties that you set in diagram are included in the serialized JSON object. This optimization is useful for scenarios where minimizing data size is crucial, such as in applications with large diagrams or when optimizing network transfers.
+
+The following code illustrates how to enable the preventDefaults property to simplify the JSON object:
+
```ts
-let diagram: Diagram = new Diagram({
+let diagram = new Diagram({
serializationSettings: { preventDefaults: true },
});
-```
\ No newline at end of file
+```
+
+## Save and load diagram using uploader control
+
+The JSON files can be uploaded using the uploader component, where they are parsed to extract the JSON data they contain. To achieve this, configure the uploader component with the saveUrl property to receive uploaded files and store them on the server. Similarly, use the removeUrl property to handle file removal operations on the server.
+
+When a JSON file is uploaded, it undergoes parsing to extract its JSON data. This data is then loaded into the diagram using the [`loadDiagram`](../api/diagram#loadDiagram) method.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/serialisation-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/serialisation-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/serialisation-cs1" %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/symbol-palette.md b/ej2-javascript/diagram/ts/symbol-palette.md
index 15a0eef79..63c9ec778 100644
--- a/ej2-javascript/diagram/ts/symbol-palette.md
+++ b/ej2-javascript/diagram/ts/symbol-palette.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Symbol Palette in ##Platform_Name## Diagram Control | Syncfusion
-description: Learn here all about Symbol Palette in Syncfusion Essential ##Platform_Name## Diagram control, its elements and more.
+title: Symbol palette in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Symbol palette
publishingplatform: ##Platform_Name##
@@ -9,278 +9,195 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Symbol Palette in ##Platform_Name## Diagram Control
+# Symbol palette in ##Platform_Name## Diagram control
-The **SymbolPalette** displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram.
+The [`symbolPalette`](../api/diagram/symbolPaletteModel/) is a gallery of reusable symbols and diagram elements that can be dragged and dropped on the diagram surface multiple times.
## Create symbol palette
-The [`width`](../api/diagram/palette/#width-number) and [`height`](../api/diagram/palette/#height-number) properties of the symbol palette allows to define the size of the symbol palette.
+The [`width`](../api/diagram/symbolPaletteModel/#width) and [`height`](../api/diagram/symbolPaletteModel/#height) properties of the symbol palette allows you to define the size of the symbol palette.
-```ts
-import {
- SymbolPalette
-} from '@syncfusion/ej2-diagrams';
+```javascript
+ej.diagrams.Diagram.Inject(ej.diagrams.SymbolPalette);
//Initializes the symbol palette
-
-let palette: SymbolPalette = new SymbolPalette({
+var palette = new ej.diagrams.SymbolPalette({
width: '100%',
height: '700px',
-});
-palette.appendTo('#element');
+},'#element');
```
-## Add palettes to SymbolPalette
+## Add nodes and palettes to SymbolPalette
-A palette allows to display a group of related symbols and it textually annotates the group with its header. A [`Palettes`](../api/diagram/palette/#palettes-PaletteModel[]) can be added as a collection of symbol groups.
+The collection of predefined symbols can be added to palettes using the [`symbols`](../api/diagram/paletteModel/#symbols) property.
-The collection of predefined symbols can be added in palettes using the [`symbols`](../api/diagram/palette/#symbols-[]) property.
+A palette displays a group of related symbols and textually annotates the group with its header. A [`Palettes`](../api/diagram/paletteModel/) can be added as a collection of symbol groups.
-To initialize a palette, define a JSON object with the property [`ID`](../api/diagram/palette/#id-string) that is unique ID is set to the palettes.
+To initialize a palette, define a JSON object with the unique property [`ID`](../api/diagram/paletteModel/#id). Additionally, include the symbols property, which contains an array of different symbols.
-The following code example illustrates how to define a palette and how its added to symbol palette.
+The following code example illustrates how to define symbols in a palette and how to add them to the symbol palette:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs10/index.ts %}
+{% include code-snippet/diagram/symbol-palette-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs10/index.html %}
+{% include code-snippet/diagram/symbol-palette-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs10" %}
-
-## Customize the palette header
-
-Palettes can be annotated with its header texts.
-
-The [`title`](../api/diagram/palette/#title-string) displayed as the header text of palette.
-
-The [`expanded`](../api/diagram/palette/#expanded-boolean) property of palette allows to expand/collapse its palette items.
-
-The [`height`](../api/diagram/palette/#height-number) property of palette sets the height of the symbol group.
-
-The [`iconCss`](../api/diagram/palette/#iconCss-string) property sets the content of the symbol group.
-
-The [`description`](../api/diagram/symbolDescription/#description) defines the text to be displayed and how that is to be handled in `getSymbolInfo`.
-
-Also, any HTML element into a palette header can be embedded by defining the getSymbolInfo property.
-The following code example illustrates how to customize palette headers.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs11/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs11/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs11" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs1" %}
-## Restrict expansion of the palette panel
+## Add connectors in symbol palette
-The symbol palette panel can be restricted from getting expanded. The [`cancel`] argument of the [`paletteExpanding`] property defines whether the palette's panel should be expanded or collapsed. By default, the panel is expanded. This restriction can be done for each of the palettes in the symbol palette as desired. In the following code example the basic shapes palette is restricted from getting collapsed whereas the swimlane shapes palette can be expanded or collapsed.
+Connectors can be added to the symbol palette by defining them in the symbols array of the palette.
+The following example shows how to render connectors in the symbol palette:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs12/index.ts %}
+{% include code-snippet/diagram/symbol-palette-con/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs12/index.html %}
+{% include code-snippet/diagram/symbol-palette-con/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs12" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-con" %}
-## Stretch the symbols into the palette
+## Add group nodes in symbol palette
-The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
+The symbol palette supports adding group nodes. To add group nodes to the palette, the child nodes should be defined first, followed by the parent node. Refer to the following code to see how to render group nodes in the symbol palette:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs13/index.ts %}
+{% include code-snippet/diagram/symbol-palette-group/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs13/index.html %}
+{% include code-snippet/diagram/symbol-palette-group/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs13" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-group" %}
-## Add/Remove symbols to palette at runtime
+## Drag and drop symbols from palette to diagram
-* Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette/#addPaletteItem-number).
+To drag and drop symbols from the palette to the diagram canvas, mousedown on the desired symbol in the palette, drag it to the desired location on the diagram canvas, and release the mouse button to drop it.
-* Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette/#removePaletteItem-number).
+
-## Customize the size of symbols
+## Add symbols to palette at runtime
-The size of the individual symbol can be customized. The [`symbolWidth`](../api/diagram/symbolPaletteModel/#symbolwidth) and [`symbolHeight`](../api/diagram/symbolPaletteModel/#symbolheight) properties of node enables you to define the size of the symbols. The following code example illustrates how to change the size of a symbol.
+Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette/#addPaletteItem-number). The following example shows how to add shapes to the palette at runtime.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs14/index.ts %}
+{% include code-snippet/diagram/symbol-palette-add/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs14/index.html %}
+{% include code-snippet/diagram/symbol-palette-add/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs14" %}
-
-The [`symbolMargin`](../api/diagram/symbolPaletteModel/#symbolmargin) property is used to create the space around elements, outside of any defined borders.
-
-## Symbol preview
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-add" %}
-The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPreview/). The [`width`](../api/diagram/symbolPreview/#width-number) and [`height`](../api/diagram/symbolPreview/#height-number) properties of SymbolPalette enables you to define the preview size to all the symbol palette items. The [`offset`](../api/diagram/symbolPreview/#offset-PointModel) of the dragging helper relative to the mouse cursor.
+## Remove symbols from palette at runtime
-The following code example illustrates how to change the preview size of a palette item.
+Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette/#removePaletteItem-number). The following example shows how to remove shapes from the palette at runtime.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs15/index.ts %}
+{% include code-snippet/diagram/symbol-palette-remove/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs15/index.html %}
+{% include code-snippet/diagram/symbol-palette-remove/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs15" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-remove" %}
-## Default settings
+## Symbol defaults
-While adding more number of symbols such as nodes and connectors to the palette, define the default settings for those objects through the [`getNodeDefaults`](../api/diagram/symbolPaletteModel/#getnodedefaults) and the [`getConnectorDefaults`](../api/diagram/symbolPaletteModel/#getconnectordefaults) properties of diagram allows to define the default settings for nodes and connectors.
+While adding more symbols such as nodes and connectors to the palette, you can define the default settings for these objects using the [`getNodeDefaults`](../api/diagram/symbolPaletteModel/#getnodedefaults) and the [`getConnectorDefaults`](../api/diagram/symbolPaletteModel/#getconnectordefaults) properties of the diagram. These properties allow you to specify default configurations for nodes and connectors, ensuring consistency and saving time when adding multiple symbols. By setting these properties, you can predefine attributes such as size, color, shape for nodes and line style, thickness, for connectors.
+
+In the following example, the fill color of node and target decorator shape of connector is defined in getNodeDefaults and getConnectorDefaults respectively.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs16/index.ts %}
+{% include code-snippet/diagram/symbol-palette-cs7/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs16/index.html %}
+{% include code-snippet/diagram/symbol-palette-cs7/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs16" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs7" %}
+
+## Add palettes at runtime
-## Adding symbol description for symbols in the palette
+You can dynamically add palettes to the symbol palette at runtime to enhance flexibility and customization. This allows you to introduce new groups of symbols as needed without having to reload or reinitialize the diagram. The `addPalettes` method of the symbol palette enables you to create and configure new palettes programmatically. This method takes parameters that define the palette's properties, such as the palette `ID`, `title`, and the `symbols` it contains.
-The diagram provides support to add symbol description below each symbol of a palette. This descriptive representation of each symbol will enhance the details of the symbol visually. The height and width of the symbol description can also be set individually.
-* The property `getSymbolInfo`, can be used to add the symbol description at runtime.
- The following code is an example to set a symbol description for symbols in the palette.
+Follow the example below to see how to add a palette at runtime.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs17/index.ts %}
+{% include code-snippet/diagram/symbol-palette-addPalette/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs17/index.html %}
+{% include code-snippet/diagram/symbol-palette-addPalette/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs17" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-addPalette" %}
+
-## Appearance of symbol description
+## Remove palettes at runtime
-The appearance of a symbol description in the palette can be customized by changing its `color,` `fontSize,` `fontFamily,` `bold,` `italic,` `textDecoration,` and `margin.`
+You can remove palettes from the symbol palette at runtime. There are two ways to do this:
-The following code is an example to change the color of a symbol description for symbols in the palette.
+* Use the `removePalette` method to remove a single palette by its ID.
+* Use the `removePalettes` method to remove multiple palettes by passing an array of palette IDs as a parameter.
- {% tabs %}
+Follow the example below to see how to remove palettes at runtime.
+
+{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/symbol-palette-cs18/index.ts %}
+{% include code-snippet/diagram/symbol-palette-removePalette/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs18/index.html %}
+{% include code-snippet/diagram/symbol-palette-removePalette/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs18" %}
-
-## Tooltip for symbols in symbol palette
-
-The Symbol palette supports displaying tooltips when mouse hovers over the symbols. You can customize the tooltip for each symbol in the symbol palette.
-
-### Default tooltip for symbols
-When hovering over symbols in the symbol palette, the default tooltip displays the symbol's ID.
-Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
-
-
-
+
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-removePalette" %}
-### Custom tooltip for symbols
-To customize the tooltips for symbols in the symbol palette, assign a custom tooltip to the 'Tooltip' content property of each symbol. Once you define the custom tooltip, enable the Tooltip constraints for each symbol, ensuring that the tooltips are displayed when users hover over them.
+## Stretch the symbols into the palette
-Here, the code provided below demonstrates how to define tooltip content to symbols within a symbol palette.
+The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.js %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/symbol-palette-cs4/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/symbol-palette-cs6/index.html %}
+{% include code-snippet/diagram/symbol-palette-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs6" %}
-
-### How to provide different tooltip for Symbol palette and diagram elements.
+{% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-cs4" %}
-Differentiate the tooltips between symbols in the symbol palette and dropped nodes by utilizing the dragEnter event. When a custom tooltip is defined for a symbol, it will be displayed for both the symbol and the dropped node in the diagram canvas. However, to provide distinct tooltips for symbols in the palette and dropped nodes, capture the dragEnter event and assign specific tooltips dynamically.
-When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node.
+## Refresh symbol palette
-The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
-
-
-
-
-The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
+The `refresh` method allows you to refresh the symbols dynamically in the SymbolPalette.
```ts
- let diagram: Diagram = new Diagram({
- width: '100%', height: '500px',
- connectors: connectors, nodes: nodes,
- //event to change tooltip content while dragging symbols into Diagram
- dragEnter: dragEnter,
- });
- diagram.appendTo('#diagram');
-
-function dragEnter(args:IDragEnterEventArgs)
- {
- //enable tooltip connstraints for the dragged symbol
- args.dragItem.constraints = NodeConstraints.Default | NodeConstraints.Tooltip;
-
- //change the tooltip content of the dragged symbol
- args.dragItem.tooltip.content='This is Diagram Tooltip';
- }
-```
-
-## Palette interaction
-
-Palette interaction notifies the element enter, leave, and dragging of the symbols into the diagram.
-
-## DragEnter
+//To refresh the symbols in symbol palette
+symbolPalette.refresh();
-[`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) notifies, when the element enter into the diagram from symbol palette.
-
-## DragLeave
-
-[`DragLeave`] [`IDragLeaveEventArgs`](../api/diagram/iDragLeaveEventArgs/) notifies, when the element leaves from the diagram.
-
-## DragOver
-
-[`DragOver`] [`IDragOverEventArgs`](../api/diagram/iDragOverEventArgs/) notifies, when an element drag over another diagram element.
-
-N> The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed
-
-## See Also
+```
-* [How to add the symbol to the diagram](./nodes)
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/tools.md b/ej2-javascript/diagram/ts/tools.md
index d75d944a7..fa827cf0c 100644
--- a/ej2-javascript/diagram/ts/tools.md
+++ b/ej2-javascript/diagram/ts/tools.md
@@ -11,164 +11,192 @@ domainurl: ##DomainURL##
# Tools in ##Platform_Name## Diagram control
+The tools in the diagram control can perform various actions such as selecting, panning, and drawing. These tools are explained below.
+
+- `Select`: Allows you to choose specific elements within the diagram.
+- `Pan`: Enables you to move the view of the diagram to different areas without altering the elements.
+- `Draw`: Provides the ability to draw new shapes, connectors, on the diagram surface.
+
+These tools are essential for creating, editing, and navigating complex diagrams efficiently.
+
## Drawing tools
Drawing tool allows you to draw any kind of node/connector during runtime by clicking and dragging on the diagram page.
-## Shapes
+### Draw nodes
-To draw a shape, set the JSON of that shape to the drawType property of the diagram and activate the drawing tool by using the [`tool`](../api/diagram) property. The following code example illustrates how to draw a rectangle at runtime.
+To draw a shape, set the JSON of that shape to the [`drawingObject`](../api/diagram/#drawingobject) property of the diagram and activate the drawing tool by using the [`tool`](../api/diagram#tool) property. The following code example illustrates how to draw a rectangle at runtime:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs10/index.ts %}
+{% include code-snippet/diagram/Tools-cs1/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs10/index.html %}
+{% include code-snippet/diagram/Tools-cs1/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs10" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs1" %}
-The following code example illustrates how to draw a path.
+The following code example illustrates how to draw a path shape.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs11/index.ts %}
+{% include code-snippet/diagram/Tools-cs2/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs11/index.html %}
+{% include code-snippet/diagram/Tools-cs2/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs11" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs1" %}
-## Connectors
+### Text Nodes
-To draw connectors, set the JSON of the connector to the drawType property. The drawing [`tool`](../api/diagram) can be activated by using the tool property. The following code example illustrates how to draw a straight line connector.
+Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add thae content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs12/index.ts %}
+{% include code-snippet/diagram/Tools-cs4/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs12/index.html %}
+{% include code-snippet/diagram/Tools-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs12" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs4" %}
-## Text
+### Draw Connectors
-Diagram allows you to create a textNode, when you click on the diagram page. The following code illustrates how to draw a text.
+To draw connector, set the JSON of that connector to the [`drawingObject`](../api/diagram/#drawingobject) property of the diagram. The drawing tool can be activated by using the [`tool`](../api/diagram/#tool) property. The following code example illustrates how to draw different types of connector using drawing tool.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs13/index.ts %}
+{% include code-snippet/diagram/Tools-cs3/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs13/index.html %}
+{% include code-snippet/diagram/Tools-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs13" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs3" %}
+
+
+### Polygon shape
-Once you activate the TextTool, perform label editing of a node/connector.
+The diagram allows you to create polygon shapes by clicking and moving the mouse at runtime on the diagram page. This interactive feature enables users to define custom shapes with multiple sides by specifying points directly on the diagram canvas.
-**Polygon shape**
-Diagram allows to create the polygon shape by clicking and moving the mouse at runtime on the diagram page.
+To draw a polygon shape, you need to set the [`drawingObject`](../api/diagram/#drawingobject) property with the appropriate JSON configuration for a `polygon`. This includes specifying the type as 'Polygon'.
-The following code illustrates how to draw a polygon shape.
+The following code illustrates how to draw a polygon shape at runtime:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs14/index.ts %}
+{% include code-snippet/diagram/Tools-cs5/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs14/index.html %}
+{% include code-snippet/diagram/Tools-cs5/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs14" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs5" %}
-## Polyline Connector
+
-Diagram allows to create the polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.
+### Polyline Connector
-The following code illustrates how to draw a polyline connector.
+The diagram control enables users to create polyline connectors interactively by clicking and dragging the mouse on the diagram canvas at runtime. It allows creating polyline segments with straight lines and angled vertices at control points directly within the diagram interface.
+
+To draw a polyline connector, set the type of the [`drawingObject`](../api/diagram/#drawingobject) as '`Polyline`'.
+
+The following code illustrates how to draw a Polyline connector at runtime:
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs15/index.ts %}
+{% include code-snippet/diagram/Tools-cs6/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs15/index.html %}
+{% include code-snippet/diagram/Tools-cs6/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs15" %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs6" %}
+
+The segments of a polyline connector can be adjusted at runtime by dragging the segment thumb, as shown in the image below. To enable segment editing, you should set the [`DragSegmentThumb`](../api/diagram/connectorConstraints/) constraint for the connector.
+
+
+
+N> To make the segment thumb visible, inject the [`ConnectorEditing`](../api/diagram/connectorEditing/) module into the diagram.
+
+### Freehand Drawing
+
+The diagram supports free-hand drawing, allowing users to draw anything independently on the diagram page. Free-hand drawing is enabled by setting the type of the [`drawingObject`](../api/diagram/#drawingobject) property to '`Freehand`'.
+
+The following code illustrates how to perform freehand drawing:
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/Tools-cs9/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/Tools-cs9/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs9" %}
+
+The segments of a freehand connector can be adjusted at runtime by dragging the segment thumb, as shown in the image below. To enable segment editing, you should set the [`DragSegmentThumb`](../api/diagram/connectorConstraints/) constraint for the connector.
+
+
## Tool selection
There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows.
* Draw selection rectangle: MultipleSelect tool
-* Pan the diagram: Zoom pan
-* Draw nodes/connectors: DrawOnce/DrawOnce
+* Pan the diagram: ZoomPan tool
+* Draw nodes/connectors: DrawOnce/ContinuousDraw tool
-As all the three behaviors are completely different, you can achieve only one behavior at a time based on the tool that you choose.
-When more than one of those tools are applied, a tool is activated based on the precedence given in the following table.
+Since these behaviors are distinct, only one can be active at a time based on the selected tool. When multiple tools are applied, precedence is determined as follows:
|Precedence|Tools|Description|
|----------|-----|-----------|
|1st|ContinuesDraw|Allows you to draw the nodes or connectors continuously. Once it is activated, you cannot perform any other interaction in the diagram.|
|2nd|DrawOnce|Allows you to draw a single node or connector. Once you complete the DrawOnce action, SingleSelect, and MultipleSelect tools are automatically enabled.|
|3rd|ZoomPan|Allows you to pan the diagram. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.|
-|4th|MultipleSelect|Allows you to select multiple nodes and connectors. When you enable both the MultipleSelect and ZoomPan tools, cursor hovers the diagram. When panning is enabled, you cannot select multiple nodes.|
+|4th|MultipleSelect|Allows you to select multiple nodes and connectors. If both the MultipleSelect and ZoomPan tools are enabled, the rubber band selection (click and drag to select) is disabled when hovering over the diagram. However, panning is enabled while hovering over the diagram. To select multiple nodes, hold down the CTRL key and click on each node you want to select. Similarly, to unselect a node that is already selected, hold down the CTRL key and click on the node again.|
|5th|SingleSelect|Allows you to select individual nodes or connectors.|
|6th|None|Disables all tools.|
-Set the desired [`tool`](../api/diagram) to the tool property of the diagram model. The following code illustrates how to enable Zoom pan in the diagram
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs16/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs16/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs16" %}
+These tools provide flexibility and functionality for creating and interacting with elements within the diagram interface.
-## Events
+### Zoom pan tool
-[`elementDraw`](../api/diagram) event is triggered when node or connector is drawn using drawing tool.
+To activate panning mode set the [`tool`](../api/diagram#tool) property of the diagram as `ZoomPan`. The following code illustrates how to enable Zoom pan in the diagram
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs17/index.ts %}
+{% include code-snippet/diagram/Tools-cs7/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs17/index.html %}
+{% include code-snippet/diagram/Tools-cs7/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs17" %}
-
-## Freehand Drawing
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs7" %}
-Diagram has support for free-hand drawing to draw anything on the diagram page independently. Free-hand drawing will be enabled by using the drawingObject property and setting its value to Freehand.
+## Events
-The following code illustrates how to draw a freehand drawing.
+The [`elementDraw`](../api/diagram/iElementDrawEventArgs/) event is triggered whenever a node or connector is drawn using a drawing tool in the diagram. This event provides a way to capture and respond to actions when elements are created on the canvas.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/Tools-cs18/index.ts %}
+{% include code-snippet/diagram/Tools-cs8/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/Tools-cs18/index.html %}
+{% include code-snippet/diagram/Tools-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs18" %}
\ No newline at end of file
+
+{% previewsample "page.domainurl/code-snippet/diagram/Tools-cs8" %}
+
diff --git a/ej2-javascript/diagram/ts/undo-redo.md b/ej2-javascript/diagram/ts/undo-redo.md
index 027e40b65..c4440cf42 100644
--- a/ej2-javascript/diagram/ts/undo-redo.md
+++ b/ej2-javascript/diagram/ts/undo-redo.md
@@ -149,24 +149,42 @@ diagram.historyManager.push(entry);
```
-## History change event
+## Clear history
-The [`historyChange`](../api/diagram) event triggers, whenever the interaction of the node and connector is take place. When interacting, the entries get added to the history manager to trigger this event.
+The [`clearHistory`](../api/diagram/#clearhistory) method of diagram is used to remove all the recorded actions from the undo and redo history.
+
+```javascript
+//Clears all the histories
+diagram.clearHistory();
+
+```
+## Get history stack
+
+The [`getHistoryStack`](../api/diagram/#gethistorystack) method of the diagram retrieves the [`undoStack`](../api/diagram/history/#undostack) or [`redoStack`](../api/diagram/history/#redostack) from the historyManager. This method takes a single parameter, isUndoStack. Pass true to get the undoStack or false to get the redoStack.
```javascript
+// Fetch undoStack from history manager
+diagram.getHistoryStack(true)
-let diagram = new Diagram({
- width: '100%',
- height: '600px',
- nodes: nodes,
- },'#element');
-// history change event
-diagram.historyChange = (arg) => {
- //causes of history change
- let cause: string = arg.cause;
-}
+// Fetch redoStack from history manager
+diagram.getHistoryStack(false)
```
+## History change event
+
+The [`historyChange`](../api/diagram) event triggers, whenever the interaction of the node and connector is take place. When interacting, the entries get added to the history manager to trigger this event.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/undoredo-historyEvent/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/undoredo-historyEvent/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/undoredo-historyEvent" %}
+
While interacting with diagram, this event can be used to do the customization.
\ No newline at end of file
diff --git a/ej2-javascript/diagram/ts/virtualization.md b/ej2-javascript/diagram/ts/virtualization.md
index 264069d36..f165d0271 100644
--- a/ej2-javascript/diagram/ts/virtualization.md
+++ b/ej2-javascript/diagram/ts/virtualization.md
@@ -9,24 +9,28 @@ documentation: ug
domainurl: ##DomainURL##
---
+
# Virtualization in ##Platform_Name## Diagram control
-## Virtualization in Diagram
+Virtualization is a technique to optimize the performance of diagrams, especially when working with larger diagrams
-Virtualization is the process of loading the diagramming objects available in the visible area of the Diagram control, that is, only the diagramming objects that lie within the ViewPort of the Scroll Viewer are loaded (remaining objects are loaded only when they come into view).
+## Virtualization in Diagram
-This feature gives an optimized performance while loading and dragging items to the Diagram that consists of many Nodes and Connectors.
+Virtualization optimizes the diagram performance by loading only the diagramming objects within the visible area, or ViewPort, of the Scroll Viewer. This means that only the nodes and connectors that are currently in view are loaded, while the remaining objects are loaded dynamically as they come into view.
-The following code illustrates how to enable Virtualization mode in the diagram.
+This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram.
-```ts
+To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints.md/#diagram-constraints).
-//Initialize diagram
-let diagram: Diagram = new Diagram({
- width: '800px', height: '500px',
- //Enable virtualization in diagram
- constraints: DiagramConstraints.Default | DiagramConstraints.Virtualization,
-});
-diagram.appendTo('#diagram');
+The following code example demonstrates how to enable Virtualization mode in the diagram:
-```
\ No newline at end of file
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/virtualization-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/virtualization-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/virtualization-cs1" %}
\ No newline at end of file
diff --git a/ej2-javascript/diagram/umldiagram.md b/ej2-javascript/diagram/umldiagram.md
index e714a31d6..6be6f0365 100644
--- a/ej2-javascript/diagram/umldiagram.md
+++ b/ej2-javascript/diagram/umldiagram.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
## UML Class Diagram
-A class diagram visually depicts the static structure of an application and is extensively employed in modeling object-oriented systems. It holds a unique position in UML diagrams, as it directly aligns with object-oriented languages. The diagram also facilitates the automatic generation of class diagram shapes based on business logic, streamlining the translation from conceptual models to practical implementation.
+A class diagram visually depicts the static structure of an application and is extensively used in modeling object-oriented systems. It holds a unique position among UML diagrams, as it directly aligns with object-oriented languages. The diagram also facilitates the automatic generation of class diagram shapes based on business logic, streamlining the translation from conceptual models to practical implementation.
## UML Class Diagram Shapes
@@ -21,17 +21,17 @@ The UML class diagram shapes are explained as follows.
### Class
-* A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [class] (../api/diagram/umlClassifierShapeModel#class)notation. This notation serves as a foundational element in object-oriented programming, encapsulating the essential characteristics and behavior that objects belonging to the class will exhibit.
+A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [class](../api/diagram/umlClassifierShapeModel#class) notation. This notation serves as a foundational element in object-oriented programming, encapsulating the essential characteristics and behaviors that objects belonging to the class will exhibit.
-* Also, define the [`name`](../api/diagram/umlClassModel/#name), [`attributes`](../api/diagram/umlClassModel/#attributes), and [`methods`](../api/diagram/umlClassModel/#methods) of the class using the class property of node.
+Also, define the [`name`](../api/diagram/umlClassModel/#name), [`attributes`](../api/diagram/umlClassModel/#attributes), and [`methods`](../api/diagram/umlClassModel/#methods) of the class using the class property of node.
-* The attribute’s [`name`](../api/diagram/umlClassAttributeModel/#name), [`type`](../api/diagram/umlClassAttributeModel/#type), and [`scope`](../api/diagram/umlClassAttributeModel/#scope) properties allow you to define the name, data type, and visibility of the attribute.
+The attribute’s [`name`](../api/diagram/umlClassAttributeModel/#name), [`type`](../api/diagram/umlClassAttributeModel/#type), and [`scope`](../api/diagram/umlClassAttributeModel/#scope) properties allow you to define the name, data type, and visibility of the attribute.
-* The method’s [`name`](../api/diagram/umlClassMethodModel/#name), [`parameters`](../api/diagram/umlClassMethodModel/#parameters), [`type`](../api/diagram/umlClassMethodModel/#type), and [`scope`](../api/diagram/umlClassMethodModel/#scope) properties allow you to define the name, parameter, return type, and visibility of the methods.
+The method’s [`name`](../api/diagram/umlClassMethodModel/#name), [`parameters`](../api/diagram/umlClassMethodModel/#parameters), [`type`](../api/diagram/umlClassMethodModel/#type), and [`scope`](../api/diagram/umlClassMethodModel/#scope) properties allow you to define the name, parameter, return type, and visibility of the methods.
-* The method parameters object properties allow you to define the name and type of the parameter.
+The method [`parameters`](../api/diagram/methodArgumentsModel/) property allow you to define the name,type and style of the parameter.
-* The following code example illustrates how to create a class.
+The following code example illustrates how to create a class.
{% if page.publishingplatform == "typescript" %}
@@ -62,17 +62,17 @@ The UML class diagram shapes are explained as follows.
### Interface
-* An interface is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, involves defining the classifier property using the [interface](../api/diagram/umlClassifierShapeModel/#interface) notation. This essential concept in object-oriented programming outlines a contract for classes to adhere to, specifying the required methods and behaviors without delving into the implementation details.
+An [interface](../api/diagram/umlClassifierShapeModel/#interface) is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, you define the classifier property using the interface notation. This foundational concept in object-oriented programming outlines a contract for classes to adhere to, specifying the required methods and behaviors without delving into the implementation details.
-* Also, define the [`name`](../api/diagram/umlInterfaceModel/#name), [`attributes`](../api/diagram/umlInterfaceModel/#attributes), and [`methods`](../api/diagram/umlInterfaceModel/#methods) of the interface using the interface property of the node.
+Additionally, you can define the [`name`](../api/diagram/umlInterfaceModel/#name), [`attributes`](../api/diagram/umlInterfaceModel/#attributes), and [`methods`](../api/diagram/umlInterfaceModel/#methods) of the interface using the interface property of the node.
-* The attribute’s name, type, and scope properties allow you to define the name, data type, and visibility of the attribute.
+The attributes' name, type, and scope properties allow you to specify the name, data type, and visibility of each attribute.
-* The method’s name, parameter, type, and scope properties allow you to define the name, parameter, return type, and visibility of the methods.
+Similarly, the methods' name, parameters, type, and scope properties enable you to define the name, parameters, return type, and visibility of the methods.
-* The method parameter object properties of name and type allow you to define the name and type of the parameter.
+The parameters object within methods allows you to specify the name and type of each parameter.
-* The following code example illustrates how to create an interface.
+The following code example illustrates how to create an interface:
{% if page.publishingplatform == "typescript" %}
@@ -103,11 +103,11 @@ The UML class diagram shapes are explained as follows.
### Enumeration
-* To establish an enumeration, designate the classifier property of the node as [enumeration](../api/diagram/umlClassifierShapeModel/#enumeration). Additionally, define the name and enumerate the members of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific, and named constants within a system.
+To establish an enumeration, designate the classifier property of the node as [enumeration](../api/diagram/umlClassifierShapeModel/#enumeration). Additionally, define the [`name`](../api/diagram/umlEnumerationModel/#name) and enumerate the [`members`](../api/diagram/umlEnumerationMemberModel/) of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific and named constants within a system.
-* You can set a name for the enumeration members collection using the name property of the members collection.
+You can set a name for the enumeration members collection using the [`name`](../api/diagram/umlEnumerationMemberModel/#name) property of the members collection.
-* The following code example illustrates how to create an enumeration.
+The following code example illustrates how to create an enumeration.
{% if page.publishingplatform == "typescript" %}
@@ -139,7 +139,7 @@ The UML class diagram shapes are explained as follows.
## UML Class Relationships
-* A class may be involved in one or more relationships with other classes. A relationship can be one of the following types:
+A class may be involved in one or more relationships with other classes. A relationship can be one of the following types:
| Shape | Image |
@@ -147,17 +147,17 @@ The UML class diagram shapes are explained as follows.
| Association |  |
| Aggregation |  |
| Composition |  |
-| Inheritance |  |
-| Dependency |  |
+| Inheritance |  |
+| Dependency |  |
### Association
-Association is basically a set of links that connects elements of a UML model. The type of association is as follows.
+`Association` is basically a set of links that connects elements of a UML model. The type of association is as follows.
1. Directional
2. BiDirectional
-The association property allows you to define the type of association. The default value of association is “Directional”. The following code example illustrates how to create an association.
+The association property allows you to define the type of association. The default value of association is `“Directional”`. The following code example illustrates how to create an association.
{% if page.publishingplatform == "typescript" %}
@@ -188,7 +188,7 @@ The association property allows you to define the type of association. The defau
### Aggregation
-Aggregation is a binary association between a property and one or more composite objects that group together a set of instances. Aggregation is decorated with a hollow diamond. To create an aggregation shape, define the relationship as “aggregation”.
+`Aggregation` is a binary association between a property and one or more composite objects that group together a set of instances. Aggregation is decorated with a hollow diamond. To create an aggregation shape, define the [`relationship`](../api/diagram/relationShipModel/#relationship) of connector shape as “Aggregation”.
The following code example illustrates how to create an aggregation.
@@ -221,7 +221,7 @@ The following code example illustrates how to create an aggregation.
### Composition
-Composition is a “strong” form of “aggregation”. The composition is decorated with a black diamond. To create a composition shape, define the relationship property of the connector as “composition”.
+Composition is a strong form of `aggregation`. The composition is decorated with a black diamond. To create a composition shape, define the [`relationship`](../api/diagram/relationShipModel/#relationship) property of the connector shape as "Composition".
The following code example illustrates how to create a composition.
@@ -252,72 +252,72 @@ The following code example illustrates how to create a composition.
{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs6" %}
{% endif %}
-### Dependency
+### Inheritance
-Dependency is a directed relationship, which is used to show that some UML elements need or depend on other model elements for specifications. Dependency is shown as a dashed line with an opened arrow. To create a dependency, define the relationship property of the connector as “dependency”.
+Inheritance is also called a “generalization”. Inheritance is a binary taxonomic directed relationship between a more general classifier (superclass) and a more specific classifier (subclass). Inheritance is shown as a line with a hollow triangle.
-The following code example illustrates how to create a dependency.
+To create an inheritance, define the [`relationship`](../api/diagram/relationShipModel/#relationship) as “inheritance”.
+
+The following code example illustrates how to create an inheritance.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/umldiagramshapes-cs7/index.ts %}
+{% include code-snippet/diagram/umldiagramshapes-cs8/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/umldiagramshapes-cs7/index.html %}
+{% include code-snippet/diagram/umldiagramshapes-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs7" %}
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs8" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/umldiagramshapes-cs7/index.js %}
+{% include code-snippet/diagram/umldiagramshapes-cs8/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/umldiagramshapes-cs7/index.html %}
+{% include code-snippet/diagram/umldiagramshapes-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs7" %}
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs8" %}
{% endif %}
-### Inheritance
-
-Inheritance is also called a “generalization”. Inheritance is a binary taxonomic directed relationship between a more general classifier (superclass) and a more specific classifier (subclass). Inheritance is shown as a line with a hollow triangle.
+### Dependency
-To create an inheritance, define the relationship as “inheritance”.
+Dependency is a directed relationship, which is used to show that some UML elements need or depend on other model elements for specifications. Dependency is shown as a dashed line with an opened arrow. To create a dependency, define the [`relationship`](../api/diagram/relationShipModel/#relationship) property of the connector shape as “dependency”.
-The following code example illustrates how to create an inheritance.
+The following code example illustrates how to create a dependency.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/umldiagramshapes-cs8/index.ts %}
+{% include code-snippet/diagram/umldiagramshapes-cs7/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/umldiagramshapes-cs8/index.html %}
+{% include code-snippet/diagram/umldiagramshapes-cs7/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs8" %}
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs7" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/umldiagramshapes-cs8/index.js %}
+{% include code-snippet/diagram/umldiagramshapes-cs7/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/umldiagramshapes-cs8/index.html %}
+{% include code-snippet/diagram/umldiagramshapes-cs7/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs8" %}
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-cs7" %}
{% endif %}
### Multiplicity
@@ -329,17 +329,17 @@ Multiplicity is a definition of an inclusive interval of non-negative integers t
3. OneToMany
4. ManyToMany
-* By default the multiplicity will be considered as “OneToOne”.
+By default the multiplicity will be considered as “OneToOne”.
-* The multiplicity property in UML allows you to specify large number of elements or some collection of elements.
+The multiplicity property in UML allows you to specify large number of elements or some collection of elements.
-* The shape multiplicity’s source property is used to set the source label to the connector and the target property is used to set the target label to the connector.
+The shape multiplicity’s [`source`](../api/diagram/classifierMultiplicityModel/#source) property is used to set the source label to the connector and the [`target`](../api/diagram/classifierMultiplicityModel/#target) property is used to set the target label to the connector.
-* To set an optionality or cardinality for the connector source label, use the optional property.
+To set an optionality or cardinality for the connector source label, use the [`optional`](../api/diagram/multiplicityLabelModel/#optional) property.
-* The [`lowerBounds`](../api/diagram/multiplicityLabelModel/#lowerBounds) and [`upperBounds`](../api/diagram/multiplicityLabelModel/#upperBounds) could be natural constants or constant expressions evaluated to a natural (non negative) number. The upper bound could also be specified as an asterisk ‘\*’ which denotes an unlimited number of elements. The upper bound should be greater than or equal to the lower bound.
+The [`lowerBounds`](../api/diagram/multiplicityLabelModel/#lowerBounds) and [`upperBounds`](../api/diagram/multiplicityLabelModel/#upperBounds) could be natural constants or constant expressions evaluated to a natural (non negative) number. The upper bound could also be specified as an asterisk ‘\*’ which denotes an unlimited number of elements. The upper bound should be greater than or equal to the lower bound.
-* The following code example illustrates how to customize the multiplicity.
+The following code example illustrates how to customize the multiplicity.
{% if page.publishingplatform == "typescript" %}
@@ -376,42 +376,44 @@ In UML nodes, child elements such as members, methods and attributes can be adde
The [addChildToUmlNode](../api/diagram/#addchildtoumlnode) method is employed for dynamically adding a child to the UML node during runtime, providing flexibility in modifying the diagram structure programmatically.
-The following code illustrates how to add methods to UML nodes in the diagram.
-
-```ts
-let node = diagram.selectedItems.nodes[0];
-let methods = { name: 'getHistory', style: { color: "red", }, parameters: [{ name: 'Date', style: {} }], type: 'History' };
-diagram.addChildToUmlNode(node, methods, 'Methods');
-
-```
-
-The following code illustrates how to add attributes to UML nodes in the diagram.
+The following code example illustrates how to add members, methods and attributes to UML node at rumtime.
-```ts
-let node = diagram.selectedItems.nodes[0];
-let attributes = { name: 'accepted', type: 'Date', style: { color: "red", } };
-diagram.addChildToUmlNode(node, attributes, "Attributes");
+{% if page.publishingplatform == "typescript" %}
-```
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/umldiagramshapes-addDynamic/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/umldiagramshapes-addDynamic/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-addDynamic" %}
-The following code illustrates how to add members to UML nodes in the diagram.
+{% elsif page.publishingplatform == "javascript" %}
-```ts
-let node = diagram.selectedItems.nodes[0];
-let members = { name: 'Checking new', style: { color: "red", }, isSeparator: true };
-diagram.addChildToUmlNode(node, members, "Members");
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/umldiagramshapes-addDynamic/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/umldiagramshapes-addDynamic/index.html %}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "page.domainurl/code-snippet/diagram/umldiagramshapes-addDynamic" %}
+{% endif %}
### Adding UML child through user interaction
-To include a child, select a node, move the mouse outside it, and position the pointer near the right side. A highlighter emerges between the two child elements. Click the highlighter to add a child type to the chosen UML node seamlessly. The following gif illustrates how to add a Child through user interaction.
+To include a child, select a node, move the mouse outside it, and position the pointer near the right side edge of the shape. A highlighter emerges between the two child elements. Click the highlighter to add a child type to the chosen UML node seamlessly. The following gif illustrates how to add a Child through user interaction.
## Adding UML Nodes in Symbol palette
-UML built-in shapes are efficiently rendered in a symbol palette. The `symbols` property is utilized to define UML symbols with the necessary classes and methods. By incorporating this feature, you can seamlessly augment the palette with a curated collection of predefined UML symbols, thereby enhancing the versatility of your UML diagramming application.
+UML built-in shapes are easily rendered in a symbol palette. The [`symbols`](../api/diagram/paletteModel/#symbols) property of [`palettes`](../api/diagram/paletteModel/) is used to define UML symbols with the necessary classes and methods. This feature allows you to add a collection of predefined UML symbols to the palette, making your UML diagramming application more versatile.
The following code example showcases the rendering of UML built-in shapes in a symbol palette
@@ -452,7 +454,7 @@ The following image illustrates how the text editor looks in an edit mode.
## UML Activity diagram
-An Activity diagram functions as a visual flowchart, illustrating the progression from one activity to the next within a system. Each activity corresponds to a system operation, providing a clear depiction of the sequential flow in a dynamic process..
+An Activity diagram functions as a visual flowchart, illustrating the progression from one activity to the next within a system. Each activity corresponds to a system operation, providing a clear depiction of the sequential flow in a dynamic process.
The purpose of an activity diagram can be described as follows.
@@ -462,9 +464,9 @@ The purpose of an activity diagram can be described as follows.
3. Describe the parallel, branched, and concurrent flow of the system.
-## UML Activity diagram Shapes
+### UML Activity diagram Shapes
-To create a UmlActivity, define the type as "UmlActivity" and the list of built-in shapes as demonstrated as follows and it should be set in the "shape" property.
+To create a UmlActivity, define the [`type`](../api/diagram/umlActivityShapeModel/#type) as "UmlActivity" and set the list of built-in shapes in the [`shape`](../api/diagram/umlActivityShapeModel/#shape) property as demonstrated below.
| Shape | Image |
| -------------- | ---------------------------------------- |
@@ -513,7 +515,7 @@ The following code illustrates how to create a UmlActivity shapes.
### UML Activity connector
-To establish a UML Activity connector, specify the type as "UmlActivity" and define the flow as either "Exception," "Control," or "Object." This configuration delineates the nature of the connection, allowing for a precise representation of the interaction within the activity diagram.
+To establish a UML Activity connector, specify the [`type`](../api/diagram/relationShipModel/#type) of connector shape as "UmlActivity" and define the flow as either "Exception," "Control," or "Object." This configuration delineates the nature of the connection, allowing for a precise representation of the interaction within the activity diagram.
The following code illustrates how to create a UmlActivity connector.
diff --git a/ej2-javascript/diagram/user-handle.md b/ej2-javascript/diagram/user-handle.md
index 3c66a361d..ae7d8c3ed 100644
--- a/ej2-javascript/diagram/user-handle.md
+++ b/ej2-javascript/diagram/user-handle.md
@@ -11,233 +11,459 @@ domainurl: ##DomainURL##
# User handle in ##Platform_Name## Diagram control
-* User handles are used to add some frequently used commands around the selector. To create user handles, define and add them to the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) collection of the [`selectedItems`](../api/diagram#selectAll#selecteditems-selectormodel) property.
-* The name property of user handle is used to define the name of the user handle and its further used to find the user handle at runtime and do any customization.
+User handles are used to add frequently used commands around the selector.
+
+## Create user handle
+
+To create user handles, define and add them to the [`userHandles`](../api/diagram/userHandleModel/) collection of the [`selectedItems`](../api/diagram/selectorModel/) property. The [`name`](../api/diagram/userHandleModel/#name) property of userHandles is used to define the name of the user handle, which can then be used at runtime for identification and customization. The [`pathData`](../api/diagram/userHandleModel/#pathdata) property is used to define the path data of userhandle.
+
+The following example shows how to render user handle.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/userhandle-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/userhandle-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs1" %}
+{% endif %}
+
+## Customize User handle click
+
+When the user handle is clicked, the [`onUserHandleMouseDown`](../api/diagram/#onuserhandlemousedown) event allows us to identify which user handle was clicked using the name property of userHandle. Based on this name, we can customize the diagram elements accordingly. Several events are triggered while interacting with a user handle. In the following example, we use the [`onUserHandleMouseDown`](../api/diagram/#onuserhandlemousedown) event to clone nodes on user handle click.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/userhandle-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/userhandle-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs2" %}
+{% endif %}
## Alignment
-User handles can be aligned relative to the node boundaries. It has [`margin`](../api/diagram/userHandle#margin-marginmodel), [`offset`](../api/diagram/userHandle#offset-number), [`side`](../api/diagram/userHandle#side-side), [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment), and [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) settings. It is quite tricky when all four alignments are used together but gives more control over alignment.
+User handles can be aligned relative to the node boundaries. It has [`margin`](../api/diagram/marginModel/), [`offset`](../api/diagram/userHandleModel/#offset), [`side`](../api/diagram/side/), [`horizontalAlignment`](../api/diagram/horizontalAlignment/), and [`verticalAlignment`](../api/diagram/verticalAlignment/) properties to align user handle based on user's needs.
-### Offset for user handle
-The [`offset`](../api/diagram/userHandle#offset-number) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
+### Offset
+
+The [`offset`](../api/diagram/userHandleModel/#offset), property of [`userHandles`](../api/diagram/userHandleModel/) aligns the user handle based on fractions. For example, 0 represents the top-left corner, 1 represents the top-right corner, and 0.5 represents the top-center.
### Side
-The [`side`](../api/diagram/userHandle#side-side) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to align the user handle by using the [`Top`](../api/diagram/side#top), [`Bottom`](../api/diagram/side#bottom), [`Left`](../api/diagram/side#left), and [`Right`](../api/diagram/side#right) options.
+The [`side`](../api/diagram/side/) property of [`userHandles`](../api/diagram/userHandleModel/) aligns the user handle using the following options: [`Top`](../api/diagram/side#top), [`Bottom`](../api/diagram/side#bottom), [`Left`](../api/diagram/side#left), and [`Right`](../api/diagram/side#right).
### Horizontal and vertical alignments
-The [`horizontalAlignment`](../api/diagram/userHandle#horizontalalignment-horizontalalignment) property of [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) is used to set how the user handle is horizontally aligned at the position based on the [`offset`](../api/diagram/userHandle#offset-number). The [`verticalAlignment`](../api/diagram/userHandle#verticalalignment-verticalalignment) property is used to set how user handle is vertically aligned at the position.
+The [`horizontalAlignment`](../api/diagram/horizontalAlignment/) property of [`userHandles`](../api/diagram/userHandleModel/) is used to set how the user handle is horizontally aligned at the position based on the [`offset`](../api/diagram/userHandleModel/#offset). The [`verticalAlignment`](../api/diagram/verticalAlignment/) property is used to set how user handle is vertically aligned at the position.
### Margin for the user handle
-Margin is an absolute value used to add some blank space in any one of its four sides. The [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]) can be displaced with the [`margin`](../api/diagram/userHandle#margin-marginmodel) property.
+The [`margin`](../api/diagram/marginModel/) property adds blank space to any of the four sides of the user handle, allowing for precise displacement.
-### Appearance
-The appearance of the user handle can be customized by using the [`size`](../api/diagram/userHandle#size-number), [`borderColor`](../api/diagram/userHandle#bordercolor-string), [`backgroundColor`](../api/diagram/userHandle#backgroundcolor-string), [`visible`](../api/diagram/userHandle#visible-boolean), [`pathData`](../api/diagram/userHandle#pathdata-string), and [`pathColor`](../api/diagram/userHandle#pathcolor-string) properties of the [`userHandles`](../api/diagram/selectorModel#userHandles-userhandlemodel[]).
+In the following example, the user handle is aligned to the bottom-right corner of the node.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs5/index.ts %}
+{% include code-snippet/diagram/userhandle-cs3/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs5/index.html %}
+{% include code-snippet/diagram/userhandle-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs5" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs3" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs5/index.js %}
+{% include code-snippet/diagram/userhandle-cs3/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs5/index.html %}
+{% include code-snippet/diagram/userhandle-cs3/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs5" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs3" %}
{% endif %}
-## Fixed user handles
+The following table shows all the possible alignments of user handle around the node.
-The fixed user handles are used to add some frequently used commands around the node and connector even without selecting it.
+| Offset | side | Output |
+| -------- | -------- | -------- |
+| 0 | Left ||
+| 0 | Right ||
+| 0 | Top ||
+| 0 | Bottom ||
+| 1 | Left ||
+| 1 | Right ||
+| 1 | Top ||
+| 1 | Bottom ||
-## Initialization an fixed user handles
+## User handle tooltip
-To create the fixed user handles, define and add them to the collection of nodes and connectors property. The following code example used to create an fixed user handles for the nodes and connectors.
+The diagram provides support to show a tooltip when the mouse hovers over any user handle. To show the tooltip on mouse hover, set the [`tooltip`](../api/diagram/userHandleModel/#tooltip) property of the user handle with the tooltip [`content`](../api/diagram/diagramTooltipModel/#content) as shown in the following example.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs6/index.ts %}
+{% include code-snippet/diagram/userhandle-cs4/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs6/index.html %}
+{% include code-snippet/diagram/userhandle-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs6" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs4" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs6/index.js %}
+{% include code-snippet/diagram/userhandle-cs4/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs6/index.html %}
+{% include code-snippet/diagram/userhandle-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs6" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs4" %}
{% endif %}
-## Customization
+You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip.md) section.
-* The id property of fixed user handle is used to define the unique identification of the fixed user handle and it is further used to add custom events to the fixed user handle.
+## Appearance
-* The fixed user handle can be positioned relative to the node and connector boundaries. It has offset, padding and cornerRadius settings. It is used to position and customize the fixed user handle.
+The appearance of the user handle can be customized by using the [`size`](../api/diagram/userHandleModel/#size), [`borderColor`](../api/diagram/userHandleModel/#bordercolor), [`backgroundColor`](../api/diagram/userHandleModel/#backgroundcolor), [`borderWidth`](../api/diagram/userHandleModel/#borderwidth), [`visible`](../api/diagram/userHandleModel/#visible), and [`pathColor`](../api/diagram/userHandleModel/#pathcolor) properties of the userHandles.
-* The `Padding` is used to leave the space that is inside the fixed user handle between the icon and border.
+The following example demonstrates, how to use these properties to customize the appearance of user handle
-* The corner radius allows to create fixed user handles with rounded corners. The radius of the rounded corner is set with the `cornerRadius` property.
-N> The PathData needs to be provided to render fixed user handle.
+{% if page.publishingplatform == "typescript" %}
-### Size
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/userhandle-cs5/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs5" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/userhandle-cs5/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs5/index.html %}
+{% endhighlight %}
+{% endtabs %}
- Diagram allows you set size for the fixed user handles by using the `width` and `height` property. The default value of the width and height property is 10.
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs5" %}
+{% endif %}
-### Style
+## Multiple user handle
-* You can change the style of the fixed user handles with the specific properties of borderColor, borderWidth, and background color using the handleStrokeColor, handleStrokeWidth, and fill properties, and the icon borderColor, and borderWidth using the iconStrokeColor and iconStrokeWidth.
+Multiple user handles can be rendered for the selected objects (nodes/connectors) at a time to perform different operations.
-* The fixed user handle's `iconStrokeColor` and `iconStrokeWidth` property used to change the stroke color and stroke width of the given `pathData`.
+### Disable Nodes and disable Connectors
-* The fixed user handle `handleStrokeColor` and `fill` properties are used to define the background color and border color of the userhandle and the `handleStrokeWidth` property is used to define the border width of the fixed user handle.
+User handles are typically defined within the [`selectedItems`](../api/diagram/selectorModel/) property of the diagram, applying them universally to both nodes and connectors. However, in some scenarios, specific user handles may need to be excluded from connectors or nodes selectively. To address this, the disableNodes and disableConnectors properties come into play. These properties allow certain user handles to be disabled based on the type of selected item.
-* The `visible` property of the fixed user handle enables or disables the visibility of fixed user handle.
+In the example below, multiple user handles are utilized for various functionalities, with some handles hidden selectively for nodes or connectors depending on their intended functionality.
-The following code explains how to customize the appearance of the fixed user handles.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs7/index.ts %}
+{% include code-snippet/diagram/userhandle-cs6/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs7/index.html %}
+{% include code-snippet/diagram/userhandle-cs6/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs7" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs6" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs7/index.js %}
+{% include code-snippet/diagram/userhandle-cs6/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs7/index.html %}
+{% include code-snippet/diagram/userhandle-cs6/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs7" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs6" %}
{% endif %}
-N> The fixed user handle id need to be unique.
+## Different types of user handle
-## Customizing the node fixed user handle
+Diagram provides support to render different types of user handles:
-* The node fixed user handle can be aligned relative to the node boundaries. It has `margin` and `offset` settings. It is quite useful to position the node fixed userhandle and used together and gives you more control over the node fixed user handle positioning.
+* `Source`: Renders an image as a user handle using an image source.
+* `Content`: Renders a user handle using SVG content.
+* `pathData`: Renders a user handle using custom path data.
+* `template`: Renders a user handle using a predefined template ([`userHandleTemplate`](../api/diagram/#userhandletemplate)) defined in the diagram.
-### Margin for the node fixed user handle
+The precedence order for user handles is as follows:
-Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the `margin` property.
+1. pathData
+2. Content
+3. Source
+4. userHandleTemplate
-### Offset for the node fixed user handle
+This means that if multiple options are used for the user handle, the one with higher precedence will be rendered.
-The `offset` property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top or left corner and (1,1) represents the bottom or right corner.
+The below example code demonstrating different types of user handles.
-The following table shows all the possible alignments visually shows the fixed user handle positions.
+{% if page.publishingplatform == "typescript" %}
-| Offset | Margin | Output |
-| -------- | -------- | -------- |
-| (0,0) | Right = 20 ||
-| (0.5,0) | Bottom = 20 ||
-| (1,0) | Left = 20 ||
-| (0,0.5) | Right = 20 ||
-| (0,1) | Left = 20 ||
-| (0,1) | Right = 20 ||
-| (0.5,1) | Top = 20 ||
-| (1,1) | Left = 20 ||
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/userhandle-cs7/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs7" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/userhandle-cs7/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/userhandle-cs7/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs7" %}
+{% endif %}
+
+## User handle events
-The following code explains how to customize the node fixed user handle.
+When interacting with user handles, certain events are triggered that can be used to customize the appearance and functionality of the handles. The user handle events are explained below.
+
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the user handle is clicked.
+
+* [`onUserHandleMouseEnter`](../api/diagram/#onuserhandlemouseenter) - Triggered when the mouse enters the user handle region.
+* [`onUserHandleMouseDown`](../api/diagram/#onuserhandlemousedown) - Triggered when the mouse is pressed down on the user handle.
+* [`onUserHandleMouseUp`](../api/diagram/#onuserhandlemouseup) - Triggered when the mouse is released on the user handle.
+* [`onUserHandleMouseLeave`](../api/diagram/#onuserhandlemouseleave) - Triggered when the mouse leaves the user handle region.
+
+In the following example, the above events are used to customize the appearance of user handles.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs8/index.ts %}
+{% include code-snippet/diagram/userhandle-cs8/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs8/index.html %}
+{% include code-snippet/diagram/userhandle-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs8" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs8" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs8/index.js %}
+{% include code-snippet/diagram/userhandle-cs8/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs8/index.html %}
+{% include code-snippet/diagram/userhandle-cs8/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs8" %}
+{% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs8" %}
{% endif %}
-## Customizing the connector fixed user handle
+## Fixed user handles
+
+Fixed user handles are used to perform specific actions when interacted with. Unlike regular user handles, [`fixedUserHandles`](../api/diagram/nodeFixedUserHandleModel/) are defined within the node/connector object, allowing different fixed user handles to be added to different nodes.
+
+### Create fixed user handles
-* The connector fixed user handle can be aligned relative to the connector boundaries. It has alignment, displacement and offset settings. It is useful to position the connector fixed user handle and used together and gives you more control over the connector fixed user handle positioning.
+To create the [`fixedUserHandles`](../api/diagram/nodeFixedUserHandleModel/), define and add them to the collection of [`nodes`](../api/diagram/nodeModel/) and [`connectors`](../api/diagram/connectorModel/). The [`pathData`](../api/diagram/nodeFixedUserHandleModel/#pathdata) property of [`fixedUserHandles`](../api/diagram/nodeFixedUserHandleModel/) is used to define the path data for the fixed user handle. The [`id`](../api/diagram/nodeFixedUserHandleModel/#id) property in `fixedUserHandles` assigns a unique identifier to each handle. This identifier helps locate and modify fixed user handles during runtime. You can handle the click event of a fixed user handle using the [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) event. This event allows customization based on the type of fixed user handle clicked.
-* The `offset` and `alignment` properties of fixed user handle allows you to align the connector fixed user handles to the segments.
+The following code example demonstrates how to create fixed user handles for nodes and connectors and how to handle fixed user handle click:
-### Offset for the connector fixed user handle
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/fixeduserhandle-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs1" %}
-The `offset` property of connector fixed user handle is used to align the user handle based on fractions. 0 represents the connector source point, 1 represents the connector target point, and 0.5 represents the center point of the connector segment.
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/fixeduserhandle-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs1" %}
+{% endif %}
+
+ N> The fixed user handle id need to be unique.
### Alignment
-The connector’s fixed user handle can be aligned over its segment path using the `alignment` property of fixed user handle.
+Fixed user handles can be aligned relative to the node boundaries. It has [`margin`](../api/diagram/marginModel/), [`offset`](../api/diagram/nodeFixedUserHandleModel/#offset), [`padding`](../api/diagram/marginModel/) properties to align them based on user's needs.
+
+
+#### Margin
+
+Margin is an absolute value used to add some blank space in any one of its four sides. The fixed user handle can be displaced with the [`margin`](../api/diagram/marginModel/) property.
+
+#### Offset
+
+The [`offset`](../api/diagram/nodeFixedUserHandleModel/#offset) property of fixed user handle is used to align the user handle based on the `x` and `y` points. (0,0) represents the top-left corner and (1,1) represents the bottom-right corner.
+
+#### Padding
+
+The [`padding`](../api/diagram/marginModel/) is used to leave the space that is inside the fixed user handle between the icon and border.
-The following table shows all the possible alignments visually shows the fixed user handle positions.
+The following example demonstrates how to align fixed user handle for both node and connector.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/fixeduserhandle-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/fixeduserhandle-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs2" %}
+{% endif %}
+
+The following table shows all the possible alignments of fixed user handle around the node.
+
+| Offset | Margin | Output |
+| -------- | -------- | -------- |
+| (0,0) | Right = 20 ||
+| (0.5,0) | Bottom = 20 ||
+| (1,0) | Left = 20 ||
+| (0,0.5) | Right = 20 ||
+| (0,1) | Left = 20 ||
+| (0,1) | Right = 20 ||
+| (0.5,1) | Top = 20 ||
+| (1,1) | Left = 20 ||
+
+N> Both `displacement` and `alignment` are applicable only to connector fixed user handles.
+
+#### Customizing the connector fixed user handle
+
+The connector fixed user handle can be aligned relative to the connector boundaries. It has alignment, displacement and offset settings. The [`displacement`](../api/diagram/pointModel/) property displaces the handle from its aligned position and its functioning only when the [`alignment`](../api/diagram/fixedUserHandleAlignment/) property is set to 'After' or 'Before'.
+
+##### Offset
+
+The [`offset`](../api/diagram/connectorFixedUserHandleModel/#offset), property of fixed user handle aligns the fixed user handle based on fractions. For example, 0 represents the left or top corner, 1 represents the bottom or right corner, and 0.5 represents the center.
+
+##### Alignment
+
+The connector’s fixed user handle can be aligned over its segment path using the [`alignment`](../api/diagram/fixedUserHandleAlignment/) property of fixed user handle.
+
+The following table shows all the possible offset and alignment combinations of connector fixed user handle.
| Offset | Alignment | Output |
| -------- | -------- | -------- |
-| 0 | Before ||
-| 0.5 | Center ||
-| 1 | After ||
+| 0 | Before ||
+| 0.5 | Before ||
+| 1 | Before ||
+| 0 | Center ||
+| 0.5 | Center ||
+| 1 | Center ||
+| 0 | After ||
+| 0.5 | After ||
+| 1 | After ||
-### Displacement
+##### Displacement
-* The `displacement` property allows you to specify the space to be left from the connector segment based on the x and y value provided.
+The [`displacement`](../api/diagram/pointModel/) property displaces the handle from its aligned position based on the provided x and y value.
-The following table shows all the possible alignments visually shows the fixed user handle positions.
+The following table shows all the possible alignment and displacement combinations of fixed user handle.
| Displacment | Alignment | Output |
| -------- | -------- | -------- |
@@ -248,7 +474,7 @@ The following table shows all the possible alignments visually shows the fixed u
N> Displacement will not be done if the alignment is set to be center.
-The following code explains how to customize the connector fixed user handle.
+The following code explains how to customize the alignment of connector fixed user handle.
{% if page.publishingplatform == "typescript" %}
@@ -277,64 +503,124 @@ The following code explains how to customize the connector fixed user handle.
{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs9" %}
{% endif %}
-### Tooltip support for User Handle
-The diagram provides support to show tooltip when the mouse hovers over any user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example.
+### Fixed user handle tooltip
+
+The diagram provides support to show a tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse hover, set the [`tooltip`](../api/diagram/nodeFixedUserHandleModel/#tooltip) property of the fixed user handle with the tooltip [`content`](../api/diagram/diagramTooltipModel/#content) as shown in the following example.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/diagram/fixeduserhandle-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/diagram/fixeduserhandle-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/diagram/fixeduserhandle-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs3" %}
+{% endif %}
+
+You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip.md) section.
+
+### Appearance
+
+The appearance of the fixed user handle can be customized by using the [`cornerRadius`](../api/diagram/nodeFixedUserHandleModel/#cornerradius), [`fill`](../api/diagram/nodeFixedUserHandleModel/#fill), [`handleStrokeColor`](../api/diagram/nodeFixedUserHandleModel/#handlestrokecolor), [`handleStrokeWidth`](../api/diagram/nodeFixedUserHandleModel/#handlestrokewidth), [`iconStrokeColor`](../api/diagram/nodeFixedUserHandleModel/#iconstrokecolor), [`iconStrokeWidth`](../api/diagram/nodeFixedUserHandleModel/#iconstrokewidth) and [`visibility`](../api/diagram/nodeFixedUserHandleModel/#visibility) properties of the fixed user handles.
+
+#### Size
+
+The [`height`](../api/diagram/nodeFixedUserHandleModel/#height) and [`width`](../api/diagram/nodeFixedUserHandleModel/#width) properties of fixed user handle is used to define the size of the fixed user handle.
+
+#### Style
+
+The fixed user handle's [`iconStrokeColor`](../api/diagram/nodeFixedUserHandleModel/#iconstrokecolor) and [`iconStrokeWidth`](../api/diagram/nodeFixedUserHandleModel/#iconstrokewidth) property used to change the stroke color and stroke width of the given `pathData`.
+
+The fixed user handle's [`handleStrokeColor`](../api/diagram/nodeFixedUserHandleModel/#handlestrokecolor) and [`handleStrokeWidth`](../api/diagram/nodeFixedUserHandleModel/#handlestrokewidth), properties are used to define the stroke color and stroke width of the fixed user handle and the [`fill`](../api/diagram/nodeFixedUserHandleModel/#fill), property is used to define the fill color of fixed user handle.
+
+The [`cornerRadius`](../api/diagram/nodeFixedUserHandleModel/#cornerradius) property of the fixed user handle is used to apply border radius for the fixed user handle.
+
+The [`visibility`](../api/diagram/nodeFixedUserHandleModel/#visibility) property of the fixed user handle enables or disables the visibility of fixed user handle.
+
+The following example demonstrates, how to use these properties to customize the appearance of the fixed user handle.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs10/index.ts %}
+{% include code-snippet/diagram/fixeduserhandle-cs4/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs10/index.html %}
+{% include code-snippet/diagram/fixeduserhandle-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs10" %}
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs4" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs10/index.js %}
+{% include code-snippet/diagram/fixeduserhandle-cs4/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs10/index.html %}
+{% include code-snippet/diagram/fixeduserhandle-cs4/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs10" %}
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs4" %}
{% endif %}
-### Tooltip support for Fixed User Handle
+### Fixed user handle events
+
+When interacting with fixed user handles, certain events are triggered that can be used to customize the appearance and functionality of the handles. The fixed user handle events are explained below.
+
+
+* [`click`](../api/diagram/iclickeventargs/) - Triggered when the fixed user handle is clicked.
+* [`onFixedUserHandleMouseEnter`](../api/diagram/#onfixeduserhandlemouseenter) - Triggered when the mouse enters the fixed user handle region.
+* [`onFixedUserHandleMouseDown`](../api/diagram/#onfixeduserhandlemousedown) - Triggered when the mouse is pressed down on the fixed user handle.
+* [`onFixedUserHandleMouseUp`](../api/diagram/#onfixeduserhandlemouseup) - Triggered when the mouse is released on the fixed user handle.
+* [`onFixedUserHandleMouseLeave`](../api/diagram/#onfixeduserhandlemouseleave) - Triggered when the mouse leaves the fixed user handle region.
+* [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) - Triggered when the fixed user handle is clicked.
-The diagram provides support to show tooltip when the mouse hovers over any fixed user handle. To show the tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example.
+In the following example, the above events are used to customize the appearance of fixed user handles.
{% if page.publishingplatform == "typescript" %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/diagram/interaction-cs11/index.ts %}
+{% include code-snippet/diagram/fixeduserhandle-cs5/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs11/index.html %}
+{% include code-snippet/diagram/fixeduserhandle-cs5/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs11" %}
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs5" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/diagram/interaction-cs11/index.js %}
+{% include code-snippet/diagram/fixeduserhandle-cs5/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/diagram/interaction-cs11/index.html %}
+{% include code-snippet/diagram/fixeduserhandle-cs5/index.html %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/diagram/interaction-cs11" %}
+{% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs5" %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/collaborative-editing/overview.md b/ej2-javascript/document-editor/collaborative-editing/overview.md
new file mode 100644
index 000000000..50d661a2d
--- /dev/null
+++ b/ej2-javascript/document-editor/collaborative-editing/overview.md
@@ -0,0 +1,46 @@
+---
+layout: post
+title: Collaborative Editing in ##Platform_Name## Document editor control | Syncfusion
+description: Learn about collaborative editing in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Collaborative Editing
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Collaborative editing
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+## Prerequisites
+
+- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing.
+- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations.
+
+### Real time transport protocol
+
+- *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server.
+- *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version.
+
+### Distributed cache or database
+
+To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options:
+
+- *Distributed Cache*: Handles a higher number of `HTTP` requests per second compared to a database approach. For instance, a server with 2 vCPUs and 8GB RAM can handle up to 125 requests per second using a distributed cache.
+- *Database*: With the same server configuration, it can handle up to 50 requests per second.
+
+Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` Algorithm.
+
+> *Recommendation* - If you expect average `http` requests per second of your live application as 50 or below, then the database can provide reliable a backing system for operation queue. If you expect average requests per second of your live application as above 50, then the distributed cache is highly recommended backing system.
+
+> Tips to calculate the average requests per second of your application:
+Assume the editor in your live application is actively used by 1000 users and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
+
+> Note: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs.
+
+#### See Also
+
+- [Collaborative editing using Redis cache in ASP.NET Core](../../document-editor/collaborative-editing/using-distributed-cache-asp-net-core)
+- [Collaborative editing using Microsoft SQL server in ASP.NET Core](../../document-editor/collaborative-editing/using-database-in-asp-net-core)
+- [Collaborative editing using Java](../../document-editor/collaborative-editing/using-java)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md b/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md
new file mode 100644
index 000000000..b239080b6
--- /dev/null
+++ b/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md
@@ -0,0 +1,408 @@
+---
+layout: post
+title: Collaborative Editing in ##Platform_Name## Document editor control | Syncfusion
+description: Learn how to enable collaborative editing using Redis in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Collaborative Editing
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Collaborative Editing
+
+Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+
+## Prerequisites
+
+The following are needed to enable collaborative editing in Document Editor.
+
+* `SignalR`
+* `Redis`
+
+## SignalR
+
+In collaborative editing, real-time communication is essential for users to see each other's changes instantly. We use a real-time transport protocol to efficiently send and receive data as edits occur. For this, we utilize SignalR, which supports real-time data exchange between the client and server. SignalR ensures that updates are transmitted immediately, allowing seamless collaboration by handling the complexities of connection management and offering reliable communication channels.
+
+To make SignalR work in a distributed environment (with more than one server instance), it needs to be configured with either Azure SignalR Service or a Redis backplane.
+
+### Scale-out SignalR using Azure SignalR service
+
+Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
+
+Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
+
+```csharp
+builder.Services.AddSignalR() .AddAzureSignalR("", options => {
+ // Specify the channel name
+ options.Channels.Add("document-editor");
+ });
+```
+
+### Scale-out SignalR using Redis
+
+Using a Redis backplane, you can achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
+
+In the SignalR app, install the following NuGet package:
+* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
+
+Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
+
+```csharp
+builder.Services.AddSignalR().AddStackExchangeRedis("");
+```
+Configure options as needed:
+
+The following example shows how to add a channel prefix in the ConfigurationOptions object.
+
+```csharp
+builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
+ {
+ options.Configuration.ChannelPrefix = "document-editor";
+ });
+```
+
+## Redis
+
+In collaborative editing, Redis is used to store temporary data that helps queue editing operations and resolve conflicts using the `Operational Transformation` algorithm.
+
+All editing operations in collaborative editing are stored in the Redis cache. To prevent memory buildup, we can configure a `SaveThreshold` limit at the application level. If the `SaveThreshold` is 100, editing operations up to twice the save threshold limit are kept in Redis per document. Once exceeded, the first 100 operations (as defined by the save threshold) are removed from the cache and automatically saved to the source input document.
+
+The configuration and store size of the Redis cache can be adjusted based on the following considerations.
+
+- *Storage Requirements*: A minimum of 400KB of cache memory is needed for editing a single document, with the capacity to store up to 100 editing operations. Storage needs may increase based on following factor.
+ - *Images*: Increases with the number of images added to the document.
+ - *Pasted content*: Depends on the size of the SFDT content.
+- *Connection Limits*: Redis has a limit on concurrent connections. Choose the Redis configuration based on your user base to ensure optimal performance.
+
+> For better performance, we recommend to have minimum `SaveThreshold` limit of 100.
+
+## How to enable collaborative editing in client side
+
+### Step 1: Enable collaborative editing in Document Editor
+
+To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/index.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/index.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Step 2: Configure SignalR to send and receive changes
+
+To broadcast the changes made and receive changes from remote users, configure SignalR like below.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Step 3: Join SignalR room while opening the document
+
+When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### Step 4: Broadcast current editing changes to remote users
+
+Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
+
+{% if page.publishingplatform == "typescript" %}
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.js %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+## How to enable collaborative editing in ASP.NET Core
+
+### Step 1: Configure SignalR in ASP.NET Core
+
+We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's `Program.cs` file.
+
+```csharp
+ using Microsoft.Azure.SignalR;
+ .....
+ builder.Services.AddSignalR();
+ .....
+ .....
+ .....
+ app.MapHub("/documenteditorhub");
+ .....
+ .....
+```
+
+### Step 2: Configure SignalR hub to create room for collaborative editing session
+
+To manage groups for each document, create a folder named "Hub" and add a file named `DocumentEditorHub.cs` inside it. Add the following code to the file to manage SignalR groups using room names.
+
+Join the group by using unique id of the document by using `JoinGroup` method.
+
+```csharp
+static Dictionary userManager = new Dictionary();
+ internal static Dictionary> groupManager = new Dictionary>();
+
+ // Join to the specified room name
+ public async Task JoinGroup(ActionInfo info)
+ {
+ if (!userManager.ContainsKey(Context.ConnectionId))
+ {
+ userManager.Add(Context.ConnectionId, info);
+ }
+ info.ConnectionId = Context.ConnectionId;
+ //Add the current connected use to the specified group
+ await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
+ }
+ lock (groupManager)
+ {
+ if (groupManager.ContainsKey(info.RoomName))
+ {
+ groupManager[info.RoomName].Add(info);
+ }
+ else
+ {
+ List actions = new List
+ {
+ info
+ };
+ groupManager.Add(info.RoomName, actions);
+ }
+ }
+ // Notify other users in the group about new user joined the collaborative editing session.
+ Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
+ }
+
+```
+
+Handle user disconnection using SignalR.
+
+```csharp
+//Handle disconnection from group.
+ public override Task OnDisconnectedAsync(Exception? e)
+ {
+ string roomName = userManager[Context.ConnectionId].RoomName;
+ if (groupManager.ContainsKey(roomName))
+ {
+ groupManager[roomName].Remove(userManager[Context.ConnectionId]);
+
+ if (groupManager[roomName].Count == 0)
+ {
+ groupManager.Remove(roomName);
+ //If all user disconnected from current room. Auto save the change to source document.
+ CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
+ }
+ }
+
+ if (userManager.ContainsKey(Context.ConnectionId))
+ {
+ //Notify other user in the group about user exit the collaborative editing session
+ Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
+ Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
+ userManager.Remove(Context.ConnectionId);
+ }
+ return base.OnDisconnectedAsync(e);
+ }
+
+```
+
+### Step 3: Configure Redis cache connection string in application level
+
+Configure the Redis that stores temporary data for the collaborative editing session. Provide the Redis connection string in `appsettings.json` file.
+
+```json
+.....
+ "ConnectionStrings": {
+ "RedisConnectionString": "<>"
+ }
+.....
+
+```
+
+### Step 4: Configure Web API actions for collaborative editing
+
+#### Import File
+
+1. When opening a document, check the Redis cache for pending operations and retrieve them for the collaborative editing session.
+2. If pending operations exist, apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format.
+
+```csharp
+public string ImportFile([FromBody] FileInfo param)
+ {
+ .....
+ .....
+ DocumentContent content = new DocumentContent();
+
+ .....
+ //Get source document from database/file system/blob storage
+ WordDocument document = GetSourceDocument(param.fileName);
+ .....
+ //Get the temporary operations
+ List actions = await GetPendingOperations(param.fileName, 0, -1);
+ if(actions!=null && actions.Count > 0)
+ {
+ //Apply temporary data to the document.
+ document.UpdateActions(actions);
+ }
+ string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
+ content.version = 0;
+ content.sfdt = json;
+ return Newtonsoft.Json.JsonConvert.SerializeObject(content);
+ }
+
+```
+
+#### Update editing records to Redis cache.
+
+Each edit operation performed by the user is sent to the server and pushed into a Redis list data structure. Each operation is assigned a version number upon insertion into Redis.
+
+After inserting the record into the server, the position of the current editing operation must be transformed relative to any previous editing operations not yet synced with the client using the `TransformOperation` method to resolve any potential conflicts with the help of the `Operational Transformation` algorithm.
+
+Once the conflict is resolved, the current operation is broadcast to all connected users within the group.
+
+```csharp
+public async Task UpdateAction([FromBody] ActionInfo param)
+{
+ try
+ {
+ ActionInfo modifiedAction = AddOperationsToCache(param);
+ //After transformation broadcast changes to all users in the gropu
+ await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
+ return modifiedAction;
+ }
+ catch
+ {
+ return null;
+ }
+}
+
+private ActionInfo AddOperationsToCache(ActionInfo action)
+ {
+ int clientVersion = action.Version;
+ string insertScript = "-------"
+ …………
+ …………
+ …………
+ …………
+
+ IDatabase database = _redisConnection.GetDatabase();
+ // Define the keys for Redis operations based on the action's room name
+ RedisKey[] keys = new RedisKey[] { action.RoomName + CollaborativeEditingHelper.VersionSuffix, action.RoomName, action.RoomName + CollaborativeEditingHelper.RevisionSuffix };
+ // Serialize the action and prepare values for the Redis script
+ RedisValue[] values = new RedisValue[] { JsonConvert.SerializeObject(action), clientVersion.ToString(), CollaborativeEditingHelper.SaveThreshold.ToString() };
+ // Execute the Lua script in Redis and store the results
+ RedisResult[] results = (RedisResult[])await database.ScriptEvaluateAsync(insertScript, keys, values);
+
+ List previousOperations = ((RedisResult[])results[1]).Select(value => JsonConvert.DeserializeObject(value.ToString())).ToList();
+ previousOperations.ForEach(op => op.Version = ++clientVersion);
+ if (previousOperations.Count > 1)
+ {
+ // Set the current action to the last operation in the list
+ action = previousOperations.Last();
+ // Transform operations that have not been transformed yet
+ previousOperations.Where(op => !op.IsTransformed).ToList().ForEach(op => CollaborativeEditingHandler.TransformOperation(op, previousOperations));
+ }
+ action = actions[actions.Count - 1];
+ action.Version = updateVersion;
+ //Return the transformed operation to broadcast it to other clients.
+ return action;
+ }
+
+```
+
+#### Add Web API to get previous operation as a backup to get lost operations
+
+On the client side, messages broadcast using SignalR might be received out of order or lost due to network issues. In such cases, we need a backup method to retrieve missing operations from Redis. By using the following method, we can retrieve all operations performed after the last successful client-synchronized version and return any missing operations to the requesting client.
+
+```csharp
+ public async Task GetActionsFromServer(ActionInfo param)
+ {
+ try
+ {
+ // Initialize necessary variables from the parameters and helper class
+ int saveThreshold = CollaborativeEditingHelper.SaveThreshold;
+ string tableName = param.RoomName;
+ int lastSyncedVersion = param.Version;
+ int clientVersion = param.Version;
+
+ // Retrieve the database connection
+ IDatabase database = _redisConnection.GetDatabase();
+
+ // Fetch actions that are effective and pending based on the last synced version
+ List actions = await GetEffectivePendingVersion(tableName, lastSyncedVersion);
+
+ // Increment the version for each action sequentially
+ actions.ForEach(action => action.Version = ++clientVersion);
+
+ // Filter actions to only include those that are newer than the client's last known version
+ actions = actions.Where(action => action.Version > lastSyncedVersion).ToList();
+
+ // Transform actions that have not been transformed yet
+ actions.Where(action => !action.IsTransformed).ToList()
+ .ForEach(action => CollaborativeEditingHandler.TransformOperation(action, actions));
+
+ // Serialize the filtered and transformed actions to JSON and return
+ return Newtonsoft.Json.JsonConvert.SerializeObject(actions);
+ }
+ catch (Exception ex)
+ {
+ // In case of an exception, return an empty JSON object
+ return "{}";
+ }
+ }
+```
+
+Full version of the code discussed about can be found in below GitHub location.
+
+GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)
\ No newline at end of file
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 178ab9f4d..650a83b8a 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -812,15 +812,24 @@