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

store transition rotation state on element

This commit is contained in:
“chrisshank” 2024-10-29 21:09:05 -07:00
parent e3e425acca
commit a95d608f76
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/canvas/spatial-geometry.ts
View File

@ -270,6 +270,8 @@ export class SpatialGeometry extends HTMLElement {
this.#requestUpdate('height'); this.#requestUpdate('height');
} }
#initialRotation = 0;
#startAngle = 0;
#previousRotate = 0; #previousRotate = 0;
#rotate = Number(this.getAttribute('rotate')) || 0; #rotate = Number(this.getAttribute('rotate')) || 0;
get rotate(): number { get rotate(): number {
@ -339,11 +341,12 @@ export class SpatialGeometry extends HTMLElement {
// Might be an argument for making elements dumber (i.e. not have them manage their own state) and do this from the outside. // 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... // 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? // Maybe some kind of shared utility, used by both the element and the outside environment?
target.dataset.initialRotation = String(this.#rotate); this.#initialRotation = this.#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;
target.dataset.startAngle = String( this.#startAngle = Math.atan2(
Math.atan2(event.clientY - centerY, event.clientX - centerX) event.clientY - centerY,
event.clientX - centerX
); );
} }
@ -404,10 +407,9 @@ export class SpatialGeometry extends HTMLElement {
event.clientY - centerY, event.clientY - centerY,
event.clientX - centerX event.clientX - centerX
); );
const startAngle = Number(target.dataset.startAngle);
const initialRotation = Number(target.dataset.initialRotation); const deltaAngle = currentAngle - this.#startAngle;
const deltaAngle = currentAngle - startAngle; this.rotate = this.#initialRotation + (deltaAngle * 180) / Math.PI;
this.rotate = initialRotation + (deltaAngle * 180) / Math.PI;
return; return;
} }