Updated image editor with not having to crop again after resizing

index.php

@@ -29,7 +29,7 @@
         </form>
         <br /><br />
         <div id="wrapper">
-          <canvas id="canvas-editor" data-image-id="45809"></canvas>
+          <canvas id="canvas-editor" data-image-id="45810"></canvas>
         </div>
         <br /><br /><br />
     </div>

src/js/components/ImageEditor/Canvas.js

@@ -23,7 +23,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         });
 
         this.on('mouse:up', function () {
-            if (this.getImage().__moved) {
+            if (this.getImage().__cropped) {
                 this.getApertures().setTransparent(false);
 
                 // Trigger event to tell the image has been dragged.
@@ -37,7 +37,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         this.setHeight(args.height);
         this.setWidth(args.width);
         this.getButtonMenu().render();
-        this.setImage(this.getImage());
+        this.getViewport().reset();
         this.sendToBack(this.getImage());
         this.getDragbars().resetPosition();
         this.renderAll();

src/js/components/ImageEditor/DragHandle.js

@@ -4,32 +4,37 @@ var config = require('../config');
 
 var DragHandle = function (handler) {
     var _currentAxis;
-    var _dragging;
-    var _moved;
+    var _dragHandle;
+    var _movedHandle;
 
     // Event declarations
     var events = {
         mouseDown: function () {
-            _dragging = true;
+            _dragHandle = true;
+
             _currentAxis = this.axis;
             handler.canvas.getImage().trigger('mousedown');
         },
         mouseUp: function () {
+            if (!_dragHandle) {
+                return;
+            }
 
-            if (!_moved && _currentAxis) {
+            if (!_movedHandle) {
                 $(document).trigger('PIE:dragbar-click', { axis: _currentAxis });
             }
 
-            _dragging = false;
-            _moved = false;
+            _dragHandle = false;
+            _movedHandle = false;
             _currentAxis = null;
             handler.canvas.getImage().trigger('mouseup');
         },
         mouseMove: function (e) {
-            if (!_dragging) {
+            if (!_dragHandle) {
                 return;
             }
-            _moved = true;
+
+            _movedHandle = true;
 
             if (_currentAxis === 'h') {
                 handler.canvas.getImage().left -= e.e.movementX;

src/js/components/ImageEditor/Draggable.js

@@ -13,7 +13,8 @@ function Draggable(img, boundingRect) {
      * Triggers when object is moved
      */
     function onMove() {
-        this.__moved = true;
+        this.__cropped = true;
+
         util.setPositionInside(this, _bounds);
     }
 

src/js/components/ImageEditor/ImageEditor.js

@@ -67,6 +67,7 @@ function ImageEditor(canvasId, args) {
      * @return {ImageEditor}
      */
     this.crop = function (width, height) {
+        _canvas.getImage().__cropped = false;
         _canvas.getViewport().set(width, height);
         return this;
     };

src/js/components/ImageEditor/Viewport.js

@@ -16,6 +16,7 @@ function Viewport(canvas) {
      * Applies viewport to page
      */
     function apply() {
+        var croppedData = getCroppedData();
         canvas.remove(_rect);
 
         _rect = new fabric.Rect({
@@ -31,9 +32,18 @@ function Viewport(canvas) {
         _rect.height += _borderWidth;
         _rect.addTo(canvas).center().setCoords();
 
-        canvas.getImage()
-            .center()
-            .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+        if (croppedData) {
+            // Calculate the new position after screenresize and when the
+            // image already has been cropped to a certain position.
+            var left = _rect.left + _borderWidth - (canvas.getImage().width * croppedData.x);
+            var top = _rect.top + _borderWidth - (canvas.getImage().height * croppedData.y);
+
+            canvas.getImage().set({ left: left, top: top }).setCoords();
+        } else {
+            canvas.getImage().center().setCoords();
+        }
+
+        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()))
         canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
 
         if (canvas.__type !== 'canvas') {
@@ -49,6 +59,9 @@ function Viewport(canvas) {
         canvas.refresh3dView();
     }
 
+    function getCroppedData() {
+        return canvas.getImage().__cropped ? canvas.getImage().transformation.getCropData() : null;
+    }
 
     /**
      * Render the diagonal lines from viewport to edge of the canvas
@@ -126,12 +139,17 @@ function Viewport(canvas) {
         apply();
         this.getGores().reset();
         this.getRulers().reset();
-        canvas.getApertures().setTransparent(true);
-        canvas.getImage().__moved = false;
-        canvas.getButtonMenu().bringToFront();
 
-        // Trigger event to tell the image needs to be dragged.
-        $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
+        if (canvas.getImage().__cropped) {
+
+        } else {
+            canvas.getApertures().setTransparent(true);
+
+            // Trigger event to tell the image needs to be dragged.
+            $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
+        }
+
+        canvas.getButtonMenu().bringToFront();
 
     };
 

src/js/init.js

@@ -23,20 +23,14 @@
             Event.handleResize();
         });
 
-    function getOptimalDimension(currentDimension, ratio) {
-        var width = $input.w.val();
-        var height = $input.h.val();
-
+    function getOptimalDimension(values, currentDimension, ratio) {
         if (currentDimension === 'h') {
-            width = Math.round(height / ratio);
+            values.width = Math.round(values.height * ratio);
         } else {
-            height = Math.round(width / ratio);
+            values.height = Math.round(values.width / ratio);
         }
 
-        return {
-            width: width,
-            height: height
-        };
+        return values;
     }
 
     var Event = {
@@ -70,7 +64,7 @@
         handleResize: function() {
             var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
             var width = $wrapper.width();
-            var height = isFullScreen ? $window.height() : $wrapper.height();
+            var height = isFullScreen ? ($window.height() < 800 ? $window.height() : 800) : $wrapper.height();
             editor.canvas.resize({width: width, height: height});
         }
     };