diff --git a/src/js/includes/Canvas.js b/src/js/includes/Canvas.js index 846f5da..5973944 100644 --- a/src/js/includes/Canvas.js +++ b/src/js/includes/Canvas.js @@ -6,6 +6,7 @@ var ButtonMenu = require('./ButtonMenu'); var DragbarHandler = require('./DragbarHandler'); var Viewport = require('./Viewport'); var ThreeDHandler = require('./3dHandler'); +var MirrorHandler = require('./MirrorHandler'); var $document = $(document); @@ -96,6 +97,14 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { return this.__image; }, + /** + * @return {Viewport} + */ + getMirror: function () { + return this.__mirror || + (this.__mirror = new MirrorHandler(this.getImage())); + }, + /** * @return {Viewport} */ diff --git a/src/js/includes/ImageEditor.js b/src/js/includes/ImageEditor.js index d6c3847..45fd76d 100644 --- a/src/js/includes/ImageEditor.js +++ b/src/js/includes/ImageEditor.js @@ -8,6 +8,16 @@ function ImageEditor(canvasId, args) { var _settings = $.extend({ type: 'wallpaper', + buttons: { + flat: 'Flat', + threeD: '3d', + showMurals: 'Show Murals Panel', + hideMurals: 'Hide Murals Panel', + showRulers: 'Show Ruler', + hideRulers: 'Hide Ruler', + showFullscreen: 'Fullscreen', + hideFullscreen: 'Exit Fullscreen', + } }, args); // Initialize canvas @@ -24,22 +34,22 @@ function ImageEditor(canvasId, args) { */ if (_canvas.__type === 'canvas') { _canvas.getButtonMenu() - .addItem('flat', 'Flat', function () { + .addItem('flat', _settings.buttons.flat, function () { _canvas.toggle3D(false); }, true) - .addItem('3d', '3D', function () { + .addItem('3d', _settings.buttons.threeD, function () { _canvas.toggle3D(true); }) .render(); } else { _canvas.getButtonMenu() - .addItem('toggleMurals', ['Show Murals Panel', 'Hide Murals Panel'], function () { + .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () { _canvas.getViewport().getGores().enable(this.isActive()); }) - .addItem('toggleRulers', ['Show Ruler', 'Hide Ruler'], function () { + .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () { _canvas.getViewport().getRulers().enable(this.isActive()); }) - .addItem('toggleFullscreen', ['Fullscreen', 'Exit Fullscreen'], function () { + .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.hideFullscreen], function () { util.toggleFullscreen(_canvas.getSelectionElement().parentNode); }) .render(); diff --git a/src/js/includes/ImageTransformationHandler.js b/src/js/includes/ImageTransformationHandler.js index 2054897..1b17d40 100644 --- a/src/js/includes/ImageTransformationHandler.js +++ b/src/js/includes/ImageTransformationHandler.js @@ -1,9 +1,6 @@ 'use strict'; function ImageTransformationHandler(img) { - var _transformations = { - mirrored: 0 - }; /** * Gets information about how the cropped image is dragged @@ -39,8 +36,8 @@ function ImageTransformationHandler(img) { var returnValue = $.extend( {}, - _transformations, { + mirrored: img.canvas.getMirror().getStatus(), width: viewportData.dim.width, height: viewportData.dim.height, }, @@ -55,21 +52,6 @@ function ImageTransformationHandler(img) { return returnValue; }; - - /** - * @param {String} name - * @param {*} args - * @return {ImageTransformationHandler} - */ - this.set = function (name, args) { - switch (name) { - case 'mirror': - _transformations.mirrored = (img.flipX = args) ? 1 : 0; - } - img.setCoords().canvas.renderAll(); - - return this; - }; } module.exports = ImageTransformationHandler; diff --git a/src/js/includes/MirrorHandler.js b/src/js/includes/MirrorHandler.js new file mode 100644 index 0000000..c0595e6 --- /dev/null +++ b/src/js/includes/MirrorHandler.js @@ -0,0 +1,25 @@ +'use strict'; + +function MirrorHandler(img) { + + var _mirrored = 0; + + /** + * @param {Boolean} checked + * @return {MirrorHandler} + */ + this.set = function(checked) { + _mirrored = (img.flipX = checked) ? 1 : 0; + img.setCoords().canvas.renderAll(); + + return this; + } + + this.getStatus = function() { + return _mirrored; + } + + +} + +module.exports = MirrorHandler; diff --git a/src/js/init.js b/src/js/init.js index f4df419..d7221ff 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -54,7 +54,7 @@ } function handleMirrorChange() { - editor.canvas.getImage().transformation.set('mirror', this.checked); + editor.canvas.getMirror().set(this.checked); } function handleNoCropChange() { @@ -101,7 +101,17 @@ function init() { editor = new ImageEditor('canvas-editor', { - type: 'wallpaper', + type: 'canvas', + buttons: { + flat: 'Flat', + threeD: '3D', + showMurals: 'Show Murals Panel', + hideMurals: 'hide-murals', + showRulers: 'show-rulers', + hideRulers: 'hide-rulers', + showFullscreen: 'show-fullscreen', + hideFullscreen: 'hide-fullscreen', + } }) .loadImage(imageUrl, function() { $input.w.trigger('input');