@linkdlab/funcnodes_react_flow 0.3.12 → 0.3.14

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,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;
@@ -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 {
@@ -832,6 +832,76 @@
832
832
  top: 100%;
833
833
  }
834
834
 
835
+ :root {
836
+ --funheadercolor: #00d9ff;
837
+ --funcnodesbackground1: hsl(243, 26%, 13%);
838
+ --funcnodesbackground2: hsl(245, 22%, 22%);
839
+ --funcnodesbackground_light: hsl(240, 22%, 38%);
840
+ --containerboarderradius: 1rem;
841
+ --funcnodestextcolor1: #ffffff;
842
+ }
843
+
844
+ .funcnodescontainer {
845
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
846
+ -webkit-font-smoothing: antialiased;
847
+ -moz-osx-font-smoothing: grayscale;
848
+ }
849
+ .funcnodescontainer code {
850
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
851
+ }
852
+
853
+ .funcnodesreactflowcontainer {
854
+ width: 100%;
855
+ height: 100%;
856
+ background-color: var(--funcnodesbackground1);
857
+ position: relative;
858
+ display: flex;
859
+ flex-direction: column;
860
+ color: var(--funcnodestextcolor1);
861
+ }
862
+ .funcnodesreactflowcontainer * {
863
+ box-sizing: border-box;
864
+ }
865
+
866
+ .funcnodesreactflowbody {
867
+ flex-grow: 1;
868
+ position: relative;
869
+ display: flex;
870
+ flex-direction: row;
871
+ overflow: hidden;
872
+ }
873
+
874
+ .reactflowlayer {
875
+ flex-grow: 1;
876
+ position: relative;
877
+ overflow: hidden;
878
+ background-color: var(--funcnodesbackground2);
879
+ margin: 0.5rem;
880
+ border-radius: var(--containerboarderradius);
881
+ }
882
+
883
+ .vscrollcontainer {
884
+ overflow-y: auto;
885
+ overflow-x: hidden;
886
+ flex-grow: 1;
887
+ padding: 0.5rem;
888
+ box-sizing: border-box;
889
+ }
890
+
891
+ .workerselect {
892
+ max-width: 140px;
893
+ }
894
+
895
+ .workerselectoption.selected {
896
+ color: var(--funcnodestextcolor1);
897
+ }
898
+ .workerselectoption.active {
899
+ color: green;
900
+ }
901
+ .workerselectoption.inactive {
902
+ color: red;
903
+ }
904
+
835
905
  .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
836
906
  background-color: var(--funcnodesbackground1);
837
907
  color: var(--funcnodestextcolor1);
@@ -1028,74 +1098,41 @@ button {
1028
1098
  color: #fff;
1029
1099
  }
1030
1100
 
