rename properties in RotatedDOMRect

src/common/rotated-dom-rect.ts

@@ -84,44 +84,44 @@ export class RotatedDOMRect implements DOMRect {
     return this.#center;
   }
 
-  #topLeftCorner: Point | null = null;
+  #topLeft: Point | null = null;
-  get topLeftCorner() {
+  get topLeft() {
-    if (this.#topLeftCorner === null) {
+    if (this.#topLeft === null) {
-      this.#topLeftCorner = Vector.rotateAround({ x: this.x, y: this.y }, this.center, this.rotation);
+      this.#topLeft = Vector.rotateAround({ x: this.x, y: this.y }, this.center, this.rotation);
     }
-    return this.#topLeftCorner;
+    return this.#topLeft;
   }
 
-  #topRightCorner: Point | null = null;
+  #topRight: Point | null = null;
-  get topRightCorner() {
+  get topRight() {
-    if (this.#topRightCorner === null) {
+    if (this.#topRight === null) {
-      this.#topRightCorner = Vector.rotateAround({ x: this.right, y: this.y }, this.center, this.rotation);
+      this.#topRight = Vector.rotateAround({ x: this.right, y: this.y }, this.center, this.rotation);
     }
-    return this.#topRightCorner;
+    return this.#topRight;
   }
 
-  #bottomRightCorner: Point | null = null;
+  #bottomRight: Point | null = null;
-  get bottomRightCorner() {
+  get bottomRight() {
-    if (this.#bottomRightCorner === null) {
+    if (this.#bottomRight === null) {
-      this.#bottomRightCorner = Vector.rotateAround({ x: this.right, y: this.bottom }, this.center, this.rotation);
+      this.#bottomRight = Vector.rotateAround({ x: this.right, y: this.bottom }, this.center, this.rotation);
     }
-    return this.#bottomRightCorner;
+    return this.#bottomRight;
   }
 
-  #bottomLeftCorner: Point | null = null;
+  #bottomLeft: Point | null = null;
-  get bottomLeftCorner() {
+  get bottomLeft() {
-    if (this.#bottomLeftCorner === null) {
+    if (this.#bottomLeft === null) {
-      this.#bottomLeftCorner = Vector.rotateAround({ x: this.x, y: this.bottom }, this.center, this.rotation);
+      this.#bottomLeft = Vector.rotateAround({ x: this.x, y: this.bottom }, this.center, this.rotation);
     }
-    return this.#bottomLeftCorner;
+    return this.#bottomLeft;
   }
 
   #reset() {
     this.#center = null;
-    this.#topLeftCorner = null;
+    this.#topLeft = null;
-    this.#topRightCorner = null;
+    this.#topRight = null;
-    this.#bottomLeftCorner = null;
+    this.#bottomLeft = null;
-    this.#bottomRightCorner = null;
+    this.#bottomRight = null;
   }
 
   /** Returns all the vertices in worldspace coordinates */

src/folk-distance-field.ts

@@ -151,12 +151,7 @@ export class FolkDistanceField extends HTMLElement {
     // Collect positions and assign unique IDs to all shapes
     this.shapes.forEach((geometry, index) => {
       const rect = geometry.getClientRect();
-      const {
+      const { topLeft, topRight, bottomRight, bottomLeft } = rect;
-        topLeftCorner: topLeft,
-        topRightCorner: topRight,
-        bottomRightCorner: bottomRight,
-        bottomLeftCorner: bottomLeft,
-      } = rect;
 
       // Convert rotated coordinates to NDC using container dimensions
       const x1 = (topLeft.x / containerWidth) * 2 - 1;

src/folk-rope.ts

@@ -125,7 +125,7 @@ export class FolkRope extends FolkBaseConnection {
     let target: Point;
 
     if (sourceRect instanceof RotatedDOMRect) {
-      source = Vector.lerp(sourceRect.bottomRightCorner, sourceRect.bottomLeftCorner, 0.5);
+      source = Vector.lerp(sourceRect.bottomRight, sourceRect.bottomLeft, 0.5);
     } else {
       source = {
         x: sourceRect.x + sourceRect.width / 2,
@@ -134,7 +134,7 @@ export class FolkRope extends FolkBaseConnection {
     }
 
     if (targetRect instanceof RotatedDOMRect) {
-      target = Vector.lerp(targetRect.bottomRightCorner, targetRect.bottomLeftCorner, 0.5);
+      target = Vector.lerp(targetRect.bottomRight, targetRect.bottomLeft, 0.5);
     } else {
       target = {
         x: targetRect.x + targetRect.width / 2,

src/folk-shape.ts

@@ -396,10 +396,10 @@ export class FolkShape extends HTMLElement {
 
         // Map handle names to corner indices
         const handleToCornerIndex: Record<string, Point> = {
-          'resize-nw': rect.topLeftCorner,
+          'resize-nw': rect.topLeft,
-          'resize-ne': rect.topRightCorner,
+          'resize-ne': rect.topRight,
-          'resize-se': rect.bottomRightCorner,
+          'resize-se': rect.bottomRight,
-          'resize-sw': rect.bottomLeftCorner,
+          'resize-sw': rect.bottomLeft,
         };
 
         const currentPos = handleToCornerIndex[handle];
@@ -669,10 +669,10 @@ export class FolkShape extends HTMLElement {
 
     // Map each resize handle to its opposite corner index
     const OPPOSITE_CORNERS = {
-      'resize-se': rect.topLeftCorner,
+      'resize-se': rect.topLeft,
-      'resize-sw': rect.topRightCorner,
+      'resize-sw': rect.topRight,
-      'resize-nw': rect.bottomRightCorner,
+      'resize-nw': rect.bottomRight,
-      'resize-ne': rect.bottomLeftCorner,
+      'resize-ne': rect.bottomLeft,
     } as const;
 
     // Get the opposite corner for the current resize handle