Ryan Bower created NIFI-5018:
--------------------------------
Summary: 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
Environment: Tested on Windows
Reporter: Ryan Bower
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 8 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.5.0-src\nifi-nar-bundles\nifi-framework-bundle\nifi-framework\nifi-web\nifi-web-ui\src\main\webapp\js\nf\canvas\nf-draggable.js
Disclaimer: I'm not experienced with javascript. There's definitely a better
way to do this, code-wise, but this works and it's consistent.
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 nf-draggable.js to achieve this:
{{var nfDraggable = {}}
{{ ...}}{{ }}
{{ if (dragSelection.empty()) }}{{{}}{{ }}
{{ ...}}{{ }}
{{ } else {}}
{{ // added vars for preview outline rounding}}
{{ var gridX = 16;}}
{{ var gridY = 16;}}
{{ // update the position of the drag selection}}{{ }}
{{ dragSelection.attr('x', function (d) {}}
{{ d.x += d3.event.dx;}}
{{ // rounding the result achieves the "snap" alignment}}
{{ var roundedX = Math.round(d.x/gridX) * gridX;}}
{{ return roundedX;}}
{{ })}}
{{ .attr('y', function (d) {}}
{{ d.y += d3.event.dy;}}
{{ roundedY = Math.round(d.y/gridY) * gridY;}}
{{ return roundedY;}}
{{ });}}
{{ }}}
...
{{ updateComponentPosition: function (d, delta) {}}
{{ // added vars for position update. These must match the previous two}}
{{ var gridX = 16;}}
{{ var gridY = 16;}}
{{ }}
{{ // perform rounding again for the update}}
{{ var newPosition = {}}
{{ 'x': (Math.round((d.position.x + delta.x)/gridX) * gridX),}}
{{ 'y': (Math.round((d.position.y + delta.y)/gridY) * gridY),}}
{{ };}}
{{ ...}}
{{}}}
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)
