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

resizing with rotation

This commit is contained in:
“chrisshank” 2024-12-02 21:33:01 -08:00
parent 54b68ee64f
commit 4d075ff9d5
1 changed files with 24 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/folk-shape.ts
View File

@ -411,54 +411,39 @@ export class FolkShape extends HTMLElement {
return; return;
} }
const part = target.getAttribute('part'); const handle = target.getAttribute('part');
if (part === null) return; if (handle === null) return;
if (part.includes('resize')) { if (handle.includes('resize')) {
let newWidth = this.width; const angle = this.rotation;
let newHeight = this.height; const { clientX, clientY } = event;
let newX = this.x; const rect = this.getClientRect();
let newY = this.y; const [topLeft, topRight, bottomRight, bottomLeft] = rect.corners();
if (part.includes('-n')) { if (handle.endsWith('nw')) {
const proposedHeight = this.height - event.movementY; } else if (handle.endsWith('ne')) {
if (proposedHeight > 0) {
newHeight = proposedHeight;
newY = this.y + event.movementY;
}
} }
if (handle.endsWith('se')) {
const newCenter: Point = {
x: (topLeft.x + clientX) / 2,
y: (topLeft.y + clientY) / 2,
};
if (part.endsWith('e')) { const newTopLeft = Vector.rotateAround(topLeft, newCenter, -angle);
const proposedWidth = this.width + event.movementX;
if (proposedWidth > 0) { const newBottomRight = Vector.rotateAround({ x: clientX, y: clientY }, newCenter, -angle);
newWidth = proposedWidth;
} this.x = newTopLeft.x;
this.y = newTopLeft.y;
this.width = newBottomRight.x - newTopLeft.x;
this.height = newBottomRight.y - newTopLeft.y;
} else {
} }
if (part.includes('-s')) {
const proposedHeight = this.height + event.movementY;
if (proposedHeight > 0) {
newHeight = proposedHeight;
}
}
if (part.endsWith('w')) {
const proposedWidth = this.width - event.movementX;
if (proposedWidth > 0) {
newWidth = proposedWidth;
newX = this.x + event.movementX;
}
}
this.width = newWidth;
this.height = newHeight;
this.x = newX;
this.y = newY;
return; return;
} }
if (part === 'rotation') { if (handle === 'rotation') {
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;
const currentAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX); const currentAngle = Math.atan2(event.clientY - centerY, event.clientX - centerX);