From 43aca6597ecbccc481296520b6636ba23ab0a280 Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Wed, 8 May 2024 11:51:41 -0400 Subject: [PATCH] [NIFI-13117] update label resize handle to match other resize handles and replace comments indicator with icon (#8774) This closes #8774 --- .../service/manager/label-manager.service.ts | 11 ++++--- .../service/manager/port-manager.service.ts | 24 +++++---------- .../manager/process-group-manager.service.ts | 20 +++++++------ .../manager/processor-manager.service.ts | 20 +++++++------ .../remote-process-group-manager.service.ts | 30 ++++++++++--------- .../ui/canvas/_canvas.component-theme.scss | 10 +++---- .../ui/canvas/canvas.component.scss | 12 ++++---- 7 files changed, 61 insertions(+), 66 deletions(-) diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.ts index c68926ae81..36c34f5163 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.ts @@ -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 diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts index 5e8de72ab0..87a8890f8b 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts @@ -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 diff --git a/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 b/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 index 9abcc4356f..55a9236aa9 100644 --- a/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 +++ b/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 @@ -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); diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts index 9c77f0018a..d44be6f030 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts @@ -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 diff --git a/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 b/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 index 7b2d361fa5..2b50a735b4 100644 --- a/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 +++ b/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 @@ -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); diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss index ec1cabdff7..b064c109e5 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss @@ -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 */ diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss index c24ecefae3..e4ed4efaba 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss @@ -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 {