undo (almost complete)

src/allplatforms/classes/ColorPickerWidget.js

@@ -20,7 +20,7 @@ SC.loadPackage({ 'ColorPickerWidget': {
                                     this.get('widgetMenu').classList.add('active');
 
                                     // prepare undo
-                                    this.set({ aColorWasChoosen:   false });
+                                    this.set({ aColorWasChoosen: false });
                                     SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
                                     
 
@@ -42,7 +42,7 @@ SC.loadPackage({ 'ColorPickerWidget': {
                           }
                         },
 
-        aColorWasChoosen:       { comment: 'Wether a color was choosen or not.' }
+        aColorWasChoosen: { comment: 'Wether a color was choosen or not.' }
 
     },
 

src/allplatforms/classes/Document.js

@@ -189,6 +189,30 @@ SC.loadPackage({ 'Document': {
             }
         },
 
+        insertElement: {
+            comment: 'I insert an Element.',
+            code: function(indexOfAndElement){
+
+                if(indexOfAndElement.index >= 0){
+
+                    if(this.get('children')[indexOfAndElement.index]){
+                        this.get('pageContainer').insertBefore(
+                            indexOfAndElement.element.get('node'),
+                            this.get('children')[indexOfAndElement.index].get('node')
+                        );
+                    }else{
+                        this.get('pageContainer').appendChild(
+                            indexOfAndElement.element.get('node')
+                        );
+                    }
+                    this.get('children').splice(indexOfAndElement.index, 0, indexOfAndElement.element);
+                    
+                }
+                this.do('afterLayoutHasChanged');
+
+            }
+        },
+
 
         layerUp: {
             comment: 'I move an Element upwards in the layer order.',

src/allplatforms/classes/ImageElement.js

@@ -7,7 +7,7 @@ SC.loadPackage({ 'ImageElement': {
 
     sharedProperties: {
         protoHTML:          { initValue: '<div class="sg-element" data-superglue-type="ImageElement" style="left: 0px; top: 0px; width: 0px; height: 0px;">'
-                                        +'\t<div style="width: 100%; height: 100%; background-image: url(\'/resources/default/img/placeholder.png\'); background-repeat: repeat;"></div>'
+                                        +'\t<img src="/resources/img/defaultImg.svg" style="min-width: 100%; min-height: 100%;">'
                                         +'</div>' },
         applicableWidgets:  { initValue: [ 'WidgetBackgroundColor', 'WidgetBorderColor', 'WidgetBorder', 'WidgetBorderRadius', 'WidgetPadding', 'WidgetOpacity', 'WidgetImgLink', 'WidgetImgDimensions', 'WidgetImgSrc' ] },
         creationMenuItem:   { initValue: '<div class="sg-editing-creation-menu-container"><button id="sg-editing-creation-menu-imageElement" class="sg-editing-creation-menu-button" data-tooltip="Image"></button></div>' }

src/allplatforms/classes/MenuItem.js

@@ -73,7 +73,7 @@ SC.loadPackage({ 'MenuItem': {
                 menuContainer.addEventListener('mouseup', function(evt){
                     if(self.get('isActionButton')){
                         theDocumentMenu.set({ activeMenuItem:   null  });
-                                   self.set({ isMenuItemActive: false });
+                                   self.set({ isMenuItemActive: true  });
                     }
                 }, false);
 

src/allplatforms/classes/MenuItemBackgroundColor.js

@@ -24,7 +24,10 @@ SC.loadPackage({ 'MenuItemBackgroundColor': {
                                     }
                                     this.get('menuContainer').classList.add('active');
 
-                                    // update Value
+                                    // prepare undo
+                                    this.set({ aColorWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
+
 
                                 }else{
 
@@ -32,11 +35,19 @@ SC.loadPackage({ 'MenuItemBackgroundColor': {
                                         this.get('menuContainer').removeChild(this.get('menuPanel'));
                                     }
                                     this.get('menuContainer').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aColorWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aColorWasChoosen: false });
                                 
                                 }
                                 return aBoolean
                             }
-                          }
+                          },
+
+        aColorWasChoosen: { comment: 'Wether a color was choosen or not.' }
 
     },
 
@@ -65,6 +76,8 @@ SC.loadPackage({ 'MenuItemBackgroundColor': {
 
                         document.body.style.backgroundColor = colorCode;
 
+                        self.set({ aColorWasChoosen: true });
+
                     }
 
 
@@ -246,6 +259,22 @@ SC.loadPackage({ 'MenuItemBackgroundColor': {
 
             }
 
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+                            var savedColor = document.body.style.backgroundColor
+                            return function(){
+                                document.body.style.backgroundColor = savedColor
+                            }
+                        }).call(this);
+
+
+            }
         }
 
 

src/allplatforms/classes/MenuItemBackgroundImg.js

@@ -39,6 +39,10 @@ SC.loadPackage({ 'MenuItemBackgroundImg': {
                                                     .replace(document.location.origin, '');
                                     
                                     this.get('menuPanel').querySelector('#sg-editing-menu-backgroundImg-input').value = srcURL;
+
+                                    // prepare undo
+                                    this.set({ aImgWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
                                     
 
                                 }else{
@@ -47,11 +51,19 @@ SC.loadPackage({ 'MenuItemBackgroundImg': {
                                         this.get('menuContainer').removeChild(this.get('menuPanel'));
                                     }
                                     this.get('menuContainer').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aImgWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aImgWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aImgWasChoosen: { comment: 'Wether a color was choosen or not.' }
 
     },
 
@@ -118,6 +130,24 @@ SC.loadPackage({ 'MenuItemBackgroundImg': {
 
                 document.body.style.backgroundImage = srcURL === '' ? '' : 'url("' + srcURL + '")';
 
+                this.set({ aImgWasChoosen: true });
+
+            }
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+                            var savedImg = document.body.style.backgroundImage
+                            return function(){
+                                document.body.style.backgroundImage = savedImg
+                            }
+                        }).call(this);
+
+
             }
         }
 

src/allplatforms/classes/MenuItemBackgroundRepeat.js

@@ -35,6 +35,10 @@ SC.loadPackage({ 'MenuItemBackgroundRepeat': {
                                     }
                                     this.get('menuContainer').classList.add('active');
 
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
+
 
                                 }else{
 
@@ -42,11 +46,19 @@ SC.loadPackage({ 'MenuItemBackgroundRepeat': {
                                         this.get('menuContainer').removeChild(this.get('menuPanel'));
                                     }
                                     this.get('menuContainer').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen or not.' }
 
     },
 
@@ -67,19 +79,21 @@ SC.loadPackage({ 'MenuItemBackgroundRepeat': {
                         
                         switch(newDim){
                             case 'tileX':
-                                document.body.style.backgroundRepeat = 'repeat-x'
+                                document.body.style.backgroundRepeat = 'repeat-x';
                                 break;
 
                             case 'tileY':
-                                document.body.style.backgroundRepeat = 'repeat-y'
+                                document.body.style.backgroundRepeat = 'repeat-y';
                                 break;
 
                             default:
-                                document.body.style.backgroundRepeat = 'repeat'
+                                document.body.style.backgroundRepeat = 'repeat';
                                 break;
                         }
 
-                        evt.stopPropagation()
+                        self.set({ aValueWasChoosen: true });
+
+                        evt.stopPropagation();
 
                     },
 
@@ -98,7 +112,23 @@ SC.loadPackage({ 'MenuItemBackgroundRepeat': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+                            var savedValue = document.body.style.backgroundRepeat
+                            return function(){
+                                document.body.style.backgroundRepeat = savedValue
+                            }
+                        }).call(this);
+
+
+            }
+        }
 
 
     }

src/allplatforms/classes/MenuItemPageTitle.js

@@ -35,6 +35,10 @@ SC.loadPackage({ 'MenuItemPageTitle': {
                                     this.get('menuPanel').querySelector('#sg-editing-menu-pageTitle-input').value = (
                                         document.getElementsByTagName('title')[0].innerHTML
                                     );
+
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
                                     
 
                                 }else{
@@ -43,11 +47,19 @@ SC.loadPackage({ 'MenuItemPageTitle': {
                                         this.get('menuContainer').removeChild(this.get('menuPanel'));
                                     }
                                     this.get('menuContainer').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false });
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen or not.' }
 
     },
 
@@ -97,6 +109,24 @@ SC.loadPackage({ 'MenuItemPageTitle': {
 
                 document.getElementsByTagName('title')[0].innerHTML = titleString;
 
+                this.set({ aValueWasChoosen: true });
+
+            }
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+                            var savedTitle = document.getElementsByTagName('title')[0].innerHTML
+                            return function(){
+                                document.getElementsByTagName('title')[0].innerHTML = savedTitle
+                            }
+                        }).call(this);
+
+
             }
         }
 

src/allplatforms/classes/SliderWidget.js

@@ -19,7 +19,9 @@ SC.loadPackage({ 'SliderWidget': {
                                     }
                                     this.get('widgetMenu').classList.add('active');
 
-                                    // update Value
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
 
                                 }else{
 
@@ -27,11 +29,19 @@ SC.loadPackage({ 'SliderWidget': {
                                         this.get('widgetMenu').removeChild(this.get('widgetPanel'));
                                     }
                                     this.get('widgetMenu').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a slider value was choosen or not.' }
 
     },
 
@@ -153,7 +163,8 @@ SC.loadPackage({ 'SliderWidget': {
                 handle.style.top = sliderConfig.startValue * maxY + 'px';
                 
                 this.set({ 
-                    widgetPanel: widgetPanel
+                    widgetPanel: widgetPanel,
+                    aValueWasChoosen: false
                 });
 
             }

src/allplatforms/classes/TextElement.js

@@ -7,7 +7,7 @@ SC.loadPackage({ 'TextElement': {
     
     sharedProperties: {
         protoHTML:          { initValue: '<div class="sg-element" data-superglue-type="TextElement" style="left: 0px; top: 0px; width: 0px; height: 0px;">'
-                                        +'\t<p style="font-family: Helvetica; font-size: 18px; color: rgb(255, 255, 255);">Hello friend, I am SuperGlue.</p>'
+                                        +'\t<p style="font-family: \'Sans\'; font-size: 40px;">Text</p>'
                                         +'</div>' },
         applicableWidgets:  { initValue: [ 'WidgetBackgroundColor', 'WidgetBorderColor', 'WidgetBorder', 'WidgetBorderRadius', 'WidgetPadding', 'WidgetOpacity' ] },
         creationMenuItem:   { initValue: '<div class="sg-editing-creation-menu-container"><button id="sg-editing-creation-menu-textElement" class="sg-editing-creation-menu-button" data-tooltip="Text"></button></div>' }

src/allplatforms/classes/Widget.js

@@ -66,7 +66,7 @@ SC.loadPackage({ 'Widget': {
                         if(activeWidget){ 
                             activeWidget.set({ isWidgetActive: false }) 
                         }
-                        self.set({ isWidgetActive: false });
+                        self.set({ isWidgetActive: true });
 
                     }else{
                         

src/allplatforms/classes/WidgetBorder.js

@@ -32,31 +32,7 @@ SC.loadPackage({ 'WidgetBorder': {
                     setCallback:    function(sliderVal){
                                         
                                         var borderVal = Math.round(sliderVal * 24),
-                                            elements  = theSelection.get('elements'),
-                                            
-                                            borderRecorder = function(elements){
-                                                                var savedBorders = []
-                                                                for(var i = 0, l = elements.length; i < l; i++){
-                                                                    savedBorders.push({
-                                                                        color: elements[i].get('borderColor'),
-                                                                        width: elements[i].get('borderWidth')
-                                                                    })
-                                                                }
-                                                                return function(){
-                                                                    for(var i = 0, l = elements.length; i < l; i++){
-                                                                        elements[i].set({
-                                                                            borderColor: savedBorders[i].color,
-                                                                            borderWidth: savedBorders[i].width
-                                                                        });
-                                                                        elements[i].set({ 
-                                                                            width:  elements[i].get('width'),
-                                                                            height: elements[i].get('height')
-                                                                        });
-                                                                    }
-                                                                }
-                                                            };
-
-                                        SuperGlue.get('history').do('actionHasStarted', borderRecorder.call(this, elements));
+                                            elements  = theSelection.get('elements');
                                     
                                         for(var i = 0, l = elements.length; i < l; i++){
 
@@ -71,8 +47,7 @@ SC.loadPackage({ 'WidgetBorder': {
                                             
                                         }
 
-                                        SuperGlue.get('history').do('actionHasSucceeded', borderRecorder.call(this, elements));
-                                    
+                                        this.set({ aValueWasChoosen: true });
 
                                     }
                 });
@@ -80,6 +55,37 @@ SC.loadPackage({ 'WidgetBorder': {
 
             }
 
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedBorders = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedBorders.push({
+                                    borderColor: elements[i].get('borderColor'),
+                                    borderWidth: elements[i].get('borderWidth')
+                                })
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].set({
+                                        borderColor: savedBorders[i].borderColor,
+                                        borderWidth: savedBorders[i].borderWidth
+                                    });
+                                    elements[i].set({ 
+                                        width:  elements[i].get('width'),
+                                        height: elements[i].get('height')
+                                    });
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
         }
 
 

src/allplatforms/classes/WidgetBorderRadius.js

@@ -32,20 +32,7 @@ SC.loadPackage({ 'WidgetBorderRadius': {
                     setCallback:    function(sliderVal){
                                         
                                         var borderRadiusVal = Math.round(sliderVal * 50),
-                                            elements  = theSelection.get('elements'),
-                                            borderRadiusRecorder = function(elements){
-                                                                var savedBorderRadii = []
-                                                                for(var i = 0, l = elements.length; i < l; i++){
-                                                                    savedBorderRadii.push(elements[i].get('node').style.borderRadius)
-                                                                }
-                                                                return function(){
-                                                                    for(var i = 0, l = elements.length; i < l; i++){
-                                                                        elements[i].get('node').style.borderRadius = savedBorderRadii[i]
-                                                                    }
-                                                                }
-                                                            };
-
-                                        SuperGlue.get('history').do('actionHasStarted', borderRadiusRecorder.call(this, elements));
+                                            elements  = theSelection.get('elements');
 
                                         if(borderRadiusVal === 0){
 
@@ -61,10 +48,7 @@ SC.loadPackage({ 'WidgetBorderRadius': {
 
                                         }
 
-                                        SuperGlue.get('history').do('actionHasSucceeded', borderRadiusRecorder.call(this, elements));
-                                        
-
-                                    
+                                        this.set({ aValueWasChoosen: true });
 
                                     }
                 });
@@ -72,8 +56,29 @@ SC.loadPackage({ 'WidgetBorderRadius': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedBorderRadii = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedBorderRadii.push(elements[i].get('node').style.borderRadius)
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].get('node').style.borderRadius = savedBorderRadii[i]
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
 
+        }
 
     }
 

src/allplatforms/classes/WidgetDelete.js

@@ -29,11 +29,43 @@ SC.loadPackage({ 'WidgetDelete': {
                     var elements = self.get('selection').get('elements').slice();
                     self.get('selection').do('clearAll');
 
-                    for(var i = 0, l = elements.length; i < l; i++){
-                        
-                        SuperGlue.get('document').do('removeElement', elements[i]);
-
-                    }
+                    SuperGlue.get('history').do('actionHasStarted', (function(elements){
+
+                        var indicesAndElements = [];
+                        for(var i = 0, l = elements.length; i < l; i++){
+                            indicesAndElements.push({
+                                index:   SuperGlue.get('document').get('children').indexOf(elements[i]),
+                                element: elements[i]
+                            })
+                        }
+                        indicesAndElements.sort(function(a, b){
+                            if(a.index > b.index){
+                                return 1;
+                            }else{
+                                return -1;
+                            }
+                        });
+
+                        return function(){
+
+                            for(var i = 0, l = indicesAndElements.length; i < l; i++){
+                                SuperGlue.get('document').do('insertElement', indicesAndElements[i]);
+                            }
+                            
+                        }
+
+
+                    }).call(this, elements));
+
+                    var deleteElements = function(){
+                        for(var i = 0, l = elements.length; i < l; i++){
+                            SuperGlue.get('document').do('removeElement', elements[i]);
+                        }
+                    };
+
+                    deleteElements();
+
+                    SuperGlue.get('history').do('actionHasSucceeded', deleteElements);
 
 
 

src/allplatforms/classes/WidgetEditHTML.js

@@ -38,9 +38,16 @@ SC.loadPackage({ 'WidgetEditHTML': {
                                 html:       rawHtml,
                                 
                                 callback:   (function(){
-                                                var contentNode = elements[i].get('contentNode');
+                                                var contentNode = elements[i].get('contentNode'),
+                                                    oldInnerHTML = contentNode.innerHTML;
                                                 return function(aHTMLString){
+                                                    SuperGlue.get('history').do('actionHasStarted', function(){
+                                                        contentNode.innerHTML = oldInnerHTML;
+                                                    });
                                                     contentNode.innerHTML = aHTMLString;
+                                                    SuperGlue.get('history').do('actionHasSucceeded', function(){
+                                                        contentNode.innerHTML = aHTMLString;
+                                                    })
                                                 }
                                             }).call(this),
 

src/allplatforms/classes/WidgetIFrame.js

@@ -40,17 +40,29 @@ SC.loadPackage({ 'WidgetIFrame': {
                                         );
                                     }
 
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
+
                                 }else{
 
                                     if(this.get('widgetPanel').parentNode === this.get('widgetMenu')){
                                         this.get('widgetMenu').removeChild(this.get('widgetPanel'));
                                     }
                                     this.get('widgetMenu').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen (needed for undo).' }
 
     },
 
@@ -124,8 +136,32 @@ SC.loadPackage({ 'WidgetIFrame': {
 
                 }
 
+                this.set({ aValueWasChoosen: true });
+
 
             }
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedIFrameSrc = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedIFrameSrc.push(elements[i].get('node').firstElementChild.src)
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].get('node').firstElementChild.src = savedIFrameSrc[i]
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
+
         }
 
 

src/allplatforms/classes/WidgetImgDimensions.js

@@ -38,6 +38,9 @@ SC.loadPackage({ 'WidgetImgDimensions': {
                                     }
                                     this.get('widgetMenu').classList.add('active');
 
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
 
                                 }else{
 
@@ -45,11 +48,19 @@ SC.loadPackage({ 'WidgetImgDimensions': {
                                         this.get('widgetMenu').removeChild(this.get('widgetPanel'));
                                     }
                                     this.get('widgetMenu').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen (needed for undo).' }
 
     },
 
@@ -74,6 +85,8 @@ SC.loadPackage({ 'WidgetImgDimensions': {
                             elements[i].set({ dimensions: newDim });
                         }
 
+                        self.set({ aValueWasChoosen: true });
+
                         evt.stopPropagation()
 
                     },
@@ -94,7 +107,29 @@ SC.loadPackage({ 'WidgetImgDimensions': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedImgState = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedImgState.push(elements[i].get('node').innerHTML)
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].get('node').innerHTML = savedImgState[i]
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
+
+        }
 
 
     }

src/allplatforms/classes/WidgetImgLink.js

@@ -40,17 +40,29 @@ SC.loadPackage({ 'WidgetImgLink': {
                                         );
                                     }
 
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
+
                                 }else{
 
                                     if(this.get('widgetPanel').parentNode === this.get('widgetMenu')){
                                         this.get('widgetMenu').removeChild(this.get('widgetPanel'));
                                     }
                                     this.get('widgetMenu').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen (needed for undo).' }
 
     },
 
@@ -147,8 +159,31 @@ SC.loadPackage({ 'WidgetImgLink': {
 
                 }
 
+                this.set({ aValueWasChoosen: true });
+
+            }
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedImgState = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedImgState.push(elements[i].get('node').innerHTML)
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].get('node').innerHTML = savedImgState[i]
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
 
             }
+
         }
 
 

src/allplatforms/classes/WidgetImgSrc.js

@@ -39,17 +39,29 @@ SC.loadPackage({ 'WidgetImgSrc': {
                                         this.get('widgetPanel').querySelector('#sg-editing-widget-imgSrc-input').value = elements[0].get('imgSource');
                                     }
 
+                                    // prepare undo
+                                    this.set({ aValueWasChoosen: false });
+                                    SuperGlue.get('history').do('actionHasStarted', this.do('createState'));
+
                                 }else{
 
                                     if(this.get('widgetPanel').parentNode === this.get('widgetMenu')){
                                         this.get('widgetMenu').removeChild(this.get('widgetPanel'));
                                     }
                                     this.get('widgetMenu').classList.remove('active');
+
+                                    // finish undo
+                                    if(this.get('aValueWasChoosen')){
+                                        SuperGlue.get('history').do('actionHasSucceeded', this.do('createState'));
+                                    }
+                                    this.set({ aValueWasChoosen: false })
                                 
                                 }
                                 return aBoolean
                           }
-                        }
+                        },
+
+        aValueWasChoosen: { comment: 'Wether a value was choosen (needed for undo).' }
 
     },
 
@@ -124,8 +136,31 @@ SC.loadPackage({ 'WidgetImgSrc': {
 
                 }
 
+                this.set({ aValueWasChoosen: true });
+
+            }
+        },
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedImgSrc = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedImgSrc.push(elements[i].get('imgSource'))
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].set({ imgSource: savedImgSrc[i] }) 
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
 
             }
+
         }
 
 

src/allplatforms/classes/WidgetLayerBottom.js

@@ -34,6 +34,7 @@ SC.loadPackage({ 'WidgetLayerBottom': {
                             return;
                         }
 
+                        SuperGlue.get('history').do('actionHasStarted', self.do('createState'));
 
                         if(elements.length === 1){
 
@@ -117,7 +118,7 @@ SC.loadPackage({ 'WidgetLayerBottom': {
 
                         }
 
-
+                        SuperGlue.get('history').do('actionHasSucceeded', self.do('createState'));
 
                     };
 
@@ -126,7 +127,38 @@ SC.loadPackage({ 'WidgetLayerBottom': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+
+                            var savedElements = SuperGlue.get('document').get('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'));
+                                }
+                                
+                            }
+                        }).call(this);
+
+
+            }
+
+        }
 
 
     }

src/allplatforms/classes/WidgetLayerTop.js

@@ -35,6 +35,7 @@ SC.loadPackage({ 'WidgetLayerTop': {
                             return;
                         }
 
+                        SuperGlue.get('history').do('actionHasStarted', self.do('createState'));
 
                         if(elements.length === 1){
 
@@ -118,9 +119,10 @@ SC.loadPackage({ 'WidgetLayerTop': {
                             }
 
 
-
                         }
 
+                        SuperGlue.get('history').do('actionHasSucceeded', self.do('createState'));
+
                         
 
                     };
@@ -132,7 +134,38 @@ SC.loadPackage({ 'WidgetLayerTop': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(){
+
+                            var savedElements = SuperGlue.get('document').get('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'));
+                                }
+                                
+                            }
+                        }).call(this);
+
+
+            }
+
+        }
 
 
     }

src/allplatforms/classes/WidgetLock.js

@@ -35,6 +35,8 @@ SC.loadPackage({ 'WidgetLock': {
                 var self = this,
                     onMouseUp = function(evt){
 
+                        SuperGlue.get('history').do('actionHasStarted', self.do('createState'))
+
                         if(self.get('locked')){
 
                             for(var myElements = self.get('selection').get('elements'),
@@ -58,6 +60,8 @@ SC.loadPackage({ 'WidgetLock': {
 
                         self.get('selection').do('updateLockGroup');
 
+                        SuperGlue.get('history').do('actionHasSucceeded', self.do('createState'))
+
                     };
 
                 this.get('widgetButton').addEventListener('mouseup', onMouseUp, false)
@@ -65,7 +69,30 @@ SC.loadPackage({ 'WidgetLock': {
 
     		}
 
-    	}
+    	},
+
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedGroupState = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedGroupState.push(elements[i].get('group'))
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].set({ group: savedGroupState[i] }) 
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
+
+        }
 
 
     }

src/allplatforms/classes/WidgetOpacity.js

@@ -47,9 +47,8 @@ SC.loadPackage({ 'WidgetOpacity': {
                                             }
 
                                         }
-                                        
 
-                                    
+                                        this.set({ aValueWasChoosen: true });
 
                                     }
                 });
@@ -57,7 +56,28 @@ SC.loadPackage({ 'WidgetOpacity': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedOpacities = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedOpacities.push(elements[i].get('node').style.opacity)
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].get('node').style.opacity = savedOpacities[i]
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
+        }
 
 
     }

src/allplatforms/classes/WidgetPadding.js

@@ -65,7 +65,7 @@ SC.loadPackage({ 'WidgetPadding': {
                                             
                                         }
 
-                                    
+                                        this.set({ aValueWasChoosen: true });
 
                                     }
                 });
@@ -73,7 +73,32 @@ SC.loadPackage({ 'WidgetPadding': {
 
     		}
 
-    	}
+    	},
+
+
+        createState: {
+            comment: 'I create a reflection function to restore a state.',
+            code: function(){
+
+                return  (function(elements){
+                            var savedPaddings = []
+                            for(var i = 0, l = elements.length; i < l; i++){
+                                savedPaddings.push(elements[i].get('padding'))
+                            }
+                            return function(){
+                                for(var i = 0, l = elements.length; i < l; i++){
+                                    elements[i].set({ padding: savedPaddings[i] });
+                                    elements[i].set({ 
+                                        width:  elements[i].get('width'),
+                                        height: elements[i].get('height')
+                                    });
+                                }
+                            }
+                        }).call(this, this.get('selection').get('elements'));
+
+
+            }
+        }
 
 
     }