Revision control
Copy as Markdown
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Shapes
import QQEMLib 1.0
NodeViewItem {
id: nodeViewItem
property bool initialized: false
readonly property color borderColor: Qt.lighter(mainView.backgroundColor1, 2.0)
readonly property color connectorColor: "#80d0d040"
function showAddNodeDialog(startNodeId, endNodeId) {
addNodeDialog.reset();
effectManager.updateAddNodeData();
addNodeDialog.startNodeId = startNodeId;
addNodeDialog.endNodeId = endNodeId;
addNodeDialog.open();
}
function showRenameNodeDialog() {
renameNodeDialog.open();
}
focus: true
Component.onCompleted: {
nodeViewItem.updateActiveNodesList();
effectManager.initialize();
}
Timer {
running: true
interval: 1
onTriggered: {
// Do the layout when views have correct sizes
layoutNodes(false);
initialized = true;
}
}
onDoubleClickNode: {
mainToolbar.setDesignMode(false);
}
onOpenDeleteNodeDialog: {
mainWindow.deleteNodeAction();
}
onOpenNodeContextMenu: {
nodeContextMenu.popup();
}
RenameNodeDialog {
id: renameNodeDialog
x: mainWindow.width * 0.5 - width * 0.5
y: mainWindow.height * 0.5 - height * 0.5
}
AddNodeDialog {
id: addNodeDialog
x: mainWindow.width * 0.5 - width * 0.5
y: mainWindow.height * 0.5 - height * 0.5
}
Image {
anchors.fill: parent
source: "images/nodeview_background.jpg"
}
// Render nodes
Repeater {
model: nodeViewItem.nodesModel
delegate: Rectangle {
width: model.width
height: model.height
x: model.x
y: model.y
border.color: model.selected ? highlightColor : borderColor
color: mainView.backgroundColor1
opacity: model.disabled ? 0.4 : 1.0
border.width: 2
radius: model.type > 1 ? 6 : height * 0.5
Text {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
width: model.width - 20
elide: Text.ElideRight
text: model.name
font.pixelSize: 14
opacity: model.disabled ? 0.5 : 1.0
color: mainView.foregroundColor2
}
Image {
id: disableIconButton
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: parent.left
anchors.leftMargin: 6
width: 16
height: 16
mipmap: true
visible: model.type === 2
source: model.disabled ? "images/icon_visibility_off.png" : "images/icon_visibility_on.png"
opacity: model.disabled ? 1.0 : 0.2
MouseArea {
anchors.fill: parent
anchors.margins: -4
onClicked: {
model.disabled = !model.disabled;
nodeViewItem.updateActiveNodesList();
effectManager.bakeShaders(true);
}
}
}
// Connectors
Rectangle {
width: 10
height: 10
x: parent.width * 0.5 - width * 0.5
y: -height * 0.5
radius: width * 0.5
visible: model.type !== 0
border.width: 2
border.color: connectorColor
color: mainView.backgroundColor1
}
Rectangle {
width: 10
height: 10
x: parent.width * 0.5 - width * 0.5
y: parent.height - height * 0.5
radius: width * 0.5
visible: model.type !== 1
border.width: 2
border.color: connectorColor
color: mainView.backgroundColor1
}
}
}
// Render arrows between nodes
Repeater {
model: nodeViewItem.arrowsModel
delegate: Shape {
anchors.fill: parent
ShapePath {
strokeWidth: 2
strokeColor: connectorColor
capStyle: ShapePath.RoundCap
startX: model.startX
startY: model.startY
PathLine {
x: model.endX
y: model.endY
}
}
}
}
// Render '+' into arrows
Repeater {
model: nodeViewItem.arrowsModel
delegate: Rectangle {
property real arrowWidth: Math.sqrt(Math.pow(model.endX - model.startX, 2) + Math.pow(model.endY - model.startY, 2))
x: model.startX + (model.endX - model.startX) * 0.5 - width * 0.5
y: model.startY + (model.endY - model.startY) * 0.5 - height * 0.5
width: 20
height: 20
radius: width * 0.5
border.width: 1
color: mainView.backgroundColor1
border.color: highlightColor
visible: arrowWidth > 50
Rectangle {
width: 8
height: 2
anchors.centerIn: parent
color: mainView.foregroundColor2
}
Rectangle {
width: 2
height: 8
anchors.centerIn: parent
color: mainView.foregroundColor2
}
MouseArea {
anchors.fill: parent
onClicked: {
nodeViewItem.showAddNodeDialog(model.startNodeId, model.endNodeId);
}
}
Text {
anchors.left: parent.right
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 16
color: mainView.foregroundColor1
visible: nodeViewItem.nodeGraphComplete && nodeViewItem.arrowsModel.rowCount === 1
text: "Add Node"
}
}
}
// Add node button
Rectangle {
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 20
width: 30
height: 30
radius: width * 0.5
border.width: 2
color: mainView.backgroundColor1
border.color: borderColor
Rectangle {
width: 8
height: 2
anchors.centerIn: parent
color: mainView.foregroundColor2
}
Rectangle {
width: 2
height: 8
anchors.centerIn: parent
color: mainView.foregroundColor2
}
MouseArea {
anchors.fill: parent
onClicked: {
nodeViewItem.showAddNodeDialog(-1, -1);
}
}
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.right
anchors.leftMargin: 10
font.pixelSize: 16
color: mainView.foregroundColor1
text: "Add Node"
}
}
// Active arrow user modifies
Shape {
anchors.fill: parent
visible: nodeViewItem.activeArrowEnabled
opacity: 0.4
ShapePath {
strokeWidth: 4
strokeColor: connectorColor
strokeStyle: ShapePath.DashLine
dashPattern: [2, 2]
capStyle: ShapePath.RoundCap
startX: nodeViewItem.activeArrowStartPoint.x
startY: nodeViewItem.activeArrowStartPoint.y
PathLine {
x: nodeViewItem.activeArrowEndPoint.x
y: nodeViewItem.activeArrowEndPoint.y
}
}
}
}