GraphEditor/js/magnifying_lens.js

function magnifying(imgID, zoom) {
	window.bgcolor = "#292930";
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);

  glass = document.createElement("CANVAS");
  glass.setAttribute("class", "img-magnifier-glass");
  glass.style.display = "none";   
  glass.setAttribute("width", "100");  
  glass.setAttribute("height", "100");

  img.parentElement.appendChild(glass);

	let scene = glass.getContext("2d");
	// scene.textAlign = "center";
	// scene.textBaseline = "middle";
	// scene.font = "18px Arial";
	window.lens = document.querySelector(".img-magnifier-glass");

	let field = [];
	let colors = {
		"free" : "white",
		"head" : "black",
		"body" : "orange",
		"apple" : "red"
	}
	let lens_width = window.getComputedStyle(window.lens).width.split("px")[0];
	let cellSize = zoom;	
	let fieldWidth = Math.round(lens_width / cellSize);
	let fieldHeight = Math.round(lens_width / cellSize);

	for (let x = 0; x < fieldWidth; x++){
		field[x] = [];
		for(let y = 0; y < fieldWidth; y++){
			field[x][y] = new Cell(scene, x, y, cellSize, "");
		}
	}

  document.addEventListener("click", function(e){
  	// console.log(e.target.classList);
  });  

  document.querySelector(".canvas-container").addEventListener("mousemove", function(e){
  	if(window.lens_move){
  		moveMagnifier(e);
  	}
  });

  // glass.addEventListener("touchmove", moveMagnifier);
  // img.addEventListener("touchmove", moveMagnifier);

  function moveMagnifier(e) {
    var pos, x, y;

    e.preventDefault();
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;

    if(!x && !y){
    	return;
    }

    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}

	  w = glass.offsetWidth;
	  h = glass.offsetHeight;

	  var luft = element_ico_size / 2 + 14;

    var item = canvas.getActiveObject();
    if(item && !item.is_background && item.line){   	
    	var param = text2Angle(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
    	var alpha = param.ang;

    	var gap = Math.sqrt(w*w*2) / 2 + 15;

    	if(item.pointType == "arrow_start"){
    		var sign = -1;
    	}
    	if(item.pointType == "arrow_end"){
    		var sign = 1;
    	}    	
    	var direction = Math.sign(Math.cos(alpha*Math.PI/180));
			var param = getRadiusCoords(x, y, sign*gap, (alpha + 45 * direction) * Math.PI/180);		
      glass.style.left = param.x + "px";            
      glass.style.top = param.y + "px";  	
    }
    else{
			glass.style.left = x + "px";
			glass.style.top = y + "px";     	
    }
  }

  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();

    if(!mouse_down_flag){
	    x = e.pageX - a.left;
	    y = e.pageY - a.top;
			var coords = {x : x, y : y};
    }


    var item = canvas.getActiveObject();
    if(mouse_down_flag && item && (item.pointType == "arrow_start" || item.pointType == "arrow_end") ){
    	var t = canvas.viewportTransform;
    	if(item.pointType == "arrow_start"){
    		x = t[0] * item.line.x1 + t[4];
    		y = t[3] * item.line.y1 + t[5];
    	}
    	if(item.pointType == "arrow_end"){
    		x = t[0] * item.line.x2 + t[4];
    		y = t[3] * item.line.y2 + t[5];
    	} 
    }

		if(mouse_down_flag){
			if(x && y){
				var coords = {x : x - a.left, y : y - a.top}; 				
			}
			else{
				var coords = {x : 0, y : 0};				
			}
		}	   
    drawCell(  Math.round(x - fieldWidth/2),  Math.round(y - fieldHeight/2), fieldWidth, fieldHeight, field );

    return coords;
  }

	function drawCell(x0, y0, x1, y1, field){

		var ctx = document.querySelector("#intro-canvas").getContext("2d");
	
		var imgData = ctx.getImageData(x0 + Math.abs(1 - window.devicePixelRatio) * x0, y0 + Math.abs(1 - window.devicePixelRatio) * y0, x1, y1);
		var pix = imgData.data;				

		for(var i = 0; i < pix.length; i+= 4){
      var r = pix[i],
          g = pix[i + 1],
          b = pix[i + 2];
      var y = Math.floor(i / (4 * x1));
      var x = i / 4 - x1 * y;
      if(pix[i + 3] == 0){ // альфа канал
	      field[x][y].value = bgcolor; // заменяем прозрачные пиксели на цвет фона     	
      }
      else{
	      field[x][y].value = `rgb(${r}, ${g}, ${b})`;       	
      }
		}
	}

}
export {magnifying};