From d238e4eaeb765698a3614449ebde4062093de17b Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 14 May 2013 17:49:13 -0700 Subject: [PATCH] Convert Tail to a behavior This avoids an extra mousemove listener in base modes. --- index.html | 2 +- js/id/behavior/add_way.js | 9 ++-- js/id/behavior/draw.js | 13 ++++++ js/id/behavior/draw_way.js | 6 ++- js/id/behavior/tail.js | 85 ++++++++++++++++++++++++++++++++++++++ js/id/id.js | 1 - js/id/modes/add_area.js | 2 +- js/id/modes/add_line.js | 8 ++-- js/id/modes/add_point.js | 3 +- js/id/modes/draw_area.js | 4 +- js/id/modes/draw_line.js | 4 +- js/id/renderer/map.js | 13 ------ js/id/ui/tail.js | 77 ---------------------------------- test/index.html | 2 +- 14 files changed, 121 insertions(+), 108 deletions(-) create mode 100644 js/id/behavior/tail.js delete mode 100644 js/id/ui/tail.js diff --git a/index.html b/index.html index 0c34b40c9..a1f5cd263 100644 --- a/index.html +++ b/index.html @@ -94,7 +94,6 @@ - @@ -147,6 +146,7 @@ + diff --git a/js/id/behavior/add_way.js b/js/id/behavior/add_way.js index 9e81421cd..b888fa122 100644 --- a/js/id/behavior/add_way.js +++ b/js/id/behavior/add_way.js @@ -18,14 +18,12 @@ iD.behavior.AddWay = function(context) { addWay.off = function(surface) { context.map() - .minzoom(0) - .tail(false); + .minzoom(0); surface.call(draw.off); }; addWay.cancel = function() { - window.setTimeout(function() { context.map().dblclickEnable(true); }, 1000); @@ -33,5 +31,10 @@ iD.behavior.AddWay = function(context) { context.enter(iD.modes.Browse(context)); }; + addWay.tail = function(text) { + draw.tail(text); + return addWay; + }; + return d3.rebind(addWay, event, 'on'); }; diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index f6c6f183f..b42e9cb6a 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -3,6 +3,7 @@ iD.behavior.Draw = function(context) { 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), hover = iD.behavior.Hover().altDisables(true), + tail = iD.behavior.Tail(), closeTolerance = 4, tolerance = 12; @@ -87,6 +88,7 @@ iD.behavior.Draw = function(context) { function draw(selection) { context.install(hover); + context.install(tail); keybinding .on('⌫', backspace) @@ -106,6 +108,7 @@ iD.behavior.Draw = function(context) { draw.off = function(selection) { context.uninstall(hover); + context.uninstall(tail); selection .on('mousedown.draw', null) @@ -118,5 +121,15 @@ iD.behavior.Draw = function(context) { .call(keybinding.off); }; + draw.tail = function(_) { + if (!_ || iD.behavior.Draw.usedTails[_] === undefined) { + tail.text(_); + iD.behavior.Draw.usedTails[_] = true; + } + return draw; + }; + return d3.rebind(draw, event, 'on'); }; + +iD.behavior.Draw.usedTails = {}; diff --git a/js/id/behavior/draw_way.js b/js/id/behavior/draw_way.js index 9c8f2e5f7..72bdff73e 100644 --- a/js/id/behavior/draw_way.js +++ b/js/id/behavior/draw_way.js @@ -78,7 +78,6 @@ iD.behavior.DrawWay = function(context, wayId, index, mode, baseGraph) { context.map() .minzoom(0) - .tail(false) .on('drawn.draw', null); surface.call(draw.off) @@ -192,5 +191,10 @@ iD.behavior.DrawWay = function(context, wayId, index, mode, baseGraph) { context.enter(iD.modes.Browse(context)); }; + drawWay.tail = function(text) { + draw.tail(text); + return drawWay; + }; + return drawWay; }; diff --git a/js/id/behavior/tail.js b/js/id/behavior/tail.js new file mode 100644 index 000000000..26f5b1ec2 --- /dev/null +++ b/js/id/behavior/tail.js @@ -0,0 +1,85 @@ +iD.behavior.Tail = function() { + var text, + container, + xmargin = 25, + tooltip_size = [0, 0], + selection_size = [0, 0], + transformProp = iD.util.prefixCSSProperty('Transform'); + + function tail(selection) { + if (!text) return; + + d3.select(window) + .on('resize.tail', function() { selection_size = selection.size(); }); + + function show() { + container.style('display', 'block'); + tooltip_size = container.size(); + } + + function mousemove() { + if (container.style('display') === 'none') show(); + var xoffset = ((d3.event.clientX + tooltip_size[0] + xmargin) > selection_size[0]) ? + -tooltip_size[0] - xmargin : xmargin; + container.classed('left', xoffset > 0); + container.style(transformProp, 'translate(' + + (~~d3.event.clientX + xoffset) + 'px,' + + ~~d3.event.clientY + 'px)'); + } + + function mouseout() { + if (d3.event.relatedTarget !== container.node()) { + container.style('display', 'none'); + } + } + + function mouseover() { + if (d3.event.relatedTarget !== container.node()) { + show(); + } + } + + container = d3.select(document.body) + .append('div') + .style('display', 'none') + .attr('class', 'tail tooltip-inner'); + + container.append('div') + .text(text); + + selection + .on('mousemove.tail', mousemove) + .on('mouseover.tail', mouseover) + .on('mouseout.tail', mouseout); + + container + .on('mousemove.tail', mousemove); + + tooltip_size = container.size(); + selection_size = selection.size(); + } + + tail.off = function(selection) { + if (!text) return; + + container + .on('mousemove.tail', null) + .remove(); + + selection + .on('mousemove.tail', null) + .on('mouseover.tail', null) + .on('mouseout.tail', null); + + d3.select(window) + .on('resize.tail', null); + }; + + tail.text = function(_) { + if (!arguments.length) return text; + text = _; + return tail; + }; + + return tail; +}; diff --git a/js/id/id.js b/js/id/id.js index c3c6ca029..c71d2820a 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -140,7 +140,6 @@ window.iD = function () { context.surface = function() { return map.surface; }; context.mouse = map.mouse; context.projection = map.projection; - context.tail = map.tail; context.redraw = map.redraw; context.pan = map.pan; context.zoomIn = map.zoomIn; diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js index 6d0e5ba2a..2f529b9bf 100644 --- a/js/id/modes/add_area.js +++ b/js/id/modes/add_area.js @@ -8,6 +8,7 @@ iD.modes.AddArea = function(context) { }; var behavior = iD.behavior.AddWay(context) + .tail(t('modes.add_area.tail')) .on('start', start) .on('startFromWay', startFromWay) .on('startFromNode', startFromNode), @@ -56,7 +57,6 @@ iD.modes.AddArea = function(context) { mode.enter = function() { context.install(behavior); - context.tail(t('modes.add_area.tail')); }; mode.exit = function() { diff --git a/js/id/modes/add_line.js b/js/id/modes/add_line.js index 186016765..265389db5 100644 --- a/js/id/modes/add_line.js +++ b/js/id/modes/add_line.js @@ -8,9 +8,10 @@ iD.modes.AddLine = function(context) { }; var behavior = iD.behavior.AddWay(context) - .on('start', start) - .on('startFromWay', startFromWay) - .on('startFromNode', startFromNode); + .tail(t('modes.add_line.tail')) + .on('start', start) + .on('startFromWay', startFromWay) + .on('startFromNode', startFromNode); function start(loc) { var graph = context.graph(), @@ -63,7 +64,6 @@ iD.modes.AddLine = function(context) { mode.enter = function() { context.install(behavior); - context.tail(t('modes.add_line.tail')); }; mode.exit = function() { diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js index 93c03ccb4..12eadef37 100644 --- a/js/id/modes/add_point.js +++ b/js/id/modes/add_point.js @@ -7,6 +7,7 @@ iD.modes.AddPoint = function(context) { }; var behavior = iD.behavior.Draw(context) + .tail(t('modes.add_point.tail')) .on('click', add) .on('clickWay', addWay) .on('clickNode', addNode) @@ -40,12 +41,10 @@ iD.modes.AddPoint = function(context) { mode.enter = function() { context.install(behavior); - context.tail(t('modes.add_point.tail')); }; mode.exit = function() { context.uninstall(behavior); - context.tail(false); }; return mode; diff --git a/js/id/modes/draw_area.js b/js/id/modes/draw_area.js index f109d2942..66542ffc7 100644 --- a/js/id/modes/draw_area.js +++ b/js/id/modes/draw_area.js @@ -11,7 +11,8 @@ iD.modes.DrawArea = function(context, wayId, baseGraph) { headId = way.nodes[way.nodes.length - 2], tailId = way.first(); - behavior = iD.behavior.DrawWay(context, wayId, -1, mode, baseGraph); + behavior = iD.behavior.DrawWay(context, wayId, -1, mode, baseGraph) + .tail(t('modes.draw_area.tail')); var addNode = behavior.addNode; @@ -24,7 +25,6 @@ iD.modes.DrawArea = function(context, wayId, baseGraph) { }; context.install(behavior); - context.tail(t('modes.draw_area.tail')); }; mode.exit = function() { diff --git a/js/id/modes/draw_line.js b/js/id/modes/draw_line.js index 6156fe87a..f31ee2b78 100644 --- a/js/id/modes/draw_line.js +++ b/js/id/modes/draw_line.js @@ -11,7 +11,8 @@ iD.modes.DrawLine = function(context, wayId, direction, baseGraph) { index = (direction === 'forward') ? undefined : 0, headId = (direction === 'forward') ? way.last() : way.first(); - behavior = iD.behavior.DrawWay(context, wayId, index, mode, baseGraph); + behavior = iD.behavior.DrawWay(context, wayId, index, mode, baseGraph) + .tail(t('modes.draw_line.tail')); var addNode = behavior.addNode; @@ -24,7 +25,6 @@ iD.modes.DrawLine = function(context, wayId, direction, baseGraph) { }; context.install(behavior); - context.tail(t('modes.draw_line.tail')); }; mode.exit = function() { diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 4061d7546..08c1271b3 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -24,7 +24,6 @@ iD.Map = function(context) { areas = iD.svg.Areas(roundedProjection), midpoints = iD.svg.Midpoints(roundedProjection, context), labels = iD.svg.Labels(roundedProjection, context), - tail = iD.ui.Tail(), supersurface, surface, mouse; @@ -91,9 +90,6 @@ iD.Map = function(context) { labels.supersurface(supersurface); mouse = iD.util.fastMouse(supersurface.node()); - - supersurface - .call(tail); } function pxCenter() { return [dimensions[0] / 2, dimensions[1] / 2]; } @@ -421,15 +417,6 @@ iD.Map = function(context) { return map; }; - var usedTails = {}; - map.tail = function(_) { - if (!_ || usedTails[_] === undefined) { - tail.text(_); - usedTails[_] = true; - } - return map; - }; - map.editable = function() { return map.zoom() >= 16; }; diff --git a/js/id/ui/tail.js b/js/id/ui/tail.js deleted file mode 100644 index 6ea83ed87..000000000 --- a/js/id/ui/tail.js +++ /dev/null @@ -1,77 +0,0 @@ -iD.ui.Tail = function() { - var text = false, - container, - inner, - xmargin = 25, - tooltip_size = [0, 0], - selection_size = [0, 0], - transformProp = iD.util.prefixCSSProperty('Transform'); - - function tail(selection) { - d3.select(window).on('resize.tail-size', function() { - selection_size = selection.size(); - }); - - function setup() { - container = d3.select(document.body) - .append('div') - .style('display', 'none') - .attr('class', 'tail tooltip-inner'); - - inner = container.append('div'); - - selection - .on('mousemove.tail', mousemove) - .on('mouseover.tail', mouseover) - .on('mouseout.tail', mouseout); - - container - .on('mousemove.tail', mousemove); - - selection_size = selection.size(); - } - - function show() { - container.style('display', 'block'); - tooltip_size = container.size(); - } - - function mousemove() { - if (text === false) return; - if (container.style('display') === 'none') show(); - var xoffset = ((d3.event.clientX + tooltip_size[0] + xmargin) > selection_size[0]) ? - -tooltip_size[0] - xmargin : xmargin; - container.classed('left', xoffset > 0); - container.style(transformProp, 'translate(' + - (~~d3.event.clientX + xoffset) + 'px,' + - ~~d3.event.clientY + 'px)'); - } - - function mouseout() { - if (d3.event.relatedTarget !== container.node() && - text !== false) container.style('display', 'none'); - } - - function mouseover() { - if (d3.event.relatedTarget !== container.node() && - text !== false) show(); - } - - if (!container) setup(); - } - - tail.text = function(_) { - if (!arguments.length) return text; - if (_ === false) { - text = _; - container.style('display', 'none'); - return tail; - } - text = _; - inner.text(text); - tooltip_size = container.size(); - return tail; - }; - - return tail; -}; diff --git a/test/index.html b/test/index.html index bb376d036..6a7ec0e2a 100644 --- a/test/index.html +++ b/test/index.html @@ -91,7 +91,6 @@ - @@ -131,6 +130,7 @@ +