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

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

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

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

  const SOURCE_COLOR = "#7E3D9C";
  const TARGET_COLOR = "#ED8666";

  // Each row has its own path:
  const PATHS = ["straight", "curved", "stepCurved", "curvedS"] as const;

  // Each column shows edges fillings and extremities in its own way:
  const COLUMNS = [
    { useGradient: true },
    { head: "arrow" },
    { head: "arrow", tail: "arrow", useGradient: true },
    { dashSize: 5, dashColor: "#ffffff99" },
    { head: "arrow", dashSize: 10, dashColor: "#ffffff99", useGradient: true },
  ];

  const graph = new Graph();
  PATHS.forEach((path, row) => {
    COLUMNS.forEach((config, col) => {
      const [x, y] = [col * 120, -row * 80];
      const source = graph.addNode(`${path}-${col}-source`, { x: x - 30, y, color: SOURCE_COLOR });
      const target = graph.addNode(`${path}-${col}-target`, {
        x: x + 30,
        y: y + 30,
        color: TARGET_COLOR,
        shape: "triangle",
      });
      graph.addEdge(source, target, { size: 6, path, curvature: path === "curved" ? 0.3 : 0, ...config });
    });
  });

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        shapes: [sdfCircle(), sdfTriangle()],
        layers: [layerFill()],
      },
      edges: {
        variables: {
          dashColor: { type: "color", default: "#000" },
          dashSize: { type: "number", default: 0 },
          useGradient: { type: "boolean", default: false },
        },
        paths: [pathLine(), pathCurved(), pathStepCurved(), pathCurvedS()],
        extremities: [extremityArrow()],
        layers: [
          layerPlain({ color: { node: "source" } }),
          layerGradient({
            stops: [{ node: "source" }, { node: "target" }],
            enabled: { attribute: "useGradient" },
          }),
          layerDashed({
            dashColor: { attribute: "dashColor" },
            dashSize: { attribute: "dashSize" },
            gapSize: { value: 10 },
          }),
        ],
      },
    },
    styles: {
      nodes: [DEFAULT_STYLES.nodes, { size: 12, shape: { attribute: "shape" } }],
      edges: [
        DEFAULT_STYLES.edges,
        { path: { attribute: "path" }, head: { attribute: "head" }, tail: { attribute: "tail" } },
      ],
    },
    settings: {
      renderEdgeLabels: true,
      itemSizesReference: "positions",
      autoRescale: true,
    },
  });
</script>