30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
|
// PumpingStation editor — hover-coupling between side-panel input rows
|
||
|
|
// and the SVG markers they control. Each .ps-row that carries
|
||
|
|
// data-couples-line="<svg-element-id>" highlights that SVG line on
|
||
|
|
// mouseenter and clears the highlight on mouseleave.
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
const ns = window.PSEditor = window.PSEditor || {};
|
||
|
|
|
||
|
|
ns.hoverCouple = {
|
||
|
|
init() {
|
||
|
|
document.querySelectorAll('.ps-diag-side .ps-row[data-couples-line]').forEach((row) => {
|
||
|
|
const targetId = row.getAttribute('data-couples-line');
|
||
|
|
const target = document.getElementById(targetId);
|
||
|
|
if (!target) return;
|
||
|
|
const enter = () => target.classList.add('ps-line-highlight');
|
||
|
|
const leave = () => target.classList.remove('ps-line-highlight');
|
||
|
|
row.addEventListener('mouseenter', enter);
|
||
|
|
row.addEventListener('mouseleave', leave);
|
||
|
|
// Also highlight while the input inside the row has focus, so
|
||
|
|
// the user keeps the visual feedback while typing.
|
||
|
|
const input = row.querySelector('input');
|
||
|
|
if (input) {
|
||
|
|
input.addEventListener('focus', enter);
|
||
|
|
input.addEventListener('blur', leave);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
};
|
||
|
|
})();
|