From 8957fd2b3b437272c7d55a73dfb05883a4df0b8f Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Thu, 4 Apr 2024 13:59:33 -0400 Subject: [PATCH] Docs: Fix canvas G11 updates (#85024) * 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 --- .../visualizations/canvas/index.md | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/canvas/index.md b/docs/sources/panels-visualizations/visualizations/canvas/index.md index 251926e58ab..d853ab32a55 100644 --- a/docs/sources/panels-visualizations/visualizations/canvas/index.md +++ b/docs/sources/panels-visualizations/visualizations/canvas/index.md @@ -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" >}} + + +{{< 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 %}} + + + ### 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.