implement tooltips, begin block tooltips

scripts/dom-list.js

@@ -1,3 +1,5 @@
+import { deleteTooltip } from "./tooltip.js";
+
 export class DomList {
   list;
   template;
@@ -8,6 +10,7 @@ export class DomList {
   }
 
   clear() {
+    this.list.querySelectorAll("[data-tooltip]").forEach(e => deleteTooltip(Number(e.dataset.tooltip)))
     this.list.replaceChildren(...this.list.querySelectorAll("template, [data-keep]"));
   }
 

scripts/main.js

@@ -1,11 +1,10 @@
-import { atlasMetadata, makeAtlasImage } from "./atlas.js";
+import { loadConfiguration } from "./configuration.js";
-import { DomList } from "./dom-list.js";
 import { addEventToButton, addEventToInput, debounce, getElements } from "./dom-utils.js";
 import { emitEvent, listenTo } from "./events.js";
-import { loadConfiguration } from "./configuration.js";
-import { getState, setState, STATE } from "./state.js";
 import { initializePlanner } from "./planner.js";
 import { initializeMenuResizing } from "./resize-menus.js";
+import { getState, setState, STATE } from "./state.js";
+import { initializeTooltips } from "./tooltip.js";
 
 window.addEventListener("load", () => {
   emitEvent("setup-start");
@@ -37,6 +36,7 @@ window.addEventListener("load", () => {
 
   initializePlanner();
   initializeMenuResizing();
+  initializeTooltips();
 
   emitEvent("setup-end");
 

scripts/planner.js

@@ -2,6 +2,7 @@ import {atlasMetadata, makeAtlasImage} from "./atlas.js";
 import {DomList} from "./dom-list.js";
 import { emitEvent, listenTo } from "./events.js";
 import { Filter } from "./filter.js";
+import { createTooltip } from "./tooltip.js";
 
 let suppressHover = false;
 let multiblockSize = [7, 7, 5]; // width (screen x), depth (screen y), height (xy grids)
@@ -98,7 +99,7 @@ function listClickEvent(e) {
   const items = document.querySelectorAll("#block-list [data-index]");
   items.forEach(i => delete i.dataset.active);
   activeItem = Number(e.currentTarget.dataset.index);
-  e.currentTarget.dataset.active = undefined;
+  e.currentTarget.dataset.active = "";
 }
 
 export function initializePlanner() {
@@ -121,6 +122,66 @@ function buildBlockPicker() {
   atlasMetadata.forEach((m, i) => {
     const item = grid.makeItem();
     item.dataset.index = i.toString(10);
+    if (m.modules["plannerator:display_name"].display_name === "Lithium Heat Sink") {
+      console.log(m);
+void {
+  "cooling": 130,
+  "rules": [
+    {
+      "rules": [
+        {
+          "rules": [
+            {
+              "min": 2,
+              "max": 2,
+              "block": {
+                "metadata": 1,
+                "name": "nuclearcraft:solid_fission_sink2",
+                "type": "legacy_block",
+                "blockstate": {
+                  "type": "lead"
+                }
+              },
+              "type": "between"
+            },
+            {
+              "min": 1,
+              "max": 1,
+              "block": {
+                "metadata": 1,
+                "name": "nuclearcraft:solid_fission_sink2",
+                "type": "legacy_block",
+                "blockstate": {
+                  "type": "lead"
+                }
+              },
+              "type": "axial"
+            }
+          ],
+          "type": "and"
+        },
+        {
+          "min": 1,
+          "max": 6,
+          "block": {
+            "name": "nuclearcraft:overhaul_sfr:casing",
+            "type": "module"
+          },
+          "type": "between"
+        }
+      ],
+      "type": "and"
+    }
+  ]
+}
+    }
+    item.dataset.tooltip = createTooltip([
+        m.modules["plannerator:display_name"].display_name,
+        ...("nuclearcraft:overhaul_sfr:heat_sink" in m.modules ? [
+            "Heatsink",
+            `Cooling: ${m.modules["nuclearcraft:overhaul_sfr:heat_sink"].cooling ?? "???"} H/t`,
+        ] : []),
+    ]).toString(10);
     if (!filter.test(m.modules["plannerator:display_name"].display_name)) {
       item.classList.add("hidden");
     }
@@ -132,7 +193,6 @@ function buildBlockPicker() {
 
 function buildPlanner() {
   document.addEventListener("keydown", e => {
-    console.log(e);
     if (e.key === "H") {
       suppressHover = !suppressHover;
     }

scripts/tooltip.js

@@ -0,0 +1,109 @@
+import { debounce } from "./dom-utils.js";
+import { emitEvent, listenTo } from "./events.js";
+
+const tooltips = {};
+let tooltipsCounter = 0;
+let lastCoordinates = null;
+let suppressTooltips = false;
+let activeTooltipTarget = null;
+
+export function initializeTooltips() {
+  window.addEventListener("mousemove", () => {
+    if (lastCoordinates !== null) {
+      emitEvent("tooltips:hide");
+    }
+    lastCoordinates = null;
+  });
+  window.addEventListener("mousemove", debounce(e => {
+    lastCoordinates = { x: e.pageX, y: e.pageY };
+    emitEvent("tooltips:show");
+  }, 500));
+  window.addEventListener("wheel", () => {
+    if (lastCoordinates !== null) {
+      setTimeout(() => emitEvent("tooltips:show"), 200);
+    }
+  });
+
+  listenTo("tooltips:show", showTooltip);
+  listenTo("tooltips:hide", hideTooltip);
+
+  document.addEventListener("keydown", e => {
+    if (e.key === "T") {
+      suppressTooltips = !suppressTooltips;
+    }
+  });
+}
+
+export function createTooltip(data) {
+  const id = tooltipsCounter;
+  tooltips[id] = data;
+  tooltipsCounter++;
+  return id;
+}
+
+export function getTooltip(id) {
+  return tooltips[id];
+}
+
+export function deleteTooltip(id) {
+  delete tooltips[id];
+}
+
+function showTooltip() {
+  if (suppressTooltips) return;
+  if (!lastCoordinates) return;
+  if (activeTooltipTarget) hideTooltip();
+
+  const target = document.elementFromPoint(lastCoordinates.x, lastCoordinates.y);
+  if (!target) return;
+  if (!target.dataset.tooltip) return;
+
+  const dom = createTooltipDom(target.dataset.tooltip);
+  if (!dom) return;
+
+  const targetRect = target.getBoundingClientRect();
+  dom.style.left = `${targetRect.left}px`;
+  dom.style.top = `${targetRect.bottom}px`;
+
+  target.appendChild(dom);
+
+  const domRect = dom.getBoundingClientRect();
+  const windowWidth = window.innerWidth, windowHeight = window.innerHeight;
+  dom.style.left = `${Math.min(targetRect.left, windowWidth - domRect.width)}px`;
+  dom.style.top = `${Math.min(targetRect.bottom, windowHeight - domRect.height)}px`;
+
+  activeTooltipTarget = target;
+}
+function hideTooltip() {
+  if (suppressTooltips) return;
+  if (!activeTooltipTarget) return;
+
+  const tooltip = activeTooltipTarget.querySelector(".tooltip");
+  if (!tooltip) return;
+
+  activeTooltipTarget.removeChild(tooltip);
+  activeTooltipTarget = null;
+}
+
+function createTooltipDom(id) {
+  const data = tooltips[id];
+  if (!Array.isArray(data)) {
+    console.warn("tooltip %s is not an array: %o", id, data);
+    return null;
+  }
+  const div = document.createElement("div");
+  div.classList.add("tooltip");
+  for (const row of data) {
+    const rowElem = document.createElement("div");
+
+    if (typeof row === "string") {
+      rowElem.innerText = row;
+    } else {
+      // TODO: support rich tooltips
+      throw row;
+    }
+
+    div.appendChild(rowElem);
+  }
+  return div;
+}

style.css

@@ -211,3 +211,21 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
 #block-list [data-active] {
     outline: calc(var(--scale-factor) * 1px) solid var(--block-active-outline-color, #000);
 }
+#block-list [data-index]:hover:not([data-active]) {
+    outline: calc(var(--scale-factor) * 1px) solid var(--block-hover-outline-color, #6666);
+}
+
+[data-tooltip] {
+    position: relative;
+}
+[data-tooltip] > .tooltip {
+    position: fixed;
+    z-index: 10;
+    background: var(--tooltip-background, #222d);
+    color: var(--tooltip-foreground, #fff);
+    font-size: var(--tooltip-font-size, .8em);
+    /*border-radius: var(--tooltip-border-radius, 0.25em);*/
+    padding: var(--tooltip-padding, 0.25em);
+    border: var(--tooltip-border-size, 1px) solid var(--tooltip-border-color, #fff);
+    /*max-width: var(--tooltip-width, 200px);*/
+}