Snapsize (#331)

* Improve group resize UX

Removes the teleport of the group corner to the pointer, on the first move event.

* Select groups when clicking titles

* Add snap to grid for groups

* Apply new group resize UX to nodes

src/LGraphCanvas.ts

@@ -2195,7 +2195,26 @@ export class LGraphCanvas {
       this.selected_group = group
       if (group) {
         if (group.isInResize(x, y)) {
+          // Resize group
+          const b = group.boundingRect
+          const offsetX = x - (b[0] + b[2])
+          const offsetY = y - (b[1] + b[3])
+
           pointer.onDragStart = () => this.resizingGroup = group
+          pointer.onDrag = (eMove) => {
+            if (this.read_only) return
+
+            // Resize only by the exact pointer movement
+            const pos: Point = [
+              eMove.canvasX - group.pos[0] - offsetX,
+              eMove.canvasY - group.pos[1] - offsetY,
+            ]
+            // Unless snapping.
+            snapPoint(pos, this.#snapToGrid)
+
+            const resized = group.resize(pos[0], pos[1])
+            if (resized) this.dirty_bgcanvas = true
+          }
           pointer.finally = () => this.resizingGroup = null
         } else {
           const f = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE
@@ -2211,6 +2230,7 @@ export class LGraphCanvas {
             )
           ) {
             // In title bar
+            pointer.onClick = () => this.processSelect(group, e)
             pointer.onDragStart = (pointer) => {
               group.recomputeInsideNodes()
               this.#startDraggingItems(group, pointer, true)
@@ -2285,10 +2305,34 @@ export class LGraphCanvas {
     } else if (!node.flags.collapsed) {
       // Resize node
       if (node.resizable !== false && node.inResizeCorner(x, y)) {
+        const b = node.boundingRect
+        const offsetX = x - (b[0] + b[2])
+        const offsetY = y - (b[1] + b[3])
+
         pointer.onDragStart = () => {
           graph.beforeChange()
           this.resizing_node = node
         }
+
+        pointer.onDrag = (eMove) => {
+          if (this.read_only) return
+
+          // Resize only by the exact pointer movement
+          const pos: Point = [
+            eMove.canvasX - node.pos[0] - offsetX,
+            eMove.canvasY - node.pos[1] - offsetY,
+          ]
+          // Unless snapping.
+          snapPoint(pos, this.#snapToGrid)
+
+          const min = node.computeSize()
+          pos[0] = Math.max(min[0], pos[0])
+          pos[1] = Math.max(min[1], pos[1])
+          node.setSize(pos)
+
+          this.#dirty()
+        }
+
         pointer.onDragEnd = (upEvent) => {
           this.#dirty()
           graph.afterChange(this.resizing_node)
@@ -2768,14 +2812,9 @@ export class LGraphCanvas {
       dragRect[2] = e.canvasX - dragRect[0]
       dragRect[3] = e.canvasY - dragRect[1]
       this.dirty_canvas = true
-    } else if (resizingGroup && !this.read_only) {
+    } else if (resizingGroup) {
       // Resizing a group
-      const resized = resizingGroup.resize(
-        e.canvasX - resizingGroup.pos[0],
-        e.canvasY - resizingGroup.pos[1],
-      )
       underPointer |= CanvasItem.ResizeSe | CanvasItem.Group
-      if (resized) this.dirty_bgcanvas = true
     } else if (this.dragging_canvas) {
       this.ds.offset[0] += delta[0] / this.ds.scale
       this.ds.offset[1] += delta[1] / this.ds.scale
@@ -2959,20 +2998,7 @@ export class LGraphCanvas {
         this.#dirty()
       }
 
-      if (this.resizing_node) {
-        // convert mouse to node space
-        const desired_size: Size = [
-          e.canvasX - this.resizing_node.pos[0],
-          e.canvasY - this.resizing_node.pos[1],
-        ]
-        const min_size = this.resizing_node.computeSize()
-        desired_size[0] = Math.max(min_size[0], desired_size[0])
-        desired_size[1] = Math.max(min_size[1], desired_size[1])
-        this.resizing_node.setSize(desired_size)
-
-        underPointer |= CanvasItem.ResizeSe
-        this.#dirty()
-      }
+      if (this.resizing_node) underPointer |= CanvasItem.ResizeSe
     }
 
     this.state.hoveringOver = underPointer