/*  With the mouse, you can draw several squares directly on the page

each design is a div with p5 canvas instance inside.

you can edit and move each with handlers and remove with backspace.

increase or decrease the divisions with arraw keys;

The question is :

I manage all with an array of array ithe the couple {{div1,p51},{div2,p52},{div3,p53}}

There is a possibility to manage without array ?

how to acces to p5 object directly by to click on the contener ?

*/

​

let wWidth = window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

​

let wHeight = window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

​

let activDiv;

let activCan;

let creaDiv=false;

let mesDivs=0;

let mesCanvas=[];

let currentResizer;

let currentCanvas;

let currentNode;

let original_mouse_x;

let original_mouse_y;

let original_width;

let original_height;

let minimum_size = 5;

​

function rnd(min, max) {

  return Math.round((Math.random() * (max - min) + min),0);

}

function innerdiv(leDiv,bord){

  let width=parseFloat(leDiv.style.width)-bord*2;

  let height=parseFloat(leDiv.style.height)-bord*2;

  return ({"width": width, "height": height});

}

​

function active(vrai,lediv=activDiv){

  if(lediv!=undefined){

    let  div =  lediv.children[0];

    if(vrai){

      div.className = "resizers";

    }else{

      div.className = "neutre";

    }

  }

}

let sketch = function(p) {

  p.coef=1;

  p.oldCoef=1;

  p.original_width;

  p.nbw=5;

  p.nbh=5;

  p.border=5;

  p.re=[];

  p.bord=3;

      p.setup = function() {

      let bord=p.bord*2;

      p.monCanva=p.createCanvas(parseFloat(activDiv.style.width)-   bord,parseFloat(activDiv.style.height)-bord);

      p.pixelDensity(4.0);

      p.noLoop();

    }

    p.draw = function() {

      p.clear();

      //p.background(100);

      let x=p.border/2;

      let y=p.border/2;

      let w=p.width-p.border;

      let h=p.height-p.border;

      let dw=w/p.nbw;

      let dh=h/p.nbh;

      p.strokeWeight(p.border);

      // horizontales

      p.noFill();

      p.rect(x, y, w, h);

      for (let pas = 0; pas < p.nbh+1; pas++) {

        p.line(x,y,w,y);

        y+=dh;

      }

      x=p.border/2;

      y=p.border/2;

      // verticales

      for (let pas = 0; pas < p.nbw+1; pas++) {

        p.line(x,y,x,h);

        x+=dw;

      }

  }

}

​

function initDiv(X,Y){

    var div = document.createElement('div');

    div.innerHTML = '<div id="id'+mesDivs+'" class="resizable"><div class="resizers"><div class="resizer top-left"></div><div class="resizer top-right"></div><div class="resizer bottom-left"></div><div class="resizer bottom-right"></div><div class="resizer right-center"></div><div class="resizer left-center"></div><div class="resizer top-center"></div><div class="resizer bottom-center"></div></div></div>';

    document.body.appendChild(div);

     activDiv=document.getElementById("id"+mesDivs);

     activDiv.style.left = X+"px";

     activDiv.style.top = Y+"px";

     activDiv.style.width = 1+"px";

     activDiv.style.height = 1+"px";

  }

function drawDiv(X,Y){

  if(parseFloat(activDiv.style.width)>5&&parseFloat(activDiv.style.height)>5){

    activDiv.children[0].style.visibility="visible";

  }

    let depX=parseFloat(activDiv.style.left); 

    let depY=parseFloat(activDiv.style.top);

    let width=X-depX;

    let height=Y-depY;

  activDiv.style.width = width+"px";

  if (event.shiftKey) {

    activDiv.style.height = width+"px";

  }else{

    activDiv.style.height = height+"px";

    }

  }

​

​

​

