diff --git a/main.css b/main.css index a320681..7a80132 100644 --- a/main.css +++ b/main.css @@ -25,15 +25,7 @@ #wrapper { margin: 0 auto; + width: 100%; + height: 600px; } -.canvas-container { - margin: 0 auto; - width: 100% !important; -} - -canvas { - margin: 0 auto; - max-width: 100% !important; - height: auto !important; -} diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index 793103e..7c87067 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/src/js/components/ImageEditor/Canvas.js @@ -31,6 +31,12 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { }); }, + resize: function (args) { + this.setHeight(args.height); + this.setWidth(args.width); + this.renderAll(); + }, + get3dHandler: function () { return this.__3dHandler || (this.__3dHandler = new ThreeDHandler(this)); diff --git a/src/js/init.js b/src/js/init.js index 12ae401..472969d 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -2,6 +2,9 @@ (function() { var $document = $(document); + var $window = $(window); + var $wrapper = $('#wrapper'); + // Inputs for the editor var $input = { w: $('#form-control input[name="w"]'), @@ -62,6 +65,11 @@ }, SetBorder: function () { editor.canvas.getViewport().setFrame($(this).val()); + }, + handleResize: function() { + var width = $wrapper.width(); + var height = $wrapper.height(); + editor.canvas.resize({width: width, height: height}); } }; @@ -80,4 +88,6 @@ .on('PIE:dragbar-click', function(e, data) { console.log('Clicked on a dragbar! Axis: ' + data.axis); }); + $window.on('resize', Event.handleResize); + }());