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

6
demo/shapes.html
View File

@ -27,9 +27,9 @@
</style> </style>
</head> </head>
<body> <body>
<input type="text" value="Hello" /> <spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
<input type="text" value="World" /> <spatial-geometry x="100" y="200" width="50" height="50"></spatial-geometry>
<spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry> <spatial-geometry x="100" y="300" width="50" height="50"></spatial-geometry>
<script type="module"> <script type="module">
import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts'; 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); cursor: var(--fc-move, move);
} }
:host::before {
content: '';
position: absolute;
inset: -10px -10px -10px -10px;
}
::slotted(*) { ::slotted(*) {
cursor: default; cursor: default;
} }
:host(:focus-within) { :host(:focus-within) {
z-index: calc(infinity - 1);
outline: solid 1px hsl(214, 84%, 56%); outline: solid 1px hsl(214, 84%, 56%);
} }
@ -60,6 +67,7 @@ styles.replaceSync(`
background: hsl(210, 20%, 98%); background: hsl(210, 20%, 98%);
z-index: calc(infinity); z-index: calc(infinity);
&[part="resize-nw"], &[part="resize-nw"],
&[part="resize-ne"], &[part="resize-ne"],
&[part="resize-se"], &[part="resize-se"],
@ -165,6 +173,7 @@ export class SpatialGeometry extends HTMLElement {
} }
set x(x: number) { set x(x: number) {
this.#previousX = this.#x;
this.#x = x; this.#x = x;
this.#requestUpdate('x'); this.#requestUpdate('x');
} }
@ -176,6 +185,7 @@ export class SpatialGeometry extends HTMLElement {
} }
set y(y: number) { set y(y: number) {
this.#previousY = this.#y;
this.#y = y; this.#y = y;
this.#requestUpdate('y'); this.#requestUpdate('y');
} }
@ -187,6 +197,7 @@ export class SpatialGeometry extends HTMLElement {
} }
set width(width: number) { set width(width: number) {
this.#previousWidth = this.#width;
this.#width = width; this.#width = width;
this.#requestUpdate('width'); this.#requestUpdate('width');
} }
@ -198,6 +209,7 @@ export class SpatialGeometry extends HTMLElement {
} }
set height(height: number) { set height(height: number) {
this.#previousHeight = this.#height;
this.#height = height; this.#height = height;
this.#requestUpdate('height'); this.#requestUpdate('height');
} }
@ -209,10 +221,15 @@ export class SpatialGeometry extends HTMLElement {
} }
set rotate(rotate: number) { set rotate(rotate: number) {
this.#previousRotate = this.#rotate;
this.#rotate = rotate; this.#rotate = rotate;
this.#requestUpdate('rotate'); this.#requestUpdate('rotate');
} }
connectedCallback() {
this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotate']));
}
disconnectedCallback() { disconnectedCallback() {
cancelAnimationFrame(this.#rAFId); cancelAnimationFrame(this.#rAFId);
} }
@ -283,9 +300,7 @@ export class SpatialGeometry extends HTMLElement {
if (part === 'rotate') { if (part === 'rotate') {
const centerX = (this.#x + this.#width) / 2; const centerX = (this.#x + this.#width) / 2;
const centerY = (this.#y + this.#height) / 2; const centerY = (this.#y + this.#height) / 2;
var newAngle = var newAngle = ((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) / Math.PI;
((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) /
Math.PI;
this.rotate = newAngle; this.rotate = newAngle;
return; return;
} }
@ -365,7 +380,6 @@ export class SpatialGeometry extends HTMLElement {
movementY: this.#height - this.#previousHeight, movementY: this.#height - this.#previousHeight,
}) })
); );
if (notCancelled) { if (notCancelled) {
if (updatedProperties.has('width')) { if (updatedProperties.has('width')) {
this.style.width = `${this.#width}px`; this.style.width = `${this.#width}px`;
@ -383,9 +397,7 @@ export class SpatialGeometry extends HTMLElement {
if (updatedProperties.has('rotate')) { 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 // 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( const notCancelled = this.dispatchEvent(new RotateEvent({ rotate: this.#rotate - this.#previousRotate }));
new RotateEvent({ rotate: this.#rotate - this.#previousRotate })
);
if (notCancelled) { if (notCancelled) {
if (updatedProperties.has('rotate')) { if (updatedProperties.has('rotate')) {