This is an automated email from the ASF dual-hosted git repository.
mcgilman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/master by this push:
new 160ade9 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
160ade9 is described below
commit 160ade9f9d3588d8afb053360e58fd189475ab75
Author: Ryan Bower <[email protected]>
AuthorDate: Mon Feb 25 13:47:16 2019 -0700
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
---
.../nifi-web-ui/src/main/webapp/css/graph.css | 4 ++--
.../src/main/webapp/js/nf/canvas/nf-connection.js | 21 ++++++++++++++-------
.../src/main/webapp/js/nf/canvas/nf-draggable.js | 19 +++++++++++--------
.../src/main/webapp/js/nf/canvas/nf-label.js | 18 +++++++++++++-----
.../src/main/webapp/js/nf/canvas/nf-port.js | 4 ++--
.../main/webapp/js/nf/canvas/nf-process-group.js | 4 ++--
.../src/main/webapp/js/nf/canvas/nf-processor.js | 4 ++--
.../webapp/js/nf/canvas/nf-remote-process-group.js | 6 +++---
8 files changed, 49 insertions(+), 31 deletions(-)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
index 8b1717b..8b01794 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css
@@ -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 {
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
index e6d7b7d..f4b333c 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js
@@ -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, {
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
index 95869e6..3c67f6e 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
@@ -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
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
index d5618ae..3621780 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js
@@ -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;
// -----------------------------
@@ -87,6 +87,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);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
index c43cbf7..a921766 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js
@@ -55,11 +55,11 @@
var portDimensions = {
width: 240,
- height: 50
+ height: 48
};
var remotePortDimensions = {
width: 240,
- height: 75
+ height: 80
};
// ----------------------------
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
index 90982f6..2e82430 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
@@ -58,8 +58,8 @@
var PREVIEW_NAME_LENGTH = 30;
var dimensions = {
- width: 380,
- height: 172
+ width: 384,
+ height: 176
};
// ----------------------------
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
index 751caac..5667928 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
@@ -57,8 +57,8 @@
// default dimensions for each type of component
var dimensions = {
- width: 350,
- height: 130
+ width: 352,
+ height: 128
};
// ---------------------------------
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
index e89a6e1..7d10947 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
@@ -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'
});
