<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
<head>
    <title>Древо семьи</title>
    <style type="text/css" media="screen">
        body {
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<!-- Google tag (gtag.js) -->
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NE6Q0VCFFP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-NE6Q0VCFFP');
</script>

</head>


<body>

<canvas id="canvasOne" width="window.innerHeight" height= "window.innerHeight">
 <input type="file" id="input" style="visibility: hidden" accept="image/*"/>
 
<form method="post" enctype="multipart/form-data">
            <input id="inputdre" type="file" name="dre_file" accept=".dre" required>
            <input type="submit" value="Загрузить DRE">
          </form>
<input type="file" id="inputder" style="visibility: hidden">
    
 
</canvas>
<script>


    window.addEventListener('load', eventWindowLoaded, false);
   


    // Принудительно перезагрузить скрипты
    let scripts = document.querySelectorAll('script[src]');
    scripts.forEach(script => {
        const newScript = script.cloneNode();
        newScript.src = script.src.split('?')[0] + '?v=' + new Date().getTime();
        script.parentNode.replaceChild(newScript, script);
    });

    var Debugger = function() {};

    Debugger.log = function(message) {
        try {
           // console.log(message);
        } catch (exception) {

        }
    }
    
    function eventWindowLoaded() {

        canvasApp();




    }
    let e = null;

    class ec {
      
 anim=0;
        wai=false;
        count=null;
        first = true;
        type = [];
        bit = [];
        value = [];
        str = [];
        font = [];
        fsize = [];
        x1 = [];
        y1 = [];
        x2 = [];
        y2 = [];
        col = [];


        sdx= [];
        sdy= [];
        dx = [];
        dy = [];

        sx = [];
        sy = [];
        k = [];

        an = [];
        sp = [];
        n = [];

        zm = [];
        rot = [];


        cx=[];
        cy=[];

        mx;
        my;
        mx1;
        my1;
        mx2;
        my2;
        mx3;
        my3;

        mstate=[];


        drx = [];
        dry = [];

        curved = [];
        chd = [];

        refresh = [];
        id = [];
        mrk = [];


        type1 = [];
        bit1 = [];
        value1 = [];
        str1 = [];
        font1 = [];
        fsize1 = [];
        x11 = [];
        y11 = [];
        x21 = [];
        y21 = [];
        col1 = [];

        dx1 = [];
        dy1 = [];
        sx1 = [];
        sy1 = [];
        k1 = [];

        stx1 = [];
        sty1 = [];

        sdrx1 = [];
        sdry1 = [];


        an1 = [];
        sp1 = [];
        n1 = [];

        zm1 = [];
        rot1 = [];

        mweel=[];

        mvx ;
        mvy ;

        curved1 = [];
        chd1 = [];

        refresh1 = [];
        id1 = [];
        mrk1 = [];
 
        value=[]


        count = 0;

        key=0;
        x; y;
        stx;sty;
        wi=0;
        nad=0;
        w; h;

        pindex=0;
        waitstart=false;


        // refresh;

        fx1 = 12000;
        fy1 = 12000;
        fx2 = 1;
        fy2 = 1;
        wci = 0;
        ini = false;

        ex1;
        ex2;
        ey1;
        ey2;
        esc;
        epi;
        id = [];

        bind = 0;
        
        bitmaps = [];
         paths = [];
         
         canvases= [];
         cpaths=[];
         ctx=[];
        fonts = [];
        fpaths = [];
        
        
        pat;
        marki;

        wci
        wcx1
        wcy1
        wcx2
        wcy2
        wzm
        wdx=0;
        wdy=0;

        wmvx=0;
        wmvy=0;
        key=0;//mouse key

        wover=0;//nad kakim scrollom
        pressedw=0;
        pressedo=0;
        ctx;
        wweel=0;

        noscroll=false;//otmenit scrolling naprimer pri dviganii elem
        mousetop=0;//samiy verhniy obj clicked
        alert1='';
        stox=0;
        stoy=0;
        pinchx=0
        pinchy=0
        pinchd=0

        tcanvas=null;
    
        loading=false;
        exporti=false;
        szm=1.0;


        distance = (event) => {
            return Math.hypot(event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY);
        };


        old=undefined;
        deb=function(ind,us){
            if(ind!=this.old&&us){
                this.old=ind
                debugger
            }
        }

    fitw=function(ind){
      
	  	this.zm[ind]=(this.x2[ind]-this.x1[ind])/this.sx[ind];
	  	this.dx[ind]=-(this.sx[ind]/4.0);
	//	alert("chd hhh "+this.zm[ind]);
	  	
	  	this.refresh[ind]=1;
	}
	fith=function(ind){
        this.zm[ind]=(this.y2[ind]-this.y1[ind])/this.sy[ind];
      //  alert("chd "+this.zm[ind])
		    this.dx[ind]=-(this.sx[ind]/4.0);
        this.refresh[ind]=1;
        console.log("fith")
	}


        clicked=(i)=> {
            return mousedown(i);
        }

mousedown=(i)=> {
if(this.key==1){
  if(this.isin(i))return true; else return false;
}
return false;

}



mousemove=(i)=> { 

   

if(this.key==2&&(this.stx!=this.x||this.sty!=this.y)){ 

if(this.type[i]==8){

  if (this.x > this.x1[i] && this.y > this.y1[i] && this.x < this.x2[i]&& this.y < this.y2[i]) {
    this.mstate[i]=2;
   
   this.mx=((this.x-this.x1[i])/this.zm[i])-this.dx[i];
   this.my=((this.y-this.y1[i])/this.zm[i])-this.dy[i];

   this.mx1=((this.x-this.x1[i])/this.zm[i]);
   this.my1=((this.y-this.y1[i])/this.zm[i]);
   this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
     
        //  this.mvx=this.mvx[i];this.mvy=this.mvy[i];
       
      return true;
  }
} else
if(this.type[i]==5){
  if (this.x > this.x1[i] && this.y > this.y1[i] && this.x < this.x2[i]&& this.y < this.y2[i]) {
   this.mstate[i]=2;
   this.mx=(this.x-this.x1[i]);
   this.my=(this.y-this.y1[i]);
  this.mx1=((this.x-this.x1[i])/this.zm[i]);
  this.my1=((this.y-this.y1[i])/this.zm[i]);           
  this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
   

      return true;
  }
} else{

    
    for(let j=i;j>0;j--){
         // if(this.type[j]==5||this.type[j]==5||j==0){this.wi=j;}
        }
    if(this.type[this.wi]==8){
     this.mx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
     this.my=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
     this.mx1=((this.x-this.x1[this.wi])/this.zm[this.wi]);
     this.my1=((this.y-this.y1[this.wi])/this.zm[this.wi]);  

     
    }else {
        this.mx=(this.x-this.x1[this.wi]);
        this.my=(this.y-this.y1[this.wi]);
        this.mx1=((this.x-this.x1[this.wi])/this.zm[this.wi]);
        this.my1=((this.y-this.y1[this.wi])/this.zm[this.wi]);  
    }
    
  //  console.log("mx="+this.mx1+" my="+this.my1)
 //   console.log("x1="+this.x1[i]+" y1="+this.y1[i]+" x2="+this.x2[i]+" y2="+this.y2[i])
//  console.log("move "+this.type[this.wi])
   if (this.x > this.x1[this.wi] && this.y > this.y1[this.wi] && this.x < this.x2[this.wi]&& this.y< this.y2[this.wi]) {
      this.mstate[i]=2;
      this.mx1=this.mx1-this.x1[i];
      this.my1=this.my1-this.y1[i];
      this.mvx=(this.x-this.stx)/this.zm[this.wi];
      this.mvy=(this.y-this.sty)/this.zm[this.wi];
console.log(this.mvx+" "+this.mvy)

     return true;
   }

}
return false;

}


        }






mousedrag=(i)=> { 
    
    if(this.isin(i)){
       
      if(this.type[i]==8){
          

        if(this.mousemove(i)) { 
         // console.log("scrol");

          return true;
        }
    }else 
    if(this.type[i]==5){
        if(this.mousemove(i)) {console.log("overl");
          return true;
        }
    }


/*
    if(this.type[this.wi]==8){
         this.mx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
         this.my=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
         this.mvx=(this.x-this.stx)/this.zm[this.wi];
         this.mvy=(this.y-this.sty)/this.zm[this.wi];console.log(this.mvx+" 8 "+this.mvy)
        
    }else {
        this.mx=(this.x-this.x1[this.wi]);
        this.my=(this.y-this.y1[this.wi]);
        this.mvx=(this.x-this.stx)/this.zm[this.wi];
        this.mvy=(this.y-this.sty)/this.zm[this.wi];console.log(this.mvx+" 5 "+this.mvy)
       
    }*/
     
   if (this.mousemove(i)) {
   
      this.mx=this.mx-this.x1[i];
      this.my=this.my-this.y1[i];
   //this.mvx=(this.x-this.stx)/this.zm[i];
   //this.mvy=(this.y-this.sty)/this.zm[i];
  console.log("dragingon- "+this.mvx+" "+this.mvy)
     return true;
   }
}
       return false; 
 }



 mousedragon=(i)=> {
    if(this.wi==i){
      if(this.type[i]==8){
        if(this.mousemove(i)) {
          return true;
        }
    }else 
    if(this.type[i]==5){
        if(this.mousemove(i)) {
          return true;
        }
    }
    }
   
if(this.dri==i){
   if (this.mousemove(this.wi)&&this.mx > this.x1[i] && this.my > this.y1[i] && this.mx < this.x2[i]&& this.my < this.y2[i]) {

      this.mx=this.mx-this.x1[i];
      this.my=this.my-this.y1[i];
   this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
   console.log("draging- "+this.mvx+" "+this.mvy)
     return true;
   }
}
       return false; 
 }



draged=(i)=> {
    return this.mousedrag(i);
}



        mouseup=(ind)=> {

           
           return(this.key==0);
        
        }



        mouseweel=function(){
            if(this.mweel[this.pindex]==undefined)return false;
            if(this.mweel[this.pindex]!=0){
                this.wweel =this.mweel[this.pindex];
                this.mweel[this.pindex]=0;
                return true;
            } else {
                return false;}

        }
        mouseweel=function(ind){
            if(this.mweel[ind]==undefined)return false;
            if(this.mweel[ind]!=0&&this.mstate[ind]==5){
                //console.log("zm")
                this.wweel =this.mweel[ind];
                this.mweel[ind]=0;
                return true;
            } else {
                return false;}

        }
        pinchzoom=function(ind){
            if(this.mweel[ind]==undefined)return false;
            if(this.mweel[ind]!=0&&this.mstate[ind]==6){
                
                //alert(this.mweel[ind])
                this.wweel =this.mweel[ind]
//console.log("zm "+this.wweel)
                this.mweel[ind]=0;
                this.mstate[ind]=0
                return true;
            } else {
                return false;}

        }
  
changed=(ind)=> {
            if(this.chd[ind]) {
                this.chd[ind]=false;
                return true;
            } else {
                return false;
            }
 }
 prind=0;//index of pressed
 timems=0;//ms
 
        pressed=(ind)=> {
            
           
          if(this.key==0&&this.delay<200){
              
           let hd=this.clcount;
              this.clcount=this.drcount;
               if(this.isin(ind)){
                    //if(ind==10)alert(this.clcount);
                   this.drcount=0;
                   this.clcount=0; this.key=0;
               return true;} else {this.clcount=0;return false;}
          }
        }
       

        







        scroll=function(ind) {
        
             if(isNaN(this.mvx)||isNaN(this.mvy)){this.mvx=0;this.mvy=0;return;}
                e.dx[ind] +=this.mvx;
                e.dy[ind] +=this.mvy; 
//console.log("ind="+ind+" "+this.wi );

                
             //    console.log("move="+this.mvx+" "+this.mvy);

        }

        block=function(wind) {
        
           if((-e.dx[wind]+(e.x2[wind]-e.x1[wind]))>e.sx[wind]) e.dx[wind]=-(e.sx[wind]-(e.x2[wind]-e.x1[wind]));
           if((-e.dy[wind]+(e.y2[wind]-e.y1[wind]))>e.sy[wind]) e.dy[wind]=-(e.sy[wind]-(e.y2[wind]-e.y1[wind]));
           if(e.dx[wind]>0) e.dx[wind]=0;
           if(e.dy[wind]>0) e.dy[wind]=0;
        }


        selecttodrag=function(ind) {
            e.sdx[ind]=e.x1[ind]// / e.zm[e.pindex];
            e.sdy[ind]=e.y1[ind] /// e.zm[e.pindex];
        }

        processcrolling=function(wind) {

           // 
          if(this.noscroll==false){ //console.log(wind+" "+this.wi)
            if(this.mousedrag(wind)){ 
               
              

                this.scroll(wind);
            }
            
          }
          
        }
        processzooming=function(wind) {
            if(this.mouseweel(wind)){
            if(this.wweel<0){
                this.zm[wind]*=1.05
              //  console.log(e.zm[e.pindex])
            }else if(this.wweel>0){
                this.zm[wind]*=0.95
               // console.log(e.zm[e.pindex])
            }
            
            }

            if(this.pinchzoom(wind)){
                
                this.zm[wind]=this.wweel;
//console.log("pz "+this.pinchd+" "+this.wweel)
                
                
            }



        }

NOZOOM=99;
stime=0;
scrollbox=false;

clcount=0;
cli=[];
clm=[];
clx=[];
cly=[]; 

addcl=function(ind,x,y){
    //console.log(this.type[ind]+" "+x+" "+y+" ")
   this.clcount++;
this.cli[this.clcount]=ind;
this.clx[this.clcount]=this.bitmaps[this.bit[ind]];


}


//если использовать mousedown взаместо pressed //первые условия pressed срабатывают


isin=function(ind){
 let yes=false;
 
 
 
for(let i=1;i<=this.clcount;i++){
     if((this.cli[i]==ind)&&(this.clx[i]==this.bitmaps[this.bit[ind]])){ yes=true;break; }
}
 return yes;
}


/*
isin=function(ind){
 let yes=false;

 for(let i=1;i<=this.clcount;i++){

     
   if(this.cli[i]==ind){

       yes=true;break;}
    
 }
 
 
 
 return yes;
}
*/



mousedownevent=function(x,y){
  
   this.key=1;
   this.timems=performance.now();
   this.x=x;
   this.y=y;
   this.stx=x;
   this.sty=y;
   
 for(let i=1;i<=this.count;i++){
    
   if(this.type[i]==8){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.addcl(i,x,y);
          this.wi=i;
let ii=this.wi+1;//console.log("click")
   if(this.type[ii]==8||this.type[ii]==5)return;
   let inx=0;
   let iny=0;
     inx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
     iny=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
    
    
      //  inx=this.x//(this.x-this.x1[this.wi]);
       // iny=this.y//(this.y-this.y1[this.wi]);
   
  // console.log("inx= "+inx+" iny= "+iny)
   do{
    if(this.type[ii]==8||this.type[ii]==5)break;
    if(inx>this.x1[ii]&&inx<this.x2[ii]&&iny>this.y1[ii]&&iny<this.y2[ii]){
        //console.log("add  "+this.type[ii])
        this.addcl(ii,this.x,this.y);
    }
    ii++;
   }while(this.type[ii]!=8&&this.type[ii]!=5&&ii<=this.count);
}
//in
     
     
   }else
   if(this.type[i]==5){
       //console.log("x="+x+" y="+y+" "+this.x1[i]+" "+this.y1[i]+" "+this.x2[i]+" "+this.y2[i])
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
        this.addcl(i,x,y);
        this.wi=i;
     
     
     
let ii=this.wi+1;//console.log("click")
   if(this.type[ii]==8||this.type[ii]==5)return;
   let inx=0;
   let iny=0;
     
    
      inx=this.x//(this.x-this.x1[this.wi]);
      iny=this.y//(this.y-this.y1[this.wi]);
   
  // console.log("inx= "+inx+" iny= "+iny)
   do{
    if(this.type[ii]==8||this.type[ii]==5)break;
    if(inx>this.x1[ii]&&inx<this.x2[ii]&&iny>this.y1[ii]&&iny<this.y2[ii]){
        //console.log("add  "+this.type[ii])
        this.addcl(ii,this.x,this.y);
    }
    ii++;
   }while(this.type[ii]!=8&&this.type[ii]!=5&&ii<=this.count);

     
     
     }//in
   }// type5
 }//for
    



   





   
}



