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: @tr("Ink Level");
16
17
18 Rectangle {
19 x: (parent.width - self.width) / 2;
20 y: (parent.height - self.height) / 2;
21 height: 75%;
22 width: 50%;
23
24 HorizontalLayout {
25 spacing: root.width * 5%;
26
27 for color-info in root.ink-levels : Rectangle {
28 ink := Rectangle {
29 width: parent.width;
30 height: parent.height * color-info.level;
31 y: parent.height - self.height;
32 clip: true;
33
34 states [
35 inactive when !root.page-visible : {
36 height: 0;
37 out {
38 animate height { duration: 750ms; easing: ease-in-out; }
39 }
40 in {
41 animate height { duration: 200ms; easing: ease-in; }
42 }
43 }
44 ]
45 Rectangle {
46 background: color-info.color;
47 border-radius: self.width / 2;
48 border-width: 2px;
49 height: parent.height + parent.y;
50 y: -parent.y;
51 }
52 }
53
54 Rectangle {
55 property <length> r: (parent.width - self.height) / 2;
56 property <length> y2: max(0phx, max(self.r - self.y, self.y - parent.height + self.r));
57
58 y: max(ink.y - self.height, 0phx);
59 height: 2px;
60 // w = 2*sqrt(r² - (max(0, min(r-y , y-h+r)))²)
61 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
62 x: (parent.width - self.width) / 2;
63 background: DemoPalette.neutral-box;
64 }
65
66 Rectangle {
67 border-radius: self.width / 2;
68 border-color: DemoPalette.neutral-box;
69 border-width: 2px;
70 }
71 }
72 }
73 }
74}
75