@linkdlab/funcnodes_react_flow 0.3.14 → 0.3.16

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.
@@ -11,94 +11,6 @@
11
11
  stroke: #11ff00;
12
12
  }
13
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
-
102
14
  :root {
103
15
  --expandtime: 0.3s;
104
16
  --libnodebgcolor: #48465f;
@@ -344,6 +256,94 @@
344
256
  color: #0056b3;
345
257
  }
346
258
 
259
+ .dialogoverlay {
260
+ background-color: rgba(0, 0, 0, 0.5);
261
+ position: fixed;
262
+ inset: 0;
263
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
264
+ z-index: 2000;
265
+ }
266
+
267
+ .dialogconent {
268
+ background-color: var(--funcnodesbackground1);
269
+ border-radius: 6px;
270
+ box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
271
+ position: fixed;
272
+ top: 50%;
273
+ left: 50%;
274
+ transform: translate(-50%, -50%);
275
+ width: 90vw;
276
+ max-width: 85vw;
277
+ max-height: 85vh;
278
+ padding: 25px;
279
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
280
+ color: var(--funcnodestextcolor1);
281
+ border: 1px solid var(--funheadercolor);
282
+ display: flex;
283
+ flex-direction: column;
284
+ z-index: 2001;
285
+ }
286
+
287
+ .dialogtitle {
288
+ margin: 0;
289
+ font-weight: 500;
290
+ color: var(--funheadercolor);
291
+ font-size: 17px;
292
+ }
293
+
294
+ .dialogdescription {
295
+ margin: 10px 0 20px;
296
+ font-size: 15px;
297
+ line-height: 1.5;
298
+ }
299
+
300
+ .dialogclosebutton {
301
+ border-radius: 100%;
302
+ height: 25px;
303
+ width: 25px;
304
+ display: inline-flex;
305
+ background-color: inherit;
306
+ align-items: center;
307
+ justify-content: center;
308
+ color: var(--funheadercolor);
309
+ position: absolute;
310
+ top: 10px;
311
+ right: 10px;
312
+ border: none;
313
+ }
314
+ .dialogclosebutton:hover {
315
+ background-color: var(--funheadercolor);
316
+ color: var(--funcnodesbackground1);
317
+ }
318
+ .dialogclosebutton:active {
319
+ background-color: var(--funheadercolor);
320
+ color: var(--funcnodestextcolor1);
321
+ }
322
+
323
+ .dialogsendbutton {
324
+ background-color: var(--funcnodesbackground1);
325
+ color: var(--funheadercolor);
326
+ border: 1px solid var(--funheadercolor);
327
+ border-radius: 99rem;
328
+ padding: 10px 20px;
329
+ cursor: pointer;
330
+ font-size: 15px;
331
+ margin-top: 20px;
332
+ }
333
+ .dialogsendbutton:hover {
334
+ background-color: var(--funheadercolor);
335
+ color: var(--funcnodesbackground1);
336
+ }
337
+ .dialogsendbutton:active {
338
+ background-color: var(--funheadercolor);
339
+ color: var(--funcnodestextcolor1);
340
+ }
341
+
342
+ .dialogchildren {
343
+ margin-top: 20px;
344
+ overflow: auto;
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 {
@@ -902,7 +902,92 @@
902
902
  color: red;
903
903
  }
904
904
 
905
- .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
905
+ .funcnodesflaotingmenu {
906
+ position: absolute;
907
+ right: 0;
908
+ padding: 10px;
909
+ z-index: 1001;
910
+ display: flex;
911
+ flex-direction: row;
912
+ margin-right: 10px;
913
+ }
914
+
915
+ .smooth-expand-expanded {
916
+ position: absolute;
917
+ top: 0;
918
+ left: 0;
919
+ width: 100vw;
920
+ height: 100vh;
921
+ }
922
+
923
+ .funcnodesreactflowheader {
924
+ display: flex;
925
+ flex-direction: row;
926
+ height: 50px;
927
+ justify-content: flex-start;
928
+ position: relative;
929
+ top: 0;
930
+ left: 0;
931
+ z-index: 1000;
932
+ }
933
+ .funcnodesreactflowheader .headerelement {
934
+ height: 100%;
935
+ display: flex;
936
+ align-items: center;
937
+ margin: 4px 4px 4px 4px;
938
+ position: relative;
939
+ white-space: nowrap;
940
+ }
941
+ .funcnodesreactflowheader .statusbar {
942
+ width: 250px;
943
+ height: 1.5rem;
944
+ background-color: var(--funcnodesbackground2);
945
+ display: inline-block;
946
+ margin: 2px 4px 0px 4px;
947
+ position: relative;
948
+ border-radius: 0.5rem;
949
+ overflow: hidden;
950
+ }
951
+ .funcnodesreactflowheader .statusbar-progressbar {
952
+ position: absolute;
953
+ top: 0;
954
+ left: 0;
955
+ width: 0;
956
+ height: 100%;
957
+ background-color: var(--funheadercolor);
958
+ display: inline-block;
959
+ }
960
+ .funcnodesreactflowheader .statusbar-message {
961
+ position: relative;
962
+ top: 0;
963
+ left: 0;
964
+ font-size: 0.8rem;
965
+ color: var(--funheadercolor);
966
+ mix-blend-mode: difference;
967
+ }
968
+
969
+ .headermenucontent {
970
+ max-height: 90vh;
971
+ overflow: auto;
972
+ padding: 5px;
973
+ border-radius: 0.25rem;
974
+ }
975
+
976
+ .headermenuitem {
977
+ padding: 0 5px;
978
+ }
979
+ .headermenuitem[data-highlighted] {
980
+ background-color: var(--funcnodesbackground_light);
981
+ }
982
+ .headermenuitem[data-state=open] {
983
+ background-color: var(--funcnodesbackground_light);
984
+ }
985
+ .headermenuitem[data-state=checked] {
986
+ background-color: var(--funcnodesbackground_light);
987
+ color: #fff;
988
+ }
989
+
990
+ .basicstyleelement, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown, .headermenucontent {
906
991
  background-color: var(--funcnodesbackground1);
907
992
  color: var(--funcnodestextcolor1);
908
993
  border-radius: 0.75rem;
@@ -1031,110 +1116,6 @@ button {
1031
1116
  font-size: inherit;
1032
1117
  }
1033
1118
 
1034
- .funcnodesreactflowheader {
1035
- display: flex;
1036
- flex-direction: row;
1037
- height: 50px;
1038
- justify-content: flex-start;
1039
- position: relative;
1040
- top: 0;
1041
- left: 0;
1042
- z-index: 1000;
1043
- }
1044
- .funcnodesreactflowheader .headerelement {
1045
- height: 100%;
1046
- display: flex;
1047
- align-items: center;
1048
- margin: 4px 4px 4px 4px;
1049
- position: relative;
1050
- white-space: nowrap;
1051
- }
1052
- .funcnodesreactflowheader .statusbar {
1053
- width: 250px;
1054
- height: 1.5rem;
1055
- background-color: var(--funcnodesbackground2);
1056
- display: inline-block;
1057
- margin: 2px 4px 0px 4px;
1058
- position: relative;
1059
- border-radius: 0.5rem;
1060
- overflow: hidden;
1061
- }
1062
- .funcnodesreactflowheader .statusbar-progressbar {
1063
- position: absolute;
1064
- top: 0;
1065
- left: 0;
1066
- width: 0;
1067
- height: 100%;
1068
- background-color: var(--funheadercolor);
1069
- display: inline-block;
1070
- }
1071
- .funcnodesreactflowheader .statusbar-message {
1072
- position: relative;
1073
- top: 0;
1074
- left: 0;
1075
- font-size: 0.8rem;
1076
- color: var(--funheadercolor);
1077
- mix-blend-mode: difference;
1078
- }
1079
-
1080
- .headermenucontent {
1081
- max-height: 90vh;
1082
- overflow: auto;
1083
- padding: 5px;
1084
- border-radius: 0.25rem;
1085
- }
1086
-
1087
- .headermenuitem {
1088
- padding: 0 5px;
1089
- }
1090
- .headermenuitem[data-highlighted] {
1091
- background-color: var(--funcnodesbackground_light);
1092
- }
1093
- .headermenuitem[data-state=open] {
1094
- background-color: var(--funcnodesbackground_light);
1095
- }
1096
- .headermenuitem[data-state=checked] {
1097
- background-color: var(--funcnodesbackground_light);
1098
- color: #fff;
1099
- }
1100
-
1101
- .nodesettings_container {
1102
- height: 100%;
1103
- display: flex;
1104
- flex-direction: row;
1105
- }
1106
- .nodesettings_expander {
1107
- height: 100%;
1108
- display: flex;
1109
- align-items: center;
1110
- justify-content: center;
1111
- cursor: pointer;
1112
- padding: 3px 3px;
1113
- }
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;
1121
- }
1122
- .nodesettings_content.expanded {
1123
- width: 250px;
1124
- }
1125
- .nodesettings_content.collapsed {
1126
- width: 0;
1127
- }
1128
- .nodesettings_section {
1129
- margin-bottom: 10px;
1130
- margin-left: 0.5rem;
1131
- }
1132
- .nodesettings_component {
1133
- margin-bottom: 0.5rem;
1134
- margin-left: 0.5rem;
1135
- margin-top: 0.5rem;
1136
- }
1137
-
1138
1119
  :root {
1139
1120
  --node_border_radius: 5px;
1140
1121
  --handle_outer_radius: 4px;
@@ -1404,25 +1385,6 @@ input.nodedatainput.styledinput,
1404
1385
  transition: width 0.3s ease;
1405
1386
  }
1406
1387
 
1407
- .styled-select__control {
1408
- height: 100%;
1409
- min-height: initial;
1410
- min-width: 10px;
1411
- }
1412
- .styled-select__menu-list {
1413
- max-height: 200px;
1414
- }
1415
- .styled-select__single-value {
1416
- text-align: start;
1417
- }
1418
- .styled-select__option {
1419
- text-align: start;
1420
- padding: 2px 5px;
1421
- }
1422
- .styled-select__option:hover {
1423
- cursor: pointer;
1424
- }
1425
-
1426
1388
  .tablecontainer {
1427
1389
  overflow: auto;
1428
1390
  background-color: white;
@@ -1448,6 +1410,62 @@ input.nodedatainput.styledinput,
1448
1410
  font-weight: inherit !important;
1449
1411
  }
1450
1412
 
1413
+ .nodesettings_container {
1414
+ height: 100%;
1415
+ display: flex;
1416
+ flex-direction: row;
1417
+ }
1418
+ .nodesettings_expander {
1419
+ height: 100%;
1420
+ display: flex;
1421
+ align-items: center;
1422
+ justify-content: center;
1423
+ cursor: pointer;
1424
+ padding: 3px 3px;
1425
+ }
1426
+ .nodesettings_content {
1427
+ display: flex;
1428
+ flex-direction: column;
1429
+ flex: 1;
1430
+ padding: 0 5px;
1431
+ overflow: auto;
1432
+ transition: width 0.5s;
1433
+ }
1434
+ .nodesettings_content.expanded {
1435
+ width: 250px;
1436
+ }
1437
+ .nodesettings_content.collapsed {
1438
+ width: 0;
1439
+ }
1440
+ .nodesettings_section {
1441
+ margin-bottom: 10px;
1442
+ margin-left: 0.5rem;
1443
+ }
1444
+ .nodesettings_component {
1445
+ margin-bottom: 0.5rem;
1446
+ margin-left: 0.5rem;
1447
+ margin-top: 0.5rem;
1448
+ }
1449
+
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
+
1451
1469
  .colorspace {
1452
1470
  margin: 0.2rem;
1453
1471
  display: grid;
package/dist/index.d.ts CHANGED
@@ -6,7 +6,109 @@ import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, useReactFlow } fro
6
6
  type DeepPartial<T> = T extends object ? {
7
7
  [P in keyof T]?: DeepPartial<T[P]>;
8
8
  } : T;
9
- type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
9
+ type Prev = [
10
+ never,
11
+ 0,
12
+ 1,
13
+ 2,
14
+ 3,
15
+ 4,
16
+ 5,
17
+ 6,
18
+ 7,
19
+ 8,
20
+ 9,
21
+ 10,
22
+ 11,
23
+ 12,
24
+ 13,
25
+ 14,
26
+ 15,
27
+ 16,
28
+ 17,
29
+ 18,
30
+ 19,
31
+ 20,
32
+ 21,
33
+ 22,
34
+ 23,
35
+ 24,
36
+ 25,
37
+ 26,
38
+ 27,
39
+ 28,
40
+ 29,
41
+ 30,
42
+ 31,
43
+ 32,
44
+ 33,
45
+ 34,
46
+ 35,
47
+ 36,
48
+ 37,
49
+ 38,
50
+ 39,
51
+ 40,
52
+ 41,
53
+ 42,
54
+ 43,
55
+ 44,
56
+ 45,
57
+ 46,
58
+ 47,
59
+ 48,
60
+ 49,
61
+ 50,
62
+ 51,
63
+ 52,
64
+ 53,
65
+ 54,
66
+ 55,
67
+ 56,
68
+ 57,
69
+ 58,
70
+ 59,
71
+ 60,
72
+ 61,
73
+ 62,
74
+ 63,
75
+ 64,
76
+ 65,
77
+ 66,
78
+ 67,
79
+ 68,
80
+ 69,
81
+ 70,
82
+ 71,
83
+ 72,
84
+ 73,
85
+ 74,
86
+ 75,
87
+ 76,
88
+ 77,
89
+ 78,
90
+ 79,
91
+ 80,
92
+ 81,
93
+ 82,
94
+ 83,
95
+ 84,
96
+ 85,
97
+ 86,
98
+ 87,
99
+ 88,
100
+ 89,
101
+ 90,
102
+ 91,
103
+ 92,
104
+ 93,
105
+ 94,
106
+ 95,
107
+ 96,
108
+ 97,
109
+ 98,
110
+ 99
111
+ ];
10
112
  type LimitedDeepPartial<T, D extends number = 10> = D extends 0 ? T : T extends object ? {
11
113
  [K in keyof T]?: LimitedDeepPartial<T[K], Prev[D]>;
12
114
  } : T;
@@ -639,6 +741,9 @@ interface ReactFlowLayerProps {
639
741
  static: boolean;
640
742
  minZoom: number;
641
743
  maxZoom: number;
744
+ allowFullScreen: boolean;
745
+ allowExpand: boolean;
746
+ showNodeSettings: boolean;
642
747
  }
643
748
  interface FuncnodesReactFlowProps {
644
749
  id: string;
@@ -717,6 +822,6 @@ declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React.JSX.Element;
717
822
 
718
823
  declare const assert_full_node: (node: PartialNodeType) => NodeType;
719
824
 
720
- declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
825
+ declare const FuncNodes: (props: LimitedDeepPartial<FuncnodesReactFlowProps>) => React.JSX.Element;
721
826
 
722
827
  export { type DataOverlayRendererType, type DataPreviewViewRendererType, type DataViewRendererType, FuncNodesContext, FuncNodesReactFlowZustand, type FuncNodesReactFlowZustandInterface, type FuncNodesReactPlugin, FuncNodesWorker, FuncnodesReactFlow, type FuncnodesReactFlowProps, type HandlePreviewRendererType, type IOType, type InputRendererProps, type NodeType, type OutputRendererProps, type PartialNodeType, type ProgressState, ReactFlowLayer, RenderMappingProvider, type RenderPluginFactoryProps, type RendererPlugin, WebSocketWorker, type WorkerProps, assert_full_node, deep_update, FuncNodes as default, helperfunctions };