@linkdlab/funcnodes_react_flow 0.3.15 → 0.3.16

package/dist/esm/style.css

@@ -832,143 +832,6 @@
   top: 100%;
 }
 
-.smooth-expand-expanded {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-.basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
-  background-color: var(--funcnodesbackground1);
-  color: var(--funcnodestextcolor1);
-  border-radius: 0.75rem;
-  border: 1px solid var(--funheadercolor);
-}
-
-.styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
-  height: 2rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
-  background-color: var(--funcnodesbackground_light);
-}
-.styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-.styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
-  outline: 1px solid var(--funheadercolor);
-}
-
-.styleddropdown {
-  padding-right: 0.25rem;
-}
-
-.styledbtn {
-  cursor: pointer;
-}
-
-.styledinput :focus {
-  outline: none;
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  opacity: 0.5;
-  background-color: tr;
-}
-
-.styledcheckbox {
-  height: auto;
-  accent-color: var(--funheadercolor);
-}
-.styledcheckbox:focus {
-  outline: none;
-}
-.styledcheckbox:after {
-  content: "";
-  background-color: var(--funheadercolor);
-}
-.styledcheckbox.checked {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-
-.SliderContainer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 20px;
-}
-
-.SliderRoot {
-  position: relative;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  touch-action: none;
-  width: 100%;
-  height: fit-content;
-}
-
-.SliderTrack {
-  background-color: var(--funcnodesbackground1);
-  position: relative;
-  flex-grow: 1;
-  border-radius: 9999px;
-  height: 3px;
-}
-
-.SliderRange {
-  position: absolute;
-  background-color: var(--funheadercolor);
-  border-radius: 9999px;
-  height: 100%;
-}
-
-.SliderThumb {
-  display: block;
-  width: 10px;
-  height: 10px;
-  background-color: white;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
-  border-radius: 10px;
-}
-
-.SliderThumb:hover {
-  background-color: #999;
-}
-
-.SliderThumb:focus {
-  outline: none;
-  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
-}
-
-.styled-select__control {
-  height: 100%;
-  min-height: initial;
-}
-.styled-select__menu-list {
-  max-height: 200px !important;
-  padding-left: 0;
-  height: initial;
-}
-.styled-select__menu {
-  margin-left: -0.5rem;
-}
-.styled-select__option:hover {
-  background-color: var(--funcnodesbackground_light);
-}
-
-button {
-  font-family: inherit;
-  font-size: inherit;
-}
-
 :root {
   --funheadercolor: #00d9ff;
   --funcnodesbackground1: hsl(243, 26%, 13%);
@@ -1049,6 +912,14 @@ button {
   margin-right: 10px;
 }
 
+.smooth-expand-expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 .funcnodesreactflowheader {
   display: flex;
   flex-direction: row;
@@ -1116,118 +987,133 @@ button {
   color: #fff;
 }
 
-.nodesettings_container {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
+.basicstyleelement, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown, .headermenucontent {
+  background-color: var(--funcnodesbackground1);
+  color: var(--funcnodestextcolor1);
+  border-radius: 0.75rem;
+  border: 1px solid var(--funheadercolor);
 }
-.nodesettings_expander {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
+.styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
+  height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.styleelement:hover, .styledcheckbox:hover, .styledinput:hover, .styledbtn:hover, .styleddropdown:hover {
+  background-color: var(--funcnodesbackground_light);
+}
+.styleelement:active, .styledcheckbox:active, .styledinput:active, .styledbtn:active, .styleddropdown:active {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
+}
+.styleelement:focus, .styledcheckbox:focus, .styledinput:focus, .styledbtn:focus, .styleddropdown:focus {
+  outline: 1px solid var(--funheadercolor);
+}
+
+.styleddropdown {
+  padding-right: 0.25rem;
+}
+
+.styledbtn {
   cursor: pointer;
-  padding: 3px 3px;
 }
-.nodesettings_content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 0 5px;
-  overflow: auto;
-  transition: width 0.5s;
+
+.styledinput :focus {
+  outline: none;
 }
-.nodesettings_content.expanded {
-  width: 250px;
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  opacity: 0.5;
+  background-color: tr;
 }
-.nodesettings_content.collapsed {
-  width: 0;
+
+.styledcheckbox {
+  height: auto;
+  accent-color: var(--funheadercolor);
 }
-.nodesettings_section {
-  margin-bottom: 10px;
-  margin-left: 0.5rem;
+.styledcheckbox:focus {
+  outline: none;
 }
-.nodesettings_component {
-  margin-bottom: 0.5rem;
-  margin-left: 0.5rem;
-  margin-top: 0.5rem;
+.styledcheckbox:after {
+  content: "";
+  background-color: var(--funheadercolor);
+}
+.styledcheckbox.checked {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
 }
 
-.tablecontainer {
-  overflow: auto;
-  background-color: white;
-  min-height: 20rem;
+.SliderContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 20px;
 }
 
-.tableHead {
-  color: var(--funheadercolor) !important;
+.SliderRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 100%;
+  height: fit-content;
+}
+
+.SliderTrack {
   background-color: var(--funcnodesbackground1);
-  font-weight: bold !important;
+  position: relative;
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 3px;
 }
 
-.tableheadercolor {
-  color: inherit !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
+.SliderRange {
+  position: absolute;
+  background-color: var(--funheadercolor);
+  border-radius: 9999px;
+  height: 100%;
 }
 
-.indexcol {
-  background-color: var(--funcnodesbackground2);
-  color: var(--funheadercolor) !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
+.SliderThumb {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: white;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3333333333);
+  border-radius: 10px;
+}
+
+.SliderThumb:hover {
+  background-color: #999;
+}
+
+.SliderThumb:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3333333333);
 }
 
 .styled-select__control {
   height: 100%;
   min-height: initial;
-  min-width: 10px;
 }
 .styled-select__menu-list {
-  max-height: 200px;
-}
-.styled-select__single-value {
-  text-align: start;
+  max-height: 200px !important;
+  padding-left: 0;
+  height: initial;
 }
-.styled-select__option {
-  text-align: start;
-  padding: 2px 5px;
+.styled-select__menu {
+  margin-left: -0.5rem;
 }
 .styled-select__option:hover {
-  cursor: pointer;
+  background-color: var(--funcnodesbackground_light);
 }
 
-.colorspace {
-  margin: 0.2rem;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-}
-.colorspace_title {
-  font-size: 0.7em;
-  font-weight: bold;
-}
-.colorspace label {
-  font-size: 0.7rem;
-}
-.colorspace input {
-  font-size: 0.7rem;
-  max-height: 0.7rem;
-}
-.colorspace input[type=range] {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  -webkit-appearance: none;
-  background-color: #666;
-  height: 0.7rem;
-  border-radius: 5px;
-}
-.colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
-  width: 0.7rem;
-  height: 0.7rem;
-  background-color: #cc1c1c;
-  border-radius: 50%;
-  cursor: pointer;
+button {
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :root {
@@ -1499,6 +1385,120 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
+.tablecontainer {
+  overflow: auto;
+  background-color: white;
+  min-height: 20rem;
+}
+
+.tableHead {
+  color: var(--funheadercolor) !important;
+  background-color: var(--funcnodesbackground1);
+  font-weight: bold !important;
+}
+
+.tableheadercolor {
+  color: inherit !important;
+  font-family: inherit !important;
+  font-weight: inherit !important;
+}
+
+.indexcol {
+  background-color: var(--funcnodesbackground2);
+  color: var(--funheadercolor) !important;
+  font-family: inherit !important;
+  font-weight: inherit !important;
+}
+
+.nodesettings_container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.nodesettings_expander {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 3px 3px;
+}
+.nodesettings_content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 5px;
+  overflow: auto;
+  transition: width 0.5s;
+}
+.nodesettings_content.expanded {
+  width: 250px;
+}
+.nodesettings_content.collapsed {
+  width: 0;
+}
+.nodesettings_section {
+  margin-bottom: 10px;
+  margin-left: 0.5rem;
+}
+.nodesettings_component {
+  margin-bottom: 0.5rem;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.styled-select__control {
+  height: 100%;
+  min-height: initial;
+  min-width: 10px;
+}
+.styled-select__menu-list {
+  max-height: 200px;
+}
+.styled-select__single-value {
+  text-align: start;
+}
+.styled-select__option {
+  text-align: start;
+  padding: 2px 5px;
+}
+.styled-select__option:hover {
+  cursor: pointer;
+}
+
+.colorspace {
+  margin: 0.2rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.colorspace_title {
+  font-size: 0.7em;
+  font-weight: bold;
+}
+.colorspace label {
+  font-size: 0.7rem;
+}
+.colorspace input {
+  font-size: 0.7rem;
+  max-height: 0.7rem;
+}
+.colorspace input[type=range] {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-appearance: none;
+  background-color: #666;
+  height: 0.7rem;
+  border-radius: 5px;
+}
+.colorspace input[type=range]::-webkit-slider-thumb, .colorspace input[type=range]::-webkit-range-thumb, .colorspace input[type=range]::-moz-range-thumb {
+  width: 0.7rem;
+  height: 0.7rem;
+  background-color: #cc1c1c;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
 s slideUpAndFade from {
   opacity: 0;
   transform: translateY(2px);

package/dist/index.d.ts

@@ -6,7 +6,109 @@ import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, useReactFlow } fro
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
-type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type Prev = [
+    never,
+    0,
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    13,
+    14,
+    15,
+    16,
+    17,
+    18,
+    19,
+    20,
+    21,
+    22,
+    23,
+    24,
+    25,
+    26,
+    27,
+    28,
+    29,
+    30,
+    31,
+    32,
+    33,
+    34,
+    35,
+    36,
+    37,
+    38,
+    39,
+    40,
+    41,
+    42,
+    43,
+    44,
+    45,
+    46,
+    47,
+    48,
+    49,
+    50,
+    51,
+    52,
+    53,
+    54,
+    55,
+    56,
+    57,
+    58,
+    59,
+    60,
+    61,
+    62,
+    63,
+    64,
+    65,
+    66,
+    67,
+    68,
+    69,
+    70,
+    71,
+    72,
+    73,
+    74,
+    75,
+    76,
+    77,
+    78,
+    79,
+    80,
+    81,
+    82,
+    83,
+    84,
+    85,
+    86,
+    87,
+    88,
+    89,
+    90,
+    91,
+    92,
+    93,
+    94,
+    95,
+    96,
+    97,
+    98,
+    99
+];
 type LimitedDeepPartial<T, D extends number = 10> = D extends 0 ? T : T extends object ? {
     [K in keyof T]?: LimitedDeepPartial<T[K], Prev[D]>;
 } : T;
@@ -641,6 +743,7 @@ interface ReactFlowLayerProps {
     maxZoom: number;
     allowFullScreen: boolean;
     allowExpand: boolean;
+    showNodeSettings: boolean;
 }
 interface FuncnodesReactFlowProps {
     id: string;
@@ -719,6 +822,6 @@ declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React.JSX.Element;
 
 declare const assert_full_node: (node: PartialNodeType) => NodeType;
 
-declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
+declare const FuncNodes: (props: LimitedDeepPartial<FuncnodesReactFlowProps>) => React.JSX.Element;
 
 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 };