5 files changed, 63 insertions, 9 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index c9164e3e..e792c646 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -73,12 +73,8 @@ exports.ShapesController = Montage.create(CanvasController, {
                     canvas.width = el.width;
                     canvas.height = el.height;
                     canvas.elementModel = el.elementModel;
-                    this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el);
-                    NJevent("elementsRemoved", el);
-                    el = canvas;
-                    this.toggleWebGlMode(el, value);
-                    el.elementModel.shapeModel.GLWorld.render();
-                    this.application.ninja.selectionController.selectElement(el);
+                    this.toggleWebGlMode(canvas, value);
+                    this.application.ninja.elementMediator.replaceElement(canvas, el);
                     return;
                 case "strokeMaterial":
                     var sm = Object.create(MaterialsModel.getMaterial(value));
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index dbb3f30d..5665b09c 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -45,6 +45,7 @@ exports.SelectionController = Montage.create(Component, {
             this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementsRemoved", this, false);
+            this.eventManager.addEventListener("elementReplaced", this, false);
             this.eventManager.addEventListener("selectAll", this, false);
             this.eventManager.addEventListener("switchDocument", this, false);
             this.eventManager.addEventListener("closeDocument", this, false);
@@ -103,6 +104,12 @@ exports.SelectionController = Montage.create(Component, {
         }
     },
 
+    handleElementReplaced: {
+        value: function(event) {
+            this.application.ninja.selectedElements[this.application.ninja.selectedElements.indexOf(event.detail.data.oldChild)] = event.detail.data.newChild;
+        }
+    },
+
     handleSelectAll: {
         value: function(event) {
             var selected = [], childNodes = [];
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index c7c1c08d..a5428ea3 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -112,6 +112,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
             this.eventManager.addEventListener("elementsRemoved", this, false);
             this.eventManager.addEventListener("elementChange", this, false);
             this.eventManager.addEventListener("closeDocument", this, false);
+            this.eventManager.addEventListener("elementReplaced", this, false);
                 }
         },
 
@@ -170,13 +171,41 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                     this.removeElement(element);
                 }, this);
             } else {
-                this.removeElement(elements._element || elements);
+                this.removeElement(elements);
             }
 
             this.drawWorkingPlane();
         }
     },
 
+    handleElementReplaced: {
+        value: function(event) {
+            var oldElement = event.detail.data.oldChild;
+            var newElement = event.detail.data.newChild;
+
+            // check if we already know about this object
+            var n = this._eltArray.length,
+                plane;
+            for (var i=0;  i<n;  i++) {
+                if (oldElement === this._eltArray[i]) {
+                    this._eltArray[i] = newElement;
+                    plane = this._planesArray[i];
+                    break;
+                }
+            }
+
+            if(!plane) {
+                this._eltArray.push( newElement );
+                plane = Object.create(this.ElementPlanes, {});
+                this._planesArray.push( plane );
+            }
+
+            plane.setElement( newElement );
+            plane.init();
+            newElement.elementModel.props3D.elementPlane = plane;
+        }
+    },
+
     _shouldUpdatePlanes: {
         value: function(props) {
             if(!props) {
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 9f6b9ed1..a401c363 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -124,6 +124,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
     initialize: {
         value: function() {
             this.eventManager.addEventListener("elementsRemoved", this, false);
+            this.eventManager.addEventListener("elementReplaced", this, false);
         }
     },
 
@@ -170,15 +171,19 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
             if(Array.isArray(elements)) {
                 elements = Array.prototype.slice.call(elements, 0);
                 elements.forEach(function(element) {
-                    element = element._element || element;
                     self.removeElementFrom2DCache(element);
                 });
             } else {
-                this.removeElementFrom2DCache(elements._element || elements);
+                this.removeElementFrom2DCache(elements);
             }
         }
     },
 
+    handleElementReplaced: {
+        value: function(event) {
+            this._isCacheInvalid = true;
+        }
+    },
 
     setCurrentStage: {
         value: function(stage) {
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 09f2aeed..b0efc02b 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -84,6 +84,23 @@ exports.ElementMediator = Montage.create(Component, {
         }
     },
 
+    replaceElement: {
+        value: function(newChild, oldChild, notify) {
+
+            this.application.ninja.currentDocument.documentRoot.replaceChild(newChild, oldChild);
+
+            var undoLabel = "replace element";
+
+            document.application.undoManager.add(undoLabel, this.replaceElement, this, oldChild, newChild);
+
+            this.application.ninja.documentController.activeDocument.needsSave = true;
+
+            if(notify || notify === undefined) {
+                NJevent("elementReplaced", {type : "replaceElement", data: {"newChild": newChild, "oldChild": oldChild}});
+            }
+        }
+    },
+
     getProperty: {
         value: function(el, prop, valueMutator) {
             if(!el.elementModel) {