painterro/js/zoomHelper.js

HTML5 image editing widget (js paint plugin)

export default class ZoomHelper {
  constructor(main) {
    this.main = main;
    this.zomer = main.wrapper.querySelector('.ptro-zoomer');
    this.zomerCtx = this.zomer.getContext('2d');
    this.canvas = this.main.canvas;
    this.ctx = this.main.ctx;
    this.wrapper = this.main.wrapper;

    this.gridColor = this.zomerCtx.createImageData(1, 1);
    this.gridColor.data[0] = 255;
    this.gridColor.data[1] = 255;
    this.gridColor.data[2] = 255;
    this.gridColor.data[3] = 255;

    this.gridColorRed = this.zomerCtx.createImageData(1, 1);
    this.gridColorRed.data[0] = 255;
    this.gridColorRed.data[1] = 0;
    this.gridColorRed.data[2] = 0;
    this.gridColorRed.data[3] = 255;

    this.captW = 7;
    this.middle = Math.ceil(this.captW / 2) - 1;
    this.periodW = 8;

    this.fullW = this.captW * (this.periodW);
    this.halfFullW = this.fullW / 2;
    this.zomer.setAttribute('width', this.fullW);
    this.zomer.setAttribute('height', this.fullW);
    this.cursor = this.wrapper.style.cursor;
  }

  handleMouseMove(e) {
    if (this.main.colorPicker.choosing && !e.altKey) {
      if (!this.shown) {
        this.shown = true;
        this.zomer.style.display = 'block';
        this.cursor = this.wrapper.style.cursor;
        this.wrapper.style.cursor = 'none';
      }
      const scale = this.main.getScale();
      const cord = [
        (e.clientX - this.main.elLeft()) + this.main.scroller.scrollLeft,
        (e.clientY - this.main.elTop()) + this.main.scroller.scrollTop,
      ];

      let x = cord[0] * scale;
      x = x < 1 ? 1 : x;
      x = x > this.main.size.w - 1 ? this.main.size.w - 1 : x;
      let y = cord[1] * scale;
      y = y < 1 ? 1 : y;
      y = y > this.main.size.h - 1 ? this.main.size.h - 1 : y;

      const captW = this.captW;
      const periodW = this.periodW;

      for (let i = 0; i < captW; i += 1) {
        for (let j = 0; j < captW; j += 1) {
          const d = this.ctx.getImageData((x + i) - this.middle, (y + j) - this.middle, 1, 1);
          for (let ii = 0; ii < periodW; ii += 1) {
            for (let jj = 0; jj < periodW; jj += 1) {
              if (ii === periodW - 1 || jj === periodW - 1) {
                if ((i === this.middle && j === this.middle) ||
                  (i === this.middle && j === this.middle - 1 && jj === periodW - 1) ||
                  (i === this.middle - 1 && j === this.middle && ii === periodW - 1)) {
                  this.zomerCtx.putImageData(
                    this.gridColorRed, (i * periodW) + ii,
                    (j * periodW) + jj);
                } else {
                  this.zomerCtx.putImageData(
                    this.gridColor, (i * periodW) + ii,
                    (j * periodW) + jj);
                }
              } else {
                this.zomerCtx.putImageData(d, (i * periodW) + ii, (j * periodW) + jj);
              }
            }
          }
        }
      }
      this.zomer.style.left = `${e.clientX - this.wrapper.documentOffsetLeft - this.halfFullW}px`;
      this.zomer.style.top = `${e.clientY - this.wrapper.documentOffsetTop - this.halfFullW}px`;
    } else if (this.shown) {
      this.hideZoomHelper();
    }
  }

  hideZoomHelper() {
    this.zomer.style.display = 'none';
    this.wrapper.style.cursor = this.cursor;
    this.shown = false;
  }

  static html() {
    return '<canvas class="ptro-zoomer" width="" height="0"></canvas>';
  }
}