update domrect api

This commit is contained in:
“chrisshank” 2024-12-13 12:46:03 -08:00
parent 68a24cf4d1
commit 9bf42e265c
3 changed files with 21 additions and 21 deletions

View File

@ -128,7 +128,7 @@ describe('TransformDOMRect', () => {
}); });
describe('corner', () => { describe('corner', () => {
test('setTopLeft with local space coordinates', () => { test('set topLeft with local space coordinates', () => {
const rect = new DOMRectTransform({ const rect = new DOMRectTransform({
x: 100, x: 100,
y: 100, y: 100,
@ -137,14 +137,14 @@ describe('TransformDOMRect', () => {
}); });
// Move top-left corner 50 units right and 25 units down in local space // Move top-left corner 50 units right and 25 units down in local space
rect.setTopLeft({ x: 50, y: 25 }); rect.topLeft = { x: 50, y: 25 };
expect(rect.x).toBe(150); // Original x + local x expect(rect.x).toBe(150); // Original x + local x
expect(rect.y).toBe(125); // Original y + local y expect(rect.y).toBe(125); // Original y + local y
expect(rect.width).toBe(150); // Original width - local x expect(rect.width).toBe(150); // Original width - local x
expect(rect.height).toBe(75); // Original height - local y expect(rect.height).toBe(75); // Original height - local y
}); });
test('setTopRight with local space coordinates', () => { test('set topRight with local space coordinates', () => {
const rect = new DOMRectTransform({ const rect = new DOMRectTransform({
x: 100, x: 100,
y: 100, y: 100,
@ -153,14 +153,14 @@ describe('TransformDOMRect', () => {
}); });
// Set top-right corner to local coordinates (150, 25) // Set top-right corner to local coordinates (150, 25)
rect.setTopRight({ x: 150, y: 25 }); rect.topRight = { x: 150, y: 25 };
expect(rect.x).toBe(100); // Original x unchanged expect(rect.x).toBe(100); // Original x unchanged
expect(rect.y).toBe(125); // Original y + local y expect(rect.y).toBe(125); // Original y + local y
expect(rect.width).toBe(150); // New local x expect(rect.width).toBe(150); // New local x
expect(rect.height).toBe(75); // Original height - local y expect(rect.height).toBe(75); // Original height - local y
}); });
test('setBottomRight with local space coordinates', () => { test('set bottomRight with local space coordinates', () => {
const rect = new DOMRectTransform({ const rect = new DOMRectTransform({
x: 100, x: 100,
y: 100, y: 100,
@ -169,14 +169,14 @@ describe('TransformDOMRect', () => {
}); });
// Set bottom-right corner to local coordinates (150, 75) // Set bottom-right corner to local coordinates (150, 75)
rect.setBottomRight({ x: 150, y: 75 }); rect.bottomRight = { x: 150, y: 75 };
expect(rect.x).toBe(100); // Original x unchanged expect(rect.x).toBe(100); // Original x unchanged
expect(rect.y).toBe(100); // Original y unchanged expect(rect.y).toBe(100); // Original y unchanged
expect(rect.width).toBe(150); // New local x expect(rect.width).toBe(150); // New local x
expect(rect.height).toBe(75); // New local y expect(rect.height).toBe(75); // New local y
}); });
test('setBottomLeft with local space coordinates', () => { test('set bottomLeft with local space coordinates', () => {
const rect = new DOMRectTransform({ const rect = new DOMRectTransform({
x: 100, x: 100,
y: 100, y: 100,
@ -185,7 +185,7 @@ describe('TransformDOMRect', () => {
}); });
// Move bottom-left corner 50 units right in local space // Move bottom-left corner 50 units right in local space
rect.setBottomLeft({ x: 50, y: 75 }); rect.bottomLeft = { x: 50, y: 75 };
expect(rect.x).toBe(150); // Original x + local x expect(rect.x).toBe(150); // Original x + local x
expect(rect.y).toBe(100); // Original y unchanged expect(rect.y).toBe(100); // Original y unchanged
expect(rect.width).toBe(150); // Original width - local x expect(rect.width).toBe(150); // Original width - local x
@ -202,7 +202,7 @@ describe('TransformDOMRect', () => {
}); });
// Move top-left corner in local space // Move top-left corner in local space
rect.setTopLeft({ x: 50, y: 25 }); rect.topLeft = { x: 50, y: 25 };
// Verify the dimensions are correct // Verify the dimensions are correct
expect(rect.width).toBe(150); // Original width - local x expect(rect.width).toBe(150); // Original width - local x
@ -215,7 +215,7 @@ describe('TransformDOMRect', () => {
expectPointClose(backToLocal, localPoint); expectPointClose(backToLocal, localPoint);
}); });
test('setBottomRight works with upside down rotation', () => { test('set bottomRight works with upside down rotation', () => {
const rect = new DOMRectTransform({ const rect = new DOMRectTransform({
x: 100, x: 100,
y: 100, y: 100,
@ -225,7 +225,7 @@ describe('TransformDOMRect', () => {
}); });
// Set bottom-right corner in local space // Set bottom-right corner in local space
rect.setBottomRight({ x: 150, y: 75 }); rect.bottomRight = { x: 150, y: 75 };
expect(rect.width).toBe(150); expect(rect.width).toBe(150);
expect(rect.height).toBe(75); expect(rect.height).toBe(75);
@ -246,7 +246,7 @@ describe('TransformDOMRect', () => {
const originalTopLeft = rect.topLeft; const originalTopLeft = rect.topLeft;
// Resize from bottom-right corner // Resize from bottom-right corner
rect.setBottomRight({ x: 300, y: 200 }); rect.bottomRight = { x: 300, y: 200 };
// Opposite corner (top-left) should remain the same // Opposite corner (top-left) should remain the same
expectPointClose(rect.topLeft, originalTopLeft); expectPointClose(rect.topLeft, originalTopLeft);
@ -265,7 +265,7 @@ describe('TransformDOMRect', () => {
const originalBottomRight = rect.toParentSpace(rect.bottomRight); const originalBottomRight = rect.toParentSpace(rect.bottomRight);
// Resize from bottom-right corner in local space // Resize from bottom-right corner in local space
rect.setBottomRight({ x: 300, y: 150 }); rect.bottomRight = { x: 300, y: 150 };
// Transform corners back to parent space to compare // Transform corners back to parent space to compare
const newTopLeft = rect.toParentSpace(rect.topLeft); const newTopLeft = rect.toParentSpace(rect.topLeft);

View File

@ -300,7 +300,7 @@ export class DOMRectTransform implements DOMRect {
* and keeps the **bottom-right corner** fixed in the **parent space**. * and keeps the **bottom-right corner** fixed in the **parent space**.
* @param point - The new top-left corner point in local coordinate space. * @param point - The new top-left corner point in local coordinate space.
*/ */
setTopLeft(point: Point) { set topLeft(point: Point) {
// Compute the parent-space position of the bottom-right corner before resizing // Compute the parent-space position of the bottom-right corner before resizing
const bottomRightBefore = this.toParentSpace(this.bottomRight); const bottomRightBefore = this.toParentSpace(this.bottomRight);
@ -336,7 +336,7 @@ export class DOMRectTransform implements DOMRect {
* and keeps the **bottom-left corner** fixed in the **parent space**. * and keeps the **bottom-left corner** fixed in the **parent space**.
* @param point - The new top-right corner point in local coordinate space. * @param point - The new top-right corner point in local coordinate space.
*/ */
setTopRight(point: Point) { set topRight(point: Point) {
// Compute the parent-space position of the bottom-left corner before resizing // Compute the parent-space position of the bottom-left corner before resizing
const bottomLeftBefore = this.toParentSpace(this.bottomLeft); const bottomLeftBefore = this.toParentSpace(this.bottomLeft);
@ -371,7 +371,7 @@ export class DOMRectTransform implements DOMRect {
* and keeps the **top-left corner** fixed in the **parent space**. * and keeps the **top-left corner** fixed in the **parent space**.
* @param point - The new bottom-right corner point in local coordinate space. * @param point - The new bottom-right corner point in local coordinate space.
*/ */
setBottomRight(point: Point) { set bottomRight(point: Point) {
// Compute the parent-space position of the top-left corner before resizing // Compute the parent-space position of the top-left corner before resizing
const topLeftBefore = this.toParentSpace(this.topLeft); const topLeftBefore = this.toParentSpace(this.topLeft);
@ -402,7 +402,7 @@ export class DOMRectTransform implements DOMRect {
* and keeps the **top-right corner** fixed in the **parent space**. * and keeps the **top-right corner** fixed in the **parent space**.
* @param point - The new bottom-left corner point in local coordinate space. * @param point - The new bottom-left corner point in local coordinate space.
*/ */
setBottomLeft(point: Point) { set bottomLeft(point: Point) {
// Compute the parent-space position of the top-right corner before resizing // Compute the parent-space position of the top-right corner before resizing
const topRightBefore = this.toParentSpace(this.topRight); const topRightBefore = this.toParentSpace(this.topRight);

View File

@ -527,16 +527,16 @@ export class FolkShape extends HTMLElement {
switch (handle) { switch (handle) {
case 'resize-bottom-right': case 'resize-bottom-right':
this.#rect.setBottomRight(localPointer); this.#rect.bottomRight = localPointer;
break; break;
case 'resize-bottom-left': case 'resize-bottom-left':
this.#rect.setBottomLeft(localPointer); this.#rect.bottomLeft = localPointer;
break; break;
case 'resize-top-left': case 'resize-top-left':
this.#rect.setTopLeft(localPointer); this.#rect.topLeft = localPointer;
break; break;
case 'resize-top-right': case 'resize-top-right':
this.#rect.setTopRight(localPointer); this.#rect.topRight = localPointer;
break; break;
} }