overlay: add kurukuru

2025-11-09 12:58:48 +01:00
parent 8f4190a939
commit baa3c2a773
8 changed files with 142 additions and 15 deletions
@@ -6,11 +6,12 @@ Singleton {
    id: root
    
    readonly property list<var> availableWidgets: [
-        { identifier: "recorder", materialSymbol: "screen_record" },
-        { identifier: "volumeMixer", materialSymbol: "volume_up" },
        { identifier: "crosshair", materialSymbol: "point_scan" },
        { identifier: "fpsLimiter", materialSymbol: "animation" },
-        { identifier: "resources", materialSymbol: "browse_activity" }
+        { identifier: "floatingImage", materialSymbol: "imagesmode" },
+        { identifier: "recorder", materialSymbol: "screen_record" },
+        { identifier: "resources", materialSymbol: "browse_activity" },
+        { identifier: "volumeMixer", materialSymbol: "volume_up" },
    ]
    
    readonly property bool hasPinnedWidgets: root.pinnedWidgetIdentifiers.length > 0
@@ -11,14 +11,16 @@ import qs.modules.ii.overlay.volumeMixer
 import qs.modules.ii.overlay.fpsLimiter
 import qs.modules.ii.overlay.recorder
 import qs.modules.ii.overlay.resources
+import qs.modules.ii.overlay.floatingImage

 DelegateChooser {
    id: root
    role: "identifier"

    DelegateChoice { roleValue: "crosshair"; Crosshair {} }
-    DelegateChoice { roleValue: "volumeMixer"; VolumeMixer {} }
+    DelegateChoice { roleValue: "floatingImage"; FloatingImage {} }
    DelegateChoice { roleValue: "fpsLimiter"; FpsLimiter {} }
    DelegateChoice { roleValue: "recorder"; Recorder {} }
    DelegateChoice { roleValue: "resources"; Resources {} }
+    DelegateChoice { roleValue: "volumeMixer"; VolumeMixer {} }
 }
@@ -33,8 +33,8 @@ AbstractOverlayWidget {
    property string title: identifier.replace(/([A-Z])/g, " $1").replace(/^./, function(str){ return str.toUpperCase(); })
    property var persistentStateEntry: Persistent.states.overlay[identifier]
    property real radius: Appearance.rounding.windowRounding
-    property real minimumWidth: 250
-    property real minimumHeight: 100
+    property real minimumWidth: contentItem.implicitWidth
+    property real minimumHeight: contentItem.implicitHeight
    property real resizeMargin: 8
    property real padding: 6
    property real contentRadius: radius - padding
@@ -238,8 +238,8 @@ AbstractOverlayWidget {
                    }
                    
                    StyledText {
-                        text: root.title
                        Layout.fillWidth: true
+                        text: root.title
                        elide: Text.ElideRight
                    }

@@ -0,0 +1,95 @@
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.utils
+import qs.modules.ii.overlay
+
+StyledOverlayWidget {
+    id: root
+    showClickabilityButton: false
+    resizable: false
+
+    property string imageSource: Config.options.overlay.floatingImage.imageSource
+    property real scaleFactor: Config.options.overlay.floatingImage.scale
+    property int imageWidth: 0
+    property int imageHeight: 0
+
+    // Override to always save 0 size
+    function savePosition(xPos = root.x, yPos = root.y, width = 0, height = 0) {
+        persistentStateEntry.x = Math.round(xPos);
+        persistentStateEntry.y = Math.round(yPos);
+        persistentStateEntry.width = 0
+        persistentStateEntry.height = 0
+    }
+
+    onImageSourceChanged: {
+        imageDownloader.running = false;
+        imageDownloader.sourceUrl = root.imageSource;
+        imageDownloader.filePath = Qt.resolvedUrl(Directories.tempImages + "/" + Qt.md5(root.imageSource))
+        imageDownloader.running = true;
+    }
+    onScaleFactorChanged: {
+        setSize();
+    }
+
+    function setSize() {
+        bg.implicitWidth = root.imageWidth * root.scaleFactor;
+        bg.implicitHeight = root.imageHeight * root.scaleFactor;
+    }
+
+    contentItem: OverlayBackground {
+        id: bg
+        color: ColorUtils.transparentize(Appearance.m3colors.m3surfaceContainer, root.actuallyPinned ? 1 : 0)
+        radius: root.contentRadius
+
+        WheelHandler {
+            onWheel: (event) => {
+                if (event.angleDelta.y < 0) {
+                    Config.options.overlay.floatingImage.scale = Math.max(0.1, Config.options.overlay.floatingImage.scale - 0.1);
+                }
+                else if (event.angleDelta.y > 0) {
+                    Config.options.overlay.floatingImage.scale = Math.min(5.0, Config.options.overlay.floatingImage.scale + 0.1);
+                }
+            }
+            acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
+        }
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: bg.width
+                height: bg.height
+                radius: bg.radius
+            }
+        }
+
+        AnimatedImage {
+            id: animatedImage
+            anchors.centerIn: parent
+            width: root.imageWidth * root.scaleFactor
+            height: root.imageHeight * root.scaleFactor
+            sourceSize.width: width
+            sourceSize.height: height
+
+            playing: visible
+            asynchronous: true
+            source: ""
+
+            ImageDownloaderProcess {
+                id: imageDownloader
+                filePath: Qt.resolvedUrl(Directories.tempImages + "/" + Qt.md5(root.imageSource))
+                sourceUrl: root.imageSource
+
+                onDone: (path, width, height) => {
+                    root.imageWidth = width;
+                    root.imageHeight = height;
+                    root.setSize();
+                    animatedImage.source = path;
+                }
+            }
+        }
+    }
+}