Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-08 13:33:15 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-08 13:33:15 -0700
commit9d76272f7b57f9d5271b3c5e2c6d0683ff80d019 (patch)
treeb3c9c779894dbbaa11ee55c0ac5a801ce6be8a10
parentd2dba237863c0cf681677a1d6044be3f602e0d6e (diff)
Clean up some files
Diffstat
-rw-r--r--public/assets/images/pointer-events-test.svg481
1 files changed, 0 insertions, 481 deletions
diff --git a/public/assets/images/pointer-events-test.svg b/public/assets/images/pointer-events-test.svg
deleted file mode 100644
index a75e115..0000000
--- a/public/assets/images/pointer-events-test.svg
+++ /dev/null
@@ -1,481 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg
- viewBox="-5 -10 110 120"
- version="1.1"
- id="svg1"
- xmlns="http://www.w3.org/2000/svg">
- <defs id="defs1">
- <rect id="rect1" width="10" height="10" x="-5" y="-5" />
- </defs>
- <style>
- rect {
- fill: inherit;
- stroke: black;
- stroke-width: 0.25px;
- }
- g use {
- fill: gray;
- }
- g:hover use {
- fill: gold;
- }
- circle {
- stroke: black;
- stroke-width: 0.25px;
- }
- g circle {
- fill: crimson;
- }
- g#out circle {
- fill: deepskyblue;
- transform: scale(3);
- }
- </style>
- <g id="g1" transform="translate(5,5)">
- <use x="0" y="0" href="#rect1" id="use1" />
- <circle id="circle1" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g2" transform="translate(5,15)">
- <use x="0" y="0" href="#rect1" id="use2" />
- <circle id="circle2" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g3" transform="translate(5,25)">
- <use x="0" y="0" href="#rect1" id="use3" />
- <circle id="circle3" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g4" transform="translate(5,35)">
- <use x="0" y="0" href="#rect1" id="use4" />
- <circle id="circle4" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g5" transform="translate(5,45)">
- <use x="0" y="0" href="#rect1" id="use5" />
- <circle id="circle5" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g6" transform="translate(5,55)">
- <use x="0" y="0" href="#rect1" id="use6" />
- <circle id="circle6" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g7" transform="translate(5,65)">
- <use x="0" y="0" href="#rect1" id="use7" />
- <circle id="circle7" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g8" transform="translate(5,75)">
- <use x="0" y="0" href="#rect1" id="use8" />
- <circle id="circle8" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g9" transform="translate(5,85)">
- <use x="0" y="0" href="#rect1" id="use9" />
- <circle id="circle9" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g10" transform="translate(5,95)">
- <use x="0" y="0" href="#rect1" id="use10" />
- <circle id="circle10" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g11" transform="translate(15,5)">
- <use x="0" y="0" href="#rect1" id="use11" />
- <circle id="circle11" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g12" transform="translate(15,15)">
- <use x="0" y="0" href="#rect1" id="use12" />
- <circle id="circle12" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g13" transform="translate(15,25)">
- <use x="0" y="0" href="#rect1" id="use13" />
- <circle id="circle13" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g14" transform="translate(15,35)">
- <use x="0" y="0" href="#rect1" id="use14" />
- <circle id="circle14" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g15" transform="translate(15,45)">
- <use x="0" y="0" href="#rect1" id="use15" />
- <circle id="circle15" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g16" transform="translate(15,55)">
- <use x="0" y="0" href="#rect1" id="use16" />
- <circle id="circle16" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g17" transform="translate(15,65)">
- <use x="0" y="0" href="#rect1" id="use17" />
- <circle id="circle17" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g18" transform="translate(15,75)">
- <use x="0" y="0" href="#rect1" id="use18" />
- <circle id="circle18" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g19" transform="translate(15,85)">
- <use x="0" y="0" href="#rect1" id="use19" />
- <circle id="circle19" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g20" transform="translate(15,95)">
- <use x="0" y="0" href="#rect1" id="use20" />
- <circle id="circle20" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g21" transform="translate(25,5)">
- <use x="0" y="0" href="#rect1" id="use21" />
- <circle id="circle21" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g22" transform="translate(25,15)">
- <use x="0" y="0" href="#rect1" id="use22" />
- <circle id="circle22" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g23" transform="translate(25,25)">
- <use x="0" y="0" href="#rect1" id="use23" />
- <circle id="circle23" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g24" transform="translate(25,35)">
- <use x="0" y="0" href="#rect1" id="use24" />
- <circle id="circle24" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g25" transform="translate(25,45)">
- <use x="0" y="0" href="#rect1" id="use25" />
- <circle id="circle25" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g26" transform="translate(25,55)">
- <use x="0" y="0" href="#rect1" id="use26" />
- <circle id="circle26" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g27" transform="translate(25,65)">
- <use x="0" y="0" href="#rect1" id="use27" />
- <circle id="circle27" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g28" transform="translate(25,75)">
- <use x="0" y="0" href="#rect1" id="use28" />
- <circle id="circle28" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g29" transform="translate(25,85)">
- <use x="0" y="0" href="#rect1" id="use29" />
- <circle id="circle29" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g30" transform="translate(25,95)">
- <use x="0" y="0" href="#rect1" id="use30" />
- <circle id="circle30" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g31" transform="translate(35,5)">
- <use x="0" y="0" href="#rect1" id="use31" />
- <circle id="circle31" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g32" transform="translate(35,15)">
- <use x="0" y="0" href="#rect1" id="use32" />
- <circle id="circle32" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g33" transform="translate(35,25)">
- <use x="0" y="0" href="#rect1" id="use33" />
- <circle id="circle33" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g34" transform="translate(35,35)">
- <use x="0" y="0" href="#rect1" id="use34" />
- <circle id="circle34" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g35" transform="translate(35,45)">
- <use x="0" y="0" href="#rect1" id="use35" />
- <circle id="circle35" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g36" transform="translate(35,55)">
- <use x="0" y="0" href="#rect1" id="use36" />
- <circle id="circle36" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g37" transform="translate(35,65)">
- <use x="0" y="0" href="#rect1" id="use37" />
- <circle id="circle37" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g38" transform="translate(35,75)">
- <use x="0" y="0" href="#rect1" id="use38" />
- <circle id="circle38" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g39" transform="translate(35,85)">
- <use x="0" y="0" href="#rect1" id="use39" />
- <circle id="circle39" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g40" transform="translate(35,95)">
- <use x="0" y="0" href="#rect1" id="use40" />
- <circle id="circle40" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g41" transform="translate(45,5)">
- <use x="0" y="0" href="#rect1" id="use41" />
- <circle id="circle41" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g42" transform="translate(45,15)">
- <use x="0" y="0" href="#rect1" id="use42" />
- <circle id="circle42" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g43" transform="translate(45,25)">
- <use x="0" y="0" href="#rect1" id="use43" />
- <circle id="circle43" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g44" transform="translate(45,35)">
- <use x="0" y="0" href="#rect1" id="use44" />
- <circle id="circle44" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g45" transform="translate(45,45)">
- <use x="0" y="0" href="#rect1" id="use45" />
- <circle id="circle45" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g46" transform="translate(45,55)">
- <use x="0" y="0" href="#rect1" id="use46" />
- <circle id="circle46" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g47" transform="translate(45,65)">
- <use x="0" y="0" href="#rect1" id="use47" />
- <circle id="circle47" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g48" transform="translate(45,75)">
- <use x="0" y="0" href="#rect1" id="use48" />
- <circle id="circle48" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g49" transform="translate(45,85)">
- <use x="0" y="0" href="#rect1" id="use49" />
- <circle id="circle49" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g50" transform="translate(45,95)">
- <use x="0" y="0" href="#rect1" id="use50" />
- <circle id="circle50" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g51" transform="translate(55,5)">
- <use x="0" y="0" href="#rect1" id="use51" />
- <circle id="circle51" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g52" transform="translate(55,15)">
- <use x="0" y="0" href="#rect1" id="use52" />
- <circle id="circle52" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g53" transform="translate(55,25)">
- <use x="0" y="0" href="#rect1" id="use53" />
- <circle id="circle53" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g54" transform="translate(55,35)">
- <use x="0" y="0" href="#rect1" id="use54" />
- <circle id="circle54" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g55" transform="translate(55,45)">
- <use x="0" y="0" href="#rect1" id="use55" />
- <circle id="circle55" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g56" transform="translate(55,55)">
- <use x="0" y="0" href="#rect1" id="use56" />
- <circle id="circle56" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g57" transform="translate(55,65)">
- <use x="0" y="0" href="#rect1" id="use57" />
- <circle id="circle57" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g58" transform="translate(55,75)">
- <use x="0" y="0" href="#rect1" id="use58" />
- <circle id="circle58" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g59" transform="translate(55,85)">
- <use x="0" y="0" href="#rect1" id="use59" />
- <circle id="circle59" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g60" transform="translate(55,95)">
- <use x="0" y="0" href="#rect1" id="use60" />
- <circle id="circle60" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g61" transform="translate(65,5)">
- <use x="0" y="0" href="#rect1" id="use61" />
- <circle id="circle61" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g62" transform="translate(65,15)">
- <use x="0" y="0" href="#rect1" id="use62" />
- <circle id="circle62" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g63" transform="translate(65,25)">
- <use x="0" y="0" href="#rect1" id="use63" />
- <circle id="circle63" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g64" transform="translate(65,35)">
- <use x="0" y="0" href="#rect1" id="use64" />
- <circle id="circle64" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g65" transform="translate(65,45)">
- <use x="0" y="0" href="#rect1" id="use65" />
- <circle id="circle65" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g66" transform="translate(65,55)">
- <use x="0" y="0" href="#rect1" id="use66" />
- <circle id="circle66" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g67" transform="translate(65,65)">
- <use x="0" y="0" href="#rect1" id="use67" />
- <circle id="circle67" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g68" transform="translate(65,75)">
- <use x="0" y="0" href="#rect1" id="use68" />
- <circle id="circle68" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g69" transform="translate(65,85)">
- <use x="0" y="0" href="#rect1" id="use69" />
- <circle id="circle69" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g70" transform="translate(65,95)">
- <use x="0" y="0" href="#rect1" id="use70" />
- <circle id="circle70" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g71" transform="translate(75,5)">
- <use x="0" y="0" href="#rect1" id="use71" />
- <circle id="circle71" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g72" transform="translate(75,15)">
- <use x="0" y="0" href="#rect1" id="use72" />
- <circle id="circle72" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g73" transform="translate(75,25)">
- <use x="0" y="0" href="#rect1" id="use73" />
- <circle id="circle73" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g74" transform="translate(75,35)">
- <use x="0" y="0" href="#rect1" id="use74" />
- <circle id="circle74" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g75" transform="translate(75,45)">
- <use x="0" y="0" href="#rect1" id="use75" />
- <circle id="circle75" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g76" transform="translate(75,55)">
- <use x="0" y="0" href="#rect1" id="use76" />
- <circle id="circle76" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g77" transform="translate(75,65)">
- <use x="0" y="0" href="#rect1" id="use77" />
- <circle id="circle77" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g78" transform="translate(75,75)">
- <use x="0" y="0" href="#rect1" id="use78" />
- <circle id="circle78" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g79" transform="translate(75,85)">
- <use x="0" y="0" href="#rect1" id="use79" />
- <circle id="circle79" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g80" transform="translate(75,95)">
- <use x="0" y="0" href="#rect1" id="use80" />
- <circle id="circle80" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g81" transform="translate(85,5)">
- <use x="0" y="0" href="#rect1" id="use81" />
- <circle id="circle81" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g82" transform="translate(85,15)">
- <use x="0" y="0" href="#rect1" id="use82" />
- <circle id="circle82" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g83" transform="translate(85,25)">
- <use x="0" y="0" href="#rect1" id="use83" />
- <circle id="circle83" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g84" transform="translate(85,35)">
- <use x="0" y="0" href="#rect1" id="use84" />
- <circle id="circle84" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g85" transform="translate(85,45)">
- <use x="0" y="0" href="#rect1" id="use85" />
- <circle id="circle85" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g86" transform="translate(85,55)">
- <use x="0" y="0" href="#rect1" id="use86" />
- <circle id="circle86" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g87" transform="translate(85,65)">
- <use x="0" y="0" href="#rect1" id="use87" />
- <circle id="circle87" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g88" transform="translate(85,75)">
- <use x="0" y="0" href="#rect1" id="use88" />
- <circle id="circle88" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g89" transform="translate(85,85)">
- <use x="0" y="0" href="#rect1" id="use89" />
- <circle id="circle89" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g90" transform="translate(85,95)">
- <use x="0" y="0" href="#rect1" id="use90" />
- <circle id="circle90" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g91" transform="translate(95,5)">
- <use x="0" y="0" href="#rect1" id="use91" />
- <circle id="circle91" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g92" transform="translate(95,15)">
- <use x="0" y="0" href="#rect1" id="use92" />
- <circle id="circle92" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g93" transform="translate(95,25)">
- <use x="0" y="0" href="#rect1" id="use93" />
- <circle id="circle93" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g94" transform="translate(95,35)">
- <use x="0" y="0" href="#rect1" id="use94" />
- <circle id="circle94" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g95" transform="translate(95,45)">
- <use x="0" y="0" href="#rect1" id="use95" />
- <circle id="circle95" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g96" transform="translate(95,55)">
- <use x="0" y="0" href="#rect1" id="use96" />
- <circle id="circle96" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g97" transform="translate(95,65)">
- <use x="0" y="0" href="#rect1" id="use97" />
- <circle id="circle97" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g98" transform="translate(95,75)">
- <use x="0" y="0" href="#rect1" id="use98" />
- <circle id="circle98" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g99" transform="translate(95,85)">
- <use x="0" y="0" href="#rect1" id="use99" />
- <circle id="circle99" cx="0" cy="0" r="2.5" />
- </g>
- <g id="g100" transform="translate(95,95)">
- <use x="0" y="0" href="#rect1" id="use100" />
- <circle id="circle100" cx="0" cy="0" r="2.5" />
- </g>
- <g id="out"/>
- <script>//<![CDATA[
- const svg = document.querySelector('svg');
- const out = document.querySelector('#out');
- const store = new Map();
-
- 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 (circle) {
- out.setAttributeNS(null, 'transform', g.getAttributeNS(null, 'transform'));
- store.set(circle, g);
- out.append(circle);
- }
- });
-
- svg.addEventListener('pointerout', e => {
- console.log('pointer out target', e.target);
- const g = e.target.closest('g');
-
- if (g) {
- 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 {
- 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);
- });
- }
- });
- //]]></script>
-</svg>