status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Michał Cieślak 2023-06-20 10:20:35 +02:00 committed by Michał
parent 5315f94e40
commit 40adfa2d90
2 changed files with 76 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
storybook/src/Storybook/InspectionItem.qml
View File

@ -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 {

2
storybook/src/Storybook/InspectionPanel.qml
View File

@ -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)
}