custom-example: add example of tool inset use

this adds a (commented by default) rectangle which uses the tool insets
from the widget layer to dynamically size itself. This is an example of
how to use tool insets to position something on the custom-layer

custom-example/res/CustomFlyViewOverlay.qml

@@ -56,7 +56,7 @@ Item {
     QGCToolInsets {
         id:                     _totalToolInsets
         leftEdgeTopInset:       parentToolInsets.leftEdgeTopInset
-        leftEdgeCenterInset:    parentToolInsets.leftEdgeCenterInset
+        leftEdgeCenterInset:    exampleRectangle.leftEdgeCenterInset
         leftEdgeBottomInset:    parentToolInsets.leftEdgeBottomInset
         rightEdgeTopInset:      parentToolInsets.rightEdgeTopInset
         rightEdgeCenterInset:   parentToolInsets.rightEdgeCenterInset
@@ -69,6 +69,26 @@ Item {
         bottomEdgeRightInset:   parent.height - attitudeIndicator.y
     }
 
+    // This is an example of how you can use parent tool insets to position an element on the custom fly view layer
+    // - we use parent topEdgeLeftInset to position the widget below the toolstrip
+    // - we use parent bottomEdgeLeftInset to dodge the virtual joystick if enabled
+    // - we use the parent leftEdgeTopInset to size our element to the same width as the ToolStripAction
+    // - we export the width of this element as the leftEdgeCenterInset so that the map will recenter if the vehicle flys behind this element
+    Rectangle {
+        id: exampleRectangle
+        visible: false // to see this example, set this to true. To view insets, enable the insets viewer FlyView.qml
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.topMargin: parentToolInsets.topEdgeLeftInset + _toolsMargin
+        anchors.bottomMargin: parentToolInsets.bottomEdgeLeftInset + _toolsMargin
+        anchors.leftMargin: _toolsMargin
+        width: parentToolInsets.leftEdgeTopInset - _toolsMargin
+        color: 'red'
+
+        property real leftEdgeCenterInset: visible ? x + width : 0
+    }
+
     //-------------------------------------------------------------------------
     //-- Heading Indicator
     Rectangle {