Skip to content

Commit 10463aa

Browse files
benjaminbeer256benjaminbeer256
committed
Fixed problems with dragging and text-box parsing
1 parent a626862 commit 10463aa

1 file changed

Lines changed: 82 additions & 34 deletions

File tree

‎js/widgets/reference_axes.js‎

Lines changed: 82 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ $(function() {
2121
this.selected_element = null;
2222
this.offset = { x: 0, y: 0 };
2323
this.main_plot = $("#main-plot").main_plot("instance");
24+
this.dragging_rect_width = 4;
2425

2526
//Attach drag event handlers
2627
d3.select("#main-plot-div").on("mousemove", function(e) {
@@ -60,37 +61,52 @@ $(function() {
6061
self = this;
6162
//If element is being dragged
6263
if (self.selected_element){
64+
let marginLeft = this.main_plot.margins.left;
65+
let marginRight = this.main_plot.width - this.main_plot.margins.right;
66+
let marginTop = this.main_plot.height - this.main_plot.margins.bottom;
67+
let marginBottom = this.main_plot.margins.top;
68+
let buffer = 2;
6369
var mousePos = this.get_mouse_pos(e);
6470
if (this.selected_element.getAttribute("class").includes("x-reference")){
65-
var currentX = parseFloat(this.selected_element.getAttribute("x1"));
66-
//Check that line is still on plot
67-
if (this.main_plot.margins.left < currentX && currentX < this.main_plot.width - this.main_plot.margins.right){
71+
var currentX = parseFloat(this.selected_element.getAttribute("x1"));
72+
//Check that line is still on plot, if outside of plot end dragging
73+
if (marginLeft <= currentX && currentX <= marginRight){
6874
var newX = currentX + (mousePos.x - this.offset.x);
69-
this.selected_element.setAttribute("x1", newX + "px");
70-
this.selected_element.setAttribute("x2", newX + "px");
71-
//Find the corresponding element in the array and update coordinate
72-
var array = this._elements.x_lines.find(x => {
73-
if (x !== undefined) {
74-
return x.number === parseInt(self.selected_element.getAttribute("number"));
75-
}
76-
});
77-
array.coordinate = parseInt(this.main_plot.xscale.invert(newX));
75+
this.move_plot_group(newX);
76+
} else if (currentX > marginRight) {
77+
this.move_plot_group(marginRight - buffer);
78+
this.end_dragging();
79+
} else if (currentX < marginLeft) {
80+
this.move_plot_group(marginLeft + buffer);
81+
this.end_dragging();
7882
}
83+
//Find the corresponding element in the array and update coordinate
84+
var array = this._elements.x_lines.find(x => {
85+
if (x !== undefined) {
86+
return x.number === parseInt(self.selected_element.getAttribute("number"));
87+
}
88+
});
89+
array.coordinate = parseInt(this.main_plot.xscale.invert(currentX));
7990
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
8091
var currentY = parseFloat(this.selected_element.getAttribute("y2"));
81-
//Check that line is still on plot
82-
if(currentY > this.main_plot.margins.top && currentY < this.main_plot.height - this.main_plot.margins.bottom){
92+
//Check that line is still on plot, if outside of plot end dragging
93+
if(currentY > marginBottom && currentY < marginTop){
8394
var newY = currentY + (mousePos.y - this.offset.y);
84-
this.selected_element.setAttribute("y1", newY + "px");
85-
this.selected_element.setAttribute("y2", newY + "px");
86-
//Find the corresponding element in the array and update coordinate
87-
var array = this._elements.y_lines.find(y => {
88-
if (y !== undefined) {
89-
return y.number === parseInt(self.selected_element.getAttribute("number"));
90-
}
91-
});
92-
array.coordinate = this.main_plot.yscale.invert(Math.abs(newY)).toFixed(2);
95+
this.move_plot_group(newY);
96+
} else if (currentY > marginBottom) {
97+
this.move_plot_group(marginTop - buffer);
98+
this.end_dragging();
99+
} else if (currentY < marginTop) {
100+
this.move_plot_group(marginBottom + buffer);
101+
this.end_dragging();
93102
}
103+
//Find the corresponding element in the array and update coordinate
104+
var array = this._elements.y_lines.find(y => {
105+
if (y !== undefined) {
106+
return y.number === parseInt(self.selected_element.getAttribute("number"));
107+
}
108+
});
109+
array.coordinate = this.main_plot.yscale.invert(Math.abs(currentY)).toFixed(2);
94110
}
95111
//Update offset, tables, and add numbers to plot
96112
this.offset = this.get_mouse_pos(e);
@@ -104,6 +120,19 @@ $(function() {
104120
this.selected_element = null;
105121
},
106122

123+
move_plot_group: function(pos) {
124+
//Move plotted line group to a position
125+
if (this.selected_element.getAttribute("class").includes("x-reference")) {
126+
this.selected_element.setAttribute("x1", pos + "px");
127+
this.selected_element.setAttribute("x2", pos + "px");
128+
d3.select(this.selected_element.parentNode).select("rect").attr("x", (pos - this.dragging_rect_width / 2) + "px");
129+
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
130+
this.selected_element.setAttribute("y1", pos + "px");
131+
this.selected_element.setAttribute("y2", pos + "px");
132+
d3.select(this.selected_element.parentNode).select("rect").attr("y", (pos - this.dragging_rect_width / 2) + "px");
133+
}
134+
},
135+
107136
attach_event_handlers: function() {
108137
let self = this;
109138
//Add default rows
@@ -142,8 +171,11 @@ $(function() {
142171
.style("text-align", "center")
143172
.attr("value", coord)
144173
.on("input", function() {
145-
lines[row_number].coordinate = parseFloat(this.value);
146-
self.plot_lines();
174+
let val = parseFloat(this.value)
175+
if (!(isNaN(val))){
176+
lines[row_number].coordinate = val;
177+
self.plot_lines();
178+
}
147179
});
148180
//Append color input
149181
row.append("td")
@@ -273,7 +305,8 @@ $(function() {
273305
//Add x-axis lines to plot with drag event handlers and labels
274306
for (let line of self._elements.x_lines) {
275307
if (line != null && !isNaN(line.coordinate)) {
276-
plotted_line = d3.select("#reference-axes-layer").append("line")
308+
line_group = d3.select("#reference-axes-layer").append("g")
309+
plotted_line = line_group.append("line")
277310
.attr("x1", self.main_plot.xscale(line.coordinate))
278311
.attr("x2", self.main_plot.xscale(line.coordinate))
279312
.attr("y1", self.main_plot.yscale(self.main_plot.ymin))
@@ -283,16 +316,24 @@ $(function() {
283316
.attr("stroke-dasharray", line.style)
284317
.attr("number", line.number)
285318
.classed("x-reference", true);
286-
plotted_line.on("mousedown", function(e) {
287-
self.selected_element = this;
288-
self.start_dragging(e, d3.select(this).node());
319+
dragging_rect = line_group.append("rect")
320+
.attr("width", this.dragging_rect_width)
321+
.attr("x", self.main_plot.xscale(line.coordinate) - this.dragging_rect_width / 2)
322+
.attr("y", self.main_plot.yscale(self.main_plot.ymax))
323+
.attr("height", (self.main_plot.yscale(self.main_plot.ymin) - self.main_plot.yscale(self.main_plot.ymax)) + "px")
324+
.attr("opacity", "0")
325+
.style("cursor", "ew-resize");
326+
dragging_rect.on("mousedown", function(e) {
327+
self.selected_element = plotted_line;
328+
self.start_dragging(e, d3.select(this.parentNode).select("line").node());
289329
});
290330
}
291331
}
292332
//Add y-axis lines to plot with event handlers and labels
293333
for (let line of self._elements.y_lines) {
294334
if (line != null && !isNaN(line.coordinate)){
295-
plotted_line = d3.select("#reference-axes-layer").append("line")
335+
line_group = d3.select("#reference-axes-layer").append("g")
336+
plotted_line = line_group.append("line")
296337
.attr("y1", self.main_plot.yscale(line.coordinate))
297338
.attr("y2", self.main_plot.yscale(line.coordinate))
298339
.attr("x1", self.main_plot.xscale(self.main_plot.xmin))
@@ -302,10 +343,17 @@ $(function() {
302343
.attr("stroke-dasharray", line.style)
303344
.attr("number", line.number)
304345
.classed("y-reference", true);
305-
plotted_line.on("mousedown", function(e) {
306-
self.selected_element = this;
307-
self.start_dragging(e, d3.select(this).node());
308-
});
346+
dragging_rect = line_group.append("rect")
347+
.attr("height", this.dragging_rect_width)
348+
.attr("x", self.main_plot.xscale(self.main_plot.xmin))
349+
.attr("y", self.main_plot.yscale(line.coordinate) - this.dragging_rect_width / 2)
350+
.attr("width", (self.main_plot.xscale(self.main_plot.xmax) - self.main_plot.xscale(self.main_plot.xmin)) + "px")
351+
.attr("opacity", "0")
352+
.style("cursor", "ns-resize");
353+
dragging_rect.on("mousedown", function(e) {
354+
self.selected_element = plotted_line;
355+
self.start_dragging(e, d3.select(this.parentNode).select("line").node());
356+
});
309357
}
310358
}
311359
this.add_plot_numbers();

0 commit comments

Comments
 (0)