[
https://issues.apache.org/jira/browse/NIFI-5018?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16472792#comment-16472792
]
Ryan Bower edited comment on NIFI-5018 at 5/11/18 11:21 PM:
------------------------------------------------------------
[~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 documentation of the
default dimensions for each canvas component?
was (Author: rbower):
[~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)
