@linkdlab/funcnodes_react_flow 0.3.13 → 0.3.15

package/dist/esm/style.css

@@ -1,4 +1,16 @@
 @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;
+}
+
 :root {
   --expandtime: 0.3s;
   --libnodebgcolor: #48465f;
@@ -244,18 +256,6 @@
   color: #0056b3;
 }
 
-: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;
@@ -832,6 +832,14 @@
   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);
@@ -1031,6 +1039,16 @@ button {
   color: red;
 }
 
+.funcnodesflaotingmenu {
+  position: absolute;
+  right: 0;
+  padding: 10px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+}
+
 .funcnodesreactflowheader {
   display: flex;
   flex-direction: row;
@@ -1098,6 +1116,120 @@ button {
   color: #fff;
 }
 
+.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;
+}
+
+.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;
@@ -1367,120 +1499,6 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
-.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;
-}
-
-.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;
-}
-
 s slideUpAndFade from {
   opacity: 0;
   transform: translateY(2px);

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';
 
@@ -639,6 +639,8 @@ interface ReactFlowLayerProps {
     static: boolean;
     minZoom: number;
     maxZoom: number;
+    allowFullScreen: boolean;
+    allowExpand: boolean;
 }
 interface FuncnodesReactFlowProps {
     id: string;
@@ -699,8 +701,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 +715,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, 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,16 @@
 @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;
+}
+
 :root {
   --expandtime: 0.3s;
   --libnodebgcolor: #48465f;
@@ -244,18 +256,6 @@
   color: #0056b3;
 }
 
-: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;
@@ -832,6 +832,14 @@
   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);
@@ -1031,6 +1039,16 @@ button {
   color: red;
 }
 
+.funcnodesflaotingmenu {
+  position: absolute;
+  right: 0;
+  padding: 10px;
+  z-index: 1001;
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+}
+
 .funcnodesreactflowheader {
   display: flex;
   flex-direction: row;
@@ -1098,6 +1116,120 @@ button {
   color: #fff;
 }
 
+.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;
+}
+
+.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;
@@ -1367,120 +1499,6 @@ input.nodedatainput.styledinput,
   transition: width 0.3s ease;
 }
 
-.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;
-}
-
-.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;
-}
-
 s slideUpAndFade from {
   opacity: 0;
   transform: translateY(2px);