image-editor/src/ImageEditor.js

'use strict';

var Canvas = require('./Canvas');
var util = require('./util');

function ImageEditor(canvasId, args) {
    var _canvas;

    var _settings = $.extend({
        // Type defaults to wallpaper
        type: 'wallpaper',
        // Default texts on the buttons
        buttons: {
            showThreeD: '3d',
            hideThreeD: 'Flat',
            showMurals: 'Show Murals Panel',
            hideMurals: 'Hide Murals Panel',
            showRulers: 'Show Ruler',
            hideRulers: 'Hide Ruler',
            showFullscreen: 'Fullscreen',
            exitFullscreen: 'Exit Fullscreen',
        },
        // Default dimensions
        dimensions: {
            width: 800,
            height: 600
        },
        // Default unit
        unit: 'cm',
        isVisibleFullscreenButton: true
    }, args);


    // Initialize canvas
    _canvas = new Canvas(canvasId, _settings.dimensions);

    // Let Canvas know which type it is, canvas or wallpaper since it is
    // accessible for all objects contained within.
    _canvas.set({
        __type: _settings.type
    });

    // Adding buttons to the canvas depending on which type is active.
    // It might be better that this resides somewhere else, either in Canvas or
    // during the initialization of the image editor.
    if (_canvas.__type === 'canvas') {
        _canvas.getButtonMenu()
            .addItem('toggle3d', [_settings.buttons.showThreeD, _settings.buttons.hideThreeD], function () {
                _canvas.toggle3D(this.isActive());
            });
    } else {
        _canvas.getButtonMenu()
            .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
                _canvas.getViewport().getGores().enable(this.isActive());
            })
            .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                _canvas.getViewport().getRulers().enable(this.isActive());
            });
    }

    if (util.supportsFullscreen() && _settings.isVisibleFullscreenButton) {
        _canvas.getButtonMenu()
            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.exitFullscreen], function () {
                util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
            });
    }

    _canvas.getButtonMenu().render();

    // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
    $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

        if (isFullscreen) {
            return;
        }

        _canvas.getButtonMenu().getItems().forEach(function(button) {
            if (button.getId() === 'toggleFullscreen') {
                button.setActive(false);
            }
        });

    });

    /**
     * Crops image to desired dimensions
     * @param  {int} width  [description]
     * @param  {int} height [description]
     * @param  {string} unit cm|inch
     * @return {ImageEditor}
     */
    this.crop = function (width, height, unit) {
        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
        _canvas.getImageData().removeCropData();

        _canvas.getViewport().set(width, height, unit);

        var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height);

        if (shouldBeCropped) {
            _canvas.getImage().__dragged = false;
            _canvas.getImage().__cropped = true;
            _canvas.getImageData().setCropData();
        }
        else {
            _canvas.getImage().__cropped = false;
        }

        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} defaultValue
     * @return {object}
     */
    this.get = function (key, defaultValue) {
        var value = _settings[key];
        return typeof value === 'undefined' ? defaultValue : value;
    };

    /**
     * Loads the image into the canvas.
     * @param  {Number|String} url
     * @param  {Function} callback
     * @return {ImageEditor}
     */
    this.loadImage = function (url, callback) {
        callback = typeof callback === 'function' ? callback : function () {};
        fabric.util.loadImage(this._url = url, function (obj) {
            if(obj == null) {
                throw new Error('Error loading ' + url);
            }
            var img = new fabric.Image(obj);
            _canvas.setImage(img);
            img.__url = url;
            img.sendToBack();
            callback(img);
        }, { crossOrigin: 'anonymous' });
        return this;
    };

    /**
     * @param  {string|object} key
     * @param  {object} value
     * @return {ImageEditor}
     */
    this.set = function (key, value) {
        $.extend(_settings, util.assertKeyValuePair(key, value));
        return this;
    };

    util.setProperties(this, {
        canvas: {
            get: function () {
                return _canvas;
            }
        }
    });
}

module.exports = ImageEditor;