From 885a9a2a01c47a07b0de18cb2ddc52ea5e8b8107 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Fri, 19 May 2017 16:16:01 +0200
Subject: [PATCH] Added some event triggers regarding image loading

---
 src/js/components/ImageEditor/3dHandler.js |  4 ++--
 src/js/components/ImageEditor/Canvas.js    | 23 +++++++++++++++++++---
 src/js/init.js                             |  6 ++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/js/components/ImageEditor/3dHandler.js b/src/js/components/ImageEditor/3dHandler.js
index aeb1bed..b4bd69f 100644
--- a/src/js/components/ImageEditor/3dHandler.js
+++ b/src/js/components/ImageEditor/3dHandler.js
@@ -12,8 +12,8 @@ function ThreeDHandler(canvas) {
             })
             .addWithUpdate(new fabric.Rect({
                 width: canvas.width,
-                height: canvas.height - 60,
-                top: 60,
+                height: canvas.height - 50,
+                top: 50,
                 left: 0,
                 fill: canvas.backgroundColor,
             }));
diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js
index c38908d..b9a6797 100644
--- a/src/js/components/ImageEditor/Canvas.js
+++ b/src/js/components/ImageEditor/Canvas.js
@@ -7,6 +7,8 @@ var DragbarHandler = require('./DragbarHandler');
 var Viewport = require('./Viewport');
 var ThreeDHandler = require('./3dHandler');
 
+var $document = $(document);
+
 var Canvas = fabric.util.createClass(fabric.Canvas, {
     initialize: function (id) {
         this.callSuper('initialize', id, {
@@ -25,7 +27,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
                 this.getApertures().setTransparent(false);
 
                 // Trigger event to tell the image has been dragged.
-                $(document).trigger('PIE:dragged');
+                $document.trigger('PIE:dragged');
             }
             this.renderAll();
         });
@@ -144,8 +146,23 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             return this.get3dHandler().disable();
         }
 
-        fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
-            this.get3dHandler().setImage(img);
+        $document.trigger('PIE:image-start-load');
+
+        $.ajax({
+            url: this.get3dUrl(),
+            crossDomain: true,
+            type: "HEAD",
+            cache: true,
+        }).done(function() {
+            fabric.Image.fromURL(encodeURI(this.get3dUrl()), function (img) {
+                if (!img._element) {
+                    $document.trigger('PIE:image-error-load');
+                    return;
+                }
+
+                this.get3dHandler().setImage(img);
+                $document.trigger('PIE:image-end-load');
+            }.bind(this));
         }.bind(this));
     },
 });
diff --git a/src/js/init.js b/src/js/init.js
index 5f4b874..066ce1a 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -88,6 +88,12 @@
         })
         .on('PIE:dragbar-click', function(e, data) {
            console.log('Clicked on a dragbar! Axis: ' + data.axis);
+        })
+        .on('PIE:image-start-load', function() {
+           console.log('Start loading image');
+        })
+        .on('PIE:image-end-load', function() {
+           console.log('Image loaded');
         });
     $window.on('resize', Event.handleResize);