@linkdlab/funcnodes_react_flow 0.3.15 → 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.
Files changed (9) hide show
  1. package/dist/esm/index.esm.mjs +2 -2
  2. package/dist/esm/index.esm.mjs.map +1 -1
  3. package/dist/esm/style.css +221 -221
  4. package/dist/index.d.ts +105 -2
  5. package/dist/style.css +221 -221
  6. package/dist/umd/index.umd.js +2 -2
  7. package/dist/umd/index.umd.js.map +1 -1
  8. package/dist/umd/style.css +221 -221
  9. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -832,143 +832,6 @@
832
832
  top: 100%;
833
833
  }
834
834
 
835
- .smooth-expand-expanded {
836
- position: absolute;
837
- top: 0;
838
- left: 0;
839
- width: 100vw;
840
- height: 100vh;
841
- }
842
-
843
- .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
844
- background-color: var(--funcnodesbackground1);
845
- color: var(--funcnodestextcolor1);
846
- border-radius: 0.75rem;
847
- border: 1px solid var(--funheadercolor);
848
- }
849
-
850
- .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
851
- height: 2rem;
852
- padding-left: 0.5rem;
853
- padding-right: 0.5rem;
854
- }
855
- .styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
856
- background-color: var(--funcnodesbackground_light);
857
- }
858
- .styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
859
- background-color: var(--funheadercolor);
860
- color: var(--funcnodesbackground1);
861
- }
862
- .styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
863
- outline: 1px solid var(--funheadercolor);
864
- }
865
-
866
- .styleddropdown {
867
- padding-right: 0.25rem;
868
- }
869
-
870
- .styledbtn {
871
- cursor: pointer;
872
- }
873
-
874
- .styledinput :focus {
875
- outline: none;
876
- }
877
-
878
- input[type=number]::-webkit-inner-spin-button,
879
- input[type=number]::-webkit-outer-spin-button {
880
- opacity: 0.5;
881
- background-color: tr;
882
- }
883
-
884
- .styledcheckbox {
885
- height: auto;
886
- accent-color: var(--funheadercolor);
887
- }
888
- .styledcheckbox:focus {
889
- outline: none;
890
- }
891
- .styledcheckbox:after {
892
- content: "";
893
- background-color: var(--funheadercolor);
894
- }
895
- .styledcheckbox.checked {
896
- background-color: var(--funheadercolor);
897
- color: var(--funcnodesbackground1);
898
- }
899
-
900
- .SliderContainer {
901
- display: flex;
902
- align-items: center;
903
- width: 100%;
904
- height: 100%;
905
- min-height: 20px;
906
- }
907
-
908
- .SliderRoot {
909
- position: relative;
910
- display: flex;
911
- align-items: center;
912
- user-select: none;
913
- touch-action: none;
914
- width: 100%;
915
- height: fit-content;
916
- }
917
-
918
- .SliderTrack {
919
- background-color: var(--funcnodesbackground1);
920
- position: relative;
921
- flex-grow: 1;
922
- border-radius: 9999px;
923
- height: 3px;
924
- }
925
-
926
- .SliderRange {
927
- position: absolute;
928
- background-color: var(--funheadercolor);
929
- border-radius: 9999px;
930
- height: 100%;
931
- }
932
-
933
- .SliderThumb {
934
- display: block;
935
- width: 10px;
936
- height: 10px;
937
- background-color: white;
938
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
939
- border-radius: 10px;
940
- }
941
-
942
- .SliderThumb:hover {
943
- background-color: #999;
944
- }
945
-
946
- .SliderThumb:focus {
947
- outline: none;
948
- box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
949
- }
950
-
951
- .styled-select__control {
952
- height: 100%;
953
- min-height: initial;
954
- }
955
- .styled-select__menu-list {
956
- max-height: 200px !important;
957
- padding-left: 0;
958
- height: initial;
959
- }
960
- .styled-select__menu {
961
- margin-left: -0.5rem;
962
- }
963
- .styled-select__option:hover {
964
- background-color: var(--funcnodesbackground_light);
965
- }
966
-
967
- button {
968
- font-family: inherit;
969
- font-size: inherit;
970
- }
971
-
972
835
  :root {
973
836
  --funheadercolor: #00d9ff;
974
837
  --funcnodesbackground1: hsl(243, 26%, 13%);
@@ -1049,6 +912,14 @@ button {
1049
912
  margin-right: 10px;
1050
913
  }
1051
914
 
915
+ .smooth-expand-expanded {
916
+ position: absolute;
917
+ top: 0;
918
+ left: 0;
919
+ width: 100vw;
920
+ height: 100vh;
921
+ }
922
+
1052
923
  .funcnodesreactflowheader {
1053
924
  display: flex;
1054
925
  flex-direction: row;
@@ -1116,118 +987,133 @@ button {
1116
987
  color: #fff;
1117
988
  }
1118
989
 
1119
- .nodesettings_container {
1120
- height: 100%;
1121
- display: flex;
1122
- flex-direction: row;
990
+ .basicstyleelement, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown, .headermenucontent {
991
+ background-color: var(--funcnodesbackground1);
992
+ color: var(--funcnodestextcolor1);
993
+ border-radius: 0.75rem;
994
+ border: 1px solid var(--funheadercolor);
1123
995
  }
1124
- .nodesettings_expander {
1125
- height: 100%;
1126
- display: flex;
1127
- align-items: center;
1128
- justify-content: center;
996
+
997
+ .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
998
+ height: 2rem;
999
+ padding-left: 0.5rem;
1000
+ padding-right: 0.5rem;
1001
+ }
1002
+ .styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
1003
+ background-color: var(--funcnodesbackground_light);
1004
+ }
1005
+ .styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
1006
+ background-color: var(--funheadercolor);
1007
+ color: var(--funcnodesbackground1);
1008
+ }
1009
+ .styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
1010
+ outline: 1px solid var(--funheadercolor);
1011
+ }
1012
+
1013
+ .styleddropdown {
1014
+ padding-right: 0.25rem;
1015
+ }
1016
+
1017
+ .styledbtn {
1129
1018
  cursor: pointer;
1130
- padding: 3px 3px;
1131
1019
  }
