From 8ed0030927479729ea441f6df77926ed322abbb9 Mon Sep 17 00:00:00 2001 From: Anders Gustafsson Date: Wed, 26 Sep 2018 13:49:45 +0200 Subject: [PATCH] PW-1468 - Fix cropping for canvas with image on edge --- dist/image-editor.js | 41 ++++++++++++++++++++++++++++++++--------- src/DragHandle.js | 25 +++++++++++++++++++------ src/ImageEditor.js | 14 ++++++++++++-- src/Viewport.js | 2 +- 4 files changed, 64 insertions(+), 18 deletions(-) diff --git a/dist/image-editor.js b/dist/image-editor.js index b24c833..32450b6 100644 --- a/dist/image-editor.js +++ b/dist/image-editor.js @@ -703,7 +703,8 @@ var DragHandle = function (handler) { }; this.init = function () { - var viewport = this.getCanvas().getViewport(); + var canvas = this.getCanvas(); + var viewport = canvas.getViewport(); var viewportData = viewport.getData(); var frameHandler = viewport.getFrameHandler(); var tracks = handler.getTracks(); @@ -713,15 +714,27 @@ var DragHandle = function (handler) { this.getCanvas().remove(this.__handles.y); } - var frameWidth = frameHandler.getFrameSize(); + var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels. + var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm. var frameType = frameHandler.getFrameType(); - var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width; - var handleHeight = frameType == 'image' ? viewportData.height - frameWidth * 2 : viewportData.height; + var handleWidth = viewportData.width; + var handleHeight = viewportData.height; + var widthToDisplay = viewportData.dim.width; + var heightToDisplay = viewportData.dim.height; + var unit = viewportData.dim.units; + + if (frameType == 'image') { + var doubleRealFrameWidth = realFrameWidth * 2; + handleWidth -= frameWidth * 2; + handleHeight -= frameWidth * 2; + widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth; + heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth; + } this.__handles = { - x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth), - y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight) + x: getRect(widthToDisplay + ' ' + unit, handleWidth), + y: getRect(heightToDisplay + ' ' + unit, handleHeight) }; this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords(); @@ -1272,6 +1285,7 @@ function ImageEditor(canvasId, args) { type: 'wallpaper', // canvasFrameType defaults to image on frame canvasFrameType: 'image', + canvasFrameSize: 2.9, // Default texts on the buttons texts: { showThreeD: '3d', @@ -1315,7 +1329,8 @@ function ImageEditor(canvasId, args) { _canvas.toggle3D(this.isActive()); }); _canvas.set({ - __canvasFrameType: _settings.canvasFrameType + __canvasFrameType: _settings.canvasFrameType, + __canvasFrameSize: _settings.canvasFrameSize, }); } else { _canvas.getButtonMenu() @@ -1367,7 +1382,15 @@ function ImageEditor(canvasId, args) { } unit = typeof unit !== 'undefined' ? unit : _settings.unit; - _canvas.getViewport().set(width, height, unit); + var viewport = _canvas.getViewport(); + var frameType = _canvas.__canvasFrameType; + + if (frameType === 'image') { + var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize; + width += 2 * canvasFrameSize; + height += 2 * canvasFrameSize; + } + viewport.set(width, height, unit); var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height); if (shouldBeCropped) { @@ -1853,7 +1876,7 @@ function Viewport(canvas) { if (canvas.__type !== 'canvas') { drawBeams(); } else { - self.setFrame(self.getFrameHandler().getFrameType()); + self.setFrame(canvas.__canvasFrameType); } canvas.getDragbars().apply(); diff --git a/src/DragHandle.js b/src/DragHandle.js index 7238029..be55c74 100644 --- a/src/DragHandle.js +++ b/src/DragHandle.js @@ -97,7 +97,8 @@ var DragHandle = function (handler) { }; this.init = function () { - var viewport = this.getCanvas().getViewport(); + var canvas = this.getCanvas(); + var viewport = canvas.getViewport(); var viewportData = viewport.getData(); var frameHandler = viewport.getFrameHandler(); var tracks = handler.getTracks(); @@ -107,15 +108,27 @@ var DragHandle = function (handler) { this.getCanvas().remove(this.__handles.y); } - var frameWidth = frameHandler.getFrameSize(); + var frameWidth = frameHandler.getFrameSize(); // Rendered frameWidth, in pixels. + var realFrameWidth = canvas.__canvasFrameSize; // Real frame size, in cm. var frameType = frameHandler.getFrameType(); - var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width; - var handleHeight = frameType == 'image' ? viewportData.height - frameWidth * 2 : viewportData.height; + var handleWidth = viewportData.width; + var handleHeight = viewportData.height; + var widthToDisplay = viewportData.dim.width; + var heightToDisplay = viewportData.dim.height; + var unit = viewportData.dim.units; + + if (frameType == 'image') { + var doubleRealFrameWidth = realFrameWidth * 2; + handleWidth -= frameWidth * 2; + handleHeight -= frameWidth * 2; + widthToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth; + heightToDisplay -= unit == 'inch' ? doubleRealFrameWidth / 2.54 : doubleRealFrameWidth; + } this.__handles = { - x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth), - y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight) + x: getRect(widthToDisplay + ' ' + unit, handleWidth), + y: getRect(heightToDisplay + ' ' + unit, handleHeight) }; this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords(); diff --git a/src/ImageEditor.js b/src/ImageEditor.js index 85cf182..2b1e190 100644 --- a/src/ImageEditor.js +++ b/src/ImageEditor.js @@ -12,6 +12,7 @@ function ImageEditor(canvasId, args) { type: 'wallpaper', // canvasFrameType defaults to image on frame canvasFrameType: 'image', + canvasFrameSize: 2.9, // Default texts on the buttons texts: { showThreeD: '3d', @@ -55,7 +56,8 @@ function ImageEditor(canvasId, args) { _canvas.toggle3D(this.isActive()); }); _canvas.set({ - __canvasFrameType: _settings.canvasFrameType + __canvasFrameType: _settings.canvasFrameType, + __canvasFrameSize: _settings.canvasFrameSize, }); } else { _canvas.getButtonMenu() @@ -107,7 +109,15 @@ function ImageEditor(canvasId, args) { } unit = typeof unit !== 'undefined' ? unit : _settings.unit; - _canvas.getViewport().set(width, height, unit); + var viewport = _canvas.getViewport(); + var frameType = _canvas.__canvasFrameType; + + if (frameType === 'image') { + var canvasFrameSize = unit === 'inch' ? _canvas.__canvasFrameSize / 2.54 : _canvas.__canvasFrameSize; + width += 2 * canvasFrameSize; + height += 2 * canvasFrameSize; + } + viewport.set(width, height, unit); var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height); if (shouldBeCropped) { diff --git a/src/Viewport.js b/src/Viewport.js index 903f3cd..e732f35 100644 --- a/src/Viewport.js +++ b/src/Viewport.js @@ -107,7 +107,7 @@ function Viewport(canvas) { if (canvas.__type !== 'canvas') { drawBeams(); } else { - self.setFrame(self.getFrameHandler().getFrameType()); + self.setFrame(canvas.__canvasFrameType); } canvas.getDragbars().apply();