Simplify page navigations and optimize layout and event handling on touch devices. Optimize caching and minimize Ajax calls.

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

2 files changed, 357 insertions, 177 deletions

diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 2de6a40d6c..139d4600f9 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -41,6 +41,8 @@ graph.colors.red = '#ff0000';
 graph.colors.white = '#ffffff';
 graph.colors.yellow = '#ffff00';
 
+graph.colors.link = '#598edd';
+
 graph.colors.orange1 = '#ffbb00';
 graph.colors.green1 = '#96d333';
 graph.colors.blue1 = '#00c3c9';
@@ -54,7 +56,6 @@ graph.colors.lightgray1 = '#dcdcdc'
  * Default positions and sizes.
  */
 var palcx = 2500;
-var trashcx = 2480;
 var proxcx = 20;
 var proxcy = 20;
 var buttoncx = 65;
@@ -150,53 +151,22 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
      */
     div.onmousedown = function(e) {
 
-        // Find draggable component
-        graph.dragging = draggable(e.target);
-        graph.selected = graph.dragging;
-        if (graph.dragging == null) {
+        // On mouse controlled devices, engage the click component selection
+        // logic right away
+        if (typeof e.touches == 'undefined')
+            div.onclick(e);
 
-            // Reset current selection
-            cvalue.value = '';
-            cvalue.disabled = true;
-            cdelete.disabled = true;
-
-            // Trigger component select event
-            svg.oncompselect('');
+        // Find draggable component
+        var dragging = draggable(e.target);
+        if (dragging == null || dragging != graph.selected)
             return true;
-        }
-
-        // Clone component from the palette
-        var compos = scdl.composite(svg.compos);
-        if (graph.dragging.id.substring(0, 8) == 'palette:') {
-            graph.dragging = graph.clonepalette(graph.dragging, compos);
-            graph.selected = graph.dragging;
-
-            // Move into the editing area and hide the palette
-            var gpos = graph.relpos(graph.dragging);
-            graph.move(graph.dragging, graph.mkpath().move(gpos.xpos() + palcx, gpos.ypos()));
-            div.style.left = ui.pixpos(palcx * -1);
-        }
-
-        // Cut wire to component
-        if (graph.dragging.parentNode != svg)
-            setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, svg)));
-
-        // Bring component to the top
-        graph.bringtotop(graph.dragging, svg);
+        graph.dragging = dragging;
 
         // Remember current mouse position
         var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
         graph.dragX = pos.screenX;
         graph.dragY = pos.screenY;
 
-        // Update the component name and property value fields
-        cvalue.value = graph.hasproperty(graph.selected.comp)? graph.property(graph.selected.comp) : graph.selected.id;
-        cvalue.disabled = false;
-        cdelete.disabled = false;
-        
-        // Trigger component select event
-        svg.oncompselect(graph.selected.id);
-
         if (e.preventDefault)
             e.preventDefault();
         else
@@ -216,45 +186,28 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
 
         if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') {
             var gpos = graph.relpos(graph.dragging);
-            if (gpos.xpos() >= trashcx) {
-
-                // If component close enough to editing area, move it there
-                if (gpos.xpos() < palcx)
-                    graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos()));
-
-                // Add new dragged component to the composite
-                if (isNil(graph.dragging.compos)) {
-                    var compos = scdl.composite(svg.compos);
-                    setElement(compos, graph.sortcompos(graph.addcomp(graph.dragging.comp, compos)));
-                    graph.dragging.compos = svg.compos;
-                }
 
-                // Update component position
-                setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg)));
-
-                // Wire component to neighboring reference
-                if (!isNil(graph.dragging.svcpos)) {
-                    var compos = scdl.composite(svg.compos);
-                    setElement(compos, graph.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, svg))));
-                }
-
-            } else {
+            // Add new dragged component to the composite
+            if (isNil(graph.dragging.compos)) {
+                var compos = scdl.composite(svg.compos);
+                setElement(compos, graph.sortcompos(graph.addcomp(graph.dragging.comp, compos)));
+                graph.dragging.compos = svg.compos;
+            }
 
-                // Discard component dragged out of composite
-                svg.removeChild(graph.dragging);
-                if (!isNil(graph.dragging.compos)) {
-                    var compos = scdl.composite(svg.compos);
-                    setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos)))));
-                }
+            // Update component position
+            setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg)));
 
