[ https://issues.apache.org/jira/browse/NIFI-5018?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Ryan Bower updated NIFI-5018: ----------------------------- Comment: was deleted (was: [~joewitt] is this an ok place to inquire about some of the canvas component details? My grid snap works, but the edges aren't consistent with canvas components of differing dimensions. I may be able to normalize the rounding and account for the width of the component, but I'm not sure. Is there documentation of the default dimensions for each canvas component? ) > basic snap-to-grid feature for UI > --------------------------------- > > Key: NIFI-5018 > URL: https://issues.apache.org/jira/browse/NIFI-5018 > Project: Apache NiFi > Issue Type: Improvement > Components: Core UI > Affects Versions: 1.5.0, 1.6.0 > Environment: Tested on Windows > Reporter: Ryan Bower > Priority: Minor > Labels: web-ui > Original Estimate: 0.25h > Remaining Estimate: 0.25h > > NiFi 1.2.0 contained the flow alignment feature, detailed: > *NiFi 1.2.0 has a nice, new little feature that will surely please those who > may spend a bit of time – for some, perhaps A LOT of time – getting their > flow to line up perfectly. The background grid lines can help with this, but > the process can still be quite tedious with many components. Now there is a > quick, easy way.* > **I've made a slight modification to the UI (roughly 5 lines) that results in > a "snap-to-grid" for selected components. See [this > video|https://www.youtube.com/watch?v=S7lnBMMO6KE&feature=youtu.be] for an > example of it in action. > Target file: > nifi-1.6.0-src\nifi-nar-bundles\nifi-framework-bundle\nifi-framework\nifi-web\nifi-web-ui\src\main\webapp\js\nf\canvas\nf-draggable.js > The processor alignment is based on rounding the component's X and Y > coordinates during the drag event. The result is a consistent "snap" > alignment. I modified the following code to achieve this: > > > > {{// previous code...}} > > {{(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon, > nfDialog, nfClient, nfErrorHandler) {}} > {{ 'use strict';}} > {{ var nfCanvas;}} > {{ var drag;}}{{ }} > > {{// added for snap-to-grid feature.}} > {{ var snapTo = 16;}} > > {{// code...}} > > {{ var nfDraggable = {}} > > {{ // more code...}} > > {{ if (dragSelection.empty()) }}{ > > {{ // more code...}} > > {{ } else {}} > {{ // update the position of the drag selection}}{{ }} > {{ dragSelection.attr('x', function (d) {}} > {{ d.x += d3.event.dx;}} > {{ // rounding the result achieves the "snap" alignment}} > {{ return (Math.round(d.x/snapTo) * snapTo);}} > {{ })}} > {{ .attr('y', function (d) {}} > {{ d.y += d3.event.dy;}} > {{ return (Math.round(d.y/snapTo) * snapTo);}} > {{ });}} > } > > {{ // more code}} > > {{ updateComponentPosition: function (d, delta) {}} > {{ // perform rounding again for the update}} > {{ var newPosition = {}} > {{ 'x': (Math.round((d.position.x + delta.x)/snapTo) * snapTo),}} > {{ 'y': (Math.round((d.position.y + delta.y)/snapTo) * snapTo)}} > {{ };}} > {{ // more code}} > {{}}} > > The downside of this is that components must start aligned in order to snap > to the same alignment on the canvas. To remedy this, just use the 1.2.0 flow > alignment feature. Note: this is only an issue for old, unaligned flows. > New flows and aligned flows don't have this problem. > -- This message was sent by Atlassian JIRA (v7.6.3#76005)