@linkdlab/funcnodes_react_flow 0.1.0

package/src/frontend/utils/colorpicker.tsx

@@ -0,0 +1,342 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import convert from "color-convert";
+import "./colorpicker.scss";
+
+const parse_colorstring = (colorstring: string): [string, any[]] => {
+  // This is a simplified parser and may need adjustments to handle all CSS color formats robustly
+  if (colorstring.startsWith("#")) {
+    return ["hex", [colorstring]];
+  }
+
+  let matches = colorstring.match(/^(\w+)\(([^)]+)\)$/);
+  if (!matches) return ["keyword", [colorstring]];
+
+  const colortype = matches[1];
+  const colordata = matches[2].split(",").map((n) => parseInt(n.trim()));
+
+  return [colortype, colordata];
+};
+
+const create_color_converter = (
+  type: string,
+  data: any[]
+): { [key: string]: () => number[] | string } => {
+  if (!Array.isArray(data)) data = [data];
+  if (data[0] === undefined || data[0] === null)
+    return create_color_converter("rgb", [0, 0, 0]);
+  // @ts-ignore
+  const source = convert[type];
+  if (!source) throw new Error("Unsupported color type: " + type);
+
+  source[type] = () => data;
+
+  const checkrgb = source.rgb(data);
+  if (!Array.isArray(checkrgb)) return create_color_converter("rgb", [0, 0, 0]);
+  if (checkrgb[0] === undefined || checkrgb[0] === null)
+    return create_color_converter("rgb", [0, 0, 0]);
+
+  const checkhsl = source.hsl(data);
+  if (!Array.isArray(checkhsl)) return create_color_converter("rgb", [0, 0, 0]);
+  if (checkhsl[0] === undefined || checkhsl[0] === null)
+    return create_color_converter("rgb", [0, 0, 0]);
+
+  const converter: { [key: string]: () => number[] | string } = {};
+
+  Object.keys(source).forEach((key) => {
+    const entry = source[key];
+    //check if entry is a function
+    if (typeof entry === "function") {
+      converter[key] = () => entry.apply(null, data);
+    }
+  });
+
+  return converter;
+};
+const create_color_converter_from_string = (
+  colorstring: string
+): { [key: string]: () => number[] | string } => {
+  const [colortype, colordata] = parse_colorstring(colorstring);
+  // @ts-ignore
+  if (!colortype || !convert[colortype]) {
+    console.error("Unsupported color type or invalid color string");
+    return {};
+  }
+
+  return create_color_converter(colortype, colordata);
+};
+
+const HSLColorPicker = ({
+  onChange,
+  colorconverter,
+}: {
+  onChange: (colorconverter: {
+    [key: string]: () => number[] | string;
+  }) => void;
+  colorconverter: { [key: string]: () => number[] | string };
+}) => {
+  const [converter, setConverter] = useState(colorconverter);
+  const hsl = converter.hsl() as number[];
+  const rgb = converter.rgb() as number[];
+  const hsv = converter.hsv() as number[];
+  const hex = converter.hex() as string;
+
+  const colorStyle = {
+    backgroundColor: `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`,
+    padding: "10px",
+    margin: "10px 0",
+  };
+
+  let g = "linear-gradient(to right";
+  for (let i = 0; i <= 360; i += 10) {
+    g += `, hsl(${i}, 100%, 50%)`;
+  }
+  g += ")";
+  const hueStyle = {
+    backgroundImage: "unset",
+    WebkitAppearance: "none" as any,
+    background: g,
+    height: 10,
+    borderRadius: 5,
+  };
+
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <div style={colorStyle}>Color Preview</div>
+      <div className="colorspace">
+        <div className="colorspace_title">RGB</div>
+        <div></div>
+
+        <label>Red</label>
+        <input
+          type="range"
+          min="0"
+          max="255"
+          value={rgb[0]}
+          onChange={(e) => {
+            const newrgb = [parseInt(e.target.value), rgb[1], rgb[2]];
+            const newconverter = create_color_converter("rgb", newrgb);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{ background: `linear-gradient(to right, #000, #f00)` }}
+        />
+
+        <label>Green</label>
+        <input
+          type="range"
+          min="0"
+          max="255"
+          value={rgb[1]}
+          onChange={(e) => {
+            const newrgb = [rgb[0], parseInt(e.target.value), rgb[2]];
+            const newconverter = create_color_converter("rgb", newrgb);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{ background: `linear-gradient(to right, #000, #0f0)` }}
+        />
+
+        <label>Blue</label>
+        <input
+          type="range"
+          min="0"
+          max="255"
+          value={rgb[2]}
+          onChange={(e) => {
+            const newrgb = [rgb[0], rgb[1], parseInt(e.target.value)];
+            const newconverter = create_color_converter("rgb", newrgb);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{ background: `linear-gradient(to right, #000, #00f)` }}
+        />
+      </div>
+      <div className="colorspace">
+        <div className="colorspace_title">HSL</div>
+        <div></div>
+
+        <label>Hue</label>
+        <input
+          type="range"
+          min="0"
+          max="360"
+          value={hsl[0]}
+          onChange={(e) => {
+            const newhsl = [parseInt(e.target.value), hsl[1], hsl[2]];
+            const newconverter = create_color_converter("hsl", newhsl);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)`,
+          }}
+        />
+
+        <label>Saturation</label>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={hsl[1]}
+          onChange={(e) => {
+            const newhsl = [hsl[0], parseInt(e.target.value), hsl[2]];
+            const newconverter = create_color_converter("hsl", newhsl);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #fff, hsl(${hsl[0]}, 100%, 50%))`,
+          }}
+        />
+
+        <label>Lightness</label>
+
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={hsl[2]}
+          onChange={(e) => {
+            const newhsl = [hsl[0], hsl[1], parseInt(e.target.value)];
+            const newconverter = create_color_converter("hsl", newhsl);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #000, hsl(${hsl[0]}, 100%, 50%), #fff)`,
+          }}
+        />
+      </div>
+
+      <div className="colorspace">
+        <div className="colorspace_title">HSV</div>
+        <div></div>
+
+        <label>Hue</label>
+        <input
+          type="range"
+          min="0"
+          max="360"
+          value={hsv[0]}
+          onChange={(e) => {
+            const newhsv = [parseInt(e.target.value), hsv[1], hsv[2]];
+            const newconverter = create_color_converter("hsv", newhsv);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)`,
+          }}
+        />
+
+        <label>Saturation</label>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={hsv[1]}
+          onChange={(e) => {
+            const newhsv = [hsv[0], parseInt(e.target.value), hsv[2]];
+            const newconverter = create_color_converter("hsv", newhsv);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #fff, hsl(${hsl[0]}, 100%, 50%))`,
+          }}
+        />
+
+        <label>Value</label>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={hsv[2]}
+          onChange={(e) => {
+            const newhsv = [hsv[0], hsv[1], parseInt(e.target.value)];
+            const newconverter = create_color_converter("hsv", newhsv);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+          style={{
+            background: `linear-gradient(to right, #000, hsl(${hsl[0]}, 100%, 50%))`,
+          }}
+        />
+      </div>
+
+      <div className="colorspace">
+        <div className="colorspace_title">HEX</div>
+        <div></div>
+
+        <input
+          type="text"
+          value={hex}
+          onChange={(e) => {
+            const newconverter = create_color_converter("hex", [
+              e.target.value,
+            ]);
+            setConverter(newconverter);
+            onChange(newconverter);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const CustomColorPicker = ({
+  inicolordata,
+  inicolorspace = "hex",
+  onChange,
+}: {
+  inicolordata?: number[] | string | string[];
+  inicolorspace?: string;
+  onChange?: (colorconverter: {
+    [key: string]: () => number[] | string;
+  }) => void;
+}) => {
+  if (inicolordata === undefined) {
+    inicolordata = [0, 0, 0];
+    inicolorspace = "rgb";
+  }
+  if (!Array.isArray(inicolordata)) inicolordata = [inicolordata];
+
+  let iniconverter = create_color_converter(inicolorspace, inicolordata);
+
+  if (iniconverter.rgb() === undefined)
+    iniconverter = create_color_converter("rgb", [0, 0, 0]);
+  const [color, setColor] = useState(iniconverter);
+
+  const innerSetColor = (colorconverter: {
+    [key: string]: () => number[] | string;
+  }) => {
+    setColor(colorconverter);
+    if (onChange) onChange(colorconverter);
+  };
+
+  const style = {
+    background: "#" + color.hex(),
+    borderRadius: "0.3rem",
+    width: "2rem",
+    height: "1rem",
+  };
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button style={style}></button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content side="left">
+          <HSLColorPicker
+            onChange={innerSetColor}
+            colorconverter={color}
+          ></HSLColorPicker>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+export default CustomColorPicker;
+export { HSLColorPicker };

package/src/frontend/utils/jsondata.tsx

@@ -0,0 +1,19 @@
+import {
+  JsonView,
+  allExpanded,
+  darkStyles,
+  defaultStyles,
+  collapseAllNested,
+} from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+const JSONDataDisplay = ({ data }: { data: any }) => {
+  return (
+    <JsonView
+      data={data}
+      style={darkStyles}
+      shouldExpandNode={collapseAllNested}
+    />
+  );
+};
+
+export default JSONDataDisplay;

package/src/frontend/utils/table.scss

@@ -0,0 +1,22 @@
+.tablecontainer {
+  overflow: auto;
+  background-color: white;
+}
+.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;
+}

package/src/frontend/utils/table.tsx

@@ -0,0 +1,159 @@
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell, { SortDirection } from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+
+import { useMemo, useState } from "react";
+
+import "./table.scss";
+
+interface TableData {
+  columns: string[];
+  index: string[];
+  data: any[][];
+}
+
+type comparertype = (a: any, b: any) => 1 | -1 | 0;
+type _SD = "asc" | "desc";
+
+interface TransFormedTableData {
+  header: string[];
+  rows: any[][];
+}
+
+const transform_table_data = (data: TableData): TransFormedTableData => {
+  const rows = [];
+  if (data === undefined) {
+    // return empty table if data is undefined
+    return {
+      header: [],
+      rows: [],
+    };
+  }
+  if (data.data === undefined) {
+    // if data.data is undefined, make it empty
+    data.data = [];
+  }
+
+  if (data.columns === undefined) {
+    // if np columns are defined, create columns based on the first row
+
+    // if data is empty, there are no columns
+    if (data.data.length === 0) {
+      data.columns = [];
+    } else {
+      // create columns based on the first row
+      data.columns = data.data[0].map((_, i) => `col${i}`);
+    }
+  }
+  if (data.index === undefined) {
+    // if no index is defined, create index based on the number of rows
+    data.index = data.data.map((_, i) => `row${i}`);
+  }
+
+  for (let i = 0; i < data.index.length; i++) {
+    const row = [data.index[i]];
+    for (let j = 0; j < data.columns.length; j++) {
+      row.push(data.data[i][j]);
+    }
+    rows.push(row);
+  }
+  return {
+    header: ["index", ...data.columns],
+    rows: rows,
+  };
+};
+
+function SortableTable({ tabledata }: { tabledata: TableData }) {
+  // State to manage the sorted column and direction
+  const transformed_table_data: TransFormedTableData = useMemo(
+    () => transform_table_data(tabledata),
+    [tabledata]
+  );
+  const [orderDirection, setOrderDirection] = useState<_SD>("asc");
+  const [orderBy, setOrderBy] = useState("index");
+
+  let order_by_index = transformed_table_data.header.indexOf(orderBy);
+  if (order_by_index === -1) {
+    order_by_index = 0;
+  }
+
+  // Function to handle sorting
+  const handleSort = (column: string) => {
+    const isAsc = orderBy === column && orderDirection === "asc";
+    setOrderDirection(isAsc ? "desc" : "asc");
+    setOrderBy(column);
+  };
+  // Function to sort data
+  const sortData = (data: any[][], comparator: comparertype) => {
+    const stabilizedThis: [any[], number][] = data.map((el, index) => [
+      el,
+      index,
+    ]);
+    stabilizedThis.sort((a, b) => {
+      const order = comparator(a[0], b[0]);
+      return order;
+    });
+    return stabilizedThis.map((el) => el[0]);
+  };
+
+  // Comparator function for sorting
+  const getComparator = (order: _SD, orderBy: string): comparertype => {
+    return order === "desc"
+      ? (a, b) => (b[order_by_index] < a[order_by_index] ? -1 : 1)
+      : (a, b) => (a[order_by_index] < b[order_by_index] ? -1 : 1);
+  };
+
+  // Sort the rows
+  const sortedRows = sortData(
+    transformed_table_data.rows,
+    getComparator(orderDirection, orderBy)
+  );
+  return (
+    <TableContainer className="tablecontainer">
+      <Table size="small">
+        <TableHead className="tableHead">
+          <TableRow className="tableheadercolor">
+            {transformed_table_data.header.map((column) => (
+              <TableCell
+                key={column}
+                sortDirection={orderBy === column ? orderDirection : false}
+                className="tableheadercolor"
+              >
+                <TableSortLabel
+                  active={orderBy === column}
+                  direction={orderBy === column ? orderDirection : "asc"}
+                  onClick={() => handleSort(column)}
+                  className="tableheadercolor"
+                  sx={{
+                    "& .MuiTableSortLabel-icon": {
+                      color: "inherit !important",
+                    },
+                  }}
+                >
+                  {column}
+                </TableSortLabel>
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {sortedRows.map((row, index) => (
+            <TableRow key={tabledata.index[index]}>
+              {row.map((cell, i) => (
+                <TableCell key={i} className={i == 0 ? "indexcol" : "datacol"}>
+                  {cell}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export { SortableTable };