Skip to content

Commit cbb5ee4

Browse files
jcha40jcha40
authored
Merge pull request #53 from CEGRcode/reference-lines
Addressed problems with dragging and text-box parsing
2 parents bd7df12 + b4a3e2e commit cbb5ee4

3 files changed

Lines changed: 94 additions & 41 deletions

File tree

‎js/events/plot_tabs.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$(function() {
22
d3.select("#plot-options-tab").on("click", function() {
33
showPane("plot-options", this);
4-
$("#main-plot").main_plot("toggle_tooltip", true);
4+
$("#main-plot").main_plot("toggle_tooltip", d3.select("#tooltip-checkbox").property("checked"));
55
})
66
d3.select("#reference-axes-tab").on("click", function() {
77
showPane("reference-axes-pane", this);

‎js/widgets/main_plot.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ $(function() {
168168
main_plot.append("g")
169169
.attr("id", "reference-axes-layer");
170170

171-
main_plot.on("mousemove", function(e) {
171+
d3.select("#main-plot-div").on("mousemove", function(e) {
172172
$("#main-plot").main_plot("move_tooltip", e)
173173
});
174174
main_plot.on("mouseleave", function() {

‎js/widgets/reference_axes.js‎

Lines changed: 92 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ $(function() {
2121
this.selected_element = null;
2222
this.offset = { x: 0, y: 0 };
2323
this.main_plot = $("#main-plot").main_plot("instance");
24-
24+
this.dragging_rect_width = 6;
2525
//Attach drag event handlers
26-
d3.select("#main-plot-div").on("mousemove", function(e) {
26+
document.getElementById("main-plot-div").addEventListener("mousemove", function(e) {
2727
self.drag_plot_element(e);
2828
});
29-
d3.select("#main-plot-div").on("mouseup", function() {
29+
document.getElementById("main-plot-div").addEventListener("mouseup", function() {
3030
self.end_dragging();
3131
});
3232
this.y_table.append("tbody");
@@ -60,37 +60,58 @@ $(function() {
6060
self = this;
6161
//If element is being dragged
6262
if (self.selected_element){
63+
let marginLeft = this.main_plot.margins.left;
64+
let marginRight = this.main_plot.width - this.main_plot.margins.right;
65+
let marginTop = this.main_plot.height - this.main_plot.margins.bottom;
66+
let marginBottom = this.main_plot.margins.top;
6367
var mousePos = this.get_mouse_pos(e);
6468
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){
68-
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));
69+
//Find the corresponding element in the array and update coordinate
70+
var array = this._elements.x_lines.find(x => {
71+
if (x !== undefined) {
72+
return x.number === parseInt(self.selected_element.getAttribute("number"));
73+
}
74+
});
75+
var currentX = parseFloat(this.selected_element.getAttribute("x1"));
76+
var newX = currentX + (mousePos.x - this.offset.x);
77+
//Check that line is still on plot, if outside of plot end dragging and put line on margin
78+
if (marginLeft <= mousePos.x && mousePos.x <= marginRight){
79+
this.move_plot_group(newX);
80+
} else if (mousePos.x > marginRight) {
81+
newX = Math.min(marginRight, mousePos.x);
82+
this.move_plot_group(newX);
83+
this.end_dragging();
84+
} else if (mousePos.x < marginLeft) {
85+
newX = Math.max(marginLeft, mousePos.x);
86+
this.move_plot_group(newX);
87+
this.end_dragging();
7888
}
89+
array.coordinate = parseInt(this.main_plot.xscale.invert(newX));
7990
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
91+
//Find the corresponding element in the array and update coordinate
92+
var array = this._elements.y_lines.find(y => {
93+
if (y !== undefined) {
94+
return y.number === parseInt(self.selected_element.getAttribute("number"));
95+
}
96+
});
8097
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){
83-
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);
98+
var newY = currentY + (mousePos.y - this.offset.y);
99+
console.log(mousePos.y);
100+
console.log(marginBottom);
101+
console.log(marginTop);
102+
//Check that line is still on plot, if outside of plot end dragging and put line on margin
103+
if(newY >= marginBottom && newY <= marginTop){
104+
this.move_plot_group(newY);
105+
} else if (newY < marginBottom) {
106+
newY = Math.max(marginBottom, newY);
107+
this.move_plot_group(newY);
108+
this.end_dragging();
109+
} else if (newY > marginTop) {
110+
newY = Math.min(newY, marginTop);
111+
this.move_plot_group(newY);
112+
this.end_dragging();
93113
}
114+
array.coordinate = this.main_plot.yscale.invert(Math.abs(newY)).toFixed(2);
94115
}
95116
//Update offset, tables, and add numbers to plot
96117
this.offset = this.get_mouse_pos(e);
@@ -104,6 +125,19 @@ $(function() {
104125
this.selected_element = null;
105126
},
106127

128+
move_plot_group: function(pos) {
129+
//Move plotted line group to a position
130+
if (this.selected_element.getAttribute("class").includes("x-reference")) {
131+
this.selected_element.setAttribute("x1", pos + "px");
132+
this.selected_element.setAttribute("x2", pos + "px");
133+
d3.select(this.selected_element.parentNode).select("rect").attr("x", (pos - this.dragging_rect_width / 2) + "px");
134+
} else if (this.selected_element.getAttribute("class").includes("y-reference")) {
135+
this.selected_element.setAttribute("y1", pos + "px");
136+
this.selected_element.setAttribute("y2", pos + "px");
137+
d3.select(this.selected_element.parentNode).select("rect").attr("y", (pos - this.dragging_rect_width / 2) + "px");
138+
}
139+
},
140+
107141
attach_event_handlers: function() {
108142
let self = this;
109143
//Add default rows
@@ -142,8 +176,11 @@ $(function() {
142176
.style("text-align", "center")
143177
.attr("value", coord)
144178
.on("input", function() {
145-
lines[row_number].coordinate = parseFloat(this.value);
146-
self.plot_lines();
179+
let val = parseFloat(this.value)
180+
if (!(isNaN(val))){
181+
lines[row_number].coordinate = val;
182+
self.plot_lines();
183+
}
147184
});
148185
//Append color input
149186
row.append("td")
@@ -273,7 +310,8 @@ $(function() {
273310
//Add x-axis lines to plot with drag event handlers and labels
274311
for (let line of self._elements.x_lines) {
275312
if (line != null && !isNaN(line.coordinate)) {
276-
plotted_line = d3.select("#reference-axes-layer").append("line")
313+
line_group = d3.select("#reference-axes-layer").append("g")
314+
plotted_line = line_group.append("line")
277315
.attr("x1", self.main_plot.xscale(line.coordinate))
278316
.attr("x2", self.main_plot.xscale(line.coordinate))
279317
.attr("y1", self.main_plot.yscale(self.main_plot.ymin))
@@ -283,16 +321,24 @@ $(function() {
283321
.attr("stroke-dasharray", line.style)
284322
.attr("number", line.number)
285323
.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());
324+
dragging_rect = line_group.append("rect")
325+
.attr("width", this.dragging_rect_width)
326+
.attr("x", self.main_plot.xscale(line.coordinate) - this.dragging_rect_width / 2)
327+
.attr("y", self.main_plot.yscale(self.main_plot.ymax))
328+
.attr("height", (self.main_plot.yscale(self.main_plot.ymin) - self.main_plot.yscale(self.main_plot.ymax)) + "px")
329+
.attr("opacity", "0")
330+
.style("cursor", "ew-resize");
331+
dragging_rect.on("mousedown", function(e) {
332+
self.selected_element = plotted_line;
333+
self.start_dragging(e, d3.select(this.parentNode).select("line").node());
289334
});
290335
}
291336
}
292337
//Add y-axis lines to plot with event handlers and labels
293338
for (let line of self._elements.y_lines) {
294339
if (line != null && !isNaN(line.coordinate)){
295-
plotted_line = d3.select("#reference-axes-layer").append("line")
340+
line_group = d3.select("#reference-axes-layer").append("g")
341+
plotted_line = line_group.append("line")
296342
.attr("y1", self.main_plot.yscale(line.coordinate))
297343
.attr("y2", self.main_plot.yscale(line.coordinate))
298344
.attr("x1", self.main_plot.xscale(self.main_plot.xmin))
@@ -302,10 +348,17 @@ $(function() {
302348
.attr("stroke-dasharray", line.style)
303349
.attr("number", line.number)
304350
.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-
});
351+
dragging_rect = line_group.append("rect")
352+
.attr("height", this.dragging_rect_width)
353+
.attr("x", self.main_plot.xscale(self.main_plot.xmin))
354+
.attr("y", self.main_plot.yscale(line.coordinate) - this.dragging_rect_width / 2)
355+
.attr("width", (self.main_plot.xscale(self.main_plot.xmax) - self.main_plot.xscale(self.main_plot.xmin)) + "px")
356+
.attr("opacity", "0")
357+
.style("cursor", "ns-resize");
358+
dragging_rect.on("mousedown", function(e) {
359+
self.selected_element = plotted_line;
360+
self.start_dragging(e, d3.select(this.parentNode).select("line").node());
361+
});
309362
}
310363
}
311364
this.add_plot_numbers();

0 commit comments

Comments
 (0)