1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4// cSpell: ignore Heade
5
6import { Button, TabWidget } from "std-widgets.slint";
7import { Api, ComponentItem, DiagnosticSummary } from "api.slint";
8
9import { EditorSizeSettings, EditorSpaceSettings, Icons } from "./components/styling.slint";
10import { StatusLine } from "./components/status-line.slint";
11import { HeaderView } from "./views/header-view.slint";
12import { LibraryView } from "./views/library-view.slint";
13import { DrawAreaMode, PreviewView } from "./views/preview-view.slint";
14import { OutOfDateBox } from "./components/out-of-date-box.slint";
15import { PropertyView } from "./views/property-view.slint";
16import { PreviewDataView } from "./views/preview-data-view.slint";
17import { WindowGlobal, WindowManager } from "windowglobal.slint";
18import { ColorPickerView, Styles as PickerStyles } from "components/widgets/floating-color-picker-widget.slint";
19import { TableEditorView } from "components/spreadsheet-dialog.slint";
20import "./assets/Inter-VariableFont.ttf";
21
22export { Api }
23
24export component PreviewUi inherits Window {
25 property <length> border: 20px;
26 property <ComponentItem> visible-component: {
27 name: "",
28 defined-at: "",
29 pretty-location: "",
30 is-user-defined: false,
31 is-currently-shown: false,
32 };
33 property <bool> show-left-sidebar;
34 property <bool> show-right-sidebar;
35 property <bool> show-floating-widget <=> WindowManager.showing-color-picker;
36 property <bool> show-floating-table-editor <=> WindowManager.showing-table-editor;
37 property <bool> show-color-stop-picker <=> WindowManager.showing-color-stop-picker;
38 property <length> initial-floating-x;
39
40 title: "Slint Live-Preview";
41 icon: @image-url("assets/slint-logo-small-light.png");
42 always-on-top <=> Api.always-on-top;
43
44 init => {
45 WindowGlobal.window-width = self.width;
46 WindowGlobal.window-height = self.height;
47 initial-floating-x = (self.width - PickerStyles.picker-width - 350px).max(0);
48 }
49
50 changed width => {
51 WindowGlobal.window-width = self.width;
52 initial-floating-x = (self.width - PickerStyles.picker-width - 350px).max(0);
53 }
54 changed height => {
55 WindowGlobal.window-height = self.height;
56 }
57
58 VerticalLayout {
59 if !Api.show-preview-ui: no-ui-drawing-rect := Rectangle {
60 VerticalLayout {
61 ComponentContainer {
62 component-factory: Api.preview-area;
63 }
64 }
65 }
66 if Api.show-preview-ui: Rectangle {
67 VerticalLayout {
68 header-view := HeaderView {
69 show-left-sidebar <=> root.show-left-sidebar;
70 show-right-sidebar <=> root.show-right-sidebar;
71
72 current-style <=> Api.current-style;
73 known-styles <=> Api.known-styles;
74
75 style-selected => {
76 Api.style-changed();
77 }
78
79 edit := Button {
80 icon: Icons.inspect;
81 colorize-icon: preview.select-mode ? false : true;
82 checkable: true;
83 checked <=> preview.select-mode;
84 primary: preview.select-mode;
85 enabled: preview.preview-is-current;
86 }
87 }
88
89 HorizontalLayout {
90 if root.show-left-sidebar: LibraryView {
91 known-components: Api.known-components;
92
93 preview-area-is-current: preview.preview-is-current;
94 preview-area-position-x: preview.preview-area-position-x;
95 preview-area-position-y: preview.preview-area-position-y;
96 preview-area-width: preview.preview-area-width;
97 preview-area-height: preview.preview-area-height;
98
99 visible-component: root.visible-component;
100
101 can-drop(index, x, y, on-drop-area) => {
102 Api.can-drop(index, x, y, on-drop-area);
103 }
104
105 drop(index, x, y) => {
106 Api.drop(index, x, y);
107 }
108
109 show-preview-for(name, defined-at) => {
110 Api.show-preview-for(name, defined-at);
111 }
112 }
113
114 preview := PreviewView {
115 visible-component <=> root.visible-component;
116 }
117
118 if root.show-right-sidebar: HorizontalLayout {
119 Rectangle {
120 width: 4px;
121 background: @linear-gradient(90deg, #0000, #0002);
122 }
123 VerticalLayout {
124 tw := TabWidget {
125 width: EditorSizeSettings.property-bar-width - (EditorSpaceSettings.default-padding*2);
126 current-index: 0;
127 Tab {
128 title: "Properties";
129 if tw.current-index == 0: PropertyView {
130 opacity: preview.preview-is-current ? 1.0 : 0.3;
131 enabled: preview.preview-is-current;
132 }
133 }
134
135 preview_data_tab := Tab {
136 title: "Data";
137 if tw.current-index == 1: PreviewDataView {
138 opacity: preview.preview-is-current ? 1.0 : 0.3;
139 enabled: preview.preview-is-current;
140 }
141 }
142 }
143 }
144 }
145
146 }
147
148 StatusLine { }
149 }
150 }
151 }
152
153 if Api.diagnostic-summary == DiagnosticSummary.Errors: OutOfDateBox {
154 x: (parent.width - self.width) / 2;
155 y: (parent.height / 10);
156 }
157
158 if show-floating-table-editor || show-color-stop-picker || show-floating-widget: TouchArea {
159 changed pressed => {
160 WindowManager.hide-floating-widget();
161 }
162 }
163
164 if show-floating-table-editor: TableEditorView {
165 init => {
166 self.initial-x = root.initial-floating-x;
167 self.initial-y = 50px;
168 }
169 }
170
171
172 if show-floating-widget: ColorPickerView {
173 init => {
174 self.initial-x = root.initial-floating-x;
175 self.initial-y = 50px;
176 }
177 close => {
178 WindowManager.hide-floating-color-widget();
179 }
180 }
181
182 if show-color-stop-picker: ColorPickerView {
183
184 color-stop-mode: true;
185
186 init => {
187 self.initial-x = root.initial-floating-x - 240px;
188 self.initial-y = 50px;
189 }
190 close => {
191 WindowManager.hide-color-stop-picker();
192 }
193 }
194
195}
196