1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import type {d3Selection} from "../../../types/types";import {$BAR, $CIRCLE, $COMMON, $DRAG, $SELECT, $SHAPE} from "../../config/classes";import {getPathBox} from "../../module/util";
/** * Module used for data.selection.draggable option */export default {	/**	 * Called when dragging.	 * Data points can be selected.	 * @private	 * @param {object} mouse Object	 */	drag(mouse): void {		const $$ = this;		const {config, state, $el: {main}} = $$;		const isSelectionGrouped = config.data_selection_grouped;		const isSelectable = config.interaction_enabled && config.data_selection_isselectable;
		if ($$.hasArcType() ||			!config.data_selection_enabled || // do nothing if not selectable			(config.zoom_enabled && !$$.zoom.altDomain) || // skip if zoomable because of conflict drag behavior			!config.data_selection_multiple // skip when single selection because drag is used for multiple selection		) {			return;		}
		const [sx, sy] = state.dragStart || [0, 0];		const [mx, my] = mouse;
		const minX = Math.min(sx, mx);		const maxX = Math.max(sx, mx);		const minY = isSelectionGrouped ? state.margin.top : Math.min(sy, my);		const maxY = isSelectionGrouped ? state.height : Math.max(sy, my);
		main.select(`.${$DRAG.dragarea}`)			.attr("x", minX)			.attr("y", minY)			.attr("width", maxX - minX)			.attr("height", maxY - minY);
		// TODO: binary search when multiple xs		main.selectAll(`.${$SHAPE.shapes}`)			.selectAll(`.${$SHAPE.shape}`)			.filter(d => isSelectable?.bind($$.api)(d))			.each(function(d, i) {				const shape: d3Selection = d3Select(this);				const isSelected = shape.classed($SELECT.SELECTED);				const isIncluded = shape.classed($DRAG.INCLUDED);				let isWithin: any = false;				let toggle;
				if (shape.classed($CIRCLE.circle)) {					const x: number = +shape.attr("cx") * 1;					const y: number = +shape.attr("cy") * 1;
					toggle = $$.togglePoint;					isWithin = minX < x && x < maxX && minY < y && y < maxY;				} else if (shape.classed($BAR.bar)) {					const {x, y, width, height} = getPathBox(this);
					toggle = $$.togglePath;					isWithin = !(maxX < x || x + width < minX) && !(maxY < y || y + height < minY);				} else {					// line/area selection not supported yet					return;				}
				// @ts-ignore				if (isWithin ^ isIncluded) {					shape.classed($DRAG.INCLUDED, !isIncluded);					// TODO: included/unincluded callback here					shape.classed($SELECT.SELECTED, !isSelected);					toggle.call($$, !isSelected, shape, d, i);				}			});	},
	/**	 * Called when the drag starts.	 * Adds and Shows the drag area.	 * @private	 * @param {object} mouse Object	 */	dragstart(mouse): void {		const $$ = this;		const {config, state, $el: {main}} = $$;
		if ($$.hasArcType() || !config.data_selection_enabled) {			return;		}
		state.dragStart = mouse;
		main.select(`.${$COMMON.chart}`)			.append("rect")			.attr("class", $DRAG.dragarea)			.style("opacity", "0.1");
		$$.setDragStatus(true);	},
	/**	 * Called when the drag finishes.	 * Removes the drag area.	 * @private	 */	dragend(): void {		const $$ = this;		const {config, $el: {main}, $T} = $$;
		if ($$.hasArcType() || !config.data_selection_enabled) { // do nothing if not selectable			return;		}
		$T(main.select(`.${$DRAG.dragarea}`))			.style("opacity", "0")			.remove();
		main.selectAll(`.${$SHAPE.shape}`)			.classed($DRAG.INCLUDED, false);
		$$.setDragStatus(false);	}};