sixtyfps-compilerlib 0.1.6

Internal SixtyFPS compiler library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

// Copyright © SixtyFPS GmbH <info@sixtyfps.io>
// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)

import { StyleMetrics, ScrollView } from "sixtyfps_widgets_impl.60";

export LineEditInner := Rectangle {
    callback accepted(string);
    callback edited(string);
    property<string> placeholder-text;
    property text <=> input.text;
    property placeholder-color <=> placeholder.color;
    property enabled <=> input.enabled;
    property has-focus <=> input.has-focus;
    min-height: input.preferred-height;
    min-width: max(50px, placeholder.min-width);
    clip: true;
    forward-focus: input;
    input := TextInput {
        property <length> computed_x;
        x: min(0px, max(parent.width - width, computed_x));
        width: max(parent.width, preferred-width);
        height: 100%;
        color: enabled ? StyleMetrics.textedit-text-color : StyleMetrics.textedit-text-color-disabled;
        cursor-position-changed(cpos) => {
            if (cpos.x + computed_x < StyleMetrics.layout-padding) {
                computed_x = - cpos.x + StyleMetrics.layout-padding;
            } else if (cpos.x + computed_x > parent.width - StyleMetrics.layout-padding) {
                computed_x = parent.width - cpos.x - StyleMetrics.layout-padding;
            }
        }
        accepted => { root.accepted(self.text); }
        edited => { root.edited(self.text); }
        vertical-alignment: center;
        single-line: true;
    }
    placeholder := Text {
        height: 100%; width: 100%;
        vertical-alignment: center;
        text: root.text == "" ? root.placeholder-text : "";
    }
}

export TextEdit := ScrollView {
    property <string> text <=> input.text;
    has-focus <=> input.has-focus;
    enabled <=> input.enabled;
    property <TextWrap> wrap <=> input.wrap;
    callback edited(string);
    forward-focus: input;

    horizontal-stretch: 1;
    vertical-stretch: 1;

    viewport-width: wrap == TextWrap.word-wrap ? root.visible-width : max(root.visible-width, input.preferred-width);
    viewport-height: max(self.visible-height, input.preferred-height);

    Rectangle {
        background: enabled ? StyleMetrics.textedit-background : StyleMetrics.textedit-background-disabled;
    }

    input := TextInput {
        edited => { root.edited(self.text); }
        color: enabled ? StyleMetrics.textedit-text-color : StyleMetrics.textedit-text-color-disabled;
        single-line: false;
        wrap: word-wrap;
        cursor-position-changed(cpos) => {
            if (cpos.x + viewport-x < StyleMetrics.layout-padding) {
                viewport-x = min(0px, max(parent.visible-width - width,  - cpos.x + StyleMetrics.layout-padding ));
            } else if (cpos.x + viewport-x > parent.visible-width - StyleMetrics.layout-padding) {
                viewport-x = min(0px, max(parent.visible-width - width,  parent.visible-width - cpos.x - StyleMetrics.layout-padding ));
            }
            if (cpos.y + viewport-y < StyleMetrics.layout-padding) {
                viewport-y = min(0px, max(parent.visible-height - height,  - cpos.y + StyleMetrics.layout-padding ));
            } else if (cpos.y + viewport-y > parent.visible-height - StyleMetrics.layout-padding - 20px) {
                // FIXME: font-height hardcoded to 20px
                viewport-y = min(0px, max(parent.visible-height - height,  parent.visible-height - cpos.y - StyleMetrics.layout-padding - 20px));
            }
        }
    }
}

export AboutSixtyFPS := Rectangle {
    VerticalLayout {
        padding: 12px;
        spacing: 8px;
        alignment: start;
        Text {
            text: "Made with";
            font-size: 24px;
            font-weight: 700;
            horizontal-alignment: center;
        }
        Image {
            source: @image-url("sixtyfps_logo.svg");
            preferred-width: 128px;
        }
        Text {
            text: "Version 0.1.6\nhttps://sixtyfps.io/";
            font-size: 10px;
            horizontal-alignment: center;
        }
    }
}