image-editor/src/js/components/ImageEditor/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 $document = $(document);

var Canvas = fabric.util.createClass(fabric.Canvas, {
    initialize: function (id) {
        this.callSuper('initialize', id, {
            enableRetinaScaling: true,
            renderOnAddRemove: false,
            stateful: false,
            backgroundColor: '#d4d4d4',
            preserveObjectStacking: true,
            selection: false,
            width: 1253,
            height: 600
        });

        this.on('mouse:up', function () {
            if (this.getImage().__cropped && !this.get3dHandler().isEnabled()) {
                this.getApertures().setTransparent(false);

                this.getImage().transformation.setCropData();
                // Trigger event to tell the image has been dragged.
                $document.trigger('PIE:dragged');
            }
            this.renderAll();
        });
    },

    resize: function (args) {
        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();
    },

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

    /**
     * @return {String}
     */
    get3dUrl: function () {
        var imageData = this.getImage().transformation.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 {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;
        }
        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.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().getItems().forEach(function(button) {
            var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d;
            button.setActive(buttonState);
        });

        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;