function finiDiv(X,Y){

  if(parseFloat(activDiv.style.width)>5&&parseFloat(activDiv.style.height)>5){

    let  lediv =  activDiv.children[0];

    let n=new p5(sketch,lediv);

    let style = getComputedStyle(lediv);

    //lediv.style.visibility=hidden;

    n.original_width=parseFloat(activDiv.style.width);

    let monid=activDiv.id;

    let hash = {};

    hash[0]=monid;

    hash[1]=n;

    mesCanvas.push(hash);

    //console.log(mesCanvas);

    setTimeout(function() {

    }, 100);

    mesDivs+=1;   

    }else{

      activDiv.remove();

      activCan=undefined;

      activDiv=undefined;

    }

  creaDiv=false;

  }

​

function Resize(X,Y) {

  activDiv=currentResizer;

  if (currentNode.classList.contains('bottom-right')) {

    let width = original_width + (X - original_mouse_x);

    let height = original_height + (Y - original_mouse_y)

    currentResizer.style.width = width + 'px';

    if (event.shiftKey) {

      currentResizer.style.height = width + 'px';

    }else{

      currentResizer.style.height = height + 'px';

    }

  }

  else if (currentNode.classList.contains('bottom-left')) {

    //console.log('bottom-left');

    const height = original_height + (Y - original_mouse_y)

    const width = original_width - (X - original_mouse_x)

    currentResizer.style.width = width + 'px';

    if (event.shiftKey) {

      currentResizer.style.height = width + 'px';

    }else{

      currentResizer.style.height = height + 'px';

    }

    currentResizer.style.left = original_x + (X - original_mouse_x) + 'px'

  }

  else if (currentNode.classList.contains('top-right')) {

    const width = original_width + (X - original_mouse_x)

    const height = original_height - (Y - original_mouse_y)

    currentResizer.style.width = width + 'px';

    if (event.shiftKey) {

      currentResizer.style.height = width + 'px';

      currentResizer.style.top = original_y - (X - original_mouse_x) + 'px'

    }else{

      currentResizer.style.height = height + 'px';

      currentResizer.style.top = original_y + (Y - original_mouse_y) + 'px'

      }

  }

  else if (currentNode.classList.contains('top-left')) {

    const width = original_width - (X - original_mouse_x)

    const height = original_height - (Y - original_mouse_y)

    currentResizer.style.width = width + 'px';

    currentResizer.style.left = original_x + (X - original_mouse_x) + 'px';

    if (event.shiftKey) {

      currentResizer.style.height = width + 'px';

      currentResizer.style.top = original_y + (X - original_mouse_x) + 'px'

    }else{

      currentResizer.style.height = height + 'px';

      currentResizer.style.top = original_y + (Y - original_mouse_y) + 'px'

    }

  }else if (currentNode.classList.contains('left-center')) {

    const width = original_width - (X - original_mouse_x)

    currentResizer.style.width = width + 'px';

    currentResizer.style.left = original_x + (X - original_mouse_x) + 'px'

  }else if (currentNode.classList.contains('right-center')) {

     let width = original_width + (X - original_mouse_x);

    currentResizer.style.width = width + 'px';

  }else if (currentNode.classList.contains('bottom-center')) {

     let height = original_height + (Y - original_mouse_y);

    currentResizer.style.height = height + 'px';

  }else if (currentNode.classList.contains('top-center')) {

     const height = original_height - (Y - original_mouse_y)

    currentResizer.style.height = height + 'px';

      currentResizer.style.top = original_y + (Y - original_mouse_y) + 'px'

  }else{

    // déplacement

    currentResizer.style.top = original_y + (Y - original_mouse_y) + 'px'

    currentResizer.style.left = original_x + (X - original_mouse_x) + 'px';

  }

  // canvas resize

  for (i = 0; i < mesCanvas.length; i++) { 

        if(activDiv.id==mesCanvas[i][0]){

          activCan=mesCanvas[i][1];

        }

      }

  let div=innerdiv(activDiv,3);

  if (event.shiftKey) {

     //can.coef=(div.width/can.original_width)*can.oldCoef;

    if(div.width>div.height){

    activCan.resizeCanvas(div.width, div.width);}else{

    activCan.resizeCanvas(div.height, div.height);

    }

  } else{

    //console.log(parseFloat(activDiv.style.width));

    //can.coef=div.width/can.original_width;

    activCan.original_width=parseFloat(div.width);

    activCan.oldCoef=activCan.coef;

    activCan.resizeCanvas(div.width, div.height);

  }

  }

    function stopResize() {

      currentResizer=undefined;

    }

