282 lines
6.6 KiB
JavaScript
282 lines
6.6 KiB
JavaScript
//the absolute start, adding the buttons
|
|
//adding the button for the modal
|
|
//in main.js i have some basic functions like adding rectangles
|
|
//and drag and drop
|
|
|
|
//====================first adding the modal=================================
|
|
|
|
//order is used to generate new id's for components
|
|
var order = 0;
|
|
|
|
//selected indicates what is the last element the user clicked on
|
|
var selecte="yay"
|
|
|
|
//piece would contain all the components
|
|
//(without pins and edges)
|
|
//we will use that array for updating the value and the position
|
|
var pieces = [];
|
|
|
|
//this 'modal' variable is used to keep the blue box
|
|
//basically when you click on it the modal for adding components will pop
|
|
var modal = add(40,40,"blue","black","butt",false);
|
|
|
|
//adding the event for clicking
|
|
$(modal).on("mousedown touchstart",function(e){
|
|
|
|
//showing the modal
|
|
//actually 'modal' is just the button
|
|
//and 'addel' is the true id of the modal from DOM
|
|
$("#addel").modal("show");
|
|
|
|
//being sure we wont move the components
|
|
moveing = false;
|
|
|
|
//activatng the drag and drop for the blue box
|
|
selected = "butt";
|
|
});
|
|
|
|
//the event for finishing the drag and drop on the blue box
|
|
$(modal).on("mouseup touchend",function(e){
|
|
//telling that we dont want to drag it anymore
|
|
selected = "yay";
|
|
});
|
|
|
|
//changing the positon of the blue box
|
|
//we dont want it to be in the left top corner at 0 0
|
|
$(modal).attr("y","500");
|
|
$(modal).attr("x","500");
|
|
|
|
//var desc = new text(modal,"+")
|
|
|
|
|
|
//used for actually getting the new ids
|
|
function getname(){
|
|
//getting the 'order'
|
|
//than making it bigger by 1
|
|
//convert it to string
|
|
//than add 'piece' to it for avoiding confusion between pieces and pins
|
|
return ((order++).toString()+"piece")
|
|
}
|
|
|
|
//the function that fires when you tap 'add'
|
|
function addel(){
|
|
for (var i = 0;i < parseFloat($("#times").val());i++){
|
|
var added = eval("new "+$("#sel option:selected").attr("value")+"(getname())");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//================================preventing deafult actions==========================
|
|
|
|
//nothing to say here
|
|
$("img,rect,circle,p,foreignObject").on("mousedown touchstart",function(e){
|
|
e.preventDefault();
|
|
});
|
|
$("*").on("mouseup touchend",function(e){
|
|
e.preventDefault();
|
|
moveing = false;
|
|
});
|
|
$("img").on("click touchstart",function(e){
|
|
e.preventDefault();
|
|
});
|
|
|
|
|
|
|
|
//===============================variables============================================
|
|
|
|
//setting the drag and drop to our value
|
|
//'yay' means 'nothing selected'
|
|
var selected = "yay";
|
|
|
|
//the first positios of the clicks
|
|
var firstx = 0;
|
|
var firsty = 0;
|
|
|
|
//the first position of an element dragged
|
|
var fx = 0;
|
|
var fy = 0;
|
|
|
|
//snap settings
|
|
let snap = false;
|
|
|
|
//=====================================some events===================================
|
|
|
|
//nothing to say here...
|
|
//just some basic things
|
|
$("body").on("mousemove touchmove",function(e){
|
|
//calling the drag function
|
|
drag(e,selected);
|
|
});
|
|
$("body").on("mouseup touchend",function(e){
|
|
selected = "yay";
|
|
console.log("got a mouse up");
|
|
});
|
|
$("body").on("mousedown touchstart",function(e){
|
|
//beeing sure that we actually want to drag something
|
|
if (selected!="yay"){
|
|
|
|
//setting our first mouse poitions
|
|
firstx = e.pageX * zoomx/window.innerWidth;
|
|
firsty = e.pageY * zoomy/window.innerHeight;
|
|
|
|
firstx += xvb;
|
|
firsty += yvb;
|
|
|
|
//conveerting the id to an actual thing
|
|
name = "#"+selected;
|
|
|
|
//beeing sure we get the corect attributes
|
|
//circle have 'cx' and 'cy'
|
|
//and rectangles have 'x' and 'y'
|
|
if ($(name).attr("class")=="light"){
|
|
fx = parseFloat($(name).attr("cx"));
|
|
fy = parseFloat($(name).attr("cy"));
|
|
}
|
|
else{
|
|
fx = parseFloat($(name).attr("x"));
|
|
fy = parseFloat($(name).attr("y"));
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//======================================funcctions for actual draging===========================
|
|
|
|
|
|
//thefunction that tranfers the data from the event to our set_position function
|
|
function drag(e,selected){
|
|
|
|
//the name
|
|
let name = "#" + selected;
|
|
|
|
//the positions
|
|
let x = e.pageX;
|
|
let y = e.pageY;
|
|
|
|
x *= zoomx/window.innerWidth;
|
|
y *= zoomy/window.innerHeight;
|
|
|
|
//updating positions
|
|
set_position(name,x,y);
|
|
}
|
|
|
|
//our main place to change things
|
|
function set_position(name,x,y){
|
|
var obj,objx,objy;
|
|
obj = "#"+selected;
|
|
|
|
x = parseFloat(x);
|
|
y = parseFloat(y);
|
|
|
|
x += xvb;
|
|
y += yvb;
|
|
|
|
|
|
|
|
if ($(name).attr("class")!="light"){
|
|
//getting the variables
|
|
obj = "#"+selected;
|
|
objx = parseFloat($(obj).attr("x"));
|
|
objy = parseFloat($(obj).attr("y"));
|
|
|
|
x = parseFloat(x);
|
|
y = parseFloat(y);
|
|
|
|
xdif = fx - firstx;
|
|
ydif = fy - firsty;
|
|
|
|
x += xdif;
|
|
y += ydif;
|
|
|
|
//x -= parseFloat($(obj).attr("width"));
|
|
//y -= parseFloat($(obj).attr("height"));
|
|
if (snap){
|
|
x = Math.floor(x/80)*80;
|
|
y = Math.floor(y/80)*80;
|
|
}
|
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
|
//setting the new positions
|
|
$(obj).attr("x",(x).toString());
|
|
$(obj).attr("y",(y).toString());
|
|
}
|
|
else{
|
|
//for circles
|
|
//getting the variables
|
|
obj = "#"+selected;
|
|
objx = parseFloat($(obj).attr("cx"));
|
|
objy = parseFloat($(obj).attr("cy"));
|
|
|
|
x = parseFloat(x);
|
|
y = parseFloat(y);
|
|
|
|
xdif = fx - firstx;
|
|
ydif = fy - firsty;
|
|
|
|
x += xdif;
|
|
y += ydif;
|
|
|
|
//x -= parseFloat($(obj).attr("width"));
|
|
//y -= parseFloat($(obj).attr("height"));
|
|
if (snap){
|
|
x = Math.floor(x/80)*80+40;
|
|
y = Math.floor(y/80)*80+40;
|
|
}
|
|
//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
|
|
//setting the new positions
|
|
$(obj).attr("cx",(x).toString());
|
|
$(obj).attr("cy",(y).toString());
|
|
}
|
|
}
|
|
|
|
function add(h,w,color,stroke,id,on){
|
|
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
$(g).attr({
|
|
width: "100%",
|
|
height: "100%"
|
|
});
|
|
var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
|
|
x: "50",
|
|
y:"50",
|
|
id: id,
|
|
fill:color,
|
|
height: h.toString()+"px",
|
|
width: w.toString()+"px",
|
|
stroke: stroke,
|
|
rx:"20",
|
|
ry:"20"
|
|
});
|
|
if (on){
|
|
$(el).attr("onmousedown","selected='"+id+"';");
|
|
$(el).attr("onmouseup","selected='yay';");
|
|
}
|
|
$(el).attr("stroke-width","4");
|
|
$(g).append(el);
|
|
var elem = document.getElementById("svg1");
|
|
elem.appendChild(g);
|
|
return el;
|
|
}
|
|
|
|
console.log(pieces);
|
|
setInterval(function(){
|
|
for (var i = 0;i < pieces.length;i++){
|
|
pieces[i].update();
|
|
}
|
|
for (var i = 0;i < lines.length;i++){
|
|
lines[i].update();
|
|
}
|
|
for (var i = 0;i < pins.length;i++){
|
|
pins[i].update();
|
|
}
|
|
},0.001);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//objects are made in other files
|