1 files changed, 47 insertions, 13 deletions

diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
index e03cc6038d..2a92a5d11e 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
@@ -44,7 +44,7 @@
 
 <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
 <span id="source" style="font-weight: normal;">[atom json]</span>
-<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/>
+<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
 </th>
 </tr>
 
@@ -70,8 +70,9 @@ var appname = ui.queryParams()['app'];
 $('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.composite">json</a>]';
 
 /**
- * The current app composite.
+ * The current app composite and corresponding saved XML content.
  */
+var savedcomposxml = '';
 var composite;
 
 /**
@@ -100,7 +101,10 @@ function getapp(name, g) {
                 '</composite>';
             composite = readXML(mklist(x));
         }
-        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), g);
+        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g);
+
+        // Track the saved composite XML
+        savedcomposxml = car(writeXML(composite, false));
     });
 }
 
@@ -134,18 +138,45 @@ function installpalette(name, pos, g, bg, palette, gpalettes) {
 }
 
 /**
- * Save the current edited page.
+ * Handle save button click event.
  */
 $('saveButton').onclick = function(e) {
+    return save();
+};
 
-    // Update the page ATOM entry
-    var compxml = writeXML(composite, false);
+/**
+ * Save the current composite.
+ */
+function save() {
+    $('saveButton').value = 'Saving';
+    savedcomposxml = car(writeXML(composite, false));
     var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
         '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' +
-        compxml + '</item></content></entry>';
+        savedcomposxml + '</item></content></entry>';
     apps.put(appname, entry, function() {
+        if (savedcomposxml == car(writeXML(composite, false)))
+            $('saveButton').value = 'Saved';
+        return true;
     });
-};
+    return true;
+}
+
+/**
+ * Handle a composite change event
+ */
+function oncomposchange() {
+    if (savedcomposxml == car(writeXML(composite, false)))
+        return false;
+    $('saveButton').value = 'Save now';
+
+    // Autosave after 3 seconds
+    setTimeout(function() {
+        if (savedcomposxml == car(writeXML(composite, false)))
+            return false;
+        return save();
+    }, 3000);
+    return true;
+}
 
 // Create editor graph area
 var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'), $('compValue'));
@@ -153,17 +184,20 @@ var bg = graph.mkgroup(graph.mkpath());
 
 // Install the palettes
 var gpalettes = new Array();
-var spalette = 'events';
+var spalette = 'event';
 var pos = graph.mkpath();
-installpalette('events', pos.rmove(0,0), g, bg, spalette, gpalettes);
-installpalette('values', pos.rmove(0,40), g, bg, spalette, gpalettes);
+installpalette('event', pos.rmove(0,0), g, bg, spalette, gpalettes);
+installpalette('value', pos.rmove(0,40), g, bg, spalette, gpalettes);
 installpalette('url', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('lists', pos.rmove(0, 40), g, bg, spalette, gpalettes);
+installpalette('list', pos.rmove(0, 40), g, bg, spalette, gpalettes);
+installpalette('transform', pos.rmove(0, 40), g, bg, spalette, gpalettes);
 installpalette('text', pos.rmove(0, 40), g, bg, spalette, gpalettes);
 installpalette('logic', pos.rmove(0, 40), g, bg, spalette, gpalettes);
 installpalette('math', pos.rmove(0, 40), g, bg, spalette, gpalettes);
+installpalette('talk', pos.rmove(0, 40), g, bg, spalette, gpalettes);
 installpalette('social', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('sensors', pos.rmove(0, 40), g, bg, spalette, gpalettes);
+installpalette('search', pos.rmove(0, 40), g, bg, spalette, gpalettes);
+installpalette('sensor', pos.rmove(0, 40), g, bg, spalette, gpalettes);
 
 // Get and display the current app
 getapp(appname, g);