PW-1468 - Fix cropping for canvas with image on edge

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 handleWidth = viewportData.width;
-        var handleHeight = frameType == 'image'  ? viewportData.height - frameWidth * 2 : viewportData.height;
+        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),
+            x: getRect(widthToDisplay + ' ' + unit, handleWidth),
-            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
+            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();

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 handleWidth = viewportData.width;
-        var handleHeight = frameType == 'image'  ? viewportData.height - frameWidth * 2 : viewportData.height;
+        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),
+            x: getRect(widthToDisplay + ' ' + unit, handleWidth),
-            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
+            y: getRect(heightToDisplay + ' ' + unit, handleHeight)
         };
 
         this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();

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) {

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();