1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial
3
4import { Palette, ScrollView, VerticalBox, GroupBox } from "std-widgets.slint";
5
6export struct ComponentListItem {
7 category: string,
8 components: [string]
9}
10
11export component ComponentList {
12 in property <[ComponentListItem]> known-components;
13
14 in property <length> preview-area-position-x;
15 in property <length> preview-area-position-y;
16 in property <length> preview-area-width;
17 in property <length> preview-area-height;
18
19 pure callback can-drop(string/* component_type */, length/* x */, length/* y */) -> bool;
20 callback drop(string/* component_type */, length/* x */, length/* y */);
21
22 private property <bool> preview-visible: preview-area-width > 0px && preview-area-height > 0px;
23
24 VerticalBox {
25 Text {
26 text: @tr("Library");
27 horizontal-alignment: center;
28 font-size: 1.4rem;
29 font-weight: 800;
30 }
31
32 ScrollView {
33 VerticalLayout {
34 for cli in root.known-components: VerticalLayout {
35 Rectangle {
36 height: title.preferred-height + 10px;
37 background: Palette.alternate-background;
38 title := Text {
39 font-size: 1.2rem;
40 font-weight: 800;
41 text: cli.category;
42 }
43 }
44
45 for ci in cli.components: TouchArea {
46 private property <length> drop-x: self.absolute-position.x + self.mouse-x - root.preview-area-position-x;
47 private property <length> drop-y: self.absolute-position.y + self.mouse-y - root.preview-area-position-y;
48 private property <bool> on-drop-area:
49 drop-x >= 0 && drop-x <= root.preview-area-width && drop-y >= 0 && drop-y <= root.preview-area-height;
50 private property <bool> can-drop-here: on-drop-area && root.can-drop(ci, drop-x, drop-y);
51 enabled: root.preview-visible;
52 height: name.preferred-height + 10px;
53 width: 100%;
54 name := Text {
55 text: ci;
56 }
57
58 pointer-event(event) => {
59 if (self.can-drop-here && event.kind == PointerEventKind.up && event.button == PointerEventButton.left) {
60 root.drop(ci, drop-x, drop-y);
61 }
62 }
63 states [
64 dragging-no-drop when self.pressed && !self.can-drop-here: {
65 mouse-cursor: MouseCursor.no-drop;
66 }
67 dragging-can-drop when self.pressed && self.can-drop-here: {
68 mouse-cursor: MouseCursor.copy;
69 }
70 normal when !self.pressed: {
71 mouse-cursor: MouseCursor.default;
72 }
73 ]
74 }
75 }
76 }
77 }
78 }
79}
80