From c57d9157aa8e735f11b31cd2db34957f43123c7a Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 30 May 2017 09:27:53 +0200 Subject: [PATCH] Fixed responsivity when resizing the window --- src/js/components/ImageEditor/3dHandler.js | 20 +------------- src/js/components/ImageEditor/ButtonMenu.js | 26 +++++++++++++++++++ src/js/components/ImageEditor/Canvas.js | 23 ++++++++++++++++ .../components/ImageEditor/DragbarHandler.js | 10 +++++-- src/js/components/ImageEditor/ImageEditor.js | 5 ++-- src/js/components/ImageEditor/Viewport.js | 4 +-- src/js/components/utils/calc-crop.js | 6 ++--- src/js/init.js | 4 ++- 8 files changed, 69 insertions(+), 29 deletions(-) diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js index b0b56e9..d29d714 100644 --- a/src/js/components/ImageEditor/3dHandler.js +++ b/src/js/components/ImageEditor/3dHandler.js @@ -52,24 +52,6 @@ function ThreeDHandler(canvas) { return _overlay.visible; }; - this.getResizedImage = function(img) { - // Calculate maxHeight and maxWidth of the 3d image - // and scale the image accoring to those values - var maxHeight = canvas.getHeight() - 100; - var maxWidth = canvas.getWidth() - 100; - - img.scaleX = img.scaleY = 1; - - if (maxHeight < img.height) { - img.scaleToHeight(maxHeight); - } - if (maxWidth < (img.width * img.scaleX)) { - img.scaleToWidth(maxWidth); - } - - return img; - }; - this.refreshImage = function() { _overlay.set({ width: canvas.width, @@ -83,7 +65,7 @@ function ThreeDHandler(canvas) { _overlay .remove(_image) - .add(_image = this.getResizedImage(img)); + .add(_image = canvas.getResizedImage(img)); }; /** diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/components/ImageEditor/ButtonMenu.js index d5c92e6..b39290c 100644 --- a/src/js/components/ImageEditor/ButtonMenu.js +++ b/src/js/components/ImageEditor/ButtonMenu.js @@ -69,6 +69,24 @@ function ButtonMenu(canvas, settings) { return _width; }; + this.hide = function() { + _textButtons.forEach(function(textButton) { + textButton.set({ + opacity: 0, + selectable: false + }); + }); + } + + this.show = function() { + _textButtons.forEach(function(textButton) { + textButton.set({ + opacity: 1, + selectable: true + }); + }); + } + /** * Recalculate boundaries and add all items to canvas if required * @return {ButtonMenu} @@ -97,6 +115,14 @@ function ButtonMenu(canvas, settings) { }); canvas.renderAll(); + + // Buttons should not be visible on screens with a width lower than 768px + if ($(window).width() < 768) { + this.hide(); + } else { + this.show(); + } + return this; }; } diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index e32bc2e..b447b11 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -40,6 +40,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { if (this.get3dHandler().isEnabled()) { this.get3dHandler().refreshImage(); } else { + this.refreshImage(this.getResizedImage(this.getImage())) this.getViewport().reset(); } this.sendToBack(this.getImage()); @@ -135,6 +136,16 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { return this.remove(this.__image); }, + refreshImage: function(img) { + this.removeImage(); + this.__image = img; + this.__image.addTo(this).on('mousedown', function () { + img.canvas.getApertures().setTransparent(true); + }).setCoords(); + this.getViewport().reset(); + return this; + }, + /** * @param {fabric.Image} img * @return {Canvas} @@ -149,6 +160,18 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { return this; }, + getResizedImage: function(img) { + // Calculate maxHeight and maxWidth of the 3d image + // and scale the image accoring to those values + var maxHeight = this.getHeight() - 100; + var maxWidth = this.getWidth() - 100; + + img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height); + img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width); + + return img; + }, + toggle3D: function (showAs3d) { this.getButtonMenu().getItems().forEach(function(button) { var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d; diff --git a/src/js/components/ImageEditor/DragbarHandler.js b/src/js/components/ImageEditor/DragbarHandler.js index 0101d77..b1e604a 100644 --- a/src/js/components/ImageEditor/DragbarHandler.js +++ b/src/js/components/ImageEditor/DragbarHandler.js @@ -62,8 +62,14 @@ function DragbarHandler(canvas) { return this; } - _dragbars.v.set({ left: canvas.width - 30 }).setCoords(); - _dragbars.h.set({ top: canvas.height - 30 }).setCoords(); + _dragbars.v.set({ + left: canvas.width - 30, + height: canvas.getImage().height * canvas.getImage().scaleY, + }).setCoords(); + _dragbars.h.set({ + top: canvas.height - 30, + width: canvas.getImage().width * canvas.getImage().scaleY, + }).setCoords(); this.__handles.setHandlePosition(); return this; }; diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 1a978cc..bec418e 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -5,10 +5,9 @@ var util = require('../util'); function ImageEditor(canvasId, args) { var _canvas; - var self = this; var _settings = $.extend({ - 'type': 'wallpaper' + type: 'wallpaper', }, args); // Initialize canvas @@ -19,6 +18,8 @@ function ImageEditor(canvasId, args) { __type: _settings.type }); + + /** * @TODO: Refactor this. Since Canvas knows the type of editor it probably * better could reside there. diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index ddef26e..82b00b9 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/src/js/components/ImageEditor/Viewport.js @@ -102,11 +102,11 @@ function Viewport(canvas) { function calcMinMaxBoundsForRect(rect, img) { return { left: { - min: rect.left + rect.width - img.width, + min: rect.left + rect.width - (img.width * img.scaleX), max: rect.left }, top: { - min: rect.top + rect.height - img.height, + min: rect.top + rect.height - (img.height * img.scaleY), max: rect.top } }; diff --git a/src/js/components/utils/calc-crop.js b/src/js/components/utils/calc-crop.js index e739c80..9274a5f 100644 --- a/src/js/components/utils/calc-crop.js +++ b/src/js/components/utils/calc-crop.js @@ -21,8 +21,8 @@ function calcCrop(obj, width, height) { width: Number(width), height: Number(height) }, - width: obj.width, - height: obj.height, + width: obj.width * obj.scaleX, + height: obj.height * obj.scaleY, objectRatio: objRatio, cropRatio: cropRatio }; @@ -34,7 +34,7 @@ function calcCrop(obj, width, height) { } // Pixels per milimeter - returnValue.ppmm = returnValue.width / (returnValue.dim.width * 10); + returnValue.ppmm = returnValue.width / ((returnValue.dim.width * obj.scaleX) * 10); return returnValue; } diff --git a/src/js/init.js b/src/js/init.js index b7f40bb..ea9e2b4 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -17,7 +17,9 @@ var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450'; - var editor = new ImageEditor('canvas-editor', {'type': 'canvas'}) + var editor = new ImageEditor('canvas-editor', { + type: 'canvas', + }) .loadImage(imageUrl, function() { $input.w.trigger('input'); Event.handleResize();