diff --git a/index.php b/index.php index f2195d7..9b5a60a 100644 --- a/index.php +++ b/index.php @@ -16,6 +16,7 @@ Mirror: + No crop:

diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 4f5d81a..9970461 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -17,20 +17,24 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { }); this.on('mouse:up', function () { - if (this.image.__moved) { - this.aperture.setTransparent(false); + if (this.getImage().__moved) { + this.getApertures().setTransparent(false); } $(this.upperCanvasEl).css('cursor', 'default'); this.renderAll(); }); }, - get_apertures: function () { + getApertures: function () { return this.__aperturehandler || (this.__aperturehandler = new ApertureHandler(this)); }, - get_dragbars: function () { + /** + * + * @returns {DragbarHandler} + */ + getDragbars: function () { return this.__dragbars || (this.__dragbars = new DragbarHandler(this)); }, @@ -38,18 +42,29 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { /** * @return {fabric.Image} */ - get_image: function () { + getImage: function () { return this.__image; }, /** * @return {Viewport} */ - get_viewport: function () { + getViewport: function () { return this.__viewport || (this.__viewport = new Viewport(this)); }, + /** + * Gets the menu for this instance + * @returns {ButtonMenu} + */ + getButtonMenu: function () { + if (!this.__buttonMenu) { + this.__buttonMenu = new ButtonMenu(this); + } + return this.__buttonMenu; + }, + /** * @return {Canvas} */ @@ -68,35 +83,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.removeImage(); this.__image = img; this.__image.addTo(this).center().on('mousedown', function () { - img.canvas.aperture.setTransparent(true); + img.canvas.getApertures().setTransparent(true); }).setCoords(); - this.viewport.reset(); + this.getViewport().reset(); return this; } }); -// Define properties -util.setProperties(Canvas.prototype, { - aperture: { - get: Canvas.prototype.get_apertures - }, - dragbars: { - get: Canvas.prototype.get_dragbars - }, - image: { - get: Canvas.prototype.get_image - }, - buttonMenu: { - get: function () { - if (!this.__buttonMenu) { - this.__buttonMenu = new ButtonMenu(this); - } - return this.__buttonMenu; - } - }, - viewport: { - get: Canvas.prototype.get_viewport - } -}); - module.exports = Canvas; diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/components/ImageEditor/DragHandle.js index 98f7974..98235fc 100644 --- a/src/js/components/ImageEditor/DragHandle.js +++ b/src/js/components/ImageEditor/DragHandle.js @@ -11,12 +11,12 @@ var DragHandle = function (handler) { mouseDown: function () { _dragging = true; _currentAxis = this.axis; - handler.canvas.image.trigger('mousedown'); + handler.canvas.getImage().trigger('mousedown'); }, mouseUp: function () { _dragging = false; _currentAxis = null; - handler.canvas.image.trigger('mouseup'); + handler.canvas.getImage().trigger('mouseup'); }, mouseMove: function (e) { if (!_dragging) { @@ -24,12 +24,12 @@ var DragHandle = function (handler) { } if (_currentAxis === 'h') { - handler.canvas.image.left -= e.e.movementX; + handler.canvas.getImage().left -= e.e.movementX; } else { - handler.canvas.image.top -= e.e.movementY; + handler.canvas.getImage().top -= e.e.movementY; } // Trigger moving for image, to stay within bounds - handler.canvas.image.setCoords().trigger('moving'); + handler.canvas.getImage().setCoords().trigger('moving'); handler.canvas.renderAll(); } }; @@ -58,7 +58,7 @@ var DragHandle = function (handler) { }; this.init = function () { - var viewportData = this.getCanvas().viewport.data; + var viewportData = this.getCanvas().getViewport().data; var tracks = handler.getTracks(); if (this.__handles) { diff --git a/src/js/components/ImageEditor/DragbarHandler.js b/src/js/components/ImageEditor/DragbarHandler.js index bb5694f..2b788c0 100644 --- a/src/js/components/ImageEditor/DragbarHandler.js +++ b/src/js/components/ImageEditor/DragbarHandler.js @@ -62,7 +62,7 @@ function DragbarHandler(canvas) { _dragbars.h = new fabric.Rect($.extend({}, config.dragBar, { axis: 'h', - width: canvas.image.width, + width: canvas.getImage().width, height: config.dragBar.size, })) .addTo(canvas) @@ -71,12 +71,12 @@ function DragbarHandler(canvas) { _dragbars.v = new fabric.Rect($.extend({}, config.dragBar, { axis: 'v', width: config.dragBar.size, - height: canvas.image.height + height: canvas.getImage().height })) .addTo(canvas) .set({ left: canvas.width - 40 }).setCoords(); - canvas.image.on('moving', this.sync); + canvas.getImage().on('moving', this.sync); return this; }; @@ -85,8 +85,8 @@ function DragbarHandler(canvas) { * @return {DragbarHandler} */ this.sync = function () { - _dragbars.h.set({left: canvas.image.left}).setCoords(); - _dragbars.v.set({top: canvas.image.top}).setCoords(); + _dragbars.h.set({left: canvas.getImage().left}).setCoords(); + _dragbars.v.set({top: canvas.getImage().top}).setCoords(); return this; }; } diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index bf87c62..0b03f68 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -13,12 +13,12 @@ function ImageEditor(args) { // Initialize canvas _canvas = new Canvas('canvas'); - _canvas.buttonMenu + _canvas.getButtonMenu() .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () { - _canvas.viewport.gores.enable(this.isActive()); + _canvas.getViewport().gores.enable(this.isActive()); }) .addItem(['Show Ruler', 'Hide Ruler'], function () { - _canvas.viewport.rulers.enable(this.isActive()); + _canvas.getViewport().rulers.enable(this.isActive()); }) .addItem(['Fullscreen', 'Exit Fullscreen'], function () { util.toggleFullscreen(_canvas.getSelectionElement().parentNode); @@ -32,7 +32,7 @@ function ImageEditor(args) { * @return {ImageEditor} */ this.crop = function (width, height) { - _canvas.viewport.set(width, height); + _canvas.getViewport().set(width, height); return this; }; diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index e39ac8f..bd71f50 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -29,13 +29,13 @@ function Viewport(canvas) { _rect.height += _borderWidth; _rect.addTo(canvas).center().setCoords(); - canvas.image + canvas.getImage() .center() - .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.image)); - canvas.aperture.apply(_data.axis, _rect.getBoundingRect()); + .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage())); + canvas.getApertures().apply(_data.axis, _rect.getBoundingRect()); drawBeams(); - canvas.dragbars.apply(); + canvas.getDragbars().apply(); // Apertures sometimes overlaps the viewports bounding rect. // Solve this by bringing it to the front after apertures are applied. @@ -115,13 +115,13 @@ function Viewport(canvas) { * @return {Viewport} */ this.set = function (width, height) { - _data = util.calcCrop(canvas.image, width, height); + _data = util.calcCrop(canvas.getImage(), width, height); apply(); this.gores.reset(); this.rulers.reset(); - canvas.aperture.setTransparent(true); - canvas.image.__moved = false; - canvas.buttonMenu.bringToFront(); + canvas.getApertures().setTransparent(true); + canvas.getImage().__moved = false; + canvas.getButtonMenu().bringToFront(); }; util.setProperties(this, { diff --git a/src/js/components/extend-fabric-functionality.js b/src/js/components/extend-fabric-functionality.js index 498b8f8..8cde5a0 100644 --- a/src/js/components/extend-fabric-functionality.js +++ b/src/js/components/extend-fabric-functionality.js @@ -1,8 +1,8 @@ 'use strict'; -var Draggable = require('../Draggable'); -var ImageTransformationHandler = require('../ImageTransformationHandler'); -var util = require('../../util'); +var Draggable = require('./ImageEditor/Draggable'); +var ImageTransformationHandler = require('./ImageEditor/ImageTransformationHandler'); +var util = require('./util'); function ExtendFabricFunctionality() { diff --git a/src/js/main.js b/src/js/main.js index ccd1ebf..e314492 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -6,7 +6,7 @@ var ImageEditor = require('./components/ImageEditor/ImageEditor'); ExtendFabricFunctionality(); - ImageEditor(); + window.ImageEditor = ImageEditor; }()); @@ -31,11 +31,15 @@ $(function () { editor.crop($input.w.val(), $input.h.val()); }, Mirror: function () { - editor.canvas.image.transformation.set('mirror', this.checked); - } + editor.canvas.getImage().transformation.set('mirror', this.checked); + }, + NoCrop: function () { + + }, }; $input.w.keyup(Event.DimensionChange); $input.h.keyup(Event.DimensionChange); - $input.mirror.click(Event.Mirror); + $input.mirror.change(Event.Mirror); + $input.mirror.change(Event.NoCrop); }());