59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import {DRAGGABLE_ELEMENT_CLASSNAME} from './config.js';
|
|
|
|
export class Overlay {
|
|
sim = undefined;
|
|
constructor(sim) {
|
|
this.sim = sim;
|
|
|
|
// Add info text box
|
|
const infoBox = document.createElement('div');
|
|
this.sim.div.appendChild(infoBox);
|
|
this.infoBox = infoBox;
|
|
infoBox.style.position = 'relative';
|
|
infoBox.style.display = 'inline-block';
|
|
infoBox.style.top = 0;
|
|
infoBox.style.left = 0;
|
|
infoBox.width = 'fit-content';
|
|
infoBox.style.zIndex = 1;
|
|
infoBox.classList.add(DRAGGABLE_ELEMENT_CLASSNAME);
|
|
}
|
|
|
|
renderInfo() {
|
|
this.infoBox.innerHTML = '';
|
|
const table = document.createElement('table');
|
|
for (let [k, v] of Object.entries(this.sim.info)) {
|
|
let row = document.createElement('tr');
|
|
let keyCell = document.createElement('td');
|
|
keyCell.innerHTML = `${k}: `;
|
|
row.appendChild(keyCell);
|
|
let vs = Array.isArray(v) ? v : [v];
|
|
for (let x of vs) {
|
|
let valueCell = document.createElement('td');
|
|
valueCell.innerHTML = x;
|
|
row.appendChild(valueCell);
|
|
}
|
|
table.appendChild(row);
|
|
}
|
|
this.infoBox.appendChild(table);
|
|
}
|
|
|
|
// Update positions of draggable items
|
|
updateDraggable() {
|
|
const elements = document.querySelectorAll(`.${DRAGGABLE_ELEMENT_CLASSNAME}`);
|
|
for (let el of elements) {
|
|
if (!el.dragging) continue;
|
|
const {
|
|
elementStart: {x: x0, y: y0},
|
|
pointerStart: {x: x1, y: y1},
|
|
pointerEnd: {x: x2, y: y2}
|
|
} = el.dragging;
|
|
const dx = x2 - x1;
|
|
const dy = y2 - y1;
|
|
const left = x0 + dx;
|
|
const top = y0 + dy;
|
|
el.style.left = `${left}px`;
|
|
el.style.top = `${top}px`;
|
|
}
|
|
}
|
|
}
|