IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-01 21:19:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Fix canvas G11 updates (#85024)

Browse Source 
* Removed features not yet completed

* additional doc updates

* Fixed codespell error

* Fixed video embed link

* Fixed punctuation

* updated to do note

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Isabel Matwawana 2024-04-04 13:59:33 -04:00 committed by GitHub
parent d91dbbbef5
commit 8957fd2b3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/sources/panels-visualizations/visualizations/canvas/index.md
View File

@ -87,11 +87,13 @@ To remove a connection, simply click on the connection directly and then press t
### Adjust connectors
You can adjust connectors, adding angles to them, to fit the canvas you're working in. When you move connected elements, the connector resizes to fit the space. To adjust a connector, click it to display the midpoint controls and move those as needed. To make a connector a straight line again, move the element or connector until the midpoint controls disappear.
You can adjust connectors, adding angles to them, to fit the canvas you're working in. When you move connected elements, the connector resizes to fit the space. To adjust a connector, click it to display the midpoint controls and move those as needed. To make a connector a straight line again, move the midpoint back until the midpoint controls disappear.
By default, if you move a connector so that it's almost a right angle or a straight line, the connector snaps into that angle or into a straight line. To disable this behavior, press and hold the Ctrl key while adjusting the connector.
If you move a connector so that it's almost a right angle or a straight line, the connector snaps into that angle or into a straight line.
{{< video-embed src="/media/docs/grafana/panels-visualizations/gif-canvas-connector-vertex-control-v11.0.mp4>" alt="Changing a connector from a straight line to a right angle" >}}
<!-- TODO: Use updated demo from what's new when uploaded to YouTube -->
{{< video-embed src="/media/docs/grafana/panels-visualizations/gif-canvas-connector-vertex-control-v11.0.mp4" alt="Changing a connector from a straight line to a right angle" >}}
### Style connectors
@ -99,8 +101,6 @@ You can set the size, color, direction, and style of connections based on fixed
{{< figure src="/media/docs/grafana/screenshot-grafana-10-0-canvas-service-graph.png" max-width="750px" caption="Canvas service graph" >}}
You can also change the shape of a connection anchor to a circle or remove the anchor entirely.
## Canvas editing
### Inline editor
@ -119,6 +119,16 @@ You can enable panning and zooming in a canvas. This allows you to both create a
{{< video-embed src="/media/docs/grafana/2024-01-05-Canvas-Pan-&-Zoom-Enablement-Video.mp4" max-width="750px" caption="Canvas pan and zoom enablement video" >}}
#### Infinite panning
You can enable infinite panning in a canvas when pan and zoom is enabled. This allows you to pan and zoom the canvas and uncover larger designs.
{{% admonition type="note" %}}
Infinite panning is an experimental feature that may not work as expected in all scenarios. For example, elements that are not top-left constrained may experience unexpected movement when panning.
{{% /admonition %}}
<!-- TODO: Add gif -->
### Context menu
The context menu lets you perform common tasks quickly and efficiently. Supported functionality includes opening / closing the inline editor, duplicating an element, deleting an element, and more.