@linkdlab/funcnodes_react_flow 0.3.15 → 0.3.17

package/dist/esm/style.css

@@ -11,6 +11,94 @@
   stroke: #11ff00;
 }
 
+.dialogoverlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2000;
+}
+
+.dialogconent {
+  background-color: var(--funcnodesbackground1);
+  border-radius: 6px;
+  box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 85vw;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  color: var(--funcnodestextcolor1);
+  border: 1px solid var(--funheadercolor);
+  display: flex;
+  flex-direction: column;
+  z-index: 2001;
+}
+
+.dialogtitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--funheadercolor);
+  font-size: 17px;
+}
+
+.dialogdescription {
+  margin: 10px 0 20px;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.dialogclosebutton {
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  background-color: inherit;
+  align-items: center;
+  justify-content: center;
+  color: var(--funheadercolor);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: none;
+}
+.dialogclosebutton:hover {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
+}
+.dialogclosebutton:active {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodestextcolor1);
+}
+
+.dialogsendbutton {
+  background-color: var(--funcnodesbackground1);
+  color: var(--funheadercolor);
+  border: 1px solid var(--funheadercolor);
+  border-radius: 99rem;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 15px;
+  margin-top: 20px;
+}
+.dialogsendbutton:hover {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodesbackground1);
+}
+.dialogsendbutton:active {
+  background-color: var(--funheadercolor);
+  color: var(--funcnodestextcolor1);
+}
+
+.dialogchildren {
+  margin-top: 20px;
+  overflow: auto;
+}
+
 :root {
   --expandtime: 0.3s;
   --libnodebgcolor: #48465f;
@@ -20,7 +108,7 @@
 .libcontainer {
   top: 0;
   left: 0;
-  height: 100%;
+  min-height: 100%;
   padding: 0.5rem;
   box-sizing: border-box;
   display: flex;
@@ -256,94 +344,6 @@
   color: #0056b3;
 }
 
-.dialogoverlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  inset: 0;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 2000;
-}
-
-.dialogconent {
-  background-color: var(--funcnodesbackground1);
-  border-radius: 6px;
-  box-shadow: var(--funheadercolor) 0px 10px 38px -10px, var(--funheadercolor) 0px 10px 20px -15px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 85vw;
-  max-height: 85vh;
-  padding: 25px;
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  color: var(--funcnodestextcolor1);
-  border: 1px solid var(--funheadercolor);
-  display: flex;
-  flex-direction: column;
-  z-index: 2001;
-}
-
-.dialogtitle {
-  margin: 0;
-  font-weight: 500;
-  color: var(--funheadercolor);
-  font-size: 17px;
-}
-
-.dialogdescription {
-  margin: 10px 0 20px;
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.dialogclosebutton {
-  border-radius: 100%;
-  height: 25px;
-  width: 25px;
-  display: inline-flex;
-  background-color: inherit;
-  align-items: center;
-  justify-content: center;
-  color: var(--funheadercolor);
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border: none;
-}
-.dialogclosebutton:hover {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-.dialogclosebutton:active {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodestextcolor1);
-}
-
-.dialogsendbutton {
-  background-color: var(--funcnodesbackground1);
-  color: var(--funheadercolor);
-  border: 1px solid var(--funheadercolor);
-  border-radius: 99rem;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 15px;
-  margin-top: 20px;
-}
-.dialogsendbutton:hover {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodesbackground1);
-}
-.dialogsendbutton:active {
-  background-color: var(--funheadercolor);
-  color: var(--funcnodestextcolor1);
-}
-
-.dialogchildren {
-  margin-top: 20px;
-  overflow: auto;
-}
-
 /* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow {
@@ -832,14 +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);
@@ -969,6 +961,14 @@ button {
   font-size: inherit;
 }
 
+.smooth-expand-expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 :root {
   --funheadercolor: #00d9ff;
   --funcnodesbackground1: hsl(243, 26%, 13%);
@@ -976,6 +976,7 @@ button {
   --funcnodesbackground_light: hsl(240, 22%, 38%);
   --containerboarderradius: 1rem;
   --funcnodestextcolor1: #ffffff;
+  --funcnodes-z-index: 1000;
 }
 
 .funcnodescontainer {
@@ -990,6 +991,8 @@ button {
 .funcnodesreactflowcontainer {
   width: 100%;
   height: 100%;
+  flex-grow: 1;
+  z-index: var(--funcnodes-z-index);
   background-color: var(--funcnodesbackground1);
   position: relative;
   display: flex;
@@ -1043,12 +1046,20 @@ button {
   position: absolute;
   right: 0;
   padding: 10px;
-  z-index: 1001;
+  z-index: 2;
   display: flex;
   flex-direction: row;
   margin-right: 10px;
 }
 
+.FuncnodesApp {
+  height: 100%;
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .funcnodesreactflowheader {
   display: flex;
   flex-direction: row;
@@ -1057,7 +1068,7 @@ button {
   position: relative;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1;
 }
 .funcnodesreactflowheader .headerelement {
   height: 100%;
@@ -1117,12 +1128,12 @@ button {
 }
 
 .nodesettings_container {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: row;
 }
 .nodesettings_expander {
-  height: 100%;
+  min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1153,83 +1164,6 @@ button {
   margin-top: 0.5rem;
 }
 
-.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;
-}
-
-.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;
-}
-
 :root {
   --node_border_radius: 5px;
   --handle_outer_radius: 4px;
@@ -1499,6 +1433,83 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
+.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;
+}
+
+.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;
+}
+
+.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;
@@ -58,7 +160,6 @@ interface TypeOf {
 }
 type SerializedType = string | AllOf | AnyOf | ArrayOf | DictOf | EnumOf | TypeOf;
 interface IORenderOptions extends BaseRenderOptions {
-    step?: number;
     set_default: boolean;
 }
 interface IOValueOptions {
@@ -221,6 +322,10 @@ interface WorkerProps {
 interface FuncNodesWorkerState {
     is_open: boolean;
 }
+interface HookProperties {
+    worker: FuncNodesWorker;
+    data: any;
+}
 declare class FuncNodesWorker {
     messagePromises: Map<string, any>;
     _zustand?: FuncNodesReactFlowZustandInterface;
@@ -229,9 +334,15 @@ declare class FuncNodesWorker {
     uuid: string;
     state: UseBoundStore<StoreApi<FuncNodesWorkerState>>;
     on_sync_complete: (worker: FuncNodesWorker) => Promise<void>;
+    _hooks: Map<string, ((p: HookProperties) => Promise<void>)[]>;
+    _ns_event_intercepts: Map<string, ((event: NodeSpaceEvent) => Promise<NodeSpaceEvent>)[]>;
     on_error: (error: any) => void;
     constructor(data: WorkerProps);
     set_zustand(zustand: FuncNodesReactFlowZustandInterface): void;
+    add_hook(hook: string, callback: (p: HookProperties) => Promise<void>): () => void;
+    call_hooks(hook: string, data?: any): Promise<void>;
+    add_ns_event_intercept(hook: string, callback: (event: NodeSpaceEvent) => Promise<NodeSpaceEvent>): () => void;
+    intercept_ns_event(event: NodeSpaceEvent): Promise<NodeSpaceEvent>;
     get is_open(): boolean;
     set is_open(v: boolean);
     stepwise_fullsync(): Promise<void>;
@@ -285,6 +396,7 @@ declare class FuncNodesWorker {
     }): Promise<{
         [ioid: string]: any;
     }>;
+    get_runstate(): Promise<any>;
     _send_cmd({ cmd, kwargs, wait_for_response, response_timeout, retries, }: {
         cmd: string;
         kwargs?: any;
@@ -300,7 +412,7 @@ declare class FuncNodesWorker {
     }): Promise<string[]>;
     handle_large_message_hint({}: LargeMessageHint): Promise<void>;
     receive_workerevent({ event, data }: WorkerEvent): Promise<void>;
-    receive_nodespace_event({ event, data }: NodeSpaceEvent): Promise<void>;
+    receive_nodespace_event(ns_event: NodeSpaceEvent): Promise<void>;
     add_lib(lib: string, release: string): Promise<any>;
     remove_lib(lib: string): Promise<any>;
     receive(data: JSONMessage): Promise<any>;
@@ -641,6 +753,7 @@ interface ReactFlowLayerProps {
     maxZoom: number;
     allowFullScreen: boolean;
     allowExpand: boolean;
+    showNodeSettings: boolean;
 }
 interface FuncnodesReactFlowProps {
     id: string;
@@ -697,6 +810,7 @@ interface FuncNodesReactFlowZustandInterface {
     add_plugin: (name: string, plugin: FuncNodesReactPlugin) => void;
     reactflowRef: HTMLDivElement | null;
     clear_all: () => void;
+    center_node: (node_id: string | string[]) => void;
     dev_settings: DevSettings;
     logger: Logger;
 }
@@ -719,6 +833,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 };