1031
- :root {
1032
- --funheadercolor: #00d9ff;
1033
- --funcnodesbackground1: hsl(243, 26%, 13%);
1034
- --funcnodesbackground2: hsl(245, 22%, 22%);
1035
- --funcnodesbackground_light: hsl(240, 22%, 38%);
1036
- --containerboarderradius: 1rem;
1037
- --funcnodestextcolor1: #ffffff;
1038
- }
1039
-
1040
- .funcnodescontainer {
1041
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
1042
- -webkit-font-smoothing: antialiased;
1043
- -moz-osx-font-smoothing: grayscale;
1044
- }
1045
- .funcnodescontainer code {
1046
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
1047
- }
1048
-
1049
- .funcnodesreactflowcontainer {
1050
- width: 100%;
1101
+ .nodesettings_container {
1051
1102
  height: 100%;
1052
- background-color: var(--funcnodesbackground1);
1053
- position: relative;
1054
- display: flex;
1055
- flex-direction: column;
1056
- color: var(--funcnodestextcolor1);
1057
- }
1058
- .funcnodesreactflowcontainer * {
1059
- box-sizing: border-box;
1060
- }
1061
-
1062
- .funcnodesreactflowbody {
1063
- flex-grow: 1;
1064
- position: relative;
1065
1103
  display: flex;
1066
1104
  flex-direction: row;
1067
- overflow: hidden;
1068
1105
  }
1069
-
1070
- .reactflowlayer {
1071
- flex-grow: 1;
1072
- position: relative;
1073
- overflow: hidden;
1074
- background-color: var(--funcnodesbackground2);
1075
- margin: 0.5rem;
1076
- border-radius: var(--containerboarderradius);
1106
+ .nodesettings_expander {
1107
+ height: 100%;
1108
+ display: flex;
1109
+ align-items: center;
1110
+ justify-content: center;
1111
+ cursor: pointer;
1112
+ padding: 3px 3px;
1077
1113
  }
1078
-
1079
- .vscrollcontainer {
1080
- overflow-y: auto;
1081
- overflow-x: hidden;
1082
- flex-grow: 1;
1083
- padding: 0.5rem;
1084
- box-sizing: border-box;
1114
+ .nodesettings_content {
1115
+ display: flex;
1116
+ flex-direction: column;
1117
+ flex: 1;
1118
+ padding: 0 5px;
1119
+ overflow: auto;
1120
+ transition: width 0.5s;
1085
1121
  }
1086
-
1087
- .workerselect {
1088
- max-width: 140px;
1122
+ .nodesettings_content.expanded {
1123
+ width: 250px;
1089
1124
  }
1090
-
1091
- .workerselectoption.selected {
1092
- color: var(--funcnodestextcolor1);
1125
+ .nodesettings_content.collapsed {
1126
+ width: 0;
1093
1127
  }
1094
- .workerselectoption.active {
1095
- color: green;
1128
+ .nodesettings_section {
1129
+ margin-bottom: 10px;
1130
+ margin-left: 0.5rem;
1096
1131
  }
1097
- .workerselectoption.inactive {
1098
- color: red;
1132
+ .nodesettings_component {
1133
+ margin-bottom: 0.5rem;
1134
+ margin-left: 0.5rem;
1135
+ margin-top: 0.5rem;
1099
1136
  }
1100
1137
 
1101
1138
  :root {
@@ -1367,41 +1404,23 @@ input.nodedatainput.styledinput,
1367
1404
  transition: width 0.3s ease;
1368
1405
  }
1369
1406
 
1370
- .nodesettings_container {
1371
- height: 100%;
1372
- display: flex;
1373
- flex-direction: row;
1374
- }
1375
- .nodesettings_expander {
1407
+ .styled-select__control {
1376
1408
  height: 100%;
1377
- display: flex;
1378
- align-items: center;
1379
- justify-content: center;
1380
- cursor: pointer;
1381
- padding: 3px 3px;
1382
- }
1383
- .nodesettings_content {
1384
- display: flex;
1385
- flex-direction: column;
1386
- flex: 1;
1387
- padding: 0 5px;
1388
- overflow: auto;
1389
- transition: width 0.5s;
1409
+ min-height: initial;
1410
+ min-width: 10px;
1390
1411
  }
1391
- .nodesettings_content.expanded {
1392
- width: 250px;
1412
+ .styled-select__menu-list {
1413
+ max-height: 200px;
1393
1414
  }
1394
- .nodesettings_content.collapsed {
1395
- width: 0;
1415
+ .styled-select__single-value {
1416
+ text-align: start;
1396
1417
  }
1397
- .nodesettings_section {
1398
- margin-bottom: 10px;
1399
- margin-left: 0.5rem;
1418
+ .styled-select__option {
1419
+ text-align: start;
1420
+ padding: 2px 5px;
1400
1421
  }
1401
- .nodesettings_component {
1402
- margin-bottom: 0.5rem;
1403
- margin-left: 0.5rem;
1404
- margin-top: 0.5rem;
1422
+ .styled-select__option:hover {
1423
+ cursor: pointer;
1405
1424
  }
1406
1425
 
1407
1426
  .tablecontainer {
@@ -1429,25 +1448,6 @@ input.nodedatainput.styledinput,
1429
1448
  font-weight: inherit !important;
1430
1449
  }
1431
1450
 
1432
- .styled-select__control {
1433
- height: 100%;
1434
- min-height: initial;
1435
- min-width: 10px;
1436
- }
1437
- .styled-select__menu-list {
1438
- max-height: 200px;
1439
- }
1440
- .styled-select__single-value {
1441
- text-align: start;
1442
- }
1443
- .styled-select__option {
1444
- text-align: start;
1445
- padding: 2px 5px;
1446
- }
1447
- .styled-select__option:hover {
1448
- cursor: pointer;
1449
- }
1450
-
1451
1451
  .colorspace {
1452
1452
  margin: 0.2rem;
1453
1453
  display: grid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@linkdlab/funcnodes_react_flow",
3
- "version": "0.3.12",
3
+ "version": "0.3.14",
4
4
  "description": "Frontend with React Flow for FuncNodes",
5
5
  "repository": {
6
6
  "type": "git",
@@ -15,8 +15,7 @@
15
15
  "type": "module",
16
16
  "source": "src/index.tsx",
17
17
  "main": "dist/umd/index.umd.js",
18
- "main_min": "dist/umd_min/index.min.umd.js",
19
- "module": "dist/esm/index.esm.js",
18
+ "module": "dist/esm/index.esm.mjs",
20
19
  "types": "dist/index.d.ts",
21
20
  "style": "dist/style.css",
22
21
  "files": [
@@ -53,6 +52,7 @@
53
52
  },
54
53
  "devDependencies": {
55
54
  "@babel/core": "^7.26.8",
55
+ "@babel/preset-react": "^7.26.3",
56
56
  "@rollup/plugin-alias": "^5.1.1",
57
57
  "@rollup/plugin-babel": "^6.0.4",
58
58
  "@rollup/plugin-commonjs": "^28.0.2",
@@ -92,4 +92,4 @@
92
92
  "react": "^19.0",
93
93
  "react-dom": "^19.0"
94
94
  }
95
- }
95
+ }