Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13117] update label resize handle to match other resize handles and replace comments indicator with icon (#8774) 

This closes #8774
This commit is contained in:
Scott Aslan 2024-05-08 11:51:41 -04:00 committed by GitHub
parent 0f39428209
commit 43aca6597e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 61 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.ts
View File

@ -178,7 +178,7 @@ export class LabelManager {
// update the label
const labelText = label.select('text.label-value');
const labelPoint = label.selectAll('rect.labelpoint');
const labelPoint = label.selectAll('path.labelpoint');
if (d.permissions.canRead) {
// udpate the font size
labelText.attr('font-size', function () {
@ -237,15 +237,14 @@ export class LabelManager {
// create a point for the end
const pointsEntered: any = points
.enter()
.append('rect')
.attr('class', 'labelpoint')
.attr('width', 10)
.attr('height', 10)
.append('path')
.attr('class', 'labelpoint resizable-triangle')
.attr('d', 'm0,0 l0,8 l-8,0 z')
.call(self.labelPointDrag);
// update the midpoints
points.merge(pointsEntered).attr('transform', function (p) {
return 'translate(' + (p.x - 10) + ', ' + (p.y - 10) + ')';
return 'translate(' + (p.x - 2) + ', ' + (p.y - 10) + ')';
});
// remove old items

24
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View File

@ -251,17 +251,17 @@ export class PortManager {
// --------
details
.append('path')
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(portData.dimensions.width - 2) +
(portData.dimensions.width - 11) +
', ' +
(portData.dimensions.height - 10) +
(portData.dimensions.height - 3) +
')'
)
.attr('d', 'm0,0 l0,8 l-8,0 z');
.text('\uf075');
// -------------------
// active thread count
@ -315,24 +315,14 @@ export class PortManager {
});
// update the port comments
port.select('path.component-comments')
port.select('text.component-comments')
.style(
'visibility',
self.nifiCommon.isBlank(portData.component.comments) ? 'hidden' : 'visible'
)
.attr(
'transform',
'translate(' +
(portData.dimensions.width - 2) +
', ' +
(portData.dimensions.height - 10) +
')'
)
.each(function (this: any) {
if (!self.nifiCommon.isBlank(portData.component.comments)) {
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), {
text: portData.component.comments
});
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), portData.component.comments);
}
});
} else {
@ -340,7 +330,7 @@ export class PortManager {
port.select('text.port-name').text(null);
// clear the port comments
port.select('path.component-comments').style('visibility', 'hidden');
port.select('text.component-comments').style('visibility', 'hidden');
}
// populate the stats

20
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View File

@ -682,17 +682,17 @@ export class ProcessGroupManager {
// --------
details
.append('path')
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(processGroupData.dimensions.width - 2) +
(processGroupData.dimensions.width - 11) +
', ' +
(processGroupData.dimensions.height - 10) +
(processGroupData.dimensions.height - 3) +
')'
)
.attr('d', 'm0,0 l0,8 l-8,0 z');
.text('\uf075');
// -------------------
// active thread count
@ -1123,16 +1123,18 @@ export class ProcessGroupManager {
// update the process group comments
processGroup
.select('path.component-comments')
.select('text.component-comments')
.style(
'visibility',
self.nifiCommon.isBlank(processGroupData.component.comments) ? 'hidden' : 'visible'
)
.each(function (this: any) {
if (!self.nifiCommon.isBlank(processGroupData.component.comments)) {
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), {
text: processGroupData.component.comments
});
self.canvasUtils.canvasTooltip(
TextTip,
d3.select(this),
processGroupData.component.comments
);
}
});
@ -1175,7 +1177,7 @@ export class ProcessGroupManager {
});
} else {
// clear the process group comments
processGroup.select('path.component-comments').style('visibility', 'hidden');
processGroup.select('text.component-comments').style('visibility', 'hidden');
// clear the process group name
processGroup.select('text.process-group-name').attr('x', 10).attr('width', 316).text(null);

20
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
View File

@ -429,17 +429,17 @@ export class ProcessorManager {
// --------
details
.append('path')
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(processorData.dimensions.width - 2) +
(processorData.dimensions.width - 11) +
', ' +
(processorData.dimensions.height - 10) +
(processorData.dimensions.height - 3) +
')'
)
.attr('d', 'm0,0 l0,8 l-8,0 z');
.text('\uf075');
// -------------------
// active thread count
@ -538,16 +538,18 @@ export class ProcessorManager {
// update the processor comments
processor
.select('path.component-comments')
.select('text.component-comments')
.style(
'visibility',
this.nifiCommon.isBlank(processorData.component.config.comments) ? 'hidden' : 'visible'
)
.each((d: any, i, nodes) => {
if (!this.nifiCommon.isBlank(processorData.component.config.comments)) {
this.canvasUtils.canvasTooltip(TextTip, d3.select(nodes[i]), {
text: processorData.component.config.comments
});
this.canvasUtils.canvasTooltip(
TextTip,
d3.select(nodes[i]),
processorData.component.config.comments
);
}
});
} else {
@ -561,7 +563,7 @@ export class ProcessorManager {
processor.select('text.processor-bundle').text(null);
// clear the processor comments
processor.select('path.component-comments').style('visibility', 'hidden');
processor.select('text.component-comments').style('visibility', 'hidden');
}
// populate the stats

30
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
View File

@ -361,17 +361,17 @@ export class RemoteProcessGroupManager {
// --------
details
.append('path')
.append('text')
.attr('class', 'component-comments')
.attr(
'transform',
'translate(' +
(remoteProcessGroupData.dimensions.width - 2) +
(remoteProcessGroupData.dimensions.width - 11) +
', ' +
(remoteProcessGroupData.dimensions.height - 10) +
(remoteProcessGroupData.dimensions.height - 3) +
')'
)
.attr('d', 'm0,0 l0,8 l-8,0 z');
.text('\uf075');
// -------------------
// active thread count
@ -440,11 +440,11 @@ export class RemoteProcessGroupManager {
return icon;
})
.each(function (this: any, d: any) {
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), {
text: d.component.targetSecure
? 'Site-to-Site is secure.'
: 'Site-to-Site is NOT secure.'
});
self.canvasUtils.canvasTooltip(
TextTip,
d3.select(this),
d.component.targetSecure ? 'Site-to-Site is secure.' : 'Site-to-Site is NOT secure.'
);
});
// ---------------
@ -453,16 +453,18 @@ export class RemoteProcessGroupManager {
// update the remote process group comments
details
.select('path.component-comments')
.select('text.component-comments')
.style(
'visibility',
self.nifiCommon.isBlank(remoteProcessGroupData.component.comments) ? 'hidden' : 'visible'
)
.each(function (this: any) {
if (!self.nifiCommon.isBlank(remoteProcessGroupData.component.comments)) {
self.canvasUtils.canvasTooltip(TextTip, d3.select(this), {
text: remoteProcessGroupData.component.comments
});
self.canvasUtils.canvasTooltip(
TextTip,
d3.select(this),
remoteProcessGroupData.component.comments
);
}
});
@ -502,7 +504,7 @@ export class RemoteProcessGroupManager {
details.select('text.remote-process-group-transmission-secure').text(null);
// clear the comments
details.select('path.component-comments').style('visibility', 'hidden');
details.select('text.component-comments').style('visibility', 'hidden');
// clear the last refresh
details.select('text.remote-process-group-last-refresh').text(null);

10
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View File

@ -178,8 +178,8 @@
fill: $material-theme-accent-palette-default;
}
path.component-comments {
fill: $alternate-surface;
text.component-comments {
fill: $material-theme-primary-palette-default;
stroke: $alternate-surface;
}
@ -387,9 +387,9 @@
/* labels */
g.label rect.labelpoint {
stroke: $nifi-theme-caution-palette-darker;
fill: $nifi-theme-caution-palette-darker;
g.label path.resizable-triangle {
fill: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
stroke: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
}
/* funnels */

12
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
View File

@ -87,6 +87,11 @@
text-anchor: end;
}
text.component-comments {
font-size: 10px;
font-family: FontAwesome;
}
text.active-thread-count {
font-size: 12px;
font-weight: bold;
@ -310,16 +315,11 @@
/* labels */
g.label rect.labelpoint {
display: none;
g.label path.labelpoint {
stroke-width: 1;
cursor: se-resize;
}
g.label.selected rect.labelpoint {
display: block;
}
/* funnels */
text.funnel-icon {