Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ej2-react/diagram/connector-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 3 additions & 0 deletions ej2-react/diagram/export.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

```
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

Expand Down
4 changes: 4 additions & 0 deletions ej2-react/diagram/nodes-customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions ej2-react/diagram/nodes-positioning.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions ej2-react/diagram/page-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions ej2-react/diagram/print.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ root.render(<App />);

>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/).
Expand Down
4 changes: 4 additions & 0 deletions ej2-react/diagram/serialization.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down