| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-29 20:47:14 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-29 20:47:14 -0700 |
| commit | deb3f2db61a28aee3f20bb74de7acbf9d2c5c466 (patch) | |
| tree | f082f8df644b36d3ba7450abbdd36a5e933c50f9 | |
| parent | f1f8ced0b8ec170802b93777cf79fdabb48cacd3 (diff) | |
Some cleanup
| -rw-r--r-- | public/assets/images/pointer-events-test.svg | 60 |
1 files changed, 16 insertions, 44 deletions
diff --git a/public/assets/images/pointer-events-test.svg b/public/assets/images/pointer-events-test.svg index 1d27986..fd6c821 100644 --- a/public/assets/images/pointer-events-test.svg +++ b/public/assets/images/pointer-events-test.svg @@ -1551,73 +1551,45 @@ const out = document.querySelector('#out'); const store = new Map(); - //svg.addEventListener('pointerout', e => { - // if (e.target !== svg) - // console.log('SVG pointerout', 'from', e.target?.parentElement, 'to', e.relatedTarget?.parentElement); - //}); - - //const tiles = svg.querySelector(' - svg.addEventListener('pointerover', e => { console.log('SVG pointerover', e.target.closest('g')); const g = e.target.closest('g:not(#out)'); + const circle = g && g.querySelector('circle'); - if (g && g.querySelector('circle')) { + if (circle) { out.setAttributeNS(null, 'transform', g.getAttributeNS(null, 'transform')); - const circle = g.querySelector('circle'); store.set(circle, g); out.append(circle); } - //if (e.target.tagName === 'use') { - // out.setAttributeNS(null, 'transform', e.target.getAttribute - //} }); svg.addEventListener('pointerout', e => { console.log('pointer out target', e.target); const g = e.target.closest('g'); + if (g) { - if (g.id === 'out') { - console.log('SVG pointerout OUT', store.get(e.target)); - [...out.children].forEach(child => { + console.log('SVG pointerout', e.target.closest('g')); + [...out.children].forEach(child => { + console.log('child', child, 'belongs to', store.get(child)); + console.log('relatedTarget', e.relatedTarget); + if (!e.relatedTarget || store.get(child) !== g || e.relatedTarget !== child) { + console.log('returning to', store.get(child)); store.get(child).append(child); store.delete(child); - }); - } else { - console.log('SVG pointerout', e.target.closest('g')); - [...out.children].forEach(child => { - console.log('child', child, 'belongs to', store.get(child)); - console.log('relatedTarget', e.relatedTarget); - if (!e.relatedTarget || store.get(child) !== g || e.relatedTarget !== child) { - console.log('returning to', store.get(child)); - store.get(child).append(child); - store.delete(child); - } - }); - } + } + }); } else { - console.log('SVG pointerout', e.target); + if (g && g.id === 'out') + console.log('SVG pointerout OUT', store.get(e.target)); + else + console.log('SVG pointerout', e.target); + [...out.children].forEach(child => { store.get(child).append(child); store.delete(child); }); } }); - - //document.querySelectorAll('g:not(#out)').forEach(g => { - // const circle = g.querySelector('circle'); - // - // g.addEventListener('pointerover', e => { - // console.log('pointer over', g.id); - // svg.append(g); - // circle.setAttributeNS(null, 'transform', 'scale(3)'); - // }); - // - // g.addEventListener('pointerleave', e => { - // console.log('pointer leave', g.id); - // circle.removeAttributeNS(null, 'transform'); - // }); - //}) //]]> </script> </svg> |
