function createEtLogique(x, y, id) {
  var imageObj = new Image();
  imageObj.onload = function () {
    var yoda = new Konva.Image({
      x: x,
      y: y,
      image: imageObj,
      width: 100,
      height: 50,
      id: "pd",
    });


    layer.add(yoda);
    layer.batchDraw();
  };
  imageObj.src = 'img/logiqueet.png';

  return imageObj;
}

function createLine(points, id) {
  let line = new Konva.Line({
    points: points,
    stroke: 'black',
    strokeWidth: 3,
    lineCap: 'round',
    lineJoin: 'round',
    id: id,
  });
  return line
}

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';


  var rect1 = new Konva.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    stroke: 'black',
    strokeWidth: 4,
    id: "rect",
  });

  layer.add(rect1);
  var simpleText = new Konva.Text({
    x: 20,
    y: 20,
    text: '0',
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'black',
    id: "text",
  });
  layer.add(simpleText);

  rect1.on('click', function () {
    var et = stage.findOne("#text");
    var line = stage.findOne("#line");
    var text = et.text() == '1' ? '0' : '1';
    var colorline = et.text() == '1' ? 'black' : 'blue';
    line.stroke(colorline);
    et.text(text);
    layer.draw();
  });
}