| 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:11:38 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-29 20:11:38 -0700 |
| commit | 1cde86fe2a6985ac98bb276c9d08981de6318874 (patch) | |
| tree | 9fb8ffe9464edebbfdcbde11a1d95bb35a702bdc | |
| parent | 9e20ff98eaa55ddbff566f478faf7333b1f32f58 (diff) | |
I feel like I'm close
| -rw-r--r-- | public/assets/images/pointer-events-test.svg | 98 |
1 files changed, 86 insertions, 12 deletions
diff --git a/public/assets/images/pointer-events-test.svg b/public/assets/images/pointer-events-test.svg index d5130eb..59735f2 100644 --- a/public/assets/images/pointer-events-test.svg +++ b/public/assets/images/pointer-events-test.svg @@ -2,7 +2,8 @@ <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg - viewBox="-10 -10 120 120" + viewBox="-5 -10 110 120" + width="100%" version="1.1" id="svg1" xmlns:xlink="http://www.w3.org/1999/xlink" @@ -29,9 +30,18 @@ } circle { stroke: black; - fill: teal; stroke-width: 0.25px; } + g circle { + fill: crimson; + } + /*g:hover circle {*/ + /* transform: scale(3);*/ + /*}*/ + g#out circle { + fill: orange; + /*transform: scale(3);*/ + } </style> <g id="use2" @@ -1533,15 +1543,79 @@ cy="0" r="2.5" /> </g> - <script> - document.querySelectorAll('g').forEach(g => { - const circle = g.querySelector('circle'); - g.addEventListener('pointerover', e => { - circle.setAttributeNS(null, 'transform', 'scale(3)'); - }); - g.addEventListener('pointerleave', e => { - circle.removeAttributeNS(null, 'transform'); - }); - }) + <g id="out"/> + <script>//<![CDATA[ + const svg = document.querySelector('svg'); + 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)'); + + if (g && g.querySelector('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 => { + 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 (store.get(child) !== g || !e.relatedTarget) { + console.log('returning to', store.get(child)); + store.get(child).append(child); + store.delete(child); + } + }); + } + } 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> |
