From 40adfa2d905cebf51858f2e1de28665fbba780dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= <michalcieslak@status.im>
Date: Tue, 20 Jun 2023 10:20:35 +0200
Subject: [PATCH] feat(Storybok): Inspection tool - draw auxiliary lines
 without clipping

Drawing auxiliary lines have been moved outside the items hierarchy
to avoid clipping. Previously auxiliary lines were incorrectly
truncated in some cases.
---
 storybook/src/Storybook/InspectionItem.qml  | 104 ++++++++++++++------
 storybook/src/Storybook/InspectionPanel.qml |   2 +
 2 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/storybook/src/Storybook/InspectionItem.qml b/storybook/src/Storybook/InspectionItem.qml
index ecd83f4d00..d2be68986f 100644
--- a/storybook/src/Storybook/InspectionItem.qml
+++ b/storybook/src/Storybook/InspectionItem.qml
@@ -28,7 +28,9 @@ Rectangle {
     required property bool isVisual
     property bool showNonVisual: false
     property bool forceSelect: false
+
     required property Item visualParent
+    required property Item visualRoot
 
     readonly property real topSpacing: mapToItem(visualParent, 0, 0).y
 
@@ -44,40 +46,82 @@ Rectangle {
 
     signal clicked
 
-    component DistanceRectangle: Rectangle {
-        width: 1
-        height: 1
-        color: selectionColor
-        visible: root.selected
-        parent: root.parent
-    }
+    Loader {
+        active: root.selected
 
-    // top
-    DistanceRectangle {
-        height: topSpacing
-        anchors.bottom: root.top
-        anchors.horizontalCenter: root.horizontalCenter
-    }
+        sourceComponent: Item {
+            parent: root.visualRoot
+            anchors.fill: parent
 
-    // left
-    DistanceRectangle {
-        width: leftSpacing
-        anchors.right: root.left
-        anchors.verticalCenter: root.verticalCenter
-    }
+            Rectangle {
+                id: selectionParentRect
 
-    // right
-    DistanceRectangle {
-        width: rightSpacing
-        anchors.left: root.right
-        anchors.verticalCenter: root.verticalCenter
-    }
+                width: root.visualParent.width
+                height: root.visualParent.height
 
-    // bottom
-    DistanceRectangle {
-        height: bottomSpacing
-        anchors.top: root.bottom
-        anchors.horizontalCenter: root.horizontalCenter
+                readonly property point pos:
+                    root.visualParent.mapToItem(root.visualRoot, 0, 0)
+
+                x: pos.x
+                y: pos.y
+
+                border.color: root.border.color
+                border.width: 1
+                color: "transparent"
+            }
+
+            Rectangle {
+                id: selectionRect
+
+                width: root.width
+                height: root.height
+
+                readonly property point pos:
+                    root.mapToItem(root.visualRoot, 0, 0)
+
+                x: pos.x
+                y: pos.y
+
+                border.color: root.border.color
+                border.width: root.border.width
+                color: root.color
+            }
+
+            component DistanceRectangle: Rectangle {
+                width: 1
+                height: 1
+                color: selectionColor
+                visible: root.selected
+            }
+
+            // top
+            DistanceRectangle {
+                anchors.top: selectionParentRect.top
+                anchors.bottom: selectionRect.top
+                anchors.horizontalCenter: selectionRect.horizontalCenter
+            }
+
+            // bottom
+            DistanceRectangle {
+                anchors.top: selectionRect.bottom
+                anchors.bottom: selectionParentRect.bottom
+                anchors.horizontalCenter: selectionRect.horizontalCenter
+            }
+
+            // left
+            DistanceRectangle {
+                anchors.left: selectionParentRect.left
+                anchors.right: selectionRect.left
+                anchors.verticalCenter: selectionRect.verticalCenter
+            }
+
+            // right
+            DistanceRectangle {
+                anchors.left: selectionRect.right
+                anchors.right: selectionParentRect.right
+                anchors.verticalCenter: selectionRect.verticalCenter
+            }
+        }
     }
 
     Popup {
diff --git a/storybook/src/Storybook/InspectionPanel.qml b/storybook/src/Storybook/InspectionPanel.qml
index a6449aa28d..af37b8d37d 100644
--- a/storybook/src/Storybook/InspectionPanel.qml
+++ b/storybook/src/Storybook/InspectionPanel.qml
@@ -66,6 +66,7 @@ Item {
 
             const x = isRoot ? 0 : item.x
             const y = isRoot ? 0 : item.y
+
             const name = InspectionUtils.simpleName(item)
             const visual = InspectionUtils.isVisual(item)
             const clip = item.clip
@@ -77,6 +78,7 @@ Item {
                 z: item.z,
                 isVisual: visual,
                 visualParent,
+                visualRoot: root,
                 clip: Qt.binding(() => root.propagateClipping && item.clip),
                 showNonVisual: Qt.binding(() => root.showNonVisualItems)
             }