Make DebugConsole use HDrawer

Also add some help, commands to quicly set the position, and support
vertical orientations for HDrawer
This commit is contained in:
miruka 2019-12-09 08:01:01 -04:00
parent 5609ae2817
commit 99034c7587
2 changed files with 85 additions and 28 deletions

View File

@ -4,8 +4,10 @@ import "../utils.js" as Utils
Drawer {
id: drawer
implicitWidth: calculatedWidth
implicitHeight: referenceSizeParent.height
x: vertical ? referenceSizeParent.width / 2 - width / 2 : 0
y: vertical ? 0 : referenceSizeParent.height / 2 - height / 2
implicitWidth: vertical ? referenceSizeParent.width : calculatedWidth
implicitHeight: vertical ? calculatedWidth : referenceSizeParent.height
topPadding: 0
bottomPadding: 0
@ -26,36 +28,51 @@ Drawer {
signal userResized(int newWidth)
property alias color: bg.color
property Item referenceSizeParent: parent
property int normalWidth: 300
property int normalWidth:
vertical ? referenceSizeParent.height : referenceSizeParent.width
property int minNormalWidth: resizeAreaWidth
property int maxNormalWidth:
vertical ?
referenceSizeParent.height - theme.minimumSupportedHeight :
referenceSizeParent.width - theme.minimumSupportedWidth
property bool collapse: window.width < 400
property int collapseExpandedWidth: referenceSizeParent.width
property bool collapse:
(vertical ? window.height : window.width) < 400
property int collapseExpandedWidth:
vertical ? referenceSizeParent.height : referenceSizeParent.width
property alias color: bg.color
property alias resizeAreaWidth: resizeArea.width
property int resizeAreaWidth: theme.spacing / 2
readonly property int calculatedWidth:
collapse ?
collapseExpandedWidth :
Math.max(minNormalWidth, Math.min(normalWidth, maxNormalWidth))
readonly property bool vertical:
edge === Qt.TopEdge || edge === Qt.BottomEdge
Behavior on width {
enabled: ! resizeMouseHandler.drag.active
NumberAnimation { duration: 100 }
}
Behavior on height {
enabled: ! resizeMouseHandler.drag.active
NumberAnimation { duration: 100 }
}
Item {
id: resizeArea
x: drawer.edge === Qt.LeftEdge ? drawer.width - width : 0
width: theme.spacing / 2
height: parent.height
z: 9999
x: vertical || drawer.edge === Qt.RightEdge ? 0 : drawer.width-width
y: ! vertical || drawer.edge !== Qt.TopEdge ? 0 : drawer.height-height
width: vertical ? parent.width : resizeAreaWidth
height: vertical ? resizeAreaWidth : parent.height
z: 999
MouseArea {
id: resizeMouseHandler
@ -65,18 +82,26 @@ Drawer {
hoverEnabled: true
cursorShape:
containsMouse || drag.active ?
Qt.SizeHorCursor : Qt.ArrowCursor
(vertical ? Qt.SizeVerCursor : Qt.SizeHorCursor) :
Qt.ArrowCursor
onPressed: canResize = true
onReleased: { canResize = false; userResized(drawer.normalWidth) }
onMouseXChanged:
if (canResize) {
if (! vertical && canResize) {
drawer.normalWidth =
drawer.calculatedWidth +
(drawer.edge === Qt.RightEdge ? -mouseX : mouseX)
}
onMouseYChanged:
if (vertical && canResize) {
drawer.normalWidth =
drawer.calculatedWidth +
(drawer.edge === Qt.BottomEdge ? -mouseY : mouseY)
}
property bool canResize: false
}
}

View File

@ -2,16 +2,15 @@ import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import "Base"
import "utils.js" as Utils
Window {
HDrawer {
id: debugConsole
title: qsTr("Debug console")
width: 640
height: 480
visible: false
flags: Qt.WA_TranslucentBackground
color: "transparent"
edge: Qt.BottomEdge
width: vertical ? Math.min(window.width, 720) : calculatedWidth
height: vertical ? calculatedWidth : Math.min(window.width, 480)
normalWidth: 360
z: 9999
property var target: null
property alias t: debugConsole.target
@ -20,6 +19,23 @@ Window {
property alias his: debugConsole.history
property int historyEntry: -1
property string help: qsTr(
`Javascript debugging console
Special variables:
t Target item to debug for which this console was opened
his History, list of commands entered
Special commands:
.j OBJECT, .json OBJECT Print OBJECT as human-readable JSON
.t, .top Attach the console to the parent window's top
.b, .bottom Attach the console to the parent window's bottom
.l, .left Attach the console to the parent window's left
.r, .right Attach the console to the parent window's right
.h, .help Show this help`.replace(/^ {8}/gm, "")
)
Component.onCompleted: {
mainUI.shortcuts.debugConsole = debugConsole
@ -39,21 +55,37 @@ Window {
function runJS(input) {
if (history.slice(-1)[0] !== input) history.push(input)
let output = ""
let error = false
try {
if (input.startsWith("j ")) {
var output = JSON.stringify(eval(input.substring(2)), null, 4)
if ([".h", ".help"].includes(input)) {
output = debugConsole.help
} else if ([".t", ".top"].includes(input)) {
debugConsole.edge = Qt.TopEdge
} else if ([".b", ".bottom"].includes(input)) {
debugConsole.edge = Qt.BottomEdge
} else if ([".l", ".left"].includes(input)) {
debugConsole.edge = Qt.LeftEdge
} else if ([".r", ".right"].includes(input)) {
debugConsole.edge = Qt.RightEdge
} else if (input.startsWith(".j ") || input.startsWith(".json ")) {
output = JSON.stringify(eval(input.substring(2)), null, 4)
} else {
let result = eval(input)
var output = result instanceof Array ?
output = result instanceof Array ?
"[" + String(result) + "]" : String(result)
}
} catch (err) {
error = true
var output = err.toString()
output = err.toString()
}
commandsView.model.insert(0, { input, output, error })
@ -119,7 +151,7 @@ Window {
onAccepted: if (text) { runJS(text); text = ""; historyEntry = -1 }
backgroundColor: Qt.hsla(0, 0, 0, 0.85)
bordered: false
placeholderText: qsTr("Type some JavaScript...")
placeholderText: qsTr("Javascript debug console - Try .help")
font.family: theme.fontFamily.mono
Keys.onUpPressed: