image-editor/src/Viewport.js

'use strict';
/* globals $, fabric */

var FrameHandler = require('./FrameHandler');
var GoreHandler = require('./GoreHandler');
var RulerHandler = require('./RulerHandler');
var util = require('./util');

function Viewport(canvas) {
  var _beams = [];
  var _borderWidth = 2;
  var _data = null;
  var _rect;
  var self = this;

  /**
     * Render the diagonal lines from viewport to edge of the canvas
     */
  function drawBeams() {
    _beams.forEach(function (beam) {
      canvas.remove(beam);
    });

    _beams = [];

    // TOP LEFT
    _beams.push(new fabric.Line(
      [_rect.left, _rect.top, _rect.left - _rect.top, -1], {
        stroke: '#fff',
        strokeWidth: 2,
      }
    ));

    // TOP RIGHT
    _beams.push(_beams[0].clone().set({ flipX: true, left: _rect.left + _rect.width }));
    // BOTTOM RIGHT
    _beams.push(_beams[1].clone().set({ flipY: true, top: _rect.top + _rect.height }));
    // BOTTOM LEFT
    _beams.push(_beams[0].clone().set({ flipY: true, top: _rect.top + _rect.height }));

    _beams.forEach(function (o) {
      canvas.add(o);
      o.bringToFront();
    });
  }

  /**
     * Gets an object with min / max values for each axis, based on the bounds
     * of passed fabric.Rect
     * @param  {fabric.Rect} rect
     * @return {Object}
     */
  function calcMinMaxBoundsForRect(rect, img) {
    return {
      left: {
        min: rect.left + rect.width - (img.width * img.scaleX),
        max: rect.left
      },
      top: {
        min: rect.top + rect.height - (img.height * img.scaleY),
        max: rect.top
      }
    };
  }

  /**
     * Applies viewport to page
     */
  function apply() {
    var cropData = canvas.getImageData().getCropData();
    canvas.remove(_rect);

    _rect = new fabric.Rect({
      evented: false,
      fill: 'transparent',
      width: _data.width,
      height: _data.height,
      stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
      strokeWidth: _borderWidth,
    });

    _rect.width += _borderWidth;
    _rect.height += _borderWidth;
    _rect.addTo(canvas).center().setCoords();

    if (cropData) {
      var viewportBounds = _rect.getInsideBoundingRect();

      // Calculate the new position after screenresize and when the
      // image already has been cropped to a certain position.
      var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
      var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);

      canvas.getImage().set({ left: left, top: top }).setCoords();
    } else {
      canvas.getImage().center().setCoords();
      canvas.getImageData().setCropData();
    }

    if(canvas.__type !== 'wallpaper') {
      canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
      canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
    } else {
      canvas.getApertures().disable();
    }

    if (canvas.__type !== 'canvas') {
      drawBeams();
    } else {
      self.setFrame(canvas.__canvasFrameType);
    }

    canvas.getDragbars().apply();
    // Apertures sometimes overlaps the viewports bounding rect.
    // Solve this by bringing it to the front after apertures are applied.
    _rect.bringToFront();
  }

  this.canvas = canvas;

  this.getBounds = function () {
    return _rect ? _rect.getInsideBoundingRect() : null;
  };

  /**
     * @return {Viewport}
     */
  this.reset = function () {
    if (_data) {
      return this.set(_data.dim.width, _data.dim.height, _data.dim.units);
    }
    return this;
  };

  /**
     * @param  {Number} width
     * @param  {Number} height
     * @param  {string} units
     * @return {Viewport}
     */
  this.set = function (width, height, units) {
    if (!width || !height) {
      return this;
    }

    _data = util.calcCrop(canvas.getImage(), width, height, units);

    var cropData = canvas.getImageData().getCropData();
    var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));

    if (!isAspectTheSame) {
      canvas.getImageData().removeCropData();
    }

    apply();
    this.getGores().reset();
    this.getRulers().reset();

    if (canvas.getImage().__cropped && !isAspectTheSame) {
      canvas.getApertures().setTransparent(true);

      // Trigger event to tell the image needs to be dragged.
      $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
    }

    canvas.getButtonMenu().bringToFront();

    return this;
  };

  /**
     * @param  {string} frameType white|black|image|none
     * @return {Viewport}
     */
  this.setFrame = function (frameType) {
    this.getFrameHandler().setFrames(frameType);

    var buttons = canvas.getButtonMenu().getItems();
    if (frameType === 'none') {
      buttons[0].setDisabled(true);
    }
    else {
      buttons[0].setDisabled(false);
    }
    canvas.getButtonMenu().bringToFront();

    canvas.refresh3dView();
  };

  this.getData = function () {
    return _data;
  };

  var _frameHandler = null;

  this.getFrameHandler = function () {
    return _frameHandler || (_frameHandler = new FrameHandler(this));
  };

  this.getGores = function () {
    return this.__goreHandler || (this.__goreHandler = new GoreHandler(this));
  };

  this.getRulers = function () {
    return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this));
  };

}

module.exports = Viewport;