Skip to content

Commit

Permalink
Semi-working radial menu.
Browse files Browse the repository at this point in the history
  • Loading branch information
ASxa86 committed Dec 14, 2024
1 parent 59fe0b1 commit 810e97e
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 7 deletions.
2 changes: 2 additions & 0 deletions app/edh/CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ qt_add_qml_module(${PROJECT_NAME}
Counter.qml
LayoutEDH.qml
Main.qml
MenuItem.qml
MenuEDH.qml
MenuLayout.qml
MenuLife.qml
ModelPlayers.qml
RadialMenu.qml
TextEDH.qml
${QML_SINGLETONS}
IMPORTS
Expand Down
77 changes: 70 additions & 7 deletions app/edh/Main.qml
Original file line number Diff line number Diff line change
Expand Up @@ -99,17 +99,80 @@ Window {
}
}

MenuEDH {
id: menu
// MenuEDH {
// id: menu
// anchors.centerIn: parent

// menuItemForest: MenuLife {
// }

// menuItemPlains: MenuLayout {
// model: player
// background: Style.color.plains
// foreground: Style.color.swamp
// }
// }

Rectangle {
anchors.centerIn: parent
width: 32
height: 32
radius: width / 2
color: Style.color.cardback

menuItemForest: MenuLife {
TapHandler {
gesturePolicy: TapHandler.WithinBounds
onTapped: menu.toggle()
}

menuItemPlains: MenuLayout {
model: player
background: Style.color.plains
foreground: Style.color.swamp
RadialMenu {
id: menu

anchors.fill: parent

// animationStyle: RadialMenu.Rotate | RadialMenu.Expand | RadialMenu.Scale

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: Style.color.plains
}

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: Style.color.island
}

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: Style.color.swamp
}

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: Style.color.mountain
}

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: Style.color.forest
}

Rectangle {
width: menu.itemSize
height: menu.itemSize
radius: width / 2
color: "pink"
}
}
}

Expand Down
52 changes: 52 additions & 0 deletions app/edh/MenuItem.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import QtQuick

Item {
id: root

property RadialMenu menu: null
property RadialMenu subMenu: null
property bool down: false

signal pressed()
signal released()
signal toggled()
signal triggered()

function toggle() {
root.down = !root.down;
}

onParentChanged: {
if(root.parent instanceof RadialMenu) {
root.menu = root.parent as RadialMenu;
}
}

onDownChanged: {
root.toggled();

if(root.down === true) {
root.triggered();
}

if(root.subMenu === null) {
return;
}

if(root.down === true) {
root.subMenu.open();
}
else {
root.subMenu.close();
}
}

TapHandler {
id: handler

gesturePolicy: TapHandler.WithinBounds
longPressThreshold: 0
onTapped: root.toggle()
onPressedChanged: handler.pressed === true ? root.pressed() : root.released()
}
}
159 changes: 159 additions & 0 deletions app/edh/RadialMenu.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import QtQuick

Item {
id: root

property real radius: width / 2 * 0.75 - 2
property bool opened: false
property real itemSize: menu.width / internal.model.count

// Defining a default property to override Item's children.
// The items from this list will be added via the ObjectModel using a View instead.
default property alias items: internal.model.children

QtObject {
id: internal

property ObjectModel model: ObjectModel {
}
}

function open() {
root.opened = true;
}

function close() {
root.opened = false;
}

function toggle() {
root.opened = !root.opened;
}

states: [
State {
name: "opened"
when: menu.opened == true

PropertyChanges {
target: menu
itemSize: menu.width
}
}
]

transitions: [
Transition {
NumberAnimation {
property: "itemSize"
duration: 350
}
}
]

PathView {
id: path

anchors.centerIn: parent

property real startAngle: -90

states: [
State {
name: "opened"
when: root.opened == true

PropertyChanges {
target: root
radius: width * 2
}

PropertyChanges {
target: path
startAngle: 270
}
}
]

transitions: [
Transition {
ParallelAnimation {
NumberAnimation {
property: "radius"
duration: 350
}

NumberAnimation {
property: "startAngle"
duration: 350
}
}
}
]

// state: root.state
// states: [
// State {
// name: root.statePressed

// PropertyChanges {
// target: path
// startAngle: 270
// }
// }
// ]

// transitions: Transition {
// NumberAnimation {
// property: "startAngle"
// duration: 350
// }
// }

model: internal.model

// delegate: Rectangle {
// id: rect
// width: root.width / 5
// height: width
// radius: width / 2
// color: foreground

// state: root.state
// states: [
// State {
// name: root.statePressed

// PropertyChanges {
// target: rect
// width: Style.iconSize * 1.25
// }
// }
// ]

// transitions: Transition {
// NumberAnimation {
// property: "width"
// duration: 350
// }
// }

// Loader {
// active: root.state === root.statePressed
// anchors.fill: parent
// sourceComponent: component
// }
// }

path: Path {
PathAngleArc {
id: radial

radiusX: root.radius
radiusY: root.radius
startAngle: path.startAngle
sweepAngle: 360
}
}
}
}

0 comments on commit 810e97e

Please sign in to comment.