Clean up

.gitignore

@@ -0,0 +1,4 @@
+# Generated by Cargo
+# will have compiled files and executables
+debug
+target

Modules/ConfigLoader.qml

@@ -1,6 +1,5 @@
 pragma Singleton
 
-import QtCore
 import QtQuick
 import Quickshell.Io
 import Quickshell
@@ -8,46 +7,50 @@ import Quickshell
 Singleton {
 	id: root
 
-	property alias gifFolder: adapter.gifFolder
 	property string configDir: Quickshell.env("HOME") + "/.config/I-DeskPet"
 	property string configPath: configDir + "/config.json"
-
-	signal folderChanged()
+	property alias gifFolder: adapter.gifFolder
+	property alias maxScaling: adapter.maxScale
 
 	Process {
 		id: dirCheck
-		running: true
-		command: ["test", "-d", root.configDir]
 
-		onExited: function( exitCode ) {
+		command: ["test", "-d", root.configDir]
+		running: true
+
+		onExited: function (exitCode) {
 			if (exitCode !== 0) {
-				dirCreate.running = true
+				console.log("creating dir");
+				dirCreate.running = true;
 			}
-        }
-    }
+		}
+	}
 
 	Process {
 		id: dirCreate
-		running: false
-		command: ["mkdir", "-p", root.configDir]
 
-		onExited: function(): void {
-			console.log("Created config directory:", root.configDir)
+		command: ["mkdir", "-p", root.configDir]
+		running: false
+
+		onExited: function (): void {
+			console.log("Created config directory:", root.configDir);
 		}
 	}
 
 	FileView {
 		id: watcher
-		path: root.configPath
 
+		path: root.configPath
 		watchChanges: true
 
+		onAdapterUpdated: writeAdapter()
 		onFileChanged: reload()
 
 		JsonAdapter {
 			id: adapter
 
-            property string gifFolder: Quickshell.shellDir + "/Gifs"
+			property string gifFolder: Quickshell.shellDir + "/Gifs"
+			property real maxScale: 1
 		}
 	}
 }

Modules/GetGifs.qml

@@ -1,32 +1,20 @@
-import Quickshell.Io
+import QtQuick
+import Qt.labs.folderlistmodel
 
