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

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

<script>
  import { downloadAsImage } from "@sigma/export-image";
  import Sigma from "sigma";

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

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

  const graph = getSmallGraph();

  const { format, resetCamera } = registerControls({
    format: {
      type: "select",
      label: "Format",
      default: "png",
      options: [
        { label: "PNG", value: "png" },
        { label: "JPEG", value: "jpeg" },
      ],
    },
    resetCamera: { type: "boolean", label: "Reset camera", default: false },
    save: {
      type: "button",
      label: "Save image",
      action: () => {
        downloadAsImage(renderer, {
          format: format as "png" | "jpeg",
          fileName: "graph",
          backgroundColor: "#ffffff",
          cameraState: resetCamera ? { x: 0.5, y: 0.5, angle: 0, ratio: 1 } : undefined,
        });
      },
    },
  });

  const renderer = new Sigma(graph, container);
</script>