From db456d2b683f6c8b9c72b34f4b0db3eecd232fb1 Mon Sep 17 00:00:00 2001 From: kangax Date: Mon, 19 Sep 2011 20:23:00 -0400 Subject: [PATCH] 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 | 2 +- dist/all.js | 27 +++++++++++++++++---------- package.json | 2 +- site | 2 +- src/canvas.class.js | 19 +++++++++++++------ src/canvas.serialization.js | 6 +++--- 6 files changed, 36 insertions(+), 22 deletions(-) diff --git a/HEADER.js b/HEADER.js index f32638c9..ddc4196b 100644 --- a/HEADER.js +++ b/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; diff --git a/dist/all.js b/dist/all.js index 0d931836..72e559dd 100644 --- a/dist/all.js +++ b/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; } diff --git a/package.json b/package.json index 26454ec7..c1f3d2fb 100644 --- a/package.json +++ b/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 ", "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"], "repository": "git://github.com/kangax/fabric.js", diff --git a/site b/site index 968ea504..1edb9956 160000 --- a/site +++ b/site @@ -1 +1 @@ -Subproject commit 968ea5040ec0d69e0e270de81b5bfefcada1a3a7 +Subproject commit 1edb9956fa7b19503000afaa642b4d5d6684a555 diff --git a/src/canvas.class.js b/src/canvas.class.js index b7afd6af..784eca0a 100644 --- a/src/canvas.class.js +++ b/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; diff --git a/src/canvas.serialization.js b/src/canvas.serialization.js index 98afdf80..07625db1 100644 --- a/src/canvas.serialization.js +++ b/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; }