1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { DemoPalette, Page } from "common.slint";
5
6export struct InkLevel {
7 color: color,
8 level: float,
9}
10
11export component InkPage inherits Page {
12 in property <[InkLevel]> ink-levels;
13 in property <bool> page-visible;
14
15 header: "Ink Level";
16
17 Rectangle {
18 x: (parent.width - self.width) / 2;
19 y: (parent.height - self.height);
20 height: 82%;
21 width: 60%;
22
23 HorizontalLayout {
24 spacing: root.width * 5%;
25
26 for color-info in root.ink-levels : Rectangle {
27 ink := Rectangle {
28 width: parent.width;
29 height: parent.height * color-info.level;
30 y: parent.height - self.height;
31 clip: true;
32
33 states [
34 inactive when !root.page-visible : {
35 height: 2px;
36 out {
37 animate height {
38 duration: 750ms;
39 delay: 50ms;
40 easing: ease-in-out;
41 }
42 }
43 in {
44 animate height { duration: 200ms; easing: ease-in; }
45 }
46 }
47 ]
48
49 Rectangle {
50 background: color-info.color;
51 border-radius: self.width / 2;
52 border-width: 2px;
53 height: parent.height + parent.y;
54 y: -parent.y;
55 }
56 }
57
58 Rectangle {
59 property <length> r: (parent.width - self.height) / 2;
60 property <length> y2: max(0phx, max(self.r - self.y, self.y - parent.height + self.r));
61
62 y: max(ink.y - self.height, 0phx);
63 height: 2px;
64 // w = 2*sqrt(r² - (max(0, min(r-y , y-h+r)))²)
65 width: 2*sqrt((self.r*self.r - self.y2*self.y2)/(1phx * 1phx))*1phx; // FIXME: it would be nice if sqrt could do proper unit handling
66 x: (parent.width - self.width) / 2;
67 background: DemoPalette.neutral-box;
68 }
69
70 Rectangle {
71 border-radius: self.width / 2;
72 border-color: DemoPalette.neutral-box;
73 border-width: 2px;
74 }
75 }
76 }
77 }
78}
79