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

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

<script>
  import Sigma from "sigma";
  import { extremityArrow, layerPlain, pathCurved, 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 graph = getSmallGraph({ multi: true, type: "mixed" });

  // Add parallel edges to showcase the feature:

  // Multiple directed edges, same direction (a -> b already exists)
  graph.addDirectedEdge("a", "b", { size: 3, color: "#F6903D", head: "arrow" });
  graph.addDirectedEdge("a", "b", { size: 3, color: "#FACC14", head: "arrow" });

  // Directed edges in both directions (c -> e already exists, add e -> c)
  graph.addDirectedEdge("e", "c", { size: 3, color: "#61DDAA", head: "arrow" });

  // Undirected parallel edges
  graph.addUndirectedEdge("d", "e", { size: 3, color: "#78D3F8" });
  graph.addUndirectedEdge("d", "e", { size: 3, color: "#247BA0" });

  new Sigma(graph, container, {
    primitives: {
      edges: {
        paths: [pathLine(), pathCurved(), pathLoop()],
        extremities: [extremityArrow()],
        layers: [layerPlain()],
      },
    },
    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",
        parallelPath: "curved",
        head: { attribute: "head" },
      },
    },
    settings: {
      itemSizesReference: "positions",
      autoRescale: true,
    },
  });
</script>