scottyaslan commented on code in PR #8762:
URL: https://github.com/apache/nifi/pull/8762#discussion_r1594267390
##########
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts:
##########
@@ -321,24 +326,193 @@ export class CanvasContextMenu implements
ContextMenuDefinitionProvider {
menuItems: [
{
condition: (selection: any) => {
- // TODO - canAlign
- return false;
+ return this.canvasUtils.canAlign(selection);
},
clazz: 'fa fa-align-center fa-rotate-90',
text: 'Horizontally',
- action: () => {
- // TODO - alignHorizontal
+ action: (selection: any) => {
+ const updates = new Map();
+
+ // determine the extent
+ let minY: number = 0,
+ maxY: number = 0;
+ selection.each((d: any) => {
+ if (d.type !== 'Connection') {
+ if (minY === 0 || d.position.y < minY) {
+ minY = d.position.y;
+ }
+ const componentMaxY = d.position.y +
d.dimensions.height;
+ if (maxY === 0 || componentMaxY > maxY) {
+ maxY = componentMaxY;
+ }
+ }
+ });
+
+ const center = (minY + maxY) / 2;
+
+ // align all components with top most component
+ selection.each((d: any) => {
+ if (d.type !== 'Connection') {
+ const delta = {
+ x: 0,
+ y: center - (d.position.y +
d.dimensions.height / 2)
+ };
+
+ // if this component is already centered, no need
to updated it
+ if (delta.y !== 0) {
+ // consider any connections
+ const connections =
this.canvasUtils.getComponentConnections(d.id);
+
+ connections.forEach((connection: any) => {
+ const connectionSelection =
d3.select('#id-' + connection.id);
+
+ if (
+ !updates.has(connection.id) &&
+
this.canvasUtils.getConnectionSourceComponentId(connection) ===
+
this.canvasUtils.getConnectionDestinationComponentId(connection)
+ ) {
+ // this connection is self looping and
hasn't been updated by the delta yet
+ const connectionUpdate =
this.draggableBehavior.updateConnectionPosition(
+ connectionSelection.datum(),
+ delta
+ );
+ if (connectionUpdate !== null) {
+ updates.set(connection.id,
connectionUpdate);
+ }
+ } else if (
+ !updates.has(connection.id) &&
+
connectionSelection.classed('selected') &&
+
this.canvasUtils.canModify(connectionSelection)
+ ) {
+ // this is a selected connection that
hasn't been updated by the delta yet
+ if (
+
this.canvasUtils.getConnectionSourceComponentId(connection) === d.id ||
+
!this.canvasUtils.isSourceSelected(connection, selection)
+ ) {
+ // the connection is either
outgoing or incoming when the source of the connection is not part of the
selection
Review Comment:
Happy to revisit this UX but from legacy nifi if the user has a connection
selected it is aligned. If not, it is not:
Except for self looping connections. Those are treated differently since
they move with a component when it is moved so they are also moved in the align
use case as well:
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
