Function linkElements

crates/explorer/src/index.js:138–182

};

const linkElements = element => {
  element.addEventListener(
    "click",
    event => {
      eachElementWithSameWasmOff(event, elem => {
        if (elem === event.target) return; // Only scroll into view the other elements.
        elem.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "nearest",
        });
      });
    },
    { passive: true },
  );

  element.addEventListener("mouseenter", event => {
    let offset = event.target.dataset.wasmOffset;
    if (offset === null) return;

    // Gather all elements related to the desired offset.
    let elems = linkedElementCache.get(offset);

    // Perform the DOM modification inside an animation frame to give the browser a bit of
    // a breathing room.
    window.requestAnimationFrame(() => {
      // Draw a 2px dark outline in each block of instructions so it stands out a bit better
      // when hovered.
      let outline = `2px solid ${rgbToCss(rgbDarken(rgbForOffset(offset)))}`;
      for (const elem of elems) {
        elem.setAttribute("title", `Wasm offset @ ${offset}`);
        elem.classList.add("hovered");
        elem.style.outline = outline;
      }
    });
  });

  element.addEventListener("mouseleave", event => {
    eachElementWithSameWasmOff(event, elem => {
      elem.removeAttribute("title");
      elem.classList.remove("hovered");
      elem.style.outline = "";
    });
  });
};

/*** Rendering *****************************************************************/