diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 431a031..d6f4f1a 100644 --- a/src/LGraphCanvas.ts +++ b/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