Skip to content

DOCINFRA-2341_merged_using_automation #209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 24, 2023
Merged

DOCINFRA-2341_merged_using_automation #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44bcb61
SEO-3146-coverage-page-with-redirect-help
gowthamanthavasiyappan Jan 18, 2023
05d21c6
Merge pull request #207 from syncfusion-content/SEO-3146-coverage-pag…
Aishwarya-Ganesan Jan 24, 2023
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
32 changes: 16 additions & 16 deletions angularjs/Diagram/Commands.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Explore the frequently used built-in commands
description: How to explore and use the built-in commands?
title: Commands in AngularJS Diagram Control | Syncfusion
description: Learn here all about Commands support in Syncfusion Essential AngularJS Diagram Control, its elements and more.
platform: AngularJS
control: Diagram
documentation: ug
---

# Commands
# Commands in AngularJS Diagram

There are several commands available in the Diagram as follows.

Expand Down Expand Up @@ -50,9 +50,9 @@ diagram.align("left");

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img1.png)
![AngularJS Diagram commands](Commands_images/Commands_img1.png)

![](/angularjs/Diagram/Commands_images/Commands_img2.png)
![AngularJS Diagram Space](Commands_images/Commands_img2.png)

## Space

Expand All @@ -72,9 +72,9 @@ diagram.spaceDown();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img3.png)
![AngularJS Diagram sizing commands](Commands_images/Commands_img3.png)

![](/angularjs/Diagram/Commands_images/Commands_img4.png)
![AngularJS Diagram Sizing](Commands_images/Commands_img4.png)

## Sizing

Expand All @@ -97,7 +97,7 @@ diagram.sameWidth();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img5.png)
![AngularJS Diagram Clipboard](Commands_images/Commands_img5.png)


## Clipboard
Expand All @@ -119,7 +119,7 @@ diagram.paste();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img6.png)
![AngularJS Diagram Grouping](Commands_images/Commands_img6.png)

## Grouping

Expand Down Expand Up @@ -152,7 +152,7 @@ diagram.bringToFront();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img7.png)
![AngularJS Diagram sendToBack Command](Commands_images/Commands_img7.png)

### sendToBack Command

Expand All @@ -165,7 +165,7 @@ diagram.sendToBack();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img8.png)
![AngularJS Diagram moveForward Command](Commands_images/Commands_img8.png)

### moveForward Command

Expand All @@ -178,7 +178,7 @@ diagram.moveForward();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img9.png)
![AngularJS Diagram sendBackward Command](Commands_images/Commands_img9.png)

### sendBackward Command

Expand All @@ -191,7 +191,7 @@ diagram.sendBackward();

{% endhighlight %}

![](/angularjs/Diagram/Commands_images/Commands_img10.png)
![AngularJS Diagram Zoom](Commands_images/Commands_img10.png)

## Zoom

Expand Down Expand Up @@ -253,11 +253,11 @@ diagram.nudge("up", 5);

The corresponding arrow keys are used to move the selected elements towards up, down, left, or right direction by 1 pixel.

![](/angularjs/Diagram/Commands_images/Commands_img11.png)
![AngularJS Diagram BringIntoView](Commands_images/Commands_img11.png)

Nudge commands are particularly useful for accurate placement of elements.

