From f6cf051282301b1e06aa77709deb1f874197f3d9 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 2 Dec 2024 17:03:14 +0000 Subject: [PATCH 1/2] Fix junction insert position via context menu --- .../editor-client/src/js/ui/contextMenu.js | 14 ++++--- .../editor-client/src/js/ui/view-tools.js | 41 +++++++++++-------- .../@node-red/editor-client/src/js/ui/view.js | 4 +- 3 files changed, 33 insertions(+), 26 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js index 698842dbd..53ebe5c4b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js @@ -54,15 +54,15 @@ RED.contextMenu = (function () { } } + const scale = RED.view.scale() const offset = $("#red-ui-workspace-chart").offset() - - let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft() - let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop() + let addX = (options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()) / scale + let addY = (options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()) / scale if (RED.view.snapGrid) { const gridSize = RED.view.gridSize() - addX = gridSize * Math.floor(addX / gridSize) - addY = gridSize * Math.floor(addY / gridSize) + addX = gridSize * Math.round(addX / gridSize) + addY = gridSize * Math.round(addY / gridSize) } if (RED.settings.theme("menu.menu-item-action-list", true)) { @@ -87,7 +87,9 @@ RED.contextMenu = (function () { }, (hasLinks) ? { // has least 1 wire selected label: RED._("contextMenu.junction"), - onselect: 'core:split-wires-with-junctions', + onselect: function () { + RED.actions.invoke('core:split-wires-with-junctions', { x: addX, y: addY }) + }, disabled: !canEdit || !hasLinks } : { label: RED._("contextMenu.junction"), diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js index 22cb1eecd..eecd309d1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js @@ -1154,11 +1154,11 @@ RED.view.tools = (function() { } } - function addJunctionsToWires(wires) { + function addJunctionsToWires(options = {}) { if (RED.workspaces.isLocked()) { return } - let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link)); + let wiresToSplit = options.wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link)); if (!wiresToSplit) { return } @@ -1206,21 +1206,26 @@ RED.view.tools = (function() { if (links.length === 0) { return } - let pointCount = 0 - links.forEach(function(l) { - if (l._sliceLocation) { - junction.x += l._sliceLocation.x - junction.y += l._sliceLocation.y - delete l._sliceLocation - pointCount++ - } else { - junction.x += l.source.x + l.source.w/2 + l.target.x - l.target.w/2 - junction.y += l.source.y + l.target.y - pointCount += 2 - } - }) - junction.x = Math.round(junction.x/pointCount) - junction.y = Math.round(junction.y/pointCount) + if (addedJunctions.length === 0 && Object.hasOwn(options, 'x') && Object.hasOwn(options, 'y')) { + junction.x = options.x + junction.y = options.y + } else { + let pointCount = 0 + links.forEach(function(l) { + if (l._sliceLocation) { + junction.x += l._sliceLocation.x + junction.y += l._sliceLocation.y + delete l._sliceLocation + pointCount++ + } else { + junction.x += l.source.x + l.source.w/2 + l.target.x - l.target.w/2 + junction.y += l.source.y + l.target.y + pointCount += 2 + } + }) + junction.x = Math.round(junction.x/pointCount) + junction.y = Math.round(junction.y/pointCount) + } if (RED.view.snapGrid) { let gridSize = RED.view.gridSize() junction.x = (gridSize*Math.round(junction.x/gridSize)); @@ -1410,7 +1415,7 @@ RED.view.tools = (function() { RED.actions.add("core:wire-multiple-to-node", function() { wireMultipleToNode() }) RED.actions.add("core:split-wire-with-link-nodes", function () { splitWiresWithLinkNodes() }); - RED.actions.add("core:split-wires-with-junctions", function () { addJunctionsToWires() }); + RED.actions.add("core:split-wires-with-junctions", function (options) { addJunctionsToWires(options) }); RED.actions.add("core:generate-node-names", generateNodeNames ) 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 245b6db75..61ee3e3f6 100644 --- 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 @@ -321,8 +321,8 @@ RED.view = (function() { evt.stopPropagation() RED.contextMenu.show({ type: 'workspace', - x:evt.clientX-5, - y:evt.clientY-5 + x: evt.clientX, + y: evt.clientY }) return false }) From e8d81d814cfb4317a4e663f47ffa19f5c4fa2eac Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 3 Dec 2024 10:15:59 +0000 Subject: [PATCH 2/2] Apply scaleFactor when calculating junction slice positions --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 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 61ee3e3f6..8ce6dc630 100644 --- 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 @@ -5174,8 +5174,8 @@ RED.view = (function() { var delta = Infinity; for (var i = 0; i < lineLength; i++) { var linePos = pathLine.getPointAtLength(i); - var posDeltaX = Math.abs(linePos.x-d3.event.offsetX) - var posDeltaY = Math.abs(linePos.y-d3.event.offsetY) + var posDeltaX = Math.abs(linePos.x-(d3.event.offsetX / scaleFactor)) + var posDeltaY = Math.abs(linePos.y-(d3.event.offsetY / scaleFactor)) var posDelta = posDeltaX*posDeltaX + posDeltaY*posDeltaY if (posDelta < delta) { pos = linePos