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

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

<script>
  import Graph from "graphology";
  import ForceSupervisor from "graphology-layout-force/worker";
  import Sigma from "sigma";

  import data from "../_data/data.json";
  import { DEFAULT_STYLES } from "sigma/types";

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

  const graph = new Graph();
  graph.import(data);

  const renderer = new Sigma(graph, container, {
    settings: {
      autoRescale: "once",
      itemSizesReference: "positions",
      enableNodeDrag: true,
      getDraggedNodes: (node) => (graph.getNodeAttribute(node, "label").includes("b") ? [] : [node]),
    },
    styles: {
      nodes: [
        DEFAULT_STYLES.nodes,
        {
          size: (attributes) => attributes.size / 2,
          cursor: "grab",
        },
        {
          whenState: "isDragged",
          then: {
            labelVisibility: "visible",
            backdropVisibility: "visible",
            cursor: "grabbing",
          },
        },
      ],
      stage: [
        {
          whenState: "isDragging",
          then: { cursor: "grabbing" },
        },
      ],
    },
  });

  // Force layout: pin nodes while they are being dragged
  const layout = new ForceSupervisor(graph, {
    settings: {
      repulsion: 0.2,
      attraction: 0.0002,
    },
    isNodeFixed: (node) => renderer.getNodeState(node).isDragged,
  });
  layout.start();
</script>