From f31dcd32a267e1ef891b72f233bef238ceb2583e Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 29 Jan 2013 16:17:56 -0500 Subject: [PATCH] Add keybindings for all operations --- js/id/modes/select.js | 30 +++++++++++++----------------- js/id/operations/circular.js | 14 +++++++++----- js/id/operations/delete.js | 12 ++++++++---- js/id/operations/move.js | 6 +++++- js/id/operations/reverse.js | 12 ++++++++---- js/id/operations/split.js | 16 ++++++++++------ js/id/operations/unjoin.js | 16 ++++++++++------ js/id/ui/radial_menu.js | 12 +++--------- 8 files changed, 66 insertions(+), 52 deletions(-) diff --git a/js/id/modes/select.js b/js/id/modes/select.js index 06c05b7ea..ad06bda35 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -10,20 +10,6 @@ iD.modes.Select = function(entity, initial) { behaviors, radialMenu; - function remove() { - if (entity.type === 'way') { - mode.history.perform( - iD.actions.DeleteWay(entity.id), - 'deleted a way'); - } else if (entity.type === 'node') { - mode.history.perform( - iD.actions.DeleteNode(entity.id), - 'deleted a node'); - } - - mode.controller.exit(); - } - function changeTags(d, tags) { if (!_.isEqual(entity.tags, tags)) { mode.history.perform( @@ -49,6 +35,18 @@ iD.modes.Select = function(entity, initial) { behavior(surface); }); + var operations = d3.values(iD.operations) + .map(function (o) { return o(entity.id, mode); }) + .filter(function (o) { return o.available(); }); + + operations.forEach(function(operation) { + keybinding.on(operation.key, function () { + if (operation.enabled()) { + operation(); + } + }); + }); + var q = iD.util.stringQs(location.hash.substring(1)); location.replace('#' + iD.util.qsString(_.assign(q, { id: entity.id @@ -126,8 +124,6 @@ iD.modes.Select = function(entity, initial) { surface.on('click.select', click) .on('dblclick.select', dblclick); - keybinding.on('⌫', remove); - d3.select(document) .call(keybinding); @@ -137,7 +133,7 @@ iD.modes.Select = function(entity, initial) { }) .classed('selected', true); - radialMenu = iD.ui.RadialMenu(entity, mode); + radialMenu = iD.ui.RadialMenu(operations); if (d3.event && !initial) { var loc = map.mouseCoordinates(); diff --git a/js/id/operations/circular.js b/js/id/operations/circular.js index d5d449853..eb94150fc 100644 --- a/js/id/operations/circular.js +++ b/js/id/operations/circular.js @@ -1,7 +1,8 @@ iD.operations.Circular = function(entityId, mode) { - var action = iD.actions.Circular(entityId, mode.map); + var history = mode.map.history(), + action = iD.actions.Circular(entityId, mode.map); - var operation = function(history) { + var operation = function() { var graph = history.graph(), entity = graph.entity(entityId), geometry = entity.geometry(graph); @@ -18,16 +19,19 @@ iD.operations.Circular = function(entityId, mode) { } }; - operation.available = function(graph) { - var entity = graph.entity(entityId); + operation.available = function() { + var graph = history.graph(), + entity = graph.entity(entityId); return entity.geometry(graph) === 'area' || entity.geometry(graph) === 'line'; }; - operation.enabled = function(graph) { + operation.enabled = function() { + var graph = history.graph(); return action.enabled(graph); }; operation.id = "circular"; + operation.key = "O"; operation.title = "Circular"; operation.description = "Make this round"; diff --git a/js/id/operations/delete.js b/js/id/operations/delete.js index 42fb2034c..03d788261 100644 --- a/js/id/operations/delete.js +++ b/js/id/operations/delete.js @@ -1,5 +1,7 @@ -iD.operations.Delete = function(entityId) { - var operation = function(history) { +iD.operations.Delete = function(entityId, mode) { + var history = mode.map.history(); + + var operation = function() { var graph = history.graph(), entity = graph.entity(entityId), geometry = entity.geometry(graph); @@ -26,8 +28,9 @@ iD.operations.Delete = function(entityId) { } }; - operation.available = function(graph) { - var entity = graph.entity(entityId); + operation.available = function() { + var graph = history.graph(), + entity = graph.entity(entityId); return _.contains(['vertex', 'point', 'line', 'area'], entity.geometry(graph)); }; @@ -36,6 +39,7 @@ iD.operations.Delete = function(entityId) { }; operation.id = "delete"; + operation.key = "⌫"; operation.title = "Delete"; operation.description = "Remove this from the map"; diff --git a/js/id/operations/move.js b/js/id/operations/move.js index ca0f0f65b..383ca4206 100644 --- a/js/id/operations/move.js +++ b/js/id/operations/move.js @@ -1,9 +1,12 @@ iD.operations.Move = function(entityId, mode) { + var history = mode.map.history(); + var operation = function() { mode.controller.enter(iD.modes.MoveWay(entityId)); }; - operation.available = function(graph) { + operation.available = function() { + var graph = history.graph(); return graph.entity(entityId).type === 'way'; }; @@ -12,6 +15,7 @@ iD.operations.Move = function(entityId, mode) { }; operation.id = "move"; + operation.key = "M"; operation.title = "Move"; operation.description = "Move this to a different location"; diff --git a/js/id/operations/reverse.js b/js/id/operations/reverse.js index 44763502e..b36dfd60c 100644 --- a/js/id/operations/reverse.js +++ b/js/id/operations/reverse.js @@ -1,12 +1,15 @@ -iD.operations.Reverse = function(entityId) { - var operation = function(history) { +iD.operations.Reverse = function(entityId, mode) { + var history = mode.map.history(); + + var operation = function() { history.perform( iD.actions.ReverseWay(entityId), 'reversed a line'); }; - operation.available = function(graph) { - var entity = graph.entity(entityId); + operation.available = function() { + var graph = history.graph(), + entity = graph.entity(entityId); return entity.geometry(graph) === 'line'; }; @@ -15,6 +18,7 @@ iD.operations.Reverse = function(entityId) { }; operation.id = "reverse"; + operation.key = "V"; operation.title = "Reverse"; operation.description = "Make this way go in the opposite direction"; diff --git a/js/id/operations/split.js b/js/id/operations/split.js index 3e298f133..3dcab7481 100644 --- a/js/id/operations/split.js +++ b/js/id/operations/split.js @@ -1,20 +1,24 @@ -iD.operations.Split = function(entityId) { - var action = iD.actions.SplitWay(entityId); +iD.operations.Split = function(entityId, mode) { + var history = mode.map.history(), + action = iD.actions.SplitWay(entityId); - var operation = function(history) { + var operation = function() { history.perform(action, 'split a way'); }; - operation.available = function(graph) { - var entity = graph.entity(entityId); + operation.available = function() { + var graph = history.graph(), + entity = graph.entity(entityId); return entity.geometry(graph) === 'vertex'; }; - operation.enabled = function(graph) { + operation.enabled = function() { + var graph = history.graph(); return action.enabled(graph); }; operation.id = "split"; + operation.key = "X"; operation.title = "Split"; operation.description = "Split this into two ways at this point"; diff --git a/js/id/operations/unjoin.js b/js/id/operations/unjoin.js index e4275eff8..c18de3029 100644 --- a/js/id/operations/unjoin.js +++ b/js/id/operations/unjoin.js @@ -1,20 +1,24 @@ -iD.operations.Unjoin = function(entityId) { - var action = iD.actions.UnjoinNode(entityId); +iD.operations.Unjoin = function(entityId, mode) { + var history = mode.map.history(), + action = iD.actions.UnjoinNode(entityId); - var operation = function(history) { + var operation = function() { history.perform(action, 'unjoined lines'); }; - operation.available = function(graph) { - var entity = graph.entity(entityId); + operation.available = function() { + var graph = history.graph(), + entity = graph.entity(entityId); return entity.geometry(graph) === 'vertex'; }; - operation.enabled = function(graph) { + operation.enabled = function() { + var graph = history.graph(); return action.enabled(graph); }; operation.id = "unjoin"; + operation.key = "⇧-J"; operation.title = "Unjoin"; operation.description = "Disconnect these ways from each other"; diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js index 136657dbc..dd94c661e 100644 --- a/js/id/ui/radial_menu.js +++ b/js/id/ui/radial_menu.js @@ -1,16 +1,10 @@ -iD.ui.RadialMenu = function(entity, mode) { +iD.ui.RadialMenu = function(operations) { var menu; var radialMenu = function(selection, center) { - var history = mode.map.history(), - graph = history.graph(), - operations = d3.values(iD.operations) - .map(function (o) { return o(entity.id, mode); }) - .filter(function (o) { return o.available(graph); }); - function click(operation) { d3.event.stopPropagation(); - operation(history); + operation(); } menu = selection.append('g') @@ -48,7 +42,7 @@ iD.ui.RadialMenu = function(entity, mode) { .attr('class', function (d) { return 'radial-menu-item radial-menu-item-' + d.id; }) .attr('r', 15) .attr('title', function (d) { return d.title; }) - .classed('disabled', function (d) { return !d.enabled(graph); }) + .classed('disabled', function (d) { return !d.enabled(); }) .on('click', click) .on('mouseover', mouseover) .on('mouseout', mouseout);