-Process {
-    id: getGifsProcess
-    required property string gifFolder
-    property list<string> gifsList: []
+Item {
+	id: root
 
-    command: ["find", gifFolder, "-type", "f", "-name", "*.gif"]
+	property alias count: folderModel.count
+	required property string gifFolder
+	property alias gifsModel: folderModel
 
-    stdout: StdioCollector {
-        onStreamFinished: {
-            var gifs = this.text.trim().split("\n")
-            if (gifs.length > 0 && gifs[0] !== "") {
-                getGifsProcess.gifsList = gifs
-            } else {
-                getGifsProcess.gifsList = []
-            }
-        }
-    }
+	FolderListModel {
+		id: folderModel
 
-    function reload() {
-        gifsList = []
-        running = false
-        running = true
-    }
-
-    onGifFolderChanged: {
-        if (running) {
-            reload()
-        }
-    }
+		folder: "file://" + root.gifFolder
+		nameFilters: ["*.gif"]
+		showDirs: false
+		showHidden: false
+		sortField: FolderListModel.Name
+	}
 }

Modules/GifsLoader.qml

@@ -1,41 +1,88 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import Quickshell
+import Quickshell.Io
+import Qt.labs.folderlistmodel
 import qs.Modules
 
 Repeater {
-    id: gifRepeater
-    required property list<string> gifsList
-    property int firstWidth
-    property int lastWidth
-    model: gifsList
-    Item {
+	id: gifRepeater
+
+	required property FolderListModel gifsModel
+
+	model: gifsModel
+
+	Item {
 		id: gifItem
 
+		required property string fileBaseName
+		required property url fileUrl
+		property alias hovered: mouse.containsMouse
 		required property int index
-		required property string modelData
+		property bool loaded: false
+		property alias zIndex: gifSaved.zIndex
 
-		function xPos(): void {
-			let xPos = 0;
-			const item = gifRepeater.itemAt(index - 1);
-			if ( item ) xPos += item.x + item.width;
-			return xPos;
+		height: Math.floor(gif.sourceSize.height / gifSaved.scaling)
+		visible: gifItem.loaded
+		width: Math.floor(gif.sourceSize.width / gifSaved.scaling)
+		z: gifSaved.zIndex
+
+		onXChanged: if (gifItem.loaded)
+			gifSaved.positionX = gifItem.x
+		onYChanged: if (gifItem.loaded)
+			gifSaved.positionY = gifItem.y
+
+		AnimatedImage {
+			id: gif
+
+			anchors.fill: parent
+			fillMode: Image.PreserveAspectFit
+			source: gifItem.fileUrl
 		}
 
-		Component.onCompleted: x = xPos()
+		Mouse {
+			id: mouse
 
-		x: 0
-        y: Screen.height - ( height + 10 )
-        width: Math.floor( gif.sourceSize.width / 1.25 )
-        height: Math.floor( gif.sourceSize.height / 1.25 )
+			onDoubleClicked: gifSaved.scaling = 1
+			onWheel: wheel => {
+				gifSaved.scaling = Math.max(ConfigLoader.maxScaling, (gifSaved.scaling + 0.1 * (wheel.angleDelta.y / 120)));
+			}
+		}
 
-        AnimatedImage {
-            id: gif
-            source: gifItem.modelData
-            // fillMode: Image.PreserveAspectFit
-            anchors.fill: parent
-        }
+		FileView {
+			id: watcher
 
-        Mouse {}
-    }
+			property string configDir: Quickshell.env("HOME") + "/.config/I-DeskPet/"
+			property string configPath: configDir + name
+			property string name: gifItem.fileBaseName + ".json"
+
+			path: configPath
+			watchChanges: true
+
+			onAdapterUpdated: writeAdapter()
+			onFileChanged: reload()
+			onLoadFailed: {
+				gifSaved.zIndex = gifItem.index;
+				writeAdapter();
+				gifItem.loaded = true;
+			}
+			onLoaded: {
+				if (gifSaved.zIndex === -1)
+					gifSaved.zIndex = gifItem.index;
+				gifItem.x = gifSaved.positionX;
+				gifItem.y = gifSaved.positionY;
+				gifItem.loaded = true;
+			}
+
+			JsonAdapter {
+				id: gifSaved
+
+				property int positionX: 0
+				property int positionY: 0
+				property real scaling: 1
+				property int zIndex: -1
+			}
+		}
+	}
 }

Modules/Mouse.qml

@@ -1,12 +1,13 @@
 import QtQuick
 
 MouseArea {
-    anchors.fill: parent
-    acceptedButtons: Qt.LeftButton
-    drag.target: parent
-    drag.axis: Drag.XAndYAxis
-    drag.minimumX: 0
-    drag.maximumX: Screen.width - parent.width
-    drag.minimumY: 0
-    drag.maximumY: Screen.height - parent.height
+	acceptedButtons: Qt.LeftButton
+	anchors.fill: parent
+	drag.axis: Drag.XAndYAxis
+	drag.maximumX: Screen.width - parent.width
+	drag.maximumY: Screen.height - parent.height
+	drag.minimumX: 0
+	drag.minimumY: 0
+	drag.target: parent
+	hoverEnabled: true
 }

README.md

@@ -1,11 +1,63 @@
 <div align="Center">
  <h3> Pet March (Evernight) </h3>
  <p>My selfmade desktop pet using QT </p>
- <img src=./Assets/evernight.gif style="margin: 0px 30px 0px 0px;" />
+ <img src=./Assets/Evernight.gif style="margin: 0px 30px 0px 0px;" />
 </div>
 
-## Feature to-do list
-- [x] Hyprland keybind support (Swap between top/bottom/overlay)
-- [x] Be able to click through your pet
-- [] Dynamic pets
-- [] Multiple pets
+## Feature list
+
+- [x] Hyprland keybind support
+  - [x] Toggle layer ontop/bottom
+  - [x] Toggle active mouse area
+- [x] Dynamic path + live update
+- [x] Supports multiple gifs
+- [x] User config options
+- [x] Evernight base gif img
+
+# Config
+
+Configuration is found at:
+
+```zsh
+~/.config/I-DeskPet
+```
+
+Options:
+
+- gifFolder
+- maxScaling
+
+Example for config.json:
+
+```json
+{
+  "gifFolder": "/home/inorishio/Pictures/Pets",
+  "maxScaling": 1
+}
+```
+
+# Hyprland keybinds
+
+Toggle click through
+
+```zsh
+bind = CTRL, mouse:274, global, I-DeskPet:toggle-Region
+```
+
+Toggle between having your gif on your background vs foreground
+
+```zsh
+bind = SHIFT, mouse:274, global, I-DeskPet:toggle-Layer
+```
+
+Keybind for cycling through gif layering.
+Hover over which gif you want to cycle it's layer for and use the keybind.
+
+```zsh
+bind = $mainMod, Z, global, I-DeskPet:cycle-zIndex
+```
+
+# Other keybinds
+
+- Double click = Reset gif size to original
+- Scroll = Scales the gif up and or down

shell.qml

@@ -1,123 +1,183 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import Quickshell.Io
-import Quickshell.Wayland
-import Quickshell.Hyprland
-import qs.Modules
-
-PanelWindow {
-    id: mainWindow
-    color: "transparent"
-    WlrLayershell.layer: WlrLayer.Overlay
-    WlrLayershell.exclusionMode: ExclusionMode.Ignore
-    surfaceFormat.opaque: false
-
-    property bool onTop: true
-	property list<Item> repeaterItems: []
-
-    anchors {
-        left: true
-        bottom: true
-		right: true
-		top: true
-    }
-
-    margins {
-        left: 0
-        bottom: 9
-        right: 0
-        top: 0
-    }
-
-    GetGifs {
-        id: getGifs
-        gifFolder: ConfigLoader.gifFolder
-        running: true
-    }
-
-    GifsLoader {
-        id: gifLoader
-        gifsList: getGifs.gifsList
-		onItemAdded: function( index, item ) {
-			mainWindow.repeaterItems.push( item )
-		}
-    }
-
-	Variants {
-		id: maskVariants
-
-		model: [ ...mainWindow.repeaterItems ]
-
-		Region {
-			required property Item modelData
-
-			Component.onCompleted: {
-				console.log(modelData)
-			}
-
-			x: modelData.x
-			y: modelData.y
-			width: modelData.width
-			height: modelData.height
-			intersection: Intersection.Subtract
-		}
-	}
-
-    function petRegion( itemObject ) {
-        let newregion = regionComponent.createObject( pets, { "item": itemObject })
-        pets.regions.push( newregion )
-    }
-
-    Component {
-        id: regionComponent
-        Region { }
-    }
-
-	mask: Region {
-		width: Screen.width
-		height: Screen.height
-		intersection: Intersection.Xor
-		regions: maskVariants.instances
-	}
-
-    property var petMove: Region { id: pets
-		width: Screen.width
-		height: Screen.height
-		intersection: Intersection.Xor
-		regions: maskVariants.instances
-    }
-
-    property var noMove: Region {}
-
-    property bool setMask: true
-    
-    GlobalShortcut {
-        appid: "I-DeskPet"
-        name: "toggle-Layer"
-        onPressed: {
-            if (!mainWindow.onTop) {
-                mainWindow.WlrLayershell.layer = WlrLayer.Overlay
-                mainWindow.onTop = true
-            } else {
-                mainWindow.WlrLayershell.layer = WlrLayer.Bottom
-                mainWindow.onTop = false
-            }
-        }
-    }
-
-    GlobalShortcut {
-        appid: "I-DeskPet"
-        name: "toggle-Region"
-        onPressed: {
-            if ( !mainWindow.setMask ) {
-                mainWindow.mask = mainWindow.petMove
-                mainWindow.setMask = true
-            } else {
-                mainWindow.mask = mainWindow.noMove
-                mainWindow.setMask = false
-            }
-        }
-    }
-}
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import qs.Modules
+
+PanelWindow {
+	id: mainWindow
+
+	property var noMove: Region {
+	}
+	property bool onTop: true
+	property var petMove: Region {
+		id: pets
+
+		height: Screen.height
+		intersection: Intersection.Xor
+		regions: maskVariants.instances
+		width: Screen.width
+	}
+	property list<Item> repeaterItems: []
+	property bool setMask: true
+
+	function petRegion(itemObject) {
+		let newregion = regionComponent.createObject(pets, {
+			"item": itemObject
+		});
+		pets.regions.push(newregion);
+	}
+
+	WlrLayershell.exclusionMode: ExclusionMode.Ignore
+	WlrLayershell.layer: WlrLayer.Overlay
+	WlrLayershell.namespace: "I-DeskPet"
+	color: "transparent"
+	surfaceFormat.opaque: false
+
+	mask: Region {
+		height: Screen.height
+		intersection: Intersection.Xor
+		regions: maskVariants.instances
+		width: Screen.width
+	}
+
+	anchors {
+		bottom: true
+		left: true
+		right: true
+		top: true
+	}
+
+	margins {
+		bottom: 0
+		left: 0
+		right: 0
+		top: 0
+	}
+
+	GetGifs {
+		id: getGifs
+
+		gifFolder: ConfigLoader.gifFolder
+	}
+
+	GifsLoader {
+		id: gifLoader
+
+		gifsModel: getGifs.gifsModel
+
+		onItemAdded: function (index, item) {
+			mainWindow.repeaterItems = Array.from({
+				length: gifLoader.count
+			}, (_, i) => gifLoader.itemAt(i)).filter(v => v !== null);
+		}
+		onItemRemoved: function (index, item) {
+			mainWindow.repeaterItems = Array.from({
+				length: gifLoader.count
+			}, (_, i) => gifLoader.itemAt(i)).filter(v => v !== null);
+		}
+	}
+
+	Variants {
+		id: maskVariants
+
+		model: [...mainWindow.repeaterItems]
+
+		Region {
+			required property Item modelData
+
+			height: modelData.height
+			intersection: Intersection.Subtract
+			width: modelData.width
+			x: modelData.x
+			y: modelData.y
+
+			Component.onCompleted: {
+				console.log(modelData);
+			}
+		}
+	}
+
+	Component {
+		id: regionComponent
+
+		Region {
+		}
+	}
+
+	GlobalShortcut {
+		appid: "I-DeskPet"
+		name: "toggle-Layer"
+
+		onPressed: {
+			if (!mainWindow.onTop) {
+				mainWindow.WlrLayershell.layer = WlrLayer.Overlay;
+				mainWindow.onTop = true;
+			} else {
+				mainWindow.WlrLayershell.layer = WlrLayer.Bottom;
+				mainWindow.onTop = false;
+			}
+		}
+	}
+
+	GlobalShortcut {
+		appid: "I-DeskPet"
+		name: "toggle-Region"
+
+		onPressed: {
+			if (!mainWindow.setMask) {
+				mainWindow.mask = mainWindow.petMove;
+				mainWindow.setMask = true;
+			} else {
+				mainWindow.mask = mainWindow.noMove;
+				mainWindow.setMask = false;
+			}
+		}
+	}
+
+	GlobalShortcut {
+		appid: "I-DeskPet"
+		name: "cycle-zIndex"
+
+		onPressed: {
+			let items = mainWindow.repeaterItems;
+			if (items.length < 2)
+				return;
+
+			// Find the hovered GIF
+			let hovered = null;
+			for (let i = 0; i < items.length; i++) {
+				if (items[i].hovered) {
+					hovered = items[i];
+					break;
+				}
+			}
+			if (!hovered)
+				return;
+			let currentZ = hovered.zIndex;
+			let maxZ = items.length - 1;
+
+			if (currentZ >= maxZ) {
+				// Already on top, wrap to bottom: shift everyone else up by 1
+				for (let i = 0; i < items.length; i++) {
+					if (items[i] !== hovered) {
+						items[i].zIndex += 1;
+					}
+				}
+				hovered.zIndex = 0;
+			} else {
+				// Swap with the item directly above
+				for (let i = 0; i < items.length; i++) {
+					if (items[i] !== hovered && items[i].zIndex === currentZ + 1) {
+						items[i].zIndex = currentZ;
+						break;
+					}
+				}
+				hovered.zIndex = currentZ + 1;
+			}
+		}
+	}
+}