slint/examples/7guis/circledraw.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { LineEdit, Button, Slider, StandardListView, VerticalBox } from "std-widgets.slint";

struct Circle := { x: length, y: length, d: length }

MainWindow := Window {
    preferred-width: 500px;
    preferred-height: 400px;

    property <[Circle]> model;

    property<int> clicked-idx: -1;
    property<Circle> selected-circle;
    callback background_clicked(length,length);

    property<bool> undoable: false;
    property<bool> redoable: false;
    callback undo_clicked();
    callback redo_clicked();

    callback circle_resized(int, length);

    VerticalBox {
        HorizontalLayout {
            alignment: center;
            spacing: 12px;
            Button {
                text: "Undo";
                enabled <=> root.undoable;
                clicked => { root.undo-clicked() }
            }
            Button {
                text: "Redo";
                enabled <=> root.redoable;
                clicked => { root.redo-clicked() }
            }
        }
        Rectangle {
            background: white;
            border-color: black;
            border-width: 2px;
            clip: true;
            TouchArea {
                width: 100%;
                height: 100%;
                clicked => {
                    root.background_clicked(pressed_x, pressed_y);
                }
            }

            for circle[idx] in model : Rectangle {
                background: clicked-idx == idx ? gray : white;
                border-color: black;
                border-width: 2px;
                border-radius: width / 2;
                height: width;
                width: circle.d;
                x: circle.x - width/2;
                y: circle.y - height/2;
                TouchArea {
                    height: 100%;
                    width: 100%;
                    clicked => {
                        selected-circle = circle;
                        clicked-idx = idx;
                    }
                }
            }

        }
    }

    if (clicked-idx != -1) : TouchArea {
        height: 100%;
        width: 100%;
        clicked => { clicked-idx = -1; }
    }
    if (clicked-idx != -1) : Rectangle {
        background: lightgray;
        height: 30%;
        width: 70%;
        x: (parent.width - width) / 2;
        y: parent.height - height - parent.height * 5%;
        TouchArea {
            height: 100%;
            width: 100%;
        }

        VerticalBox {
            Text {
                text: "Adjust diameter of circle at (" + selected-circle.x / 1px + ", " +  selected-circle.y / 1px + ").";
                wrap: word-wrap;
            }
            Slider {
                minimum: 4;
                maximum: 100;
                value: selected-circle.d / 1px;
                changed(diameter) => {
                    root.circle_resized(clicked-idx, diameter *1px);
                }
            }
        }
    }
}