<div id="sigma-container"></div>

<style>
  #sigma-container {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  import Graph from "graphology";
  import Sigma from "sigma";
  import {
    extremityArrow,
    layerDashed,
    layerFill,
    layerPlain,
    pathCurved,
    pathCurvedS,
    pathLine,
    pathStepCurved,
    sdfDiamond,
    sdfTriangle,
  } from "sigma/rendering";
  import { DEFAULT_STYLES } from "sigma/types";

  const container = document.getElementById("sigma-container") as HTMLElement;

  const graph = new Graph();

  const COL_SPACING = 120;
  const ROW_SPACING = 80;
  const NODE_SPACING = 60;
  const EDGE_SIZE = 6;

  const ROW_COLORS = ["#5B8FF9", "#61DDAA", "#F6903D", "#E8684A"];

  const PATH_NAMES = ["straight", "curved", "stepCurved", "curvedS"] as const;

  const COLUMN_CONFIGS = [
    {},
    { head: "arrow" },
    { head: "arrow", tail: "arrow" },
    { dashSize: 5, backgroundColor: "white" },
    { head: "arrow", dashSize: 10, dashColor: "blue" },
  ];

  for (let rowIdx = 0; rowIdx < PATH_NAMES.length; rowIdx++) {
    const pathName = PATH_NAMES[rowIdx];
    const rowColor = ROW_COLORS[rowIdx];

    for (let colIdx = 0; colIdx < COLUMN_CONFIGS.length; colIdx++) {
      const colConfig = COLUMN_CONFIGS[colIdx];
      const cellX = colIdx * COL_SPACING;
      const cellY = -rowIdx * ROW_SPACING;

      const sourceId = `${pathName}-${colIdx}-source`;
      graph.addNode(sourceId, {
        x: cellX - NODE_SPACING / 2,
        y: cellY,
      });

      const targetId = `${pathName}-${colIdx}-target`;
      graph.addNode(targetId, {
        x: cellX + NODE_SPACING / 2,
        y: cellY + NODE_SPACING / 2,
      });

      graph.addEdge(sourceId, targetId, {
        size: EDGE_SIZE,
        color: colConfig.backgroundColor || rowColor,
        dashColor: colConfig.dashColor || rowColor,
        dashSize: colConfig.dashSize || 0,
        curvature: pathName === "curved" ? 0.3 : 0,
        path: pathName,
        head: colConfig.head,
        tail: colConfig.tail,
      });
    }
  }

  new Sigma(graph, container, {
    primitives: {
      edges: {
        variables: {
          dashColor: { type: "color", default: "#000" },
          dashSize: { type: "number", default: 0 },
        },
        paths: [pathLine(), pathCurved(), pathStepCurved(), pathCurvedS()],
        extremities: [extremityArrow()],
        layers: [
          layerPlain(),
          layerDashed({
            dashColor: { attribute: "dashColor" },
            dashSize: { attribute: "dashSize", default: 0, mode: "pixels" },
            gapColor: 0,
            gapSize: { value: 10, mode: "pixels" },
          }),
        ],
      },
    },
    styles: {
      nodes: [DEFAULT_STYLES.nodes, { size: 12, color: "darkgrey" }],
      edges: [
        DEFAULT_STYLES.edges,
        { path: { attribute: "path" }, head: { attribute: "head" }, tail: { attribute: "tail" } },
      ],
    },
    settings: {
      renderEdgeLabels: true,
      itemSizesReference: "positions",
      autoRescale: true,
    },
  });
</script>