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

demo collision detection

This commit is contained in:
“chrisshank” 2024-08-17 22:38:13 -07:00
parent e9ded756a8
commit 92dd10a82b
3 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
demo/collision.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shapes - Collision</title>
<style>
@import url('../src/elements/main.css');
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
spatial-geometry {
width: 50px;
height: 50px;
border: 2px solid black;
}
</style>
</head>
<body>
<spatial-geometry x="100" y="100">Shape with some text</spatial-geometry>
<spatial-geometry x="200" y="200">Shape with some text</spatial-geometry>
<script type="module">
import { SpatialGeometry } from '../src/elements/spatial-geometry.ts';
SpatialGeometry.register();
const geometryElements = document.querySelectorAll('spatial-geometry');
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
document.addEventListener('move', (e) => {
geometryElements.forEach((el) => {
if (
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: 50, width: 50 }),
DOMRectReadOnly.fromRect({ x: e.target.x, y: e.target.y, height: 50, width: 50 })
)
) {
e.preventDefault();
}
});
});
</script>
</body>
</html>

1
demo/index.html
View File

@ -20,6 +20,7 @@
<ul>
<li><a href="/shapes">Shapes</a></li>
<li><a href="/collision">Collision</a></li>
</ul>
</body>
</html>

4
src/elements/spatial-geometry.ts
View File

@ -8,7 +8,7 @@ export type Vector = { x: number; y: number; movementX: number; movementY: numbe
// Should the move event bubble?
export class MoveEvent extends CustomEvent<Vector> {
constructor(vector: Vector) {
super('move', { detail: vector, cancelable: true, bubbles: false });
super('move', { detail: vector, cancelable: true, bubbles: true });
}
}
@ -66,7 +66,7 @@ export class SpatialGeometry extends HTMLElement {
this.#x = Number(newValue);
this.#requestUpdate('x');
} else if (name === 'y') {
this.#previousY = 0;
this.#previousY = this.#y;
this.#y = Number(newValue);
this.#requestUpdate('y');
} else if (name === 'type') {