tweb-i2p/src/lib/cropper.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

function resizeableImage(originalImage: HTMLImageElement, canvas?: HTMLCanvasElement) {
  let cropComponent: HTMLDivElement, 
    container: HTMLDivElement, 
    cropImage: HTMLImageElement, 
    event_state: Partial<{  
      mouse_x: number,   
      mouse_y: number,   
      container_width: number,  
      container_height: number,  
      container_left: number,  
      container_top: number
    }> = {}, 
    keyZoomValue = 4.0, 
    MINWIDTH = 50, 
    MINHEIGHT = 50, 
    CROPWIDTH = 200, 
    CROPHEIGHT = 200, 
    cropLeft = 0, 
    cropTop = 0, 
    cropWidth = 0, 
    cropHeight = 0,
    scaledRatio = 0;
  
  if(originalImage.complete) init();
  else originalImage.onload = init;
  
  function removeHandlers() {
    container.removeEventListener('mousedown', startMoving);
    container.removeEventListener('touchstart', startMoving);
    container.removeEventListener('wheel', resizing);
    
    document.removeEventListener('mouseup', endMoving);
    document.removeEventListener('touchend', endMoving);
    document.removeEventListener('mousemove', moving);
    document.removeEventListener('touchmove', moving);
    document.removeEventListener('keypress', keyHandler);

    cropComponent.remove();
    container.remove();
    cropImage.remove();
  }
  
  function addHandlers() {
    container.addEventListener('mousedown', startMoving, false);
    container.addEventListener('touchstart', startMoving, false);
    container.addEventListener('wheel', resizing, false);
    
    document.addEventListener('keypress', keyHandler, false);
    //document.querySelector('.btn-crop').addEventListener('click', openCropCanvasImg);
  }
  
  function init() {
    originalImage.classList.add('crop-blur');
    originalImage.draggable = false;
    
    cropImage = new Image();
    cropImage.src = originalImage.src;
    cropImage.draggable = false;
    cropImage.classList.add('crop-overlay-image');
    
    if(!canvas) {
      canvas = document.createElement('canvas');
    }
    
    cropComponent = document.createElement('div');
    cropComponent.classList.add('crop-component');
    
    container = document.createElement('div');
    container.classList.add('crop-overlay');
    
    const overlayColor = document.createElement('div');
    overlayColor.classList.add('crop-overlay-color');
    
    cropComponent.appendChild(container);
    const wrapper = originalImage.parentNode as HTMLElement;
    wrapper.appendChild(cropComponent);
    cropComponent.appendChild(cropImage);
    cropComponent.appendChild(originalImage);
    cropComponent.appendChild(overlayColor);
    container.appendChild(cropImage);

    cropImage.style.maxWidth = originalImage.width + 'px';

    scaledRatio = originalImage.naturalWidth / originalImage.offsetWidth;
    
    const left = originalImage.offsetWidth / 2 - CROPWIDTH / 2;
    const top = originalImage.offsetHeight / 2 - CROPHEIGHT / 2;
    
    updateCropSize(CROPWIDTH, CROPHEIGHT);
    updateCropImage(left, top);
    updateContainer(left, top);
    addHandlers();
    //crop();
  }
  
  function updateCropSize(width: number, height: number) {
    cropWidth = width * scaledRatio;
    cropHeight = height * scaledRatio;

    container.style.width = width + 'px';
    container.style.height = height + 'px';
  }
  
  function updateCropImage(left: number, top: number) {
    cropTop = top * scaledRatio;
    cropLeft = left * scaledRatio;

    cropImage.style.top = -top + 'px';
    cropImage.style.left = -left + 'px';
  }
  
  function updateContainer(left: number, top: number) {
    container.style.top = top + 'px';
    container.style.left = left + 'px';
  }
  
  // Save the initial event details and container state
  function saveEventState(e: any) {
    event_state.container_width = container.offsetWidth;
    event_state.container_height = container.offsetHeight;
    
    event_state.container_left = container.offsetLeft;
    event_state.container_top = container.offsetTop;
    
    event_state.mouse_x = (e.clientX || e.pageX || e.touches && e.touches[0].clientX) + window.scrollX;
    event_state.mouse_y = (e.clientY || e.pageY || e.touches && e.touches[0].clientY) + window.scrollY;
  }
  
  function imgZoom(zoom: number) {
    zoom = zoom * Math.PI * 2
    let newWidth = Math.floor(container.clientWidth + zoom), 
      newHeight = Math.floor(container.clientHeight + zoom), 
      w = cropImage.clientWidth, 
      h = cropImage.clientHeight, 
      left: number, 
      top: number, 
      right: number, 
      bottom: number;
    
    if(newWidth < MINWIDTH) {
      return;
    } else if(newWidth > w) {
      return;
    }
    
    left = container.offsetLeft - (zoom / 2);
    top = container.offsetTop - (zoom / 2);
    right = left + newWidth;
    bottom = top + newHeight;
    
    if(left < 0) left = 0;
    if(top < 0) top = 0;

    if(right > w) return;
    if(bottom > h) return;

    updateCropSize(newWidth, newWidth);
    updateCropImage(left, top);
    updateContainer(left, top);
    //crop();
  }
  
  function keyHandler(e: KeyboardEvent) {
    e.preventDefault();
    
    switch (String.fromCharCode(e.charCode)) {
      case '+' :
      imgZoom(keyZoomValue);
      break;
      case '-' :
      imgZoom(-keyZoomValue);
      break;
    }
  }
  
  function resizing(e: any) {
    e.preventDefault();
    imgZoom(e.deltaY > 0 ? 1 : -1);
  }
  
  function startMoving(e: MouseEvent | TouchEvent) {
    e.preventDefault();
    e.stopPropagation();
    
    saveEventState(e);
    
    document.addEventListener('mousemove', moving);
    document.addEventListener('touchmove', moving);
    document.addEventListener('mouseup', endMoving);
    document.addEventListener('touchend', endMoving);
  }
  
  function endMoving(e: MouseEvent | TouchEvent) {
    e.preventDefault();
    
    document.removeEventListener('mouseup', endMoving);
    document.removeEventListener('touchend', endMoving);
    document.removeEventListener('mousemove', moving);
    document.removeEventListener('touchmove', moving);
  }
  
  function moving(e: any) {
    let currentTouch = {x: 0, y: 0}, 
      left: number, 
      top: number, 
      w: number, 
      h: number;
    
    e.preventDefault();
    e.stopPropagation();
    
    currentTouch.x = e.pageX || e.touches && e.touches[0].pageX;
    currentTouch.y = e.pageY || e.touches && e.touches[0].pageY;
    
    left = currentTouch.x - (event_state.mouse_x - event_state.container_left);
    top = currentTouch.y - (event_state.mouse_y - event_state.container_top);
    w = container.offsetWidth;
    h = container.offsetHeight;
    
    if(left < 0) left = 0;
    else if(left > cropImage.offsetWidth - w) left = cropImage.offsetWidth - w;

    if(top < 0) top = 0;
    else if(top > cropImage.offsetHeight - h) top = cropImage.offsetHeight - h;
    
    updateCropImage(left, top);
    updateContainer(left, top);
    //crop();
  }

  function crop() {
    canvas.width = cropWidth;
    canvas.height = cropHeight;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImage,
      cropLeft, cropTop,
      cropWidth, cropHeight,
      0, 0,
      cropWidth, cropHeight
    );
  }
  
  return {crop, removeHandlers};
}

export default resizeableImage;