Refactor component palettes a bit and support autosave.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1074983 13f79535-47bb-0310-9956-ffa450edef68

2 files changed, 79 insertions, 24 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);
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 7273dae1bf..5e1de60c65 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -58,7 +58,7 @@ var proxcy = 20;
 var buttoncx = 70;
 var buttoncy = 30;
 var curvsz = 6;
-var tabsz = 3;
+var tabsz = 2;
 
 /**
  * Base path class.
@@ -236,6 +236,9 @@ if (ui.isIE()) {
                     pvalue.value = '';
                     cvalue.innerHTML = '';
                 }
+
+                // Trigger composite change event
+                vmlg.oncomposchange();
             }
 
             // Forget current dragged component
@@ -281,14 +284,17 @@ if (ui.isIE()) {
                 return false;
 
             // Change component name and refactor references to it
-            var compos = scdl.composite(svg.compos);
+            var compos = scdl.composite(vmlg.compos);
             cname.value = graph.ucid(cname.value, compos);
             graph.selected.id = cname.value;
-            cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id);
+            cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id);
             setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
 
             // Refresh the composite
-            graph.refresh(svg);
+            graph.refresh(vmlg);
+
+            // Trigger composite change event
+            vmlg.oncomposchange();
             return false;
         };
 
@@ -301,7 +307,10 @@ if (ui.isIE()) {
             pvalue.value = graph.property(graph.selected.comp);
 
             // Refresh the composite
-            graph.refresh(svg);
+            graph.refresh(vmlg);
+
+            // Trigger composite change event
+            vmlg.oncomposchange();
             return false;
         };
 
@@ -391,7 +400,7 @@ if (ui.isIE()) {
     graph.comptitlewidth = function(comp) {
         var t = graph.title(comp);
         graph.comptitlewidthdiv.innerHTML = t;
-        var twidth = graph.comptitlewidthdiv.offsetWidth;
+        var twidth = graph.comptitlewidthdiv.offsetWidth + 4;
         graph.comptitlewidthdiv.innerHTML = '';
         return twidth;
     };
@@ -412,7 +421,7 @@ if (ui.isIE()) {
     graph.proptitlewidth = function(comp) {
         var t = graph.property(comp);
         graph.proptitlewidthdiv.innerHTML = t;
-        var twidth = graph.proptitlewidthdiv.offsetWidth;
+        var twidth = graph.proptitlewidthdiv.offsetWidth + 4;
         graph.proptitlewidthdiv.innerHTML = '';
         return twidth;
     };
@@ -714,6 +723,9 @@ if (ui.isIE()) {
 
             // Refresh the composite
             graph.refresh(svg);
+
+            // Trigger composite change event
+            svg.oncomposchange();
             return false;
         };
 
@@ -778,6 +790,9 @@ if (ui.isIE()) {
 
             // Refresh the composite
             graph.refresh(svg);
+
+            // Trigger composite change event
+            svg.oncomposchange();
             return false;
         };
         
@@ -791,6 +806,9 @@ if (ui.isIE()) {
 
             // Refresh the composite
             graph.refresh(svg);
+
+            // Trigger composite change event
+            svg.oncomposchange();
             return false;
         };
 
@@ -868,7 +886,7 @@ if (ui.isIE()) {
     graph.comptitlewidth = function(comp) {
         var title = graph.comptitle(comp);
         graph.titlewidthsvg.appendChild(title);
-        var width = title.getBBox().width;
+        var width = title.getBBox().width + 4;
         graph.titlewidthsvg.removeChild(title);
         return width;
     };
@@ -906,7 +924,7 @@ if (ui.isIE()) {
     graph.proptitlewidth = function(comp) {
         var title = graph.proptitle(comp);
         graph.titlewidthsvg.appendChild(title);
-        var width = title.getBBox().width;
+        var width = title.getBBox().width + 4;
         graph.titlewidthsvg.removeChild(title);
         return width;
     };
@@ -1200,6 +1218,8 @@ graph.compheight = function(comp, cassoc) {
         var height = Math.max(lsvcsh, rrefsh);
         if (!isNil(graph.brefs(comp)))
             height = Math.max(height, (tabsz * 10) + (tabsz * 4) + (tabsz * 2));
+        if (graph.property(comp) != '')
+            height = Math.max(40, height);
         return height;
     });
 };
@@ -1532,7 +1552,7 @@ graph.composite = function(compos, pos) {
          * Move the rendering cursor down below a component.
          */
         function rendermove(comp, cassoc, pos) {
-            return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + (tabsz * 2));
+            return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + Math.max((tabsz * 2), 8));
         }
 
         if (isNil(svcs))
@@ -1803,11 +1823,12 @@ graph.refresh = function(g) {
  * Display and enable editing of a composite and the graphical
  * nodes that represent it.
  */
-graph.edit = function(appname, compos, nodes, g) {
+graph.edit = function(appname, compos, nodes, onchange, g) {
 
     // Store the appname and composite in the graphical canvas
     g.appname = appname;
     g.compos = compos;
+    g.oncomposchange = onchange;
 
     // Display the composite nodes
     return graph.display(nodes, g);