Restructure event handling on Raster item.

- Trigger #onLoad() events from Raster#setImage() also
- Add support for Raster#onError() handler
Closes #849 and #924

examples/Rasters/Raster.html

@@ -19,7 +19,10 @@
             var scale = (Math.sin(event.time * 2) + 1) / 2;
             raster.scale(scale / lastScale);
             lastScale = scale;
-            raster.position = center + [Math.sin(event.time * 3) * 256, Math.sin(event.time * 2.5) * 256];
+            raster.position = center + [
+                Math.sin(event.time * 3) * 256,
+                Math.sin(event.time * 2.5) * 256
+            ];
             raster.rotate(event.delta * 120);
         }
     </script>

src/event/Event.js

@@ -22,6 +22,7 @@ var Event = Base.extend(/** @lends Event# */{
 
     initialize: function Event(event) {
         this.event = event;
+        this.type = event.type;
     },
 
     prevented: false,

src/item/Item.js

@@ -145,7 +145,8 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
             },
 
             // Only for external sources, e.g. Raster
-            onLoad: {}
+            onLoad: {},
+            onError: {}
         }
     ),
 

src/item/Raster.js

@@ -221,6 +221,33 @@ var Raster = Item.extend(/** @lends Raster# */{
     },
 
     setImage: function(image) {
+        var that = this,
+            loaded = false;
+
+        function emit(event) {
+            var view = that.getView(),
+                type = event && event.type || 'load';
+            if (view && that.responds(type)) {
+                paper = view._scope;
+                that.emit(type, new Event(event));
+                // TODO: Request a redraw in the next animation frame from
+                // update() instead!
+                view.update();
+            }
+        }
+
+        function update() {
+            // Both canvas and image have width / height attributes. Due to IE,
+            // naturalWidth / Height needs to be checked for a swell, because it
+            // apparently can have width / height set to 0 when the image is
+            // invisible in the document.
+            that._size = new Size(
+                    image ? image.naturalWidth || image.width : 0,
+                    image ? image.naturalHeight || image.height : 0);
+            that._context = null;
+            that._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS));
+        }
+
         if (this._canvas)
             CanvasProvider.release(this._canvas);
         // Due to similarities, we can handle both canvas and image types here.
@@ -228,22 +255,30 @@ var Raster = Item.extend(/** @lends Raster# */{
             // A canvas object
             this._image = null;
             this._canvas = image;
-            this._loaded = true;
+            loaded = true;
         } else {
             // A image object
             this._image = image;
             this._canvas = null;
-            this._loaded = image && image.complete;
+            loaded = image && image.complete;
+        }
+        this._loaded = loaded;
+        if (loaded) {
+            // Emit load event with a delay, so behavior is the same as when
+            // it's actually loaded and we give the code time to install event.
+            update();
+            setTimeout(emit, 0);
+        } else if (image) {
+            // Trigger the load event on the image once it's loaded
+            DomEvent.add(image, {
+                load: function(event) {
+                    that._loaded = true;
+                    update();
+                    emit(event);
+                },
+                error: emit
+            });
         }
-        // Both canvas and image have width / height attributes. Due to IE,
-        // naturalWidth / Height needs to be checked for a swell, because it
-        // apparently can have width / height set to 0 when the image is
-        // invisible in the document.
-        this._size = new Size(
-                image ? image.naturalWidth || image.width : 0,
-                image ? image.naturalHeight || image.height : 0);
-        this._context = null;
-        this._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS));
     },
 
     /**
@@ -328,35 +363,14 @@ var Raster = Item.extend(/** @lends Raster# */{
     },
 
     setSource: function(src) {
-        var that = this,
-            crossOrigin = this._crossOrigin,
-            image;
-
-        function loaded() {
-            var view = that.getView();
-            if (view) {
-                paper = view._scope;
-                that.setImage(image);
-                that.emit('load');
-                view.update();
-            }
-        }
-
-        // src can be an URL or a DOM ID to load the image from
-        image = document.getElementById(src) || new window.Image();
+        var crossOrigin = this._crossOrigin,
+            // src can be an URL or a DOM ID to load the image from:
+            image = document.getElementById(src) || new window.Image();
         if (crossOrigin)
             image.crossOrigin = crossOrigin;
-        if (image.complete) {
-            // Emit load event with a delay, so behavior is the same as when
-            // it's actually loaded and we give the code time to install event.
-            setTimeout(loaded, 0);
-        } else {
-            // Trigger the load event on the image once it's loaded
-            DomEvent.add(image, { load: loaded });
-            // A new image created above? Set the source now.
-            if (!image.src)
-                image.src = src;
-        }
+        // A new image created above? Set the source now.
+        if (!image.src)
+            image.src = src;
         this.setImage(image);
     },