Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2019-02-25 13:47:16 -07:00 committed by Matt Gilman
parent c84f40ee36
commit 160ade9f9d
No known key found for this signature in database
GPG Key ID: DF61EC19432AEE37
8 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
View File

@ -332,11 +332,11 @@ text.load-balance-icon-active {
} }
text.load-balance-icon-184 { text.load-balance-icon-184 {
transform-origin: 189px 10px 0; transform-origin: 197px 10px 0;
} }
text.load-balance-icon-200 { 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 { text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port {

21
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
View File

@ -60,12 +60,18 @@
// the dimensions for the connection label // the dimensions for the connection label
var dimensions = { var dimensions = {
width: 216 width: 224
}; };
// width of a backpressure indicator - half of width, left/right padding, left/right border // width of a backpressure indicator - half of width, left/right padding, left/right border
var backpressureBarWidth = (dimensions.width / 2) - 15 - 2; 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. * Gets the position of the label for the specified connection.
* *
@ -896,7 +902,7 @@
connectionFrom.append('text') connectionFrom.append('text')
.attrs({ .attrs({
'class': 'connection-from-run-status', 'class': 'connection-from-run-status',
'x': 200, 'x': 208,
'y': 14 'y': 14
}); });
} else { } else {
@ -1005,7 +1011,7 @@
connectionTo.append('text') connectionTo.append('text')
.attrs({ .attrs({
'class': 'connection-to-run-status', 'class': 'connection-to-run-status',
'x': 200, 'x': 208,
'y': 14 'y': 14
}); });
} else { } else {
@ -1221,7 +1227,7 @@
queued.append('text') queued.append('text')
.attrs({ .attrs({
'class': 'expiration-icon', 'class': 'expiration-icon',
'x': 200, 'x': 208,
'y': 14 'y': 14
}) })
.text(function () { .text(function () {
@ -1381,7 +1387,7 @@
return d.permissions.canRead && !isExpirationConfigured(d.component); return d.permissions.canRead && !isExpirationConfigured(d.component);
}).attr('x', function() { }).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 () { }).select('title').text(function () {
if (d.permissions.canRead) { if (d.permissions.canRead) {
@ -1678,8 +1684,9 @@
d3.event.sourceEvent.stopPropagation(); d3.event.sourceEvent.stopPropagation();
}) })
.on('drag', function (d) { .on('drag', function (d) {
d.x = d3.event.x; snapEnabled = !d3.event.sourceEvent.shiftKey;
d.y = d3.event.y; 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 // redraw this connection
d3.select(this.parentNode).call(updateConnections, { d3.select(this.parentNode).call(updateConnections, {

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
View File

@ -61,6 +61,8 @@
var nfCanvas; var nfCanvas;
var drag; var drag;
var snapAlignmentPixels = 8;
var snapEnabled = true;
/** /**
* Updates the positioning of all selected components. * Updates the positioning of all selected components.
@ -213,13 +215,14 @@
}); });
} else { } else {
// update the position of the drag selection // 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) { dragSelection.attr('x', function (d) {
d.x += d3.event.dx; d.x += d3.event.dx;
return d.x; return snapEnabled ? (Math.round(d.x/snapAlignmentPixels) * snapAlignmentPixels) : d.x;
}) }).attr('y', function (d) {
.attr('y', function (d) {
d.y += d3.event.dy; d.y += d3.event.dy;
return d.y; return snapEnabled ? (Math.round(d.y/snapAlignmentPixels) * snapAlignmentPixels) : d.y;
}); });
} }
}) })
@ -260,8 +263,8 @@
*/ */
updateComponentPosition: function (d, delta) { updateComponentPosition: function (d, delta) {
var newPosition = { var newPosition = {
'x': d.position.x + delta.x, 'x': snapEnabled ? (Math.round((d.position.x + delta.x)/snapAlignmentPixels) * snapAlignmentPixels) : d.position.x + delta.x,
'y': d.position.y + delta.y 'y': snapEnabled ? (Math.round((d.position.y + delta.y)/snapAlignmentPixels) * snapAlignmentPixels) : d.position.y + delta.y
}; };
// build the entity // build the entity

18
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
View File

@ -54,11 +54,11 @@
var nfContextMenu; var nfContextMenu;
var dimensions = { var dimensions = {
width: 150, width: 148,
height: 150 height: 148
}; };
var MIN_HEIGHT = 20; var MIN_HEIGHT = 24;
var MIN_WIDTH = 64; var MIN_WIDTH = 64;
// ----------------------------- // -----------------------------
@ -86,6 +86,12 @@
var labelPointDrag; var labelPointDrag;
// --------------------------
// Snap alignment for label resizing
// --------------------------
var snapAlignmentPixels = 8;
var snapEnabled = true;
// -------------------------- // --------------------------
// privately scoped functions // privately scoped functions
// -------------------------- // --------------------------
@ -351,8 +357,10 @@
var labelData = label.datum(); var labelData = label.datum();
// update the dimensions and ensure they are still within bounds // update the dimensions and ensure they are still within bounds
labelData.dimensions.width = Math.max(MIN_WIDTH, d3.event.x); // snap between aligned sizes unless the user is holding shift
labelData.dimensions.height = Math.max(MIN_HEIGHT, d3.event.y); 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 // redraw this connection
updateLabels(label); updateLabels(label);

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
View File

@ -55,11 +55,11 @@
var portDimensions = { var portDimensions = {
width: 240, width: 240,
height: 50 height: 48
}; };
var remotePortDimensions = { var remotePortDimensions = {
width: 240, width: 240,
height: 75 height: 80
}; };
// ---------------------------- // ----------------------------

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
View File

@ -58,8 +58,8 @@
var PREVIEW_NAME_LENGTH = 30; var PREVIEW_NAME_LENGTH = 30;
var dimensions = { var dimensions = {
width: 380, width: 384,
height: 172 height: 176
}; };
// ---------------------------- // ----------------------------

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
View File

@ -57,8 +57,8 @@
// default dimensions for each type of component // default dimensions for each type of component
var dimensions = { var dimensions = {
width: 350, width: 352,
height: 130 height: 128
}; };
// --------------------------------- // ---------------------------------

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
View File

@ -56,8 +56,8 @@
var PREVIEW_NAME_LENGTH = 30; var PREVIEW_NAME_LENGTH = 30;
var dimensions = { var dimensions = {
width: 380, width: 384,
height: 158 height: 176
}; };
// -------------------------------------------- // --------------------------------------------
@ -433,7 +433,7 @@
details.append('text') details.append('text')
.attrs({ .attrs({
'x': 10, 'x': 10,
'y': 150, 'y': 168,
'class': 'remote-process-group-last-refresh' 'class': 'remote-process-group-last-refresh'
}); });