WIP: fix sight line

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:28 -07:00
parent da6916c0e6
commit a67bff184b

View File

@ -513,9 +513,7 @@ const Counter = new function() {
// xAttr: original.getAttribute('x'),
// yAttr: original.getAttribute('y'),
transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')
}
console.log(current.transform, previous.transform);
};
[current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);
[previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);
@ -670,6 +668,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
group.appendChild(point);
group.addEventListener('pointerover', e => {
// console.log('group pointer over')
group.classList.add('hover');
});
@ -710,6 +709,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
});
point.addEventListener('pointerover', e => {
// console.log('pointerover', this);
let selected = RecordSheet.getSelected();
if (selected) {
@ -718,24 +718,27 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
sl = document.querySelector('line.sight-line');
if (counter && (!sl || sl.classList.contains('active'))) {
let source = ptGrp.querySelector(`use[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`),
[x1, y1] = [source.getAttribute('x'), source.getAttribute('y')],
[x2, y2] = [e.target.getAttribute('x'), e.target.getAttribute('y')];
let source = ptGrp.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`);
// [x1, y1] = [source.getAttribute('x'), source.getAttribute('y')],
// [x2, y2] = [e.target.getAttribute('x'), e.target.getAttribute('y')];
if (x1 !== x2 || y1 !== y2) {
let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {
// let { x: svgX1, y: svgY1 } = ptGrpToSvgPt(x1, y1);
// let { x: svgX2, y: svgY2 } = ptGrpToSvgPt(x2, y2);
let sightLine = document.createElementNS(svgns, 'line');
let [x1, y1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g);
let [x2, y2] = e.target.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
sightLine.classList.add('sight-line');
sightLine.classList.add('active');
sightLine.setAttributeNS(null, 'x1', svgX1);
sightLine.setAttributeNS(null, 'y1', svgY1);
sightLine.setAttributeNS(null, 'x2', svgX2);
sightLine.setAttributeNS(null, 'y2', svgY2);
sightLine.setAttributeNS(null, 'x1', x1);
sightLine.setAttributeNS(null, 'y1', y1);
sightLine.setAttributeNS(null, 'x2', x2);
sightLine.setAttributeNS(null, 'y2', y2);
document.getElementById('grid').appendChild(sightLine);
grid.appendChild(sightLine);
let coords = [
counter.dataset.x,
@ -756,10 +759,11 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}
});
point.addEventListener('mouseout', e => {
point.addEventListener('pointerout', e => {
let sl = svg.querySelector('.sight-line.active');
if (sl) {
// console.log('deleting sight line');
info.querySelector('#hex-count').textContent = '-';
info.style.display = 'none';
ptGrp.querySelectorAll('.active').forEach(el => el.removeAttribute('class'));