mirror of https://github.com/apache/nifi.git
NIFI-5018
- Added snap alignment for nf-label, label resize events, and nf-connection - Shift key now disables snap alignment during the drag event. - nf-connection load-balance-icon updated This closes #3335
This commit is contained in:
Ryan Bower
Matt Gilman
parent
c84f40ee36
commit
160ade9f9d
|
|
@ -332,11 +332,11 @@ text.load-balance-icon-active {
|
|||
}
|
||||
|
||||
text.load-balance-icon-184 {
|
||||
transform-origin: 189px 10px 0;
|
||||
transform-origin: 197px 10px 0;
|
||||
}
|
||||
|
||||
text.load-balance-icon-200 {
|
||||
transform-origin: 205px 10px 0;
|
||||
transform-origin: 213px 10px 0;
|
||||
}
|
||||
|
||||
text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port {
|
||||
|
|
|
|||
|
|
@ -60,12 +60,18 @@
|
|||
|
||||
// the dimensions for the connection label
|
||||
var dimensions = {
|
||||
width: 216
|
||||
width: 224
|
||||
};
|
||||
|
||||
// width of a backpressure indicator - half of width, left/right padding, left/right border
|
||||
var backpressureBarWidth = (dimensions.width / 2) - 15 - 2;
|
||||
|
||||
// --------------------------
|
||||
// Snap alignment for drag events
|
||||
// --------------------------
|
||||
var snapAlignmentPixels = 8;
|
||||
var snapEnabled = true;
|
||||
|
||||
/**
|
||||
* Gets the position of the label for the specified connection.
|
||||
*
|
||||
|
|
@ -896,7 +902,7 @@
|
|||
connectionFrom.append('text')
|
||||
.attrs({
|
||||
'class': 'connection-from-run-status',
|
||||
'x': 200,
|
||||
'x': 208,
|
||||
'y': 14
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1005,7 +1011,7 @@
|
|||
connectionTo.append('text')
|
||||
.attrs({
|
||||
'class': 'connection-to-run-status',
|
||||
'x': 200,
|
||||
'x': 208,
|
||||
'y': 14
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1221,7 +1227,7 @@
|
|||
queued.append('text')
|
||||
.attrs({
|
||||
'class': 'expiration-icon',
|
||||
'x': 200,
|
||||
'x': 208,
|
||||
'y': 14
|
||||
})
|
||||
.text(function () {
|
||||
|
|
@ -1381,7 +1387,7 @@
|
|||
return d.permissions.canRead && !isExpirationConfigured(d.component);
|
||||
|
||||
}).attr('x', function() {
|
||||
return d.permissions.canRead && isExpirationConfigured(d.component) ? 184 : 200;
|
||||
return d.permissions.canRead && isExpirationConfigured(d.component) ? 192 : 208;
|
||||
|
||||
}).select('title').text(function () {
|
||||
if (d.permissions.canRead) {
|
||||
|
|
@ -1678,8 +1684,9 @@
|
|||
d3.event.sourceEvent.stopPropagation();
|
||||
})
|
||||
.on('drag', function (d) {
|
||||
d.x = d3.event.x;
|
||||
d.y = d3.event.y;
|
||||
snapEnabled = !d3.event.sourceEvent.shiftKey;
|
||||
d.x = snapEnabled ? (Math.round(d3.event.x/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.x;
|
||||
d.y = snapEnabled ? (Math.round(d3.event.y/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.y;
|
||||
|
||||
// redraw this connection
|
||||
d3.select(this.parentNode).call(updateConnections, {
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@
|
|||
|
||||
var nfCanvas;
|
||||
var drag;
|
||||
var snapAlignmentPixels = 8;
|
||||
var snapEnabled = true;
|
||||
|
||||
/**
|
||||
* Updates the positioning of all selected components.
|
||||
|
|
@ -213,15 +215,16 @@
|
|||
});
|
||||
} else {
|
||||
// update the position of the drag selection
|
||||
// snap align the position unless the user is holding shift
|
||||
snapEnabled = !d3.event.sourceEvent.shiftKey;
|
||||
dragSelection.attr('x', function (d) {
|
||||
d.x += d3.event.dx;
|
||||
return d.x;
|
||||
})
|
||||
.attr('y', function (d) {
|
||||
return snapEnabled ? (Math.round(d.x/snapAlignmentPixels) * snapAlignmentPixels) : d.x;
|
||||
}).attr('y', function (d) {
|
||||
d.y += d3.event.dy;
|
||||
return d.y;
|
||||
});
|
||||
}
|
||||
return snapEnabled ? (Math.round(d.y/snapAlignmentPixels) * snapAlignmentPixels) : d.y;
|
||||
});
|
||||
}
|
||||
})
|
||||
.on('end', function () {
|
||||
// stop further propagation
|
||||
|
|
@ -260,8 +263,8 @@
|
|||
*/
|
||||
updateComponentPosition: function (d, delta) {
|
||||
var newPosition = {
|
||||
'x': d.position.x + delta.x,
|
||||
'y': d.position.y + delta.y
|
||||
'x': snapEnabled ? (Math.round((d.position.x + delta.x)/snapAlignmentPixels) * snapAlignmentPixels) : d.position.x + delta.x,
|
||||
'y': snapEnabled ? (Math.round((d.position.y + delta.y)/snapAlignmentPixels) * snapAlignmentPixels) : d.position.y + delta.y
|
||||
};
|
||||
|
||||
// build the entity
|
||||
|
|
|
|||
|
|
@ -54,11 +54,11 @@
|
|||
var nfContextMenu;
|
||||
|
||||
var dimensions = {
|
||||
width: 150,
|
||||
height: 150
|
||||
width: 148,
|
||||
height: 148
|
||||
};
|
||||
|
||||
var MIN_HEIGHT = 20;
|
||||
var MIN_HEIGHT = 24;
|
||||
var MIN_WIDTH = 64;
|
||||
|
||||
// -----------------------------
|
||||
|
|
@ -86,6 +86,12 @@
|
|||
|
||||
var labelPointDrag;
|
||||
|
||||
// --------------------------
|
||||
// Snap alignment for label resizing
|
||||
// --------------------------
|
||||
var snapAlignmentPixels = 8;
|
||||
var snapEnabled = true;
|
||||
|
||||
// --------------------------
|
||||
// privately scoped functions
|
||||
// --------------------------
|
||||
|
|
@ -351,8 +357,10 @@
|
|||
var labelData = label.datum();
|
||||
|
||||
// update the dimensions and ensure they are still within bounds
|
||||
labelData.dimensions.width = Math.max(MIN_WIDTH, d3.event.x);
|
||||
labelData.dimensions.height = Math.max(MIN_HEIGHT, d3.event.y);
|
||||
// snap between aligned sizes unless the user is holding shift
|
||||
snapEnabled = !d3.event.sourceEvent.shiftKey;
|
||||
labelData.dimensions.width = Math.max(MIN_WIDTH, snapEnabled ? (Math.round(d3.event.x/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.x);
|
||||
labelData.dimensions.height = Math.max(MIN_HEIGHT, snapEnabled ? (Math.round(d3.event.y/snapAlignmentPixels) * snapAlignmentPixels) : d3.event.y);
|
||||
|
||||
// redraw this connection
|
||||
updateLabels(label);
|
||||
|
|
|
|||
|
|
@ -55,11 +55,11 @@
|
|||
|
||||
var portDimensions = {
|
||||
width: 240,
|
||||
height: 50
|
||||
height: 48
|
||||
};
|
||||
var remotePortDimensions = {
|
||||
width: 240,
|
||||
height: 75
|
||||
height: 80
|
||||
};
|
||||
|
||||
// ----------------------------
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@
|
|||
var PREVIEW_NAME_LENGTH = 30;
|
||||
|
||||
var dimensions = {
|
||||
width: 380,
|
||||
height: 172
|
||||
width: 384,
|
||||
height: 176
|
||||
};
|
||||
|
||||
// ----------------------------
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
|
||||
// default dimensions for each type of component
|
||||
var dimensions = {
|
||||
width: 350,
|
||||
height: 130
|
||||
width: 352,
|
||||
height: 128
|
||||
};
|
||||
|
||||
// ---------------------------------
|
||||
|
|
|
|||
|
|
@ -56,8 +56,8 @@
|
|||
var PREVIEW_NAME_LENGTH = 30;
|
||||
|
||||
var dimensions = {
|
||||
width: 380,
|
||||
height: 158
|
||||
width: 384,
|
||||
height: 176
|
||||
};
|
||||
|
||||
// --------------------------------------------
|
||||
|
|
@ -433,7 +433,7 @@
|
|||
details.append('text')
|
||||
.attrs({
|
||||
'x': 10,
|
||||
'y': 150,
|
||||
'y': 168,
|
||||
'class': 'remote-process-group-last-refresh'
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue