image-editor/src/Canvas.js

'use strict';

var config = require('./config');
var util = require('./util');
var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');
var ThreeDHandler = require('./3dHandler');
var MirrorHandler = require('./MirrorHandler');
var ImageDataHandler = require('./ImageDataHandler');

var $document = $(document);

/**
 * Canvas is using fabric to create the canvas and initiate it with its initial settings.
 * It is also here most of the interaction is taking place. And most files are connected to this file.
 * Fe. getDragbars method can be called from most places as the Canvas class is available in most places.
 */
var Canvas = fabric.util.createClass(fabric.Canvas, {
    initialize: function (id, dimensions) {
        this.callSuper('initialize', id, {
            enableRetinaScaling: true,
            renderOnAddRemove: false,
            // Allow touch scrolling on touch-devices larger than mobile screen sizes.
            allowTouchScrolling: !util.isMobile(),
            stateful: false,
            backgroundColor: '#d2d2d2',
            preserveObjectStacking: true,
            selection: false,
            width: dimensions.width,
            height: dimensions.height
        });

        // Eventhandler for mouseup events on the whole canvas.
        // This should be rewritten a bit to not have that many events after the image has been cropped.
        this.on('mouse:up', function () {
            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
                this.getApertures().setTransparent(false);

                this.getImageData().setCropData();
                if (!util.isMobile()) {
                    this.enableScroll();
                }
                // Trigger event to tell the image has been dragged.
                $document.trigger('PIE:dragged');
            }
            this.renderAll();
        });
    },

    resize: function (args) {
        args = args || { height: this.height, width: this.width};

        this.setHeight(args.height);
        this.setWidth(args.width);
        this.getButtonMenu().render();
        if (this.get3dHandler().isEnabled()) {
            this.get3dHandler().refreshImage();
        } else {
            this.refreshImage(this.getResizedImage(this.getImage()));
            this.getViewport().reset();
        }
        this.sendToBack(this.getImage());
        this.getDragbars().resetPosition();
        this.renderAll();
    },

    disableScroll: function() {
        this.set({
            allowTouchScrolling: false
        });
        return this;
    },

    enableScroll: function() {
        this.set({
            allowTouchScrolling: true
        });
        return this;
    },

    get3dHandler: function () {
      return this.__3dHandler ||
          (this.__3dHandler = new ThreeDHandler(this));
    },

    /**
     * @return {String}
     */
    get3dUrl: function () {
        var imageData = this.getImageData().getData();
        var params = [
            'h=400',
            'canvas[edge]=' + imageData.edge,
            'crop[w]=' + imageData.width,
            'crop[h]=' + imageData.height,
            'crop[x]=' + imageData.x,
            'crop[y]=' + imageData.y,
        ];

        if (imageData.mirrored) {
            params.push('mirror=1');
        }

        return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
    },

    getApertures: function () {
        return this.__aperturehandler ||
            (this.__aperturehandler = new ApertureHandler(this));
    },

    /**
     *
     * @returns {DragbarHandler}
     */
    getDragbars: function () {
        return this.__dragbars ||
            (this.__dragbars = new DragbarHandler(this));
    },

    /**
     * @return {fabric.Image}
     */
    getImage: function () {
        return this.__image;
    },

    /**
     * @return {MirrorHandler}
     */
    getMirror: function () {
        return this.__mirror ||
            (this.__mirror = new MirrorHandler(this.getImage()));
    },

    /**
     * @return {MirrorHandler}
     */
    getImageData: function () {
        return this.__imageData ||
            (this.__imageData = new ImageDataHandler(this.getImage()));
    },

    /**
     * @return {Viewport}
     */
    getViewport: function () {
        return this.__viewport ||
            (this.__viewport = new Viewport(this));
    },

    /**
     * Gets the menu for this instance
     * @returns {ButtonMenu}
     */
    getButtonMenu: function (settings) {
        if (!this.__buttonMenu) {
            var defaults = config.buttonMenu[this.__type];
            this.__buttonMenu = new ButtonMenu(this, $.extend({}, defaults, settings));
        }
        return this.__buttonMenu;
    },

    /**
     * Reloads the 3D view, if it is present
     * @return {Canvas}
     */
    refresh3dView: function () {
        if (this.get3dHandler().isEnabled()) {
            this.toggle3D(true);
        }
        return this;
    },

    /**
     * @return {Canvas}
     */
    removeImage: function () {
        if (!this.__image) {
            return this;
        }
        this.__imageData = null;
        return this.remove(this.__image);
    },

    refreshImage: function(img) {
        this.__image = img;
        return this;
    },

    /**
     * @param  {fabric.Image} img
     * @return {Canvas}
     */
    setImage: function (img) {
        this.removeImage();
        this.__image = img;
        this.__image.__dragged = false;
        this.__image.__cropped = false;
        this.__image.addTo(this).center().on('mousedown', function () {
            img.canvas.getApertures().setTransparent(true);
        }).setCoords();
        this.getViewport().reset();
        return this;
    },

    getResizedImage: function(img) {
        // Calculate maxHeight and maxWidth of the 3d image
        // and scale the image accoring to those values
        var maxHeight = this.getHeight() - 100;
        var maxWidth = this.getWidth() - 100;

        img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
        img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width * img.scaleX);

        return img;
    },

    toggle3D: function (showAs3d) {

        this.getButtonMenu().setButtonActive('toggle3d', showAs3d);

        if (!showAs3d) {
            return this.get3dHandler().disable();
        }

        $document.trigger('PIE:image-start-load');

        $.ajax({
            url: this.get3dUrl(),
            crossDomain: true,
            type: "HEAD",
            cache: true,
        }).done(function() {
            fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
                if (!img._element) {
                    $document.trigger('PIE:image-error-load');
                    return;
                }

                this.get3dHandler().setImage(img);
                $document.trigger('PIE:image-end-load');
            }.bind(this));
        }.bind(this));
    },
});

module.exports = Canvas;