undo functionality completed

src/allplatforms/classes/CreationMenu.js

@@ -211,7 +211,7 @@ SC.loadPackage({ 'CreationMenu': {
                 
                 var myNodeStyle = this.get('myNode').style;
                 
-                SuperGlue.get('document').do('createNewElement', {
+                var newElement = SuperGlue.get('document').do('createNewElement', {
                     classname:  classname,
                     top:        parseInt(myNodeStyle.top),
                     left:       parseInt(myNodeStyle.left),
@@ -219,6 +219,21 @@ SC.loadPackage({ 'CreationMenu': {
                     height:     parseInt(myNodeStyle.height)
                 });
 
+                (function(newElement){
+
+                    SuperGlue.get('history').do('actionHasStarted', function(){
+                        SuperGlue.get('document').do('removeElement', newElement)
+                    });
+
+                    SuperGlue.get('history').do('actionHasSucceeded', function(){
+                        SuperGlue.get('document').do('insertElement', {
+                            index:   SuperGlue.get('document').get('children').length,
+                            element: newElement
+                        })
+                    });
+
+                }).call(this, newElement)
+
 
             }
         }

src/allplatforms/classes/Grid.js

@@ -202,11 +202,35 @@ SC.loadPackage({ 'Grid': {
                         pageWidth = self.get('myDocument').get('layout').width;
 
 
+                        // Undo
+                        (function(gridSize, active, allElements, allElementDimensions){
+
+                            SuperGlue.get('history').do('actionHasStarted', function(){
+                                self.set({ 
+                                    gridSize: gridSize,
+                                    active:   active
+                                });
+                                if(active){
+                                    self.get('gridControl').style.left = self.get('gridSize') * 2 + 'px';
+                                }else{
+                                    self.get('gridControl').style.left = '0px';
+                                }
+                                for(var i = 0, l = allElements.length; i < l; i++){
+                                    allElements[i].set({
+                                        top:    allElementDimensions[i].top,
+                                        left:   allElementDimensions[i].left,
+                                        width:  allElementDimensions[i].width,
+                                        height: allElementDimensions[i].height
+                                    })
+                                }
+                            })
+
+                        }).call(this, gridSize, self.get('active'), allElements, allElementDimensions)
+
+
                         document.addEventListener('mousemove', onMouseMove, true);
                         document.addEventListener('mouseup',   onMouseUp,   true);
 
-                        // UNDO
-
                         evt.stopPropagation();
                         evt.preventDefault();
 
@@ -220,14 +244,14 @@ SC.loadPackage({ 'Grid': {
                             if(self.get('active')){ 
                                 self.set({ active: false }); 
                             }
-                            gridControl.style.left = '-20px';
+                            gridControl.style.left = '0px';
 
                             newGridSize = 0;
 
                         }else if(newGridSize > 70){
 
                             self.set({ gridSize: 70 });
-                            gridControl.style.left = '120px';
+                            gridControl.style.left = '140px';
 
                         }else{
 
@@ -235,7 +259,7 @@ SC.loadPackage({ 'Grid': {
                                 self.set({ active: true }); 
                             }
                             self.set({ gridSize: newGridSize });
-                            gridControl.style.left = newGridSize * 2 - 20 + 'px';
+                            gridControl.style.left = newGridSize * 2 + 'px';
 
                         }
 
@@ -274,14 +298,47 @@ SC.loadPackage({ 'Grid': {
                         SuperGlue.get('document').set({ interactionInProgress: false });
                         self.set({ visible: wasVisible });
                         
-                        // UNDO
+                        // Redo
+                        (function(gridSize, active, allElements){
+
+                            var allElementDimensions = [];
+                            for(var i = 0, l = allElements.length; i < l; i++){
+                                allElementDimensions.push({
+                                    top:    allElements[i].get('top'),
+                                    left:   allElements[i].get('left'),
+                                    width:  allElements[i].get('width'),
+                                    height: allElements[i].get('height')
+                                })
+                            }
+
+                            SuperGlue.get('history').do('actionHasSucceeded', function(){
+                                self.set({ 
+                                    gridSize: gridSize,
+                                    active:   active
+                                });
+                                if(active){
+                                    self.get('gridControl').style.left = self.get('gridSize') * 2 + 'px';
+                                }else{
+                                    self.get('gridControl').style.left = '0px';
+                                }
+                                for(var i = 0, l = allElements.length; i < l; i++){
+                                    allElements[i].set({
+                                        top:    allElementDimensions[i].top,
+                                        left:   allElementDimensions[i].left,
+                                        width:  allElementDimensions[i].width,
+                                        height: allElementDimensions[i].height
+                                    })
+                                }
+                            })
+
+                        }).call(this, self.get('gridSize'), self.get('active'), SuperGlue.get('document').get('children') )
                         
                         evt.stopPropagation();
                         evt.preventDefault();
                         
                     };
 
-                gridControl.style.left = this.get('gridSize') * 2 - 20 + 'px';
+                gridControl.style.left = this.get('gridSize') * 2 + 'px';
 
                 gridControl.addEventListener('mousedown', onMouseDown, false);
 

src/allplatforms/classes/MenuItemBackgroundImg.js

@@ -98,7 +98,7 @@ SC.loadPackage({ 'MenuItemBackgroundImg': {
                     pathParser.href = menuPanel.querySelector('#sg-editing-menu-backgroundImg-input').value;
 
                     SuperGlue.get('fileManager').do('chooseFile', {
-                        oldPath: pathParser.pathName,
+                        oldPath: pathParser.pathname,
                         callback: function(srcPath){
                                         menuPanel.querySelector('#sg-editing-menu-backgroundImg-input').value = srcPath;
                                         self.do('setBackgroundImg', srcPath);

src/allplatforms/classes/MenuItemCenter.js

@@ -21,14 +21,21 @@ SC.loadPackage({ 'MenuItemCenter': {
                 
                 this.get('menuContainer').firstChild.addEventListener('mouseup', function(evt){
 
-                    var myDocument = SuperGlue.get('document');
+                    var myDocument  = SuperGlue.get('document'),
+                        createState = function(myDocument){
+                                            var savedLayout = myDocument.get('layout');
+                                            return function(){
+                                                myDocument.set({ layout: savedLayout });
+                                            }
+                                        };
+
+                    SuperGlue.get('history').do('actionHasStarted', createState(myDocument));
 
                     myDocument.set({ layout: {
-                        
                         centered: !myDocument.get('layout').centered
-
                     }});
 
+                    SuperGlue.get('history').do('actionHasSucceeded', createState(myDocument));
                     
 
                 }, false);

src/allplatforms/classes/MenuItemPaste.js

@@ -26,6 +26,8 @@ SC.loadPackage({ 'MenuItemPaste': {
 
                     SuperGlue.get('clipboard').do('paste', function(pasteData){
 
+                        SuperGlue.get('history').do('actionHasStarted', self.do('createState'));
+
                         if(pasteData.indexOf('class="sg-element"') > -1){
 
                             self.do('pasteSGElement', pasteData);
@@ -36,6 +38,9 @@ SC.loadPackage({ 'MenuItemPaste': {
 
                         }
 
+                        SuperGlue.get('history').do('actionHasSucceeded', self.do('createState'));
+
+                        self.set({ isMenuItemActive: false });
                         theDocumentMenu.do('close');
 
 
@@ -115,6 +120,41 @@ SC.loadPackage({ 'MenuItemPaste': {
                 }).get('node').innerHTML = pasteData;
 
             }
+        },
+
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(children){
+
+                            var savedElements = children.slice();
+                            
+                            return function(){
+
+                                SuperGlue.get('document').set({ children: savedElements });
+
+                                var pageContainer = SuperGlue.get('document').get('pageContainer');
+
+                                while(pageContainer.firstChild){
+                                    pageContainer.removeChild(pageContainer.firstChild);
+                                }
+
+                                for(var i = 0, l = savedElements.length; i < l; i++){
+                                    pageContainer.appendChild(savedElements[i].get('node'));
+                                }
+
+                                SuperGlue.get('document').do('afterLayoutHasChanged');
+                                
+                            }
+
+                        }).call(this, SuperGlue.get('document').get('children'));
+
+
+            }
+
         }
 
 

src/allplatforms/classes/ResizeHandles.js

@@ -204,14 +204,32 @@ SC.loadPackage({ 'ResizeHandles': {
                             }
                         }
                         
+
+                        (function(myElement){
+
+                            var savedDimensions = {
+                                top:    myElement.get('top'),
+                                left:   myElement.get('left'),
+                                width:  myElement.get('width'),
+                                height: myElement.get('height')
+                            }
+
+                            SuperGlue.get('history').do('actionHasStarted', function(){
+                                myElement.set({
+                                    top:    savedDimensions.top,
+                                    left:   savedDimensions.left,
+                                    width:  savedDimensions.width,
+                                    height: savedDimensions.height
+                                })
+                            })
+
+                        }).call(this, myElement)
                         
                         SuperGlue.get('document').set({ interactionInProgress: true });
                         self.set({ selected: true });
                         document.addEventListener('mousemove', onMouseMove, true);
                         document.addEventListener('mouseup',   onMouseUp,   true);
 
-                        // UNDO
-
                         evt.stopPropagation();
                         evt.preventDefault();
                     },
@@ -234,7 +252,26 @@ SC.loadPackage({ 'ResizeHandles': {
                         });
                         self.set({ selected: wasSelected });
 
-                        // UNDO
+                        
+                        (function(myElement){
+
+                            var savedDimensions = {
+                                top:    myElement.get('top'),
+                                left:   myElement.get('left'),
+                                width:  myElement.get('width'),
+                                height: myElement.get('height')
+                            }
+
+                            SuperGlue.get('history').do('actionHasSucceeded', function(){
+                                myElement.set({
+                                    top:    savedDimensions.top,
+                                    left:   savedDimensions.left,
+                                    width:  savedDimensions.width,
+                                    height: savedDimensions.height
+                                })
+                            })
+
+                        }).call(this, myElement)
                         
 
                         evt.stopPropagation();

src/allplatforms/classes/Selection.js

@@ -574,6 +574,50 @@ SC.loadPackage({ 'Selection': {
 
                         }else{
 
+                            (function(elements, thisElement){
+
+                                var savedDimensions = []
+
+                                if(elements.length === 0){
+                                    savedDimensions.push({
+                                        top:    thisElement.get('top'),
+                                        left:   thisElement.get('left'),
+                                        width:  thisElement.get('width'),
+                                        height: thisElement.get('height')
+                                    })
+                                }else{
+                                    for(var i = 0, l = elements.length; i < l; i++){
+                                        savedDimensions.push({
+                                            top:    elements[i].get('top'),
+                                            left:   elements[i].get('left'),
+                                            width:  elements[i].get('width'),
+                                            height: elements[i].get('height')
+                                        })
+                                    }
+                                }
+
+                                SuperGlue.get('history').do('actionHasSucceeded', function(){
+                                    if(elements.length === 0){
+                                        thisElement.set({
+                                            top:    savedDimensions[0].top,
+                                            left:   savedDimensions[0].left,
+                                            width:  savedDimensions[0].width,
+                                            height: savedDimensions[0].height
+                                        })
+                                    }else{
+                                        for(var i = 0, l = elements.length; i < l; i++){
+                                            elements[i].set({
+                                                top:    savedDimensions[i].top,
+                                                left:   savedDimensions[i].left,
+                                                width:  savedDimensions[i].width,
+                                                height: savedDimensions[i].height
+                                            })
+                                        }
+                                    }
+                                })
+
+                            }).call(this, elements, thisElement)
+
                             SuperGlue.get('document').get('widthMarkers').set({ visible: widthMarkersVisible });
                             SuperGlue.get('document').get('grid').set({ visible: gridVisible });
 
@@ -610,6 +654,51 @@ SC.loadPackage({ 'Selection': {
                             widthMarkers.set({ visible: true });
                             grid.set({ visible: true });
 
+                            (function(elements, thisElement){
+
+                                var savedDimensions = []
+
+                                if(elements.length === 0){
+                                    savedDimensions.push({
+                                        top:    thisElement.get('top'),
+                                        left:   thisElement.get('left'),
+                                        width:  thisElement.get('width'),
+                                        height: thisElement.get('height')
+                                    })
+                                }else{
+                                    for(var i = 0, l = elements.length; i < l; i++){
+                                        savedDimensions.push({
+                                            top:    elements[i].get('top'),
+                                            left:   elements[i].get('left'),
+                                            width:  elements[i].get('width'),
+                                            height: elements[i].get('height')
+                                        })
+                                    }
+                                }
+
+                                SuperGlue.get('history').do('actionHasStarted', function(){
+                                    if(elements.length === 0){
+                                        thisElement.set({
+                                            top:    savedDimensions[0].top,
+                                            left:   savedDimensions[0].left,
+                                            width:  savedDimensions[0].width,
+                                            height: savedDimensions[0].height
+                                        })
+                                    }else{
+                                        for(var i = 0, l = elements.length; i < l; i++){
+                                            elements[i].set({
+                                                top:    savedDimensions[i].top,
+                                                left:   savedDimensions[i].left,
+                                                width:  savedDimensions[i].width,
+                                                height: savedDimensions[i].height
+                                            })
+                                        }
+                                    }
+                                })
+
+                            }).call(this, elements, thisElement)
+
+
                             withinClickPrecision = false;
                         }
 

src/allplatforms/classes/WidgetIFrame.js

@@ -97,7 +97,7 @@ SC.loadPackage({ 'WidgetIFrame': {
                     pathParser.href = widgetPanel.querySelector('#sg-editing-widget-iframe-input').value;
 
                     SuperGlue.get('fileManager').do('chooseFile', {
-                        oldPath:  pathParser.pathName,
+                        oldPath:  pathParser.pathname,
                         callback: function(srcPath){
                                         widgetPanel.querySelector('#sg-editing-widget-iframe-input').value = srcPath;
                                         self.do('setIFrameSrc', srcPath);

src/allplatforms/classes/WidgetImgLink.js

@@ -97,7 +97,7 @@ SC.loadPackage({ 'WidgetImgLink': {
                     pathParser.href = widgetPanel.querySelector('#sg-editing-widget-imgLink-input').value;
 
                     SuperGlue.get('fileManager').do('chooseFile', {
-                        oldPath:  pathParser.pathName,
+                        oldPath:  pathParser.pathname,
                         callback: function(linkPath){
                                         widgetPanel.querySelector('#sg-editing-widget-imgLink-input').value = linkPath;
                                         self.do('setImgLink', linkPath);

src/allplatforms/classes/WidgetImgSrc.js

@@ -96,7 +96,7 @@ SC.loadPackage({ 'WidgetImgSrc': {
                     pathParser.href = widgetPanel.querySelector('#sg-editing-widget-imgSrc-input').value;
 
                     SuperGlue.get('fileManager').do('chooseFile', {
-                        oldPath:  pathParser.pathName,
+                        oldPath:  pathParser.pathname,
                         callback: function(srcPath){
                                         widgetPanel.querySelector('#sg-editing-widget-imgSrc-input').value = srcPath;
                                         self.do('setImgSrc', srcPath);

src/allplatforms/classes/WidgetLayerBottom.js

@@ -134,9 +134,9 @@ SC.loadPackage({ 'WidgetLayerBottom': {
             comment: 'I create a reflection function to restore a state.',
             code: function(){
 
-                return  (function(){
+                return  (function(children){
 
-                            var savedElements = SuperGlue.get('document').get('children').slice();
+                            var savedElements = children.slice();
                             
                             return function(){
 
@@ -153,7 +153,7 @@ SC.loadPackage({ 'WidgetLayerBottom': {
                                 }
                                 
                             }
-                        }).call(this);
+                        }).call(this, SuperGlue.get('document').get('children'));
 
 
             }

src/allplatforms/classes/WidgetLayerTop.js

@@ -141,9 +141,9 @@ SC.loadPackage({ 'WidgetLayerTop': {
             comment: 'I create a reflection function to restore a state.',
             code: function(){
 
-                return  (function(){
+                return  (function(children){
 
-                            var savedElements = SuperGlue.get('document').get('children').slice();
+                            var savedElements = children.slice();
                             
                             return function(){
 
@@ -160,7 +160,7 @@ SC.loadPackage({ 'WidgetLayerTop': {
                                 }
                                 
                             }
-                        }).call(this);
+                        }).call(this, SuperGlue.get('document').get('children'));
 
 
             }

src/allplatforms/classes/WidthMarkers.js

@@ -99,11 +99,22 @@ SC.loadPackage({ 'WidthMarkers': {
                         gridVisible = SuperGlue.get('document').get('grid').get('visible');
                         SuperGlue.get('document').get('grid').set({ visible: true });
 
+                        
+                        (function(width){
+
+                            SuperGlue.get('history').do('actionHasStarted', function(){
+                                SuperGlue.get('document').set({ layout: {
+                                    width:    width,
+                                    centered: true
+                                }})
+                            })
+
+                        }).call(this, SuperGlue.get('document').get('layout').width)
+
+
                         document.addEventListener('mousemove', onMouseMove, true);
                         document.addEventListener('mouseup',   onMouseUp,   true);
 
-                        // UNDO
-
                         evt.stopPropagation();
                         evt.preventDefault();
                     },
@@ -121,9 +132,16 @@ SC.loadPackage({ 'WidthMarkers': {
 
                         SuperGlue.get('document').get('grid').set({ visible: gridVisible });
 
+                        (function(width){
 
+                            SuperGlue.get('history').do('actionHasSucceeded', function(){
+                                SuperGlue.get('document').set({ layout: {
+                                    width:    width,
+                                    centered: true
+                                }})
+                            })
 
-                        // UNDO
+                        }).call(this, SuperGlue.get('document').get('layout').width)
                         
                         evt.stopPropagation();
                         evt.preventDefault();

src/allplatforms/css/Grid.css

@@ -18,7 +18,7 @@
 
 	width: 			0px;
 	height: 		21px;
-	margin-left:	5px;
+	margin-left:	-15px;
 	border-style: 	solid;
 	border-width: 	10px 15px 0px 15px;
 	border-color: 	#ff2b40 transparent transparent transparent;