[
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.
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
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.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
shift 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:
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)}}
{{ };}}
{{ ...}}
}
> 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.
>
> 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
> nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.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
> shift 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)
