modules/edit/htdocs/graph/graph.html - tuscany-sca-cpp - Git at Google

 <!--
     * 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>
 <head>
 <link rel="stylesheet" type="text/css" href="/ui.css">
 <script type="text/javascript" src="/util.js"></script>
 <script type="text/javascript" src="/elemutil.js"></script>
 <script type="text/javascript" src="/xmlutil.js"></script>
 <script type="text/javascript" src="/atomutil.js"></script>
 <script type="text/javascript" src="/scdl.js"></script>
 <script type="text/javascript" src="/ui.js"></script>
 <script type="text/javascript" src="/component.js"></script>
 <script type="text/javascript" src="graph.js"></script>
 </head>
 <body>

 <div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">

 <table style="width: 100%;">
 <tr>
 <th class="thl" style="width: 225px; min-width: 225px;">Palette</th>

 <th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
 <input id="compName" type="text" value="component name" style="position: relative; width: 200px;"/>
 <input id="propValue" type="text" value="property value" style="position: relative; width: 300px;"/>
 <span id="compValue" style="position: relative"></span>
 </th>

 <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
 <input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
 </th>
 </tr>

 <tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr>
 </table>

 </div>

 <script type="text/javascript">
 if (ui.isIE()) $('bodydiv').style.right = -20;

 var editWidget = sca.component("EditWidget");
 var palettes = sca.reference(editWidget, "palettes");
 var apps = sca.reference(editWidget, "apps");

 // Setup remote log
 //rconsole = sca.defun(sca.reference(editWidget, "log"), "log");

 /**
  * The current app name.
  */
 var appname = ui.queryParams()['app'];

 /**
  * The current app composite and corresponding saved XML content.
  */
 var savedcomposxml = '';
 var composite;

 /**
  * 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;
     apps.get(name, function(doc) {
         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" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' +
                 'targetNamespace="http://' + name + '" ' +
                 'name="' + name + '">' +
                 '</composite>';
             composite = readXML(mklist(x));
         }
         graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g);

         // Track the saved composite XML
         savedcomposxml = car(writeXML(composite, false));
     });
 }

 /**
  * Get and display a palette of components.
  */
 function getpalette(name, g, bg, palette, gpalettes) {
     if (isNil(name))
         return;
     palettes.get(name, function(doc) {
         gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0));
         graph.display(gpalettes[name], name == spalette? g : bg);
     });
 }

 /**
  * 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);
     b.onclick = function() {

         // Display the selected palette
         spalette = name;
         for (var pn in gpalettes)
             graph.display(gpalettes[pn], pn == spalette? g : bg);
     }
     getpalette(name, g, bg, palette, gpalettes);
 }

 /**
  * Handle save button click event.
  */
 $('saveButton').onclick = function(e) {
     return save();
 };

 /**
  * 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">' +
         savedcomposxml + '</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'));
 var bg = graph.mkgroup(graph.mkpath());

 // Install the palettes
 var gpalettes = new Array();
 var spalette = 'event';
 var pos = graph.mkpath();
 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('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('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);

 </script>
 </body>
 </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>
	<head>
	<link rel="stylesheet" type="text/css" href="/ui.css">
	<script type="text/javascript" src="/util.js"></script>
	<script type="text/javascript" src="/elemutil.js"></script>
	<script type="text/javascript" src="/xmlutil.js"></script>
	<script type="text/javascript" src="/atomutil.js"></script>
	<script type="text/javascript" src="/scdl.js"></script>
	<script type="text/javascript" src="/ui.js"></script>
	<script type="text/javascript" src="/component.js"></script>
	<script type="text/javascript" src="graph.js"></script>
	</head>
	<body>

	<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">

	<table style="width: 100%;">
	<tr>
	<th class="thl" style="width: 225px; min-width: 225px;">Palette</th>

	<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
	<input id="compName" type="text" value="component name" style="position: relative; width: 200px;"/>
	<input id="propValue" type="text" value="property value" style="position: relative; width: 300px;"/>
	<span id="compValue" style="position: relative"></span>
	</th>

	<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
	<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/>
	</th>
	</tr>

	<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr>
	</table>

	</div>

	<script type="text/javascript">
	if (ui.isIE()) $('bodydiv').style.right = -20;

	var editWidget = sca.component("EditWidget");
	var palettes = sca.reference(editWidget, "palettes");
	var apps = sca.reference(editWidget, "apps");

	// Setup remote log
	//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");

	/**
	* The current app name.
	*/
	var appname = ui.queryParams()['app'];

	/**
	* The current app composite and corresponding saved XML content.
	*/
	var savedcomposxml = '';
	var composite;

	/**
	* 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;
	apps.get(name, function(doc) {
	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" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' +
	'targetNamespace="http://' + name + '" ' +
	'name="' + name + '">' +
	'</composite>';
	composite = readXML(mklist(x));
	}
	graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g);

	// Track the saved composite XML
	savedcomposxml = car(writeXML(composite, false));
	});
	}

	/**
	* Get and display a palette of components.
	*/
	function getpalette(name, g, bg, palette, gpalettes) {
	if (isNil(name))
	return;
	palettes.get(name, function(doc) {
	gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0));
	graph.display(gpalettes[name], name == spalette? g : bg);
	});
	}

	/**
	* 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);
	b.onclick = function() {

	// Display the selected palette
	spalette = name;
	for (var pn in gpalettes)
	graph.display(gpalettes[pn], pn == spalette? g : bg);
	}
	getpalette(name, g, bg, palette, gpalettes);
	}

	/**
	* Handle save button click event.
	*/
	$('saveButton').onclick = function(e) {
	return save();
	};

	/**
	* 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">' +
	savedcomposxml + '</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'));
	var bg = graph.mkgroup(graph.mkpath());

	// Install the palettes
	var gpalettes = new Array();
	var spalette = 'event';
	var pos = graph.mkpath();
	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('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('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);

	</script>
	</body>
	</html>