-                // Reset current selection
-                graph.selected = null;
-                cvalue.value = '';
-                cvalue.disabled = true;
-                cdelete.disabled = true;
+            // Wire component to neighboring reference
+            if (!isNil(graph.dragging.svcpos)) {
+                var compos = scdl.composite(svg.compos);
+                setElement(compos, graph.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, svg))));
+            }
 
-                // Trigger component select event
-                svg.oncompselect('');
+            // Snap top level component position to grid
+            if (graph.dragging.parentNode == svg) {
+                var gpos = graph.relpos(graph.dragging);
+                graph.move(graph.dragging, graph.mkpath().move(graph.gridsnap(gpos.xpos()), graph.gridsnap(gpos.ypos())));
+                setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg)));
             }
         }
 
@@ -262,7 +215,14 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
         graph.dragging = null;
 
         // Refresh the composite
-        graph.refresh(svg);
+        var nodes = graph.refresh(svg);
+
+        // Reselected the previously selected component
+        graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+        graph.compselect(graph.selected, true, cvalue, cdelete);
+
+        // Trigger component select event
+        svg.oncompselect(graph.selected);
 
         // Trigger composite change event
         svg.oncomposchange(false);
@@ -273,13 +233,79 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
     div.ontouchend = div.onmouseup;
 
     // Handle a mouse click event.
-    div.onclick = function(e) {
-        if (graph.dragging == null && (e.target == div || e.target == svg)) {
+    div.onclick = svg.onclick = function(e) {
+
+        // Find selected component
+        var selected = draggable(e.target);
+        if (selected == null) {
+            if (graph.selected != null) {
+
+                // Reset current selection
+                graph.compselect(graph.selected, false, cvalue, cdelete);
+                graph.selected = null;
+
+                // Trigger component select event
+                svg.oncompselect(null);
+            }
 
             // Dismiss the palette
-            if (ui.numpos(div.style.left) != (palcx * -1))
+            if (e.target == div || e.target == svg && ui.numpos(div.style.left) != (palcx * -1))
             	div.style.left = ui.pixpos(palcx * -1);
+
+            return true;
         }
+
+        // Ignore multiple click events
+        if (selected == graph.selected)
+            return true;
+        if (selected.id.substring(0, 8) == 'palette:' && ui.numpos(div.style.left) != 0)
+            return true;
+
+        // Deselect previously selected component
+        graph.compselect(graph.selected, false, cvalue, cdelete);
+
+        // Clone component from the palette
+        if (selected.id.substring(0, 8) == 'palette:') {
+            var compos = scdl.composite(svg.compos);
+            graph.selected = graph.clonepalette(selected, compos, svg);
+            setElement(compos, graph.sortcompos(graph.addcomp(graph.selected.comp, compos)));
+            graph.selected.compos = svg.compos;
+
+            // Move into the editing area and hide the palette
+            var gpos = graph.relpos(graph.selected);
+            graph.move(graph.selected, graph.mkpath().move(gpos.xpos() + palcx, gpos.ypos()));
+            div.style.left = ui.pixpos(palcx * -1);
+
+            // Update component position
+            setElement(graph.selected.comp, graph.movecomp(graph.selected.comp, graph.abspos(graph.selected, svg)));
+
+            // Refresh the composite
+            var nodes = graph.refresh(svg);
+
+            // Reselect the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+
+            // Trigger composite change event
+            svg.oncomposchange(true);
+
+        } else {
+            graph.selected = selected;
+
+            // Select the component
+            graph.compselect(graph.selected, true, cvalue, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+        }
+
+        if (e.preventDefault)
+            e.preventDefault();
+        else
+            e.returnValue = false;
         return true;
     }
 
@@ -290,15 +316,28 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
         if (graph.dragging == null)
             return true;
 
+        // Get the mouse position
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        if (pos.screenX == graph.dragX && pos.screenY == graph.dragY)
+            return true;
+
+        // Cut wire to component
+        if (graph.dragging.parentNode != svg) {
+            var compos = scdl.composite(svg.compos);
+            setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, svg)));
+
+            // Bring component to the top
+            graph.bringtotop(graph.dragging, svg);
+        }
+
         // Calculate new position of dragged element
         var gpos = graph.relpos(graph.dragging);
