diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/components/ImageEditor/DragHandle.js index 98235fc..e6b89d5 100644 --- a/src/js/components/ImageEditor/DragHandle.js +++ b/src/js/components/ImageEditor/DragHandle.js @@ -58,7 +58,7 @@ var DragHandle = function (handler) { }; this.init = function () { - var viewportData = this.getCanvas().getViewport().data; + var viewportData = this.getCanvas().getViewport().getCropData(); var tracks = handler.getTracks(); if (this.__handles) { diff --git a/src/js/components/ImageEditor/GoreHandler.js b/src/js/components/ImageEditor/GoreHandler.js index 9d2871e..5d1ee0c 100644 --- a/src/js/components/ImageEditor/GoreHandler.js +++ b/src/js/components/ImageEditor/GoreHandler.js @@ -8,7 +8,7 @@ function GoreHandler(viewport) { * @return {fabric.Line} */ function getLine(left) { - return new fabric.Line([0, 0, 0, viewport.data.height], { + return new fabric.Line([0, 0, 0, viewport.getCropData().height], { evented: false, strokeDashArray: [5, 5], stroke: '#000', @@ -43,7 +43,7 @@ function GoreHandler(viewport) { } var bounds = viewport.getBounds(); - var step = viewport.data.ppmm * 450; + var step = viewport.getCropData().ppmm * 450; var count = Math.ceil(bounds.width / step); for (var i = 1; i < count; i++) { diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 0b03f68..1bdbe57 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -15,10 +15,10 @@ function ImageEditor(args) { _canvas.getButtonMenu() .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () { - _canvas.getViewport().gores.enable(this.isActive()); + _canvas.getViewport().getGores().enable(this.isActive()); }) .addItem(['Show Ruler', 'Hide Ruler'], function () { - _canvas.getViewport().rulers.enable(this.isActive()); + _canvas.getViewport().getRulers().enable(this.isActive()); }) .addItem(['Fullscreen', 'Exit Fullscreen'], function () { util.toggleFullscreen(_canvas.getSelectionElement().parentNode); diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/components/ImageEditor/RulerHandler.js index e7384e8..e85f5c1 100644 --- a/src/js/components/ImageEditor/RulerHandler.js +++ b/src/js/components/ImageEditor/RulerHandler.js @@ -16,10 +16,10 @@ function RulerHandler(viewport) { var bounds = viewport.getBounds(); var pos = util.assertBetween(this[axis], bounds.min[axis], bounds.max[axis]); this.marker[axis] = this[axis] = pos; - var dim = (this[axis] - bounds[axis]) / (viewport.data.ppmm * 10); + var dim = (this[axis] - bounds[axis]) / (viewport.getCropData().ppmm * 10); if (axis === 'top') { - dim = viewport.data.dim.height - dim; + dim = viewport.getCropData().dim.height - dim; } this.setText(Math.round(dim * 100) / 100 + ' cm'); diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index bd71f50..9b91fac 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -117,32 +117,25 @@ function Viewport(canvas) { this.set = function (width, height) { _data = util.calcCrop(canvas.getImage(), width, height); apply(); - this.gores.reset(); - this.rulers.reset(); + this.getGores().reset(); + this.getRulers().reset(); canvas.getApertures().setTransparent(true); canvas.getImage().__moved = false; canvas.getButtonMenu().bringToFront(); }; - util.setProperties(this, { - data: { - get: function () { - return _data; - } - }, - gores: { - get: function () { - return this.__goreHandler || - (this.__goreHandler = new GoreHandler(this)); - } - }, - rulers: { - get: function () { - return this.__rulerHandler || - (this.__rulerHandler = new RulerHandler(this)); - } - } - }); + this.getCropData = function () { + return _data; + }; + + this.getGores = function () { + return this.__goreHandler || (this.__goreHandler = new GoreHandler(this)); + }; + + this.getRulers = function () { + return this.__rulerHandler || (this.__rulerHandler = new RulerHandler(this)); + }; + } module.exports = Viewport; diff --git a/src/js/main.js b/src/js/main.js index e314492..a474ffb 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,6 +1,6 @@ 'use strict'; -(function () { +(function() { var ExtendFabricFunctionality = require('./components/extend-fabric-functionality'); var ImageEditor = require('./components/ImageEditor/ImageEditor'); @@ -10,36 +10,38 @@ }()); -$(function () { +$(function() { // Inputs for the editor var $input = { w: $('#form-control input[name="w"]'), h: $('#form-control input[name="h"]'), image_id: $('#form-control input[name="image_id"]'), - mirror: $('#form-control input[name="mirror"]') + mirror: $('#form-control input[name="mirror"]'), + noCrop: $('#form-control input[name="no-crop"]') }; var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450'; - var editor = new ImageEditor({ 'type': 'canvas' }) - .loadImage(imageUrl, function () { + var editor = new ImageEditor({'type': 'canvas'}) + .loadImage(imageUrl, function() { $input.w.trigger('keyup'); }); var Event = { - DimensionChange: function () { + DimensionChange: function() { editor.crop($input.w.val(), $input.h.val()); }, - Mirror: function () { + Mirror: function() { editor.canvas.getImage().transformation.set('mirror', this.checked); }, - NoCrop: function () { - + NoCrop: function() { + // editor.canvas + }, }; $input.w.keyup(Event.DimensionChange); $input.h.keyup(Event.DimensionChange); $input.mirror.change(Event.Mirror); - $input.mirror.change(Event.NoCrop); + $input.noCrop.change(Event.NoCrop); }());