From 83ba223e0175b3a62a25a67ed26c2a8b8bc291a8 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 5 Apr 2024 13:55:46 -0700
Subject: WIP: fix sight line
---
index.js | 34 +++++++++++++++++++---------------
1 file changed, 19 insertions(+), 15 deletions(-)
(limited to 'index.js')
diff --git a/index.js b/index.js
index f4ed7fb..a36291b 100644
--- a/index.js
+++ b/index.js
@@ -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'));
--
cgit v1.2.3