-        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
         var newX = gpos.xpos() + (pos.screenX - graph.dragX);
         var newY = gpos.ypos() + (pos.screenY - graph.dragY);
-        if (newX >= 0)
+        if (newX >= palcx)
             graph.dragX = pos.screenX;
         else
-            newX = 0;
+            newX = palcx;
         if (newY >= 0)
             graph.dragY = pos.screenY;
         else
@@ -319,19 +358,25 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
     cvalue.onchange = function() {
         if (graph.selected == null)
             return false;
+        if (g.parentNode.style.visibility == 'hidden')
+            return false;
 
         // Change component name and refactor references to it
         function changename() {
             var compos = scdl.composite(svg.compos);
-            cvalue.value = graph.ucid(cvalue.value, compos);
+            cvalue.value = graph.ucid(cvalue.value, compos, false);
             graph.selected.id = cvalue.value;
             setElement(compos, graph.sortcompos(graph.renamecomp(graph.selected.comp, compos, cvalue.value)));
 
-            // Trigger component select event
-            svg.oncompselect(graph.selected.id);
-
             // Refresh the composite
-            graph.refresh(svg);
+            var nodes = graph.refresh(svg);
+
+            // Reselected the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
 
             // Trigger composite change event
             svg.oncomposchange(true);
@@ -345,7 +390,14 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
             cvalue.disabled = !graph.hasproperty(graph.selected.comp);
 
             // Refresh the composite
-            graph.refresh(svg);
+            var nodes = graph.refresh(svg);
+
+            // Reselected the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
 
             // Trigger composite change event
             svg.oncomposchange(true);
@@ -359,23 +411,23 @@ graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
     cdelete.onclick = function() {
         if (graph.selected == null)
             return false;
-        if (graph.selected.id.substring(0, 8) != 'palette:' && !isNil(graph.selected.compos)) {
+        if (graph.selected.id.substring(0, 8) != 'palette:') {
 
             // Remove selected component
             var compos = scdl.composite(svg.compos);
+            if (isNil(graph.selected.compos))
+                setElement(compos, graph.sortcompos(graph.cutwire(graph.selected, compos, svg)));
             setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.selected.comp, compos)))));
 
             // Reset current selection
+            graph.compselect(graph.selected, false, cvalue, cdelete);
             graph.selected = null;
-            cvalue.value = '';
-            cvalue.disabled = true;
-            cdelete.disabled = true;
 
             // Refresh the composite
             graph.refresh(svg);
 
             // Trigger component select event
-            svg.oncompselect('');
+            svg.oncompselect(null);
 
             // Trigger composite change event
             svg.oncomposchange(true);
@@ -512,9 +564,40 @@ graph.proptitlewidth = function(comp) {
 };
 
 /**
+ * Draw a component shape selection.
+ */
+graph.compselect = function(g, s, cvalue, cdelete) {
+    if (isNil(g) || !s) {
+        if (!isNil(cvalue)) {
+            cvalue.value = '';
+            cvalue.disabled = true;
+        }
+        if (!isNil(cdelete))
+            cdelete.disabled = true;
+        if (isNil(g))
+            return true;
+        g.contour.setAttribute('stroke', graph.colors.gray);
+        g.contour.setAttribute('stroke-opacity', '0.20');
+        return true;
+    }
+
+    if (!isNil(cvalue)) {
+        cvalue.value = graph.hasproperty(g.comp)? graph.property(g.comp) : g.id;
+        cvalue.disabled = false;
+    }
+    if (!isNil(cdelete))
+        cdelete.disabled = false;
+
+    g.contour.setAttribute('stroke', graph.colors.link);
+    g.contour.setAttribute('stroke-opacity', '0.80');
+    g.parentNode.appendChild(g);
+    return true;
+};
+
+/**
  * Return a node representing a component.
  */
