From 4531f359796e70a38bfef60e79263ad0531529ad Mon Sep 17 00:00:00 2001
From: Rikard Bartholf <rikard@bartholf.nu>
Date: Fri, 19 May 2017 11:32:11 +0200
Subject: [PATCH] Visualize border change in 3D mode

---
 index.php                                  |  2 +-
 src/js/components/ImageEditor/3dHandler.js | 10 ++++++++--
 src/js/components/ImageEditor/Viewport.js  |  3 +++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/index.php b/index.php
index c468ed3..5d56534 100644
--- a/index.php
+++ b/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" />
diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js
index 5659cc0..aeb1bed 100644
--- a/src/js/components/ImageEditor/3dHandler.js
+++ b/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;
     };
 
diff --git a/src/js/components/ImageEditor/Viewport.js b/src/js/components/ImageEditor/Viewport.js
index b1c26a7..1d4a689 100644
--- a/src/js/components/ImageEditor/Viewport.js
+++ b/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 () {