delay=0;
drcount=0;
mouseupevent=function(x,y){
    //console.log("UP")
    
   this.delay=performance.now()-this.timems;
    
    this.drcount=this.clcount;
  this.key=0;
  this.clcount=0;
  
   
   this.stx=this.x;
   this.sty=this.y; 
   this.noscroll=false;
   this.wi=0;
   this.dri=0;
   this.mvx=0;
   this.mvy=0;

}


mousemoveevent=function(e,x,y){

if(e.buttons==0&&performance.now()-this.timems<60)return false;

   this.key=2;
  
   this.x=x;
   this.y=y;
 
   for(let i=this.count;i>0;i--){
   if(this.type[i]==8){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.nad=i;break;
          
     }
   }else
   if(this.type[i]==5){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.nad=i;break;
          
     }
   }

 }

}


drawscrollbar=function (ci,c) {
    
    let wdx=this.dx[ci];
    let wdy=this.dy[ci];
    let wzm=this.zm[ci];
                    c.scale(wzm,wzm)
                    c.translate(wdx,wdy);
let i=ci;
do{
 i++;

 if (this.type[i] == 3) { //BITMAP
                 
                    //if(cy1>0-hh&&cy2<h+hh&&cx1>0-(ww)&&cx2<w+ww){
                    if (this.bit[i]!=-1) {
                        if (this.bitmaps[this.bit[i]] != null&&this.bitmaps[this.bit[i]].width>0) {
                            var bw = this.bitmaps[this.bit[i]].width;
                            var bh = this.bitmaps[this.bit[i]].height;
           
                           var ssx=0;
                          var ssy=0;
      
                         if(this.rot[i]!=0){
                             ssx=this.cx[i];
                             ssy=this.cy[i];
                             c.save();
                             c.translate(ssx,ssy);
                             c.rotate(this.rot[i]*(Math.PI / 180)); // 90
                           }
                            c.drawImage(this.bitmaps[this.bit[i]], 0, 0, bw, bh, this.x1[i]-ssx, this.y1[i]-ssy, this.x2[i]-this.x1[i], this.y2[i]-this.y1[i]);
                            if(this.rot[i]!=0)c.restore();
                        
                        
                        
                        // c.fillText(this.bit[i],this.x1[i]+ 70,  this.y1[i]+70);
                        
                         
                         //c.drawImage(this.bitmaps[this.bit[i]],this.x1[i], this.y1[i]);

                        }}

                }



}while(i<1024&&this.type[i]!=8&&this.type[i]!=5)




}




