Visualize border change in 3D mode

index.php

@@ -12,7 +12,7 @@
         <h1>Test</h1>
         <form id="form-control">
             <div>
-                <input type="text" name="image_id" value="45809" />
+                <input type="text" name="image_id" value="45810" />
                 <input type="text" name="w" value="100" />
                 <input type="text" name="h" value="100" />
                 Mirror: <input type="checkbox" class="image-control" name="mirror" />

src/js/components/ImageEditor/3dHandler.js

@@ -7,7 +7,8 @@ function ThreeDHandler(canvas) {
     function init() {
         _overlay
             .set({
-                visible: false
+                visible: false,
+                left: 0
             })
             .addWithUpdate(new fabric.Rect({
                 width: canvas.width,
@@ -16,6 +17,7 @@ function ThreeDHandler(canvas) {
                 left: 0,
                 fill: canvas.backgroundColor,
             }));
+
         canvas.add(_overlay);
     }
 
@@ -33,7 +35,11 @@ function ThreeDHandler(canvas) {
      * @return {ThreeDHandler}
      */
     this.enable = function () {
-        _overlay.setVisible(true).canvas.renderAll();
+        _overlay
+            .set({
+                width: canvas.width,
+                visible: true
+            }).bringToFront().canvas.renderAll();
         return this;
     };
 

src/js/components/ImageEditor/Viewport.js

@@ -140,6 +140,9 @@ function Viewport(canvas) {
      */
     this.setFrame = function (frameType) {
         this.getFrameHandler().setFrames(frameType);
+        if (canvas.get3dHandler().isEnabled()) {
+            canvas.toggle3D(true);
+        }
     };
 
     this.getData = function () {