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
|
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import html, trame, vuetify
# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------
server = get_server(client_type="vue2")
state = server.state
CURSORS = [
"auto",
"default",
"none",
"context-menu",
"help",
"pointer",
"progress",
"wait",
"cell",
"crosshair",
"text",
"vertical-text",
"alias",
"copy",
"move",
"no-drop",
"not-allowed",
"grab",
"grabbing",
"e-resize",
"n-resize",
"ne-resize",
"nw-resize",
"s-resize",
"se-resize",
"sw-resize",
"w-resize",
"ew-resize",
"ns-resize",
"nesw-resize",
"nwse-resize",
"col-resize",
"row-resize",
"all-scroll",
"zoom-in",
"zoom-out",
]
# -----------------------------------------------------------------------------
# UI setup
# -----------------------------------------------------------------------------
with SinglePageLayout(server) as layout:
layout.icon.click = f"active = (active + 1) % {len(CURSORS)}"
layout.title.set_text("Toggle Cursor")
trame.Cursor(
active=("active", 0),
cursors=("options", CURSORS),
)
with layout.toolbar:
trame.Cursor(
active=("active + 1",),
cursors=("options", CURSORS),
)
html.Div(
"({{ options[active + 1] }})",
classes="ml-2",
style="text-overflow: ellipsis;",
)
vuetify.VSpacer()
vuetify.VChip("{{ active }}")
vuetify.VSlider(
dense=True,
hide_details=True,
v_model="active",
min=0,
max=len(CURSORS) - 1,
style="max-width: 200px;",
)
with layout.content:
with vuetify.VContainer(fluid=True):
with vuetify.VCol():
with vuetify.VRow(style="background: red;"):
html.Div("{{ options[active + 2] }}", classes="pa-6")
trame.Cursor(
active=("active + 2",),
cursors=("options", CURSORS),
)
with vuetify.VRow():
html.Div("{{ options[active] }}", classes="pa-6")
# -----------------------------------------------------------------------------
# start server
# -----------------------------------------------------------------------------
if __name__ == "__main__":
server.start()
|
