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

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

<script>
  import Graph from "graphology";
  import { parse } from "graphology-gexf/browser";
  import Sigma from "sigma";

  import { registerControls } from "../_controls";

  const res = await fetch("/data/arctic.gexf");
  const gexf = await res.text();
  const graph = parse(Graph, gexf);

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

  const { enablePanning, enableZooming, enableRotation, boundCamera, minRatio, maxRatio, tolerance } = registerControls(
    {
      enablePanning: { type: "boolean", label: "Enable panning", default: true },
      enableZooming: { type: "boolean", label: "Enable zooming", default: true },
      enableRotation: { type: "boolean", label: "Enable rotation", default: true },
      boundCamera: { type: "boolean", label: "Bound camera", default: true },
      minRatio: { type: "number", label: "Min zoom ratio", default: 0.08, min: 0.001, max: 1, step: 0.001 },
      maxRatio: { type: "number", label: "Max zoom ratio", default: 3, min: 0.1, max: 10, step: 0.1 },
      tolerance: { type: "number", label: "Pan tolerance (px)", default: 500, min: 0, max: 2000, step: 50 },
    },
  );

  const renderer = new Sigma(graph, container, {
    settings: {
      enableCameraPanning: enablePanning,
      enableCameraZooming: enableZooming,
      enableCameraRotation: enableRotation,
      minCameraRatio: enableZooming ? minRatio : null,
      maxCameraRatio: enableZooming ? maxRatio : null,
      cameraPanBoundaries: boundCamera ? { tolerance } : null,
    },
  });
</script>