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
4import { Palette } from "std-widgets.slint";
5import { SimpleColumn } from "layout-helpers.slint";
6import { WindowGlobal } from "../windowglobal.slint";
7
8export component DraggablePanel {
9 // Ensure to bing the parent window width and height so the panel can move if the window is resized
10 property <length> parent-window-width: WindowGlobal.window-width;
11 property <length> parent-window-height: WindowGlobal.window-height;
12
13 property <length> panel-target-x;
14 property <length> panel-target-y;
15
16 public function clear-focus-panel() {
17 hidden-input.visible = true;
18 hidden-input.focus();
19 hidden-input.clear-focus();
20 hidden-input.visible = false;
21 }
22
23 // If the parent window is resized, we need to make sure the panel is still visible
24 changed parent-window-width => {
25 if root.x + root.width > parent-window-width {
26 root.x = (parent-window-width - root.width).max(0);
27 }
28 }
29
30 changed parent-window-height => {
31 if (root.y + root.height) > parent-window-height {
32 root.y = (parent-window-height - root.height).max(0);
33 }
34 }
35
36 width: 300px;
37 height: content.height;
38
39 hidden-input := TextInput {
40 visible: false;
41 }
42
43 TouchArea {
44 changed pressed => {
45 // Workaround to ensure any item that has focus is de-focused
46 if self.pressed {
47 clear-focus-panel();
48 }
49 }
50 // catch scroll wheel events to stop the live preview from being scrolled
51 scroll-event(event) => {
52 return accept;
53 }
54
55 moved => {
56 panel-target-x = ((root.x + self.mouse-x - self.pressed-x) / 1px).round() * 1px;
57 panel-target-y = ((root.y + self.mouse-y - self.pressed-y) / 1px).round() * 1px;
58
59 if panel-target-x < 0px {
60 root.x = 0px;
61 }
62 if panel-target-x > 0px {
63 if panel-target-x < parent-window-width - root.width {
64 root.x = panel-target-x;
65 } else {
66 root.x = parent-window-width - root.width;
67 }
68 }
69 if panel-target-y < 0px {
70 root.y = 0px;
71 }
72 if panel-target-y > 0px {
73 if panel-target-y < parent-window-height - root.height {
74 root.y = panel-target-y;
75 } else {
76 root.y = parent-window-height - root.height;
77 }
78 }
79 }
80 }
81
82 Rectangle {
83 background: Palette.background;
84 drop-shadow-blur: 24px;
85 drop-shadow-offset-y: 10px;
86 drop-shadow-color: rgba(0, 0, 0, 0.25);
87 border-width: 0.5px;
88 border-color: Palette.border;
89 border-radius: 13px;
90 }
91
92 content := SimpleColumn {
93 @children
94 }
95}
96