@linkdlab/funcnodes_react_flow 0.3.12 → 0.3.14

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { JSX, ReactElement } from 'react';
+import { JSX, ReactElement } from 'react';
 import { UseBoundStore, StoreApi } from 'zustand';
 import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, useReactFlow } from 'reactflow';
 
@@ -699,8 +699,8 @@ interface FuncNodesReactFlowZustandInterface {
     logger: Logger;
 }
 
-declare const FuncNodesContext: React__default.Context<FuncNodesReactFlowZustandInterface>;
-declare const FuncnodesReactFlow: (fnprops: Partial<FuncnodesReactFlowProps>) => React__default.JSX.Element;
+declare const FuncNodesContext: React.Context<FuncNodesReactFlowZustandInterface>;
+declare const FuncnodesReactFlow: (fnprops: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
 
 declare const helperfunctions: {
     set_io_value: ({ nid, ioid, value, set_default, }: {
@@ -713,10 +713,10 @@ declare const helperfunctions: {
 
 declare const FuncNodesReactFlowZustand: (props: FuncnodesReactFlowProps) => FuncNodesReactFlowZustandInterface;
 
-declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React__default.JSX.Element;
+declare const ReactFlowLayer: (props: ReactFlowLayerProps) => React.JSX.Element;
 
 declare const assert_full_node: (node: PartialNodeType) => NodeType;
 
-declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React__default.JSX.Element;
+declare const FuncNodes: (props: Partial<FuncnodesReactFlowProps>) => React.JSX.Element;
 
-export { type DataOverlayRendererType, type DataPreviewViewRendererType, type DataViewRendererType, FuncNodes, FuncNodesContext, FuncNodesReactFlowZustand, type FuncNodesReactFlowZustandInterface, type FuncNodesReactPlugin, FuncNodesWorker, 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, FuncnodesReactFlow as default, helperfunctions };
+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 };

package/dist/style.css

@@ -1,4 +1,104 @@
 @charset "UTF-8";
+:root {
+  --funcnodesedgecolor: #7bb3ec;
+}
+
+.funcnodes-edge .react-flow__edge-path {
+  stroke: var(--funcnodesedgecolor);
+  stroke-width: 2px;
+}
+.funcnodes-edge.selected .react-flow__edge-path {
+  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;
@@ -244,106 +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;
-}
-
-:root {
-  --funcnodesedgecolor: #7bb3ec;
-}
-
-.funcnodes-edge .react-flow__edge-path {
-  stroke: var(--funcnodesedgecolor);
-  stroke-width: 2px;
-}
-.funcnodes-edge.selected .react-flow__edge-path {
-  stroke: #11ff00;
-}
-
 /* 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,6 +832,76 @@
   top: 100%;
 }
 
+:root {
+  --funheadercolor: #00d9ff;
+  --funcnodesbackground1: hsl(243, 26%, 13%);
+  --funcnodesbackground2: hsl(245, 22%, 22%);
+  --funcnodesbackground_light: hsl(240, 22%, 38%);
+  --containerboarderradius: 1rem;
+  --funcnodestextcolor1: #ffffff;
+}
+
+.funcnodescontainer {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.funcnodescontainer code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.funcnodesreactflowcontainer {
+  width: 100%;
+  height: 100%;
+  background-color: var(--funcnodesbackground1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: var(--funcnodestextcolor1);
+}
+.funcnodesreactflowcontainer * {
+  box-sizing: border-box;
+}
+
+.funcnodesreactflowbody {
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.reactflowlayer {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--funcnodesbackground2);
+  margin: 0.5rem;
+  border-radius: var(--containerboarderradius);
+}
+
+.vscrollcontainer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+
+.workerselect {
+  max-width: 140px;
+}
+
+.workerselectoption.selected {
+  color: var(--funcnodestextcolor1);
+}
+.workerselectoption.active {
+  color: green;
+}
+.workerselectoption.inactive {
+  color: red;
+}
+
 .basicstyleelement, .headermenucontent, .styled-select__menu, .styleelement, .styledcheckbox, .styledinput, .styledbtn, .styleddropdown {
   background-color: var(--funcnodesbackground1);
   color: var(--funcnodestextcolor1);
@@ -1028,74 +1098,41 @@ button {
   color: #fff;
 }
 
-:root {
-  --funheadercolor: #00d9ff;
-  --funcnodesbackground1: hsl(243, 26%, 13%);
-  --funcnodesbackground2: hsl(245, 22%, 22%);
-  --funcnodesbackground_light: hsl(240, 22%, 38%);
-  --containerboarderradius: 1rem;
-  --funcnodestextcolor1: #ffffff;
-}
-
-.funcnodescontainer {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.funcnodescontainer code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-.funcnodesreactflowcontainer {
-  width: 100%;
+.nodesettings_container {
   height: 100%;
-  background-color: var(--funcnodesbackground1);
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: var(--funcnodestextcolor1);
-}
-.funcnodesreactflowcontainer * {
-  box-sizing: border-box;
-}
-
-.funcnodesreactflowbody {
-  flex-grow: 1;
-  position: relative;
   display: flex;
   flex-direction: row;
-  overflow: hidden;
 }
-
-.reactflowlayer {
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-  background-color: var(--funcnodesbackground2);
-  margin: 0.5rem;
-  border-radius: var(--containerboarderradius);
+.nodesettings_expander {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 3px 3px;
 }
-
-.vscrollcontainer {
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex-grow: 1;
-  padding: 0.5rem;
-  box-sizing: border-box;
+.nodesettings_content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0 5px;
+  overflow: auto;
+  transition: width 0.5s;
 }
-
-.workerselect {
-  max-width: 140px;
+.nodesettings_content.expanded {
+  width: 250px;
 }
-
-.workerselectoption.selected {
-  color: var(--funcnodestextcolor1);
+.nodesettings_content.collapsed {
+  width: 0;
 }
-.workerselectoption.active {
-  color: green;
+.nodesettings_section {
+  margin-bottom: 10px;
+  margin-left: 0.5rem;
 }
-.workerselectoption.inactive {
-  color: red;
+.nodesettings_component {
+  margin-bottom: 0.5rem;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 :root {
@@ -1367,41 +1404,23 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
-.nodesettings_container {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.nodesettings_expander {
+.styled-select__control {
   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;
+  min-height: initial;
+  min-width: 10px;
 }
-.nodesettings_content.expanded {
-  width: 250px;
+.styled-select__menu-list {
+  max-height: 200px;
 }
-.nodesettings_content.collapsed {
-  width: 0;
+.styled-select__single-value {
+  text-align: start;
 }
-.nodesettings_section {
-  margin-bottom: 10px;
-  margin-left: 0.5rem;
+.styled-select__option {
+  text-align: start;
+  padding: 2px 5px;
 }
-.nodesettings_component {
-  margin-bottom: 0.5rem;
-  margin-left: 0.5rem;
-  margin-top: 0.5rem;
+.styled-select__option:hover {
+  cursor: pointer;
 }
 
 .tablecontainer {
@@ -1429,25 +1448,6 @@ input.nodedatainput.styledinput,
   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;