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

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

<script>
  import Sigma from "sigma";
  import { extremityArrow, layerDashed, layerFill, layerPlain, pathLine, pathLoop } from "sigma/rendering";
  import { DEFAULT_STYLES } from "sigma/types";

  import { getSmallGraph } from "../_data/small-graph";

  const container = document.getElementById("sigma-container") as HTMLElement;
  const PI = Math.PI;
  const graph = getSmallGraph({ multi: true });

  // Add self-loops showcasing various features:
  graph.addEdge("a", "a", { size: 3, color: "#E8684A", head: "arrow" });
  graph.addEdge("d", "d", { size: 2, color: "#9270CA", head: "arrow", loopAngle: (3 * PI) / 2, dashSize: 6 });
  graph.addEdge("e", "e", { size: 6, color: "#5B8FF9", loopAngle: PI, loopSpread: (110 * PI) / 180 });
  graph.addEdge("f", "f", { size: 2, color: "#9270CA", head: "arrow", loopAngle: 0, loopSpread: (70 * PI) / 180 });

  // Add parallel self-loops on a few nodes to showcase automatic angle distribution:
  graph.addEdge("b", "b", { size: 3, color: "#61DDAA", head: "arrow", tail: "arrow" });
  graph.addEdge("b", "b", { size: 2, color: "#F6903D", head: "arrow", tail: "arrow" });
  graph.addEdge("c", "c", { size: 3, color: "#A33DF6", head: "arrow" });
  graph.addEdge("c", "c", { size: 2, color: "#61ADDD", head: "arrow" });
  graph.addEdge("c", "c", { size: 2, color: "#9270CA", head: "arrow" });

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        layers: [layerFill()],
      },
      edges: {
        paths: [pathLine(), pathLoop()],
        variables: { dashSize: { type: "number", default: 0 } },
        extremities: [extremityArrow()],
        layers: [
          layerPlain(),
          layerDashed({
            dashSize: { attribute: "dashSize", default: 0, mode: "pixels" },
            gapSize: { value: 6, mode: "pixels" },
            gapColor: "#ffffff",
          }),
        ],
      },
    },
    styles: {
      nodes: {
        ...DEFAULT_STYLES.nodes,
        color: { attribute: "color" },
        size: { attribute: "size" },
      },
      edges: {
        ...DEFAULT_STYLES.edges,
        color: { attribute: "color" },
        size: { attribute: "size" },
        path: "straight",
        selfLoopPath: "loop",
        head: { attribute: "head" },
        tail: { attribute: "tail" },
      },
    },
    settings: {
      itemSizesReference: "positions",
      autoRescale: true,
    },
  });
</script>