Add rectangle resize methods, use in DragAndScale (#1057)

src/DragAndScale.ts

@@ -92,7 +92,7 @@ export class DragAndScale {
   }
 
   computeVisibleArea(viewport: Rect | undefined): void {
-    const { scale, offset } = this
+    const { scale, offset, visible_area } = this
 
     if (this.#stateHasChanged()) {
       this.onChanged?.(scale, offset)
@@ -100,11 +100,10 @@ export class DragAndScale {
     }
 
     if (!this.element) {
-      this.visible_area[0] = this.visible_area[1] = this.visible_area[2] = this.visible_area[3] = 0
+      visible_area[0] = visible_area[1] = visible_area[2] = visible_area[3] = 0
       return
     }
-    let width = this.element.width
-    let height = this.element.height
+    let { width, height } = this.element
     let startx = -offset[0]
     let starty = -offset[1]
     if (viewport) {
@@ -115,10 +114,9 @@ export class DragAndScale {
     }
     const endx = startx + width / scale
     const endy = starty + height / scale
-    this.visible_area[0] = startx
-    this.visible_area[1] = starty
-    this.visible_area[2] = endx - startx
-    this.visible_area[3] = endy - starty
+    visible_area[0] = startx
+    visible_area[1] = starty
+    visible_area.resizeBottomRight(endx, endy)
   }
 
   toCanvasContext(ctx: CanvasRenderingContext2D): void {

src/infrastructure/Rectangle.ts

@@ -162,10 +162,10 @@ export class Rectangle extends Float64Array {
    */
   containsXy(x: number, y: number): boolean {
     const { x: left, y: top, width, height } = this
-    return left <= x &&
-      top <= y &&
-      left + width >= x &&
-      top + height >= y
+    return x >= left &&
+      x < left + width &&
+      y >= top &&
+      y < top + height
   }
 
   /**
@@ -244,6 +244,37 @@ export class Rectangle extends Float64Array {
     return [this[0] - x, this[1] - y]
   }
 
+  /** Resizes the rectangle without moving it, setting its top-left corner to [{@link x}, {@link y}]. */
+  resizeTopLeft(x1: number, y1: number) {
+    this[2] += this[0] - x1
+    this[3] += this[1] - y1
+
+    this[0] = x1
+    this[1] = y1
+  }
+
+  /** Resizes the rectangle without moving it, setting its bottom-left corner to [{@link x}, {@link y}]. */
+  resizeBottomLeft(x1: number, y2: number) {
+    this[2] += this[0] - x1
+    this[3] = y2 - this[1]
+
+    this[0] = x1
+  }
+
+  /** Resizes the rectangle without moving it, setting its top-right corner to [{@link x}, {@link y}]. */
+  resizeTopRight(x2: number, y1: number) {
+    this[2] = x2 - this[0]
+    this[3] += this[1] - y1
+
+    this[1] = y1
+  }
+
+  /** Resizes the rectangle without moving it, setting its bottom-right corner to [{@link x}, {@link y}]. */
+  resizeBottomRight(x2: number, y2: number) {
+    this[2] = x2 - this[0]
+    this[3] = y2 - this[1]
+  }
+
   /** Sets the width without moving the right edge (changes position) */
   setWidthRightAnchored(width: number) {
     const currentWidth = this[2]