mirror of https://github.com/apache/nifi.git
[NIFI-2888] Display processor fill color when zoomed in/out. This closes #1151.
This commit is contained in:
Scott Aslan
Matt Gilman
parent
5f9cae97b7
commit
05ea76dd6f
|
|
@ -28,9 +28,16 @@
|
|||
</div>
|
||||
<div class="setting-name" style="margin-top: 10px;">Preview</div>
|
||||
<div class="setting-field">
|
||||
<div id="fill-color-processor-preview" class="icon icon-processor"></div>
|
||||
<div id="fill-color-processor-preview">
|
||||
<div id="fill-color-processor-preview-icon" class="icon icon-processor"></div>
|
||||
<div id="fill-color-processor-preview-name" style="margin-left: 35px; line-height: 25px; font-size: 12px; height: 25px; color: #262626;">Processor Name</div>
|
||||
<div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
|
||||
<div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #ffffff;"></div>
|
||||
<div style="width: 100%; height: 10px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
|
||||
<div style="width: 100%; height: 9px; background-color: #ffffff;"></div>
|
||||
</div>
|
||||
<div id="fill-color-label-preview">
|
||||
<div id="fill-color-label-preview-value">Label</div>
|
||||
<div id="fill-color-label-preview-value">Label Value</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,21 +33,45 @@
|
|||
}
|
||||
|
||||
#fill-color-processor-preview {
|
||||
font-size: 64px;
|
||||
width: 173px;
|
||||
height: 65px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-icon {
|
||||
float: left;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-icon:before {
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview-name {
|
||||
margin-left: 35px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#fill-color-label-preview {
|
||||
width: 173px;
|
||||
height: 56px;
|
||||
width: 83px;
|
||||
height: 83px;
|
||||
font-weight: bold;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#fill-color-label-preview-value {
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.connections-component-name {
|
||||
|
|
|
|||
|
|
@ -73,12 +73,16 @@ g.component rect.border {
|
|||
|
||||
g.component rect.border.unauthorized {
|
||||
stroke-width: 1.5;
|
||||
stroke: #ba554a;
|
||||
stroke: #ba554a !important;
|
||||
stroke-dasharray: 3,3;
|
||||
}
|
||||
|
||||
g.component rect.processor-icon-container.unauthorized {
|
||||
fill: #f4f6f7 !important;
|
||||
}
|
||||
|
||||
g.component.selected rect.border {
|
||||
stroke: #004849;
|
||||
stroke: #004849 !important;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
|
|
@ -166,6 +170,10 @@ text.processor-type {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
rect.processor-icon-container {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
text.processor-icon {
|
||||
font-family: flowfont;
|
||||
font-size: 30px;
|
||||
|
|
|
|||
|
|
@ -405,12 +405,35 @@ nf.ng.Canvas.OperateCtrl = function () {
|
|||
$('#fill-color-value').val(hex);
|
||||
|
||||
// always update the preview
|
||||
$('#fill-color-processor-preview').css('color', hex);
|
||||
$('#fill-color-label-preview').css({
|
||||
'border-color': hex,
|
||||
'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
|
||||
'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')'
|
||||
if (hex.toLowerCase() === '#ffffff') {
|
||||
//special case #ffffff implies default fill
|
||||
$('#fill-color-processor-preview-icon').css({
|
||||
'color': nf.Processor.defaultIconColor(),
|
||||
'background-color': hex
|
||||
});
|
||||
} else {
|
||||
$('#fill-color-processor-preview-icon').css({
|
||||
'color': nf.Common.determineContrastColor(
|
||||
nf.Common.substringAfterLast(
|
||||
hex, '#')),
|
||||
'background-color': hex
|
||||
});
|
||||
}
|
||||
|
||||
var borderColor = hex;
|
||||
if (borderColor.toLowerCase() === '#ffffff') {
|
||||
borderColor = 'rgba(0,0,0,0.25)';
|
||||
}
|
||||
$('#fill-color-processor-preview').css({
|
||||
'border-color': borderColor
|
||||
});
|
||||
|
||||
$('#fill-color-label-preview').css({
|
||||
'background': hex
|
||||
});
|
||||
$('#fill-color-label-preview-value').css('color',
|
||||
nf.Common.determineContrastColor(nf.Common.substringAfterLast(hex, '#'))
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1104,7 +1104,7 @@ nf.Actions = (function () {
|
|||
|
||||
var color;
|
||||
if (allProcessors) {
|
||||
color = nf.Processor.defaultColor();
|
||||
color = nf.Processor.defaultFillColor();
|
||||
} else {
|
||||
color = nf.Label.defaultColor();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -187,12 +187,18 @@ nf.Birdseye = (function () {
|
|||
|
||||
// processors
|
||||
$.each(components.processors, function (_, d) {
|
||||
//default color
|
||||
var color = '#dde4eb';
|
||||
|
||||
if (d.permissions.canRead) {
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
|
||||
color = d.component.style['background-color'];
|
||||
|
||||
//if the background color is #ffffff use the default instead
|
||||
if (color === '#ffffff') {
|
||||
color = '#dde4eb';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -201,6 +201,13 @@ nf.Label = (function () {
|
|||
lines.push('');
|
||||
}
|
||||
|
||||
var color = nf.Label.defaultColor();
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
|
||||
color = d.component.style['background-color'];
|
||||
}
|
||||
|
||||
// add label value
|
||||
$.each(lines, function (i, line) {
|
||||
labelText.append('tspan')
|
||||
|
|
@ -208,6 +215,11 @@ nf.Label = (function () {
|
|||
.attr('dy', '1.2em')
|
||||
.text(function () {
|
||||
return line;
|
||||
})
|
||||
.style('fill', function (d) {
|
||||
return nf.Common.determineContrastColor(
|
||||
nf.Common.substringAfterLast(
|
||||
color, '#'));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -106,18 +106,28 @@ nf.Processor = (function () {
|
|||
// processor name
|
||||
processor.append('text')
|
||||
.attr({
|
||||
'x': 62,
|
||||
'y': 20,
|
||||
'width': 220,
|
||||
'height': 16,
|
||||
'x': 72,
|
||||
'y': 23,
|
||||
'width': 210,
|
||||
'height': 14,
|
||||
'class': 'processor-name'
|
||||
});
|
||||
|
||||
// processor icon container
|
||||
processor.append('rect')
|
||||
.attr({
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'width': 50,
|
||||
'height': 50,
|
||||
'class': 'processor-icon-container'
|
||||
});
|
||||
|
||||
// processor icon
|
||||
processor.append('text')
|
||||
.attr({
|
||||
'x': 6,
|
||||
'y': 32,
|
||||
'x': 9,
|
||||
'y': 35,
|
||||
'class': 'processor-icon'
|
||||
})
|
||||
.text('\ue807');
|
||||
|
|
@ -164,18 +174,18 @@ nf.Processor = (function () {
|
|||
details.append('text')
|
||||
.attr({
|
||||
'class': 'run-status-icon',
|
||||
'x': 42,
|
||||
'y': 20
|
||||
'x': 55,
|
||||
'y': 23
|
||||
});
|
||||
|
||||
// processor type
|
||||
details.append('text')
|
||||
.attr({
|
||||
'class': 'processor-type',
|
||||
'x': 62,
|
||||
'y': 35,
|
||||
'width': 246,
|
||||
'height': 16
|
||||
'x': 72,
|
||||
'y': 37,
|
||||
'width': 236,
|
||||
'height': 12
|
||||
});
|
||||
|
||||
// -----
|
||||
|
|
@ -533,30 +543,67 @@ nf.Processor = (function () {
|
|||
details.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ---------------
|
||||
// processor color
|
||||
// ---------------
|
||||
// ---------------
|
||||
// processor color
|
||||
// ---------------
|
||||
|
||||
// update the processor color
|
||||
updated.select('text.processor-icon')
|
||||
.style('fill', function (d) {
|
||||
//update the processor icon container
|
||||
processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
|
||||
|
||||
// get the default color
|
||||
var color = nf.Processor.defaultColor();
|
||||
//update the processor icon
|
||||
processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
|
||||
|
||||
//update the processor border
|
||||
processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (processorData.permissions.canRead){
|
||||
if (nf.Common.isDefinedAndNotNull(processorData.component.style['background-color'])) {
|
||||
var color = processorData.component.style['background-color'];
|
||||
|
||||
//update the processor icon container
|
||||
processor.select('rect.processor-icon-container')
|
||||
.style('fill', function (d) {
|
||||
return color;
|
||||
});
|
||||
|
||||
//update the processor border
|
||||
processor.select('rect.border')
|
||||
.style('stroke', function (d) {
|
||||
return color;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// update the processor color
|
||||
processor.select('text.processor-icon')
|
||||
.style('fill', function (d) {
|
||||
|
||||
// get the default color
|
||||
var color = nf.Processor.defaultIconColor();
|
||||
|
||||
if (!d.permissions.canRead) {
|
||||
return color;
|
||||
}
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
|
||||
color = d.component.style['background-color'];
|
||||
|
||||
//special case #ffffff implies default fill
|
||||
if (color.toLowerCase() === '#ffffff') {
|
||||
color = nf.Processor.defaultIconColor();
|
||||
} else {
|
||||
color = nf.Common.determineContrastColor(
|
||||
nf.Common.substringAfterLast(
|
||||
color, '#'));
|
||||
}
|
||||
}
|
||||
|
||||
if (!d.permissions.canRead) {
|
||||
return color;
|
||||
}
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
|
||||
color = d.component.style['background-color'];
|
||||
}
|
||||
|
||||
return color;
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -941,9 +988,16 @@ nf.Processor = (function () {
|
|||
},
|
||||
|
||||
/**
|
||||
* Returns the default color that should be used when drawing a processor.
|
||||
* Returns the default fill color that should be used when drawing a processor.
|
||||
*/
|
||||
defaultColor: function () {
|
||||
defaultFillColor: function () {
|
||||
return '#FFFFFF';
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the default icon color that should be used when drawing a processor.
|
||||
*/
|
||||
defaultIconColor: function () {
|
||||
return '#ad9897';
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -384,6 +384,20 @@ nf.Common = (function () {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Determines the contrast color of a given hex color.
|
||||
*
|
||||
* @param {string} hex The hex color to test.
|
||||
* @returns {string} The contrasting color string.
|
||||
*/
|
||||
determineContrastColor: function (hex){
|
||||
if (parseInt(hex, 16) > 0xffffff/1.5) {
|
||||
return '#000000';
|
||||
}
|
||||
return '#ffffff';
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Method for handling ajax errors.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue