Replaced h and v by x and y

src/js/includes/ApertureHandler.js

@@ -1,26 +1,26 @@
 'use strict';
 
 function ApertureHandler(canvas) {
-    var _items = {h: [], v: []};
+    var _items = {x: [], y: []};
 
     function init() {
         var bounds = canvas;
-        var hRect = new fabric.Rect({
+        var xRect = new fabric.Rect({
             width: bounds.width,
             height: bounds.height / 2,
             fill: canvas.backgroundColor,
             opacity: 0.7,
         });
 
-        var vRect = hRect.clone().set({
+        var yRect = xRect.clone().set({
             width: bounds.width / 2,
             height: bounds.height
         });
 
-        _items.h = [].concat([hRect, hRect.clone()]);
+        _items.x = [].concat([xRect, xRect.clone()]);
-        _items.v= [].concat([vRect, vRect.clone()]);
+        _items.y= [].concat([yRect, yRect.clone()]);
 
-        [].concat(_items.h, _items.v).forEach(function (o) {
+        [].concat(_items.x, _items.y).forEach(function (o) {
             canvas.add(o);
         });
         canvas.renderAll();
@@ -32,13 +32,13 @@ function ApertureHandler(canvas) {
             o.visible = false;
         });
 
-        var active = this.getApertures(axis === 'h' ? 'v' : 'h');
+        var active = this.getApertures(axis === 'x' ? 'y' : 'x');
 
         active.forEach(function (o) {
             o.visible = true;
         });
 
-        if (axis === 'v') {
+        if (axis === 'y') {
             active[0].width= active[1].width = canvas.width;
             active[0].top = viewport.top - active[0].height + 0.5;
             active[1].top = viewport.top + viewport.height - 0.5;
@@ -56,7 +56,7 @@ function ApertureHandler(canvas) {
     };
 
     this.getApertures = function (axis) {
-        return axis ? _items[axis] : [].concat(_items.h, _items.v);
+        return axis ? _items[axis] : [].concat(_items.x, _items.y);
     };
 
     this.setTransparent = function (apply) {

src/js/includes/DragHandle.js

@@ -36,7 +36,7 @@ var DragHandle = function (handler) {
 
             _movedHandle = true;
 
-            if (_currentAxis === 'h') {
+            if (_currentAxis === 'x') {
                 handler.canvas.getImage().left -= e.e.movementX;
             } else {
                 handler.canvas.getImage().top -= e.e.movementY;
@@ -67,12 +67,12 @@ var DragHandle = function (handler) {
             return [];
         }
 
-        return [].concat(this.__handles.h, this.__handles.v);
+        return [].concat(this.__handles.x, this.__handles.y);
     };
 
     this.setHandlePosition = function() {
-        this.__handles.v.set({left: handler.getTracks().v.left}).setCoords();
+        this.__handles.y.set({left: handler.getTracks().y.left}).setCoords();
-        this.__handles.h.set({top: handler.getTracks().h.top}).setCoords();
+        this.__handles.x.set({top: handler.getTracks().x.top}).setCoords();
         return this;
     }
 
@@ -81,27 +81,27 @@ var DragHandle = function (handler) {
         var tracks = handler.getTracks();
 
         if (this.__handles) {
-            this.getCanvas().remove(this.__handles.h);
+            this.getCanvas().remove(this.__handles.x);
-            this.getCanvas().remove(this.__handles.v);
+            this.getCanvas().remove(this.__handles.y);
         }
 
         this.__handles = {
-            h: getRect(viewportData.dim.width + ' cm', viewportData.width),
+            x: getRect(viewportData.dim.width + ' cm', viewportData.width),
-            v: getRect(viewportData.dim.height + ' cm', viewportData.height)
+            y: getRect(viewportData.dim.height + ' cm', viewportData.height)
         };
 
-        this.__handles.h.addTo(this.getCanvas()).centerH().set({ top: tracks.h.top }).setCoords();
+        this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
-        this.__handles.v.addTo(this.getCanvas())
+        this.__handles.y.addTo(this.getCanvas())
             .setAngle(-90)
-            .centerV().set({ left: tracks.v.left })
+            .centerV().set({ left: tracks.y.left })
             .setCoords();
 
         this.getCanvas()
             .on('mouse:move', events.mouseMove)
             .on('mouse:up', events.mouseUp);
 
-        tracks.h.on('mousedown', events.mouseDown.bind(tracks.h));
+        tracks.x.on('mousedown', events.mouseDown.bind(tracks.x));
-        tracks.v.on('mousedown', events.mouseDown.bind(tracks.v));
+        tracks.y.on('mousedown', events.mouseDown.bind(tracks.y));
     };
 };
 

src/js/includes/DragbarHandler.js

@@ -5,8 +5,8 @@ var config = require('./config');
 
 function DragbarHandler(canvas) {
     var _dragbars = {
-        h: null,
+        x: null,
-        v: null
+        y: null
     };
 
     /**
@@ -34,12 +34,12 @@ function DragbarHandler(canvas) {
     this.canvas = canvas;
 
     this.bringToFront = function() {
-        [].concat(_dragbars.h, _dragbars.v).forEach(function (o) {
+        [].concat(_dragbars.x, _dragbars.y).forEach(function (dragbar) {
-            o.bringToFront();
+            dragbar.bringToFront();
         });
 
-        this.__handles.getHandles().forEach(function (o) {
+        this.__handles.getHandles().forEach(function (handle) {
-            o.bringToFront();
+            handle.bringToFront();
         });
     }
     /**
@@ -47,8 +47,8 @@ function DragbarHandler(canvas) {
      */
     this.clear = function () {
         canvas
-            .remove(_dragbars.h)
+            .remove(_dragbars.x)
-            .remove(_dragbars.v)
+            .remove(_dragbars.y)
             .renderAll();
         return this;
     };
@@ -58,19 +58,22 @@ function DragbarHandler(canvas) {
     };
 
     this.resetPosition = function() {
-        if (!_dragbars.v || !_dragbars.h) {
+        if (!_dragbars.y || !_dragbars.x) {
             return this;
         }
 
-        _dragbars.v.set({
+        _dragbars.y.set({
             left: canvas.width - 30,
             height: canvas.getImage().height * canvas.getImage().scaleY,
         }).setCoords();
-        _dragbars.h.set({
+
+        _dragbars.x.set({
             top: canvas.height - 30,
             width: canvas.getImage().width * canvas.getImage().scaleY,
         }).setCoords();
+
         this.__handles.setHandlePosition();
+
         return this;
     };
 
@@ -80,8 +83,8 @@ function DragbarHandler(canvas) {
     this.init = function () {
         this.clear();
 
-        _dragbars.h = new fabric.Rect($.extend({}, config.dragBar, {
+        _dragbars.x = new fabric.Rect($.extend({}, config.dragBar, {
-            axis: 'h',
+            axis: 'x',
             width: canvas.getImage().width,
             height: config.dragBar.size,
             lockMovementY: true,
@@ -92,8 +95,8 @@ function DragbarHandler(canvas) {
             .addTo(canvas)
             .centerH().set({ top: canvas.height - 30 }).setCoords();
 
-        _dragbars.v = new fabric.Rect($.extend({}, config.dragBar, {
+        _dragbars.y = new fabric.Rect($.extend({}, config.dragBar, {
-            axis: 'v',
+            axis: 'y',
             width: config.dragBar.size,
             height: canvas.getImage().height,
             lockMovementX: true,
@@ -113,8 +116,8 @@ function DragbarHandler(canvas) {
      * @return {DragbarHandler}
      */
     this.sync = function () {
-        _dragbars.h.set({left: canvas.getImage().left}).setCoords();
+        _dragbars.x.set({left: canvas.getImage().left}).setCoords();
-        _dragbars.v.set({top: canvas.getImage().top}).setCoords();
+        _dragbars.y.set({top: canvas.getImage().top}).setCoords();
         return this;
     };
 }

src/js/includes/Draggable.js

@@ -31,7 +31,7 @@ function Draggable(img, boundingRect) {
         }
 
         // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
-        if (img.canvas.getViewport().getData().axis === 'h') {
+        if (img.canvas.getViewport().getData().axis === 'x') {
             _bounds.top.min = _bounds.top.max = img.top;
         } else {
             _bounds.left.min = _bounds.left.max = img.left;

src/js/includes/FrameHandler.js

@@ -46,10 +46,8 @@ function FrameHandler(viewport) {
     this.setVisible = function (isVisible) {
         isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
 
-        getFramesAsArray().forEach(function (o) {
+        getFramesAsArray().forEach(function (frame) {
-            o.set({
+            frame.set({ visible: isVisible });
-                visible: isVisible
-            });
         });
 
         viewport.canvas.renderAll();
@@ -63,6 +61,8 @@ function FrameHandler(viewport) {
      * @return {FrameHandler}
      */
     this.setFrames = function (frameType) {
+        var bounds = viewport.getBounds();
+
         frameType = frameType || _frameType || 'image';
         _frameType = frameType;
 
@@ -76,6 +76,10 @@ function FrameHandler(viewport) {
 
         this.setVisible(true);
 
+        getFramesAsArray().forEach(function (o) {
+            o.set(config.frames[frameType]);
+        });
+
         _frames.top.height =
             _frames.bottom.height =
                 _frames.right.width =
@@ -84,29 +88,12 @@ function FrameHandler(viewport) {
         _frames.top.width = _frames.bottom.width = viewport.getData().width;
         _frames.right.height = _frames.left.height = viewport.getData().height;
 
-        var frameargs;
-
         if (frameType === 'image') {
             _frames.top.width -= (viewport.getData().ppmm * 29) * 2;
             _frames.bottom.width = _frames.top.width;
             _frames.right.height -= (viewport.getData().ppmm * 29) * 2;
             _frames.left.height = _frames.right.height;
 
-            frameargs = config.frames.image;
-
-        } else if (frameType === 'white') {
-            frameargs = config.frames.white;
-        } else if (frameType === 'black') {
-            frameargs = config.frames.black;
-        }
-
-        getFramesAsArray().forEach(function (o) {
-            o.set(frameargs);
-        });
-
-        var bounds = viewport.getBounds();
-
-        if (frameType === 'image') {
             _frames.top.set({
                 top: bounds.top,
             }).centerH().setCoords();

src/js/includes/GoreHandler.js

@@ -22,8 +22,8 @@ function GoreHandler(viewport) {
      * @return {GoreHandler}
      */
     this.clear = function () {
-        _lines.forEach(function (o) {
+        _lines.forEach(function (line) {
-            viewport.canvas.remove(o);
+            viewport.canvas.remove(line);
         });
         _lines = [];
         return this;

src/js/includes/ImageEditor.js

@@ -18,8 +18,6 @@ function ImageEditor(canvasId, args) {
         __type: _settings.type
     });
 
-
-
     /**
      * @TODO: Refactor this. Since Canvas knows the type of editor it probably
      *        better could reside there.
@@ -69,6 +67,7 @@ function ImageEditor(canvasId, args) {
      */
     this.crop = function (width, height) {
         _canvas.getImage().__cropped = false;
+        _canvas.getImage().transformation.removeCropData();
         _canvas.getViewport().set(width, height);
         return this;
     };

src/js/includes/ImageTransformationHandler.js

@@ -18,8 +18,8 @@ function ImageTransformationHandler(img) {
         var dragAxis = img.canvas.getViewport().getData().axis;
 
         var cropData = {
-            x: dragAxis === 'h' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
+            x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
-            y: dragAxis === 'v' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
+            y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
         }
 
         sessionStorage.setItem('cropData', JSON.stringify(cropData));

src/js/includes/RulerHandler.js

@@ -6,8 +6,8 @@ var config = require('./config');
 
 function RulerHandler(viewport) {
     var _enabled = false;
-    var _lines = { h: null, v: null };
+    var _lines = { x: null, y: null };
-    var _rect = { h: null, v: null };
+    var _rect = { x: null, y: null };
 
     var Event = {
         /**
@@ -35,15 +35,15 @@ function RulerHandler(viewport) {
         var bounds = viewport.getBounds();
         return new fabric.Line([
                 0, 0,
-                axis === 'h' ? bounds.width : 0,
+                axis === 'x' ? bounds.width : 0,
-                axis === 'v' ? bounds.height : 0
+                axis === 'y' ? bounds.height : 0
             ], {
             evented: false,
             strokeDashArray: [5, 5],
             stroke: '#000',
             strokeWidth: 1,
-            top: axis === 'h' ? bounds.top + bounds.height / 2 : bounds.top,
+            top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
-            left: axis === 'v' ? bounds.left + bounds.width / 2 : bounds.left
+            left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
         });
     }
 
@@ -51,7 +51,7 @@ function RulerHandler(viewport) {
      * @return {RulerHandler}
      */
     this.clear = function () {
-        [].concat(_rect.h, _rect.v, _lines.h, _lines.v).forEach(function (o) {
+        [].concat(_rect.x, _rect.y, _lines.x, _lines.y).forEach(function (o) {
             viewport.canvas.remove(o);
         });
         return this;
@@ -72,19 +72,19 @@ function RulerHandler(viewport) {
 
         var bounds = viewport.getBounds();
 
-        _lines = { h: getLine('h'), v: getLine('v') };
+        _lines = { x: getLine('x'), y: getLine('y') };
 
-        viewport.canvas.add(_lines.h);
+        viewport.canvas.add(_lines.x);
-        viewport.canvas.add(_lines.v);
+        viewport.canvas.add(_lines.y);
 
-        _rect.h = new TextButton('horizontalRuler', 'H', config.rulerHandle)
+        _rect.x = new TextButton('horizontalRuler', 'H', config.rulerHandle)
-            .set(config.rulerHandle.h(_lines, bounds))
+            .set(config.rulerHandle.x(_lines, bounds))
             .addTo(viewport.canvas)
             .on('moving', Event.onMove)
             .trigger('moving');
 
-        _rect.v = new TextButton('verticalRuler', 'V', config.rulerHandle)
+        _rect.y = new TextButton('verticalRuler', 'V', config.rulerHandle)
-            .set(config.rulerHandle.v(_lines, bounds))
+            .set(config.rulerHandle.y(_lines, bounds))
             .addTo(viewport.canvas)
             .on('moving', Event.onMove)
             .trigger('moving');

src/js/includes/Viewport.js

@@ -62,8 +62,8 @@ function Viewport(canvas) {
      * Render the diagonal lines from viewport to edge of the canvas
      */
     function drawBeams() {
-        _beams.forEach(function (o) {
+        _beams.forEach(function (beam) {
-            canvas.remove(o);
+            canvas.remove(beam);
         });
 
         _beams = [];

src/js/includes/config/ruler-handle.js

@@ -8,8 +8,8 @@ module.exports = {
             strokeDashArray: [5, 5],
             stroke: '#000',
             strokeWidth: 1,
-            top: axis === 'h' ? bounds.top + bounds.height / 2 : bounds.top,
+            top: axis === 'x' ? bounds.top + bounds.height / 2 : bounds.top,
-            left: axis === 'v' ? bounds.left + bounds.width / 2 : bounds.left
+            left: axis === 'y' ? bounds.left + bounds.width / 2 : bounds.left
         }
     },
 
@@ -20,23 +20,23 @@ module.exports = {
         fill: '#33ff33',
     },
 
-    h: function(lines, bounds) {
+    x: function(lines, bounds) {
         return {
             axis: 'left',
-            marker: lines.v,
+            marker: lines.y,
             top: Math.ceil(bounds.top + bounds.height + 5),
-            left: lines.v.left,
+            left: lines.y.left,
             originX: 'center',
             lockMovementY: true,
             moveCursor: 'ew-resize',
             hoverCursor: 'ew-resize',
         }
     },
-    v: function(lines, bounds) {
+    y: function(lines, bounds) {
         return {
             axis: 'top',
-            marker: lines.h,
+            marker: lines.x,
-            top: lines.h.top,
+            top: lines.x.top,
             left: Math.ceil(bounds.left + bounds.width + 5),
             originY: 'center',
             lockMovementX: true,

src/js/includes/utils/calc-crop.js

@@ -16,7 +16,7 @@ function calcCrop(obj, width, height) {
 
     var returnValue = {
         image: obj,
-        axis: objRatio > cropRatio ? 'h' : 'v',
+        axis: objRatio > cropRatio ? 'x' : 'y',
         dim: {
             width: Number(width),
             height: Number(height)

src/js/init.js

@@ -36,7 +36,6 @@
 
     function handleDimensionChange() {
         var noCropIsChecked = $input.noCrop.is(':checked');
-        var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
         var data = editor.canvas.getViewport().getData();
         var values = {
             width: $input.w.val(),
@@ -44,6 +43,7 @@
         };
 
         if (noCropIsChecked) {
+            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
             values = getOptimalDimension(values, currentDimension, data.objectRatio);
         }
 
@@ -101,7 +101,7 @@
 
     function init() {
         editor = new ImageEditor('canvas-editor', {
-                type: 'canvas',
+                type: 'wallpaper',
             })
             .loadImage(imageUrl, function() {
                 $input.w.trigger('input');