From 55ea4d004485dc6550c3dd0ea7aa9c55f9c47027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= <michalcieslak@status.im>
Date: Mon, 19 Jun 2023 10:49:08 +0200
Subject: [PATCH] feat(Storybok): Inspection tool - find item on the list by
 clicking

---
 storybook/src/Storybook/InspectionItem.qml   |  4 ++++
 storybook/src/Storybook/InspectionPanel.qml  | 12 +++++++++---
 storybook/src/Storybook/InspectionWindow.qml |  8 ++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/storybook/src/Storybook/InspectionItem.qml b/storybook/src/Storybook/InspectionItem.qml
index 8c47b0335c..ecd83f4d00 100644
--- a/storybook/src/Storybook/InspectionItem.qml
+++ b/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()
     }
 }
diff --git a/storybook/src/Storybook/InspectionPanel.qml b/storybook/src/Storybook/InspectionPanel.qml
index 8971b530c5..a6449aa28d 100644
--- a/storybook/src/Storybook/InspectionPanel.qml
+++ b/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,
diff --git a/storybook/src/Storybook/InspectionWindow.qml b/storybook/src/Storybook/InspectionWindow.qml
index 3137611adc..0eb9beb1cd 100644
--- a/storybook/src/Storybook/InspectionWindow.qml
+++ b/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