From 9c91d02833ef7f1690cc58e4dad4bc3e88027e13 Mon Sep 17 00:00:00 2001 From: Ruslan Getmansky Date: Tue, 14 Nov 2017 14:07:01 +0200 Subject: [PATCH] P5-1511: Fix for losing image position after navigating back in browser --- dist/image-editor.js | 43 ++++++++++++++++++++++++---------- src/Canvas.js | 3 +++ src/ImageDataHandler.js | 6 +++++ src/ImageEditor.js | 8 +++---- src/Viewport.js | 24 ++++++++++++------- src/utils/is-aspect-changed.js | 2 +- 6 files changed, 60 insertions(+), 26 deletions(-) diff --git a/dist/image-editor.js b/dist/image-editor.js index 894b7b2..63d4ff7 100644 --- a/dist/image-editor.js +++ b/dist/image-editor.js @@ -411,6 +411,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { resize: function (args) { args = args || { height: this.height, width: this.width}; + if (!args.width || !args.height) { + return; + } this.setHeight(args.height); this.setWidth(args.width); @@ -1147,11 +1150,17 @@ function ImageDataHandler(img) { this.setCropData = function() { var viewportBounds = img.canvas.getViewport().getBounds(); + if (!viewportBounds) { + return; + } + var dragAxis = img.canvas.getViewport().getData().axis; _cropData = { x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, + viewportWidth: viewportBounds.width, + viewportHeight: viewportBounds.height, }; }; @@ -1284,17 +1293,17 @@ function ImageEditor(canvasId, args) { * @return {ImageEditor} */ this.crop = function (width, height, unit) { - unit = typeof unit !== 'undefined' ? unit : _settings.unit; - _canvas.getImageData().removeCropData(); + if (!width || !height) { + return this; + } + unit = typeof unit !== 'undefined' ? unit : _settings.unit; _canvas.getViewport().set(width, height, unit); var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height); - if (shouldBeCropped) { _canvas.getImage().__dragged = false; _canvas.getImage().__cropped = true; - _canvas.getImageData().setCropData(); } else { _canvas.getImage().__cropped = false; @@ -1720,14 +1729,17 @@ function Viewport(canvas) { _rect.addTo(canvas).center().setCoords(); if (cropData) { + var viewportBounds = _rect.getInsideBoundingRect(); + // Calculate the new position after screenresize and when the // image already has been cropped to a certain position. - var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x); - var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y); + var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x); + var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y); canvas.getImage().set({ left: left, top: top }).setCoords(); } else { canvas.getImage().center().setCoords(); + canvas.getImageData().setCropData(); } canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage())); @@ -1748,7 +1760,7 @@ function Viewport(canvas) { this.canvas = canvas; this.getBounds = function () { - return _rect.getInsideBoundingRect(); + return _rect ? _rect.getInsideBoundingRect() : null; }; /** @@ -1768,20 +1780,24 @@ function Viewport(canvas) { * @return {Viewport} */ this.set = function (width, height, units) { - var oldData = _data; + if (!width || !height) { + return this; + } _data = util.calcCrop(canvas.getImage(), width, height, units); - var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height)); - if (keepCropping) { - canvas.getImageData().setCropData(); + var cropData = canvas.getImageData().getCropData(); + var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height)); + + if (!isAspectTheSame) { + canvas.getImageData().removeCropData(); } apply(); this.getGores().reset(); this.getRulers().reset(); - if (canvas.getImage().__cropped && !keepCropping) { + if (canvas.getImage().__cropped && !isAspectTheSame) { canvas.getApertures().setTransparent(true); // Trigger event to tell the image needs to be dragged. @@ -1790,6 +1806,7 @@ function Viewport(canvas) { canvas.getButtonMenu().bringToFront(); + return this; }; /** @@ -2214,7 +2231,7 @@ module.exports = calcCrop; 'use strict'; function isAspectChanged(x1, y1, x2, y2) { - return (Math.abs(x1 / y1 - x2 / y2) > 0.01); + return (Math.abs(x1 / y1 - x2 / y2) > 0.005); } module.exports = isAspectChanged; diff --git a/src/Canvas.js b/src/Canvas.js index dd8f14d..ac35fb7 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -52,6 +52,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { resize: function (args) { args = args || { height: this.height, width: this.width}; + if (!args.width || !args.height) { + return; + } this.setHeight(args.height); this.setWidth(args.width); diff --git a/src/ImageDataHandler.js b/src/ImageDataHandler.js index 477df22..603e56a 100644 --- a/src/ImageDataHandler.js +++ b/src/ImageDataHandler.js @@ -15,11 +15,17 @@ function ImageDataHandler(img) { this.setCropData = function() { var viewportBounds = img.canvas.getViewport().getBounds(); + if (!viewportBounds) { + return; + } + var dragAxis = img.canvas.getViewport().getData().axis; _cropData = { x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, + viewportWidth: viewportBounds.width, + viewportHeight: viewportBounds.height, }; }; diff --git a/src/ImageEditor.js b/src/ImageEditor.js index 17920ed..85ecb90 100644 --- a/src/ImageEditor.js +++ b/src/ImageEditor.js @@ -92,17 +92,17 @@ function ImageEditor(canvasId, args) { * @return {ImageEditor} */ this.crop = function (width, height, unit) { - unit = typeof unit !== 'undefined' ? unit : _settings.unit; - _canvas.getImageData().removeCropData(); + if (!width || !height) { + return this; + } + unit = typeof unit !== 'undefined' ? unit : _settings.unit; _canvas.getViewport().set(width, height, unit); var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height); - if (shouldBeCropped) { _canvas.getImage().__dragged = false; _canvas.getImage().__cropped = true; - _canvas.getImageData().setCropData(); } else { _canvas.getImage().__cropped = false; diff --git a/src/Viewport.js b/src/Viewport.js index 7222cf1..774eca7 100644 --- a/src/Viewport.js +++ b/src/Viewport.js @@ -84,14 +84,17 @@ function Viewport(canvas) { _rect.addTo(canvas).center().setCoords(); if (cropData) { + var viewportBounds = _rect.getInsideBoundingRect(); + // Calculate the new position after screenresize and when the // image already has been cropped to a certain position. - var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x); - var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y); + var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x); + var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y); canvas.getImage().set({ left: left, top: top }).setCoords(); } else { canvas.getImage().center().setCoords(); + canvas.getImageData().setCropData(); } canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage())); @@ -112,7 +115,7 @@ function Viewport(canvas) { this.canvas = canvas; this.getBounds = function () { - return _rect.getInsideBoundingRect(); + return _rect ? _rect.getInsideBoundingRect() : null; }; /** @@ -132,20 +135,24 @@ function Viewport(canvas) { * @return {Viewport} */ this.set = function (width, height, units) { - var oldData = _data; + if (!width || !height) { + return this; + } _data = util.calcCrop(canvas.getImage(), width, height, units); - var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height)); - if (keepCropping) { - canvas.getImageData().setCropData(); + var cropData = canvas.getImageData().getCropData(); + var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height)); + + if (!isAspectTheSame) { + canvas.getImageData().removeCropData(); } apply(); this.getGores().reset(); this.getRulers().reset(); - if (canvas.getImage().__cropped && !keepCropping) { + if (canvas.getImage().__cropped && !isAspectTheSame) { canvas.getApertures().setTransparent(true); // Trigger event to tell the image needs to be dragged. @@ -154,6 +161,7 @@ function Viewport(canvas) { canvas.getButtonMenu().bringToFront(); + return this; }; /** diff --git a/src/utils/is-aspect-changed.js b/src/utils/is-aspect-changed.js index e8b41c3..09179c4 100644 --- a/src/utils/is-aspect-changed.js +++ b/src/utils/is-aspect-changed.js @@ -1,7 +1,7 @@ 'use strict'; function isAspectChanged(x1, y1, x2, y2) { - return (Math.abs(x1 / y1 - x2 / y2) > 0.01); + return (Math.abs(x1 / y1 - x2 / y2) > 0.005); } module.exports = isAspectChanged;