Compare commits
No commits in common. "b93cfafc5aeba2e7baeb59cdd5f3c28932c61997" and "5781faaa47a158587a3a183fcedb9ed8d6b4a5b7" have entirely different histories.
b93cfafc5a
...
5781faaa47
|
|
@ -1,5 +1,3 @@
|
|||
import { deleteTooltip } from "./tooltip.js";
|
||||
|
||||
export class DomList {
|
||||
list;
|
||||
template;
|
||||
|
|
@ -10,7 +8,6 @@ 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]"));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { loadConfiguration } from "./configuration.js";
|
||||
import { atlasMetadata, makeAtlasImage } from "./atlas.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");
|
||||
|
|
@ -36,7 +37,6 @@ window.addEventListener("load", () => {
|
|||
|
||||
initializePlanner();
|
||||
initializeMenuResizing();
|
||||
initializeTooltips();
|
||||
|
||||
emitEvent("setup-end");
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ 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)
|
||||
|
|
@ -99,7 +98,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 = "";
|
||||
e.currentTarget.dataset.active = undefined;
|
||||
}
|
||||
|
||||
export function initializePlanner() {
|
||||
|
|
@ -122,66 +121,6 @@ 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");
|
||||
}
|
||||
|
|
@ -193,6 +132,7 @@ void {
|
|||
|
||||
function buildPlanner() {
|
||||
document.addEventListener("keydown", e => {
|
||||
console.log(e);
|
||||
if (e.key === "H") {
|
||||
suppressHover = !suppressHover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,109 +0,0 @@
|
|||
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;
|
||||
}
|
||||
18
style.css
18
style.css
|
|
@ -211,21 +211,3 @@ 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);*/
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue