make materialcookie use rounded polygons

dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -86,118 +86,124 @@ Item {
     DropShadow {
         source: cookie
         anchors.fill: source
-        horizontalOffset: 0
-        verticalOffset: 1
         radius: 8
         samples: radius * 2 + 1
         color: root.colShadow
         transparentBorder: true
+
+        RotationAnimation on rotation {
+            running: Config.options.background.clock.cookie.constantlyRotate
+            duration: 30000
+            easing.type: Easing.Linear
+            loops: Animation.Infinite
+            from: 360
+            to: 0
+        }
     }
 
     MaterialCookie {
         id: cookie
         z: 0
+        visible: false // The DropShadow already draws it
         implicitSize: root.implicitSize
-        amplitude: implicitSize / 70
         sides: Config.options.background.clock.cookie.sides
         color: root.colBackground
-        constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
-    
-        // Hour/minutes numbers/dots/lines
-        MinuteMarks {
-            anchors.fill: parent
+    }
+
+    // Hour/minutes numbers/dots/lines
+    MinuteMarks {
+        anchors.fill: parent
+        color: root.colOnBackground
+    }
+
+    // Stupid extra hour marks in the middle
+    FadeLoader {
+        id: hourMarksLoader
+        anchors.centerIn: parent
+        shown: Config.options.background.clock.cookie.hourMarks
+        sourceComponent: HourMarks {
+            implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity)
             color: root.colOnBackground
+            colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5)
+        }
+    }
+
+    // Number column in the middle
+    FadeLoader {
+        id: timeColumnLoader
+        anchors.centerIn: parent
+        shown: Config.options.background.clock.cookie.timeIndicators
+        scale: 1.4 - 0.4 * timeColumnLoader.shown
+        Behavior on scale {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
 
-        // Stupid extra hour marks in the middle
-        FadeLoader {
-            id: hourMarksLoader
-            anchors.centerIn: parent
-            shown: Config.options.background.clock.cookie.hourMarks
-            sourceComponent: HourMarks {
-                implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity)
-                color: root.colOnBackground
-                colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5)
-            }
+        sourceComponent: TimeColumn {
+            color: root.colBackgroundInfo
         }
+    }
 
