Added some event triggers regarding image loading

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

@@ -12,8 +12,8 @@ function ThreeDHandler(canvas) {
             })
             .addWithUpdate(new fabric.Rect({
                 width: canvas.width,
-                height: canvas.height - 60,
+                height: canvas.height - 50,
-                top: 60,
+                top: 50,
                 left: 0,
                 fill: canvas.backgroundColor,
             }));

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) {
+        $document.trigger('PIE:image-start-load');
-            this.get3dHandler().setImage(img);
+
+        $.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));
     },
 });

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