​

document.onmousedown=function(event)  {

  let lediv=event.target;

  let select=false;

  if(lediv.tagName=="CANVAS"){

    // if div clicked

    select=true;

    active(false);// deselect old selection

    activCan=document.getElementById(lediv.id);

    activDiv=document.getElementById(lediv.parentNode.parentNode.id);

    active(true);

  }

  let X=event.clientX;

  let Y=event.clientY;

  original_mouse_y=Y;

  original_mouse_x=X;

  //console.log(event.target);

  if(!lediv.classList.contains('resizer')&& !select){

    // create new canvas in new div

    active(false);

    creaDiv=true;

    initDiv(X,Y);

  }else{

    // modify existing div and canvas

    activDiv=document.getElementById(lediv.parentNode.parentNode.id);

    let parentNode=lediv.parentNode.parentNode.id;

    currentResizer=document.getElementById(parentNode);

    currentNode=lediv;

    original_width=parseFloat(currentResizer.style.width);

    original_height=parseFloat(currentResizer.style.height);

    original_x=parseFloat(currentResizer.style.left);

    original_y=parseFloat(currentResizer.style.top); 

  }

}

​

document.onmousemove=function(event)  {

  let X=event.clientX;

  let Y=event.clientY;

  if(creaDiv){

    drawDiv(X,Y);

  }

  if(currentResizer!=undefined){

    Resize(X,Y);

  }

}

​

​

document.onmouseup=function(event)  {

  let X=event.clientX;

  let Y=event.clientY;

  if(creaDiv){

    finiDiv(X,Y);

  } 

  if(currentResizer!=undefined){

  stopResize(X,Y);

  }

}

function quelleCan(){

  if(activDiv!=undefined){

      for (i = 0; i < mesCanvas.length; i++) {  

        if(activDiv.id==mesCanvas[i][0]){

        activCan=mesCanvas[i][1];

        return true;

      }

    }

  }

}

window.addEventListener("keydown", function (event) {

  if (event.key !== undefined) {

    if(event.key=="Backspace"){

      if(activDiv!=undefined){

        for (i = 0; i < mesCanvas.length; i++) {  

          if(activDiv.id==mesCanvas[i][0]){

            activDiv.parentNode.remove();

            mesCanvas.splice(i, 1);

            break;

          }

        }

      }

     }

  }

    //left = 37 up = 38 right = 39 down = 40

   if(event.keyCode==37){

      if(quelleCan())

      {if(activCan.nbw >1){activCan.nbw=activCan.nbw-1};

      activCan.draw();}

     }else if (event.key=="ArrowRight"){

      if(quelleCan())

      {activCan.nbw=activCan.nbw+1;

      activCan.draw();}

     }else if (event.keyCode==38){

      if(quelleCan())

      {activCan.nbh=activCan.nbh+1;

      activCan.draw();}

     }else if (event.keyCode==40){

     if(quelleCan())

     { if(activCan.nbh>1){activCan.nbh=activCan.nbh-1};

      activCan.draw();}

     }

  else if (event.key == '+'){

     if(quelleCan())

     {let num=parseFloat(activCan.border);

      if(activCan.border>=1){

       activCan.border=(num+1).toFixed(0);}else{

       activCan.border=(num*1.5);

     }

      activCan.draw();}

     }else if (event.key == '-'){

     if(quelleCan())

     {let num=parseFloat(activCan.border);

       if(activCan.border>1){

       activCan.border=(num-1).toFixed(0);}else{

       activCan.border=(num/1.5).toFixed(2);

     }

      activCan.draw();}

     }

});