jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

proximity refactor

This commit is contained in:
“chrisshank” 2024-11-27 23:45:43 -08:00
parent 4e5496839b
commit 4e059956c0
5 changed files with 34 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demo/collision.html
View File

@ -30,37 +30,15 @@
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { collisionDetection } from '../src/collision.ts';
FolkGeometry.register(); FolkGeometry.register();
const geometryElements = document.querySelectorAll('fc-geometry'); const geometryElements = document.querySelectorAll('fc-geometry');
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}
function handleCollision(e) { function handleCollision(e) {
geometryElements.forEach((el) => { geometryElements.forEach((el) => {
if ( if (el !== e.target && collisionDetection(el.getClientRect(), e.target.getClientRect())) {
el !== e.target &&
collisionDetection(
// TODO: refactor this hack once resizing and the vertices API are figured out
DOMRectReadOnly.fromRect({
x: el.x,
y: el.y,
height: el.height,
width: el.width,
}),
DOMRectReadOnly.fromRect({
x: e.target.x,
y: e.target.y,
height: e.target.height,
width: e.target.width,
})
)
) {
e.preventDefault(); e.preventDefault();
} }
}); });

5
demo/hull.html
View File

@ -22,10 +22,7 @@
folk-hull { folk-hull {
display: block; display: block;
position: absolute; position: absolute;
top: 0; inset: 0 0 0 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none; pointer-events: none;
background-color: #b4d8f669; background-color: #b4d8f669;
} }

54
demo/maps.html
View File

@ -27,6 +27,8 @@
} }
geo-wiki { geo-wiki {
border: solid 2px black;
border-radius: 5px;
ul { ul {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@ -34,67 +36,49 @@
scroll-padding-block-end: 1rem; scroll-padding-block-end: 1rem;
} }
} }
olk-hull {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
background-color: #b4d8f63b;
}
</style> </style>
</head> </head>
<body> <body>
<fc-geometry x="25" y="100" width="400" height="200"> <fc-geometry id="1" x="25" y="100" width="400" height="200">
<folk-map coordinates="52.09, 5.12" zoom="13"></folk-map> <folk-map coordinates="52.09, 5.12" zoom="13"></folk-map>
</fc-geometry> </fc-geometry>
<fc-geometry x="50" y="550" width="400" height="250"> <fc-geometry id="2" x="50" y="550" width="400" height="250">
<folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map> <folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
</fc-geometry> </fc-geometry>
<fc-geometry x="500" y="400" width="500" height="300"> <fc-geometry id="3" x="500" y="400" width="500" height="300">
<geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki> <geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
</fc-geometry> </fc-geometry>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkMap } from '../src/folk-map.ts'; import { FolkMap } from '../src/folk-map.ts';
import { FolkHull } from '../src/folk-hull.ts';
import { collisionDetection } from '../src/collision.ts';
FolkGeometry.register(); FolkGeometry.register();
FolkMap.register(); FolkMap.register();
FolkHull.register();
function collisionDetection(rect1, rect2) { const geometries = Array.from(document.querySelectorAll('fc-geometry'));
return (
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}
function proximityDetection(rect1, rect2, distance = 100) { const proximityMap = new Map(geometries.map((el) => [el, new Set()]));
return collisionDetection(
DOMRectReadOnly.fromRect({
x: rect1.x - distance,
y: rect1.y - distance,
height: rect1.height + distance * 2,
width: rect1.width + distance * 2,
}),
rect2
);
}
const proximityMap = new Map(Array.from(document.querySelectorAll('fc-geometry')).map((el) => [el, new Set()]));
function handleProximity(e) { function handleProximity(e) {
proximityMap.forEach((set, el) => { proximityMap.forEach((set, el) => {
if (el !== e.target) { if (el !== e.target) {
const alreadyIntersection = set.has(e.target); const alreadyIntersection = set.has(e.target);
// TODO: refactor this hack once resizing and the vertices API are figured out // TODO: refactor this hack once resizing and the vertices API are figured out
const isNowIntersecting = proximityDetection( const isNowIntersecting = collisionDetection(el.getClientRect(), e.target.getClientRect(), 100);
DOMRectReadOnly.fromRect({
x: el.x,
y: el.y,
height: el.height,
width: el.width,
}),
DOMRectReadOnly.fromRect({
x: e.target.x,
y: e.target.y,
height: e.target.height,
width: e.target.width,
})
);
if (isNowIntersecting && !alreadyIntersection) { if (isNowIntersecting && !alreadyIntersection) {
set.add(e.target); set.add(e.target);
proximityMap.get(e.target)?.add(el); proximityMap.get(e.target)?.add(el);

35
demo/proximity-music.html
View File

@ -62,6 +62,7 @@
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { RecordPlayer } from '../src/music/record-player.ts'; import { RecordPlayer } from '../src/music/record-player.ts';
import { collisionDetection } from '../src/collision.ts';
FolkGeometry.register(); FolkGeometry.register();
RecordPlayer.register(); RecordPlayer.register();
@ -87,40 +88,12 @@
el.firstElementChild.addEventListener('canplay', setPlayback); el.firstElementChild.addEventListener('canplay', setPlayback);
}); });
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}
function proximityDetection(rect1, rect2, distance = 30) {
return collisionDetection(
DOMRectReadOnly.fromRect({
x: rect1.x - distance,
y: rect1.y - distance,
height: rect1.height + distance * 2,
width: rect1.width + distance * 2,
}),
rect2
);
}
function updateFlowerProximity(flower) { function updateFlowerProximity(flower) {
const alreadyIntersection = proximitySet.has(flower); const alreadyIntersection = proximitySet.has(flower);
// TODO: refactor this hack once resizing and the vertices API are figured out // TODO: refactor this hack once resizing and the vertices API are figured out
const isNowIntersecting = proximityDetection( const isNowIntersecting = collisionDetection(
DOMRectReadOnly.fromRect({ recordPlayerGeometry.getClientRect(),
x: recordPlayerGeometry.x, flower.getClientRect(),
y: recordPlayerGeometry.y,
height: recordPlayerGeometry.height,
width: recordPlayerGeometry.width,
}),
DOMRectReadOnly.fromRect({
x: flower.x,
y: flower.y,
height: flower.height,
width: flower.width,
}),
proximityDistance proximityDistance
); );

8
src/collision.ts Normal file
View File

@ -0,0 +1,8 @@
export function collisionDetection(rect1, rect2, proximity = 0) {
return (
rect1.left - rect2.right < proximity &&
rect2.left - rect1.right < proximity &&
rect1.top - rect2.bottom < proximity &&
rect2.top - rect1.bottom < proximity
);
}