1132
- .nodesettings_content {
1133
- display: flex;
1134
- flex-direction: column;
1135
- flex: 1;
1136
- padding: 0 5px;
1137
- overflow: auto;
1138
- transition: width 0.5s;
1020
+
1021
+ .styledinput :focus {
1022
+ outline: none;
1139
1023
  }
1140
- .nodesettings_content.expanded {
1141
- width: 250px;
1024
+
1025
+ input[type=number]::-webkit-inner-spin-button,
1026
+ input[type=number]::-webkit-outer-spin-button {
1027
+ opacity: 0.5;
1028
+ background-color: tr;
1142
1029
  }
1143
- .nodesettings_content.collapsed {
1144
- width: 0;
1030
+
1031
+ .styledcheckbox {
1032
+ height: auto;
1033
+ accent-color: var(--funheadercolor);
1145
1034
  }
1146
- .nodesettings_section {
1147
- margin-bottom: 10px;
1148
- margin-left: 0.5rem;
1035
+ .styledcheckbox:focus {
1036
+ outline: none;
1149
1037
  }
1150
- .nodesettings_component {
1151
- margin-bottom: 0.5rem;
1152
- margin-left: 0.5rem;
1153
- margin-top: 0.5rem;
1038
+ .styledcheckbox:after {
1039
+ content: "";
1040
+ background-color: var(--funheadercolor);
1041
+ }
1042
+ .styledcheckbox.checked {
1043
+ background-color: var(--funheadercolor);
1044
+ color: var(--funcnodesbackground1);
1154
1045
  }
1155
1046
 
1156
- .tablecontainer {
1157
- overflow: auto;
1158
- background-color: white;
1159
- min-height: 20rem;
1047
+ .SliderContainer {
1048
+ display: flex;
1049
+ align-items: center;
1050
+ width: 100%;
1051
+ height: 100%;
1052
+ min-height: 20px;
1160
1053
  }
1161
1054
 
1162
- .tableHead {
1163
- color: var(--funheadercolor) !important;
1055
+ .SliderRoot {
1056
+ position: relative;
1057
+ display: flex;
1058
+ align-items: center;
1059
+ user-select: none;
1060
+ touch-action: none;
1061
+ width: 100%;
1062
+ height: fit-content;
1063
+ }
1064
+
1065
+ .SliderTrack {
1164
1066
  background-color: var(--funcnodesbackground1);
1165
- font-weight: bold !important;
1067
+ position: relative;
1068
+ flex-grow: 1;
1069
+ border-radius: 9999px;
1070
+ height: 3px;
1166
1071
  }
1167
1072
 
1168
- .tableheadercolor {
1169
- color: inherit !important;
1170
- font-family: inherit !important;
1171
- font-weight: inherit !important;
1073
+ .SliderRange {
1074
+ position: absolute;
1075
+ background-color: var(--funheadercolor);
1076
+ border-radius: 9999px;
1077
+ height: 100%;
1172
1078
  }
1173
1079
 
1174
- .indexcol {
1175
- background-color: var(--funcnodesbackground2);
1176
- color: var(--funheadercolor) !important;
1177
- font-family: inherit !important;
1178
- font-weight: inherit !important;
1080
+ .SliderThumb {
1081
+ display: block;
1082
+ width: 10px;
1083
+ height: 10px;
1084
+ background-color: white;
1085
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
1086
+ border-radius: 10px;
1087
+ }
1088
+
1089
+ .SliderThumb:hover {
1090
+ background-color: #999;
1091
+ }
1092
+
1093
+ .SliderThumb:focus {
1094
+ outline: none;
1095
+ box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
1179
1096
  }
1180
1097
 
1181
1098
  .styled-select__control {
1182
1099
  height: 100%;
1183
1100
  min-height: initial;
1184
- min-width: 10px;
1185
1101
  }
1186
1102
  .styled-select__menu-list {
1187
- max-height: 200px;
1188
- }
1189
- .styled-select__single-value {
1190
- text-align: start;
1103
+ max-height: 200px !important;
1104
+ padding-left: 0;
1105
+ height: initial;
1191
1106
  }
1192
- .styled-select__option {
1193
- text-align: start;
1194
- padding: 2px 5px;
1107
+ .styled-select__menu {
1108
+ margin-left: -0.5rem;
1195
1109
  }
1196
1110
  .styled-select__option:hover {
1197
- cursor: pointer;
1111
+ background-color: var(--funcnodesbackground_light);
1198
1112
  }
1199
1113
 
1200
- .colorspace {
1201
- margin: 0.2rem;
1202
- display: grid;
1203
- grid-template-columns: auto minmax(0, 1fr);
1204
- }
1205
- .colorspace_title {
1206
- font-size: 0.7em;
1207
- font-weight: bold;
1208
- }
1209
- .colorspace label {
1210
- font-size: 0.7rem;
1211
- }
1212
- .colorspace input {
1213
- font-size: 0.7rem;
1214
- max-height: 0.7rem;
1215
- }
1216
- .colorspace input[type=range] {
1217
- width: 100%;
1218
- margin: 0;
1219
- padding: 0;
1220
- -webkit-appearance: none;
1221
- background-color: #666;
1222
- height: 0.7rem;
1223
- border-radius: 5px;
1224
- }
1225
- .colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
1226
- width: 0.7rem;
1227
- height: 0.7rem;
1228
- background-color: #cc1c1c;
1229
- border-radius: 50%;
1230
- cursor: pointer;
1114
+ button {
1115
+ font-family: inherit;
1116
+ font-size: inherit;
1231
1117
  }
1232
1118
 
1233
1119
  :root {
@@ -1499,6 +1385,120 @@ input.nodedatainput.styledinput,
1499
1385
  transition: width 0.3s ease;
1500
1386
  }
1501
1387
 
1388
+ .tablecontainer {
1389
+ overflow: auto;
1390
+ background-color: white;
1391
+ min-height: 20rem;
1392
+ }
1393
+
1394
+ .tableHead {
1395
+ color: var(--funheadercolor) !important;
1396
+ background-color: var(--funcnodesbackground1);
1397
+ font-weight: bold !important;
1398
+ }
1399
+
1400
+ .tableheadercolor {
1401
+ color: inherit !important;
1402
+ font-family: inherit !important;
1403
+ font-weight: inherit !important;
1404
+ }
1405
+
1406
+ .indexcol {
1407
+ background-color: var(--funcnodesbackground2);
1408
+ color: var(--funheadercolor) !important;
1409
+ font-family: inherit !important;
1410
+ font-weight: inherit !important;
1411
+ }
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
+
1469
+ .colorspace {
1470
+ margin: 0.2rem;
1471
+ display: grid;
1472
+ grid-template-columns: auto minmax(0, 1fr);
1473
+ }
1474
+ .colorspace_title {
1475
+ font-size: 0.7em;
1476
+ font-weight: bold;
1477
+ }
1478
+ .colorspace label {
1479
+ font-size: 0.7rem;
1480
+ }
1481
+ .colorspace input {
1482
+ font-size: 0.7rem;
1483
+ max-height: 0.7rem;
1484
+ }
1485
+ .colorspace input[type=range] {
1486
+ width: 100%;
1487
+ margin: 0;
1488
+ padding: 0;
1489
+ -webkit-appearance: none;
1490
+ background-color: #666;
1491
+ height: 0.7rem;
1492
+ border-radius: 5px;
1493
+ }
1494
+ .colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
1495
+ width: 0.7rem;
1496
+ height: 0.7rem;
1497
+ background-color: #cc1c1c;
1498
+ border-radius: 50%;
1499
+ cursor: pointer;
1500
+ }
1501
+
1502
1502
  s slideUpAndFade from {
1503
1503
  opacity: 0;
1504
1504
  transform: translateY(2px);