Fixes for 3D image

* URL needs to be URI encoded, else Firefox won't cope
* Hide / Show 3D overlay instead of removing / re-adding

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

@@ -6,34 +6,33 @@ function ThreeDHandler(canvas) {
     var self = this;
 
     function init() {
-        _overlay.addWithUpdate(new fabric.Rect({
-            width: canvas.width,
-            height: canvas.height - 60,
-            top: 60,
-            left: 0,
-            fill: canvas.backgroundColor,
-        }));
+        _overlay
+            .set({
+                visible: false
+            })
+            .addWithUpdate(new fabric.Rect({
+                width: canvas.width,
+                height: canvas.height - 60,
+                top: 60,
+                left: 0,
+                fill: canvas.backgroundColor,
+            }));
         canvas.add(_overlay);
     }
 
     init();
 
     this.disable = function () {
-        canvas.remove(_overlay);
-        canvas.renderAll();
+        _overlay.setVisible(false).canvas.renderAll();
         return this;
     };
 
     this.enable = function () {
-        if (!_overlay.canvas) {
-            canvas.add(_overlay);
-        }
-        canvas.renderAll();
+        _overlay.setVisible(true).canvas.renderAll();
         return this;
     };
 
     this.setImage = function (img) {
-        this.enable();
         img.set({
             originX: 'center',
             originY: 'center',
@@ -43,7 +42,7 @@ function ThreeDHandler(canvas) {
             .remove(_image)
             .add(_image = img);
 
-        return this;
+        return this.enable();
     };
 
 }

src/js/components/ImageEditor/ImageEditor.js

@@ -2,7 +2,6 @@
 
 var Canvas = require('./Canvas');
 var util = require('../util');
-var config = require('../config');
 
 function ImageEditor(canvasId, args) {
     var _canvas;
@@ -111,10 +110,10 @@ function ImageEditor(canvasId, args) {
 
     this.toggle3D = function (showAs3d) {
         if (!showAs3d) {
-            return this.loadImage(this._url);
+            return _canvas.get3dHandler().disable();
         }
 
-        fabric.Image.fromURL(this.get3dUrl(), function (img) {
+        fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
             _canvas.get3dHandler().setImage(img);
         });
     };