4 files changed, 648 insertions, 731 deletions

diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index 9d1b69a9..eedab8fc 100755
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -130,9 +130,7 @@ exports.DragDropMediator = Montage.create(Component, {
                                                 rules = {
                                                         'position': 'absolute',
                                                         'top' : (parseInt(e.currentTarget.filePosition.y) - parseInt(this.application.ninja.stage.userContentTop)) + 'px',
-                                                        'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px',
-                                        '-webkit-transform-style' : 'preserve-3d',
-                                        '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                                                        'left' : (parseInt(e.currentTarget.filePosition.x) - parseInt(this.application.ninja.stage.userContentLeft)) + 'px'
                                         };
                                                 //
                             self.application.ninja.elementMediator.addElements(element, rules);
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 09f2aeed..919aaec1 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -28,16 +28,15 @@ exports.ElementMediator = Montage.create(Component, {
         value: function(elements, rules, notify) {
             if(Array.isArray(elements)) {
                 elements.forEach(function(element) {
-                    element = element;
                     ElementController.addElement(element, rules);
+                    if(element.elementModel && element.elementModel.props3D) {
+                        element.elementModel.props3D.init(element, false);
+                    }
                 });
             } else {
                 ElementController.addElement(elements, rules);
-
-                // TODO - Check with webgl branch - Props seem to be already there.
-                var prop3d = this.get3DProperties(elements);
-                if(prop3d) {
-                    elements.elementModel.controller["set3DProperties"](elements, [prop3d], 0, true);
+                if(elements.elementModel && elements.elementModel.props3D) {
+                    elements.elementModel.props3D.init(elements, false);
                 }
             }
 
@@ -84,6 +83,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) {
@@ -122,70 +138,25 @@ exports.ElementMediator = Montage.create(Component, {
     },
 
     /**
-     Set a property change command for an element or array of elements
-     @param els: Array of elements. Can contain 1 or more elements
-     @param p: Property to set
-     @param value: Value to be set. This is an array of values corresponding to the array of elements
-     @param eventType: Change/Changing. Will be passed to the dispatched event
-     @param source: String for the source object making the call
-     @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated
-     @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
-     */
+    Set a property change command for an element or array of elements
+    @param element: Element
+    @param attribute: Attribute to set
+    @param value: Value to be set.
+    @param currentValue: current value
+    @param source: String for the source object making the call
+    */
     setAttribute: {
-        value: function(el, att, value, eventType, source, currentValue) {
-
-            if(eventType === "Changing") {
-                this._setAttribute(el, att, value, eventType, source);
-            } else {
-                // Calculate currentValue if not found for each element
-                if(currentValue === null) {
-                    currentValue = el.getAttribute(att);
-                }
-
-                var command = Montage.create(Command, {
-                    _el:                { value: el },
-                    _att:               { value: att },
-                    _value:             { value: value },
-                    _previous:          { value: currentValue },
-                    _eventType:         { value: eventType},
-                    _source:            { value: "undo-redo"},
-                    description:        { value: "Set Attribute"},
-                    receiver:           { value: this},
+        value: function(element, attribute, value, currentValue, source) {
+            element.elementModel.controller["setAttribute"](element, attribute, value);
 
-                    execute: {
-                        value: function(senderObject) {
-                            if(senderObject) this._source = senderObject;
-                            this.receiver._setAttribute(this._el, this._att, this._value, this._eventType, this._source);
-                            this._source = "undo-redo";
-                            return "";
-                        }
-                    },
-
-                    unexecute: {
-                        value: function() {
-                            this.receiver._setAttribute(this._el, this._att, this._previous, this._eventType, this._source);
-                            return "";
-                        }
-                    }
-                });
-
-                NJevent("sendToUndo", command);
-                command.execute(source);
-            }
-
-        }
-    },
-
-    _setAttribute: {
-        value: function(el, att, value, eventType, source) {
-            el.elementModel.controller["setAttribute"](el, att, value);
+            // Add to the undo
+            var undoLabel = "Attribute change";
+            document.application.undoManager.add(undoLabel, this.setAttribute, this, element, attribute, currentValue, value, source);
 
-            NJevent("attribute" + eventType, {type : "setAttribute", source: source, data: {"els": el, "prop": att, "value": value}, redraw: null});
+            NJevent("attributeChange");
         }
     },
 
-
-
     /**
      Set a property change command for an element or array of elements
      @param els: Array of elements. Can contain 1 or more elements
@@ -197,7 +168,7 @@ exports.ElementMediator = Montage.create(Component, {
      @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
      */
     setProperty: {
-        value: function(els, p, value, eventType, source, currentValue, stageRedraw) {
+        value: function(els, p, value, eventType, source, currentValue) {
             if(eventType === "Changing") {
                 this._setProperty(els, p, value, eventType, source);
             } else {
@@ -248,7 +219,7 @@ exports.ElementMediator = Montage.create(Component, {
             var el;
 
             for(var i=0, item; item = els[i]; i++) {
-                item.elementModel.controller["setProperty"](item, p, value[i]);
+                item.elementModel.controller["setProperty"](item, p, value[i], eventType, source);
             }
 
             NJevent("element" + eventType, {type : "setProperty", source: source, data: {"els": els, "prop": p, "value": value}, redraw: null});
@@ -256,130 +227,68 @@ exports.ElementMediator = Montage.create(Component, {
     },
 
     /**
-     Set a property change command for an element or array of elements
-     @param els: Array of elements. Can contain 1 or more elements
-     @param props: Property/ies object containing both the value and property
+     Sets a property object for an element or array of elements. The same properties object gets applied to all the elements
+     @param elements: Array of elements objects: element, properties and previousProperties
      @param eventType: Change/Changing. Will be passed to the dispatched event
      @param source: String for the source object making the call
-     @param currentProps *OPTIONAL*: current properties objects array. If not found it will be calculated
-     @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
      */
     setProperties: {
-        value: function(els, props, eventType, source, currentProps, stageRedraw) {
-            if(eventType === "Changing") {
-                this._setProperties(els, props, eventType, source);
-            } else {
-                var command = Montage.create(Command, {
-                    _els:               { value: els },
-                    _props:             { value: props },
-                    _previous:          { value: currentProps },
-                    _eventType:         { value: eventType},
-                    _source:            { value: "undo-redo"},
-                    description:        { value: "Set Properties"},
-                    receiver:           { value: this},
-
-                    execute: {
-                        value: function(senderObject) {
-                            if(senderObject) this._source = senderObject;
-                            this.receiver._setProperties(this._els, this._props, this._eventType, this._source);
+        value: function(elements, eventType, source) {
+
+            elements.forEach(function(elementObject) {
+                elementObject.element.elementModel.controller["setProperties"](elementObject.element, elementObject.properties);
+            });
+
+            if(eventType !== "Changing") {
+                var undoLabel = "Properties change";
+                elements.forEach(function(elementObject) {
+                    var swap = elementObject.properties;
+                    elementObject.properties = elementObject.previousProperties;
+                    elementObject.previousProperties = swap;