feat: drawing popout now clips strokes again + add redo + add undo and redo keybinds

Drawers/Drawing.qml

@@ -4,12 +4,16 @@ import Quickshell
 import QtQuick
 import ZShell.Internal
 import qs.Components
+import qs.Services
 
 Item {
 	id: root
 
 	readonly property alias content: contentLoader.item
+
 	required property ScreenState screenState
+	property rect holeRect
+	property real holeRadius: 0
 
 	Loader {
 		id: contentLoader
@@ -18,6 +22,9 @@ Item {
 		anchors.fill: parent
 
 		sourceComponent: StrokeCanvas {
+			anchors.fill: parent
+			hole: root.holeRect
+			holeRadius: root.holeRadius
 			penColor: root.screenState.penColor
 			penWidth: root.screenState.penWidth
 		}

Drawers/DrawingInput.qml

@@ -0,0 +1,95 @@
+import Quickshell
+import QtQuick
+import ZShell.Config
+import qs.Components
+
+CustomMouseArea {
+	id: root
+
+	required property real borderThickness
+	required property Drawing drawing
+	required property Panels panels
+	required property ScreenState screenState
+	required property EdgeGeometry geometry
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + geometry.insetTop(borderThickness);
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	anchors.fill: parent
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	cursorShape: Qt.BlankCursor
+	enabled: z > 0
+	hoverEnabled: true
+	focus: root.screenState.isDrawing
+	z: 2
+
+	Binding {
+		target: root.drawing.content
+		property: "hoverPoint"
+		value: Qt.point(root.mouseX, root.mouseY)
+	}
+
+	Keys.onPressed: e => {
+		const mod = e.modifiers;
+		const key = e.key;
+
+		if ((key == Qt.Key_Z) && (mod & Qt.ControlModifier) && (mod & Qt.ShiftModifier)) {
+			root.drawing.content.redo();
+			e.accepted = true;
+		} else if ((key == Qt.Key_Z) && (mod & Qt.ControlModifier)) {
+			root.drawing.content.undoLastGroup();
+			e.accepted = true;
+		}
+	}
+
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (!drawing.content.hoverVisible)
+			drawing.content.showHover();
+
+		if (event.buttons & Qt.LeftButton) {
+			drawing.content.appendPoint(x, y);
+			return;
+		}
+
+		if (!(event.buttons & Qt.LeftButton) && inLeftPanel(panels.drawing, x, y)) {
+			z = -2;
+			panels.drawing.expand();
+			drawing.content.hideHover();
+		}
+	}
+	onPressed: event => {
+		const x = event.x;
+		const y = event.y;
+
+		panels.drawing.collapse();
+
+		if (event.buttons & Qt.LeftButton) {
+			panels.drawing.collapse();
+			drawing.content.beginStroke(x, y);
+			return;
+		}
+
+		if (event.button & Qt.RightButton) {
+			drawing.content.clear();
+			return;
+		}
+	}
+	onReleased: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (event.button & Qt.LeftButton) {
+			drawing.content.endStroke();
+			drawing.content.showHover();
+		}
+	}
+}

Drawers/Interactions.qml

@@ -1,25 +1,33 @@
 import Quickshell
 import QtQuick
 import ZShell.Config
+import ZShell.Internal
 import qs.Components
 import qs.Helpers
 import qs.Modules.Bar.Popouts
 
-Item {
+CustomMouseArea {
 	id: root
 
+	required property Drawing drawing
+	required property DrawingInput input
+
 	required property Item bar
 	required property real borderThickness
-	property bool dashboardShortcutActive
-	required property Drawing drawing
 	required property EdgeGeometry geometry
-	property bool osdShortcutActive
+
 	required property Panels panels
 	required property Wrapper popouts
+
 	required property ShellScreen screen
+	required property ScreenState screenState
+
+	property bool dashboardShortcutActive
+	property point dragStart
+	property bool osdShortcutActive
+	property bool setInitialPoint: false
 	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
-	required property ScreenState screenState
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
 		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
@@ -56,124 +64,116 @@ Item {
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
+	acceptedButtons: bar.fullscreen ? Qt.NoButton : Qt.AllButtons
 	anchors.fill: parent
+	hoverEnabled: true
 
-	DragHandler {
-		id: singleHandler
-
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-		dragThreshold: 0
-		enabled: !root.screenState.isDrawing
-		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfSameType | PointerHandler.ApprovesTakeOverByAnything
-		maximumPointCount: 1
-		minimumPointCount: 1
-		target: null
-
-		onActiveChanged: {
-			if (!active)
-				root.singleGestureTriggered = false;
-		}
-		onCentroidChanged: {
-			const x = centroid.position.x;
-			const y = centroid.position.y;
-			const pressX = centroid.pressPosition.x;
-			const pressY = centroid.pressPosition.y;
-			const dragX = x - pressX;
-			const dragY = y - pressY;
-
-			if (pressY >= root.screen.height - Config.bar.border && pressX > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-				root.screenState.launcher = true;
-
-			if (root.singleGestureTriggered)
-				return;
-
-			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, pressX, pressY);
-
-			if (inDashboard && root.withinPanelWidth(root.panels.dashboardWrapper, x, y)) {
-				if (dragY > Config.dashboard.dragThreshold) {
-					root.screenState.dashboard = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -Config.dashboard.dragThreshold) {
-					root.screenState.dashboard = false;
-					root.singleGestureTriggered = true;
-				}
+	onContainsMouseChanged: {
+		if (!containsMouse) {
+			if (!osdShortcutActive) {
+				screenState.osd = false;
+				panels.osd.hovered = false;
 			}
 
-			if (root.geometry.insetTop(root.borderThickness) > pressY && (Config.dashboard.showOnHover || !inDashboard)) {
-				if (dragY > 20) {
-					root.screenState.settings = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
-					root.screenState.settings = false;
-					root.singleGestureTriggered = true;
-				}
+			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
+				popouts.hasCurrent = false;
 			}
 
-			if (pressY > root.screen.height - root.geometry.insetBottom(root.borderThickness) && pressX < root.screen.width / 5 && dragY < -50)
-				root.screenState.clipboard = true;
+			if (Config.bar.autoHide || bar.fullscreen)
+				bar.isHovered = false;
 
-			if (!Config.dock.hoverToReveal && pressY > root.screen.height - root.geometry.insetTop(root.borderThickness) && pressX > root.screen.width / 5 && !root.screenState.launcher)
-				if (dragY < -10) {
-					root.screenState.dock = true;
-					root.singleGestureTriggered = true;
-				}
-
-			if (pressX > root.screen.width - Config.bar.border && pressY < (root.screen.height / 2) && dragX < -Config.sidebar.dragThreshold) {
-				root.screenState.sidebar = true;
-				root.singleGestureTriggered = true;
-			}
-
-			if (pressX >= root.screen.width - Config.bar.border && pressY > (root.screen.height / 2) && dragX < -20) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
-
-			if (pressX <= Config.bar.border && dragX > 20) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
+			if (screenState.dashboard && Config.dashboard.showOnHover)
+				screenState.dashboard = false;
 		}
 	}
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+		const dragX = x - dragStart.x;
+		const dragY = y - dragStart.y;
 
-	PointHandler {
-		id: drawingHandler
+		if (screenState.isDrawing && !inLeftPanel(panels.drawing, x, y)) {
+			input.z = 2;
+			panels.drawing.collapse();
+		}
 
-		property bool setInitialPoint: false
+		if (root.bar.fullscreen && !root.bar.isHovered)
+			unhideTimer.start();
 
-		acceptedButtons: Qt.LeftButton | Qt.RightButton
-		enabled: root.screenState.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
+		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
+			screenState.launcher = true;
 
-		onActiveChanged: {
-			if (!active) {
-				setInitialPoint = false;
-				root.drawing.content.endStroke();
-			} else {
-				root.panels.drawing.collapse();
+		const entryAt = bar.entryAt(geometry.axisPos(x, y));
+		const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboardWrapper, x, y) && (!entryAt || entryAt === "activeWindow");
+
+		if (!dashboardShortcutActive) {
+			screenState.dashboard = showDashboard;
+		} else if (showDashboard) {
+			dashboardShortcutActive = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && withinPanelWidth(panels.dashboardWrapper, x, y)) {
+			if (dragY > Config.dashboard.dragThreshold)
+				screenState.dashboard = true;
+			else if (dragY < -Config.dashboard.dragThreshold)
+				screenState.dashboard = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && !inTopPanel(panels.dashboardWrapper, dragStart.x, dragStart.y)) {
+			if (dragY > 20) {
+				screenState.settings = true;
+			} else if (dragY < -20) {
+				screenState.settings = false;
 			}
 		}
-		onPointChanged: {
-			if (!active)
-				return;
-			const x = point.position.x;
-			const y = point.position.y;
-			const origX = point.pressPosition.x;
-			const origY = point.pressPosition.y;
 
-			if (point.pressedButtons & Qt.RightButton) {
-				root.drawing.content.clear();
-				return;
+		if (pressed && dragStart.y > screen.height - geometry.insetBottom(borderThickness) && dragStart.x < screen.width / 5 && dragY < -50)
+			screenState.clipboard = true;
+
+		if (pressed && !Config.dock.hoverToReveal && dragStart.y > screen.height - geometry.insetTop(borderThickness) && dragStart.x > screen.width / 5 && !screenState.launcher)
+			if (dragY < -10)
+				screenState.dock = true;
+
+		if (pressed && dragStart.x > screen.width - Config.bar.border && dragStart.y < (screen.height / 2) && dragX < -Config.sidebar.dragThreshold)
+			screenState.sidebar = true;
+
+		if (pressed && dragStart.x >= screen.width - Config.bar.border && dragStart.y > (screen.height / 2) && dragX < -20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+
+		if (pressed && dragStart.x <= Config.bar.border && dragX > 20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
+
+		if (!screenState.bar && Config.bar.autoHide && geometry.barContains(x, y, true))
+			bar.isHovered = true;
+
+		if (panels.sidebar.offsetScale === 1) {
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
 			}
-			if (x === 0 && y === 0 && origX === 0 && origY === 0)
-				return;
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
 
-			if (!setInitialPoint) {
-				setInitialPoint = true;
-				root.drawing.content.beginStroke(origX, origY);
-				return;
+			if (!osdShortcutActive) {
+				screenState.osd = showOsd;
+				panels.osd.hovered = showOsd;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
 			}
-
-			root.drawing.content.appendPoint(x, y);
 		}
+
+		if (Config.dock.enable && Config.dock.hoverToReveal && !screenState.dock && !screenState.launcher && inBottomPanel(panels.dock, x, y))
+			screenState.dock = true;
+
+		if (geometry.barContains(x, y))
+			bar.checkPopout(geometry.axisPos(x, y));
+	}
+	onPressed: event => {
+		dragStart = Qt.point(event.x, event.y);
 	}
 
 	Timer {
@@ -184,98 +184,20 @@ Item {
 		running: false
 
 		onTriggered: {
-			if (hoverHandler.hovered)
+			if (root.containsMouse)
 				root.bar.isHovered = true;
 		}
 	}
 
-	HoverHandler {
-		id: hoverHandler
-
-		cursorShape: root.screenState.isDrawing && !root.inLeftPanel(root.panels.drawing, point.position.x, point.position.y) ? Qt.BlankCursor : undefined
-
-		onHoveredChanged: {
-			if (!hovered) {
-				if (!root.osdShortcutActive) {
-					root.screenState.osd = false;
-					root.panels.osd.hovered = false;
-				}
-
-				if (!root.popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-					root.popouts.hasCurrent = false;
-				}
-
-				if (Config.bar.autoHide || root.bar.fullscreen)
-					root.bar.isHovered = false;
-
-				if (root.screenState.dashboard && Config.dashboard.showOnHover)
-					root.screenState.dashboard = false;
-			}
-		}
-		onPointChanged: {
-			const x = point.position.x;
-			const y = point.position.y;
-
-			if (root.screenState.isDrawing) {
-				if (root.inLeftPanel(root.panels.drawing, x, y) && !(drawingHandler.point.pressedButtons & Qt.LeftButton)) {
-					root.panels.drawing.expand();
-					root.drawing.content.hideHover();
-					return;
-				}
-
-				root.drawing.content.showHover(x, y);
-				return;
-			}
-
-			if (!root.screenState.bar && Config.bar.autoHide && root.geometry.barContains(x, y, true))
-				root.bar.isHovered = true;
-
-			if (root.bar.fullscreen && !root.bar.isHovered)
-				unhideTimer.start();
-
-			if (root.panels.sidebar.offsetScale === 1) {
-				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			} else {
-				const outOfSidebar = x < root.width - root.panels.sidebar.width * (1 - root.panels.sidebar.offsetScale);
-				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (!root.osdShortcutActive) {
-					root.screenState.osd = showOsd;
-					root.panels.osd.hovered = showOsd;
-				} else if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			}
-
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.screenState.dock && !root.screenState.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.screenState.dock = true;
-
-			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, x, y);
-
-			if (Config.dashboard.showOnHover)
-				root.screenState.dashboard = inDashboard;
-
-			if (root.geometry.barContains(x, y))
-				root.bar.checkPopout(root.geometry.axisPos(x, y));
-		}
-	}
-
 	Connections {
-		function onDashboardChanged() {
+		function onDashboardChanged(): void {
 			if (root.screenState.dashboard) {
-				const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
+				const inDashboardArea = root.inTopPanel(root.panels.dashboardWrapper, root.mouseX, root.mouseY);
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
-				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
-					root.screenState.launcher = false;
 
+				root.screenState.launcher = false;
 				root.screenState.settings = false;
 				root.screenState.sidebar = false;
 				root.screenState.resources = false;
@@ -285,12 +207,15 @@ Item {
 			}
 		}
 
-		function onIsDrawingChanged() {
-			if (!root.screenState.isDrawing)
-				root.drawing.clear();
+		function onIsDrawingChanged(): void {
+			if (root.screenState.isDrawing) {
+				root.drawing.content.showHover();
+			} else {
+				root.drawing.content.clear();
+			}
 		}
 
-		function onLauncherChanged() {
+		function onLauncherChanged(): void {
 			if (!root.screenState.launcher) {
 				root.dashboardShortcutActive = false;
 				root.osdShortcutActive = false;
@@ -305,16 +230,13 @@ Item {
 			}
 
 			if (root.screenState.launcher) {
-				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
-					root.screenState.dashboard = false;
-				}
-
+				root.screenState.dashboard = false;
 				root.screenState.dock = false;
 				root.screenState.settings = false;
 			}
 		}
 
-		function onOsdChanged() {
+		function onOsdChanged(): void {
 			if (root.screenState.osd) {
 				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
 				if (!inOsdArea) {
@@ -325,7 +247,7 @@ Item {
 			}
 		}
 
-		function onResourcesChanged() {
+		function onResourcesChanged(): void {
 			if (root.screenState.resources) {
 				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
 					root.popouts.hasCurrent = false;
@@ -335,7 +257,7 @@ Item {
 			}
 		}
 
-		function onSettingsChanged() {
+		function onSettingsChanged(): void {
 			if (root.screenState.settings) {
 				root.screenState.resources = false;
 				root.screenState.dashboard = false;
@@ -345,9 +267,10 @@ Item {
 			}
 		}
 
-		function onSidebarChanged() {
+		function onSidebarChanged(): void {
 			if (root.screenState.sidebar) {
-				root.screenState.dashboard = false;
+				if (root.panels.dashboardWrapper.x + root.panels.dashboardWrapper.width > root.panels.sidebar.x)
+					root.screenState.dashboard = false;
 				root.screenState.settings = false;
 				root.popouts.hasCurrent = false;
 			}

Drawers/Interactions2.qml

@@ -1,315 +0,0 @@
-import Quickshell
-import QtQuick
-import ZShell.Config
-import ZShell.Internal
-import qs.Components
-import qs.Helpers
-import qs.Modules.Bar.Popouts
-
-CustomMouseArea {
-	id: root
-
-	required property Item bar
-	required property real borderThickness
-	property bool dashboardShortcutActive
-	property point dragStart
-	required property Drawing drawing
-	required property EdgeGeometry geometry
-	property bool osdShortcutActive
-	required property Panels panels
-	required property Wrapper popouts
-	required property ShellScreen screen
-	required property ScreenState screenState
-	property bool setInitialPoint: false
-	property bool singleGestureTriggered: false
-	property bool utilitiesShortcutActive
-
-	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
-	}
-
-	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
-	}
-
-	function inPopoutArea(x: real, y: real): bool {
-		const panel = panels.popoutsWrapper;
-		if (!geometry.horizontal)
-			return inLeftPanel(panel, x, y);
-		return withinPanelWidth(panel, x, y) && withinPanelHeight(panel, x, y);
-	}
-
-	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
-	}
-
-	function inTopPanel(panel: Item, x: real, y: real): bool {
-		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
-	}
-
-	function withinPanelHeight(panel: Item, x: real, y: real): bool {
-		const panelY = panel.y + geometry.insetTop(borderThickness);
-		return y >= panelY && y <= panelY + panel.height;
-	}
-
-	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + geometry.insetLeft(borderThickness);
-		return x >= panelX && x <= panelX + panel.width;
-	}
-
-	acceptedButtons: bar.fullscreen ? Qt.NoButton : Qt.AllButtons
-	anchors.fill: parent
-	hoverEnabled: true
-
-	onContainsMouseChanged: {
-		if (!containsMouse) {
-			if (!osdShortcutActive) {
-				screenState.osd = false;
-				panels.osd.hovered = false;
-			}
-
-			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-				popouts.hasCurrent = false;
-			}
-
-			if (Config.bar.autoHide || bar.fullscreen)
-				bar.isHovered = false;
-
-			if (screenState.dashboard && Config.dashboard.showOnHover)
-				screenState.dashboard = false;
-		}
-	}
-	onPositionChanged: event => {
-		const x = event.x;
-		const y = event.y;
-		const dragX = x - dragStart.x;
-		const dragY = y - dragStart.y;
-
-		if (screenState.isDrawing) {
-			if (pressed) {
-				drawing.content.appendPoint(x, y);
-			} else {
-				if (inLeftPanel(panels.drawing, x, y)) {
-					if (!(pressedButtons & Qt.LeftButton)) {
-						panels.drawing.expand();
-						drawing.content.hideHover();
-						Cursor.clearOverride();
-					}
-				} else {
-					Cursor.setOverride(Qt.BlankCursor);
-					drawing.content.showHover(x, y);
-				}
-			}
-			if (drawing.content.hoverVisible)
-				drawing.content.showHover(x, y);
-			return;
-		}
-
-		if (root.bar.fullscreen && !root.bar.isHovered)
-			unhideTimer.start();
-
-		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-			screenState.launcher = true;
-
-		const entryAt = bar.entryAt(geometry.axisPos(x, y));
-		const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboardWrapper, x, y) && (!entryAt || entryAt === "activeWindow");
-
-		if (!dashboardShortcutActive) {
-			screenState.dashboard = showDashboard;
-		} else if (showDashboard) {
-			dashboardShortcutActive = false;
-		}
-
-		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && withinPanelWidth(panels.dashboardWrapper, x, y)) {
-			if (dragY > Config.dashboard.dragThreshold)
-				screenState.dashboard = true;
-			else if (dragY < -Config.dashboard.dragThreshold)
-				screenState.dashboard = false;
-		}
-
-		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && !inTopPanel(panels.dashboardWrapper, dragStart.x, dragStart.y)) {
-			if (dragY > 20) {
-				screenState.settings = true;
-			} else if (dragY < -20) {
-				screenState.settings = false;
-			}
-		}
-
-		if (pressed && dragStart.y > screen.height - geometry.insetBottom(borderThickness) && dragStart.x < screen.width / 5 && dragY < -50)
-			screenState.clipboard = true;
-
-		if (pressed && !Config.dock.hoverToReveal && dragStart.y > screen.height - geometry.insetTop(borderThickness) && dragStart.x > screen.width / 5 && !screenState.launcher)
-			if (dragY < -10)
-				screenState.dock = true;
-
-		if (pressed && dragStart.x > screen.width - Config.bar.border && dragStart.y < (screen.height / 2) && dragX < -Config.sidebar.dragThreshold)
-			screenState.sidebar = true;
-
-		if (pressed && dragStart.x >= screen.width - Config.bar.border && dragStart.y > (screen.height / 2) && dragX < -20)
-			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
-
-		if (pressed && dragStart.x <= Config.bar.border && dragX > 20)
-			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-
-		if (!screenState.bar && Config.bar.autoHide && geometry.barContains(x, y, true))
-			bar.isHovered = true;
-
-		if (panels.sidebar.offsetScale === 1) {
-			const showOsd = inRightPanel(panels.osdWrapper, x, y);
-
-			if (showOsd) {
-				osdShortcutActive = false;
-				panels.osd.hovered = true;
-			}
-		} else {
-			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
-			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
-
-			if (!osdShortcutActive) {
-				screenState.osd = showOsd;
-				panels.osd.hovered = showOsd;
-			} else if (showOsd) {
-				osdShortcutActive = false;
-				panels.osd.hovered = true;
-			}
-		}
-
-		if (Config.dock.enable && Config.dock.hoverToReveal && !screenState.dock && !screenState.launcher && inBottomPanel(panels.dock, x, y))
-			screenState.dock = true;
-
-		if (geometry.barContains(x, y))
-			bar.checkPopout(geometry.axisPos(x, y));
-	}
-	onPressed: event => {
-		dragStart = Qt.point(event.x, event.y);
-
-		if (screenState.isDrawing) {
-			if (event.button & Qt.RightButton) {
-				drawing.content.clear();
-				return;
-			}
-
-			if (!inLeftPanel(panels.drawing, mouseX, mouseY))
-				drawing.content.beginStroke(event.x, event.y);
-		}
-	}
-	onPressedChanged: {
-		if (!pressed) {
-			if (screenState.isDrawing) {
-				setInitialPoint = false;
-				drawing.content.endStroke();
-				if (!inLeftPanel(panels.drawing, mouseX, mouseY))
-					drawing.content.showHover(mouseX, mouseY);
-			}
-		} else {
-			if (screenState.isDrawing) {
-				panels.drawing.collapse();
-			}
-		}
-	}
-
-	Timer {
-		id: unhideTimer
-
-		interval: Config.bar.revealDelay
-		repeat: false
-		running: false
-
-		onTriggered: {
-			if (root.containsMouse)
-				root.bar.isHovered = true;
-		}
-	}
-
-	Connections {
-		function onDashboardChanged(): void {
-			if (root.screenState.dashboard) {
-				const inDashboardArea = root.inTopPanel(root.panels.dashboardWrapper, root.mouseX, root.mouseY);
-				if (!inDashboardArea) {
-					root.dashboardShortcutActive = true;
-				}
-
-				root.screenState.launcher = false;
-				root.screenState.settings = false;
-				root.screenState.sidebar = false;
-				root.screenState.resources = false;
-				root.popouts.hasCurrent = false;
-			} else {
-				root.dashboardShortcutActive = false;
-			}
-		}
-
-		function onIsDrawingChanged(): void {
-			if (root.screenState.isDrawing) {
-				Cursor.setOverride(Qt.BlankCursor);
-			} else {
-				Cursor.clearOverride();
-			}
-		}
-
-		function onLauncherChanged(): void {
-			if (!root.screenState.launcher) {
-				root.dashboardShortcutActive = false;
-				root.osdShortcutActive = false;
-				root.utilitiesShortcutActive = false;
-
-				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
-
-				if (!inOsdArea) {
-					root.screenState.osd = false;
-					root.panels.osd.hovered = false;
-				}
-			}
-
-			if (root.screenState.launcher) {
-				root.screenState.dashboard = false;
-				root.screenState.dock = false;
-				root.screenState.settings = false;
-			}
-		}
-
-		function onOsdChanged(): void {
-			if (root.screenState.osd) {
-				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
-				if (!inOsdArea) {
-					root.osdShortcutActive = true;
-				}
-			} else {
-				root.osdShortcutActive = false;
-			}
-		}
-
-		function onResourcesChanged(): void {
-			if (root.screenState.resources) {
-				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
-					root.popouts.hasCurrent = false;
-
-				root.screenState.settings = false;
-				root.screenState.dashboard = false;
-			}
-		}
-
-		function onSettingsChanged(): void {
-			if (root.screenState.settings) {
-				root.screenState.resources = false;
-				root.screenState.dashboard = false;
-				root.screenState.sidebar = false;
-				root.panels.popouts.hasCurrent = false;
-				root.screenState.launcher = false;
-			}
-		}
-
-		function onSidebarChanged(): void {
-			if (root.screenState.sidebar) {
-				if (root.panels.dashboardWrapper.x + root.panels.dashboardWrapper.width > root.panels.sidebar.x)
-					root.screenState.dashboard = false;
-				root.screenState.settings = false;
-				root.popouts.hasCurrent = false;
-			}
-		}
-
-		target: root.screenState
-	}
-}

Drawers/Windows.qml

@@ -56,7 +56,7 @@ CustomWindow {
 	property color surfaceColor: Colors.tPalette.m3surface
 
 	WlrLayershell.exclusionMode: ExclusionMode.Ignore
-	WlrLayershell.keyboardFocus: screenState.screenshot ? WlrKeyboardFocus.Exclusive : screenState.launcher || screenState.settings || screenState.sidebar ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+	WlrLayershell.keyboardFocus: screenState.screenshot ? WlrKeyboardFocus.Exclusive : screenState.launcher || screenState.settings || screenState.sidebar || screenState.isDrawing ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 	WlrLayershell.layer: (fsTransitionProg > 0 && Config.general.showOverFullscreen) || (hasSpecialWorkspace && hasFullscreenOnNormalWs) ? WlrLayer.Overlay : WlrLayer.Top
 	color: "transparent"
 	mask: screenState.isDrawing || screenState.screenshot ? null : (hasFullscreen && !bar.isHovered ? emptyRegion : regions)
@@ -347,12 +347,31 @@ CustomWindow {
 	Drawing {
 		id: drawing
 
+		readonly property int extraWidth: drawingBg.radius * 2
+
 		anchors.fill: parent
+		holeRect: Qt.rect(root.borderThickness + panels.drawing.x - extraWidth, panels.drawing.y + bar.implicitHeight, panels.drawing.implicitWidth + extraWidth, panels.drawing.implicitHeight)
+		holeRadius: drawingBg.radius
 		screenState: root.screenState
 		z: 2
 	}
 
-	Interactions2 {
+	LazyLoader {
+		id: lazyLoader
+
+		activeAsync: root.screenState.isDrawing
+
+		component: DrawingInput {
+			borderThickness: root.borderLayoutThickness
+			drawing: drawing
+			panels: panels
+			screenState: root.screenState
+			geometry: geometry
+			parent: root.contentItem
+		}
+	}
+
+	Interactions {
 		id: interactions
 
 		anchors.fill: parent
@@ -365,6 +384,8 @@ CustomWindow {
 		popouts: panels.popouts
 		screen: root.screen
 		screenState: root.screenState
+		input: lazyLoader.item
+		z: 1
 
 		Panels {
 			id: panels
@@ -442,6 +463,7 @@ CustomWindow {
 			parent: root.contentItem
 			screen: root.screen
 			screenState: root.screenState
+			z: 4
 		}
 	}