From 7bb7149f4cd1ad2948797c1c4910abc2e1fcdf2e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sun, 5 Dec 2021 23:23:57 +0000
Subject: [PATCH] Snap nodes on grid using either edge as reference

---
 .../@node-red/editor-client/src/js/ui/view.js | 55 ++++++++++++++++---
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 166cb2901..3044487bb 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -412,26 +412,56 @@ RED.view = (function() {
                 var historyEvent = result.historyEvent;
                 var nn = result.node;
 
+                RED.nodes.add(nn);
+
                 var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
                 if (showLabel !== undefined &&  (nn._def.hasOwnProperty("showLabel")?nn._def.showLabel:true) && !nn._def.defaults.hasOwnProperty("l")) {
                     nn.l = showLabel;
                 }
 
                 var helperOffset = d3.touches(ui.helper.get(0))[0]||d3.mouse(ui.helper.get(0));
+                var helperWidth = ui.helper.width();
+                var helperHeight = ui.helper.height();
                 var mousePos = d3.touches(this)[0]||d3.mouse(this);
 
-                mousePos[1] += this.scrollTop + ((nn.h/2)-helperOffset[1]);
-                mousePos[0] += this.scrollLeft + ((nn.w/2)-helperOffset[0]);
+                try {
+                    var isLink = (nn.type === "link in" || nn.type === "link out")
+                    var hideLabel = nn.hasOwnProperty('l')?!nn.l : isLink;
+
+                    var label = RED.utils.getNodeLabel(nn, nn.type);
+                    var labelParts = getLabelParts(label, "red-ui-flow-node-label");
+                    if (hideLabel) {
+                        nn.w = node_height;
+                        nn.h = Math.max(node_height,(nn.outputs || 0) * 15);
+                    } else {
+                        nn.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(nn._def.inputs>0?7:0))/20)) );
+                        nn.h = Math.max(6+24*labelParts.lines.length,(nn.outputs || 0) * 15, 30);
+                    }
+                } catch(err) {
+                }
+
+                mousePos[1] += this.scrollTop + ((helperHeight/2)-helperOffset[1]);
+                mousePos[0] += this.scrollLeft + ((helperWidth/2)-helperOffset[0]);
                 mousePos[1] /= scaleFactor;
                 mousePos[0] /= scaleFactor;
 
-                if (snapGrid) {
-                    mousePos[0] = gridSize*(Math.ceil(mousePos[0]/gridSize));
-                    mousePos[1] = gridSize*(Math.ceil(mousePos[1]/gridSize));
-                }
                 nn.x = mousePos[0];
                 nn.y = mousePos[1];
 
+                if (snapGrid) {
+                    var gridOffset = [0,0];
+                    var offsetLeft = nn.x-(gridSize*Math.round((nn.x-nn.w/2)/gridSize)+nn.w/2);
+                    var offsetRight = nn.x-(gridSize*Math.round((nn.x+nn.w/2)/gridSize)-nn.w/2);
+                    if (Math.abs(offsetLeft) < Math.abs(offsetRight)) {
+                        gridOffset[0] = offsetLeft
+                    } else {
+                        gridOffset[0] = offsetRight
+                    }
+                    gridOffset[1] = nn.y-(gridSize*Math.round(nn.y/gridSize));
+                    nn.x -= gridOffset[0];
+                    nn.y -= gridOffset[1];
+                }
+
                 var spliceLink = $(ui.helper).data("splice");
                 if (spliceLink) {
                     // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
@@ -452,7 +482,6 @@ RED.view = (function() {
                     historyEvent.removedLinks = [spliceLink];
                 }
 
-                RED.nodes.add(nn);
 
                 var group = $(ui.helper).data("group");
                 if (group) {
@@ -1515,8 +1544,16 @@ RED.view = (function() {
                     gridOffset[0] = node.n.x-(gridSize*Math.floor(node.n.x/gridSize))-gridSize/2;
                     gridOffset[1] = node.n.y-(gridSize*Math.floor(node.n.y/gridSize))-gridSize/2;
                 } else {
-                    gridOffset[0] = node.n.x-(gridSize*Math.floor((node.n.x-node.n.w/2)/gridSize)+node.n.w/2);
-                    gridOffset[1] = node.n.y-(gridSize*Math.floor(node.n.y/gridSize));
+                    var offsetLeft = node.n.x-(gridSize*Math.round((node.n.x-node.n.w/2)/gridSize)+node.n.w/2);
+                    var offsetRight = node.n.x-(gridSize*Math.round((node.n.x+node.n.w/2)/gridSize)-node.n.w/2);
+                    // gridOffset[0] = node.n.x-(gridSize*Math.floor((node.n.x-node.n.w/2)/gridSize)+node.n.w/2);
+                    if (Math.abs(offsetLeft) < Math.abs(offsetRight)) {
+                        gridOffset[0] = offsetLeft
+                    } else {
+                        gridOffset[0] = offsetRight
+                    }
+                    gridOffset[1] = node.n.y-(gridSize*Math.round(node.n.y/gridSize));
+                    // console.log(offsetLeft, offsetRight);
                 }
                 if (gridOffset[0] !== 0 || gridOffset[1] !== 0) {
                     for (i = 0; i<movingSet.length(); i++) {