You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@nifi.apache.org by "Ryan Bower (JIRA)" <ji...@apache.org> on 2018/03/26 22:50:00 UTC
[jira] [Updated] (NIFI-5018) basic snap-to-grid feature for UI
[ https://issues.apache.org/jira/browse/NIFI-5018?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Ryan Bower updated NIFI-5018:
-----------------------------
Description:
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;}}
{{ var 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.
was:
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.
> 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
> 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 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;}}
> {{ var 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)