// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

export Ex1 := Rectangle {
//         ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    Rectangle {
        rotation-origin-x: width / 2;
        rotation-angle: 45deg;
        rotation-origin-y: width / 2;
    }
    Rectangle {
        rotation-origin-x: width / 2;
        rotation-origin-y: width / 2;
    }

    Text {
        rotation-angle: 90deg;
    }
}

RotImg := Image {
//     ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    rotation-angle: 45deg;
}

JustAnImage := Image {}
//          ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}

ImageWithChild := Image {
//             ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    Rectangle {}
}

export Ex2 := Rectangle {
//         ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    Image {
        rotation-angle: 45deg;
        Rectangle {}
    }
    RotImg {
        Rectangle {}
    }
    ImageWithChild {
        rotation-origin-x: 45px;
    }
    JustAnImage {
        rotation-angle: 45deg;
        Rectangle {}
    }
}


export Ex3 := Rectangle {
//         ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    i1 := Image {
        Rectangle {}
    }
    i2 := Rectangle {}

    TouchArea {
        clicked => {
            i1.rotation-angle = 60deg;
            i2.rotation-origin-x = 10px;
        }
    }
}

export component Ex4  {
    in property rot <=> rect . rotation-angle;

    rect := Rectangle {}
}