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

more perf

This commit is contained in:
“chrisshank” 2024-12-01 20:41:12 -08:00
parent 48b7119e37
commit 3c591e3d65
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demo/distance-perf.html
View File

@ -52,18 +52,18 @@
DistanceField.define();
function tick() {
window.requestAnimationFrame(tick);
// function tick() {
// window.requestAnimationFrame(tick);
for (let i = 0; i < 10; i++) {
const g = geometries[Math.floor(Math.random() * geometries.length)];
const max = 50;
g.x += Math.floor(Math.random() * max - max / 2);
g.y += Math.floor(Math.random() * max - max / 2);
}
}
// for (let i = 0; i < 10; i++) {
// const g = geometries[Math.floor(Math.random() * geometries.length)];
// const max = 50;
// g.x += Math.floor(Math.random() * max - max / 2);
// g.y += Math.floor(Math.random() * max - max / 2);
// }
// }
tick();
// tick();
</script>
</body>
</html>

18
src/canvas/fc-geometry.ts
View File

@ -275,7 +275,22 @@ export class FolkGeometry extends HTMLElement {
}
getClientRect(): DOMRect {
return DOMRectReadOnly.fromRect({ x: this.x, y: this.y, width: this.width, height: this.height });
const { x, y, width, height } = this;
return {
x,
y,
width,
height,
left: x,
top: y,
right: x + width,
bottom: y + height,
toJSON() {
return this;
},
};
// return DOMRectReadOnly.fromRect({ x: this.x, y: this.y, width: this.width, height: this.height });
}
// Similar to `Element.getClientBoundingRect()`, but returns an SVG path that precisely outlines the shape.
@ -337,6 +352,7 @@ export class FolkGeometry extends HTMLElement {
if (part === null) return;
if (part.includes('resize')) {
console.log(part, event.movementX, event.movementY);
// This triggers a move and resize event :(
if (part.includes('-n')) {
this.y += event.movementY;