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

fix demos

This commit is contained in:
“chrisshank” 2024-09-27 19:23:18 -07:00
parent 487090cf58
commit 5f33ef6edf
4 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/collision.html
View File

@ -25,8 +25,8 @@
</style>
</head>
<body>
<spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry>
<spatial-geometry x="200" y="200" width="50" height="50">Shape with some text</spatial-geometry>
<spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry x="200" y="200" width="50" height="50"></spatial-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
@ -36,10 +36,7 @@
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}

7
demo/maps.html
View File

@ -57,14 +57,11 @@
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}
function proximityDetection(rect1, rect2, distance = 30) {
function proximityDetection(rect1, rect2, distance = 100) {
return collisionDetection(
DOMRectReadOnly.fromRect({
x: rect1.x - distance,

6
demo/shapes.html
View File

@ -27,9 +27,9 @@
</style>
</head>
<body>
<input type="text" value="Hello" />
<input type="text" value="World" />
<spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry>
<spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
<spatial-geometry x="100" y="200" width="50" height="50"></spatial-geometry>
<spatial-geometry x="100" y="300" width="50" height="50"></spatial-geometry>
<script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';

26
src/canvas/spatial-geometry.ts
View File

@ -32,11 +32,18 @@ styles.replaceSync(`
cursor: var(--fc-move, move);
}
:host::before {
content: '';
position: absolute;
inset: -10px -10px -10px -10px;
}
::slotted(*) {
cursor: default;
}
:host(:focus-within) {
z-index: calc(infinity - 1);
outline: solid 1px hsl(214, 84%, 56%);
}
@ -60,6 +67,7 @@ styles.replaceSync(`
background: hsl(210, 20%, 98%);
z-index: calc(infinity);
&[part="resize-nw"],
&[part="resize-ne"],
&[part="resize-se"],
@ -165,6 +173,7 @@ export class SpatialGeometry extends HTMLElement {
}
set x(x: number) {
this.#previousX = this.#x;
this.#x = x;
this.#requestUpdate('x');
}
@ -176,6 +185,7 @@ export class SpatialGeometry extends HTMLElement {
}
set y(y: number) {
this.#previousY = this.#y;
this.#y = y;
this.#requestUpdate('y');
}
@ -187,6 +197,7 @@ export class SpatialGeometry extends HTMLElement {
}
set width(width: number) {
this.#previousWidth = this.#width;
this.#width = width;
this.#requestUpdate('width');
}
@ -198,6 +209,7 @@ export class SpatialGeometry extends HTMLElement {
}
set height(height: number) {
this.#previousHeight = this.#height;
this.#height = height;
this.#requestUpdate('height');
}
@ -209,10 +221,15 @@ export class SpatialGeometry extends HTMLElement {
}
set rotate(rotate: number) {
this.#previousRotate = this.#rotate;
this.#rotate = rotate;
this.#requestUpdate('rotate');
}
connectedCallback() {
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotate']));
}
disconnectedCallback() {
cancelAnimationFrame(this.#rAFId);
}
@ -283,9 +300,7 @@ export class SpatialGeometry extends HTMLElement {
if (part === 'rotate') {
const centerX = (this.#x + this.#width) / 2;
const centerY = (this.#y + this.#height) / 2;
var newAngle =
((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) /
Math.PI;
var newAngle = ((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) / Math.PI;
this.rotate = newAngle;
return;
}
@ -365,7 +380,6 @@ export class SpatialGeometry extends HTMLElement {
movementY: this.#height - this.#previousHeight,
})
);
if (notCancelled) {
if (updatedProperties.has('width')) {
this.style.width = `${this.#width}px`;
@ -383,9 +397,7 @@ export class SpatialGeometry extends HTMLElement {
if (updatedProperties.has('rotate')) {
// Although the change in resize isn't useful inside this component, the outside world might find it helpful to calculate acceleration and other physics
const notCancelled = this.dispatchEvent(
new RotateEvent({ rotate: this.#rotate - this.#previousRotate })
);
const notCancelled = this.dispatchEvent(new RotateEvent({ rotate: this.#rotate - this.#previousRotate }));
if (notCancelled) {
if (updatedProperties.has('rotate')) {