ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some cleanup

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-29 20:47:14 -07:00
parent f1f8ced0b8
commit deb3f2db61
1 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/assets/images/pointer-events-test.svg
View File

@ -1551,73 +1551,45 @@
const out = document.querySelector('#out'); const out = document.querySelector('#out');
const store = new Map(); 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 => { svg.addEventListener('pointerover', e => {
console.log('SVG pointerover', e.target.closest('g')); console.log('SVG pointerover', e.target.closest('g'));
const g = e.target.closest('g:not(#out)'); 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')); out.setAttributeNS(null, 'transform', g.getAttributeNS(null, 'transform'));
const circle = g.querySelector('circle');
store.set(circle, g); store.set(circle, g);
out.append(circle); out.append(circle);
} }
//if (e.target.tagName === 'use') {
// out.setAttributeNS(null, 'transform', e.target.getAttribute
//}
}); });
svg.addEventListener('pointerout', e => { svg.addEventListener('pointerout', e => {
console.log('pointer out target', e.target); console.log('pointer out target', e.target);
const g = e.target.closest('g'); const g = e.target.closest('g');
if (g) { if (g) {
if (g.id === 'out') { console.log('SVG pointerout', e.target.closest('g'));
console.log('SVG pointerout OUT', store.get(e.target)); [...out.children].forEach(child => {
[...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.get(child).append(child);
store.delete(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 { } 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 => { [...out.children].forEach(child => {
store.get(child).append(child); store.get(child).append(child);
store.delete(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> </script>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 27 KiB