Fixed window resizing by positioning all elements correctly

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) {

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();
     },
 

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();

src/js/components/ImageEditor/DragbarHandler.js

@@ -25,13 +25,7 @@ function DragbarHandler(canvas) {
 
         this.__handles.init();
 
-        [].concat(_dragbars.h, _dragbars.v).forEach(function (o) {
+        this.bringToFront();
-            o.bringToFront();
-        });
-
-        this.__handles.getHandles().forEach(function (o) {
-            o.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);
 

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) {