archive/apache-tuscany
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
apache-tuscany/sca-cpp/trunk/modules/edit/htdocs/graph/index.html

449 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
-->
<html manifest="/cache-manifest.cmf">
<head>
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="/public/touchicon.png"/>
<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
<script type="text/javascript" src="/all-min.js"></script>
<script type="text/javascript" src="/menu.js"></script>
<script type="text/javascript" src="graph.js"></script>
</head>
<body class="delayed" onload="ui.onload();" onbeforeunload="ui.onbeforeunload();">
<div id="bodydiv" class="bodydiv" style="overflow: visible;">
<div id="headdiv" class="hsection">
<script type="text/javascript" src="/headconfig.js"></script>
</div>
<div id="menubackground" style="position: absolute; top: 0px; left: 0px; z-index: -1; width: 2500px;">
<table cellpadding="0" cellspacing="0" width="100%" class="tbar"><tr><td class="dtbar">
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="ltbar"><span class="tbarsmenu">>&nbsp</span></td></tr></table>
</td></tr></table>
</div>
<div id="menu"></div>
<table style="width: 100%;">
<tr>
<td><h2><span id="appNameHeader"></span></h2></td>
<td style="vertical-align: middle; text-align: right; padding-right: 8px;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
</tr>
</table>
<table id="compValueBackground" style="width: 2500px; position: absolute; top: 59px; left: 0px; z-index: -1;">
<tr>
<th class="thr thl"><span style="display: inline-block; padding-top: 0px; padding-bottom: 0px; height: 24px;"></span></th>
</tr>
</table>
<table id="compValueTable" style="width: 100%;">
<tr>
<td class="thr thl" style="padding-left: 2px; padding-right: 2px; vertical-align: top; width: 100%">
<input id="compValue" type="text" value="" title="Component value" autocapitalize="off" placeholder="Value" style="position: relative; width: 100%;"/>
</td>
<td class="thl thr" style="text-align: right; padding-right: 2px; vertical-align: top;">
<span id="deleteCompButton" title="Delete a component" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
<span id="copyCompButton" title="Copy a component" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">c</span>
<span id="addCompButton" title="Add a component" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
<span id="playCompButton" title="View component value" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
</td>
</tr>
</table>
<div id="contentdiv" style="margin-top: 4px; width: 2500px;">
<div id="playdiv" style="position:relative; top: 0x; left: 0px; right: 0px; width: 2500px; height: 5000px; visibility: hidden">
</div>
</div>
<script type="text/javascript">
ui.initbody();
// Get the app name
var appname = ui.fragmentParams()['app'];
var ispalette = false;
if (isNil(appname)) {
appname = ui.fragmentParams()['palette'];
if (isNil(appname))
window.open('/', '_self');
// Edit a palette instead of a regular app
ispalette = true;
}
/**
* Return the link to an app.
*/
function applink(appname) {
var protocol = window.location.protocol;
var host = window.location.hostname;
var port = ':' + window.location.port;
if (port == ':80' || port == ':443' || port == ':')
port = '';
var link = protocol + '//' + appname + '.' + host + port + '/';
return link;
}
// Set page titles
document.title = windowtitle(window.location.hostname) + ' - ' + (isNil(config.compose)? 'Composition' : config.compose) + ' - ' + appname;
$('appNameHeader').innerHTML = '<a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
// Load the menu bar
displaymenu();
/**
* Component value field, add, delete and play buttons.
*/
var cvalue = $('compValue');
var cadd = $('addCompButton');
var cdelete = $('deleteCompButton');
var ccopy = $('copyCompButton');
var cplay = $('playCompButton');
// Position background divs
var mbackground = $('menubackground');
var menudiv = $('menu');
mbackground.style.top = ui.pixpos(menudiv.offsetTop);
var cvbackground = $('compValueBackground');
var cvtable = $('compValueTable');
cvbackground.style.top = ui.pixpos(cvtable.offsetTop);
/**
* Adjust component value field size.
*/
function resizeFields() {
cvalue.style.width = '0px';
cvalue.style.width = ui.pixpos(cvalue.parentNode.clientWidth - 18);
return true;
}
resizeFields();
window.onresize = resizeFields;
// Init componnent references
var editWidget = sca.component("EditWidget");
var palettes = sca.reference(editWidget, "palettes");
var composites = sca.reference(editWidget, ispalette? "palettes" : "composites");
// Setup remote log
//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
/**
* Track the current app composite and corresponding saved XML content.
*/
var savedcomposxml = '';
var composite;
/**
* 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 cdiv = $('contentdiv');
var pdiv = $('playdiv');
// Position play div inside the content div
pdiv.style.position = 'absolute';
pdiv.style.top = cdiv.offsetTop + 'px';
/**
* Track the palettes.
*/
var gpalettes = new Array();
var spalette = 'control';
var bpalette = null;
/**
* Return the composite in an ATOM entry.
*/
function atomcomposite(doc) {
var entry = atom.readATOMEntry(mklist(doc));
if (isNil(entry))
return mklist();
var content = namedElementChild("'content", car(entry));
if (content == null)
return mklist();
return elementChildren(content);
}
/**
* Get and display an app.
*/
function getapp(name, g) {
if (isNil(name))
return false;
return composites.get(name, function(doc) {
// Stop now if we didn't get a composite
if (doc == null)
return false;
composite = atomcomposite(doc);
if (isNil(composite)) {
// Create a default empty composite if necessary
var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" ' +
'targetNamespace="http://app" name="app"></composite>';
composite = readXML(mklist(x));
}
// 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));
return true;
});
}
/**
* Display a palette. Get it from the server if needed.
*/
function displaypalette(name, g, svg, palette, gpalettes) {
if (isNil(name))
return;
if (isNil(gpalettes[name])) {
// Get the palette from the server
palettes.get(name, function(doc) {
gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(2580,0), true, g);
graph.display(gpalettes[name], g, svg);
});
return true;
}
graph.display(gpalettes[name], g, svg);
return true;
}
/**
* Install a palette, including a button to select the palette, and
* the palette content.
*/
function installpalette(name, pos, g, bg, palette, gpalettes) {
var b = graph.mkbutton(name, pos);
graph.display(mklist(b), g, g);
b.onclick = function(e) {
// Swap the selected palette
graph.paletteselect(bpalette, false);
displaypalette(spalette, bg, g, palette, gpalettes);
bpalette = b;
graph.paletteselect(b, true);
spalette = name;
return displaypalette(spalette, g, g, palette, gpalettes);
};
if (name != spalette) {
// Will get the palette from the server later if needed
gpalettes[name] = null;
return true;
}
// Display the selected palette
graph.paletteselect(b, true);
displaypalette(name, g, g, palette, gpalettes);
return b;
}
/**
* Save the current composite.
*/
function save(savexml) {
$('saveStatus').innerHTML = 'Saving';
savedcomposxml = 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, function(e) {
if (e)
return false;
$('saveStatus').innerHTML = 'Saved';
return false;
});
return true;
}
/**
* Handle a composite change event.
*/
function oncomposchange(prop) {
var newxml = car(writeXML(composite, false));
if (savedcomposxml == newxml)
return false;
$('saveStatus').innerHTML = 'Modified';
// Save property changes right away
if (prop)
return save(newxml);
// Autosave other changes after 1 second
$('saveStatus').innerHTML = 'Modified';
setTimeout(function() {
if (savedcomposxml == newxml) {
$('saveStatus').innerHTML = 'Saved';
return false;
}
return save(newxml);
}, 1000);
return true;
}
/**
* Return the link to a component value.
*/
function compdatalink(appname, cname) {
if (cname == '' || isNil(cname))
return '';
var protocol = window.location.protocol;
var host = window.location.hostname;
var port = ':' + window.location.port;
if (port == ':80' || port == ':443' || port == ':')
port = '';
var link = protocol + '//' + appname + '.' + host + port + '/data/#component=' + cname;
return link;
}
/**
* Return the link to a component.
*/
function complink(appname, cname) {
if (cname == '' || isNil(cname))
return '';
var protocol = window.location.protocol;
var host = window.location.hostname;
var port = ':' + window.location.port;
if (port == ':80' || port == ':443' || port == ':')
port = '';
var link = protocol + '//' + appname + '.' + host + port + '/c/' + cname;
return link;
}
/**
* Handle a component select event.
*/
function oncompselect(gsel) {
if (gsel == gcomp)
return true;
gcomp = gsel;
var cname = isNil(gsel)? '' : gsel.id;
var link = compdatalink(appname, cname);
function updateButton(b, v) {
b.style.color = v? '#000000' : '#808080';
}
updateButton(cdelete, link != '');
updateButton(ccopy, link != '');
updateButton(cplay, link != '');
return true;
}
/**
* Show the result data of a component.
*/
function showdata(gcomp) {
if (!gvisible)
return true;
if (isNil(gcomp))
return true;
cvalue.value = complink(appname, gcomp.id);
cplay.innerHTML = '&lt;';
gdiv.style.visibility = 'hidden'
gvisible = false;
pdiv.style.visibility = 'visible';
pdiv.innerHTML = '';
pdiv.innerHTML = '<iframe id="dataFrame" style="position: relative; height: 5000px; width: 2500px; border: 0px;" scrolling="no" frameborder="0" src="' +
compdatalink(appname, gcomp.id) + '"></iframe>';
return true;
}
/**
* Show the composition graph.
*/
function showgraph(gcomp) {
if (gvisible)
return true;
cplay.innerHTML = '&gt;';
pdiv.style.visibility = 'hidden';
pdiv.innerHTML = '';
gdiv.style.visibility = 'visible'
gvisible = true;
graph.compselect(gcomp, true, cvalue, ccopy, cdelete);
return true;
}
/**
* Handle play component button event.
*/
cplay.onclick = function() {
if (gcomp == null)
return false;
if (!gvisible)
return showgraph(gcomp);
return showdata(gcomp);
}
// Create editor graph area
g = graph.mkgraph(cdiv, graph.mkpath().move(-2500,0), cvalue, cadd, ccopy, cdelete);
gdiv = g.parentNode;
bg = graph.mkgroup(graph.mkpath());
// Install the palettes
var pos = graph.mkpath().move(0, 0);
bpalette = installpalette('control', pos.rmove(5,2), g, bg, spalette, gpalettes);
installpalette('values', pos.rmove(0,28), g, bg, spalette, gpalettes);
installpalette('lists', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('transform', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('text', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('http', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('animation', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('talk', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('social', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('search', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('database', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('logic', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('math', pos.rmove(0, 28), g, bg, spalette, gpalettes);
installpalette('python', pos.rmove(0, 28), g, bg, spalette, gpalettes);
// Get and display the current app
getapp(appname, g);
</script>
<div id="footdiv" class="fsection">
<script type="text/javascript" src="/footconfig.js"></script>
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink