diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/components/ImageEditor/ButtonMenu.js index 59a7857..072aec7 100644 --- a/src/js/components/ImageEditor/ButtonMenu.js +++ b/src/js/components/ImageEditor/ButtonMenu.js @@ -80,7 +80,11 @@ function ButtonMenu(canvas, settings) { var currPos = Math.round(start); _textButtons.forEach(function(textButton) { - textButton.set({top: 10, left: currPos}) + textButton + .set({ + top: 10, + left: currPos + }) .setCoords(); if (!textButton.canvas) { diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 7c87067..eb1fb95 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -34,6 +34,10 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { resize: function (args) { this.setHeight(args.height); this.setWidth(args.width); + this.getButtonMenu().render(); + this.setImage(this.getImage()); + this.sendToBack(this.getImage()); + this.getDragbars().resetPosition(); this.renderAll(); }, diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/components/ImageEditor/DragHandle.js index 740823a..55a5c9b 100644 --- a/src/js/components/ImageEditor/DragHandle.js +++ b/src/js/components/ImageEditor/DragHandle.js @@ -65,6 +65,11 @@ var DragHandle = function (handler) { return [].concat(this.__handles.h, this.__handles.v); }; + this.setHandlePosition = function() { + this.__handles.v.set({left: handler.getTracks().v.left}).setCoords(); + return this; + } + this.init = function () { var viewportData = this.getCanvas().getViewport().getData(); var tracks = handler.getTracks(); diff --git a/src/js/components/ImageEditor/DragbarHandler.js b/src/js/components/ImageEditor/DragbarHandler.js index 70a18fe..2322c1b 100644 --- a/src/js/components/ImageEditor/DragbarHandler.js +++ b/src/js/components/ImageEditor/DragbarHandler.js @@ -25,13 +25,7 @@ function DragbarHandler(canvas) { this.__handles.init(); - [].concat(_dragbars.h, _dragbars.v).forEach(function (o) { - o.bringToFront(); - }); - - this.__handles.getHandles().forEach(function (o) { - o.bringToFront(); - }); + this.bringToFront(); canvas.renderAll(); return this; @@ -39,6 +33,15 @@ function DragbarHandler(canvas) { this.canvas = canvas; + this.bringToFront = function() { + [].concat(_dragbars.h, _dragbars.v).forEach(function (o) { + o.bringToFront(); + }); + + this.__handles.getHandles().forEach(function (o) { + o.bringToFront(); + }); + } /** * Removes dragbars from canvas */ @@ -54,6 +57,12 @@ function DragbarHandler(canvas) { return _dragbars; }; + this.resetPosition = function() { + _dragbars.v.set({ left: canvas.width - 30 }).setCoords(); + this.__handles.setHandlePosition(); + return this; + }; + /** * @return {DragbarHandler} */ @@ -82,7 +91,7 @@ function DragbarHandler(canvas) { moveCursor: 'ns-resize', })) .addTo(canvas) - .set({ left: canvas.width - 40 }).setCoords(); + .set({ left: canvas.width - 30 }).setCoords(); canvas.getImage().on('moving', this.sync); diff --git a/src/js/init.js b/src/js/init.js index 472969d..5417980 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -17,9 +17,10 @@ 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': 'wallpaper'}) .loadImage(imageUrl, function() { $input.w.trigger('input'); + Event.handleResize(); }); function getOptimalDimension(currentDimension, ratio) {