From 5f9169ef5167b135f91f59cd0dfacb14e1040395 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 23 May 2017 09:03:29 +0200 Subject: [PATCH] Updated image editor with not having to crop again after resizing --- index.php | 2 +- src/js/components/ImageEditor/Canvas.js | 4 +-- src/js/components/ImageEditor/DragHandle.js | 21 +++++++----- src/js/components/ImageEditor/Draggable.js | 3 +- src/js/components/ImageEditor/ImageEditor.js | 1 + src/js/components/ImageEditor/Viewport.js | 34 +++++++++++++++----- src/js/init.js | 16 +++------ 7 files changed, 50 insertions(+), 31 deletions(-) diff --git a/index.php b/index.php index 5d56534..f3c97da 100644 --- a/index.php +++ b/index.php @@ -29,7 +29,7 @@

- +



diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index b9a6797..1d61b82 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/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(); diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/components/ImageEditor/DragHandle.js index f95eb69..90251ce 100644 --- a/src/js/components/ImageEditor/DragHandle.js +++ b/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; diff --git a/src/js/components/ImageEditor/Draggable.js b/src/js/components/ImageEditor/Draggable.js index 6318771..29ce57c 100644 --- a/src/js/components/ImageEditor/Draggable.js +++ b/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); } diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 285aa16..1a978cc 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/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; }; diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js index fc98e41..e62e388 100644 --- a/src/js/components/ImageEditor/Viewport.js +++ b/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(); }; diff --git a/src/js/init.js b/src/js/init.js index 2e026df..28f6305 100644 --- a/src/js/init.js +++ b/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}); } };