diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/graph/index.html')
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/graph/index.html | 164 |
1 files changed, 106 insertions, 58 deletions
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;">></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;">></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 = '<'; + if (isNil(gcomp)) + return true; + cvalue.value = complink(appname, gcomp.id); + cplay.innerHTML = '<'; 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 = '>'; - var rdiv = $('dataDiv'); - rdiv.style.visibility = 'hidden'; - rdiv.innerHTML = ''; + cplay.innerHTML = '>'; + 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); |