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

vector utils for rotation handles

This commit is contained in:
Orion Reed 2024-12-03 00:45:25 -05:00
parent f0271aada7
commit 34fd98e7e8
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/folk-shape.ts
View File

@ -376,15 +376,9 @@ export class FolkShape extends HTMLElement {
// Store initial angle on rotation start // Store initial angle on rotation start
if (target.getAttribute('part') === 'rotation') { if (target.getAttribute('part') === 'rotation') {
// We need to store initial rotation/angle somewhere. const center = this.getClientRect().center();
// 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?
this.#initialRotation = this.#rotation; this.#initialRotation = this.#rotation;
const centerX = this.#x + this.width / 2; this.#startAngle = Vector.angleFromOrigin({ x: event.clientX, y: event.clientY }, center);
const centerY = this.#y + this.height / 2;
this.#startAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX);
} }
// ignore interactions from slotted elements. // ignore interactions from slotted elements.
@ -448,12 +442,9 @@ export class FolkShape extends HTMLElement {
} }
if (handle === 'rotation') { if (handle === 'rotation') {
const centerX = this.#x + this.width / 2; const center = this.getClientRect().center();
const centerY = this.#y + this.height / 2; const currentAngle = Vector.angleFromOrigin({ x: event.clientX, y: event.clientY }, center);
const currentAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX); this.rotation = this.#initialRotation + (currentAngle - this.#startAngle);
const deltaAngle = currentAngle - this.#startAngle;
this.rotation = this.#initialRotation + deltaAngle;
return; return;
} }