[
https://issues.apache.org/jira/browse/NIFI-5018?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16472792#comment-16472792
]
Ryan Bower commented on NIFI-5018:
----------------------------------
[~joewitt] is this an ok place to inquire about some of the canvas component
details?
My grid snap works, but the edges aren't consistent with canvas components of
differing dimensions. I may be able to normalize the rounding and account for
the width of the component, but I'm not sure. Is there a reference for the
default dimensions for each canvas component?
> 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, 1.6.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 5 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.6.0-src\nifi-nar-bundles\nifi-framework-bundle\nifi-framework\nifi-web\nifi-web-ui\src\main\webapp\js\nf\canvas\nf-draggable.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:
>
>
>
> {{// 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 = 16;}}
>
> {{// code...}}
>
> {{ var nfDraggable = {}}
>
> {{ // more code...}}
>
> {{ 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);}}
> {{ });}}
> }
>
> {{ // more code}}
>
> {{ 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)}}
> {{ };}}
> {{ // more code}}
> {{}}}
>
> 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)
