@linkdlab/funcnodes_react_flow 0.1.0

package/src/frontend/layout/htmlelements.scss

@@ -0,0 +1,63 @@
+.styleelement {
+  &:hover {
+    background-color: var(--funcnodesbackground_light);
+  }
+
+  &:active {
+    background-color: var(--funheadercolor);
+    color: var(--funcnodesbackground1);
+  }
+
+  &:focus {
+    outline: 1px solid var(--funheadercolor);
+  }
+
+  height: 2rem;
+  background-color: var(--funcnodesbackground1);
+  color: var(--funcnodestextcolor1);
+  border-radius: 0.75rem;
+  border: 1px solid var(--funheadercolor);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.styleddropdown {
+  @extend .styleelement;
+  padding-right: 0.25rem;
+}
+
+.styledbtn {
+  @extend .styleelement;
+  cursor: pointer;
+}
+
+.styledinput {
+  @extend .styleelement;
+
+  :focus {
+    outline: none;
+  }
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  opacity: 0.5;
+  background-color: tr;
+}
+
+.styledcheckbox {
+  @extend .styleelement;
+  height: auto;
+  &:focus {
+    outline: none;
+  }
+  &:after {
+    content: "";
+    background-color: var(--funheadercolor);
+  }
+  &.checked {
+    background-color: var(--funheadercolor);
+    color: var(--funcnodesbackground1);
+  }
+  accent-color: var(--funheadercolor);
+}

package/src/frontend/lib.scss

@@ -0,0 +1,157 @@
+:root {
+  --expandtime: 0.3s;
+  --libnodebgcolor: #48465f;
+  --libnodebgcolor_hover: #6a6698;
+}
+.libcontainer {
+  top: 0;
+  left: 0;
+
+  height: 100%;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 0.5rem;
+}
+
+.library {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+  width: 15rem;
+  background-color: var(--funcnodesbackground2);
+  border-radius: var(--containerboarderradius);
+  padding: 0.5rem;
+
+  & .libtitle {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--funheadercolor);
+  }
+
+  & hr {
+    &.hr_prominent {
+      border: 0.5px solid var(--funheadercolor);
+    }
+    width: 100%;
+  }
+}
+
+.addlib {
+  background-color: var(--funcnodesbackground2);
+  border-radius: var(--containerboarderradius);
+  padding: 0.5rem;
+
+  & button {
+    background-color: var(--funcnodesbackground1);
+    color: var(--funheadercolor);
+    border: 0;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    cursor: pointer;
+    font-size: 1rem;
+    width: 100%;
+    &:hover {
+      background-color: var(--funheadercolor);
+      color: var(--funcnodesbackground1);
+    }
+    &:active {
+      background-color: var(--funcnodesbackground1);
+      color: var(--funcnodestextcolor1);
+    }
+  }
+  & button[disabled] {
+    background-color: var(--funcnodesbackground1);
+    color: var(--funcnodestextcolor1);
+    cursor: not-allowed;
+  }
+}
+.libfilter {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.2rem;
+  &:focus-within {
+    border: 1px solid var(--funheadercolor);
+  }
+  & input {
+    flex-grow: 1;
+    background-color: transparent;
+    color: var(--funcnodestextcolor1);
+    border: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+.libnodecontainer {
+  display: grid;
+
+  transition: grid-template-rows var(--expandtime) ease-out;
+  &.close {
+    grid-template-rows: 0fr;
+  }
+  &.open {
+    grid-template-rows: 1fr;
+  }
+
+  &_inner {
+    transition: opacity var(--expandtime) ease-out;
+    overflow: hidden;
+    padding-left: 10px;
+  }
+  &.close &_inner {
+    opacity: 0.2;
+  }
+  &.open &_inner {
+    opacity: 1;
+  }
+}
+.shelfcontainer {
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  & .shelftitle {
+    font-size: 0.8rem;
+
+    color: var(--funheadercolor);
+    opacity: 0.8;
+    display: flex;
+
+    &_text {
+      flex-grow: 1;
+    }
+  }
+}
+
+.libnodeentry {
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: var(--libnodebgcolor);
+  margin-bottom: 0.2rem;
+  //  border-radius: 0.2rem;
+  padding: 0.1rem;
+  cursor: pointer;
+  border: 1px solid var(--libnodebgcolor);
+  transition: border 0.2s ease-in-out;
+  font-size: 0.8rem;
+  box-shadow: -0.2rem 0px rgba(0, 76, 255);
+  &:hover {
+    background-color: var(--libnodebgcolor_hover);
+    border: 1px solid rgba(0, 76, 255);
+  }
+}
+
+.expandicon {
+  transform: rotate(0deg);
+  &.close {
+    transform: rotate(180deg);
+  }
+  transition: transform var(--expandtime) ease-out;
+}

package/src/frontend/lib.tsx

@@ -0,0 +1,198 @@
+import React, { useState, useContext } from "react";
+import "./lib.scss";
+
+import { FuncNodesReactFlowZustandInterface } from "../state";
+import { UseBoundStore } from "zustand";
+import { MouseEvent } from "react";
+import { FuncNodesContext } from "./index";
+import SearchIcon from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import CustomDialog from "./dialog";
+
+const LibraryNode = ({ item }: { item: LibNode }) => {
+  const zustand: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const add_to_flow = () => {
+    zustand.worker?.add_node(item.node_id);
+  };
+
+  const nodeclick = (event: MouseEvent<HTMLDivElement>) => {
+    // if double click, add node to graph
+    if (event.detail === 2) {
+      add_to_flow();
+    }
+  };
+  return (
+    <div className="libnodeentry" onClick={nodeclick} title={item.description}>
+      {item.node_name || item.node_id}
+    </div>
+  );
+};
+
+const filterShelf = (shelf: Shelf, filter: string): boolean => {
+  const hasFilteredNodes =
+    shelf.nodes?.some((node) =>
+      node.node_id.toLowerCase().includes(filter.toLowerCase())
+    ) ?? false;
+
+  const hasFilteredSubShelves =
+    shelf.subshelves?.some((subShelf) => filterShelf(subShelf, filter)) ??
+    false;
+
+  return hasFilteredNodes || hasFilteredSubShelves;
+};
+
+const LibraryShelf = ({ item, filter }: { item: Shelf; filter: string }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => setIsOpen(!isOpen);
+
+  const filterednodes = item.nodes?.filter((node) =>
+    node.node_id.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  const _isopen = isOpen || filter.length > 0;
+  if (!filterShelf(item, filter)) {
+    return <></>;
+  }
+
+  return (
+    <div className="shelfcontainer">
+      <div
+        className="shelftitle"
+        onClick={handleToggle}
+        style={{ cursor: "pointer" }}
+        title={item.description}
+      >
+        <div className="shelftitle_text">{item.name}</div>
+        <div className={"expandicon " + (_isopen ? "open" : "close")}>
+          <ExpandLessIcon />
+        </div>
+      </div>
+      <div className={"libnodecontainer " + (_isopen ? "open" : "close")}>
+        <div className="libnodecontainer_inner">
+          {filterednodes && (
+            <>
+              {filterednodes.map((subItem, idx) => (
+                <LibraryNode key={idx} item={subItem} />
+              ))}
+            </>
+          )}
+          {item.subshelves && (
+            <>
+              {item.subshelves.map((subItem, idx) => (
+                <LibraryShelf key={idx} item={subItem} filter={filter} />
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+};
+
+const LibFilter = ({
+  filter,
+  setFilter,
+}: {
+  filter: string;
+  setFilter: (filter: string) => void;
+}) => {
+  // input with left icon
+
+  return (
+    <div className="libfilter">
+      <SearchIcon fontSize="inherit" />
+      <input
+        type="text"
+        placeholder="Filter"
+        value={filter}
+        onChange={(e) => {
+          setFilter(e.target.value);
+        }}
+      />
+      {filter && (
+        <CloseIcon
+          fontSize="inherit"
+          onClick={() => {
+            setFilter("");
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+const AddLibraryOverLay = ({ children }: { children: React.ReactNode }) => {
+  const [newlib, setNewLib] = useState("");
+  const zustand: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+  if (!zustand.worker) {
+    return <></>;
+  }
+  const add_new_lib = () => {
+    if (zustand.worker === undefined) {
+      return;
+    }
+    zustand.worker.add_lib(newlib);
+    setNewLib("");
+  };
+  return (
+    <CustomDialog
+      title="Add Library"
+      trigger={children}
+      description="Add a new library to the current worker."
+      buttons={[
+        {
+          text: "add",
+          onClick: add_new_lib,
+        },
+      ]}
+    >
+      <input
+        className="styledinput"
+        type="text"
+        value={newlib}
+        onChange={(e) => {
+          setNewLib(e.target.value);
+        }}
+      />
+    </CustomDialog>
+  );
+};
+
+const Library = () => {
+  const zustand: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+  const libstate = zustand.lib.libstate((state) => state.state);
+
+  const [filter, setFilter] = useState("");
+
+  return (
+    <div className="libcontainer">
+      <div className="library">
+        <div className="libtitle">Lib</div>
+        <hr className="hr_prominent" />
+        <LibFilter filter={filter} setFilter={setFilter} />
+        <div className="vscrollcontainer">
+          {libstate.shelves.map((item, idx) => (
+            <LibraryShelf key={idx} item={item} filter={filter} />
+          ))}
+        </div>
+        <hr />
+      </div>
+      <div className="addlib">
+        <AddLibraryOverLay>
+          <button disabled={zustand.worker === undefined}>Add Library</button>
+        </AddLibraryOverLay>
+      </div>
+    </div>
+  );
+};
+
+export default Library;
+export { LibraryShelf as LibraryItem };

package/src/frontend/node/index.tsx

@@ -0,0 +1,3 @@
+import DefaultNode from "./node";
+
+export default DefaultNode;