frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Fix scaling issues when dragging nodes into scaled workspace

Browse Source
This commit is contained in:
Nick O'Leary 2021-05-10 21:02:54 +01:00
parent eddddc6c9b
commit e641b0a965
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@ -320,12 +320,12 @@ RED.palette = (function() {
var paletteNode = getPaletteNode(nt); var paletteNode = getPaletteNode(nt);
ui.originalPosition.left = paletteNode.offset().left; ui.originalPosition.left = paletteNode.offset().left;
mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft(); mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop(); mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
if (!groupTimer) { if (!groupTimer) {
groupTimer = setTimeout(function() { groupTimer = setTimeout(function() {
mouseX /= RED.view.scale(); var mx = mouseX / RED.view.scale();
mouseY /= RED.view.scale(); var my = mouseY / RED.view.scale();
var group = RED.view.getGroupAtPoint(mouseX,mouseY); var group = RED.view.getGroupAtPoint(mx,my);
if (group !== hoverGroup) { if (group !== hoverGroup) {
if (hoverGroup) { if (hoverGroup) {
document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered"); document.getElementById("group_select_"+hoverGroup.id).classList.remove("red-ui-flow-group-hovered");
@ -357,23 +357,20 @@ RED.palette = (function() {
svgRect.width = 1; svgRect.width = 1;
svgRect.height = 1; svgRect.height = 1;
nodes = chartSVG.getIntersectionList(svgRect,chartSVG); nodes = chartSVG.getIntersectionList(svgRect,chartSVG);
mouseX /= RED.view.scale();
mouseY /= RED.view.scale();
} else { } else {
// Firefox doesn't do getIntersectionList and that // Firefox doesn't do getIntersectionList and that
// makes us sad // makes us sad
mouseX /= RED.view.scale();
mouseY /= RED.view.scale();
nodes = RED.view.getLinksAtPoint(mouseX,mouseY); nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
} }
var mx = mouseX / RED.view.scale();
var my = mouseY / RED.view.scale();
for (var i=0;i<nodes.length;i++) { for (var i=0;i<nodes.length;i++) {
var node = d3.select(nodes[i]); var node = d3.select(nodes[i]);
if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) { if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
var length = nodes[i].getTotalLength(); var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) { for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j); var p = nodes[i].getPointAtLength(j);
var d2 = ((p.x-mouseX)*(p.x-mouseX))+((p.y-mouseY)*(p.y-mouseY)); var d2 = ((p.x-mx)*(p.x-mx))+((p.y-my)*(p.y-my));
if (d2 < 200 && d2 < bestDistance) { if (d2 < 200 && d2 < bestDistance) {
bestDistance = d2; bestDistance = d2;
bestLink = nodes[i]; bestLink = nodes[i];

10
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -1476,15 +1476,15 @@ RED.view = (function() {
var mouseY = node.n.y; var mouseY = node.n.y;
if (outer[0][0].getIntersectionList) { if (outer[0][0].getIntersectionList) {
var svgRect = outer[0][0].createSVGRect(); var svgRect = outer[0][0].createSVGRect();
svgRect.x = mouseX; svgRect.x = mouseX*scaleFactor;
svgRect.y = mouseY; svgRect.y = mouseY*scaleFactor;
svgRect.width = 1; svgRect.width = 1;
svgRect.height = 1; svgRect.height = 1;
nodes = outer[0][0].getIntersectionList(svgRect, outer[0][0]); nodes = outer[0][0].getIntersectionList(svgRect, outer[0][0]);
} else { } else {
// Firefox doesn"t do getIntersectionList and that // Firefox doesn"t do getIntersectionList and that
// makes us sad // makes us sad
nodes = RED.view.getLinksAtPoint(mouseX,mouseY); nodes = RED.view.getLinksAtPoint(mouseX*scaleFactor,mouseY*scaleFactor);
} }
for (var i=0;i<nodes.length;i++) { for (var i=0;i<nodes.length;i++) {
if (d3.select(nodes[i]).classed("red-ui-flow-link-background")) { if (d3.select(nodes[i]).classed("red-ui-flow-link-background")) {
@ -3445,6 +3445,7 @@ RED.view = (function() {
} }
} }
function getGroupAt(x,y) { function getGroupAt(x,y) {
// x,y expected to be in node-co-ordinate space
var candidateGroups = {}; var candidateGroups = {};
for (var i=0;i<activeGroups.length;i++) { for (var i=0;i<activeGroups.length;i++) {
var g = activeGroups[i]; var g = activeGroups[i];
@ -5081,6 +5082,9 @@ RED.view = (function() {
return scaleFactor; return scaleFactor;
}, },
getLinksAtPoint: function(x,y) { getLinksAtPoint: function(x,y) {
// x,y must be in SVG co-ordinate space
// if they come from a node.x/y, they will need to be scaled using
// scaleFactor first.
var result = []; var result = [];
var links = outer.selectAll(".red-ui-flow-link-background")[0]; var links = outer.selectAll(".red-ui-flow-link-background")[0];
for (var i=0;i<links.length;i++) { for (var i=0;i<links.length;i++) {