NIFI-146:

- Using shift instead of ctrl to drive group selection.
- Added support for metaKey for keyboard shortcuts.
This commit is contained in:
Matt Gilman 2014-12-09 15:18:52 -05:00
parent 457787cde0
commit 61c5cb3773
3 changed files with 39 additions and 39 deletions

View File

@ -332,41 +332,41 @@ nf.Canvas = (function () {
// handle canvas events // handle canvas events
svg.on('mousedown.selection', function () { svg.on('mousedown.selection', function () {
canvasClicked = true; canvasClicked = true;
if (d3.event.button !== 0) { if (d3.event.button !== 0) {
// prevent further propagation (to parents and others handlers // prevent further propagation (to parents and others handlers
// on the same element to prevent zoom behavior) // on the same element to prevent zoom behavior)
d3.event.stopImmediatePropagation(); d3.event.stopImmediatePropagation();
return; return;
} }
// show selection box if control is held down // show selection box if shift is held down
if (d3.event.ctrlKey) { if (d3.event.shiftKey) {
var position = d3.mouse(canvas.node()); var position = d3.mouse(canvas.node());
canvas.append('rect') canvas.append('rect')
.attr('rx', 6) .attr('rx', 6)
.attr('ry', 6) .attr('ry', 6)
.attr('x', position[0]) .attr('x', position[0])
.attr('y', position[1]) .attr('y', position[1])
.attr('class', 'selection') .attr('class', 'selection')
.attr('width', 0) .attr('width', 0)
.attr('height', 0) .attr('height', 0)
.attr('stroke-width', function () { .attr('stroke-width', function () {
return 1 / nf.Canvas.View.scale(); return 1 / nf.Canvas.View.scale();
}) })
.attr('stroke-dasharray', function () { .attr('stroke-dasharray', function () {
return 4 / nf.Canvas.View.scale(); return 4 / nf.Canvas.View.scale();
}) })
.datum(position); .datum(position);
// prevent further propagation (to parents) // prevent further propagation (to parents)
d3.event.stopPropagation(); d3.event.stopPropagation();
} }
}) })
.on('mousemove.selection', function () { .on('mousemove.selection', function () {
// update selection box if control is held down // update selection box if shift is held down
if (d3.event.ctrlKey) { if (d3.event.shiftKey) {
// get the selection box // get the selection box
var selectionBox = d3.select('rect.selection'); var selectionBox = d3.select('rect.selection');
if (!selectionBox.empty()) { if (!selectionBox.empty()) {
@ -492,7 +492,7 @@ nf.Canvas = (function () {
return; return;
} }
if (evt.ctrlKey === true) { if (evt.ctrlKey || evt.metaKey) {
if (evt.keyCode === 82) { if (evt.keyCode === 82) {
// ctrl-r // ctrl-r
nf.Actions.reloadStatus(); nf.Actions.reloadStatus();

View File

@ -160,7 +160,7 @@ nf.Connectable = (function () {
activate: function (components) { activate: function (components) {
components components
.on('mouseenter.connectable', function (d) { .on('mouseenter.connectable', function (d) {
if (!d3.event.ctrlKey && d3.select('rect.drag-selection').empty()) { if (!d3.event.shiftKey && d3.select('rect.drag-selection').empty()) {
var selection = d3.select(this); var selection = d3.select(this);
// ensure the current component supports connection source // ensure the current component supports connection source
@ -192,12 +192,12 @@ nf.Connectable = (function () {
connector.remove(); connector.remove();
} }
}) })
//Using mouseover/out to workaround chrom issue #122746 // Using mouseover/out to workaround chrome issue #122746
.on('mouseover.connectable', function () { .on('mouseover.connectable', function () {
//mark that we are hovering when appropriate // mark that we are hovering when appropriate
var selection = d3.select(this); var selection = d3.select(this);
selection.classed('hover', function () { selection.classed('hover', function () {
return !d3.event.ctrlKey && !selection.classed('hover') && d3.select('rect.drag-selection').empty(); return !d3.event.shiftKey && !selection.classed('hover') && d3.select('rect.drag-selection').empty();
}); });
}) })
.on('mouseout.connection', function () { .on('mouseout.connection', function () {

View File

@ -27,15 +27,15 @@ nf.Selectable = (function () {
// only need to update selection if necessary // only need to update selection if necessary
if (!g.classed('selected')) { if (!g.classed('selected')) {
// since we're not appending, deselect everything else // since we're not appending, deselect everything else
if (!d3.event.ctrlKey) { if (!d3.event.shiftKey) {
d3.selectAll('g.selected').classed('selected', false); d3.selectAll('g.selected').classed('selected', false);
} }
// update the selection // update the selection
g.classed('selected', true); g.classed('selected', true);
} else { } else {
// we are currently selected, if control key the deselect // we are currently selected, if shift key the deselect
if (d3.event.ctrlKey) { if (d3.event.shiftKey) {
g.classed('selected', false); g.classed('selected', false);
} }
} }