From 34fd98e7e829108a8680babf61bc10555c9cc162 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Tue, 3 Dec 2024 00:45:25 -0500 Subject: [PATCH] vector utils for rotation handles --- src/folk-shape.ts | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/folk-shape.ts b/src/folk-shape.ts index 45c7232..36c4ab1 100644 --- a/src/folk-shape.ts +++ b/src/folk-shape.ts @@ -376,15 +376,9 @@ export class FolkShape extends HTMLElement { // Store initial angle on rotation start if (target.getAttribute('part') === 'rotation') { - // We need to store initial rotation/angle somewhere. - // This is a little awkward as we'll want to do *quite a lot* of this kind of thing. - // Might be an argument for making elements dumber (i.e. not have them manage their own state) and do this from the outside. - // But we also want to preserve the self-sufficient nature of elements' behaviour... - // Maybe some kind of shared utility, used by both the element and the outside environment? + const center = this.getClientRect().center(); this.#initialRotation = this.#rotation; - const centerX = this.#x + this.width / 2; - const centerY = this.#y + this.height / 2; - this.#startAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX); + this.#startAngle = Vector.angleFromOrigin({ x: event.clientX, y: event.clientY }, center); } // ignore interactions from slotted elements. @@ -448,12 +442,9 @@ export class FolkShape extends HTMLElement { } if (handle === 'rotation') { - const centerX = this.#x + this.width / 2; - const centerY = this.#y + this.height / 2; - const currentAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX); - - const deltaAngle = currentAngle - this.#startAngle; - this.rotation = this.#initialRotation + deltaAngle; + const center = this.getClientRect().center(); + const currentAngle = Vector.angleFromOrigin({ x: event.clientX, y: event.clientY }, center); + this.rotation = this.#initialRotation + (currentAngle - this.#startAngle); return; }