From 37f2ee893e465dada23bb12acbf183cc4d07568d Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 8 Nov 2024 17:27:24 +0530 Subject: [PATCH] Integrated latest changes at 11-08-2024 4:31:24 PM --- ej2-react/diagram/connector-customization.md | 4 ++++ ej2-react/diagram/export.md | 3 +++ ej2-react/diagram/nodes-customization.md | 4 ++++ ej2-react/diagram/nodes-positioning.md | 4 ++++ ej2-react/diagram/page-settings.md | 4 ++++ ej2-react/diagram/print.md | 4 ++++ ej2-react/diagram/serialization.md | 4 ++++ 7 files changed, 27 insertions(+) diff --git a/ej2-react/diagram/connector-customization.md b/ej2-react/diagram/connector-customization.md index 627583d16..0fe9a9654 100644 --- a/ej2-react/diagram/connector-customization.md +++ b/ej2-react/diagram/connector-customization.md @@ -11,6 +11,10 @@ domainurl: ##DomainURL## Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors. +To customize the appearance, padding, and bridging of the connectors in the React Diagram component, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} + ## Decorator * Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#sourcedecorator) and [`targetDecorator`](https://helpej2.syncfusion.com/react/documentation/api/diagram/connector/#targetdecorator) properties of the connector. diff --git a/ej2-react/diagram/export.md b/ej2-react/diagram/export.md index 7fa75a4b5..e03b1fd1f 100644 --- a/ej2-react/diagram/export.md +++ b/ej2-react/diagram/export.md @@ -38,6 +38,9 @@ const root = ReactDOM.createRoot(document.getElementById('diagram')); root.render(); ``` +To export the React Diagram elements in various formats, refer to below video link. + +{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %} ## Exporting options diff --git a/ej2-react/diagram/nodes-customization.md b/ej2-react/diagram/nodes-customization.md index 24db9e9ac..ed910b6a7 100644 --- a/ej2-react/diagram/nodes-customization.md +++ b/ej2-react/diagram/nodes-customization.md @@ -10,6 +10,10 @@ domainurl: ##DomainURL## # Appearence of a nodes in React Diagram control +To customize the appearance and position of nodes in the React Diagram component, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} + ## Common values to the node. The [`getNodeDefaults`](https://ej2.syncfusion.com/react/documentation/api/diagram/#getnodedefaults) property in the EJ2 Diagram control allows you to define default settings for nodes based on specific conditions or requirements. diff --git a/ej2-react/diagram/nodes-positioning.md b/ej2-react/diagram/nodes-positioning.md index 9bf2588c9..e372ddb9b 100644 --- a/ej2-react/diagram/nodes-positioning.md +++ b/ej2-react/diagram/nodes-positioning.md @@ -10,6 +10,10 @@ domainurl: ##DomainURL## # Positioning a node in React Diagram control +To customize the position of nodes in the React Diagram component, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} + ## Position * Position of a node is controlled by using its [`offsetX`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsetx) and [`offsetY`](https://ej2.syncfusion.com/react/documentation/api/diagram/node/#offsety) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. diff --git a/ej2-react/diagram/page-settings.md b/ej2-react/diagram/page-settings.md index 8c2518ac6..e4fcac12a 100644 --- a/ej2-react/diagram/page-settings.md +++ b/ej2-react/diagram/page-settings.md @@ -12,6 +12,10 @@ domainurl: ##DomainURL## Page settings allow customization of the appearance, size, and orientation of the diagram page. +To customize the diagram page settings, insert page breaks, display multiple pages, and change the orientation of the canvas in the EJ2 React Diagram, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=pn02S_rwupw" %} + ## Page size and appearance The [`width`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#width) and [`height`](https://helpej2.syncfusion.com/react/documentation/api/diagram/pageSettings/#height) properties in page settings determine the size of the page. Additionally, the [`background`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/) property allows customization of the page's appearance. The [`color`](https://helpej2.syncfusion.com/react/documentation/api/diagram/backgroundModel/#color) property of background is used to define the color of the page. The [`margin`](https://helpej2.syncfusion.com/react/documentation/api/diagram/marginModel/) property defines the page margins. diff --git a/ej2-react/diagram/print.md b/ej2-react/diagram/print.md index b7ab3e445..641e4853d 100644 --- a/ej2-react/diagram/print.md +++ b/ej2-react/diagram/print.md @@ -35,6 +35,10 @@ root.render(); >Note: To Print diagram you need to inject `PrintAndExport` in the diagram. +To print the React Diagram elements in various formats, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %} + ## Print Options The diagram can be customized while printing using the following properties of [`printOptions`](https://ej2.syncfusion.com/react/documentation/api/diagram/iPrintOptions/). diff --git a/ej2-react/diagram/serialization.md b/ej2-react/diagram/serialization.md index 72c1f7b32..b15aac07d 100644 --- a/ej2-react/diagram/serialization.md +++ b/ej2-react/diagram/serialization.md @@ -14,6 +14,10 @@ domainurl: ##DomainURL## 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. +To easily save the contents of the diagram as a JSON string or file stream, and load it from the saved file, refer to the video link below. + +{% youtube "https://www.youtube.com/watch?v=IkWXjhRE-o0" %} + ## Save The diagram is serialized as string while saving. The client-side method, [`saveDiagram`](https://ej2.syncfusion.com/react/documentation/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.