CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 11:16:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor dragging, include latedrag

Browse Source
This commit is contained in:
Tom MacWright
2012-12-06 17:33:02 -05:00
parent 4339aede82
commit cd3129061c
5 changed files with 69 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -20,6 +20,7 @@
<script src='js/lib/d3.typeahead.js'></script>
<script src='js/lib/d3.geo.tile.js'></script>
<script src='js/lib/d3.size.js'></script>
<script src='js/lib/d3.latedrag.js'></script>
<script src='js/lib/d3.keybinding.js'></script>
<script src='js/lib/d3-compat.js'></script>
<script src='js/lib/bootstrap-tooltip.js'></script>
js/id/modes/browse.js
+34
View File
@@ -6,7 +6,41 @@ iD.modes.Browse = function() {
description: 'Pan and zoom the map'
};
var dragging;
var dragbehavior = d3.behavior.drag()
.origin(function(entity) {
var p = mode.map.projection(entity.loc);
return { x: p[0], y: p[1] };
})
.on('drag', function(entity) {
d3.event.sourceEvent.stopPropagation();
if (!dragging) {
if (entity.accuracy) {
var way = history.graph().entity(entity.way),
index = entity.index;
entity = iD.Node(entity);
mode.history.perform(iD.actions.AddWayNode(way, entity, index));
}
dragging = iD.util.trueObj([entity.id].concat(
_.pluck(mode.history.graph().parentWays(entity.id), 'id')));
mode.history.perform(iD.actions.Noop());
}
var to = mode.map.projection.invert([d3.event.x, d3.event.y]);
mode.history.replace(iD.actions.Move(entity, to));
})
.on('dragend', function () {
if (!dragging) return;
dragging = undefined;
});
mode.enter = function() {
mode.map.surface
.call(dragbehavior)
.call(d3.latedrag()
.filter(function(d) {
return d.type === 'node';
}));
mode.map.surface.on('click.browse', function () {
var datum = d3.select(d3.event.target).datum();
if (datum instanceof iD.Entity) {
js/id/modes/select.js
+3 -1
View File
@@ -23,7 +23,9 @@ iD.modes.Select = function (entity) {
entity.nodes.forEach(function(node) {
var start = mode.map.projection(node.loc);
var end = mode.map.projection.invert([start[0] + d3.event.dx, start[1] + d3.event.dy]);
var end = mode.map.projection.invert([
start[0] + d3.event.dx,
start[1] + d3.event.dy]);
node.loc = end;
mode.history.replace(iD.actions.Move(node, end));
});
js/id/renderer/map.js
+9 -39
View File
@@ -13,37 +13,8 @@ iD.Map = function() {
.on('zoom', zoomPan),
dblclickEnabled = true,
dragEnabled = true,
dragging = false,
fastEnabled = true,
dragging,
dragbehavior = d3.behavior.drag()
.origin(function(entity) {
if (!dragEnabled) return { x: 0, y: 0 };
var p = projection(entity.loc);
return { x: p[0], y: p[1] };
})
.on('drag', function(entity) {
d3.event.sourceEvent.stopPropagation();
if (!dragging) {
if (entity.accuracy) {
var way = history.graph().entity(entity.way),
index = entity.index;
entity = iD.Node(entity);
history.perform(iD.actions.AddWayNode(way, entity, index));
}
dragging = iD.util.trueObj([entity.id].concat(
_.pluck(history.graph().parentWays(entity.id), 'id')));
history.perform(iD.actions.Noop());
}
var to = projection.invert([d3.event.x, d3.event.y]);
history.replace(iD.actions.Move(entity, to));
})
.on('dragend', function () {
if (!dragEnabled || !dragging) return;
dragging = undefined;
}),
background = iD.Background()
.projection(projection),
class_stroke = iD.Style.styleClasses('stroke'),
@@ -90,7 +61,7 @@ iD.Map = function() {
.attr('clip-path', 'url(#clip)');
g = ['fill', 'casing', 'stroke', 'text', 'hit', 'temp'].reduce(function(mem, i) {
return (mem[i] = r.append('g').attr('class', 'layer-g')) && mem;
return (mem[i] = r.append('g').attr('class', 'layer-g layer-' + i)) && mem;
}, {});
var arrow = surface.append('text').text('►----');
@@ -175,10 +146,11 @@ iD.Map = function() {
}
handles.exit().remove();
handles.enter().append('image')
.attr({ width: 6, height: 6, 'class': 'handle', 'xlink:href': 'css/handle.png' })
.each(function(d) {
if (d.tags && d.tags.elastic) return;
d3.select(this).call(dragbehavior);
.attr({
width: 6,
height: 6,
'class': 'handle',
'xlink:href': 'css/handle.png'
});
handles.attr('transform', function(entity) {
var p = projection(entity.loc);
@@ -193,8 +165,7 @@ iD.Map = function() {
.data(waynodes, key);
handles.exit().remove();
handles.enter().append('circle')
.attr({ r: 2, 'class': 'accuracy-handle' })
.call(dragbehavior);
.attr({ r: 2, 'class': 'accuracy-handle' });
handles.attr('transform', function(entity) {
var p = projection(entity.loc);
return 'translate(' + [~~p[0], ~~p[1]] + ')';
@@ -236,8 +207,7 @@ iD.Map = function() {
.data(points, key);
markers.exit().remove();
var marker = markers.enter().append('g')
.attr('class', 'marker')
.call(dragbehavior);
.attr('class', 'marker');
marker.append('circle')
.attr({ r: 10, cx: 8, cy: 8 });
marker.append('image')
js/lib/d3.latedrag.js
+22
View File
@@ -0,0 +1,22 @@
d3.latedrag = function() {
var filter = d3.functor(true);
function latedrag(selection) {
var mousedown = selection.on('mousedown.drag');
selection.on('mousedown.drag', null);
selection.on('mousedown.latedrag', function() {
var datum = d3.select(d3.event.target).datum();
if (datum && filter(datum)) {
mousedown.apply(d3.event.target, [datum]);
}
});
}
latedrag.filter = function(_) {
if (!arguments.length) return filter;
filter = _;
return latedrag;
};
return latedrag;
};