Link

import React from "react";
import { createRoot } from "react-dom/client";

import mapValues from "lodash/mapValues";
import pickBy from "lodash/pickBy";
import { Chart } from "regraph";

import { style } from "@ci/theme/rg/js/storyStyles";

import "@ci/theme/rg/css/button.css";

export const Demo = () => <LinkStyle />;

const { colorArrays } = style;

const linkProps = {
  label: {
    values: [
      { text: "Press the buttons above" },
      { text: "Bold label", bold: true },
      { text: "Color 1", color: colorArrays.dark[0] },
      { text: "Color 2", color: colorArrays.dark[1] },
      { text: "Color 3", color: colorArrays.dark[2] },
      { text: "Background color 1", backgroundColor: colorArrays.transparent[0] },
      { text: "Background color 2", backgroundColor: colorArrays.transparent[1] },
      { text: "Background color 3", backgroundColor: colorArrays.transparent[2] },
      {
        text: "Rounded border",
        backgroundColor: "#2dcda8",
        border: { color: colorArrays.dark[1], radius: 4, width: 1 },
      },
      {
        text: "Uneven corners",
        backgroundColor: colorArrays.dark[1],
        border: { radius: "8 0 8 0" },
        color: "white",
        padding: { left: 8, right: 8 },
      },
      {
        text: "Font size: 16",
        fontSize: 16,
      },
      {
        text: "Font size: 20",
        fontSize: 20,
      },
      {
        text: "Sans Serif",
        fontFamily: "sans serif",
      },
      {
        text: "Comic Sans",
        fontFamily: "comic sans ms",
      },
      { text: "Default font" },
      undefined,
    ],
    label: "Node label",
  },
  end1: {
    values: [
      undefined,
      { arrow: true },
      { arrow: true, color: colorArrays.standard[0] },
      { arrow: true, color: colorArrays.standard[1] },
      { arrow: true, color: colorArrays.standard[2] },
      { arrow: true, backOff: 0.2 },
      { arrow: true, backOff: 0.3 },

      { arrow: true, color: colorArrays.standard[0], label: { text: "End label 1", fontSize: 16 } },
      { arrow: true, color: colorArrays.standard[0], label: { text: "End label 2", fontSize: 20 } },
    ],
    label: "End 1 properties",
  },
  end2: {
    values: [
      undefined,
      { arrow: true },
      { arrow: true, color: colorArrays.standard[0] },
      { arrow: true, color: colorArrays.standard[1] },
      { arrow: true, color: colorArrays.standard[2] },
      { arrow: true, backOff: 0.2 },
      { arrow: true, backOff: 0.3 },
      { arrow: true, backOff: 0.3, label: { text: "End label 1", color: colorArrays.dark[0] } },
      { arrow: true, backOff: 0.3, label: { text: "End label 2", color: colorArrays.dark[1] } },
    ],
    label: "End 2 properties",
  },
  fade: { values: [undefined, true], label: "Fade" },
  color: {
    values: [undefined, ...colorArrays.standard],
    label: "Fill color. NB: end1.color takes precedence",
  },
  lineStyle: { values: [undefined, "dashed", "dotted"], label: "Line style" },
  width: { values: [undefined, 10, 20], label: "Width" },
  flow: { values: [undefined, true, { velocity: 4 }, { velocity: -4 }], label: "Flow Animation" },
};

class LinkStyle extends React.PureComponent {
  constructor(props) {
    super(props);
    this.node1 = { color: "#2dcda8" };
    this.node2 = { color: "#2dcda8" };

    this.state = {
      ...mapValues(linkProps, () => 0),
      positions: { node1: { x: -200, y: -100 }, node2: { x: 200, y: 100 } },
    };
  }

  update = (id) => {
    const { [id]: index } = this.state;
    const { [id]: property } = linkProps;
    const { values } = property;
    let result = index + 1;
    if (result > values.length - 1) {
      result = 0;
    }
    this.setState({ [id]: result });
  };

  reset = () => {
    const { positions } = this.state;
    this.setState({ ...mapValues(linkProps, () => 0), positions: { ...positions } });
  };

  render = () => {
    const link1 = {
      ...pickBy(
        mapValues(linkProps, (value, key) => {
          const { [key]: index } = this.state;
          return value.values[index || 0];
        }),
        (value) => value !== undefined
      ),
      id1: "node1",
      id2: "node2",
    };

    const { positions } = this.state;

    return (
      <div style={{ width: "100%", height: "100%" }}>
        <Chart
          items={{ node1: this.node1, node2: this.node2, link1 }}
          positions={positions}
          animation={{ animate: true, time: 250 }}
          options={{ fit: "all", navigation: false, overview: false }}
        />
        <div style={{ position: "absolute", top: 0, left: 0 }}>
          <button type="button" onClick={this.reset}>
            Reset
          </button>
          {Object.keys(linkProps).map((key) => (
            <button
              type="button"
              title={linkProps[key].label}
              key={key}
              onClick={() => this.update(key)}
            >
              {key}
            </button>
          ))}
        </div>
        <pre className="properties">{JSON.stringify({ link1 }, null, 2)}</pre>
      </div>
    );
  };
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

<!doctype html>
<html>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>