diff options
author | jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> | 2011-02-27 03:53:11 +0000 |
---|---|---|
committer | jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> | 2011-02-27 03:53:11 +0000 |
commit | a5e28530b5b092c287ff04db3b04e6a68267eeb6 (patch) | |
tree | 417630af04c36ed8c79e58a26ddf33c0fd31bfc2 /sca-cpp/trunk/modules/edit/htdocs/graph | |
parent | d45d5222039e4ede9377913b1c1c04fabc10c147 (diff) |
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
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/graph')
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/graph/graph.html | 60 | ||||
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/graph/graph.js | 43 |
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); |