cropcanvastobase64=function (ci) {
    let tcanvas = document.createElement("canvas");
    tcanvas.width=this.x2[ci]-this.x1[ci];
    tcanvas.height=this.y2[ci]-this.y1[ci];
    let c = tcanvas.getContext("2d"); 

    this.drawscrollbar(ci,c)
    
    var dataURL = tcanvas.toDataURL("image/jpeg", 0.5);



return dataURL;

}



lastx=0
lasty=0
        constructor(canvas) {
            this.ctx=canvas.getContext('2d');

            var canvas = document.getElementById("canvasOne");
canvas.width  =window.innerWidth;//innerHeight*0.55;
canvas.height =window.innerHeight;
//canvas.setAttribute('style', "position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:2px solid blue");
            this.w=canvas.width;
            this.h=canvas.height;
            this.tcanvas = document.createElement("canvas");
            
            


//TOUCH
canvas.addEventListener('touchstart',  (e)=>  {

if (e.touches.length === 2) {

    e.preventDefault(); // Prevent page scroll
//console.log("st2")



    // Calculate where the fingers have started on the X and Y axis
    this.pinchx = (e.touches[0].pageX + e.touches[1].pageX) / 2;
    this.pinchy = (e.touches[0].pageY + e.touches[1].pageY) / 2;
    this.pinchd = this.distance(e);
for (var i = 1; i < this.count; i++) {
        if(this.type[i]==8) {
            var jmx=e.touches[0].pageX
            var jmy=e.touches[0].pageY

            if(jmx>this.x1[i]&&jmy>this.y1[i]&&jmx<this.x2[i]&&jmy<this.y2[i]) {
                this.szm=this.zm[i];
            }


        }
    }
    
    
    
    
}else{

    e.preventDefault();
//console.log("st1
this.lastx=e.touches[0].pageX
this.lasty=e.touches[0].pageY

//con<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
<head>
    <title>Древо семьи</title>
    <style type="text/css" media="screen">
        body {
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<!-- Google tag (gtag.js) -->
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NE6Q0VCFFP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-NE6Q0VCFFP');
</script>

</head>


<body>

<canvas id="canvasOne" width="window.innerHeight" height= "window.innerHeight">
 <input type="file" id="input" style="visibility: hidden" accept="image/*"/>
 
<form method="post" enctype="multipart/form-data">
            <input id="inputdre" type="file" name="dre_file" accept=".dre" required>
            <input type="submit" value="Загрузить DRE">
          </form>
<input type="file" id="inputder" style="visibility: hidden">
    
 
</canvas>
<script>


    window.addEventListener('load', eventWindowLoaded, false);
   


    // Принудительно перезагрузить скрипты
    let scripts = document.querySelectorAll('script[src]');
    scripts.forEach(script => {
        const newScript = script.cloneNode();
        newScript.src = script.src.split('?')[0] + '?v=' + new Date().getTime();
        script.parentNode.replaceChild(newScript, script);
    });

    var Debugger = function() {};

    Debugger.log = function(message) {
        try {
           // console.log(message);
        } catch (exception) {

        }
    }
    
    function eventWindowLoaded() {

        canvasApp();




    }
    let e = null;

    class ec {
      
 anim=0;
        wai=false;
        count=null;
        first = true;
        type = [];
        bit = [];
        value = [];
        str = [];
        font = [];
        fsize = [];
        x1 = [];
        y1 = [];
        x2 = [];
        y2 = [];
        col = [];


        sdx= [];
        sdy= [];
        dx = [];
        dy = [];

        sx = [];
        sy = [];
        k = [];

        an = [];
        sp = [];
        n = [];

        zm = [];
        rot = [];


        cx=[];
        cy=[];

        mx;
        my;
        mx1;
        my1;
        mx2;
        my2;
        mx3;
        my3;

        mstate=[];


        drx = [];
        dry = [];

        curved = [];
        chd = [];

        refresh = [];
        id = [];
        mrk = [];


        type1 = [];
        bit1 = [];
        value1 = [];
        str1 = [];
        font1 = [];
        fsize1 = [];
        x11 = [];
        y11 = [];
        x21 = [];
        y21 = [];
        col1 = [];

        dx1 = [];
        dy1 = [];
        sx1 = [];
        sy1 = [];
        k1 = [];

        stx1 = [];
        sty1 = [];

        sdrx1 = [];
        sdry1 = [];


        an1 = [];
        sp1 = [];
        n1 = [];

        zm1 = [];
        rot1 = [];

        mweel=[];

        mvx ;
        mvy ;

        curved1 = [];
        chd1 = [];

        refresh1 = [];
        id1 = [];
        mrk1 = [];
 
        value=[]


        count = 0;

        key=0;
        x; y;
        stx;sty;
        wi=0;
        nad=0;
        w; h;

        pindex=0;
        waitstart=false;


        // refresh;

        fx1 = 12000;
        fy1 = 12000;
        fx2 = 1;
        fy2 = 1;
        wci = 0;
        ini = false;

        ex1;
        ex2;
        ey1;
        ey2;
        esc;
        epi;
        id = [];

        bind = 0;
        
        bitmaps = [];
         paths = [];
         
         canvases= [];
         cpaths=[];
         ctx=[];
        fonts = [];
        fpaths = [];
        
        
        pat;
        marki;

        wci
        wcx1
        wcy1
        wcx2
        wcy2
        wzm
        wdx=0;
        wdy=0;

        wmvx=0;
        wmvy=0;
        key=0;//mouse key

        wover=0;//nad kakim scrollom
        pressedw=0;
        pressedo=0;
        ctx;
        wweel=0;

        noscroll=false;//otmenit scrolling naprimer pri dviganii elem
        mousetop=0;//samiy verhniy obj clicked
        alert1='';
        stox=0;
        stoy=0;
        pinchx=0
        pinchy=0
        pinchd=0

        tcanvas=null;
    
        loading=false;
        exporti=false;
        szm=1.0;


        distance = (event) => {
            return Math.hypot(event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY);
        };


        old=undefined;
        deb=function(ind,us){
            if(ind!=this.old&&us){
                this.old=ind
                debugger
            }
        }

    fitw=function(ind){
      
	  	this.zm[ind]=(this.x2[ind]-this.x1[ind])/this.sx[ind];
	  	this.dx[ind]=-(this.sx[ind]/4.0);
	//	alert("chd hhh "+this.zm[ind]);
	  	
	  	this.refresh[ind]=1;
	}
	fith=function(ind){
        this.zm[ind]=(this.y2[ind]-this.y1[ind])/this.sy[ind];
      //  alert("chd "+this.zm[ind])
		    this.dx[ind]=-(this.sx[ind]/4.0);
        this.refresh[ind]=1;
        console.log("fith")
	}


        clicked=(i)=> {
            return mousedown(i);
        }

mousedown=(i)=> {
if(this.key==1){
  if(this.isin(i))return true; else return false;
}
return false;

}



mousemove=(i)=> { 

   

if(this.key==2&&(this.stx!=this.x||this.sty!=this.y)){ 

if(this.type[i]==8){

  if (this.x > this.x1[i] && this.y > this.y1[i] && this.x < this.x2[i]&& this.y < this.y2[i]) {
    this.mstate[i]=2;
   
   this.mx=((this.x-this.x1[i])/this.zm[i])-this.dx[i];
   this.my=((this.y-this.y1[i])/this.zm[i])-this.dy[i];

   this.mx1=((this.x-this.x1[i])/this.zm[i]);
   this.my1=((this.y-this.y1[i])/this.zm[i]);
   this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
     
        //  this.mvx=this.mvx[i];this.mvy=this.mvy[i];
       
      return true;
  }
} else
if(this.type[i]==5){
  if (this.x > this.x1[i] && this.y > this.y1[i] && this.x < this.x2[i]&& this.y < this.y2[i]) {
   this.mstate[i]=2;
   this.mx=(this.x-this.x1[i]);
   this.my=(this.y-this.y1[i]);
  this.mx1=((this.x-this.x1[i])/this.zm[i]);
  this.my1=((this.y-this.y1[i])/this.zm[i]);           
  this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
   

      return true;
  }
} else{

    
    for(let j=i;j>0;j--){
         // if(this.type[j]==5||this.type[j]==5||j==0){this.wi=j;}
        }
    if(this.type[this.wi]==8){
     this.mx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
     this.my=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
     this.mx1=((this.x-this.x1[this.wi])/this.zm[this.wi]);
     this.my1=((this.y-this.y1[this.wi])/this.zm[this.wi]);  

     
    }else {
        this.mx=(this.x-this.x1[this.wi]);
        this.my=(this.y-this.y1[this.wi]);
        this.mx1=((this.x-this.x1[this.wi])/this.zm[this.wi]);
        this.my1=((this.y-this.y1[this.wi])/this.zm[this.wi]);  
    }
    
  //  console.log("mx="+this.mx1+" my="+this.my1)
 //   console.log("x1="+this.x1[i]+" y1="+this.y1[i]+" x2="+this.x2[i]+" y2="+this.y2[i])
//  console.log("move "+this.type[this.wi])
   if (this.x > this.x1[this.wi] && this.y > this.y1[this.wi] && this.x < this.x2[this.wi]&& this.y< this.y2[this.wi]) {
      this.mstate[i]=2;
      this.mx1=this.mx1-this.x1[i];
      this.my1=this.my1-this.y1[i];
      this.mvx=(this.x-this.stx)/this.zm[this.wi];
      this.mvy=(this.y-this.sty)/this.zm[this.wi];
console.log(this.mvx+" "+this.mvy)

     return true;
   }

}
return false;

}


        }






mousedrag=(i)=> { 
    
    if(this.isin(i)){
       
      if(this.type[i]==8){
          

        if(this.mousemove(i)) { 
         // console.log("scrol");

          return true;
        }
    }else 
    if(this.type[i]==5){
        if(this.mousemove(i)) {console.log("overl");
          return true;
        }
    }


/*
    if(this.type[this.wi]==8){
         this.mx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
         this.my=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
         this.mvx=(this.x-this.stx)/this.zm[this.wi];
         this.mvy=(this.y-this.sty)/this.zm[this.wi];console.log(this.mvx+" 8 "+this.mvy)
        
    }else {
        this.mx=(this.x-this.x1[this.wi]);
        this.my=(this.y-this.y1[this.wi]);
        this.mvx=(this.x-this.stx)/this.zm[this.wi];
        this.mvy=(this.y-this.sty)/this.zm[this.wi];console.log(this.mvx+" 5 "+this.mvy)
       
    }*/
     
   if (this.mousemove(i)) {
   
      this.mx=this.mx-this.x1[i];
      this.my=this.my-this.y1[i];
   //this.mvx=(this.x-this.stx)/this.zm[i];
   //this.mvy=(this.y-this.sty)/this.zm[i];
  console.log("dragingon- "+this.mvx+" "+this.mvy)
     return true;
   }
}
       return false; 
 }



 mousedragon=(i)=> {
    if(this.wi==i){
      if(this.type[i]==8){
        if(this.mousemove(i)) {
          return true;
        }
    }else 
    if(this.type[i]==5){
        if(this.mousemove(i)) {
          return true;
        }
    }
    }
   
if(this.dri==i){
   if (this.mousemove(this.wi)&&this.mx > this.x1[i] && this.my > this.y1[i] && this.mx < this.x2[i]&& this.my < this.y2[i]) {

      this.mx=this.mx-this.x1[i];
      this.my=this.my-this.y1[i];
   this.mvx=(this.x-this.stx)/this.zm[i];
   this.mvy=(this.y-this.sty)/this.zm[i];
   console.log("draging- "+this.mvx+" "+this.mvy)
     return true;
   }
}
       return false; 
 }



draged=(i)=> {
    return this.mousedrag(i);
}



        mouseup=(ind)=> {

           
           return(this.key==0);
        
        }



        mouseweel=function(){
            if(this.mweel[this.pindex]==undefined)return false;
            if(this.mweel[this.pindex]!=0){
                this.wweel =this.mweel[this.pindex];
                this.mweel[this.pindex]=0;
                return true;
            } else {
                return false;}

        }
        mouseweel=function(ind){
            if(this.mweel[ind]==undefined)return false;
            if(this.mweel[ind]!=0&&this.mstate[ind]==5){
                //console.log("zm")
                this.wweel =this.mweel[ind];
                this.mweel[ind]=0;
                return true;
            } else {
                return false;}

        }
        pinchzoom=function(ind){
            if(this.mweel[ind]==undefined)return false;
            if(this.mweel[ind]!=0&&this.mstate[ind]==6){
                
                //alert(this.mweel[ind])
                this.wweel =this.mweel[ind]
//console.log("zm "+this.wweel)
                this.mweel[ind]=0;
                this.mstate[ind]=0
                return true;
            } else {
                return false;}

        }
  
changed=(ind)=> {
            if(this.chd[ind]) {
                this.chd[ind]=false;
                return true;
            } else {
                return false;
            }
 }
 prind=0;//index of pressed
 timems=0;//ms
 
        pressed=(ind)=> {
            
           
          if(this.key==0&&this.delay<200){
              
           let hd=this.clcount;
              this.clcount=this.drcount;
               if(this.isin(ind)){
                    //if(ind==10)alert(this.clcount);
                   this.drcount=0;
                   this.clcount=0; this.key=0;
               return true;} else {this.clcount=0;return false;}
          }
        }
       

        







        scroll=function(ind) {
        
             if(isNaN(this.mvx)||isNaN(this.mvy)){this.mvx=0;this.mvy=0;return;}
                e.dx[ind] +=this.mvx;
                e.dy[ind] +=this.mvy; 
//console.log("ind="+ind+" "+this.wi );

                
             //    console.log("move="+this.mvx+" "+this.mvy);

        }

        block=function(wind) {
        
           if((-e.dx[wind]+(e.x2[wind]-e.x1[wind]))>e.sx[wind]) e.dx[wind]=-(e.sx[wind]-(e.x2[wind]-e.x1[wind]));
           if((-e.dy[wind]+(e.y2[wind]-e.y1[wind]))>e.sy[wind]) e.dy[wind]=-(e.sy[wind]-(e.y2[wind]-e.y1[wind]));
           if(e.dx[wind]>0) e.dx[wind]=0;
           if(e.dy[wind]>0) e.dy[wind]=0;
        }


        selecttodrag=function(ind) {
            e.sdx[ind]=e.x1[ind]// / e.zm[e.pindex];
            e.sdy[ind]=e.y1[ind] /// e.zm[e.pindex];
        }

        processcrolling=function(wind) {

           // 
          if(this.noscroll==false){ //console.log(wind+" "+this.wi)
            if(this.mousedrag(wind)){ 
               
              

                this.scroll(wind);
            }
            
          }
          
        }
        processzooming=function(wind) {
            if(this.mouseweel(wind)){
            if(this.wweel<0){
                this.zm[wind]*=1.05
              //  console.log(e.zm[e.pindex])
            }else if(this.wweel>0){
                this.zm[wind]*=0.95
               // console.log(e.zm[e.pindex])
            }
            
            }

            if(this.pinchzoom(wind)){
                
                this.zm[wind]=this.wweel;
//console.log("pz "+this.pinchd+" "+this.wweel)
                
                
            }



        }

NOZOOM=99;
stime=0;
scrollbox=false;

clcount=0;
cli=[];
clm=[];
clx=[];
cly=[]; 

addcl=function(ind,x,y){
    //console.log(this.type[ind]+" "+x+" "+y+" ")
   this.clcount++;
this.cli[this.clcount]=ind;
this.clx[this.clcount]=this.bitmaps[this.bit[ind]];


}


//если использовать mousedown взаместо pressed //первые условия pressed срабатывают


isin=function(ind){
 let yes=false;
 
 
 
for(let i=1;i<=this.clcount;i++){
     if((this.cli[i]==ind)&&(this.clx[i]==this.bitmaps[this.bit[ind]])){ yes=true;break; }
}
 return yes;
}


/*
isin=function(ind){
 let yes=false;

 for(let i=1;i<=this.clcount;i++){

     
   if(this.cli[i]==ind){

       yes=true;break;}
    
 }
 
 
 
 return yes;
}
*/



mousedownevent=function(x,y){
  
   this.key=1;
   this.timems=performance.now();
   this.x=x;
   this.y=y;
   this.stx=x;
   this.sty=y;
   
 for(let i=1;i<=this.count;i++){
    
   if(this.type[i]==8){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.addcl(i,x,y);
          this.wi=i;
let ii=this.wi+1;//console.log("click")
   if(this.type[ii]==8||this.type[ii]==5)return;
   let inx=0;
   let iny=0;
     inx=((this.x-this.x1[this.wi])/this.zm[this.wi])-this.dx[this.wi];
     iny=((this.y-this.y1[this.wi])/this.zm[this.wi])-this.dy[this.wi];
    
    
      //  inx=this.x//(this.x-this.x1[this.wi]);
       // iny=this.y//(this.y-this.y1[this.wi]);
   
  // console.log("inx= "+inx+" iny= "+iny)
   do{
    if(this.type[ii]==8||this.type[ii]==5)break;
    if(inx>this.x1[ii]&&inx<this.x2[ii]&&iny>this.y1[ii]&&iny<this.y2[ii]){
        //console.log("add  "+this.type[ii])
        this.addcl(ii,this.x,this.y);
    }
    ii++;
   }while(this.type[ii]!=8&&this.type[ii]!=5&&ii<=this.count);
}
//in
     
     
   }else
   if(this.type[i]==5){
       //console.log("x="+x+" y="+y+" "+this.x1[i]+" "+this.y1[i]+" "+this.x2[i]+" "+this.y2[i])
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
        this.addcl(i,x,y);
        this.wi=i;
     
     
     
let ii=this.wi+1;//console.log("click")
   if(this.type[ii]==8||this.type[ii]==5)return;
   let inx=0;
   let iny=0;
     
    
      inx=this.x//(this.x-this.x1[this.wi]);
      iny=this.y//(this.y-this.y1[this.wi]);
   
  // console.log("inx= "+inx+" iny= "+iny)
   do{
    if(this.type[ii]==8||this.type[ii]==5)break;
    if(inx>this.x1[ii]&&inx<this.x2[ii]&&iny>this.y1[ii]&&iny<this.y2[ii]){
        //console.log("add  "+this.type[ii])
        this.addcl(ii,this.x,this.y);
    }
    ii++;
   }while(this.type[ii]!=8&&this.type[ii]!=5&&ii<=this.count);

     
     
     }//in
   }// type5
 }//for
    



   





   
}



delay=0;
drcount=0;
mouseupevent=function(x,y){
    //console.log("UP")
    
   this.delay=performance.now()-this.timems;
    
    this.drcount=this.clcount;
  this.key=0;
  this.clcount=0;
  
   
   this.stx=this.x;
   this.sty=this.y; 
   this.noscroll=false;
   this.wi=0;
   this.dri=0;
   this.mvx=0;
   this.mvy=0;

}


mousemoveevent=function(e,x,y){

if(e.buttons==0&&performance.now()-this.timems<60)return false;

   this.key=2;
  
   this.x=x;
   this.y=y;
 
   for(let i=this.count;i>0;i--){
   if(this.type[i]==8){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.nad=i;break;
          
     }
   }else
   if(this.type[i]==5){
     if(x>this.x1[i]&&x<this.x2[i]&&y>this.y1[i]&&y<this.y2[i]){
          this.nad=i;break;
          
     }
   }

 }

}


drawscrollbar=function (ci,c) {
    
    let wdx=this.dx[ci];
    let wdy=this.dy[ci];
    let wzm=this.zm[ci];
                    c.scale(wzm,wzm)
                    c.translate(wdx,wdy);
let i=ci;
do{
 i++;

 if (this.type[i] == 3) { //BITMAP
                 
                    //if(cy1>0-hh&&cy2<h+hh&&cx1>0-(ww)&&cx2<w+ww){
                    if (this.bit[i]!=-1) {
                        if (this.bitmaps[this.bit[i]] != null&&this.bitmaps[this.bit[i]].width>0) {
                            var bw = this.bitmaps[this.bit[i]].width;
                            var bh = this.bitmaps[this.bit[i]].height;
           
                           var ssx=0;
                          var ssy=0;
      
                         if(this.rot[i]!=0){
                             ssx=this.cx[i];
                             ssy=this.cy[i];
                             c.save();
                             c.translate(ssx,ssy);
                             c.rotate(this.rot[i]*(Math.PI / 180)); // 90
                           }
                            c.drawImage(this.bitmaps[this.bit[i]], 0, 0, bw, bh, this.x1[i]-ssx, this.y1[i]-ssy, this.x2[i]-this.x1[i], this.y2[i]-this.y1[i]);
                            if(this.rot[i]!=0)c.restore();
                        
                        
                        
                        // c.fillText(this.bit[i],this.x1[i]+ 70,  this.y1[i]+70);
                        
                         
                         //c.drawImage(this.bitmaps[this.bit[i]],this.x1[i], this.y1[i]);

                        }}

                }



}while(i<1024&&this.type[i]!=8&&this.type[i]!=5)




}




cropcanvastobase64=function (ci) {
    let tcanvas = document.createElement("canvas");
    tcanvas.width=this.x2[ci]-this.x1[ci];
    tcanvas.height=this.y2[ci]-this.y1[ci];
    let c = tcanvas.getContext("2d"); 

    this.drawscrollbar(ci,c)
    
    var dataURL = tcanvas.toDataURL("image/jpeg", 0.5);



return dataURL;

}



lastx=0
lasty=0
        constructor(canvas) {
            this.ctx=canvas.getContext('2d');

            var canvas = document.getElementById("canvasOne");
canvas.width  =window.innerWidth;//innerHeight*0.55;
canvas.height =window.innerHeight;
//canvas.setAttribute('style', "position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:2px solid blue");
            this.w=canvas.width;
            this.h=canvas.height;
            this.tcanvas = document.createElement("canvas");
            
            


//TOUCH
canvas.addEventListener('touchstart',  (e)=>  {

if (e.touches.length === 2) {

    e.preventDefault(); // Prevent page scroll
//console.log("st2")



    // Calculate where the fingers have started on the X and Y axis
    this.pinchx = (e.touches[0].pageX + e.touches[1].pageX) / 2;
    this.pinchy = (e.touches[0].pageY + e.touches[1].pageY) / 2;
    this.pinchd = this.distance(e);
for (var i = 1; i < this.count; i++) {
        if(this.type[i]==8) {
            var jmx=e.touches[0].pageX
            var jmy=e.touches[0].pageY

            if(jmx>this.x1[i]&&jmy>this.y1[i]&&jmx<this.x2[i]&&jmy<this.y2[i]) {
                this.szm=this.zm[i];
            }


        }
    }
    
    
    
    
}else{

    e.preventDefault();
//console.log("st1
this.lastx=e.touches[0].pageX
this.lasty=e.touches[0].pageY

//con