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.
@@ -1,22 +1,10 @@
1
- from typing import Dict, TypedDict, List
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: 1001;
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: 1000;
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
- .nodesettings_container {
1389
- height: 100%;
1390
- display: flex;
1391
- flex-direction: row;
1392
- }
1393
- .nodesettings_expander {
1436
+ .styled-select__control {
1394
1437
  height: 100%;
1395
- display: flex;
1396
- align-items: center;
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
- .nodesettings_content.expanded {
1410
- width: 250px;
1441
+ .styled-select__menu-list {
1442
+ max-height: 200px;
1411
1443
  }
1412
- .nodesettings_content.collapsed {
1413
- width: 0;
1444
+ .styled-select__single-value {
1445
+ text-align: start;
1414
1446
  }
1415
- .nodesettings_section {
1416
- margin-bottom: 10px;
1417
- margin-left: 0.5rem;
1447
+ .styled-select__option {
1448
+ text-align: start;
1449
+ padding: 2px 5px;
1418
1450
  }
1419
- .nodesettings_component {
1420
- margin-bottom: 0.5rem;
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;