[
https://issues.apache.org/jira/browse/NIFI-5018?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Ryan Bower updated NIFI-5018:
-----------------------------
Description:
I've made some modifications to the Canvas UI that results in a "snap-to-grid"
during the component drag state. See [this
video|https://www.youtube.com/watch?v=S7lnBMMO6KE&feature=youtu.be] for an
example of it in action.
Target files:
For consistency from component to component, I made minor adjustments to the
height and width of specific components such that each divides evenly by 8 (the
pixel snap alignment value).
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
The processor alignment is based on rounding the component's X and Y
coordinates during the drag event. The X and Y values of each component now
move 8px at a time.
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js:
{{(function (root, factory) {}}
...
{{}(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon,
nfDialog, nfClient, nfErrorHandler) {}}
{{ 'use strict';}}
{{ var nfCanvas;}}
{{ var drag;}}{{ }}
{{// added for snap-to-grid feature.}}
{{ var snapTo = 8;}}
{{ ...}}
{{ var nfDraggable = {}}
{{ ...}}
{{ 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);}}
{{ });}}
}
...
{{ 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)}}
{{ };}}
{{ ...}}
}
was:
I've made some modifications to the Canvas UI that results in a "snap-to-grid"
during the component drag state. See [this
video|https://www.youtube.com/watch?v=S7lnBMMO6KE&feature=youtu.be] for an
example of it in action.
Target files:
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.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:
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js
{{// 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 = 8;}}
{{ ...}}
{{ var nfDraggable = {}}
{{ ...}}
{{ 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);}}
{{ });}}
}
...
{{ 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)}}
{{ };}}
{{ ...}}
{{}}}
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.8.0
> Environment: Tested on Windows
> Reporter: Ryan Bower
> Priority: Minor
> Labels: web-ui
> Original Estimate: 0.25h
> Remaining Estimate: 0.25h
>
>
> I've made some modifications to the Canvas UI that results in a
> "snap-to-grid" during the component drag state. See [this
> video|https://www.youtube.com/watch?v=S7lnBMMO6KE&feature=youtu.be] for an
> example of it in action.
> Target files:
> For consistency from component to component, I made minor adjustments to the
> height and width of specific components such that each divides evenly by 8
> (the pixel snap alignment value).
> nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js
> nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js
> nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js
>
> The processor alignment is based on rounding the component's X and Y
> coordinates during the drag event. The X and Y values of each component now
> move 8px at a time.
> nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-draggable.js:
>
> {{(function (root, factory) {}}
> ...
> {{}(this, function ($, d3, nfConnection, nfBirdseye, nfCanvasUtils, nfCommon,
> nfDialog, nfClient, nfErrorHandler) {}}
> {{ 'use strict';}}
> {{ var nfCanvas;}}
> {{ var drag;}}{{ }}
>
> {{// added for snap-to-grid feature.}}
> {{ var snapTo = 8;}}
> {{ ...}}
> {{ var nfDraggable = {}}
> {{ ...}}
> {{ 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);}}
> {{ });}}
> }
>
> ...
>
> {{ 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)}}
> {{ };}}
> {{ ...}}
> }
>
>
--
This message was sent by Atlassian JIRA
(v7.6.3#76005)
