[Refactor] Use Rectangle for canvas visible area (#1041)

src/DragAndScale.ts

@@ -1,6 +1,6 @@
-import type { Point, ReadOnlyRect, Rect, Rect32 } from "./interfaces"
+import type { Point, ReadOnlyRect, Rect } from "./interfaces"
 
-import { EaseFunction } from "./litegraph"
+import { EaseFunction, Rectangle } from "./litegraph"
 
 export interface DragAndScaleState {
   /**
@@ -36,7 +36,7 @@ export class DragAndScale {
   enabled: boolean
   last_mouse: Point
   element: HTMLCanvasElement
-  visible_area: Rect32
+  visible_area: Rectangle
   dragging?: boolean
   viewport?: Rect
 
@@ -67,7 +67,7 @@ export class DragAndScale {
     this.min_scale = 0.1
     this.enabled = true
     this.last_mouse = [0, 0]
-    this.visible_area = new Float32Array(4)
+    this.visible_area = new Rectangle()
 
     this.element = element
   }

src/LGraphCanvas.ts

@@ -23,7 +23,6 @@ import type {
   ReadOnlyPoint,
   ReadOnlyRect,
   Rect,
-  Rect32,
   Size,
 } from "./interfaces"
 import type { LGraph } from "./LGraph"
@@ -45,7 +44,7 @@ import { strokeShape } from "./draw"
 import { NullGraphError } from "./infrastructure/NullGraphError"
 import { LGraphGroup } from "./LGraphGroup"
 import { LGraphNode, type NodeId, type NodeProperty } from "./LGraphNode"
-import { LiteGraph } from "./litegraph"
+import { LiteGraph, type Rectangle } from "./litegraph"
 import { type LinkId, LLink } from "./LLink"
 import {
   containsRect,
@@ -471,7 +470,7 @@ export class LGraphCanvas {
   over_link_center?: LinkSegment
   last_mouse_position: Point
   /** The visible area of this canvas.  Tightly coupled with {@link ds}. */
-  visible_area: Rect32
+  visible_area: Rectangle
   /** Contains all links and reroutes that were rendered.  Repopulated every render cycle. */
   renderedPaths: Set<LinkSegment> = new Set()
   /** @deprecated Replaced by {@link renderedPaths}, but length is set to 0 by some extensions. */

src/interfaces.ts

@@ -208,9 +208,6 @@ type ArRect = [x: number, y: number, width: number, height: number]
 /** A rectangle starting at top-left coordinates `[x, y, width, height]` */
 export type Rect = ArRect | Float32Array | Float64Array
 
-/** A rectangle starting at top-left coordinates `[x, y, width, height]`.  Requires functions exclusive to `TypedArray`. */
-export type Rect32 = Float32Array
-
 /** A point represented as `[x, y]` co-ordinates that will not be modified */
 export type ReadOnlyPoint =
   | readonly [x: number, y: number]

src/litegraph.ts

@@ -95,6 +95,7 @@ export { CurveEditor } from "./CurveEditor"
 export { DragAndScale } from "./DragAndScale"
 export { LabelPosition, SlotDirection, SlotShape, SlotType } from "./draw"
 export { strokeShape } from "./draw"
+export { Rectangle } from "./infrastructure/Rectangle"
 export type {
   CanvasColour,
   ColorOption,
@@ -122,7 +123,6 @@ export type {
   ReadOnlyPoint,
   ReadOnlyRect,
   Rect,
-  Rect32,
   Size,
 } from "./interfaces"
 export { LGraph } from "./LGraph"