make materialcookie use rounded polygons

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

@@ -86,22 +86,29 @@ 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 {
@@ -200,4 +207,3 @@ Item {
         }
     }
 }
-}

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 int sides: 12  
-    property real sides: 12  
     property int implicitSize: 100
-    property real amplitude: implicitSize / 50
+    property alias color: shapeCanvas.color
-    property int renderPoints: 360
-    property color color: "#605790"
-    property alias strokeWidth: shapePath.strokeWidth
-    property bool constantlyRotate: false
 
     implicitWidth: implicitSize
     implicitHeight: implicitSize
 
-    property real shapeRotation: 0
+    property var cornerRounding: new CornerRounding.CornerRounding(1.1 / Math.max(sides, 1))
 
-    Loader {
+    ShapeCanvas {
-        active: constantlyRotate
+        id: shapeCanvas
-        sourceComponent: FrameAnimation {
-            running: true
-            onTriggered: {
-                shapeRotation += 0.05
-            }
-        }
-    }
-
-    Behavior on sides {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
-
-    Shape {
-        id: shape
         anchors.fill: parent
-        preferredRendererType: Shape.CurveRenderer
+        roundedPolygon: switch(sides) {
-
+            case 0: return MaterialShapes.getCircle();
-        ShapePath {
+            case 1: return MaterialShapes.getCircle();
-            id: shapePath
+            case 4: return MaterialShapes.getCookie4Sided();
-            strokeWidth: 0
+            case 6: return MaterialShapes.getCookie6Sided();
-            fillColor: root.color
+            case 7: return MaterialShapes.getCookie7Sided();
-            pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
+            case 9: return MaterialShapes.getCookie9Sided();
-
+            case 12: return MaterialShapes.getCookie12Sided();
-            PathPolyline {
+            default: return RoundedPolygon.RoundedPolygon.star(sides, 1, 0.8, root.cornerRounding)
-                property var pointsList: {
+                .transformed((x, y) => MaterialShapes.rotate30.map(new Offset.Offset(x, y)))
-                    var points = []
+                .normalized();
-                    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
-            }
-            
-        }
-    }
-}