add Path.app style menu button

doric-demo/src/PathButtonDemo.ts

@@ -0,0 +1,156 @@
+import { Panel, Group, LayoutSpec, layoutConfig, Color, vlayout, gravity, text, Gravity, animate, View, modal, stack } from "doric"
+import { colors } from "./utils"
+
+@Entry
+class PathButtonDemo extends Panel {
+
+    collapse: boolean = false
+    dock?: View
+    menu1?: View
+    menu2?: View
+    menu3?: View
+    menu4?: View
+
+    build(root: Group) {
+        let clockWise = async () => {
+            this.menu1?.let((it) => {
+                it.scaleX = 0
+                it.scaleY = 0
+            })
+            this.menu2?.let((it) => {
+                it.scaleX = 0
+                it.scaleY = 0
+            })
+            this.menu3?.let((it) => {
+                it.scaleX = 0
+                it.scaleY = 0
+            })
+            this.menu4?.let((it) => {
+                it.scaleX = 0
+                it.scaleY = 0
+            })
+            await animate(context)({
+                animations: () => {
+                    this.dock?.let((it) => {it.rotation = 0.5})
+                    this.menu1?.let((it) => {
+                        it.translationX = -150
+                        it.scaleX = 1
+                        it.scaleY = 1
+                    })
+                    this.menu2?.let((it) => {
+                        it.translationY = -150
+                        it.scaleX = 1
+                        it.scaleY = 1
+                    })
+                    this.menu3?.let((it) => {
+                        it.translationX = -150 * Math.cos(1/6 * Math.PI)
+                        it.translationY = -150 * Math.sin(1/6 * Math.PI)
+                        it.scaleX = 1
+                        it.scaleY = 1
+                    })
+                    this.menu4?.let((it) => {
+                        it.translationX = -150 * Math.cos(1/3 * Math.PI)
+                        it.translationY = -150 * Math.sin(1/3 * Math.PI)
+                        it.scaleX = 1
+                        it.scaleY = 1
+                    })
+                },
+                duration: 300,
+            })
+        }
+
+        let antiClockWise = async () => {
+            await animate(context)({
+                animations: () => {
+                    this.dock?.let((it) => {it.rotation = 0})
+                    this.menu1?.let((it) => {
+                        it.translationX = 0
+                        it.scaleX = 0
+                        it.scaleY = 0
+                    })
+                    this.menu2?.let((it) => {
+                        it.translationY = 0
+                        it.scaleX = 0
+                        it.scaleY = 0
+                    })
+                    this.menu3?.let((it) => {
+                        it.translationX = 0
+                        it.translationY = 0
+                        it.scaleX = 0
+                        it.scaleY = 0
+                    })
+                    this.menu4?.let((it) => {
+                        it.translationX = 0
+                        it.translationY = 0
+                        it.scaleX = 0
+                        it.scaleY = 0
+                    })
+                },
+                duration: 300,
+            })
+        }
+
+        stack([
+            this.menu1 = stack([], {
+                width: 50,
+                height: 50,
+                layoutConfig: layoutConfig().just(),
+                corners: 25,
+                backgroundColor: Color.RED,
+                x: Environment.screenWidth - 100,
+                y: Environment.screenHeight - 140,
+            }),
+            this.menu2 = stack([], {
+                width: 50,
+                height: 50,
+                layoutConfig: layoutConfig().just(),
+                corners: 25,
+                backgroundColor: Color.RED,
+                x: Environment.screenWidth - 100,
+                y: Environment.screenHeight - 140,
+            }),
+            this.menu3 = stack([], {
+                width: 50,
+                height: 50,
+                layoutConfig: layoutConfig().just(),
+                corners: 25,
+                backgroundColor: Color.RED,
+                x: Environment.screenWidth - 100,
+                y: Environment.screenHeight - 140,
+            }),
+            this.menu4 = stack([], {
+                width: 50,
+                height: 50,
+                layoutConfig: layoutConfig().just(),
+                corners: 25,
+                backgroundColor: Color.RED,
+                x: Environment.screenWidth - 100,
+                y: Environment.screenHeight - 140,
+            }),
+            this.dock = text({
+                text: '+',
+                textColor: Color.WHITE,
+                textSize: 40,
+                textAlignment: Gravity.Center,
+                layoutConfig: layoutConfig().just(),
+                backgroundColor: Color.RED,
+                corners: 25,
+                x: Environment.screenWidth - 100,
+                y: Environment.screenHeight - 140,
+                width: 50,
+                height: 50,
+                onClick: () => {
+                    this.collapse = !this.collapse
+                    if (this.collapse) {
+                        clockWise()
+                    } else {
+                        antiClockWise()
+                    }
+                }
+            }),
+        ], {
+            backgroundColor: colors[0],
+            layoutConfig: layoutConfig().most(),
+        }).in(root)
+    }
+}