Skip to content

docs(Diagram): Add info about panning and selection #3373

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs(Diagram): Add info about panning and selection #3373

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 32 additions & 0 deletions components/diagram/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,38 @@ The Diagram allows users to zoom the graph in and out for better perception. The
MinZoom="0" />
````

## Pan

The Diagram content may overflow the component boundaries if there are a lot of shapes or if the user zooms in. By default, the Diagram allows users to pan the content by holding the **Ctrl** key and dragging. The following code snippet shows the relevant parameters together with their default values.

When both panning and [selection](#select) are enabled, make sure the two features use a different `Key`.

>caption Pan-related Diagram parameters

````RAZOR.skip-repl
<TelerikDiagram>
<DiagramPannable Enabled="true" Key="@DiagramPannableKey.Ctrl" />
</TelerikDiagram>
````

## Select

Users can select a single shape or connection with a click. The Diagram also supports multiple selection through dragging a rectangular marquee. The following code snippet shows the relevant parameters together with their default values.

Once the user selects some shapes and connections, they can drag them to another position or remove them with the **Del** key.

When both [panning](#pan) and selection are enabled, make sure the two features use a different `Key`.

>caption Selection-related Diagram parameters

````RAZOR.skip-repl
<TelerikDiagram>
<DiagramSelectable Enabled="true" Multiple="true" Key="@DiagramSelectableKey.None">
<DiagramSelectableStroke Color="black" DashType="@DashType.Dash" Width="1" />
</DiagramSelectable>
</TelerikDiagram>
````

## Events

The Telerik Diagram fires events that enable the app to detect and react to user interactions with the component. Find out more about the [Diagram events and event arguments](slug:diagram-events).
Expand Down