@linkdlab/funcnodes_react_flow 0.1.1 → 0.1.2

package/module/src/frontend/utils/colorpicker.tsx

@@ -1,342 +0,0 @@
-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/module/src/frontend/utils/jsondata.tsx

@@ -1,19 +0,0 @@
-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/module/src/frontend/utils/table.scss

@@ -1,22 +0,0 @@
-.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/module/src/frontend/utils/table.tsx

@@ -1,160 +0,0 @@
-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";
-import React from "react";
-
-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,
-  };
-};
-
-const 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 };