83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
let l_count = 0;
|
|
let lines = [];
|
|
|
|
function edge(start, end) {
|
|
this.id = l_count.toString() + "line";
|
|
l_count++;
|
|
this.start = start;
|
|
this.end = end;
|
|
lines[lines.length] = this;
|
|
|
|
let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
$(g).attr({
|
|
width: "100%",
|
|
height: "100%"
|
|
});
|
|
let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
|
|
x1: "50",
|
|
y1: "50",
|
|
x2: "55",
|
|
y2: "55",
|
|
id: this.id,
|
|
fill: "yellow",
|
|
stroke: "black"
|
|
});
|
|
$(el).attr("stroke-width", "2");
|
|
$(g).append(el);
|
|
let elem = document.getElementById("svg1");
|
|
elem.appendChild(g);
|
|
|
|
|
|
this.rep = el;
|
|
this.name = "#" + this.id;
|
|
|
|
this.update = function() {
|
|
let adr = this.start.name;
|
|
let temp = $(adr).attr("x");
|
|
let n = this.name;
|
|
temp = (parseFloat(temp)).toString();
|
|
$(n).attr("x1", temp);
|
|
temp = $(adr).attr("y");
|
|
temp = (parseFloat(temp) + 10).toString();
|
|
$(n).attr("y1", temp);
|
|
adr = this.end.name;
|
|
temp = $(adr).attr("x");
|
|
temp = (parseFloat(temp) + 20).toString();
|
|
$(n).attr("x2", temp);
|
|
temp = $(adr).attr("y");
|
|
temp = (parseFloat(temp) + 10).toString();
|
|
$(n).attr("y2", temp);
|
|
|
|
//and the color based on the state
|
|
if (this.start.val) {
|
|
$((this.rep)).attr("stroke", "yellow");
|
|
} else {
|
|
$((this.rep)).attr("stroke", "black");
|
|
}
|
|
}
|
|
|
|
|
|
rem_edge(this);
|
|
}
|
|
|
|
function rem_edge(ob) {
|
|
$((ob.rep)).on("click touchstart", function(e) {
|
|
e.preventDefault();
|
|
//removing the edge from the array
|
|
for (let i = 0; i < lines.length; i++) {
|
|
if (lines[i] == (ob.id)) {
|
|
lines.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
//removing the visual
|
|
$((ob.rep)).remove();
|
|
|
|
//fixing the actual start and end pins
|
|
ob.start.nei = "yay";
|
|
ob.start.val = false;
|
|
ob.start.state = true;
|
|
ob.end.val = false;
|
|
ob.end.state = true;
|
|
});
|
|
} |