drawing

Modules/Drawing/Background.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+
+ShapePath {
+	id: root
+
+	readonly property bool flatten: wrapper.width < rounding * 2
+	readonly property real rounding: Appearance.rounding.normal
+	readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+	required property Wrapper wrapper
+
+	fillColor: DynamicColors.palette.m3surface
+	strokeWidth: -1
+
+	Behavior on fillColor {
+		CAnim {
+		}
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.roundingX * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.rounding * 2
+	}
+
+	PathArc {
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: -root.roundingX
+		relativeY: root.rounding
+	}
+
+	PathLine {
+		relativeX: -(root.wrapper.width - root.roundingX * 2)
+		relativeY: 0
+	}
+
+	PathArc {
+		direction: PathArc.Counterclockwise
+		radiusX: Math.min(root.rounding, root.wrapper.width)
+		radiusY: root.rounding
+		relativeX: -root.roundingX
+		relativeY: root.rounding
+	}
+}

Modules/Drawing/Content.qml

@@ -0,0 +1,76 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+
+Item {
+	id: root
+
+	readonly property var colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#a855f7", "#ec4899", "#ffffff", "#000000"]
+	required property Canvas drawing
+	required property var visibilities
+
+	implicitHeight: huePicker.implicitHeight + 12 + palette.implicitHeight + Appearance.padding.normal * 2
+	implicitWidth: huePicker.implicitWidth + Appearance.padding.normal * 2
+
+	Column {
+		anchors.centerIn: parent
+		spacing: 12
+
+		ColorArcPicker {
+			id: huePicker
+
+			drawing: root.drawing
+		}
+
+		GridLayout {
+			id: palette
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			columns: 5
+			rowSpacing: 8
+			rows: 2
+
+			Repeater {
+				model: root.colors
+
+				delegate: Item {
+					required property color modelData
+					readonly property bool selected: Qt.colorEqual(root.drawing.penColor, modelData)
+
+					Layout.fillWidth: true
+					height: 28
+
+					CustomRect {
+						anchors.centerIn: parent
+						border.color: selected ? "#ffffff" : Qt.rgba(1, 1, 1, 0.28)
+						border.width: selected ? 3 : 1
+						color: "transparent"
+						height: parent.height
+						radius: width / 2
+						width: parent.height
+					}
+
+					CustomRect {
+						anchors.centerIn: parent
+						border.color: Qt.rgba(0, 0, 0, 0.25)
+						border.width: Qt.colorEqual(modelData, "#ffffff") ? 1 : 0
+						color: modelData
+						height: 20
+						radius: width / 2
+						width: 20
+					}
+
+					MouseArea {
+						anchors.fill: parent
+
+						onClicked: root.drawing.penColor = parent.modelData
+					}
+				}
+			}
+		}
+	}
+}

Modules/Drawing/Wrapper.qml

@@ -0,0 +1,133 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Helpers
+import qs.Config
+import qs.Daemons
+
+Item {
+	id: root
+
+	required property Canvas drawing
+	property bool expanded: true
+	required property ShellScreen screen
+	readonly property bool shouldBeActive: visibilities.isDrawing
+	required property var visibilities
+
+	function show(): void {
+		visibilities.isDrawing = true;
+		timer.restart();
+	}
+
+	implicitHeight: content.implicitHeight
+	implicitWidth: 0
+	visible: width > 0
+
+	states: [
+		State {
+			name: "hidden"
+			when: !root.shouldBeActive
+
+			PropertyChanges {
+				root.implicitWidth: 0
+			}
+
+			PropertyChanges {
+				icon.opacity: 0
+			}
+
+			PropertyChanges {
+				content.opacity: 0
+			}
+		},
+		State {
+			name: "collapsed"
+			when: root.shouldBeActive && !root.expanded
+
+			PropertyChanges {
+				root.implicitWidth: icon.implicitWidth
+			}
+
+			PropertyChanges {
+				icon.opacity: 1
+			}
+
+			PropertyChanges {
+				content.opacity: 0
+			}
+		},
+		State {
+			name: "visible"
+			when: root.shouldBeActive && root.expanded
+
+			PropertyChanges {
+				root.implicitWidth: content.implicitWidth
+			}
+
+			PropertyChanges {
+				icon.opacity: 0
+			}
+
+			PropertyChanges {
+				content.opacity: 1
+			}
+		}
+	]
+	transitions: [
+		Transition {
+			from: "*"
+			to: "*"
+
+			ParallelAnimation {
+				Anim {
+					easing.bezierCurve: MaterialEasing.expressiveEffects
+					property: "implicitWidth"
+					target: root
+				}
+
+				Anim {
+					duration: Appearance.anim.durations.small
+					property: "opacity"
+					target: icon
+				}
+
+				Anim {
+					duration: Appearance.anim.durations.small
+					property: "opacity"
+					target: content
+				}
+			}
+		}
+	]
+
+	Loader {
+		id: icon
+
+		active: Qt.binding(() => root.shouldBeActive || root.visible)
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		height: content.contentItem.height
+		opacity: 1
+
+		sourceComponent: MaterialIcon {
+			font.pointSize: 14
+			text: "arrow_forward_ios"
+		}
+	}
+
+	Loader {
+		id: content
+
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		sourceComponent: Content {
+			drawing: root.drawing
+			visibilities: root.visibilities
+		}
+
+		Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible)
+	}
+}

Modules/Shortcuts.qml

@@ -24,6 +24,15 @@ Scope {
 		}
 	}
 
+	CustomShortcut {
+		name: "toggle-drawing"
+
+		onPressed: {
+			const visibilities = Visibilities.getForActive();
+			visibilities.isDrawing = !visibilities.isDrawing;
+		}
+	}
+
 	CustomShortcut {
 		name: "toggle-nc"