funcnodes-react-flow 0.3.11__py3-none-any.whl → 0.3.13__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- funcnodes_react_flow/__init__.py +17 -28
- funcnodes_react_flow/plugin_setup.py +43 -0
- funcnodes_react_flow/static/css/style.css +163 -152
- funcnodes_react_flow/static/js/index.js +4 -4
- funcnodes_react_flow/static/js/index.js.map +1 -1
- {funcnodes_react_flow-0.3.11.dist-info → funcnodes_react_flow-0.3.13.dist-info}/METADATA +2 -2
- {funcnodes_react_flow-0.3.11.dist-info → funcnodes_react_flow-0.3.13.dist-info}/RECORD +10 -9
- {funcnodes_react_flow-0.3.11.dist-info → funcnodes_react_flow-0.3.13.dist-info}/entry_points.txt +3 -0
- {funcnodes_react_flow-0.3.11.dist-info → funcnodes_react_flow-0.3.13.dist-info}/LICENSE +0 -0
- {funcnodes_react_flow-0.3.11.dist-info → funcnodes_react_flow-0.3.13.dist-info}/WHEEL +0 -0
funcnodes_react_flow/__init__.py
CHANGED
@@ -1,22 +1,10 @@
|
|
1
|
-
from typing import
|
1
|
+
from typing import TypedDict, List
|
2
2
|
|
3
3
|
try:
|
4
4
|
from .run import run_server # noqa: F401
|
5
5
|
except ImportError:
|
6
6
|
pass
|
7
|
-
|
8
|
-
|
9
|
-
class ReactPlugin(TypedDict):
|
10
|
-
"""
|
11
|
-
A typed dictionary for a React plugin.
|
12
|
-
|
13
|
-
Attributes:
|
14
|
-
js (list[str]): A list of JavaScript files.
|
15
|
-
"""
|
16
|
-
|
17
|
-
js: list[str]
|
18
|
-
css: list[str]
|
19
|
-
module: str
|
7
|
+
from .plugin_setup import ReactPlugin, setup, FUNCNODES_REACT_PLUGIN
|
20
8
|
|
21
9
|
|
22
10
|
class ExpandedReactPlugin(TypedDict):
|
@@ -32,20 +20,6 @@ class ExpandedReactPlugin(TypedDict):
|
|
32
20
|
css: List[bytes]
|
33
21
|
|
34
22
|
|
35
|
-
FUNCNODES_REACT_PLUGIN: Dict[str, ReactPlugin] = {}
|
36
|
-
|
37
|
-
|
38
|
-
def add_react_plugin(name: str, plugin: ReactPlugin):
|
39
|
-
"""
|
40
|
-
Add a React plugin to the FUNCNODES_REACT_PLUGIN dictionary.
|
41
|
-
|
42
|
-
Args:
|
43
|
-
name (str): The name of the plugin.
|
44
|
-
plugin (ReactPlugin): The plugin to add.
|
45
|
-
"""
|
46
|
-
FUNCNODES_REACT_PLUGIN[str(name)] = plugin
|
47
|
-
|
48
|
-
|
49
23
|
def get_react_plugin_content(key: str) -> ExpandedReactPlugin:
|
50
24
|
"""
|
51
25
|
Get the content of a React plugin.
|
@@ -58,6 +32,9 @@ def get_react_plugin_content(key: str) -> ExpandedReactPlugin:
|
|
58
32
|
"""
|
59
33
|
key = str(key)
|
60
34
|
|
35
|
+
if key not in FUNCNODES_REACT_PLUGIN:
|
36
|
+
raise ValueError(f"React plugin {key} not found")
|
37
|
+
|
61
38
|
with open(FUNCNODES_REACT_PLUGIN[key]["module"], "rb") as f:
|
62
39
|
module = f.read()
|
63
40
|
resp: ExpandedReactPlugin = {"js": [], "module": module, "css": []}
|
@@ -71,3 +48,15 @@ def get_react_plugin_content(key: str) -> ExpandedReactPlugin:
|
|
71
48
|
with open(css, "rb") as f:
|
72
49
|
resp["css"].append(f.read())
|
73
50
|
return resp
|
51
|
+
|
52
|
+
|
53
|
+
setup()
|
54
|
+
|
55
|
+
|
56
|
+
__all__ = [
|
57
|
+
"run_server",
|
58
|
+
"ReactPlugin",
|
59
|
+
"FUNCNODES_REACT_PLUGIN",
|
60
|
+
"get_react_plugin_content",
|
61
|
+
"ReactPlugin",
|
62
|
+
]
|
@@ -0,0 +1,43 @@
|
|
1
|
+
from typing import Dict
|
2
|
+
from funcnodes_core import plugins
|
3
|
+
|
4
|
+
|
5
|
+
class ReactPlugin(plugins.BasePlugin):
|
6
|
+
"""
|
7
|
+
A typed dictionary for a React plugin.
|
8
|
+
|
9
|
+
Attributes:
|
10
|
+
js (list[str]): A list of JavaScript files.
|
11
|
+
"""
|
12
|
+
|
13
|
+
js: list[str]
|
14
|
+
css: list[str]
|
15
|
+
|
16
|
+
|
17
|
+
FUNCNODES_REACT_PLUGIN: Dict[str, ReactPlugin] = {}
|
18
|
+
|
19
|
+
|
20
|
+
def add_react_plugin(name: str, plugin: ReactPlugin):
|
21
|
+
"""
|
22
|
+
Add a React plugin to the FUNCNODES_REACT_PLUGIN dictionary.
|
23
|
+
|
24
|
+
Args:
|
25
|
+
name (str): The name of the plugin.
|
26
|
+
plugin (ReactPlugin): The plugin to add.
|
27
|
+
"""
|
28
|
+
FUNCNODES_REACT_PLUGIN[str(name)] = plugin
|
29
|
+
|
30
|
+
|
31
|
+
def plugin_function(installed_module: plugins.InstalledModule):
|
32
|
+
entry_points = installed_module.entry_points
|
33
|
+
mod = installed_module.module
|
34
|
+
|
35
|
+
if "react_plugin" in entry_points:
|
36
|
+
add_react_plugin(mod, entry_points["react_plugin"])
|
37
|
+
elif hasattr(mod, "REACT_PLUGIN"):
|
38
|
+
add_react_plugin(mod, mod.REACT_PLUGIN)
|
39
|
+
entry_points["react_plugin"] = mod.REACT_PLUGIN
|
40
|
+
|
41
|
+
|
42
|
+
def setup():
|
43
|
+
plugins.register_setup_plugin(plugin_function)
|
@@ -1,4 +1,104 @@
|
|
1
1
|
@charset "UTF-8";
|
2
|
+
:root {
|
3
|
+
--funcnodesedgecolor: #7bb3ec;
|
4
|
+
}
|
5
|
+
|
6
|
+
.funcnodes-edge .react-flow__edge-path {
|
7
|
+
stroke: var(--funcnodesedgecolor);
|
8
|
+
stroke-width: 2px;
|
9
|
+
}
|
10
|
+
.funcnodes-edge.selected .react-flow__edge-path {
|
11
|
+
stroke: #11ff00;
|
12
|
+
}
|
13
|
+
|
14
|
+
.dialogoverlay {
|
15
|
+
background-color: rgba(0, 0, 0, 0.5);
|
16
|
+
position: fixed;
|
17
|
+
inset: 0;
|
18
|
+
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
19
|
+
z-index: 2000;
|
20
|
+
}
|
21
|
+
|
22
|
+
.dialogconent {
|
23
|
+
background-color: var(--funcnodesbackground1);
|
24
|
+
border-radius: 6px;
|
25
|
+
box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
|
26
|
+
position: fixed;
|
27
|
+
top: 50%;
|
28
|
+
left: 50%;
|
29
|
+
transform: translate(-50%, -50%);
|
30
|
+
width: 90vw;
|
31
|
+
max-width: 85vw;
|
32
|
+
max-height: 85vh;
|
33
|
+
padding: 25px;
|
34
|
+
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
35
|
+
color: var(--funcnodestextcolor1);
|
36
|
+
border: 1px solid var(--funheadercolor);
|
37
|
+
display: flex;
|
38
|
+
flex-direction: column;
|
39
|
+
z-index: 2001;
|
40
|
+
}
|
41
|
+
|
42
|
+
.dialogtitle {
|
43
|
+
margin: 0;
|
44
|
+
font-weight: 500;
|
45
|
+
color: var(--funheadercolor);
|
46
|
+
font-size: 17px;
|
47
|
+
}
|
48
|
+
|
49
|
+
.dialogdescription {
|
50
|
+
margin: 10px 0 20px;
|
51
|
+
font-size: 15px;
|
52
|
+
line-height: 1.5;
|
53
|
+
}
|
54
|
+
|
55
|
+
.dialogclosebutton {
|
56
|
+
border-radius: 100%;
|
57
|
+
height: 25px;
|
58
|
+
width: 25px;
|
59
|
+
display: inline-flex;
|
60
|
+
background-color: inherit;
|
61
|
+
align-items: center;
|
62
|
+
justify-content: center;
|
63
|
+
color: var(--funheadercolor);
|
64
|
+
position: absolute;
|
65
|
+
top: 10px;
|
66
|
+
right: 10px;
|
67
|
+
border: none;
|
68
|
+
}
|
69
|
+
.dialogclosebutton:hover {
|
70
|
+
background-color: var(--funheadercolor);
|
71
|
+
color: var(--funcnodesbackground1);
|
72
|
+
}
|
73
|
+
.dialogclosebutton:active {
|
74
|
+
background-color: var(--funheadercolor);
|
75
|
+
color: var(--funcnodestextcolor1);
|
76
|
+
}
|
77
|
+
|
78
|
+
.dialogsendbutton {
|
79
|
+
background-color: var(--funcnodesbackground1);
|
80
|
+
color: var(--funheadercolor);
|
81
|
+
border: 1px solid var(--funheadercolor);
|
82
|
+
border-radius: 99rem;
|
83
|
+
padding: 10px 20px;
|
84
|
+
cursor: pointer;
|
85
|
+
font-size: 15px;
|
86
|
+
margin-top: 20px;
|
87
|
+
}
|
88
|
+
.dialogsendbutton:hover {
|
89
|
+
background-color: var(--funheadercolor);
|
90
|
+
color: var(--funcnodesbackground1);
|
91
|
+
}
|
92
|
+
.dialogsendbutton:active {
|
93
|
+
background-color: var(--funheadercolor);
|
94
|
+
color: var(--funcnodestextcolor1);
|
95
|
+
}
|
96
|
+
|
97
|
+
.dialogchildren {
|
98
|
+
margin-top: 20px;
|
99
|
+
overflow: auto;
|
100
|
+
}
|
101
|
+
|
2
102
|
:root {
|
3
103
|
--expandtime: 0.3s;
|
4
104
|
--libnodebgcolor: #48465f;
|
@@ -8,7 +108,7 @@
|
|
8
108
|
.libcontainer {
|
9
109
|
top: 0;
|
10
110
|
left: 0;
|
11
|
-
height: 100%;
|
111
|
+
min-height: 100%;
|
12
112
|
padding: 0.5rem;
|
13
113
|
box-sizing: border-box;
|
14
114
|
display: flex;
|
@@ -244,106 +344,6 @@
|
|
244
344
|
color: #0056b3;
|
245
345
|
}
|
246
346
|
|
247
|
-
.dialogoverlay {
|
248
|
-
background-color: rgba(0, 0, 0, 0.5);
|
249
|
-
position: fixed;
|
250
|
-
inset: 0;
|
251
|
-
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
252
|
-
z-index: 2000;
|
253
|
-
}
|
254
|
-
|
255
|
-
.dialogconent {
|
256
|
-
background-color: var(--funcnodesbackground1);
|
257
|
-
border-radius: 6px;
|
258
|
-
box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
|
259
|
-
position: fixed;
|
260
|
-
top: 50%;
|
261
|
-
left: 50%;
|
262
|
-
transform: translate(-50%, -50%);
|
263
|
-
width: 90vw;
|
264
|
-
max-width: 85vw;
|
265
|
-
max-height: 85vh;
|
266
|
-
padding: 25px;
|
267
|
-
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
268
|
-
color: var(--funcnodestextcolor1);
|
269
|
-
border: 1px solid var(--funheadercolor);
|
270
|
-
display: flex;
|
271
|
-
flex-direction: column;
|
272
|
-
z-index: 2001;
|
273
|
-
}
|
274
|
-
|
275
|
-
.dialogtitle {
|
276
|
-
margin: 0;
|
277
|
-
font-weight: 500;
|
278
|
-
color: var(--funheadercolor);
|
279
|
-
font-size: 17px;
|
280
|
-
}
|
281
|
-
|
282
|
-
.dialogdescription {
|
283
|
-
margin: 10px 0 20px;
|
284
|
-
font-size: 15px;
|
285
|
-
line-height: 1.5;
|
286
|
-
}
|
287
|
-
|
288
|
-
.dialogclosebutton {
|
289
|
-
border-radius: 100%;
|
290
|
-
height: 25px;
|
291
|
-
width: 25px;
|
292
|
-
display: inline-flex;
|
293
|
-
background-color: inherit;
|
294
|
-
align-items: center;
|
295
|
-
justify-content: center;
|
296
|
-
color: var(--funheadercolor);
|
297
|
-
position: absolute;
|
298
|
-
top: 10px;
|
299
|
-
right: 10px;
|
300
|
-
border: none;
|
301
|
-
}
|
302
|
-
.dialogclosebutton:hover {
|
303
|
-
background-color: var(--funheadercolor);
|
304
|
-
color: var(--funcnodesbackground1);
|
305
|
-
}
|
306
|
-
.dialogclosebutton:active {
|
307
|
-
background-color: var(--funheadercolor);
|
308
|
-
color: var(--funcnodestextcolor1);
|
309
|
-
}
|
310
|
-
|
311
|
-
.dialogsendbutton {
|
312
|
-
background-color: var(--funcnodesbackground1);
|
313
|
-
color: var(--funheadercolor);
|
314
|
-
border: 1px solid var(--funheadercolor);
|
315
|
-
border-radius: 99rem;
|
316
|
-
padding: 10px 20px;
|
317
|
-
cursor: pointer;
|
318
|
-
font-size: 15px;
|
319
|
-
margin-top: 20px;
|
320
|
-
}
|
321
|
-
.dialogsendbutton:hover {
|
322
|
-
background-color: var(--funheadercolor);
|
323
|
-
color: var(--funcnodesbackground1);
|
324
|
-
}
|
325
|
-
.dialogsendbutton:active {
|
326
|
-
background-color: var(--funheadercolor);
|
327
|
-
color: var(--funcnodestextcolor1);
|
328
|
-
}
|
329
|
-
|
330
|
-
.dialogchildren {
|
331
|
-
margin-top: 20px;
|
332
|
-
overflow: auto;
|
333
|
-
}
|
334
|
-
|
335
|
-
:root {
|
336
|
-
--funcnodesedgecolor: #7bb3ec;
|
337
|
-
}
|
338
|
-
|
339
|
-
.funcnodes-edge .react-flow__edge-path {
|
340
|
-
stroke: var(--funcnodesedgecolor);
|
341
|
-
stroke-width: 2px;
|
342
|
-
}
|
343
|
-
.funcnodes-edge.selected .react-flow__edge-path {
|
344
|
-
stroke: #11ff00;
|
345
|
-
}
|
346
|
-
|
347
347
|
/* this gets exported as style.css and can be used for the default theming */
|
348
348
|
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
|
349
349
|
.react-flow {
|
@@ -976,6 +976,7 @@ button {
|
|
976
976
|
--funcnodesbackground_light: hsl(240, 22%, 38%);
|
977
977
|
--containerboarderradius: 1rem;
|
978
978
|
--funcnodestextcolor1: #ffffff;
|
979
|
+
--funcnodes-z-index: 1000;
|
979
980
|
}
|
980
981
|
|
981
982
|
.funcnodescontainer {
|
@@ -990,6 +991,8 @@ button {
|
|
990
991
|
.funcnodesreactflowcontainer {
|
991
992
|
width: 100%;
|
992
993
|
height: 100%;
|
994
|
+
flex-grow: 1;
|
995
|
+
z-index: var(--funcnodes-z-index);
|
993
996
|
background-color: var(--funcnodesbackground1);
|
994
997
|
position: relative;
|
995
998
|
display: flex;
|
@@ -1043,12 +1046,20 @@ button {
|
|
1043
1046
|
position: absolute;
|
1044
1047
|
right: 0;
|
1045
1048
|
padding: 10px;
|
1046
|
-
z-index:
|
1049
|
+
z-index: 2;
|
1047
1050
|
display: flex;
|
1048
1051
|
flex-direction: row;
|
1049
1052
|
margin-right: 10px;
|
1050
1053
|
}
|
1051
1054
|
|
1055
|
+
.FuncnodesApp {
|
1056
|
+
height: 100%;
|
1057
|
+
width: 100%;
|
1058
|
+
flex-grow: 1;
|
1059
|
+
display: flex;
|
1060
|
+
flex-direction: column;
|
1061
|
+
}
|
1062
|
+
|
1052
1063
|
.funcnodesreactflowheader {
|
1053
1064
|
display: flex;
|
1054
1065
|
flex-direction: row;
|
@@ -1057,7 +1068,7 @@ button {
|
|
1057
1068
|
position: relative;
|
1058
1069
|
top: 0;
|
1059
1070
|
left: 0;
|
1060
|
-
z-index:
|
1071
|
+
z-index: 1;
|
1061
1072
|
}
|
1062
1073
|
.funcnodesreactflowheader .headerelement {
|
1063
1074
|
height: 100%;
|
@@ -1116,6 +1127,43 @@ button {
|
|
1116
1127
|
color: #fff;
|
1117
1128
|
}
|
1118
1129
|
|
1130
|
+
.nodesettings_container {
|
1131
|
+
min-height: 100%;
|
1132
|
+
display: flex;
|
1133
|
+
flex-direction: row;
|
1134
|
+
}
|
1135
|
+
.nodesettings_expander {
|
1136
|
+
min-height: 100%;
|
1137
|
+
display: flex;
|
1138
|
+
align-items: center;
|
1139
|
+
justify-content: center;
|
1140
|
+
cursor: pointer;
|
1141
|
+
padding: 3px 3px;
|
1142
|
+
}
|
1143
|
+
.nodesettings_content {
|
1144
|
+
display: flex;
|
1145
|
+
flex-direction: column;
|
1146
|
+
flex: 1;
|
1147
|
+
padding: 0 5px;
|
1148
|
+
overflow: auto;
|
1149
|
+
transition: width 0.5s;
|
1150
|
+
}
|
1151
|
+
.nodesettings_content.expanded {
|
1152
|
+
width: 250px;
|
1153
|
+
}
|
1154
|
+
.nodesettings_content.collapsed {
|
1155
|
+
width: 0;
|
1156
|
+
}
|
1157
|
+
.nodesettings_section {
|
1158
|
+
margin-bottom: 10px;
|
1159
|
+
margin-left: 0.5rem;
|
1160
|
+
}
|
1161
|
+
.nodesettings_component {
|
1162
|
+
margin-bottom: 0.5rem;
|
1163
|
+
margin-left: 0.5rem;
|
1164
|
+
margin-top: 0.5rem;
|
1165
|
+
}
|
1166
|
+
|
1119
1167
|
:root {
|
1120
1168
|
--node_border_radius: 5px;
|
1121
1169
|
--handle_outer_radius: 4px;
|
@@ -1385,41 +1433,23 @@ input.nodedatainput.styledinput,
|
|
1385
1433
|
transition: width 0.3s ease;
|
1386
1434
|
}
|
1387
1435
|
|
1388
|
-
.
|
1389
|
-
height: 100%;
|
1390
|
-
display: flex;
|
1391
|
-
flex-direction: row;
|
1392
|
-
}
|
1393
|
-
.nodesettings_expander {
|
1436
|
+
.styled-select__control {
|
1394
1437
|
height: 100%;
|
1395
|
-
|
1396
|
-
|
1397
|
-
justify-content: center;
|
1398
|
-
cursor: pointer;
|
1399
|
-
padding: 3px 3px;
|
1400
|
-
}
|
1401
|
-
.nodesettings_content {
|
1402
|
-
display: flex;
|
1403
|
-
flex-direction: column;
|
1404
|
-
flex: 1;
|
1405
|
-
padding: 0 5px;
|
1406
|
-
overflow: auto;
|
1407
|
-
transition: width 0.5s;
|
1438
|
+
min-height: initial;
|
1439
|
+
min-width: 10px;
|
1408
1440
|
}
|
1409
|
-
.
|
1410
|
-
|
1441
|
+
.styled-select__menu-list {
|
1442
|
+
max-height: 200px;
|
1411
1443
|
}
|
1412
|
-
.
|
1413
|
-
|
1444
|
+
.styled-select__single-value {
|
1445
|
+
text-align: start;
|
1414
1446
|
}
|
1415
|
-
.
|
1416
|
-
|
1417
|
-
|
1447
|
+
.styled-select__option {
|
1448
|
+
text-align: start;
|
1449
|
+
padding: 2px 5px;
|
1418
1450
|
}
|
1419
|
-
.
|
1420
|
-
|
1421
|
-
margin-left: 0.5rem;
|
1422
|
-
margin-top: 0.5rem;
|
1451
|
+
.styled-select__option:hover {
|
1452
|
+
cursor: pointer;
|
1423
1453
|
}
|
1424
1454
|
|
1425
1455
|
.tablecontainer {
|
@@ -1447,25 +1477,6 @@ input.nodedatainput.styledinput,
|
|
1447
1477
|
font-weight: inherit !important;
|
1448
1478
|
}
|
1449
1479
|
|
1450
|
-
.styled-select__control {
|
1451
|
-
height: 100%;
|
1452
|
-
min-height: initial;
|
1453
|
-
min-width: 10px;
|
1454
|
-
}
|
1455
|
-
.styled-select__menu-list {
|
1456
|
-
max-height: 200px;
|
1457
|
-
}
|
1458
|
-
.styled-select__single-value {
|
1459
|
-
text-align: start;
|
1460
|
-
}
|
1461
|
-
.styled-select__option {
|
1462
|
-
text-align: start;
|
1463
|
-
padding: 2px 5px;
|
1464
|
-
}
|
1465
|
-
.styled-select__option:hover {
|
1466
|
-
cursor: pointer;
|
1467
|
-
}
|
1468
|
-
|
1469
1480
|
.colorspace {
|
1470
1481
|
margin: 0.2rem;
|
1471
1482
|
display: grid;
|