Closes #49. Fix z-index issues with JSON loading.

`fabric.Canvas#insertAt` now accepts third (boolean) argument, indicating whether splicing can be used of insertion or not.

HEADER.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "0.5.11" };
+var fabric = fabric || { version: "0.5.12" };
 
 if (typeof exports != 'undefined') {
   exports.fabric = fabric;

dist/all.js

@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "0.5.11" };
+var fabric = fabric || { version: "0.5.12" };
 
 if (typeof exports != 'undefined') {
   exports.fabric = fabric;
@@ -5168,7 +5168,7 @@ fabric.util.string = {
         if (!target) {  
           // image/text was hovered-out from, we remove its borders
           for (var i = this._objects.length; i--; ) {
-            if (!this._objects[i].active) {
+            if (this._objects[i] && !this._objects[i].active) {
               this._objects[i].setActive(false);
             }
           }
@@ -5381,6 +5381,8 @@ fabric.util.string = {
       for (var i = 0, len = this._objects.length; i < len; ++i) {
         currentObject = this._objects[i];
         
+        if (!currentObject) continue;
+        
         if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) || 
             currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
           
@@ -5431,10 +5433,16 @@ fabric.util.string = {
      * @method insertAt
      * @param object {Object} Object to insert
      * @param index {Number} index to insert object at
+     * @param nonSplicing {Boolean} when `true`, no splicing (shifting) of objects occurs
      * @return {fabric.Canvas} instance
      */
-    insertAt: function (object, index) {
-      this._objects.splice(index, 0, object);
+    insertAt: function (object, index, nonSplicing) {
+      if (nonSplicing) {
+        this._objects[index] = object;
+      }
+      else {
+        this._objects.splice(index, 0, object);
+      }
       this.stateful && object.setupState();
       object.setCoords();
       this.renderAll();
@@ -5523,8 +5531,7 @@ fabric.util.string = {
       if (length) {
         for (var i = 0; i < length; ++i) {
           if (!activeGroup ||
-              (activeGroup &&
-              !activeGroup.contains(this._objects[i]))) {
+              (activeGroup && this._objects[i] && !activeGroup.contains(this._objects[i]))) {
             this._draw(canvasToDrawOn, this._objects[i]);
           }
         }
@@ -5656,7 +5663,7 @@ fabric.util.string = {
       
       // then check all of the objects on canvas
       for (var i = this._objects.length; i--; ) {
-        if (this.containsPoint(e, this._objects[i])) {
+        if (this._objects[i] && this.containsPoint(e, this._objects[i])) {
           target = this._objects[i];
           this.relatedTarget = target;
           break;
@@ -6416,7 +6423,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
 
     /** @ignore */
     function onObjectLoaded(object, index) {
-      _this.insertAt(object, index);
+      _this.insertAt(object, index, true);
       object.setCoords();
       if (++numLoadedObjects === numTotalObjects) {
         callback && callback();
@@ -6569,7 +6576,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
         case 'image':
         case 'font':
           fabric[fabric.util.string.capitalize(o.type)].fromObject(o, function (o) {
-            _this.insertAt(o, index);
+            _this.insertAt(o, index, true);
             if (++numLoadedImages === numTotalImages) {
               if (callback) {
                 callback();
@@ -6580,7 +6587,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
         default:
           var klass = fabric[fabric.util.string.camelize(fabric.util.string.capitalize(o.type))];
           if (klass && klass.fromObject) {
-            _this.insertAt(klass.fromObject(o), index);
+            _this.insertAt(klass.fromObject(o), index, true);
           }
           break;
       }

package.json

@@ -1,7 +1,7 @@
 {  
   "name": "fabric", 
   "description":  "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.", 
-  "version":  "0.5.11", 
+  "version":  "0.5.12", 
   "author": "Juriy Zaytsev <kangax@gmail.com>", 
   "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
   "repository": "git://github.com/kangax/fabric.js", 

site

@@ -1 +1 @@
-Subproject commit 968ea5040ec0d69e0e270de81b5bfefcada1a3a7
+Subproject commit 1edb9956fa7b19503000afaa642b4d5d6684a555

src/canvas.class.js

@@ -913,7 +913,7 @@
         if (!target) {  
           // image/text was hovered-out from, we remove its borders
           for (var i = this._objects.length; i--; ) {
-            if (!this._objects[i].active) {
+            if (this._objects[i] && !this._objects[i].active) {
               this._objects[i].setActive(false);
             }
           }
@@ -1126,6 +1126,8 @@
       for (var i = 0, len = this._objects.length; i < len; ++i) {
         currentObject = this._objects[i];
         
+        if (!currentObject) continue;
+        
         if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) || 
             currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
           
@@ -1176,10 +1178,16 @@
      * @method insertAt
      * @param object {Object} Object to insert
      * @param index {Number} index to insert object at
+     * @param nonSplicing {Boolean} when `true`, no splicing (shifting) of objects occurs
      * @return {fabric.Canvas} instance
      */
-    insertAt: function (object, index) {
-      this._objects.splice(index, 0, object);
+    insertAt: function (object, index, nonSplicing) {
+      if (nonSplicing) {
+        this._objects[index] = object;
+      }
+      else {
+        this._objects.splice(index, 0, object);
+      }
       this.stateful && object.setupState();
       object.setCoords();
       this.renderAll();
@@ -1268,8 +1276,7 @@
       if (length) {
         for (var i = 0; i < length; ++i) {
           if (!activeGroup ||
-              (activeGroup &&
-              !activeGroup.contains(this._objects[i]))) {
+              (activeGroup && this._objects[i] && !activeGroup.contains(this._objects[i]))) {
             this._draw(canvasToDrawOn, this._objects[i]);
           }
         }
@@ -1401,7 +1408,7 @@
       
       // then check all of the objects on canvas
       for (var i = this._objects.length; i--; ) {
-        if (this.containsPoint(e, this._objects[i])) {
+        if (this._objects[i] && this.containsPoint(e, this._objects[i])) {
           target = this._objects[i];
           this.relatedTarget = target;
           break;

src/canvas.serialization.js

@@ -40,7 +40,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
 
     /** @ignore */
     function onObjectLoaded(object, index) {
-      _this.insertAt(object, index);
+      _this.insertAt(object, index, true);
       object.setCoords();
       if (++numLoadedObjects === numTotalObjects) {
         callback && callback();
@@ -193,7 +193,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
         case 'image':
         case 'font':
           fabric[fabric.util.string.capitalize(o.type)].fromObject(o, function (o) {
-            _this.insertAt(o, index);
+            _this.insertAt(o, index, true);
             if (++numLoadedImages === numTotalImages) {
               if (callback) {
                 callback();
@@ -204,7 +204,7 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
         default:
           var klass = fabric[fabric.util.string.camelize(fabric.util.string.capitalize(o.type))];
           if (klass && klass.fromObject) {
-            _this.insertAt(klass.fromObject(o), index);
+            _this.insertAt(klass.fromObject(o), index, true);
           }
           break;
       }