message: Improves load-gexf-file example
diff: @@ -2,19 +2,24 @@ import Sigma from "sigma";
  import Graph from "graphology";
  import { parse } from "graphology-gexf/browser";
  -function init(graph: Graph) {
  +// Load external GEXF file:
  +fetch("./public/arctic.gexf")
  + .then((res) => res.text())
  + .then((gexf) => {
  + // Parse GEXF string:
  + const graph = parse(Graph, gexf);
  +
  + // Retrieve some useful DOM elements:
  const container = document.getElementById("sigma-container") as HTMLElement;
  - const controls = document.getElementById("controls") as HTMLElement;
  + const zoomInBtn = document.getElementById("zoom-in") as HTMLButtonElement;
  + const zoomOutBtn = document.getElementById("zoom-out") as HTMLButtonElement;
  + const zoomResetBtn = document.getElementById("zoom-reset") as HTMLButtonElement;
  + const labelsThresholdRange = document.getElementById("labels-density") as HTMLInputElement;
  + // Instanciate sigma:
  const renderer = new Sigma(graph, container);
  const camera = renderer.getCamera();
  - // Bind interactions:
  - const zoomInBtn = controls.querySelector("#zoom-in") as HTMLButtonElement;
  - const zoomOutBtn = controls.querySelector("#zoom-out") as HTMLButtonElement;
  - const zoomResetBtn = controls.querySelector("#zoom-reset") as HTMLButtonElement;
  - const labelsThresholdRange = controls.querySelector("#labels-density") as HTMLInputElement;
  -
  // Bind zoom manipulation buttons
  zoomInBtn.addEventListener("click", () => {
  camera.animatedZoom({ duration: 600 });
  @@ -33,9 +38,4 @@ function init(graph: Graph) {
  // Set proper range initial value:
  labelsThresholdRange.value = renderer.getSetting("labelRenderedSizeThreshold") + "";
  -}
  -
  -// Load external GEXF file:
  -fetch("./public/arctic.gexf")
  - .then((res) => res.text())
  - .then((xml) => init(parse(Graph, xml)));
  + });
  