Cleanup/Perf: Float32Array/Float64Array removal (#5877)

## Summary

Redoing #5567, without
the link rendering changes.

## Changes

- **What**: Standardizing the Point/Size/Rect logic around numeric
tuples instead of typed arrays.

## Review Focus

Cutting here and going to continue in a second PR.

Do the simpler types make sense?
Do we want to keep the behavior of Rectangle as it is now?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5877-WIP-Float32Array-Float64Array-removal-27f6d73d36508169a39eff1e4a87a61c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: filtered <[email protected]>
Co-authored-by: github-actions <[email protected]>

Author: 3 people

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -151,7 +151,8 @@ class NodeSlotReference {
         const convertedPos =
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
-        // Debug logging - convert Float32Arrays to regular arrays for visibility
+        // Debug logging - convert Float64Arrays to regular arrays for visibility
+        // eslint-disable-next-line no-console
         console.log(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png

@@ -1,7 +1,6 @@
 import { toString } from 'es-toolkit/compat'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
-import { LinkConnector } from '@/lib/litegraph/src/canvas/LinkConnector'
 import {
   type LinkRenderContext,
   LitegraphLinkAdapter
@@ -17,6 +16,7 @@ import { LGraphGroup } from './LGraphGroup'
 import { LGraphNode, type NodeId, type NodeProperty } from './LGraphNode'
 import { LLink, type LinkId } from './LLink'
 import { Reroute, type RerouteId } from './Reroute'
+import { LinkConnector } from './canvas/LinkConnector'
 import { isOverNodeInput, isOverNodeOutput } from './canvas/measureSlots'
 import { strokeShape } from './draw'
 import type {
@@ -25,6 +25,7 @@ import type {
 } from './infrastructure/CustomEventTarget'
 import type { LGraphCanvasEventMap } from './infrastructure/LGraphCanvasEventMap'
 import { NullGraphError } from './infrastructure/NullGraphError'
+import { Rectangle } from './infrastructure/Rectangle'
 import type {
   CanvasColour,
   ColorOption,
@@ -47,12 +48,11 @@ import type {
   NullableProperties,
   Point,
   Positionable,
-  ReadOnlyPoint,
   ReadOnlyRect,
   Rect,
   Size
 } from './interfaces'
-import { LiteGraph, Rectangle, SubgraphNode, createUuidv4 } from './litegraph'
+import { LiteGraph } from './litegraph'
 import {
   containsRect,
   createBounds,
@@ -67,6 +67,7 @@ import { NodeInputSlot } from './node/NodeInputSlot'
 import type { Subgraph } from './subgraph/Subgraph'
 import { SubgraphIONodeBase } from './subgraph/SubgraphIONodeBase'
 import type { SubgraphInputNode } from './subgraph/SubgraphInputNode'
+import { SubgraphNode } from './subgraph/SubgraphNode'
 import type { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
 import type {
   CanvasPointerEvent,
@@ -88,6 +89,7 @@ import type { IBaseWidget } from './types/widgets'
 import { alignNodes, distributeNodes, getBoundaryNodes } from './utils/arrange'
 import { findFirstNode, getAllNestedItems } from './utils/collections'
 import { resolveConnectingLinkColor } from './utils/linkColors'
+import { createUuidv4 } from './utils/uuid'
 import type { UUID } from './utils/uuid'
 import { BaseWidget } from './widgets/BaseWidget'
 import { toConcreteWidget } from './widgets/widgetMap'
@@ -228,20 +230,19 @@ const cursors = {
   NW: 'nwse-resize'
 } as const
 
+// Optimised buffers used during rendering
+const temp = new Rectangle()
+const temp_vec2: Point = [0, 0]
+const tmp_area = new Rectangle()
+const margin_area = new Rectangle()
+const link_bounding = new Rectangle()
 /**
  * This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.
  * Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked
  */
 export class LGraphCanvas
   implements CustomEventDispatcher<LGraphCanvasEventMap>
 {
-  // Optimised buffers used during rendering
-  static #temp = new Float32Array(4)
-  static #temp_vec2 = new Float32Array(2)
-  static #tmp_area = new Float32Array(4)
-  static #margin_area = new Float32Array(4)
-  static #link_bounding = new Float32Array(4)
-
   static DEFAULT_BACKGROUND_IMAGE =
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII='
 
@@ -628,7 +629,7 @@ export class LGraphCanvas
   dirty_area?: Rect | null
   /** @deprecated Unused */
   node_in_panel?: LGraphNode | null
-  last_mouse: ReadOnlyPoint = [0, 0]
+  last_mouse: Readonly<Point> = [0, 0]
   last_mouseclick: number = 0
   graph: LGraph | Subgraph | null
   get _graph(): LGraph | Subgraph {
@@ -2634,7 +2635,7 @@ export class LGraphCanvas
     pointer: CanvasPointer,
     node?: LGraphNode | undefined
   ): void {
-    const dragRect = new Float32Array(4)
+    const dragRect: Rect = [0, 0, 0, 0]
 
     dragRect[0] = e.canvasX
     dragRect[1] = e.canvasY
@@ -3174,7 +3175,7 @@ export class LGraphCanvas
 
     LGraphCanvas.active_canvas = this
     this.adjustMouseEvent(e)
-    const mouse: ReadOnlyPoint = [e.clientX, e.clientY]
+    const mouse: Readonly<Point> = [e.clientX, e.clientY]
     this.mouse[0] = mouse[0]
     this.mouse[1] = mouse[1]
     const delta = [mouse[0] - this.last_mouse[0], mouse[1] - this.last_mouse[1]]
@@ -4077,7 +4078,7 @@ export class LGraphCanvas
     this.setDirty(true)
   }
 
-  #handleMultiSelect(e: CanvasPointerEvent, dragRect: Float32Array) {
+  #handleMultiSelect(e: CanvasPointerEvent, dragRect: Rect) {
     // Process drag
     // Convert Point pair (pos, offset) to Rect
     const { graph, selectedItems, subgraph } = this
@@ -4848,7 +4849,7 @@ export class LGraphCanvas
   }
 
   /** Get the target snap / highlight point in graph space */
-  #getHighlightPosition(): ReadOnlyPoint {
+  #getHighlightPosition(): Readonly<Point> {
     return LiteGraph.snaps_for_comfy
       ? this.linkConnector.state.snapLinksPos ??
           this._highlight_pos ??
@@ -4863,7 +4864,7 @@ export class LGraphCanvas
    */
   #renderSnapHighlight(
     ctx: CanvasRenderingContext2D,
-    highlightPos: ReadOnlyPoint
+    highlightPos: Readonly<Point>
   ): void {
     const linkConnectorSnap = !!this.linkConnector.state.snapLinksPos
     if (!this._highlight_pos && !linkConnectorSnap) return
@@ -5204,8 +5205,9 @@ export class LGraphCanvas
 
     // clip if required (mask)
     const shape = node._shape || RenderShape.BOX
-    const size = LGraphCanvas.#temp_vec2
-    size.set(node.renderingSize)
+    const size = temp_vec2
+    size[0] = node.renderingSize[0]
+    size[1] = node.renderingSize[1]
 
     if (node.collapsed) {
       ctx.font = this.inner_text_font
@@ -5399,7 +5401,7 @@ export class LGraphCanvas
         : true
 
     // Normalised node dimensions
-    const area = LGraphCanvas.#tmp_area
+    const area = tmp_area
     area.set(node.boundingRect)
     area[0] -= node.pos[0]
     area[1] -= node.pos[1]
@@ -5501,7 +5503,7 @@ export class LGraphCanvas
     item: Positionable,
     shape = RenderShape.ROUND
   ) {
-    const snapGuide = LGraphCanvas.#temp
+    const snapGuide = temp
     snapGuide.set(item.boundingRect)
 
     // Not all items have pos equal to top-left of bounds
@@ -5548,10 +5550,10 @@ export class LGraphCanvas
 
     const now = LiteGraph.getTime()
     const { visible_area } = this
-    LGraphCanvas.#margin_area[0] = visible_area[0] - 20
-    LGraphCanvas.#margin_area[1] = visible_area[1] - 20
-    LGraphCanvas.#margin_area[2] = visible_area[2] + 40
-    LGraphCanvas.#margin_area[3] = visible_area[3] + 40
+    margin_area[0] = visible_area[0] - 20
+    margin_area[1] = visible_area[1] - 20
+    margin_area[2] = visible_area[2] + 40
+    margin_area[3] = visible_area[3] + 40
 
     // draw connections
     ctx.lineWidth = this.connections_width
@@ -5772,18 +5774,13 @@ export class LGraphCanvas
     // Bounding box of all points (bezier overshoot on long links will be cut)
     const pointsX = points.map((x) => x[0])
     const pointsY = points.map((x) => x[1])
-    LGraphCanvas.#link_bounding[0] = Math.min(...pointsX)
-    LGraphCanvas.#link_bounding[1] = Math.min(...pointsY)
-    LGraphCanvas.#link_bounding[2] =
-      Math.max(...pointsX) - LGraphCanvas.#link_bounding[0]
-    LGraphCanvas.#link_bounding[3] =
-      Math.max(...pointsY) - LGraphCanvas.#link_bounding[1]
+    link_bounding[0] = Math.min(...pointsX)
+    link_bounding[1] = Math.min(...pointsY)
+    link_bounding[2] = Math.max(...pointsX) - link_bounding[0]
+    link_bounding[3] = Math.max(...pointsY) - link_bounding[1]
 
     // skip links outside of the visible area of the canvas
-    if (
-      !overlapBounding(LGraphCanvas.#link_bounding, LGraphCanvas.#margin_area)
-    )
-      return
+    if (!overlapBounding(link_bounding, margin_area)) return
 
     const start_dir = startDirection || LinkDirection.RIGHT
     const end_dir = endDirection || LinkDirection.LEFT
@@ -5942,8 +5939,8 @@ export class LGraphCanvas
    */
   renderLink(
     ctx: CanvasRenderingContext2D,
-    a: ReadOnlyPoint,
-    b: ReadOnlyPoint,
+    a: Readonly<Point>,
+    b: Readonly<Point>,
     link: LLink | null,
     skip_border: boolean,
     flow: number | null,
@@ -5960,9 +5957,9 @@ export class LGraphCanvas
       /** When defined, render data will be saved to this reroute instead of the {@link link}. */
       reroute?: Reroute
       /** Offset of the bezier curve control point from {@link a point a} (output side) */
-      startControl?: ReadOnlyPoint
+      startControl?: Readonly<Point>
       /** Offset of the bezier curve control point from {@link b point b} (input side) */
-      endControl?: ReadOnlyPoint
+      endControl?: Readonly<Point>
       /** Number of sublines (useful to represent vec3 or rgb) @todo If implemented, refactor calculations out of the loop */
       num_sublines?: number
       /** Whether this is a floating link segment */

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png

@@ -13,7 +13,7 @@ import type {
   Positionable,
   Size
 } from './interfaces'
-import { LiteGraph } from './litegraph'
+import { LiteGraph, Rectangle } from './litegraph'
 import {
   containsCentre,
   containsRect,
@@ -40,15 +40,10 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
   title: string
   font?: string
   font_size: number = LiteGraph.DEFAULT_GROUP_FONT || 24
-  _bounding: Float32Array = new Float32Array([
-    10,
-    10,
-    LGraphGroup.minWidth,
-    LGraphGroup.minHeight
-  ])
-
-  _pos: Point = this._bounding.subarray(0, 2)
-  _size: Size = this._bounding.subarray(2, 4)
+  _bounding = new Rectangle(10, 10, LGraphGroup.minWidth, LGraphGroup.minHeight)
+
+  _pos: Point = this._bounding.pos
+  _size: Size = this._bounding.size
   /** @deprecated See {@link _children} */
   _nodes: LGraphNode[] = []
   _children: Set<Positionable> = new Set()

src/lib/litegraph/src/LGraphCanvas.ts

@@ -37,7 +37,6 @@ import type {
   ISlotType,
   Point,
   Positionable,
-  ReadOnlyPoint,
   ReadOnlyRect,
   Rect,
   Size
@@ -413,7 +412,7 @@ export class LGraphNode
   }
 
   /** @inheritdoc {@link renderArea} */
-  #renderArea: Float32Array = new Float32Array(4)
+  #renderArea = new Rectangle()
   /**
    * Rect describing the node area, including shadows and any protrusions.
    * Determines if the node is visible.  Calculated once at the start of every frame.
@@ -434,18 +433,18 @@ export class LGraphNode
   }
 
   /** The offset from {@link pos} to the top-left of {@link boundingRect}. */
-  get boundingOffset(): ReadOnlyPoint {
+  get boundingOffset(): Readonly<Point> {
     const {
       pos: [posX, posY],
       boundingRect: [bX, bY]
     } = this
     return [posX - bX, posY - bY]
   }
 
-  /** {@link pos} and {@link size} values are backed by this {@link Rect}. */
-  _posSize: Float32Array = new Float32Array(4)
-  _pos: Point = this._posSize.subarray(0, 2)
-  _size: Size = this._posSize.subarray(2, 4)
+  /** {@link pos} and {@link size} values are backed by this {@link Rectangle}. */
+  _posSize = new Rectangle()
+  _pos: Point = this._posSize.pos
+  _size: Size = this._posSize.size
 
   public get pos() {
     return this._pos
@@ -1653,7 +1652,7 @@ export class LGraphNode
       inputs ? inputs.filter((input) => !isWidgetInputSlot(input)).length : 1,
       outputs ? outputs.length : 1
     )
-    const size = out || new Float32Array([0, 0])
+    const size = out ?? [0, 0]
     rows = Math.max(rows, 1)
     // although it should be graphcanvas.inner_text_font size
     const font_size = LiteGraph.NODE_TEXT_SIZE
@@ -2004,13 +2003,13 @@ export class LGraphNode
 
   /**
    * returns the bounding of the object, used for rendering purposes
-   * @param out {Float32Array[4]?} [optional] a place to store the output, to free garbage
+   * @param out {Rect?} [optional] a place to store the output, to free garbage
    * @param includeExternal {boolean?} [optional] set to true to
    * include the shadow and connection points in the bounding calculation
    * @returns the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
    */
   getBounding(out?: Rect, includeExternal?: boolean): Rect {
-    out ||= new Float32Array(4)
+    out ||= [0, 0, 0, 0]
 
     const rect = includeExternal ? this.renderArea : this.boundingRect
     out[0] = rect[0]
@@ -3169,7 +3168,7 @@ export class LGraphNode
    * @returns the position
    */
   getConnectionPos(is_input: boolean, slot_number: number, out?: Point): Point {
-    out ||= new Float32Array(2)
+    out ||= [0, 0]
 
     const {
       pos: [nodeX, nodeY],

src/lib/litegraph/src/LGraphGroup.ts

@@ -14,6 +14,7 @@ import type {
   ISlotType,
   LinkNetwork,
   LinkSegment,
+  Point,
   ReadonlyLinkNetwork
 } from './interfaces'
 import type {
@@ -109,7 +110,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
   data?: number | string | boolean | { toToolTip?(): string }
   _data?: unknown
   /** Centre point of the link, calculated during render only - can be inaccurate */
-  _pos: Float32Array
+  _pos: Point
   /** @todo Clean up - never implemented in comfy. */
   _last_time?: number
   /** The last canvas 2D path that was used to render this link */
@@ -171,7 +172,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
 
     this._data = null
     // center
-    this._pos = new Float32Array(2)
+    this._pos = [0, 0]
   }
 
   /** @deprecated Use {@link LLink.create} */