1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { LineEdit, Button, Slider, StandardListView, VerticalBox } from "std-widgets.slint";
5
6struct Circle { x: length, y: length, d: length }
7
8export component MainWindow inherits Window {
9 in property <[Circle]> model;
10 in property <bool> undoable: false;
11 in property <bool> redoable: false;
12
13 callback undo_clicked();
14 callback redo_clicked();
15 callback background_clicked(length,length);
16 callback circle_resized(int, length);
17
18 private property <int> clicked-idx: -1;
19 private property <Circle> selected-circle;
20
21 preferred-width: 500px;
22 preferred-height: 400px;
23
24 VerticalBox {
25 HorizontalLayout {
26 alignment: center;
27 spacing: 12px;
28
29 Button {
30 text: "Undo";
31 enabled <=> root.undoable;
32 clicked => { root.undo-clicked() }
33 }
34 Button {
35 text: "Redo";
36 enabled <=> root.redoable;
37 clicked => { root.redo-clicked() }
38 }
39 }
40 Rectangle {
41 background: white;
42 border-color: black;
43 border-width: 2px;
44 clip: true;
45
46 TouchArea {
47 clicked => {
48 root.background_clicked(self.pressed_x, self.pressed_y);
49 }
50
51 width: 100%;
52 height: 100%;
53 }
54
55 for circle[idx] in root.model : Rectangle {
56 background: root.clicked-idx == idx ? gray : white;
57 border-color: black;
58 border-width: 2px;
59 border-radius: self.width / 2;
60 height: self.width;
61 width: circle.d;
62 x: circle.x - self.width/2;
63 y: circle.y - self.height/2;
64
65 TouchArea {
66 clicked => {
67 root.selected-circle = circle;
68 root.clicked-idx = idx;
69 }
70
71 height: 100%;
72 width: 100%;
73 }
74 }
75 }
76 }
77
78 if (root.clicked-idx != -1) : TouchArea {
79 clicked => { root.clicked-idx = -1; }
80
81 height: 100%;
82 width: 100%;
83 }
84
85 if (root.clicked-idx != -1) : Rectangle {
86 background: lightgray;
87 height: 30%;
88 width: 70%;
89 x: (parent.width - self.width) / 2;
90 y: parent.height - self.height - parent.height * 5%;
91
92 TouchArea {
93 height: 100%;
94 width: 100%;
95 }
96
97 VerticalBox {
98 Text {
99 text: "Adjust diameter of circle at (" + root.selected-circle.x / 1px + ", " + root.selected-circle.y / 1px + ").";
100 wrap: word-wrap;
101 }
102
103 Slider {
104 changed(diameter) => {
105 root.circle_resized(root.clicked-idx, diameter *1px);
106 }
107
108 minimum: 4;
109 maximum: 100;
110 value: root.selected-circle.d / 1px;
111 }
112 }
113 }
114}
115