feat(Storybok): Inspection tool - find item on the list by clicking

storybook/src/Storybook/InspectionItem.qml

@@ -42,6 +42,8 @@ Rectangle {
 
     readonly property alias containsMouse: mouseArea.containsMouse
 
+    signal clicked
+
     component DistanceRectangle: Rectangle {
         width: 1
         height: 1
@@ -117,5 +119,7 @@ Rectangle {
         visible: isVisual || showNonVisual
         anchors.fill: parent
         hoverEnabled: true
+
+        onClicked: root.clicked()
     }
 }

storybook/src/Storybook/InspectionPanel.qml

@@ -15,10 +15,16 @@ Item {
     implicitWidth: image.implicitWidth
     implicitHeight: image.implicitHeight
 
+    signal clicked(int index)
+
     Component {
         id: inspectionItemComponent
 
-        InspectionItem {}
+        InspectionItem {
+            required property int index
+
+            onClicked: root.clicked(index)
+        }
     }
 
     Image {
@@ -51,7 +57,7 @@ Item {
         const placeholders = []
         const modelItems = []
 
-        items.forEach((entry) => {
+        items.forEach((entry, index) => {
             const {item, parentIndex, level} = entry
             const isRoot = parentIndex === -1
 
@@ -65,7 +71,7 @@ Item {
             const clip = item.clip
 
             const props = {
-                name, x, y,
+                index, name, x, y,
                 width: item.width,
                 height: item.height,
                 z: item.z,

storybook/src/Storybook/InspectionWindow.qml

@@ -20,6 +20,14 @@ ApplicationWindow {
         loader.setSource("InspectionPanel.qml", properties)
     }
 
+    Connections {
+        target: loader.item
+
+        function onClicked(index) {
+            itemsListView.positionViewAtIndex(index, ListView.Center)
+        }
+    }
+
     SplitView {
         anchors.fill: parent