fix(interaction): Correct drag selection error (#493)

- Update on use of 3.x d3.drag API - Removed duplicated call on drag function Fix #490 Close #493
naver · Jul 17, 2018 · f38cd24 · f38cd24
1 parent f9f0081
commit f38cd24
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/spec/interactions/interaction-spec.js b/spec/interactions/interaction-spec.js
@@ -399,7 +399,7 @@ describe("INTERACTION", () => {
 				expect(svg.on("mouseenter")).to.not.be.null;
 				expect(svg.on("mouseleave")).to.not.be.null;
 
-				internal.main.selectAll(".bb-event-rect").each(function() {
+				internal.main.selectAll(`.${CLASS.eventRect}`).each(function() {
 					const el = d3.select(this);
 
 					expect(el.on("mouseenter")).to.not.be.null;
@@ -421,7 +421,7 @@ describe("INTERACTION", () => {
 				expect(svg.on("mouseenter")).to.be.undefined;
 				expect(svg.on("mouseleave")).to.be.undefined;
 
-				internal.main.selectAll(".bb-event-rect").each(function() {
+				internal.main.selectAll(`.${CLASS.eventRect}`).each(function() {
 					const el = d3.select(this);
 
 					expect(el.on("mouseenter")).to.be.undefined;
@@ -450,7 +450,7 @@ describe("INTERACTION", () => {
 				expect(svg.on("mouseenter")).to.be.undefined;
 				expect(svg.on("mouseleave")).to.be.undefined;
 
-				internal.main.selectAll(".bb-event-rect").each(function() {
+				internal.main.selectAll(`.${CLASS.eventRect}`).each(function() {
 					const el = d3.select(this);
 
 					expect(el.on("mouseenter")).to.be.undefined;
@@ -470,27 +470,29 @@ describe("INTERACTION", () => {
 							["data1", 30, 200, 100, 400, 150, 250]
 						],
 						selection: {
-							enabled: true
+							enabled: true,
+							draggable: true
 						}
 					}
 				};
 			});
 
 			it("data point circle should be selected and unselected", () => {
-				const circle = d3.select(".bb-shape-2").node();
-				const box = circle.getBBox();
+				const circle = d3.select(`.${CLASS.shape}-2`).node();
 				const rect = d3.select(`.${CLASS.eventRect}-2`).node();
 
+				const box = circle.getBBox();
+				const clientX = box.x;
+				const clientY = box.y;
+
 				util.fireEvent(rect, "click", {
-					clientX: box.x,
-					clientY: box.y
+					clientX, clientY
 				}, chart);
 
 				expect(d3.select(circle).classed(CLASS.SELECTED)).to.be.true;
 
 				util.fireEvent(rect, "click", {
-					clientX: box.x,
-					clientY: box.y
+					clientX, clientY
 				}, chart);
 
 				expect(d3.select(circle).classed(CLASS.SELECTED)).to.be.false;

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -719,7 +719,7 @@ export default class Options {
 			data_selection_multiple: true,
 
 			/**
-			 * Enable to select data points by dragging.<br><br>
+			 * Enable to select data points by dragging.
 			 * If this option set true, data points can be selected by dragging.
 			 * - **NOTE:** If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
 			 * @name data․selection․draggable

diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
@@ -400,6 +400,22 @@ extend(ChartInternal.prototype, {
 			.each(d2 => config.data_onover.call($$.api, d2));
 	},
 
+	/**
+	 * Return draggable selection function
+	 * @return {Function}
+	 * @private
+	 */
+	getDraggableSelection() {
+		const $$ = this;
+		const config = $$.config;
+
+		return config.interaction_enabled && config.data_selection_draggable && $$.drag ?
+			d3Drag()
+				.on("drag", function() { $$.drag(d3Mouse(this)); })
+				.on("start", function() { $$.dragstart(d3Mouse(this)); })
+				.on("end", () => { $$.dragend(); }) : () => {};
+	},
+
 	/**
 	 * Create eventRect for each data on the x-axis.
 	 * Register touch and drag events.
@@ -431,15 +447,7 @@ extend(ChartInternal.prototype, {
 						}
 					});
 			})
-			.call(
-				config.data_selection_draggable && $$.drag ?
-					(d3Drag()
-						.origin(Object)
-						.on("drag", function() { $$.drag(d3Mouse(this)); })
-						.on("dragstart", function() { $$.dragstart(d3Mouse(this)); })
-						.on("dragend", () => { $$.dragend(); })
-					) : () => {}
-			);
+			.call($$.getDraggableSelection());
 
 		if ($$.inputType === "mouse") {
 			rect
@@ -533,14 +541,7 @@ extend(ChartInternal.prototype, {
 						});
 				}
 			})
-			.call(
-				config.data_selection_draggable && $$.drag ?
-					(d3Drag().origin(Object)
-						.on("drag", function() { $$.drag(d3Mouse(this)); })
-						.on("dragstart", function() { $$.dragstart(d3Mouse(this)); })
-						.on("dragend", () => { $$.dragend(); })
-					) : () => {}
-			);
+			.call($$.getDraggableSelection());
 
 		if ($$.inputType === "mouse") {
 			rect