diff --git a/demo/distance-perf.html b/demo/distance-perf.html index ad9e68f..1a87ee1 100644 --- a/demo/distance-perf.html +++ b/demo/distance-perf.html @@ -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(); diff --git a/src/canvas/fc-geometry.ts b/src/canvas/fc-geometry.ts index eb23b51..a4011a4 100644 --- a/src/canvas/fc-geometry.ts +++ b/src/canvas/fc-geometry.ts @@ -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;