@linkdlab/funcnodes_react_flow 0.3.13 → 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
- :root {
248
- --funcnodesedgecolor: #7bb3ec;
249
- }
250
-
251
- .funcnodes-edge .react-flow__edge-path {
252
- stroke: var(--funcnodesedgecolor);
253
- stroke-width: 2px;
254
- }
255
- .funcnodes-edge.selected .react-flow__edge-path {
256
- stroke: #11ff00;
257
- }
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 {
@@ -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);
@@ -961,76 +1031,6 @@ button {
961
1031
  font-size: inherit;
962
1032
  }
963
1033
 
964
- :root {
965
- --funheadercolor: #00d9ff;
966
- --funcnodesbackground1: hsl(243, 26%, 13%);
967
- --funcnodesbackground2: hsl(245, 22%, 22%);
968
- --funcnodesbackground_light: hsl(240, 22%, 38%);
969
- --containerboarderradius: 1rem;
970
- --funcnodestextcolor1: #ffffff;
971
- }
972
-
973
- .funcnodescontainer {
974
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
975
- -webkit-font-smoothing: antialiased;
976
- -moz-osx-font-smoothing: grayscale;
977
- }
978
- .funcnodescontainer code {
979
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
980
- }
981
-
982
- .funcnodesreactflowcontainer {
983
- width: 100%;
984
- height: 100%;
985
- background-color: var(--funcnodesbackground1);
986
- position: relative;
987
- display: flex;
988
- flex-direction: column;
989
- color: var(--funcnodestextcolor1);
990
- }
991
- .funcnodesreactflowcontainer * {
992
- box-sizing: border-box;
993
- }
994
-
995
- .funcnodesreactflowbody {
996
- flex-grow: 1;
997
- position: relative;
998
- display: flex;
999
- flex-direction: row;
1000
- overflow: hidden;
1001
- }
1002
-
1003
- .reactflowlayer {
1004
- flex-grow: 1;
1005
- position: relative;
1006
- overflow: hidden;
1007
- background-color: var(--funcnodesbackground2);
1008
- margin: 0.5rem;
1009
- border-radius: var(--containerboarderradius);
1010
- }
1011
-
1012
- .vscrollcontainer {
1013
- overflow-y: auto;
1014
- overflow-x: hidden;
1015
- flex-grow: 1;
1016
- padding: 0.5rem;
1017
- box-sizing: border-box;
1018
- }
1019
-
1020
- .workerselect {
1021
- max-width: 140px;
1022
- }
1023
-
1024
- .workerselectoption.selected {
1025
- color: var(--funcnodestextcolor1);
1026
- }
1027
- .workerselectoption.active {
1028
- color: green;
1029
- }
1030
- .workerselectoption.inactive {
1031
- color: red;
1032
- }
1033
-
1034
1034
  .funcnodesreactflowheader {
1035
1035
  display: flex;
1036
1036
  flex-direction: row;
@@ -1098,6 +1098,43 @@ button {
1098
1098
  color: #fff;
1099
1099
  }
1100
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
+
1101
1138
  :root {
1102
1139
  --node_border_radius: 5px;
1103
1140
  --handle_outer_radius: 4px;
@@ -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/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import React__default, { JSX, ReactElement } from 'react';
2
+ import { JSX, ReactElement } from 'react';
3
3
  import { UseBoundStore, StoreApi } from 'zustand';
4
4
  import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, useReactFlow } from 'reactflow';
5
5
 
@@ -699,8 +699,8 @@ interface FuncNodesReactFlowZustandInterface {
699
699
  logger: Logger;
700
700
  }
701
701
 
702
- declare const FuncNodesContext: React__default.Context<FuncNodesReactFlowZustandInterface>;
703
- declare const FuncnodesReactFlow: (fnprops: Partial<FuncnodesReactFlowProps>) => React__default.JSX.Element;
702
+ declare const FuncNodesContext: React.Context<FuncNodesReactFlowZustandInterface>;
703
+ declare const FuncnodesReactFlow: (fnprops: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
704
704
 
705
705
  declare const helperfunctions: {
706
706
  set_io_value: ({ nid, ioid, value, set_default, }: {
@@ -713,10 +713,10 @@ declare const helperfunctions: {
713
713
 
714
714
  declare const FuncNodesReactFlowZustand: (props: FuncnodesReactFlowProps) => FuncNodesReactFlowZustandInterface;
715
715
 
716
- declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React__default.JSX.Element;
716
+ declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React.JSX.Element;
717
717
 
718
718
  declare const assert_full_node: (node: PartialNodeType) => NodeType;
719
719
 
720
- declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React__default.JSX.Element;
720
+ declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
721
721
 
722
722
  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 };