-graph.compnode = function(comp, cassoc, pos) {
+graph.compnode = function(comp, cassoc, pos, parentg) {
 
     // Make the component and property title elements
     var title = graph.comptitle(comp);
@@ -554,10 +637,32 @@ graph.compnode = function(comp, cassoc, pos) {
     g.refpos = reverse(path.refpos);
     g.svcpos = reverse(path.svcpos);
 
+    // Store the contour in the component shape
+    g.contour = contour;
+
+    // Handle onclick events
+    g.onclick = parentg.onclick;
+
     return g;
 };
 
 /**
+ * Find the node representing a component.
+ */
+graph.findcompnode = function(name, nodes) {
+    if (isNil(nodes))
+        return null;
+    if (isNil(car(nodes).comp))
+        return graph.findcompnode(name, cdr(nodes));
+    if (name == scdl.name(car(nodes).comp))
+        return car(nodes);
+    var node = graph.findcompnode(name, nodeList(car(nodes).childNodes));
+    if (!isNil(node))
+        return node;
+    return graph.findcompnode(name, cdr(nodes));
+}
+
+/**
  * Return a graphical group.
  */
 graph.mkgroup = function(pos) {
@@ -598,6 +703,10 @@ graph.mkbutton = function(t, pos) {
     g.appendChild(shape);
     g.appendChild(contour);
     g.appendChild(title);
+
+    // Store the contour in the button shape
+    g.contour = contour;
+
     return g;
 };
 
@@ -605,7 +714,7 @@ graph.mkbutton = function(t, pos) {
  * Return the relative position of a node.
  */
 graph.relpos = function(e) {
-    var pmatrix = e.parentNode.getCTM();
+    var pmatrix = e.parentNode != null? e.parentNode.getCTM() : null;
     var matrix = e.getCTM();
     var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e);
     var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f);
@@ -1048,12 +1157,20 @@ graph.buttonpath = function(t) {
 /**
  * Render a SCDL composite into a list of component nodes.
  */
-graph.composite = function(compos, pos) {
+graph.composite = function(compos, pos, aspalette, g) {
     var name = scdl.name(scdl.composite(compos));
     var comps = scdl.components(compos);
     var cassoc = scdl.nameToElementAssoc(comps);
     var proms = scdl.promotions(compos);
 
+    // Unmemoize any memoized info about components and their references.
+    map(function(c) {
+            unmemo(c);
+            map(function(r) {
+                    unmemo(r);
+                }, scdl.references(c));
+        }, comps);
+
     /**
      * Render a component.
      */
@@ -1124,7 +1241,7 @@ graph.composite = function(compos, pos) {
         }
 
         // Compute the component shape
-        var gcomp = graph.compnode(comp, cassoc, pos);
+        var gcomp = graph.compnode(comp, cassoc, pos, g);
 
         // Render the components wired to the component references
         var rrefs = graph.rrefs(comp);
@@ -1201,10 +1318,17 @@ graph.composite = function(compos, pos) {
     // Render the promoted service components
     var rproms = renderproms(proms, cassoc, pos.clone().rmove(tabsz * 4, tabsz * 4));
 
-    if (name == 'palette') {
+    if (aspalette) {
+
+        // Prefix ids of palette component elements with 'palette:' and
+        // move them to the palette area
+        return map(function(r) {
+                r.id = 'palette:' + r.id;
+                var gpos = graph.relpos(r);
+                graph.move(r, graph.mkpath().move(gpos.xpos() - palcx, gpos.ypos()));
+                return r;
+            }, rproms);
 
-        // Prefix ids of palette component elements with 'palette:'
-        return map(function(r) { r.id = 'palette:' + r.id; return r; }, rproms);
     } else {
 
         // Link app component elements to the containing composite
@@ -1215,11 +1339,14 @@ graph.composite = function(compos, pos) {
 /**
  * Return a component unique id.
  */
-graph.ucid = function(prefix, compos) {
+graph.ucid = function(prefix, compos, clone) {
 
     // Build an assoc list keyed by component name
     var comps = map(function(c) { return mklist(scdl.name(c), c); }, namedElementChildren("'component", compos));
 
+    if (!clone && isNil(assoc(prefix, comps)))
+        return prefix;
+
     /**
      * Find a free component id.
      */
@@ -1229,26 +1356,23 @@ graph.ucid = function(prefix, compos) {
         return ucid(p, id + 1);
     }
 
-    if (isNil(assoc(prefix, comps)))
-        return prefix;
-
-    return ucid(prefix == ''? 'comp' : prefix, 2);
+    return ucid(prefix == ''? 'comp' : prefix, 1);
 };
 
 /**
  * Clone a palette component node.
  */
-graph.clonepalette = function(e, compos) {
+graph.clonepalette = function(e, compos, g) {
 
-    // Clone the SCDL component and give it a unique name
-    var comp = append(mklist(element, "'component", mklist(attribute, "'name", graph.ucid(scdl.name(e.comp), compos))),
+         // Clone the SCDL component and give it a unique name
+    var wcomp = append(mklist(element, "'component", mklist(attribute, "'name", graph.ucid(scdl.name(e.comp), compos, true))),
                 filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e.comp)));
-    var x = '<composite xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1">' + writeXML(mklist(comp), false) + '</composite>';
-    var compos = readXML(mklist(x));
-    comp = car(scdl.components(compos));
+    var x = '<composite>' + writeXML(mklist(wcomp), false) + '</composite>';
+    var rcompos = readXML(mklist(x));
+    var comp = car(scdl.components(rcompos));
 
     // Make a component node
-    var gcomp = graph.compnode(comp, mklist(), graph.mkpath());
+    var gcomp = graph.compnode(comp, mklist(), graph.mkpath(), g);
     graph.move(gcomp, graph.relpos(e));
     e.parentNode.appendChild(gcomp);
 
@@ -1261,12 +1385,19 @@ graph.clonepalette = function(e, compos) {
 graph.movecomp = function(comp, pos) {
     if (isNil(pos))
         return append(mklist(element, "'component"),
-                filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp)));
-    return append(mklist(element, "'component", mklist(attribute, "'t:x", '' + (pos.xpos() - palcx)), mklist(attribute, "'t:y", '' + pos.ypos())),
-            filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp)));
+                filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'x" || attributeName(e) == "'y")); }, elementChildren(comp)));
+    return append(mklist(element, "'component", mklist(attribute, "'x", '' + (pos.xpos() - palcx)), mklist(attribute, "'y", '' + pos.ypos())),
+            filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'x" || attributeName(e) == "'y")); }, elementChildren(comp)));
 };
 
 /**
+ * Align a pos along a 10pixel grid.
+ */
+graph.gridsnap = function(x) {
+    return Math.round(x / 10) * 10;
+}
+
+/**
  * Sort elements of a composite.
  */
 graph.sortcompos = function(compos) {
@@ -1356,7 +1487,7 @@ graph.clonerefs = function(compos) {
                 // reference at the end of the list
                 var cc = append(
                     filter(function(e) { return !(elementName(e) == "'reference" && scdl.target(e) == null); }, elementChildren(c)),
-                    mklist(mklist(element, "'reference", mklist(attribute, "'name", scdl.name(car(refs))), mklist(attribute, "'t:clonable", "true"))));
+                    mklist(mklist(element, "'reference", mklist(attribute, "'name", scdl.name(car(refs))), mklist(attribute, "'clonable", "true"))));
                 return append(mklist(element, "'component"), cc);
             
             }, elementChildren(compos)));
@@ -1535,10 +1666,11 @@ graph.hide = function(g) {
  */
 graph.refresh = function(g) {
 
-    // Remove nodes and redisplay the composite associated with the graph
+    // Remove existing nodes from the graph
     map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
-    graph.display(graph.composite(g.compos, graph.mkpath().move(palcx,0)), g);
-    return g;
+
+    // Redisplay the composite associated with the graph
+    return graph.display(graph.composite(g.compos, graph.mkpath().move(palcx,0), false, g), g);
 };
 
 /**
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index 942433235c..626edf1c52 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -37,32 +37,45 @@
 
 <table style="width: 100%;">
 <tr>
-<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td>
-<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
+<td><h2><span id="h1"></span><span id="appNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right; padding-right: 2px;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
 </tr>
 </table>
 
 <table style="width: 100%;">
 <tr>
-<th class="thr thl" style="padding-left: 2px; padding-right: 2px;">
-<input id="compValue" type="text" value="" title="Component value" placeholder="Name" style="position: relative; width: 170px;"/>
-<span id="deleteComponentButton" title="Delete a component" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
-<span id="addComponentButton" title="Add a component" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
-<span id="playComponentButton" title="View component value" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
+<th class="thr thl" style="padding-left: 2px; padding-right: 2px; width: 100%">
+<input id="compValue" type="text" value="" title="Component value" autocapitalize="off" placeholder="Value" style="position: relative; width: 100%;"/>
+</th>
+
+<th class="thl thr" style="text-align: right; padding-right: 2px;">
+<span id="deleteCompButton" title="Delete a component" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
+
+<span id="addCompButton" title="Add a component" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
+
+<span id="playCompButton" title="View component value" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
 </th>
 </tr>
 </table>
 
-<div id="dataDiv" style="position:absolute; top: 95px; left: 0px; right: 0px; height: 5000px; visibility: hidden">
+<div id="playdiv" style="position:absolute; top: 95px; left: 0px; right: 0px; height: 5000px; visibility: hidden">
 </div>
 
 </div>
 
 <script type="text/javascript">
+
 // Get the app name
 var appname = ui.queryParams()['app'];
-if (isNil(appname))
-    window.open('/', '_self');
+var ispalette = false;
+if (isNil(appname)) {
+    appname = ui.queryParams()['palette'];
+    if (isNil(appname))
+        window.open('/', '_self');
+
+    // Edit a palette instead of a regular app
+    ispalette = true;
+}
 
 /**
  * Return the link to an app.
@@ -79,41 +92,65 @@ function applink(appname) {
 
 // Set page titles
 document.title = windowtitle(window.location.hostname) + ' - ' + (isNil(config.compose)? 'Composition' : config.compose) + ' - ' + appname;
-$('h1').innerHTML = hometitle(window.location.hostname);
-$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
+//$('h1').innerHTML = hometitle(window.location.hostname);
+$('appNameHeader').innerHTML = '<a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '.' + window.location.hostname + '</a>';
 
 // Load the menu bar
 displaymenu();
 
+/**
+ * Component value field, add, delete and play buttons.
+ */
+var cvalue = $('compValue');
+var cadd = $('addCompButton');
+var cdelete = $('deleteCompButton');
+var cplay = $('playCompButton');
+
+/**
+ * Adjust field size.
+ */
+function resizeFields() {
+    cvalue.style.width = '0px';
+    cvalue.style.width = ui.pixpos(cvalue.parentNode.clientWidth - 18);
+    return true;
+}
+
+resizeFields();
+window.onresize = resizeFields;
+
 // Show the page
 ui.showbody();
 
 // Init componnent references
 var editWidget = sca.component("EditWidget");
 var palettes = sca.reference(editWidget, "palettes");
-var composites = sca.reference(editWidget, "composites");
+var composites = sca.reference(editWidget, ispalette? "palettes" : "composites");
 
 // Setup remote log
 //rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
 
 /**
- * The current app composite, corresponding saved XML content and component name.
+ * Track the current app composite and corresponding saved XML content.
  */
 var savedcomposxml = '';
 var composite;
-var compname = '';
 
 /**
- * Track the composition graph and whether it's visible or not.
+ * Track the composition graph, whether it's visible or not and the selected component.
  */
 var g;
 var gdiv;
 var bg;
 var gvisible = true;
+var gcomp = null;
+var pdiv = $('playdiv');
 
-// Track the palettes
+/**
+ * Track the palettes.
+ */
 var gpalettes = new Array();
 var spalette = 'control';
+var bpalette = null;
 
 /**
  * Return the composite in an ATOM entry.
@@ -139,11 +176,13 @@ function getapp(name, g) {
         if (isNil(composite)) {
 
             // Create a default empty composite if necessary
-            var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' +
+            var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" ' +
                 'targetNamespace="http://app" name="app"></composite>';
             composite = readXML(mklist(x));
         }
-        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g);
+
+        // Display the composite
+        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0), false, g), oncomposchange, oncompselect, g);
 
         // Track the saved composite XML
         savedcomposxml = car(writeXML(composite, false));
@@ -161,7 +200,7 @@ function displaypalette(name, g, palette, gpalettes) {
 
         // Get the palette from the server
         var doc = palettes.get(name);
-        gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0));
+        gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(2580,0), true, g);
     }
     graph.display(gpalettes[name], g);
     return true;
@@ -177,7 +216,10 @@ function installpalette(name, pos, g, bg, palette, gpalettes) {
     b.onclick = function(e) {
 
         // Swap the selected palette
+        graph.compselect(bpalette, false);
         displaypalette(spalette, bg, palette, gpalettes);
+        bpalette = b;
+        graph.compselect(b, true, null, null);
         spalette = name;
         return displaypalette(spalette, g, palette, gpalettes);
     };
@@ -190,7 +232,10 @@ function installpalette(name, pos, g, bg, palette, gpalettes) {
     }
 
     // Display the selected palette
-    return displaypalette(name, g, palette, gpalettes);
+    graph.compselect(b, true, null, null);
+    displaypalette(name, g, palette, gpalettes);
+
+    return b;
 }
 
 /**
@@ -202,8 +247,9 @@ function save(savexml) {
     var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
         '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' +
         savedcomposxml + '</content></entry>';
-    composites.put(appname, entry);
-    $('saveStatus').innerHTML = 'Saved';
+    composites.put(appname, entry, function(r) {
+        $('saveStatus').innerHTML = 'Saved';
+    });
     return true;
 }
 
@@ -220,15 +266,14 @@ function oncomposchange(prop) {
     if (prop)
         return save(newxml);
 
-    // Autosave other changes after 3 seconds
+    // Autosave other changes after 1 second
     $('saveStatus').innerHTML = 'Modified';
     setTimeout(function() {
-        var savexml = car(writeXML(composite, false));
-        if (savedcomposxml == savexml) {
+        if (savedcomposxml == newxml) {
             $('saveStatus').innerHTML = 'Saved';
             return false;
         }
-        return save(savexml);
+        return save(newxml);
     }, 1000);
     return true;
 }
@@ -236,7 +281,7 @@ function oncomposchange(prop) {
 /**
  * Return the link to a component value.
  */
-function compvaluelink(appname, cname) {
+function compdatalink(appname, cname) {
     if (cname == '' || isNil(cname))
         return '';
     var protocol = window.location.protocol;
@@ -249,9 +294,9 @@ function compvaluelink(appname, cname) {
 }
 
 /**
- * Return the link to a component raw data.
+ * Return the link to a component.
  */
-function compdebuglink(appname, cname) {
+function complink(appname, cname) {
     if (cname == '' || isNil(cname))
         return '';
     var protocol = window.location.protocol;
@@ -259,78 +304,81 @@ function compdebuglink(appname, cname) {
     var port = ':' + window.location.port;
     if (port == ':80' || port == ':443' || port == ':')
         port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname;
+    var link = protocol + '//' + appname + '.' + host + port + '/c/' + cname;
     return link;
 }
 
 /**
  * Handle a component select event.
  */
-function oncompselect(cname) {
-    if (cname == compname)
+function oncompselect(gsel) {
+    if (gsel == gcomp)
         return true;
-    compname = cname;
-    var link = compvaluelink(appname, cname);
+    gcomp = gsel;
+    var cname = isNil(gsel)? '' : gsel.id;
+    var link = compdatalink(appname, cname);
 
     function updateButton(b, v) {
         b.style.color = v? '#000000' : '#808080';
     }
 
-    updateButton($('deleteComponentButton'), link != '');
-    updateButton($('playComponentButton'), link != '');
+    updateButton(cdelete, link != '');
+    updateButton(cplay, link != '');
     return true;
 }
 
 /**
  * Show the result data of a component.
  */
-function showdata(cname) {
+function showdata(gcomp) {
     if (!gvisible)
         return true;
-    gvisible = false;
-    $('playComponentButton').innerHTML = '&lt;';
+    if (isNil(gcomp))
+        return true;
+    cvalue.value = complink(appname, gcomp.id);
+    cplay.innerHTML = '&lt;';
     gdiv.style.visibility = 'hidden'
-    var rdiv = $('dataDiv');
-    rdiv.style.visibility = 'visible';
-    rdiv.innerHTML = '<iframe id="dataFrame" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="' +
-                        compvaluelink(appname, cname) + '"></iframe>';
+    gvisible = false;
+    pdiv.style.visibility = 'visible';
+    pdiv.innerHTML = '<iframe id="dataFrame" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="' +
+                        compdatalink(appname, gcomp.id) + '"></iframe>';
     return true;
 }
 
 /**
  * Show the composition graph.
  */
-function showgraph() {
+function showgraph(gcomp) {
     if (gvisible)
         return true;
-    gvisible = true;
-    $('playComponentButton').innerHTML = '&gt;';
-    var rdiv = $('dataDiv');
-    rdiv.style.visibility = 'hidden';
-    rdiv.innerHTML = '';
+    cplay.innerHTML = '&gt;';
+    pdiv.style.visibility = 'hidden';
+    pdiv.innerHTML = '';
     gdiv.style.visibility = 'visible'
+    gvisible = true;
+    graph.compselect(gcomp, true, cvalue, cdelete);
     return true;
 }
 
 /**
- * Play the current component.
+ * Handle play component button event.
  */
-$('playComponentButton').onclick = function() {
-    if (compname == '')
+cplay.onclick = function() {
+    if (gcomp == null)
         return false;
     if (!gvisible)
-        return showgraph();
-    return showdata(compname);
+        return showgraph(gcomp);
+    return showdata(gcomp);
 }
 
 // Create editor graph area
-g = graph.mkgraph(graph.mkpath().move(-2500,95), $('compValue'), $('addComponentButton'), $('deleteComponentButton'));
+g = graph.mkgraph(graph.mkpath().move(-2500,95), cvalue, cadd, cdelete);
 gdiv = g.parentNode;
 bg = graph.mkgroup(graph.mkpath());
 
 // Install the palettes
-var pos = graph.mkpath();
-installpalette('control', pos.rmove(5,0), g, bg, spalette, gpalettes);
+var pos = graph.mkpath().move(0, 0);
+bpalette = installpalette('control', pos.rmove(5,0), g, bg, spalette, gpalettes);
 installpalette('values', pos.rmove(0,35), g, bg, spalette, gpalettes);
 installpalette('lists', pos.rmove(0, 35), g, bg, spalette, gpalettes);
 installpalette('transform', pos.rmove(0, 35), g, bg, spalette, gpalettes);