For more information, refer to [Keyboard Interaction](/angularjs/Diagram/Interaction#keyboard "Keyboard Interaction").
For more information, refer to [Keyboard Interaction](/angularjs/diagram/interaction#keyboard "Keyboard Interaction").

## BringIntoView

Expand Down Expand Up @@ -347,7 +347,7 @@ Region specifies the region/bounds of the Diagram content that is to be fit into

## Command Manager

Diagram provides support to map/bind command execution with desired combination of key gestures. Diagram provides some built-in commands. For more information about built-in commands, refer to [Keyboard Interaction](/angularjs/Diagram/Interaction#keyboard "Keyboard Interaction").
Diagram provides support to map/bind command execution with desired combination of key gestures. Diagram provides some built-in commands. For more information about built-in commands, refer to [Keyboard Interaction](/angularjs/diagram/interaction#keyboard "Keyboard Interaction").
Command Manager provides support to define custom commands. The custom commands are executed, when the specified key gesture is recognized.

### Custom command
Expand Down
4 changes: 2 additions & 2 deletions angularjs/Diagram/Connector.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,7 +1013,7 @@ var targetDecorator = {
![AngularJS Diagram Interaction](Connector_images/Connector_img23.png)

## Interaction
Diagram allows to edit the connectors at runtime. To edit the connector segments at runtime, refer to [Connection Editing](/angularjs/Diagram/Interaction#connection-editing "Connection Editing").
Diagram allows to edit the connectors at runtime. To edit the connector segments at runtime, refer to [Connection Editing](/angularjs/diagram/interaction#connection-editing "Connection Editing").

## Constraints
The `constraints` property of connector allows to enable/disable certain features of connectors. For more information about constraints, refer to [Connector Constraints](/angularjs/Diagram/Constraints#connectorconstraints "Connector Constraints").
The `constraints` property of connector allows to enable/disable certain features of connectors. For more information about constraints, refer to [Connector Constraints](/angularjs/diagram/constraints#connectorconstraints "Connector Constraints").
28 changes: 14 additions & 14 deletions angularjs/Diagram/Node.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Visually represent the geometrical informations, process flow, or entities
description: How to visually represent the geometrical information and process flows as nodes?
title: Node in AngularJS Diagram Control | Syncfusion
description: Learn here all about node support in Syncfusion Essential AngularJS Diagram Control, its elements and more.
platform: AngularJS
control: Diagram
documentation: ug
---

# Node
# Node in AngularJS Diagram

Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data.

![](/angularjs/Diagram/Node_images/Node_img1.png)
![AngularJS Diagram Create Node](Node_images/Node_img1.png)

## Create Node

Expand Down Expand Up @@ -48,7 +48,7 @@ To create a node, You have to define the node object and add that to `nodes` col

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img2.png)
![AngularJS Diagram Position](Node_images/Node_img2.png)

## Position

Expand Down Expand Up @@ -91,7 +91,7 @@ syncApp.controller('diagramCtrl', function($scope) {

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img4.png)
![AngularJS Diagram Types](Node_images/Node_img4.png)

## Types

Expand Down Expand Up @@ -129,7 +129,7 @@ You can customize the appearance of a node by changing its font, fill colors, pa

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img5.png)
![AngularJS Diagram Gradient](Node_images/Node_img5.png)

### Gradient

Expand Down Expand Up @@ -213,7 +213,7 @@ syncApp.controller('diagramCtrl', function($scope) {

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img6.png)
![AngularJS Diagram Shadow](Node_images/Node_img6.png)

## Shadow

Expand Down Expand Up @@ -245,7 +245,7 @@ syncApp.controller('diagramCtrl', function($scope) {
{% endhighlight %}


![](/angularjs/Diagram/Node_images/Node_img7.png)
![AngularJS Diagram shadow effect](Node_images/Node_img7.png)

The following code illustrates how to disable shadow effect at runtime.

Expand Down Expand Up @@ -304,7 +304,7 @@ syncApp.controller('diagramCtrl', function($scope) {

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img8.png)
![AngularJS Diagram Icon](Node_images/Node_img8.png)

## Icon

Expand Down Expand Up @@ -367,14 +367,14 @@ syncApp.controller('diagramCtrl', function($scope) {

{% endhighlight %}

![](/angularjs/Diagram/Node_images/Node_img9.png)
![AngularJS Diagram Interaction](Node_images/Node_img9.png)

![](/angularjs/Diagram/Node_images/Node_img10.png)
![AngularJS Diagram Constraints](Node_images/Node_img10.png)

## Interaction

Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to [Edit Nodes](/angularjs/Diagram/Interaction "Interaction").
Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to [Edit Nodes](/angularjs/diagram/interaction "Interaction").

## Constraints

The `constraints` property of node allows you to enable/disable certain features. For more information about node constraints, refer to [Node Constraints](/angularjs/Diagram/Constraints#nodeconstraints "Node Constraints").
The `constraints` property of node allows you to enable/disable certain features. For more information about node constraints, refer to [Node Constraints](/angularjs/diagram/constraints#nodeconstraints "Node Constraints").
18 changes: 9 additions & 9 deletions angularjs/Diagram/Port.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
---
layout: post
title: Create custom connection points to draw connections with any specific point of node
description: How to draw connections with specific points of node?
title: Port in AngularJS Diagram Control | Syncfusion
description: Learn here all about port support in Syncfusion Essential AngularJS Diagram Control, its elements and more.
platform: AngularJS
control: Diagram
documentation: ug
---

# Port
# Port in AngularJS Diagram

Essential Diagram for JS provides support to define custom ports for making connections.

![](/angularjs/Diagram/Port_images/Port_img3.png)
![AngularJS Diagram custom ports](Port_images/Port_img3.png)

When a connector is connected between two nodes, its end points are automatically docked to node's nearest boundary as shown in the following image.

![](/angularjs/Diagram/Port_images/Port_img4.png)
![AngularJS Diagram two nodes](Port_images/Port_img4.png)

Ports act as the connection points of node and allows to create connections with only those specific points as shown in the following image.

![](/angularjs/Diagram/Port_images/Port_img5.png)
![AngularJS Diagram connection points of node](Port_images/Port_img5.png)

## Create Port

Expand Down Expand Up @@ -109,7 +109,7 @@ diagram.addPorts("node", ports)

{% endhighlight %}

![]((/angularjs/Diagram/Port_images/Port_img1.png)
![AngularJS Diagram node](Port_images/Port_img1.png)

To explore the set of properties for defining a port, refer to [Port Properties](/api/js/ejDiagram#members:nodes-ports "Port Properties")

Expand Down Expand Up @@ -175,8 +175,8 @@ syncApp.controller('diagramCtrl', function($scope) {

{% endhighlight %}

![]((/angularjs/Diagram/Port_images/Port_img2.png)
![AngularJS Diagram Constraints](Port_images/Port_img2.png)

## Constraints

The `constraints` property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](/angularjs/Diagram/Constraints#portconstraints)
The `constraints` property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to [Port Constraints](/angularjs/diagram/constraints#portconstraints)