-        // Number column in the middle
-        FadeLoader {
-            id: timeColumnLoader
-            anchors.centerIn: parent
-            shown: Config.options.background.clock.cookie.timeIndicators
-            scale: 1.4 - 0.4 * timeColumnLoader.shown
-            Behavior on scale {
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            }
-
-            sourceComponent: TimeColumn {
-                color: root.colBackgroundInfo
-            }
+    // Hour hand
+    FadeLoader {
+        anchors.fill: parent
+        z: 1
+        shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
+        sourceComponent: HourHand {
+            clockHour: root.clockHour
+            clockMinute: root.clockMinute
+            style: Config.options.background.clock.cookie.hourHandStyle
+            color: root.colHourHand
         }
+    }
 
-        // Hour hand
-        FadeLoader {
+    // Minute hand
+    FadeLoader {
+        anchors.fill: parent
+        z: 2
+        shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
+        sourceComponent: MinuteHand {
             anchors.fill: parent
-            z: 1
-            shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
-            sourceComponent: HourHand {
-                clockHour: root.clockHour
-                clockMinute: root.clockMinute
-                style: Config.options.background.clock.cookie.hourHandStyle
-                color: root.colHourHand
-            }
+            clockMinute: root.clockMinute
+            style: Config.options.background.clock.cookie.minuteHandStyle
+            color: root.colMinuteHand
         }
+    }
 
-        // Minute hand
-        FadeLoader {
-            anchors.fill: parent
-            z: 2
-            shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
-            sourceComponent: MinuteHand {
-                anchors.fill: parent
-                clockMinute: root.clockMinute
-                style: Config.options.background.clock.cookie.minuteHandStyle
-                color: root.colMinuteHand
-            }
+    // Second hand
+    FadeLoader {
+        id: secondHandLoader
+        z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3
+        shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide"
+        anchors.fill: parent
+        sourceComponent: SecondHand {
+            id: secondHand
+            clockSecond: root.clockSecond
+            style: Config.options.background.clock.cookie.secondHandStyle
+            color: root.colSecondHand
         }
+    }
 
-        // Second hand
-        FadeLoader {
-            id: secondHandLoader
-            z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3
-            shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide"
-            anchors.fill: parent
-            sourceComponent: SecondHand {
-                id: secondHand
-                clockSecond: root.clockSecond
-                style: Config.options.background.clock.cookie.secondHandStyle
-                color: root.colSecondHand
-            }
+    // Center dot
+    FadeLoader {
+        z: 4
+        anchors.centerIn: parent
+        shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold"
+        sourceComponent: Rectangle {
+            color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
+            implicitWidth: 6
+            implicitHeight: implicitWidth
+            radius: width / 2
         }
+    }
 
-        // Center dot
-        FadeLoader {
-            z: 4
-            anchors.centerIn: parent
-            shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold"
-            sourceComponent: Rectangle {
-                color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
-                implicitWidth: 6
-                implicitHeight: implicitWidth
-                radius: width / 2
-            }
-        }
+    // Date
+    FadeLoader {
+        anchors.fill: parent
+        shown: Config.options.background.clock.cookie.dateStyle !== "hide"
 
-        // Date
-        FadeLoader {
-            anchors.fill: parent
-            shown: Config.options.background.clock.cookie.dateStyle !== "hide"
-
-            sourceComponent: DateIndicator {
-                color: root.colBackgroundInfo
-                style: Config.options.background.clock.cookie.dateStyle
-            }
+        sourceComponent: DateIndicator {
+            color: root.colBackgroundInfo
+            style: Config.options.background.clock.cookie.dateStyle
         }
     }
 }

dots/.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml

@@ -14,7 +14,10 @@ Item {
     // 12 Dots
     FadeLoader {
         id: dotsLoader
-        anchors.fill: parent
+        anchors {
+            fill: parent
+            margins: 10
+        }
         shown: root.style === "dots"
         sourceComponent: Dots {
             color: root.color
@@ -37,7 +40,10 @@ Item {
     // Lines
     FadeLoader {
         id: linesLoader
-        anchors.fill: parent
+        anchors {
+            fill: parent
+            margins: 10
+        }
         shown: root.style === "full"
         sourceComponent: Lines {
             color: root.color

dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml

@@ -2,69 +2,38 @@ import QtQuick
 import QtQuick.Shapes
 import Quickshell
 import qs.modules.common
+import qs.modules.common.widgets.shapes
+import "shapes/geometry/offset.js" as Offset
+import "shapes/shapes/corner-rounding.js" as CornerRounding
+import "shapes/shapes/rounded-polygon.js" as RoundedPolygon
+import "shapes/material-shapes.js" as MaterialShapes
 
 Item {
     id: root
-    
-    property real sides: 12  
+    property int sides: 12  
     property int implicitSize: 100
-    property real amplitude: implicitSize / 50
-    property int renderPoints: 360
-    property color color: "#605790"
-    property alias strokeWidth: shapePath.strokeWidth
-    property bool constantlyRotate: false
+    property alias color: shapeCanvas.color
 
     implicitWidth: implicitSize
     implicitHeight: implicitSize
 
-    property real shapeRotation: 0
+    property var cornerRounding: new CornerRounding.CornerRounding(1.1 / Math.max(sides, 1))
 
-    Loader {
-        active: constantlyRotate
-        sourceComponent: FrameAnimation {
-            running: true
-            onTriggered: {
-                shapeRotation += 0.05
-            }
-        }
-    }
-
-    Behavior on sides {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
-
-    Shape {
-        id: shape
+    ShapeCanvas {
+        id: shapeCanvas
         anchors.fill: parent
-        preferredRendererType: Shape.CurveRenderer
-
-        ShapePath {
-            id: shapePath
-            strokeWidth: 0
-            fillColor: root.color
-            pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
-
-            PathPolyline {
-                property var pointsList: {
-                    var points = []
-                    var cx = shape.width / 2   // center x
-                    var cy = shape.height / 2  // center y
-                    var steps = root.renderPoints
-                    var radius = root.implicitSize / 2 - root.amplitude
-                    for (var i = 0; i <= steps; i++) {
-                        var angle = (i / steps) * 2 * Math.PI
-                        var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * root.constantlyRotate)
-                        var wave = Math.sin(rotatedAngle) * root.amplitude
-                        var x = Math.cos(angle) * (radius + wave) + cx
-                        var y = Math.sin(angle) * (radius + wave) + cy
-                        points.push(Qt.point(x, y))
-                    }
-                    return points
-                }
-
-                path: pointsList
-            }
-            
+        roundedPolygon: switch(sides) {
+            case 0: return MaterialShapes.getCircle();
+            case 1: return MaterialShapes.getCircle();
+            case 4: return MaterialShapes.getCookie4Sided();
+            case 6: return MaterialShapes.getCookie6Sided();
+            case 7: return MaterialShapes.getCookie7Sided();
+            case 9: return MaterialShapes.getCookie9Sided();
+            case 12: return MaterialShapes.getCookie12Sided();
+            default: return RoundedPolygon.RoundedPolygon.star(sides, 1, 0.8, root.cornerRounding)
+                .transformed((x, y) => MaterialShapes.rotate30.map(new Offset.Offset(x, y)))
+                .normalized();
         }
     }
 }
+