[ 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)