WIP: fix sight line
This commit is contained in:
parent
9dff1c289d
commit
83ba223e01
34
index.js
34
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'));
|
||||
|
Loading…
x
Reference in New Issue
Block a user