|
|
@ -1,22 +1,110 @@
|
|
|
|
function createEtLogique(x, y, id) {
|
|
|
|
function createEtLogique(x, y,id) {
|
|
|
|
var imageObj = new Image();
|
|
|
|
var imageObj = new Image();
|
|
|
|
imageObj.onload = function () {
|
|
|
|
imageObj.onload = function () {
|
|
|
|
var yoda = new Konva.Image({
|
|
|
|
var et = new Konva.Image({
|
|
|
|
x: x,
|
|
|
|
x: x,
|
|
|
|
y: y,
|
|
|
|
y: y,
|
|
|
|
image: imageObj,
|
|
|
|
image: imageObj,
|
|
|
|
width: 100,
|
|
|
|
width: 100,
|
|
|
|
height: 50,
|
|
|
|
height: 50,
|
|
|
|
id: "pd",
|
|
|
|
id: id,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
layer.add(yoda);
|
|
|
|
layer.add(et);
|
|
|
|
layer.batchDraw();
|
|
|
|
layer.batchDraw();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
imageObj.src = 'img/logiqueet.png';
|
|
|
|
imageObj.src = 'img/logiqueet.png';
|
|
|
|
|
|
|
|
imageObj.id = id;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var logique = {
|
|
|
|
|
|
|
|
name : id,
|
|
|
|
|
|
|
|
x : x,
|
|
|
|
|
|
|
|
y : y,
|
|
|
|
|
|
|
|
type : "et",
|
|
|
|
|
|
|
|
id1 : null,
|
|
|
|
|
|
|
|
id2 : null,
|
|
|
|
|
|
|
|
id3 : null,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
logiques.push(logique);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return imageObj;
|
|
|
|
function findLogique(logiqueId){
|
|
|
|
|
|
|
|
let elem = null;
|
|
|
|
|
|
|
|
logiques.forEach(function(element) {
|
|
|
|
|
|
|
|
if(element.name === logiqueId) {
|
|
|
|
|
|
|
|
elem = element;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return elem;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function checkLogiqueLines(logiqueId,lineId){
|
|
|
|
|
|
|
|
let logique = findLogique(logiqueId);
|
|
|
|
|
|
|
|
switch(lineId){
|
|
|
|
|
|
|
|
case "id1" :
|
|
|
|
|
|
|
|
if (lineId.id1 == null) return false;
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "id2" :
|
|
|
|
|
|
|
|
if (lineId.id2 == null) return false;
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "id3" :
|
|
|
|
|
|
|
|
if (lineId.id3 == null) return false;
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function whatIsElement(element){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(findLogique(element.name) == null){
|
|
|
|
|
|
|
|
return "switch";
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return "logique";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setLine(logiqueElement,lineId,lineName){
|
|
|
|
|
|
|
|
logiques.forEach(function(element) {
|
|
|
|
|
|
|
|
if(element.name === logiqueElement.name) {
|
|
|
|
|
|
|
|
element.forEach(function(elem){
|
|
|
|
|
|
|
|
if(elem == lineId){
|
|
|
|
|
|
|
|
elem = lineName;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function createLink(entre,sortie){
|
|
|
|
|
|
|
|
//entre est une porte logique
|
|
|
|
|
|
|
|
switch(whatIsElement(entre)){
|
|
|
|
|
|
|
|
case "switch" :
|
|
|
|
|
|
|
|
switch(whatIsElement(sortie)){
|
|
|
|
|
|
|
|
case "logique" :
|
|
|
|
|
|
|
|
if(!checkLogiqueLines(sortie.name,"id2")){
|
|
|
|
|
|
|
|
let switchMidX = entre.getX() + entre.getWidth();
|
|
|
|
|
|
|
|
let switchMidY = entre.getY() + entre.getHeight()/2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let logiqueMidX = sortie.x;
|
|
|
|
|
|
|
|
let logiqueMidY = sortie.y + (50/3)*2;
|
|
|
|
|
|
|
|
createLine([switchMidX,switchMidY,logiqueMidX,logiqueMidY],"line2");
|
|
|
|
|
|
|
|
setLine(sortie,"id2","line2");
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if(!checkLogiqueLines(sortie.name,"id1")){
|
|
|
|
|
|
|
|
let switchMidX = entre.getX() + entre.getWidth();
|
|
|
|
|
|
|
|
let switchMidY = entre.getY() + entre.getHeight()/2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let logiqueMidX = sortie.x;
|
|
|
|
|
|
|
|
let logiqueMidY = sortie.y + (50/3)*3;
|
|
|
|
|
|
|
|
createLine([switchMidX,switchMidY,logiqueMidX,logiqueMidY],"line1");
|
|
|
|
|
|
|
|
setLine(sortie,"id1","line1");
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function createLine(points, id) {
|
|
|
|
function createLine(points, id) {
|
|
|
@ -28,57 +116,74 @@ function createLine(points, id) {
|
|
|
|
lineJoin: 'round',
|
|
|
|
lineJoin: 'round',
|
|
|
|
id: id,
|
|
|
|
id: id,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return line
|
|
|
|
layer.add(line);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function initLayer() {
|
|
|
|
function createSwitch(num,id,x,y){
|
|
|
|
var imageObj2 = new Image();
|
|
|
|
|
|
|
|
imageObj2.onload = function () {
|
|
|
|
|
|
|
|
var yoda = new Konva.Image({
|
|
|
|
|
|
|
|
x: 500,
|
|
|
|
|
|
|
|
y: 50,
|
|
|
|
|
|
|
|
image: imageObj2,
|
|
|
|
|
|
|
|
width: 50,
|
|
|
|
|
|
|
|
height: 50,
|
|
|
|
|
|
|
|
id: "et",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
layer.add(yoda);
|
|
|
|
|
|
|
|
layer.batchDraw();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
imageObj2.src = 'img/idea_white.png';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var rect1 = new Konva.Rect({
|
|
|
|
var rect1 = new Konva.Rect({
|
|
|
|
x: 20,
|
|
|
|
x: x,
|
|
|
|
y: 20,
|
|
|
|
y: y,
|
|
|
|
width: 100,
|
|
|
|
width: 100,
|
|
|
|
height: 50,
|
|
|
|
height: 50,
|
|
|
|
stroke: 'black',
|
|
|
|
stroke: 'black',
|
|
|
|
strokeWidth: 4,
|
|
|
|
strokeWidth: 4,
|
|
|
|
id: "rect",
|
|
|
|
id: id,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
layer.add(rect1);
|
|
|
|
layer.add(rect1);
|
|
|
|
var simpleText = new Konva.Text({
|
|
|
|
var simpleText = new Konva.Text({
|
|
|
|
x: 20,
|
|
|
|
x: x,
|
|
|
|
y: 20,
|
|
|
|
y: y,
|
|
|
|
text: '0',
|
|
|
|
text: '0',
|
|
|
|
fontSize: 30,
|
|
|
|
fontSize: 30,
|
|
|
|
fontFamily: 'Calibri',
|
|
|
|
fontFamily: 'Calibri',
|
|
|
|
fill: 'black',
|
|
|
|
fill: 'black',
|
|
|
|
id: "text",
|
|
|
|
id: "text"+num,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
layer.add(simpleText);
|
|
|
|
layer.add(simpleText);
|
|
|
|
|
|
|
|
|
|
|
|
rect1.on('click', function () {
|
|
|
|
rect1.on('click', function () {
|
|
|
|
var et = stage.findOne("#text");
|
|
|
|
var et = stage.findOne("#text"+num);
|
|
|
|
var line = stage.findOne("#line");
|
|
|
|
var line = stage.findOne("#line"+num);
|
|
|
|
var text = et.text() == '1' ? '0' : '1';
|
|
|
|
var text = et.text() == '1' ? '0' : '1';
|
|
|
|
var colorline = et.text() == '1' ? 'black' : 'blue';
|
|
|
|
var colorline = et.text() == '1' ? 'black' : 'blue';
|
|
|
|
line.stroke(colorline);
|
|
|
|
line.stroke(colorline);
|
|
|
|
et.text(text);
|
|
|
|
et.text(text);
|
|
|
|
layer.draw();
|
|
|
|
layer.draw();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function isElementExisting(elementId){
|
|
|
|
|
|
|
|
if(stage.findOne("#"+elementId) != null){
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function checkLineSwitch(switchId){
|
|
|
|
|
|
|
|
if(stage.findOne("#"+switchId) != null){
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function initLayer() {
|
|
|
|
|
|
|
|
var imageObj2 = new Image();
|
|
|
|
|
|
|
|
imageObj2.onload = function () {
|
|
|
|
|
|
|
|
var yoda = new Konva.Image({
|
|
|
|
|
|
|
|
x: 500,
|
|
|
|
|
|
|
|
y: 50,
|
|
|
|
|
|
|
|
image: imageObj2,
|
|
|
|
|
|
|
|
width: 50,
|
|
|
|
|
|
|
|
height: 50,
|
|
|
|
|
|
|
|
id: "et",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
layer.add(yoda);
|
|
|
|
|
|
|
|
layer.batchDraw();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
imageObj2.src = 'img/idea_white.png';
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|