update domrect api
This commit is contained in:
parent
68a24cf4d1
commit
9bf42e265c
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue