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 8b1717bb89..8b01794d4d 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 e6d7b7d247..f4b333cd2c 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 95869e6ba9..3c67f6e6c1 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 d5618ae5f7..3621780098 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; // ----------------------------- @@ -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); 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 c43cbf7e61..a9217663b7 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 90982f6a1e..2e82430ad1 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 751caac1e6..5667928ca4 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 e89a6e1291..7d10947387 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' });