mirror of https://github.com/apache/nifi.git
NIFI-325:
- Allowing the processor/label color to be entered by hand. - Allowing the color of multiple processors or labels to be configured at the same time.
This commit is contained in:
Matt Gilman
parent
4ec9548e2c
commit
b8ade5b129
|
|
@ -19,10 +19,14 @@
|
|||
<div class="dialog-content">
|
||||
<div class="setting">
|
||||
<div class="setting-name">Color</div>
|
||||
<div class="setting-field">
|
||||
<input type="text" id="fill-color" value="#FFFFFF"/>
|
||||
</div>
|
||||
<div class="setting-name" style="margin-top: 10px;">Value</div>
|
||||
<div class="setting-field">
|
||||
<input type="text" id="fill-color-value" value="#FFFFFF"/>
|
||||
</div>
|
||||
<div class="setting-name" style="margin-top: 5px;">Preview</div>
|
||||
<div class="setting-name" style="margin-top: 10px;">Preview</div>
|
||||
<div class="setting-field">
|
||||
<div id="fill-color-processor-preview">
|
||||
<div id="fill-color-processor-preview-name">Processor</div>
|
||||
|
|
|
|||
|
|
@ -88,10 +88,14 @@
|
|||
z-index: 1301;
|
||||
display: none;
|
||||
width: 195px;
|
||||
height: 345px;
|
||||
height: 400px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
#fill-color-value {
|
||||
width: 165px;
|
||||
}
|
||||
|
||||
#fill-color-processor-preview {
|
||||
width: 173px;
|
||||
height: 56px;
|
||||
|
|
|
|||
|
|
@ -843,20 +843,39 @@ nf.Actions = (function () {
|
|||
* @param {type} selection The selection
|
||||
*/
|
||||
fillColor: function (selection) {
|
||||
if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
|
||||
var selectionData = selection.datum();
|
||||
var color = nf[selectionData.type].defaultColor();
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
|
||||
color = selectionData.component.style['background-color'];
|
||||
var selectedProcessors = selection.filter(function(d) {
|
||||
return nf.CanvasUtils.isProcessor(d3.select(this));
|
||||
});
|
||||
var selectedLabels = selection.filter(function(d) {
|
||||
return nf.CanvasUtils.isLabel(d3.select(this));
|
||||
});
|
||||
|
||||
var allProcessors = selectedProcessors.size() === selection.size();
|
||||
var allLabels = selectedLabels.size() === selection.size();
|
||||
|
||||
if (allProcessors || allLabels) {
|
||||
var color;
|
||||
if (allProcessors) {
|
||||
color = nf.Processor.defaultColor();
|
||||
} else {
|
||||
color = nf.Label.defaultColor();
|
||||
}
|
||||
|
||||
// if there is only one component selected, get its color otherwise use default
|
||||
if (selection.size() === 1) {
|
||||
var selectionData = selection.datum();
|
||||
|
||||
// use the specified color if appropriate
|
||||
if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
|
||||
color = selectionData.component.style['background-color'];
|
||||
}
|
||||
}
|
||||
|
||||
// set the color
|
||||
$('#fill-color-value').minicolors('value', color);
|
||||
$('#fill-color').minicolors('value', color);
|
||||
|
||||
// update the preview visibility
|
||||
if (nf.CanvasUtils.isProcessor(selection)) {
|
||||
if (allProcessors) {
|
||||
$('#fill-color-processor-preview').show();
|
||||
$('#fill-color-label-preview').hide();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -170,22 +170,22 @@ nf.CanvasHeader = (function () {
|
|||
buttonText: 'Apply',
|
||||
handler: {
|
||||
click: function () {
|
||||
// close the dialog
|
||||
$('#fill-color-dialog').modal('hide');
|
||||
|
||||
// ensure the selection is a processor or label
|
||||
var selection = nf.CanvasUtils.getSelection();
|
||||
if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
|
||||
|
||||
// color the selected components
|
||||
selection.each(function (d) {
|
||||
var selected = d3.select(this);
|
||||
|
||||
var revision = nf.Client.getRevision();
|
||||
var selectionData = selection.datum();
|
||||
var selectedData = selected.datum();
|
||||
|
||||
// get the color and update the styles
|
||||
var color = $('#fill-color-value').val();
|
||||
var color = $('#fill-color').minicolors('value');
|
||||
|
||||
// update the style for the specified component
|
||||
$.ajax({
|
||||
type: 'PUT',
|
||||
url: selectionData.component.uri,
|
||||
url: selectedData.component.uri,
|
||||
data: {
|
||||
'version': revision.version,
|
||||
'clientId': revision.clientId,
|
||||
|
|
@ -197,7 +197,7 @@ nf.CanvasHeader = (function () {
|
|||
nf.Client.setRevision(response.revision);
|
||||
|
||||
// update the processor
|
||||
if (nf.CanvasUtils.isProcessor(selection)) {
|
||||
if (nf.CanvasUtils.isProcessor(selected)) {
|
||||
nf.Processor.set(response.processor);
|
||||
} else {
|
||||
nf.Label.set(response.label);
|
||||
|
|
@ -210,7 +210,10 @@ nf.CanvasHeader = (function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// close the dialog
|
||||
$('#fill-color-dialog').modal('hide');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
|
|
@ -221,13 +224,24 @@ nf.CanvasHeader = (function () {
|
|||
$('#fill-color-dialog').modal('hide');
|
||||
}
|
||||
}
|
||||
}]
|
||||
}],
|
||||
handler: {
|
||||
close: function () {
|
||||
// clear the current color
|
||||
$('#fill-color-value').val('');
|
||||
$('#fill-color').minicolors('value', '');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// initialize the fill color picker
|
||||
$('#fill-color-value').minicolors({
|
||||
$('#fill-color').minicolors({
|
||||
inline: true,
|
||||
change: function (hex, opacity) {
|
||||
// update the value
|
||||
$('#fill-color-value').val(hex);
|
||||
|
||||
// always update the preview
|
||||
$('#fill-color-processor-preview, #fill-color-label-preview').css({
|
||||
'border-color': hex,
|
||||
'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
|
||||
|
|
@ -235,6 +249,24 @@ nf.CanvasHeader = (function () {
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
// updates the color if its a valid hex color string
|
||||
var updateColor = function () {
|
||||
var hex = $('#fill-color-value').val();
|
||||
|
||||
// only update the fill color when its a valid hex color string
|
||||
if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
|
||||
$('#fill-color').minicolors('value', hex);
|
||||
}
|
||||
};
|
||||
|
||||
// initialize the fill color value
|
||||
$('#fill-color-value').on('blur', updateColor).on('keyup', function(e) {
|
||||
var code = e.keyCode ? e.keyCode : e.which;
|
||||
if (code === $.ui.keyCode.ENTER) {
|
||||
updateColor();
|
||||
}
|
||||
});
|
||||
|
||||
// mousewheel -> IE, Chrome
|
||||
// DOMMouseScroll -> FF
|
||||
|
|
|
|||
|
|
@ -141,14 +141,19 @@ nf.CanvasToolbar = (function () {
|
|||
actions['group'].disable();
|
||||
}
|
||||
|
||||
// determine how many colorable components are selected
|
||||
var colorableComponents = selection.filter(function (d) {
|
||||
var selected = d3.select(this);
|
||||
return nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isLabel(selected);
|
||||
// determine if the current selection is entirely processors or labels
|
||||
var selectedProcessors = selection.filter(function(d) {
|
||||
return nf.CanvasUtils.isProcessor(d3.select(this));
|
||||
});
|
||||
var selectedLabels = selection.filter(function(d) {
|
||||
return nf.CanvasUtils.isLabel(d3.select(this));
|
||||
});
|
||||
|
||||
var allProcessors = selectedProcessors.size() === selection.size();
|
||||
var allLabels = selectedLabels.size() === selection.size();
|
||||
|
||||
// if there are any colorable components enable the button
|
||||
if (colorableComponents.size() === 1 && colorableComponents.size() === selection.size()) {
|
||||
if (allProcessors || allLabels) {
|
||||
actions['fill'].enable();
|
||||
} else {
|
||||
actions['fill'].disable();
|
||||
|
|
|
|||
Loading…
Reference in New Issue