Skip to content

Commit ba1a411

Browse files
mbostockmbostock
committed
Separate namespace for d3_event_dragSuppress.
Previously we were reusing the component’s namespace to suppress drag events; however, this had the unintended effect of the drag suppress’s touchmove listener being overwritten by the component’s touchmove listener. To prevent this, the drag supression listeners now use a separate namespace. This commit also switches to preventing the default behavior on touchmove rather than touchstart, which still prevents panning and pinching while enabling click events to still fire.
1 parent 6ef0eda commit ba1a411

6 files changed

Lines changed: 33 additions & 29 deletions

File tree

‎d3.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1036,12 +1036,12 @@ d3 = function() {
10361036
}
10371037
};
10381038
}
1039-
var d3_event_dragSelect = d3_vendorSymbol(d3_documentElement.style, "userSelect");
1040-
function d3_event_dragSuppress(type) {
1041-
var touchstart = "touchstart." + type, selectstart = "selectstart." + type, dragstart = "dragstart." + type, click = "click." + type, w = d3.select(d3_window).on(touchstart, d3_eventPreventDefault).on(selectstart, d3_eventPreventDefault).on(dragstart, d3_eventPreventDefault), style = d3_documentElement.style, select = style[d3_event_dragSelect];
1039+
var d3_event_dragSelect = d3_vendorSymbol(d3_documentElement.style, "userSelect"), d3_event_dragId = 0;
1040+
function d3_event_dragSuppress() {
1041+
var name = ".dragsuppress-" + ++d3_event_dragId, touchmove = "touchmove" + name, selectstart = "selectstart" + name, dragstart = "dragstart" + name, click = "click" + name, w = d3.select(d3_window).on(touchmove, d3_eventPreventDefault).on(selectstart, d3_eventPreventDefault).on(dragstart, d3_eventPreventDefault), style = d3_documentElement.style, select = style[d3_event_dragSelect];
10421042
style[d3_event_dragSelect] = "none";
10431043
return function(suppressClick) {
1044-
w.on(touchstart, null).on(selectstart, null).on(dragstart, null);
1044+
w.on(name, null);
10451045
style[d3_event_dragSelect] = select;
10461046
if (suppressClick) {
10471047
function off() {
@@ -1112,7 +1112,7 @@ d3 = function() {
11121112
}
11131113
function dragstart(id, position, move, end) {
11141114
return function() {
1115-
var target = this, parent = target.parentNode, event_ = event.of(target, arguments), eventTarget = d3.event.target, eventId = id(), drag = eventId == null ? "drag" : "drag-" + eventId, origin_ = position(parent, eventId), dragged = 0, offset, w = d3.select(d3_window).on(move + "." + drag, moved).on(end + "." + drag, ended), dragRestore = d3_event_dragSuppress(drag);
1115+
var target = this, parent = target.parentNode, event_ = event.of(target, arguments), eventTarget = d3.event.target, eventId = id(), drag = eventId == null ? "drag" : "drag-" + eventId, origin_ = position(parent, eventId), dragged = 0, offset, w = d3.select(d3_window).on(move + "." + drag, moved).on(end + "." + drag, ended), dragRestore = d3_event_dragSuppress();
11161116
if (origin) {
11171117
offset = origin.apply(target, arguments);
11181118
offset = [ offset.x - origin_[0], offset.y - origin_[1] ];
@@ -1220,7 +1220,7 @@ d3 = function() {
12201220
});
12211221
}
12221222
function mousedowned() {
1223-
var target = this, event_ = event.of(target, arguments), eventTarget = d3.event.target, dragged = 0, w = d3.select(d3_window).on(mousemove, moved).on(mouseup, ended), l = location(d3.mouse(target)), dragRestore = d3_event_dragSuppress("zoom");
1223+
var target = this, event_ = event.of(target, arguments), eventTarget = d3.event.target, dragged = 0, w = d3.select(d3_window).on(mousemove, moved).on(mouseup, ended), l = location(d3.mouse(target)), dragRestore = d3_event_dragSuppress();
12241224
function moved() {
12251225
dragged = 1;
12261226
translateTo(d3.mouse(target), l);
@@ -1232,7 +1232,7 @@ d3 = function() {
12321232
}
12331233
}
12341234
function touchstarted() {
1235-
var target = this, event_ = event.of(target, arguments), touches = d3.touches(target), now = Date.now(), name = "zoom-" + d3.event.changedTouches[0].identifier, touchmove = "touchmove." + name, touchend = "touchend." + name, w = d3.select(d3_window).on(touchmove, moved).on(touchend, ended).on(mousedown, null).on(mousemove, null), dragRestore = d3_event_dragSuppress(name);
1235+
var target = this, event_ = event.of(target, arguments), touches = d3.touches(target), now = Date.now(), name = "zoom-" + d3.event.changedTouches[0].identifier, touchmove = "touchmove." + name, touchend = "touchend." + name, w = d3.select(d3_window).on(touchmove, moved).on(touchend, ended).on(mousedown, null).on(mousemove, null), dragRestore = d3_event_dragSuppress();
12361236
scale0 = scale;
12371237
translate0 = {};
12381238
distance0 = 0;
@@ -1263,13 +1263,13 @@ d3 = function() {
12631263
l0 = [ (l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2 ];
12641264
scaleTo(scale1 * scale0);
12651265
}
1266-
translateTo(p0, l0);
12671266
touchtime = null;
1267+
translateTo(p0, l0);
12681268
dispatch(event_);
12691269
}
12701270
function ended() {
12711271
w.on(touchmove, null).on(touchend, null);
1272-
dragRestore(true);
1272+
dragRestore();
12731273
}
12741274
}
12751275
function mousewheeled() {
@@ -7958,7 +7958,7 @@ d3 = function() {
79587958
g.selectAll(".extent,.e>rect,.w>rect").attr("height", extent[1][1] - extent[0][1]);
79597959
}
79607960
function brushstart() {
7961-
var target = this, eventTarget = d3.select(d3.event.target), event_ = event.of(target, arguments), g = d3.select(target), resizing = eventTarget.datum(), resizingX = !/^(n|s)$/.test(resizing) && x, resizingY = !/^(e|w)$/.test(resizing) && y, dragging = eventTarget.classed("extent"), dragRestore = d3_event_dragSuppress("brush"), center, origin = mouse(), offset;
7961+
var target = this, eventTarget = d3.select(d3.event.target), event_ = event.of(target, arguments), g = d3.select(target), resizing = eventTarget.datum(), resizingX = !/^(n|s)$/.test(resizing) && x, resizingY = !/^(e|w)$/.test(resizing) && y, dragging = eventTarget.classed("extent"), dragRestore = d3_event_dragSuppress(), center, origin = mouse(), offset;
79627962
var w = d3.select(d3_window).on("keydown.brush", keydown).on("keyup.brush", keyup);
79637963
if (d3.event.changedTouches) {
79647964
w.on("touchmove.brush", brushmove).on("touchend.brush", brushend);

‎d3.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/behavior/drag.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ d3.behavior.drag = function() {
3737
dragged = 0,
3838
offset,
3939
w = d3.select(d3_window).on(move + "." + drag, moved).on(end + "." + drag, ended),
40-
dragRestore = d3_event_dragSuppress(drag);
40+
dragRestore = d3_event_dragSuppress();
4141

4242
if (origin) {
4343
offset = origin.apply(target, arguments);

‎src/behavior/zoom.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ d3.behavior.zoom = function() {
105105
dragged = 0,
106106
w = d3.select(d3_window).on(mousemove, moved).on(mouseup, ended),
107107
l = location(d3.mouse(target)),
108-
dragRestore = d3_event_dragSuppress("zoom");
108+
dragRestore = d3_event_dragSuppress();
109109

110110
function moved() {
111111
dragged = 1;
@@ -128,7 +128,7 @@ d3.behavior.zoom = function() {
128128
touchmove = "touchmove." + name,
129129
touchend = "touchend." + name,
130130
w = d3.select(d3_window).on(touchmove, moved).on(touchend, ended).on(mousedown, null).on(mousemove, null), // prevent duplicate events
131-
dragRestore = d3_event_dragSuppress(name);
131+
dragRestore = d3_event_dragSuppress();
132132

133133
scale0 = scale;
134134
translate0 = {};
@@ -153,6 +153,7 @@ d3.behavior.zoom = function() {
153153
var touches = d3.touches(target),
154154
p0 = touches[0],
155155
l0 = translate0[p0.identifier];
156+
156157
if (p1 = touches[1]) {
157158
var p1, l1 = translate0[p1.identifier],
158159
scale1 = d3.event.scale;
@@ -164,14 +165,15 @@ d3.behavior.zoom = function() {
164165
l0 = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
165166
scaleTo(scale1 * scale0);
166167
}
167-
translateTo(p0, l0);
168+
168169
touchtime = null;
170+
translateTo(p0, l0);
169171
dispatch(event_);
170172
}
171173

172174
function ended() {
173175
w.on(touchmove, null).on(touchend, null);
174-
dragRestore(true);
176+
dragRestore();
175177
}
176178
}
177179

‎src/event/drag.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import "../core/document";
22
import "../core/vendor";
33
import "../selection/on";
44

5-
var d3_event_dragSelect = d3_vendorSymbol(d3_documentElement.style, "userSelect");
5+
var d3_event_dragSelect = d3_vendorSymbol(d3_documentElement.style, "userSelect"),
6+
d3_event_dragId = 0;
67

7-
function d3_event_dragSuppress(type) {
8-
var touchstart = "touchstart." + type,
9-
selectstart = "selectstart." + type,
10-
dragstart = "dragstart." + type,
11-
click = "click." + type,
12-
w = d3.select(d3_window).on(touchstart, d3_eventPreventDefault).on(selectstart, d3_eventPreventDefault).on(dragstart, d3_eventPreventDefault),
8+
function d3_event_dragSuppress() {
9+
var name = ".dragsuppress-" + ++d3_event_dragId,
10+
touchmove = "touchmove" + name,
11+
selectstart = "selectstart" + name,
12+
dragstart = "dragstart" + name,
13+
click = "click" + name,
14+
w = d3.select(d3_window).on(touchmove, d3_eventPreventDefault).on(selectstart, d3_eventPreventDefault).on(dragstart, d3_eventPreventDefault),
1315
style = d3_documentElement.style,
1416
select = style[d3_event_dragSelect];
1517
style[d3_event_dragSelect] = "none";
1618
return function(suppressClick) {
17-
w.on(touchstart, null).on(selectstart, null).on(dragstart, null);
19+
w.on(name, null);
1820
style[d3_event_dragSelect] = select;
1921
if (suppressClick) { // suppress the next click, but only if it’s immediate
2022
function off() { w.on(click, null); }

‎src/svg/brush.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ d3.svg.brush = function() {
101101
resizingX = !/^(n|s)$/.test(resizing) && x,
102102
resizingY = !/^(e|w)$/.test(resizing) && y,
103103
dragging = eventTarget.classed("extent"),
104-
dragRestore = d3_event_dragSuppress("brush"),
104+
dragRestore = d3_event_dragSuppress(),
105105
center,
106106
origin = mouse(),
107107
offset;

0 commit comments

Comments
 (0)