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/// Basic information on a known component
5export struct ComponentItem {
6 name: string,
7 index: int,
8 defined-at: string,
9 pretty-location: string,
10 is-user-defined: bool,
11 is-currently-shown: bool,
12 is-exported: bool,
13}
14
15/// A `category` with a lost of `ComponentItem`s that belong into it.
16///
17/// File url is either an empty string or a URL to some document
18export struct ComponentListItem {
19 category: string,
20 file_url: string,
21 components: [ComponentItem]
22}
23
24/// Some `Diagnostics` as raised by the compiler
25export enum DiagnosticSummary {
26 NothingDetected,
27 Warnings,
28 Errors,
29}
30
31/// What kind of layout we are working with
32export enum LayoutKind {
33 None,
34 Horizontal,
35 Vertical,
36 Grid,
37}
38
39/// A rectangular region that is selected
40struct SelectionRectangle {
41 x: length,
42 y: length,
43 width: length,
44 height: length,
45}
46
47/// A `Selection`
48export struct Selection {
49 geometry: SelectionRectangle,
50 layout-data: LayoutKind,
51 is-interactive: bool,
52 is-primary: bool,
53 is-moveable: bool,
54 is-resizable: bool,
55}
56
57/// A mark showing where an element will show up when dropped into the current location
58export struct DropMark {
59 x1: length,
60 y1: length,
61 x2: length,
62 y2: length,
63}
64
65export struct SelectionStackFrame {
66 width: percent,
67 height: percent,
68 x: percent,
69 y: percent,
70 is-in-root-component: bool,
71 is-layout: bool,
72 is-interactive: bool,
73 is-selected: bool,
74 type-name: string,
75 file-name: string,
76 element-path: string,
77 element-offset: int,
78 id: string,
79}
80
81export enum SelectionStackFilter {
82 Nothing,
83 Layouts,
84 Interactive,
85 Others,
86 LayoutsAndInteractive,
87 LayoutsAndOthers,
88 InteractiveAndOthers,
89 Everything,
90}
91
92/// A Range in a source
93export struct Range {
94 start: int,
95 end: int,
96}
97
98export struct ColorData {
99 r: int,
100 g: int,
101 b: int,
102 a: int,
103 text: string,
104 short-text: string,
105}
106
107export enum PropertyValueKind {
108 boolean,
109 brush,
110 code,
111 color,
112 enum,
113 float,
114 integer,
115 string,
116}
117
118export enum BrushKind {
119 solid,
120 linear,
121 radial,
122}
123
124export struct GradientStop {
125 position: float, // between 0 and 1!
126 color: color,
127}
128
129/// Data about the property value for use in "simple" mode
130export struct PropertyValue {
131 display-string: string, // ALLWAYS, its a string description of what is there
132 value-bool: bool, // boolean
133 is-translatable: bool, // string
134 kind: PropertyValueKind,
135 brush-kind: BrushKind, // brush
136 gradient-stops: [GradientStop], // brush
137 value-brush: brush, // brush, color
138 value-float: float, // float, brush (angle)
139 value-int: int, // integer, enum/float (current index into visual_items)
140 default-selection: int, // enum/float (default index into visual_items)
141 value-string: string, // enum (name), string, brush (color value)
142 visual-items: [string], // enum (enum members), float (units)
143 tr-context: string, // string
144 tr-plural: string, // string
145 tr-plural-expression: string, // string
146 code: string, // ALWAYS, empty if property is not explicitly defined
147 accessor-path: string, // set for struct members and such
148 was-edited: bool, // Used by preview dataonly!
149 edited-value: string, // Used in preview dataonly!
150}
151
152export struct PropertyValueTable {
153 is-array: bool,
154 headers: [string],
155 values: [[PropertyValue]],
156}
157
158/// Important Ranges in the property definition
159///
160/// The URL and version is the same as in the Element it belongs to
161export struct PropertyDefinition {
162 definition-range: Range,
163 selection-range: Range,
164 expression-range: Range,
165 expression-value: string,
166}
167
168/// The Property Declaration
169export struct PropertyDeclaration {
170 defined-at: PropertyDefinition,
171
172 source-path: string,
173 source-version: int,
174 range: Range,
175}
176
177/// Information on one Property
178export struct PropertyInformation {
179 name: string,
180 type-name: string,
181 value: PropertyValue,
182 display-priority: int,
183}
184
185/// Grouping for properties
186export struct PropertyGroup {
187 group-name: string,
188 properties: [PropertyInformation],
189}
190
191export enum PreviewDataKind {
192 Value,
193 Json,
194 Table,
195}
196
197export struct PreviewData {
198 name: string,
199 has-getter: bool,
200 has-setter: bool,
201 kind: PreviewDataKind,
202}
203
204/// Information on exported components and their properties
205export struct PropertyContainer {
206 container-name: string,
207 container-id: string,
208 properties: [PreviewData],
209}
210
211/// Information on an Element a Property belongs to
212export struct ElementInformation {
213 id: string,
214 type-name: string,
215 source-uri: string,
216 source-version: int,
217 range: Range,
218}
219
220export global Api {
221 // # Properties
222 // ## General preview state:
223 // experimental features are available
224 in property <bool> experimental: false;
225 // enable editing mode
226 in property <bool> show-preview-ui: true;
227 // std-widgets are used (=> show style dropdown)
228 in-out property <bool> uses-widgets;
229 in-out property <bool> always-on-top;
230 in property <bool> focus-previewed-element;
231
232 // ## Component Data for ComponentList:
233 // All the components
234 in property <[ComponentListItem]> known-components;
235 // The component currently viewed
236 out property <ComponentItem> visible-component;
237
238 // ## Kinds of diagnostics seen in the last compiler run
239 in property <DiagnosticSummary> diagnostic-summary;
240 // status message text
241 in property <string> status-text;
242
243 // ## Style:
244 // All the known styles
245 in property <[string]> known-styles;
246 // The current style
247 in-out property <string> current-style;
248 // control, but command on macOS
249 in-out property <string> control-key-name: "control";
250
251 // ## Drawing Area
252 // Borders around things
253 in property <[Selection]> selections;
254 in-out property <DropMark> drop-mark;
255 // The actual preview
256 in property <component-factory> preview-area;
257
258 // set to true to resize
259 in property <bool> resize-to-preferred-size: false;
260
261 // ## Property Editor
262 in-out property <ElementInformation> current-element;
263 in-out property <[PropertyGroup]> properties: [
264 {
265 group-name: "Geometry",
266 properties: [
267 {
268 name: "width",
269 type-name: "length",
270 value: {
271 kind: PropertyValueKind.float,
272 value-float: 100,
273 visual-items: ["px", "cm", "mm", "in", "pt", "phx"],
274 }
275 },
276 {
277 name: "height",
278 type-name: "length",
279 value: {
280 kind: PropertyValueKind.float,
281 value-float: 200,
282 visual-items: ["px", "cm", "mm", "in", "pt", "phx"],
283 }
284 },
285 {
286 name: "z",
287 type-name: "float",
288 value: {
289 kind: PropertyValueKind.float,
290 value-float: 10,
291 }
292 },
293 {
294 name: "combobox",
295 type-name: "string",
296 value: {
297 kind: PropertyValueKind.enum,
298 value-int: 1,
299 default-selection: 0,
300 visual-items: ["one", "twenty two", "one hundred", "infinite"],
301 }
302 },
303 ]
304 },
305 {
306 group-name: "Button",
307 properties: [
308 {
309 name: "text",
310 type-name: "string",
311 value: {
312 is-translatable: true,
313 kind: PropertyValueKind.string,
314 }
315 },
316 {
317 name: "checkable",
318 type-name: "bool",
319 value: {
320 kind: PropertyValueKind.boolean,
321 }
322 },
323 {
324 name: "icon",
325 type-name: "image",
326 value: {
327 kind: PropertyValueKind.code,
328 }
329 },
330 {
331 name: "brush",
332 type-name: "brush",
333 value: {
334 kind: PropertyValueKind.brush,
335 value-brush: Colors.green,
336 value-string: "#00ff00"
337 },
338 },
339 {
340 name: "text-between",
341 type-name: "string",
342 value: {
343 is-translatable: true,
344 kind: PropertyValueKind.string,
345 }
346 },
347 {
348 name: "color",
349 type-name: "color",
350 value: {
351 kind: PropertyValueKind.color,
352 value-brush: Colors.green,
353 value-string: "#00ff00"
354 },
355 },
356
357 {
358 name: "a-really-long-named-attribute",
359 type-name: "float",
360 value: {
361 kind: PropertyValueKind.float,
362 value-float: 10,
363 }
364 },
365 {
366 name: "bar",
367 type-name: "float",
368 value: {
369 kind: PropertyValueKind.code,
370 value-float: 10.5,
371 code: 10/2,
372 }
373 },
374 {
375 name: "baz",
376 type-name: "float",
377 value: {
378 kind: PropertyValueKind.code,
379 value-float: 10.5,
380 code: "",
381 }
382 }
383
384 ]
385 }, {
386 group-name: "Other",
387 properties: [
388 {
389 name: "text",
390 type-name: "string",
391 value: {
392 is-translatable: true,
393 kind: PropertyValueKind.string,
394 }
395 },
396 {
397 name: "checkable",
398 type-name: "bool",
399 value: {
400 kind: PropertyValueKind.boolean,
401 }
402 },
403 {
404 name: "icon",
405 type-name: "image",
406 value: {
407 kind: PropertyValueKind.code,
408 }
409 },
410 {
411 name: "color",
412 type-name: "brush",
413 value: {
414 kind: PropertyValueKind.brush,
415 value-brush: Colors.magenta,
416 value-string: "#ff00ff"
417 },
418 },
419 {
420 name: "a-really-long-named-attribute",
421 type-name: "float",
422 value: {
423 kind: PropertyValueKind.float,
424 value-float: 10,
425 }
426 },
427 {
428 name: "bar",
429 type-name: "float",
430 value: {
431 kind: PropertyValueKind.code,
432 value-float: 10.5,
433 code: 10/2,
434 }
435 },
436 {
437 name: "baz",
438 type-name: "float",
439 value: {
440 kind: PropertyValueKind.code,
441 value-float: 10.5,
442 code: "",
443 }
444 }
445
446 ]
447 }
448
449 ];
450
451 // ## preview data
452
453 in-out property <[PropertyContainer]> preview-data;
454
455 // # Callbacks
456
457 // ## Custom conversion functions:
458 pure callback string-is-color(string) -> bool;
459 pure callback string-to-color(string) -> color;
460 pure callback color-to-data(color) -> ColorData;
461 pure callback rgba_to_color(r: int, g: int, b: int, a: int) -> color;
462
463 // ## Style:
464 callback style-changed();
465
466 // ## Component life-cycle:
467
468 // Create a new component
469 callback add-new-component();
470
471 // Add an existing component
472 pure callback can-drop(component-index: int, x: length, y: length, on-drop-area: bool) -> bool;
473 callback drop(component-index: int, x: length, y: length);
474
475 callback rename-component(old-name: string, defined-at: string, new-name: string);
476
477 callback selected-element-can-move-to(x: length, y: length, mouse-x: length, mouse-y: length) -> bool;
478 callback selected-element-move(x: length, y: length, mouse-x: length, mouse-y: length);
479
480 callback selected-element-resize(x: length, y: length, width: length, height: length);
481
482 callback selected-element-delete();
483
484 // ## Element selection:
485 callback selection-stack-at(x: length, y: length) -> [SelectionStackFrame];
486 pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter_text: string, filter: SelectionStackFilter) -> [SelectionStackFrame];
487 pure callback find-selected-selection-stack-frame([SelectionStackFrame]) -> SelectionStackFrame;
488 callback select-element(file: string, offset: int, x: length, y: length);
489
490 callback select-at(x: length, y: length, enter-component: bool);
491 callback select-behind(x: length, y: length, enter-component: bool, reverse: bool);
492 callback reselect();
493 callback unselect();
494
495 // ## Change Editor:
496
497 // Show a component in the editor
498 callback show-component(name: string, url: string);
499 // Show a position consisting of `line` and `column` in a `file` in the editor
500 callback show-document(file: string, line: int, column: int);
501 // Show a position consisting of `line` and `column` in a `file` in the editor
502 callback show-document-offset-range(url: string, start_offset: int, end_offset: int, take-focus: bool);
503
504 // ## Drawing Area
505 // Preview some other component
506 callback show-preview-for(name: string, url: string);
507 callback reload-preview();
508
509 // ## Property Editor
510 pure callback test-code-binding(element-url: string, element-version: int, element-offset: int, property-name: string, property-value: string) -> bool;
511 pure callback set-code-binding(element-url: string, element-version: int, element-offset: int, property-name: string, property-value: string);
512 pure callback set-color-binding(element-url: string, element-version: int, element-offset: int, property-name: string, property-value: color);
513
514 pure callback string-to-code(value: string, is_translatable: bool, tr_context: string, tr_plural: string, tr_plural_expression: string) -> string;
515
516 pure callback as-slint-brush(kind: BrushKind, angle: float, color: color, stops: [GradientStop]) -> string;
517
518 // ## preview data
519 pure callback get-property-value(component: string, name: string) -> PropertyValue;
520 pure callback get-property-value-table(component: string, name: string) -> PropertyValueTable;
521 pure callback set-property-value-table(component: string, name: string, table: [[PropertyValue]], is-array: bool) -> string;
522
523 pure callback insert-row-into-value-table(table: PropertyValueTable, insert-before: int);
524 pure callback remove-row-from-value-table(table: PropertyValueTable, remove-row: int);
525
526 pure callback set-json-preview-data(component: string, name: string, json-value: string) -> string;
527
528 pure callback as-json-brush(kind: BrushKind, angle: float, color: color, stops: [GradientStop]) -> string;
529
530 pure callback add-gradient-stop(stops: [GradientStop], value: GradientStop) -> int;
531 pure callback remove-gradient-stop(stops: [GradientStop], row: int);
532 // returns the new index of the gradient stop in the sorted list of GradientStops
533 pure callback move-gradient-stop(stops: [GradientStop], row: int, new_position: float) -> int;
534 pure callback suggest-gradient-stop-at-row(stops: [GradientStop], row: int) -> GradientStop;
535 pure callback suggest-gradient-stop-at-position(stops: [GradientStop], position: float) -> GradientStop;
536 pure callback clone-gradient-stops(stops: [GradientStop]) -> [GradientStop];
537
538 pure callback create-brush(kind: BrushKind, angle: float, color: color, stops: [GradientStop]) -> brush;
539
540 // Get the property declaration/definition ranges
541 callback property-declaration-ranges(property-name: string) -> PropertyDeclaration;
542}
543