@linkdlab/funcnodes_react_flow 0.1.1 → 0.1.3

package/module/src/frontend/header/index.tsx

@@ -1,269 +0,0 @@
-import { useContext, useState } from "react";
-import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
-import { FuncNodesContext } from "../funcnodesreactflow";
-
-import "./header.scss";
-import CustomDialog from "../dialog";
-import React from "react";
-
-const NewWorkerDialog = ({ trigger }: { trigger: React.ReactNode }) => {
-  const [name, setName] = useState<string>("");
-  const [copyLib, setCopyLib] = useState<boolean>(false);
-  const [copyNS, setCopyNS] = useState<boolean>(false);
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const workersstate = fnrf_zst.workers();
-
-  const [reference, setReference] = useState<{ name: string; uuid: string }>({
-    name: "None",
-    uuid: "",
-  });
-
-  return (
-    <CustomDialog
-      trigger={trigger}
-      title="New Worker"
-      description="Please provide a name and select a another worker as interpreter reference"
-    >
-      <div>
-        Name:
-        <br />
-        <input
-          className="styledinput"
-          onChange={(e) => {
-            setName(e.currentTarget.value);
-          }}
-          value={name}
-        />
-      </div>
-      <div>
-        Reference Worker:
-        <br />
-        <select
-          className="styleddropdown"
-          onChange={(e) => {
-            const uuid = e.target.value;
-            const name = e.target.selectedOptions[0].innerText;
-            setReference({ name, uuid });
-          }}
-          value={reference.uuid}
-        >
-          <option value="">None</option>
-          {Object.keys(workersstate).map((workerid) => (
-            <option className={""} key={workerid} value={workerid}>
-              {workersstate[workerid].name || workerid}
-            </option>
-          ))}
-        </select>
-        {reference.uuid && (
-          <div>
-            <div>
-              Copy Lib:{" "}
-              <input
-                type="checkbox"
-                className="styledcheckbox"
-                checked={copyLib}
-                onChange={(e) => {
-                  setCopyLib(e.currentTarget.checked);
-                }}
-              />
-            </div>
-            {copyLib && (
-              <div>
-                Copy Nodespace{" "}
-                <input
-                  type="checkbox"
-                  className="styledcheckbox"
-                  checked={copyNS}
-                  onChange={(e) => {
-                    setCopyNS(e.currentTarget.checked);
-                    if (e.currentTarget.checked) {
-                      setCopyLib(true);
-                    }
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        )}
-        {name && (
-          <div>
-            <button
-              className="styledbtn"
-              onClick={() => {
-                fnrf_zst.workermanager?.new_worker({
-                  name,
-                  reference: reference.uuid,
-                  copyLib,
-                  copyNS,
-                });
-              }}
-            >
-              Create
-            </button>
-          </div>
-        )}
-      </div>
-    </CustomDialog>
-  );
-};
-
-const Statusbar = () => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-  const progress = fnrf_zst.progress_state();
-
-  return (
-    <div className="statusbar">
-      <span
-        className="statusbar-progressbar"
-        style={{ width: Math.min(100, 100 * progress.progress) + "%" }}
-      ></span>
-      <span className="statusbar-message">{progress.message}</span>
-    </div>
-  );
-};
-
-const FuncnodesHeader = () => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const workersstate = fnrf_zst.workers();
-  const onNew = () => {
-    const alert = window.confirm("Are you sure you want to start a new flow?");
-    if (alert) {
-      fnrf_zst.worker?.clear();
-    }
-  };
-
-  const onSave = async () => {
-    const data = await fnrf_zst.worker?.save();
-    if (!data) return;
-    const blob = new Blob([JSON.stringify(data)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "flow.json";
-    a.click();
-    URL.revokeObjectURL(url);
-    a.remove();
-  };
-
-  const onOpen = async () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".json";
-    input.onchange = async (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        const contents = e.target?.result;
-        if (!contents) return;
-        const data = JSON.parse(contents as string);
-        await fnrf_zst.worker?.load(data);
-      };
-      reader.readAsText(file);
-    };
-    input.click();
-  };
-
-  const workerselectchange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const workerid = e.target.value;
-    if (workerid === "__select__") return;
-    if (!fnrf_zst.workers) return;
-    if (!fnrf_zst.workermanager) return;
-    if (!workersstate[workerid]) return;
-    if (!workersstate[workerid].active) {
-      //create popup
-      const ans = window.confirm(
-        "this is an inactive worker, selecting it will start it, continue?"
-      );
-      if (!ans) return;
-    }
-    fnrf_zst.workermanager.set_active(workerid);
-  };
-
-  return (
-    <div className="funcnodesreactflowheader">
-      <div className="headerelement">
-        <Statusbar></Statusbar>
-      </div>
-      <div className="headerelement">
-        <select
-          className="workerselect styleddropdown"
-          value={fnrf_zst.worker ? fnrf_zst.worker.uuid : "__select__"}
-          onChange={workerselectchange}
-        >
-          <option disabled value="__select__">
-            Select Worker
-          </option>
-          {Object.keys(workersstate).map((workerid) => (
-            <option
-              className={
-                "workerselectoption" +
-                (workersstate[workerid].active ? " active" : " inactive")
-              }
-              key={workerid}
-              value={workerid}
-            >
-              {workersstate[workerid].name || workerid}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {fnrf_zst.worker && (
-        <>
-          <div className="headerelement">
-            <button
-              className="styledbtn"
-              onClick={() => {
-                if (!fnrf_zst.worker) return;
-                fnrf_zst.worker.stop();
-              }}
-            >
-              stop worker
-            </button>
-          </div>
-          <div className="headerelement">
-            <button
-              className="styledbtn"
-              onClick={() => {
-                if (!fnrf_zst.worker) return;
-                fnrf_zst.workermanager?.restart_worker(fnrf_zst.worker.uuid);
-              }}
-            >
-              restart worker
-            </button>
-          </div>
-        </>
-      )}
-      <div className="headerelement">
-        <NewWorkerDialog
-          trigger={<button className="styledbtn">new worker</button>}
-        ></NewWorkerDialog>
-      </div>
-      <div className="headerelement">
-        <button className="styledbtn" onClick={onNew}>
-          new nodespace
-        </button>
-      </div>
-      <div className="headerelement">
-        <button className="styledbtn" onClick={onOpen}>
-          open
-        </button>
-      </div>
-      <div className="headerelement">
-        <button className="styledbtn" onClick={onSave}>
-          save
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default FuncnodesHeader;

package/module/src/frontend/index.tsx

@@ -1,4 +0,0 @@
-import FuncnodesReactFlow,{ FuncNodesContext }  from "./funcnodesreactflow";
-
-export default FuncnodesReactFlow;
-export { FuncNodesContext };

package/module/src/frontend/layout/htmlelements.scss

@@ -1,63 +0,0 @@
-.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/module/src/frontend/lib.scss

@@ -1,157 +0,0 @@
-: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/module/src/frontend/lib.tsx

@@ -1,199 +0,0 @@
-import React, { useState, useContext } from "react";
-import "./lib.scss";
-
-import { FuncNodesReactFlowZustandInterface } from "../states/fnrfzst.t";
-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";
-import { LibNode, Shelf } from "../states/lib.t";
-
-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 };