summaryrefslogtreecommitdiffstats
path: root/sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html')
-rw-r--r--sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html2100
1 files changed, 2100 insertions, 0 deletions
diff --git a/sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html b/sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html
new file mode 100644
index 0000000000..d360336375
--- /dev/null
+++ b/sca-cpp/branches/lightweight-sca/hosting/server/htdocs/graph/index.html
@@ -0,0 +1,2100 @@
+<!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.
+-->
+<div id="bodydiv" class="body">
+
+<div id="contentdiv" class="viewcontent" style="width: 2500px;">
+<div id="graphdiv" class="graphdiv" style="top: 0px; left: -2500px; width: 5000px; height: 5000px;"></div>
+<div id="playdiv" style="position: absolute; top: 0x; left: 0px; width: 2500px; height: 5000px; visibility: hidden"></div>
+</div>
+
+<script type="text/javascript">
+(function() {
+
+/**
+ * Get the current app name.
+ */
+var appname = ui.fragmentParams(location)['app'];
+var ispalette = false;
+if (isNil(appname)) {
+ appname = ui.fragmentParams(location)['palette'];
+
+ // Edit a palette instead of a regular app
+ if (!isNil(appname))
+ ispalette = true;
+}
+
+/**
+ * Set page title.
+ */
+document.title = config.windowtitle() + ' - ' + config.logic() + ' - ' + appname;
+
+/**
+ * Set header div.
+ */
+$('viewhead').innerHTML = '<span id="appTitle" class="cmenu">' + appname + '</span>' +
+'<input type="button" id="deleteCompButton" title="Delete a component" class="graybutton redbutton plusminus" style="position: absolute; top: 4px; left: 5px;" disabled="true" value="-"/>' +
+'<span style="position: absolute; top: 0px; left: 45px; right: 115px; padding: 0px; background: transparent;"><input id="compValue" type="text" value="" class="flatentry" title="Component value" autocapitalize="off" placeholder="Value" style="position: absolute; left: 0px; top: 4px; width: 100%; visibility: hidden;" readonly="readonly"/></span>' +
+'<input type="button" id="playCompButton" title="View component value" class="graybutton plusminus" style="position: absolute; top: 4px; right: 75px;" disabled="true" value="&gt;"/>' +
+'<input type="button" id="copyCompButton" title="Copy a component" class="graybutton bluebutton" style="position: absolute; top: 4px; right: 40px;" disabled="true" value="C"/>' +
+'<input type="button" id="addCompButton" title="Add a component" class="graybutton bluebutton plusminus" style="position: absolute; top: 4px; right: 5px;" disabled="true" value="+"/>';
+
+/**
+ * Track the current app composite, author, and saved XML content.
+ */
+var author = '';
+var editable = false;
+var composite;
+var savedcomposxml = '';
+
+/**
+ * Component value field, add, delete and play buttons.
+ */
+var cvalue = $('compValue');
+var atitle = $('appTitle');
+var cadd = $('addCompButton');
+var cdelete = $('deleteCompButton');
+var ccopy = $('copyCompButton');
+var cplay = $('playCompButton');
+
+/**
+ * Init componnent references.
+ */
+var editorComp = sca.component("Editor");
+var palettes = sca.reference(editorComp, "palettes");
+var composites = sca.reference(editorComp, ispalette? "palettes" : "composites");
+
+/**
+ * Composite rendering functions.
+ */
+var graph = {};
+
+/**
+ * Basic colors
+ */
+graph.colors = {};
+graph.colors.black = '#000000';
+graph.colors.blue = '#0000ff';
+graph.colors.cyan = '#00ffff';
+graph.colors.gray = '#808080'
+graph.colors.lightgray = '#dcdcdc'
+graph.colors.green = '#00ff00';
+graph.colors.magenta = '#ff00ff';
+graph.colors.orange = '#ffa500';
+graph.colors.pink = '#ffc0cb';
+graph.colors.purple = '#800080';
+graph.colors.red = '#ff0000';
+graph.colors.white = '#ffffff';
+graph.colors.yellow = '#ffff00';
+graph.colors.link = '#357ae8';
+
+graph.colors.orange1 = '#ffd666';
+graph.colors.green1 = '#bbe082';
+graph.colors.blue1 = '#66dbdf';
+graph.colors.yellow1 = '#fdf57a';
+graph.colors.cyan1 = '#e6eafb';
+graph.colors.lightgray1 = '#eaeaea'
+graph.colors.pink1 = '#ffd9e0';
+graph.colors.red1 = '#d03f41';
+graph.colors.white1 = '#ffffff';
+
+graph.colors.orange2 = '#ffbb00';
+graph.colors.green2 = '#96d333';
+//graph.colors.blue2 = '#0d7cc1';
+graph.colors.blue2 = '#00c3c9';
+graph.colors.red2 = '#d03f41';
+graph.colors.yellow2 = '#fcee21';
+graph.colors.magenta2 = '#c0688a';
+graph.colors.cyan2 = '#d5dcf9';
+graph.colors.lightgray2 = '#dcdcdc'
+graph.colors.pink2 = '#ffc0cb';
+graph.colors.white2 = '#ffffff';
+
+graph.colors.orange3 = '#ffc700';
+graph.colors.green3 = '#92e120';
+graph.colors.blue3 = '#008fd1';
+graph.colors.yellow3 = '#fdf400';
+graph.colors.cyan3 = '#b4d3fd';
+graph.colors.lightgray3 = '#e3e3e3'
+graph.colors.pink3 = '#da749b';
+graph.colors.red3 = '#ed3f48';
+graph.colors.white3 = '#ffffff';
+
+/**
+ * Default positions and sizes.
+ */
+graph.palcx = 2500;
+graph.proxcx = 20;
+graph.proxcy = 20;
+graph.buttoncx = 55;
+graph.buttoncy = 23;
+graph.curvsz = 4;
+graph.tabsz = 2;
+graph.titlex = 4;
+graph.titley = 0;
+
+/**
+ * Make a composite graph editor.
+ */
+graph.mkedit = function(graphdiv, pos, atitle, cvalue, cadd, ccopy, cdelete, onchange, onselect) {
+
+ // Track element dragging and selection
+ graph.dragging = null;
+ graph.dragged = false;
+ graph.selected = null;
+ cvalue.readOnly = true;
+ cvalue.style.visibility = 'hidden';
+ atitle.style.visibility = 'visible';
+ ccopy.disabled = true;
+ cdelete.disabled = true;
+ cadd.disabled = !editable;
+
+ // Register event listeners
+ graph.oncomposchange = onchange;
+ graph.oncompselect = onselect;
+
+ /**
+ * Find the first draggable element in a hierarchy of elements.
+ */
+ function draggable(n) {
+ //debug('draggable', n);
+ if (n == graphdiv || n == null)
+ return null;
+ if (n.className == 'g' && !isNil(n.id) && n.id != '')
+ return n;
+ return draggable(n.parentNode);
+ }
+
+ /**
+ * Handle a mouse down or touch start event.
+ */
+ function onmousedown(e) {
+
+ // Remember mouse or touch position
+ var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+ graph.downX = pos.screenX;
+ graph.downY = pos.screenY;
+ graph.moveX = pos.screenX;
+ graph.moveY = pos.screenY;
+
+ // Engage the click component selection right away
+ // on mouse controlled devices
+ if (typeof e.touches == 'undefined')
+ onclick(e);
+
+ // Find and remember draggable component
+ var dragging = draggable(e.target);
+ if (dragging == null || dragging != graph.selected)
+ return true;
+ graph.dragging = dragging;
+ graph.dragged = false;
+
+ // Remember current drag position
+ graph.dragX = pos.screenX;
+ graph.dragY = pos.screenY;
+
+ e.preventDefault();
+ return true;
+ };
+
+ if (!ui.isMobile()) {
+ graphdiv.onmousedown = function(e) {
+ //debug('onmousedown');
+ return onmousedown(e);
+ }
+ } else {
+ graphdiv.ontouchstart = function(e) {
+ //debug('ontouchstart');
+ return onmousedown(e);
+ }
+ }
+
+ /**
+ * Handle a mouse up or touch end event.
+ */
+ function onmouseup(e) {
+
+ // Engage the click component selection now on touch devices
+ if (ui.isMobile()) {
+ if (!graph.dragged && graph.moveX == graph.downX && graph.moveY == graph.downY)
+ return onclick(e);
+ }
+
+ // Stop here if the component was not dragged
+ if (graph.dragging == null)
+ return true;
+ if (!graph.dragged) {
+ graph.dragging = null;
+ return true;
+ }
+
+ if (graph.dragging.parentNode == graphdiv && graph.dragging.id.substring(0, 8) != 'palette:') {
+
+ // Add new dragged component to the composite
+ if (isNil(graph.dragging.compos)) {
+ var compos = scdl.composite(graphdiv.compos);
+ setElement(compos, graph.sortcompos(graph.addcomps(mklist(graph.dragging.comp), compos)));
+ graph.dragging.compos = graphdiv.compos;
+ }
+
+ // Update component position
+ setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.draggingg)));
+
+ // Wire component to neighboring reference
+ if (!isNil(graph.dragging.svcpos)) {
+ var compos = scdl.composite(graphdiv.compos);
+ setElement(compos, graph.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, graphdiv))));
+ }
+
+ // Snap top level component position to grid
+ if (graph.dragging.parentNode == graphdiv) {
+ var gpos = graph.relpos(graph.dragging);
+ setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.mkpath().pos(graph.gridsnap(gpos.x), graph.gridsnap(gpos.y))));
+ }
+ }
+
+ // Forget current dragged component
+ graph.dragging = null;
+ graph.dragged = false;
+
+ // Refresh the composite
+ //debug('onmouseup refresh');
+ var nodes = graph.refresh(graphdiv);
+
+ // Reselect the previously selected component
+ if (!isNil(graph.selected)) {
+ graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+ }
+
+ // Trigger composite change event
+ graph.oncomposchange(false);
+ return true;
+ };
+
+ if (!ui.isMobile()) {
+ graphdiv.onmouseup = function(e) {
+ //debug('onmouseup');
+ return onmouseup(e);
+ }
+ } else {
+ graphdiv.ontouchend = function(e) {
+ //debug('ontouchend');
+ return onmouseup(e);
+ }
+ }
+
+ /**
+ * Handle a mouse or touch click event.
+ */
+ function onclick(e) {
+ //debug('onclick logic');
+
+ // Find selected component
+ var selected = draggable(e.target);
+ if (selected == null) {
+ if (graph.selected != null) {
+
+ // Reset current selection
+ graph.compselect(graph.selected, false, atitle, cvalue, ccopy, cdelete);
+ graph.selected = null;
+
+ // Trigger component select event
+ graph.oncompselect(null);
+ }
+
+ // Dismiss the palette
+ if (e.target == graphdiv && ui.numpos(graphdiv.style.left) != (graph.palcx * -1))
+ graphdiv.style.left = ui.pixpos(graph.palcx * -1);
+
+ return true;
+ }
+
+
+ // Ignore duplicate click events
+ if (selected == graph.selected)
+ return true;
+ if (selected.id.substring(0, 8) == 'palette:' && ui.numpos(graphdiv.style.left) != 0)
+ return true;
+
+ // Deselect previously selected component
+ graph.compselect(graph.selected, false, atitle, cvalue, ccopy, cdelete);
+
+ // Clone component from the palette
+ if (selected.id.substring(0, 8) == 'palette:') {
+ var compos = scdl.composite(graphdiv.compos);
+ var comp = graph.clonepalette(selected, compos);
+ setElement(compos, graph.sortcompos(graph.addcomps(mklist(comp), compos)));
+
+ // Move into the editing area and hide the palette
+ graphdiv.style.left = ui.pixpos(graph.palcx * -1);
+
+ // Refresh the composite
+ //debug('onclick refresh');
+ var nodes = graph.refresh(graphdiv);
+
+ // Reselect the previously selected component
+ graph.selected = graph.findcompnode(scdl.name(comp), nodes);
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+
+ // Trigger composite change event
+ graph.oncomposchange(true);
+
+ } else {
+ graph.selected = selected;
+
+ // Select the component
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+ }
+
+ //debug('comp selected');
+
+ e.preventDefault();
+ return true;
+ }
+
+ if (!ui.isMobile()) {
+ graphdiv.onclick = function(e) {
+ //debug('onclick');
+ return onclick(e);
+ }
+ } else {
+ graphdiv.onclick = function(e) {
+ //debug('onclick');
+ return onclick(e);
+ }
+ }
+
+ /**
+ * Handle a mouse or touch move event.
+ */
+ function onmousemove(e) {
+ if (graph.dragging == null)
+ return true;
+
+ // Ignore duplicate mouse move events
+ if (graph.moveX == graph.dragX && graph.moveY == graph.dragY)
+ return true;
+
+ // Remember that the component was dragged
+ graph.dragged = true;
+
+ // Cut wire to component
+ if (graph.dragging.parentNode != graphdiv) {
+ var compos = scdl.composite(graphdiv.compos);
+ setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, graphdiv)));
+
+ // Bring component to the top
+ graph.bringtotop(graph.dragging, graphdiv);
+ }
+
+ // Calculate new position of dragged element
+ var gpos = graph.relpos(graph.dragging);
+ var newX = gpos.x + (graph.moveX - graph.dragX);
+ var newY = gpos.y + (graph.moveY - graph.dragY);
+ if (newX >= graph.palcx)
+ graph.dragX = graph.moveX
+ else
+ newX = graph.palcx;
+ if (newY >= 0)
+ graph.dragY = graph.moveY;
+ else
+ newY = 0;
+
+ // Move the dragged element
+ graph.move(graph.dragging, graph.mkpath().pos(newX, newY));
+
+ return false;
+ };
+
+ if (!ui.isMobile()) {
+ window.onmousemove = function(e) {
+ //debug('onmousemove');
+
+ // Remember mouse position
+ graph.moveX = e.screenX;
+ graph.moveY = e.screenY;
+
+ return onmousemove(e);
+ }
+ } else {
+ graphdiv.ontouchmove = function(e) {
+ //debug('ontouchmove');
+
+ // Remember touch position
+ var pos = e.touches[0];
+ if (graph.moveX == pos.screenX && graph.moveY == pos.screenY)
+ return true;
+ graph.moveX = pos.screenX;
+ graph.moveY = pos.screenY;
+ if (graph.moveX == graph.dragX && graph.moveY == graph.dragY)
+ return true;
+
+ return onmousemove(e);
+ }
+ }
+
+ /**
+ * Handle field on change events.
+ */
+ function onvaluechange() {
+ if (graph.selected == null)
+ return false;
+ if (graphdiv.parentNode.style.visibility == 'hidden')
+ return false;
+
+ // Change component name and refactor references to it
+ function changename() {
+ var compos = scdl.composite(graphdiv.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)));
+
+ // Refresh the composite
+ //debug('onchangename refresh');
+ var nodes = graph.refresh(graphdiv);
+
+ // Reselected the previously selected component
+ graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+
+ // Trigger composite change event
+ graph.oncomposchange(true);
+ return false;
+ }
+
+ // Change the component property value
+ function changeprop() {
+ graph.setproperty(graph.selected.comp, cvalue.value);
+ var hasprop = graph.hasproperty(graph.selected.comp);
+ cvalue.readOnly = (hasprop? false : true) || !editable;
+ cvalue.style.visibility = hasprop? 'visible' : 'hidden';
+ atitle.style.visibility = hasprop? 'hidden' : 'visible';
+ cvalue.value = graph.property(graph.selected.comp);
+
+ // Refresh the composite
+ //debug('onchangeprop refresh');
+ var nodes = graph.refresh(graphdiv);
+
+ // Reselected the previously selected component
+ graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+
+ // Trigger composite change event
+ graph.oncomposchange(true);
+ return false;
+ }
+
+ return graph.hasproperty(graph.selected.comp)? changeprop() : changename();
+ };
+
+ cvalue.onchange = function() {
+ return onvaluechange();
+ }
+
+ // Handle delete event
+ function ondeleteclick() {
+ if (graph.selected == null)
+ return false;
+ if (graph.selected.id.substring(0, 8) != 'palette:') {
+
+ // Remove selected component
+ var compos = scdl.composite(graphdiv.compos);
+ if (isNil(graph.selected.compos))
+ setElement(compos, graph.sortcompos(graph.cutwire(graph.selected, compos, graphdiv)));
+ setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.selected.comp, compos)))));
+
+ // Reset current selection
+ graph.compselect(graph.selected, false, atitle, cvalue, ccopy, cdelete);
+ graph.selected = null;
+
+ // Refresh the composite
+ //debug('ondelete refresh');
+ graph.refresh(graphdiv);
+
+ // Trigger component select event
+ graph.oncompselect(null);
+
+ // Trigger composite change event
+ graph.oncomposchange(true);
+ }
+ return false;
+ };
+
+ cdelete.onclick = function() {
+ return ondeleteclick();
+ };
+
+ // Handle copy event
+ function oncopyclick() {
+ if (graph.selected == null)
+ return false;
+ if (graph.selected.id.substring(0, 8) == 'palette:')
+ return false;
+
+ // Clone the selected component
+ var compos = scdl.composite(graphdiv.compos);
+ var comps = graph.clonecomp(graph.selected, compos);
+ setElement(compos, graph.sortcompos(graph.addcomps(comps, compos)));
+
+ // Refresh the composite
+ //debug('oncopyclick refresh');
+ var nodes = graph.refresh(graphdiv);
+
+ // Select the component clone
+ graph.selected = graph.findcompnode(scdl.name(car(comps)), nodes);
+ graph.compselect(graph.selected, true, atitle, cvalue, ccopy, cdelete);
+
+ // Trigger component select event
+ graph.oncompselect(graph.selected);
+
+ // Trigger composite change event
+ graph.oncomposchange(true);
+
+ return false;
+ };
+
+ ccopy.onclick = function() {
+ return oncopyclick();
+ };
+
+ // Handle add event
+ cadd.onclick = function() {
+
+ // Show the palette
+ graphdiv.style.left = ui.pixpos(0);
+ return false;
+ };
+
+ // Create a hidden SVG element to help compute the width
+ // of component and reference titles
+ graph.offtitles = document.createElement('span');
+ graph.offtitles.style.visibility = 'hidden';
+ graph.offtitles.position = 'absolute';
+ graph.offtitles.top = -500;
+ graph.offtitles.width = 500;
+ graph.offtitles.height = 50;
+ graphdiv.appendChild(graph.offtitles);
+
+ return graphdiv;
+};
+
+/**
+ * Point class.
+ */
+graph.Point = function(x, y) {
+ this.x = x;
+ this.y = y;
+};
+
+graph.mkpoint = function(x, y) {
+ return new graph.Point(x, y);
+};
+
+/**
+ * Path class.
+ */
+graph.Path = function() {
+ this.x = 0;
+ this.y = 0;
+ this.xmin = null;
+ this.xmax = null;
+ this.xmin = -8;
+ this.ymax = null;
+ this.draw = function(ctx) {
+ return ctx;
+ };
+}
+graph.Path.prototype.pos = function(x, y) {
+ this.x = x;
+ this.y = y;
+ if (this.xmin == null || x < this.xmin) this.xmin = x;
+ if (this.xmax == null || x > this.xmax) this.xmax = x;
+ if (this.ymin == null || y < this.ymin) this.ymin = y;
+ if (this.ymax == null || y > this.ymax) this.ymax = y;
+ return this;
+};
+graph.Path.prototype.rmove = function(x, y) {
+ return this.move(this.x + x, this.y + y);
+};
+graph.Path.prototype.rline = function(x, y) {
+ return this.line(this.x + x, this.y + y);
+};
+graph.Path.prototype.rcurve = function(x1, y1, x, y) {
+ return this.curve(this.x + x1, this.y + y1, this.x + x1 + x, this.y + y1 + y);
+};
+graph.Path.prototype.clone = function() {
+ return graph.mkpath().pos(this.x, this.y);
+};
+graph.Path.prototype.move = function(x, y) {
+ var d = this.draw;
+ this.draw = function(ctx) {
+ d(ctx);
+ ctx.moveTo(x, y);
+ return ctx;
+ };
+ return this.pos(x, y);
+};
+graph.Path.prototype.line = function(x, y) {
+ var d = this.draw;
+ this.draw = function(ctx) {
+ d(ctx);
+ ctx.lineTo(x, y);
+ return ctx;
+ };
+ return this.pos(x, y);
+};
+graph.Path.prototype.curve = function(x1, y1, x, y) {
+ var d = this.draw;
+ this.draw = function(ctx) {
+ d(ctx);
+ ctx.quadraticCurveTo(x1, y1, x, y);
+ return ctx;
+ };
+ return this.pos(x, y);
+};
+graph.Path.prototype.end = function() {
+ var d = this.draw;
+ this.draw = function(ctx) {
+ ctx.beginPath();
+ d(ctx);
+ ctx.fill();
+ ctx.beginPath();
+ d(ctx);
+ ctx.stroke();
+ };
+ return this;
+};
+graph.Path.prototype.bounds = function() {
+ var width = this.xmin == null || this.xmax == null? 0 : this.xmax - this.xmin + 1;
+ var height = this.ymin == null || this.ymax == null? 0 : this.ymax - this.ymin + 1;
+ return graph.mkpath().pos(width, height);
+};
+
+graph.mkpath = function() {
+ return new graph.Path();
+};
+
+/**
+ * Translate the position of an element.
+ */
+graph.translate = function(g, x, y) {
+ var t = 'translate(' + ui.pixpos(x) + ',' + ui.pixpos(y) + ')';
+ g.style.setProperty('-webkit-transform', t, null);
+ g.style.setProperty('-moz-transform', t, null);
+ g.style.setProperty('-o-transform', t, null);
+ g.style.setProperty('transform', t, null);
+ g.ctmx = x;
+ g.ctmy = y;
+ return g;
+};
+
+/**
+ * Apply a path to an element.
+ */
+graph.drawshape = function(g) {
+ // Set shape element size
+ var b = g.path.bounds();
+ g.width = b.x + 4;
+ g.height = b.y + 4;
+
+ // Get canvas context
+ var ctx = g.getContext('2d');
+ ctx.save();
+
+ // Apply translation
+ ctx.translate((g.path.xmin * -1) + 2, (g.path.ymin * -1) + 2);
+
+ // Draw the shape
+ ctx.fillStyle = g.fillStyle;
+ ctx.strokeStyle = !isNil(g.strokeStyle)? g.strokeStyle : graph.colors.gray;
+ ctx.lineWidth = !isNil(g.lineWidth)? g.lineWidth : 1;
+ g.path.draw(ctx);
+
+ // Reset canvas context
+ ctx.restore();
+ return g;
+}
+
+/**
+ * Return an element representing a title.
+ */
+graph.mktitle = function(t, x, y) {
+ var title = document.createElement('span');
+ title.className = 'gtitle';
+ title.style.left = ui.pixpos(x);
+ title.style.top = ui.pixpos(y);
+ title.appendChild(document.createTextNode(t));
+ graph.offtitles.appendChild(title);
+ title.style.width = ui.pixpos(title.clientWidth + 2);
+ title.style.height = ui.pixpos(title.clientHeight + 2);
+ return title;
+};
+
+/**
+ * Return an element representing the title of a component.
+ */
+graph.comptitle = function(comp) {
+ return memo(comp, 'title', function() {
+ var ct = graph.title(comp);
+ var pt = graph.propertytitle(comp);
+ if (ct == '' && pt == '')
+ return null;
+ return graph.mktitle((ct != '' && pt != '')? ct + ' ' + pt : ct + pt, graph.titlex, graph.titley);
+ });
+};
+
+/**
+ * Return the width of the title of a component.
+ */
+graph.comptitlewidth = function(comp) {
+ var title = graph.comptitle(comp);
+ if (isNil(title))
+ return 0;
+ return title.clientWidth;
+};
+
+/**
+ * Draw a component shape selection.
+ */
+graph.compselect = function(g, s, atitle, cvalue, ccopy, cdelete) {
+ if (isNil(g) || !s) {
+ cvalue.value = '';
+ cvalue.readOnly = true;
+ cvalue.style.visibility = 'hidden';
+ atitle.style.visibility = 'visible';
+ ccopy.disabled = true;
+ cdelete.disabled = true;
+ if (isNil(g))
+ return true;
+ g.shape.strokeStyle = null;
+ g.shape.lineWidth = null;
+ graph.drawshape(g.shape);
+ return true;
+ }
+
+ cvalue.value = graph.hasproperty(g.comp)? graph.property(g.comp) : g.id;
+ cvalue.readOnly = false || !editable;
+ cvalue.style.visibility = 'visible';
+ atitle.style.visibility = 'hidden';
+ ccopy.disabled = false || !editable;
+ cdelete.disabled = false || !editable;
+
+ g.shape.strokeStyle = graph.colors.link;
+ g.shape.lineWidth = 2;
+ graph.drawshape(g.shape);
+ g.parentNode.appendChild(g);
+ return true;
+};
+
+/**
+ * Draw a palette shape selection.
+ */
+graph.paletteselect = function(g, s) {
+ if (isNil(g))
+ return true;
+ if (!s) {
+ g.shape.strokeStyle = null;
+ g.shape.lineWidth = null;
+ graph.drawshape(g.shape);
+ return true;
+ }
+
+ g.shape.strokeStyle = graph.colors.link;
+ g.shape.lineWidth = 2;
+ graph.drawshape(g.shape);
+ g.parentNode.appendChild(g);
+ return true;
+};
+
+/**
+ * Return a node representing a component.
+ */
+graph.compnode = function(comp, cassoc, pos) {
+ //debug('compnode', graph.title(comp));
+
+ // Create the component shape
+ var shape = document.createElement('canvas');
+ shape.className = 'path';
+ shape.fillStyle = graph.color(comp);
+ shape.path = graph.comppath(comp, cassoc);
+ graph.drawshape(shape);
+
+ // Make the component title element
+ var title = graph.comptitle(comp);
+
+ // Create a span group element and add the shape and title to it
+ var g = document.createElement('span');
+ g.className = 'g';
+ g.comp = comp;
+ g.id = scdl.name(comp);
+ graph.translate(g, pos.x, pos.y);
+ g.pos = pos.clone();
+ g.appendChild(shape);
+ g.shape = shape;
+ g.style.width = ui.pixpos(shape.width);
+ g.style.height = ui.pixpos(shape.height);
+ if (!isNil(title)) {
+ title.style.left = ui.pixpos(shape.path.xmin * -1);
+ g.appendChild(title);
+ }
+
+ // Store the positions of the services and references
+ g.refpos = reverse(shape.path.refpos);
+ g.svcpos = reverse(shape.path.svcpos);
+
+ 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) {
+ var g = document.createElement('div');
+ g.className = 'g';
+ graph.translate(g, pos.x, pos.y);
+ g.pos = pos.clone();
+ return g;
+};
+
+/**
+ * Return a node representing a button.
+ */
+graph.mkbutton = function(t, pos) {
+
+ // Create the main button shape
+ var shape = document.createElement('canvas');
+ shape.className = 'path';
+ shape.fillStyle = graph.colors.lightgray1;
+ shape.path = graph.buttonpath();
+ graph.drawshape(shape);
+
+ // Make the button title
+ var title = graph.mktitle(t, graph.titlex, graph.titley);
+
+ // Create a group and add the button shape and title to it
+ var g = document.createElement('span');
+ g.className = 'g';
+ graph.translate(g, pos.x, pos.y);
+ g.pos = pos.clone();
+ g.appendChild(shape);
+ g.appendChild(title);
+
+ // Store the button shape in the group
+ g.shape = shape;
+
+ return g;
+};
+
+/**
+ * Return the position of a node relative to its parent.
+ */
+graph.relpos = function(g) {
+ var curX = g.ctmx? g.ctmx : 0;
+ var curY = g.ctmy? g.ctmy : 0;
+ return graph.mkpath().pos(curX, curY);
+};
+
+/**
+ * Move a node.
+ */
+graph.move = function(g, pos) {
+ g.pos = pos.clone();
+ graph.translate(g, g.pos.x, g.pos.y);
+ return g;
+};
+
+/**
+ * Return the absolute position of a component node.
+ */
+graph.abspos = function(e) {
+ if (isNil(e) || e == graphdiv)
+ return graph.mkpath();
+ var gpos = graph.relpos(e);
+ var pgpos = graph.abspos(e.parentNode);
+ return graph.mkpath().pos(gpos.x + pgpos.x, gpos.y + pgpos.y);
+};
+
+/**
+ * Bring a component node to the top.
+ */
+graph.bringtotop = function(n, g) {
+ if (n == g)
+ return null;
+ graph.move(n, graph.abspos(n));
+ g.appendChild(n);
+}
+
+/**
+ * Return the title of a SCDL element.
+ */
+graph.title = function(e) {
+ var t = scdl.title(e);
+ if (t != null) {
+ if (t == 'gt')
+ return '>'
+ if (t == 'lt')
+ return '<';
+ if (t.indexOf('{propval}') != -1)
+ return '';
+ if (t.indexOf('{compname}') == -1)
+ return t;
+ return t.replace('{compname}', scdl.name(e));
+ }
+ return scdl.name(e);
+};
+
+/**
+ * Return the property value of a SCDL component.
+ */
+graph.property = function(e) {
+ var p = scdl.properties(e);
+ if (isNil(p))
+ return '';
+ if (scdl.visible(car(p)) == 'false')
+ return '';
+ var pv = scdl.propertyValue(car(p));
+ return pv;
+};
+
+/**
+ * Return the title of a property of a SCDL component.
+ */
+graph.propertytitle = function(e) {
+ var pv = graph.property(e);
+ var t = scdl.title(e);
+ if (t.indexOf('{propval}') == -1)
+ return pv;
+ return t[0] == ' '? t.substr(1).replace('{propval}', pv) : t.replace('{propval}', pv);
+};
+
+/**
+ * Return true if a SCDL component has a property.
+ */
+graph.hasproperty = function(e) {
+ var p = scdl.properties(e);
+ if (isNil(p))
+ return false;
+ if (scdl.visible(car(p)) == 'false')
+ return false;
+ return true;
+};
+
+/**
+ * Change the property value of a SCDL component.
+ */
+graph.setproperty = function(e, value) {
+ var p = scdl.properties(e);
+ if (isNil(p))
+ return '';
+ if (scdl.visible(car(p)) == 'false')
+ return '';
+ var name = scdl.name(car(p));
+ setElement(car(p), mklist(element, "'property", mklist(attribute, "'name", name != null? name : "property"), value));
+ return value;
+};
+
+/**
+ * Return the color of a SCDL component.
+ */
+graph.color = function(comp) {
+ return memo(comp, 'color', function() {
+ var c = scdl.color(comp);
+ return c == null? graph.colors.blue1 : graph.colors[c];
+ });
+};
+
+/**
+ * Return the services on the left side of a component.
+ */
+graph.lsvcs = function(comp) {
+ return memo(comp, 'lsvcs', function() {
+ var svcs = scdl.services(comp);
+ if (isNil(svcs))
+ return mklist(mklist("'element","'service","'attribute","'name",scdl.name(comp)));
+ var l = filter(function(s) {
+ var a = scdl.align(s);
+ var v = scdl.visible(s);
+ return (a == null || a == 'left') && v != 'false';
+ }, svcs);
+ if (isNil(l))
+ return mklist();
+ return mklist(car(l));
+ });
+};
+
+/**
+ * Return the references on the right side of a component.
+ */
+graph.rrefs = function(comp) {
+ return memo(comp, 'rrefs', function() {
+ return filter(function(r) {
+ var a = scdl.align(r);
+ var v = scdl.visible(r);
+ return (a == null || a == 'right') && v != 'false';
+ }, scdl.references(comp));
+ });
+};
+
+/**
+ * Return the height of a reference on the right side of a component.
+ */
+graph.rrefheight = function(ref, cassoc) {
+ return memo(ref, 'rheight', function() {
+ var target = assoc(scdl.target(ref), cassoc);
+ if (isNil(target))
+ return graph.tabsz * 8;
+ return graph.compclosureheight(cadr(target), cassoc);
+ });
+};
+
+/**
+ * Return the total height of the references on the right side of a component.
+ */
+graph.rrefsheight = function(refs, cassoc) {
+ if (isNil(refs))
+ return 0;
+ return graph.rrefheight(car(refs), cassoc) + graph.rrefsheight(cdr(refs), cassoc);
+};
+
+/**
+ * Return the height of a component node.
+ */
+graph.compheight = function(comp, cassoc) {
+ return memo(comp, 'height', function() {
+ var lsvcs = graph.lsvcs(comp);
+ var lsvcsh = Math.max(1, length(lsvcs)) * (graph.tabsz * 8) + (graph.tabsz * 4);
+ var rrefs = graph.rrefs(comp);
+ var rrefsh = graph.rrefsheight(rrefs, cassoc) + (graph.tabsz * 2);
+ return Math.max(lsvcsh, rrefsh);
+ });
+};
+
+/**
+ * Return the height of a component and the components wired to its bottom side.
+ */
+graph.compclosureheight = function(comp, cassoc) {
+ return memo(comp, 'closureheight', function() {
+ return graph.compheight(comp, cassoc);
+ });
+};
+
+/**
+ * Return the max width of the references on the right side of a component.
+ */
+graph.rrefswidth = function(refs, cassoc) {
+ if (isNil(refs))
+ return 0;
+ return Math.max(graph.rrefwidth(car(refs), cassoc), graph.rrefswidth(cdr(refs), cassoc));
+};
+
+/**
+ * Return the width of a component.
+ */
+graph.compwidth = function(comp, cassoc) {
+ return memo(comp, 'width', function() {
+ var ctw = graph.comptitlewidth(comp);
+ var rrefsw = (isNil(graph.rrefs(comp))? 0 : (graph.tabsz * 4));
+ var twidth = (graph.titlex * 2) + ctw + rrefsw;
+ var width = Math.max(twidth, (graph.tabsz * 8) + (graph.tabsz * 4));
+ return width;
+ });
+};
+
+/**
+ * Return a path representing a reference positioned to the right of a component.
+ */
+graph.rrefpath = function(ref, cassoc, path, maxheight) {
+ var height = graph.rrefheight(ref, cassoc);
+
+ // Record reference position in the path
+ var xpos = path.x;
+ var ypos = path.y;
+ path.refpos = cons(mklist(ref, graph.mkpath().pos(xpos, ypos + (graph.tabsz * 5))), path.refpos);
+
+ // Compute the reference path
+ return path.rline(0,graph.tabsz * 2).rcurve(0,graph.tabsz,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,-graph.tabsz/2.0).rcurve(0,-graph.tabsz/2.0,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,graph.tabsz/2.0).rline(0,graph.tabsz * 3).rcurve(0,graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,-graph.tabsz/2.0).rcurve(0,-graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,graph.tabsz).line(path.x, Math.min(ypos + height, maxheight));
+};
+
+/**
+ * Return a path representing a service positioned to the left of a component.
+ */
+graph.lsvcpath = function(svc, cassoc, path, minheight) {
+ var height = graph.tabsz * 8;
+
+ // Record service position in the path
+ var xpos = path.x;
+ var ypos = path.y;
+ path.svcpos = cons(mklist(svc, graph.mkpath().pos(xpos, ypos - (graph.tabsz * 6))), path.svcpos);
+
+ // Compute the service path
+ return path.rline(0, -(graph.tabsz * 2)).rcurve(0,-graph.tabsz,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,graph.tabsz/2.0).rcurve(0,graph.tabsz/2.0,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,-graph.tabsz/2.0).rline(0,-(graph.tabsz * 3)).rcurve(0,-graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,graph.tabsz/2.0).rcurve(0,graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,-graph.tabsz).line(path.x, Math.max(ypos - height, minheight));
+};
+
+/**
+ * Return a path representing a component node.
+ */
+graph.comppath = function(comp, cassoc) {
+
+ // Calculate the width and height of the component node
+ var width = graph.compwidth(comp, cassoc);
+ var height = graph.compheight(comp, cassoc);
+
+ /**
+ * Apply a path rendering function to a list of services or references.
+ */
+ function renderpath(x, f, cassoc, path, height) {
+ if (isNil(x))
+ return path;
+ return renderpath(cdr(x), f, cassoc, f(car(x), cassoc, path, height), height);
+ }
+
+ var path = graph.mkpath().move(graph.curvsz,0);
+
+ // Store the positions of services and references in the path
+ path.refpos = mklist();
+ path.svcpos = mklist();
+
+ // Render the references on the right side of the component
+ var rrefs = graph.rrefs(comp);
+ path = path.line(width - graph.curvsz,path.y).rcurve(graph.curvsz,0,0,graph.curvsz);
+ path = renderpath(rrefs, graph.rrefpath, cassoc, path, height - graph.curvsz);
+
+ // Render the references on the bottom side of the component
+ var boffset = graph.curvsz;
+ path = path.line(path.x,height - graph.curvsz).rcurve(0,graph.curvsz,graph.curvsz * -1,0).line(boffset, path.y);
+
+ // Render the services on the left side of the component
+ var lsvcs = graph.lsvcs(comp);
+ var loffset = graph.curvsz + (length(lsvcs) * (graph.tabsz * 8));
+ path = path.line(graph.curvsz,path.y).rcurve(graph.curvsz * -1,0,0,graph.curvsz * -1).line(path.x, loffset);
+ path = renderpath(lsvcs, graph.lsvcpath, cassoc, path, graph.curvsz);
+
+ // Close the component node path
+ path = path.line(0,graph.curvsz).rcurve(0,graph.curvsz * -1,graph.curvsz,0);
+
+ return path.end();
+};
+
+/**
+ * Return the position of a component.
+ */
+graph.comppos = function(comp, pos) {
+ var x = scdl.x(comp);
+ var y = scdl.y(comp);
+ return graph.mkpath().pos(x != null? Number(x) + graph.palcx : pos.x, y != null? Number(y) : pos.y);
+};
+
+/**
+ * Return a path representing a button node.
+ */
+graph.buttonpath = function(t) {
+ var path = graph.mkpath().move(graph.curvsz,0);
+ path = path.line(graph.buttoncx - graph.curvsz,path.y).rcurve(graph.curvsz,0,0,graph.curvsz);
+ path = path.line(path.x,graph.buttoncy - graph.curvsz).rcurve(0,graph.curvsz,-graph.curvsz,0).line(graph.curvsz, path.y);
+ path = path.line(graph.curvsz,path.y).rcurve(-graph.curvsz,0,0,-graph.curvsz).line(path.x, graph.curvsz);
+ path = path.line(0,graph.curvsz).rcurve(0,-graph.curvsz,graph.curvsz,0);
+ return path.end();
+};
+
+/**
+ * Render a SCDL composite into a list of component nodes.
+ */
+graph.composite = function(compos, pos, aspalette) {
+ 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.
+ */
+ function rendercomp(comp, cassoc, pos) {
+
+ /**
+ * Render the references on the right side of a component.
+ */
+ function renderrrefs(refs, cassoc, pos, gcomp) {
+
+ /**
+ * Render a reference on the right side of a component.
+ */
+ function renderrref(ref, cassoc, pos, gcomp) {
+ var target = assoc(scdl.target(ref), cassoc);
+ if (isNil(target))
+ return null;
+
+ // Render the component target of the reference
+ return rendercomp(cadr(target), cassoc, pos);
+ }
+
+ /**
+ * Move the rendering cursor down below a reference.
+ */
+ function rendermove(ref, cassoc, pos) {
+ return pos.clone().rmove(0, graph.rrefheight(ref, cassoc));
+ }
+
+ if (isNil(refs))
+ return mklist();
+
+ // Return list of (ref, comp rendering) pairs
+ var grefcomp = renderrref(car(refs), cassoc, pos, gcomp);
+ return cons(mklist(car(refs), grefcomp), renderrrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos), gcomp));
+ }
+
+ // Compute the component shape
+ var gcomp = graph.compnode(comp, cassoc, pos);
+
+ // Render the components wired to the component references
+ var rrefs = graph.rrefs(comp);
+ var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0);
+ var grrefs = renderrrefs(rrefs, cassoc, rpos, gcomp);
+
+ // Store list of (ref, pos, component rendering) triplets in the component
+ function refposgcomp(refpos, grefs) {
+ if (isNil(refpos))
+ return mklist();
+
+ // Append component rendering to component
+ var gref = cadr(car(grefs));
+ if (gref != null)
+ gcomp.appendChild(gref);
+ return cons(mklist(car(car(refpos)), cadr(car(refpos)), gref), refposgcomp(cdr(refpos), cdr(grefs)));
+ }
+
+ gcomp.refpos = refposgcomp(gcomp.refpos, grrefs);
+
+ return gcomp;
+ }
+
+ /**
+ * Render a list of promoted service components.
+ */
+ function renderproms(svcs, cassoc, pos) {
+
+ /**
+ * Return the component promoted by a service.
+ */
+ function promcomp(svc, cassoc) {
+ var c = assoc(scdl.promote(svc), cassoc);
+ if (isNil(c))
+ return mklist();
+ return cadr(c);
+ }
+
+ /**
+ * Move the rendering cursor down below a component.
+ */
+ function rendermove(comp, cassoc, pos) {
+ return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + Math.max((graph.tabsz * 2), 8));
+ }
+
+ if (isNil(svcs))
+ return mklist();
+
+ // Render the first promoted component in the list
+ // then recurse to render the rest of the list
+ var comp = promcomp(car(svcs), cassoc);
+ if (isNil(comp))
+ return renderproms(cdr(svcs), cassoc, rendermove(car(svcs), cassoc, pos));
+
+ var cpos = graph.comppos(comp, pos);
+ return cons(rendercomp(comp, cassoc, cpos), renderproms(cdr(svcs), cassoc, rendermove(comp, cassoc, cpos)));
+ }
+
+ // Render the promoted service components
+ var rproms = renderproms(proms, cassoc, pos.clone().rmove(graph.tabsz * 4, graph.tabsz * 4));
+
+ 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 = r.pos;
+ graph.move(r, graph.mkpath().pos(gpos.x - graph.palcx, gpos.y));
+ return r;
+ }, rproms);
+
+ } else {
+
+ // Link app component elements to the containing composite
+ return map(function(r) { r.compos = compos; return r; }, rproms);
+ }
+};
+
+/**
+ * Return a component unique id.
+ */
+graph.ucid = function(prefix, compos1, compos2, clone) {
+
+ // Build an assoc list keyed by component name
+ var comps = map(function(c) { return mklist(scdl.name(c), c); }, append(namedElementChildren("'component", compos1), namedElementChildren("'component", compos2)));
+
+ if (!clone && isNil(assoc(prefix, comps)))
+ return prefix;
+
+ /**
+ * Find a free component id.
+ */
+ function ucid(p, id) {
+ if (isNil(assoc(p + id, comps)))
+ return p + id;
+ return ucid(p, id + 1);
+ }
+
+ /**
+ * Remove trailing digits from a prefix.
+ */
+ function untrail(p) {
+ if (p.length < 2 || p[p.length - 1] < '0' || p[p.length - 1] > '9')
+ return p;
+ return untrail(p.substring(0, p.length - 1));
+ }
+
+ return ucid(prefix == ''? 'comp' : (clone? untrail(prefix) : prefix), 1);
+};
+
+/**
+ * Clone a palette component node.
+ */
+graph.clonepalette = function(e, 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, compos, true))),
+ filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e.comp)));
+ var x = '<composite>' + writeXML(mklist(wcomp), false) + '</composite>';
+ var rcompos = scdl.composite(readXML(mklist(x)));
+ var comp = car(scdl.components(mklist(rcompos)));
+
+ // Update component position
+ setElement(comp, graph.movecomp(comp, graph.abspos(e).rmove(graph.palcx, 0)));
+
+ return comp;
+};
+
+/**
+ * Move a SCDL component to the given position.
+ */
+graph.movecomp = function(comp, pos) {
+ if (isNil(pos))
+ return append(mklist(element, "'component"),
+ filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'x" || attributeName(e) == "'y")); }, elementChildren(comp)));
+ return append(mklist(element, "'component", mklist(attribute, "'x", '' + (pos.x - graph.palcx)), mklist(attribute, "'y", '' + pos.y)),
+ 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;
+}
+
+/**
+ * Clone a component node and all the components it references.
+ */
+graph.clonecomp = function(e, compos) {
+
+ // Write the component and the components it references to XML
+ function collectcomp(e) {
+ function collectrefs(refpos) {
+ if (isNil(refpos))
+ return mklist();
+ var r = car(refpos);
+ var n = caddr(r);
+ if (isNil(n))
+ return collectrefs(cdr(refpos));
+ return append(collectcomp(n), collectrefs(cdr(refpos)));
+ }
+
+ return cons(e.comp, collectrefs(e.refpos));
+ }
+
+ var allcomps = collectcomp(e);
+ var ls = map(function(e) { return writeXML(mklist(e), false); }, allcomps);
+ var x = '<composite>' + writeStrings(ls) + '</composite>';
+
+ // Read them back from XML to clone them
+ var rcompos = scdl.composite(readXML(mklist(x)));
+ var comps = scdl.components(mklist(rcompos));
+
+ // Give them new unique names
+ map(function(e) {
+
+ // Rename each component
+ var oname = scdl.name(e);
+ var name = graph.ucid(oname, compos, rcompos, true);
+ setElement(e, append(mklist(element, "'component", mklist(attribute, "'name", name)),
+ filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e))));
+
+ // Refactor references to the component
+ map(function(c) { return graph.refactorrefs(scdl.references(c), oname, name); }, comps);
+ }, comps);
+
+ // Update the top component position
+ var comp = car(comps);
+ setElement(comp, graph.movecomp(comp, graph.abspos(e).rmove(10, 10)));
+
+ return comps;
+};
+
+/**
+ * Sort elements of a composite.
+ */
+graph.sortcompos = function(compos) {
+ return append(mklist(element, "'composite"), elementChildren(compos).sort(function(a, b) {
+
+ // Sort attributes, place them at the top
+ var aa = isAttribute(a);
+ var ba = isAttribute(b);
+ if (aa && !ba) return -1;
+ if (!aa && ba) return 1;
+ if (aa && ba) {
+ var aan = attributeName(a);
+ var ban = attributeName(b);
+ if (aan < ban) return -1;
+ if (aan > ban) return 1;
+ return 0;
+ }
+
+ // Sort elements, place services before components
+ var aen = elementName(a);
+ var ben = elementName(b);
+ if (aen == "'service" && ben == "'component") return -1;
+ if (aen == "'component" && ben == "'service") return 1;
+ var an = scdl.name(a);
+ var bn = scdl.name(b);
+ if (an < bn) return -1;
+ if (an > bn) return 1;
+ return 0;
+ }));
+}
+
+/**
+ * Add a list of components to a SCDL composite. The first
+ * component in the list is a promoted component.
+ */
+graph.addcomps = function(comps, compos) {
+ var comp = car(comps);
+ var name = scdl.name(comp);
+ var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name));
+ return append(mklist(element, "'composite"), append(elementChildren(compos), cons(prom, comps)));
+};
+
+/**
+ * Remove a component from a SCDL composite.
+ */
+graph.removecomp = function(comp, compos) {
+ var name = scdl.name(comp);
+ return append(mklist(element, "'composite"),
+ filter(function(c) { return !(isElement(c) && scdl.name(c) == name); }, elementChildren(compos)));
+};
+
+/**
+ * Garbage collect components not referenced or promoted.
+ */
+graph.gcollect = function(compos) {
+
+ // List the promoted components
+ var proms = map(function(s) { return mklist(scdl.promote(s), true); }, scdl.promotions(mklist(compos)));
+
+ // List the referenced components
+ var refs = reduce(function(a, comp) {
+ return append(a,
+ map(function(ref) { return mklist(scdl.target(ref), true); }, filter(function(ref) { return scdl.target(ref) != null; }, scdl.references(comp))));
+ }, mklist(), scdl.components(mklist(compos)));
+
+ // Filter out the unused components
+ var used = append(proms, refs);
+ return append(mklist(element, "'composite"),
+ filter(function(c) { return !(isElement(c) && elementName(c) == "'component" && isNil(assoc(scdl.name(c), used))); }, elementChildren(compos)));
+}
+
+/**
+ * Clone and cleanup clonable references.
+ */
+graph.clonerefs = function(compos) {
+ return append(mklist(element, "'composite"),
+ map(function(c) {
+ if (elementName(c) != "'component")
+ return c;
+
+ // If the references are clonable
+ var refs = scdl.references(c);
+ if (isNil(refs))
+ return c;
+ if (scdl.clonable(car(refs)) != 'true')
+ return c;
+
+ // Filter out the unwired references and add a fresh unwired
+ // 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, "'clonable", "true"))));
+ return append(mklist(element, "'component"), cc);
+
+ }, elementChildren(compos)));
+}
+
+/**
+ * Refactor references to a component.
+ */
+graph.refactorrefs = function(refs, oname, nname) {
+ if (isNil(refs))
+ return true;
+ var ref = car(refs);
+ if (scdl.target(ref) != oname)
+ return graph.refactorrefs(cdr(refs), oname, nname);
+
+ // Change the reference's target attribute
+ setElement(ref, append(mklist(element, "'reference"),
+ append(filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'target"); }, elementChildren(ref)),
+ mklist(mklist(attribute, "'target", nname)))));
+
+ return graph.refactorrefs(cdr(refs), oname, nname);
+};
+
+/**
+ * Rename a component.
+ */
+graph.renamecomp = function(comp, compos, name) {
+
+ // Refactor all the references to the renamed component
+ var oname = scdl.name(comp);
+ map(function(c) { return graph.refactorrefs(scdl.references(c), oname, name); }, namedElementChildren("'component", compos));
+
+ // Rename the SCDL promoted service and component
+ var proms = filter(function(s) { return scdl.name(s) == oname }, scdl.services(compos));
+ if (!isNil(proms))
+ setElement(car(proms), mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name)));
+ setElement(comp, append(mklist(element, "'component"),
+ cons(mklist(attribute, "'name", name),
+ filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'name"); }, elementChildren(comp)))));
+
+ return append(mklist(element, "'composite"), elementChildren(compos));
+};
+
+/**
+ * Cut the wire to a component node and make that node a
+ * top level component node.
+ */
+graph.cutwire = function(node, compos, g) {
+
+ /**
+ * Find the reference wired to a node and cut its wire.
+ */
+ function cutref(refs, node) {
+ if (isNil(refs))
+ return true;
+ var ref = car(refs);
+ if (caddr(ref) == node) {
+ setlist(ref, mklist(car(ref), cadr(ref), null));
+ setElement(car(ref),
+ append(mklist(element, "'reference"),
+ filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'target"); }, elementChildren(car(ref)))));
+ }
+ return cutref(cdr(refs), node);
+ }
+
+ // Cut any reference wire, if found
+ cutref(node.parentNode.refpos, node);
+
+ // Make the component node a top level node.
+ node.compos = g.compos;
+
+ // Update the SCDL composite, add a promote element for
+ // that component
+ var comp = node.comp;
+ var name = scdl.name(comp);
+ var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name));
+ return append(mklist(element, "'composite"),
+ append(mklist(prom), filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos))));
+}
+
+/**
+ * Wire a component to the closest neighbor reference.
+ */
+graph.wire = function(n, compos, g) {
+
+ // Compute position of the component's service node
+ var spos = cadr(car(n.svcpos));
+ var aspos = graph.abspos(n).rmove(spos.x, spos.y);
+
+ /**
+ * Find closest unwired reference node among all the references
+ * of all the components.
+ */
+ function closecomprefs(nodes, spos, cref) {
+
+ /**
+ * Find the closest unwired reference node among all the
+ * references of a node.
+ */
+ function closerefs(npos, refs, spos, cref) {
+ if (isNil(refs))
+ return cref;
+ var fdist = cadddr(cref);
+ var ref = car(refs);
+
+ // Skip wired reference
+ if (!isNil(filter(function(n) { return isAttribute(n) && attributeName(n) == "'target"; }, car(ref))))
+ return closerefs(npos, cdr(refs), spos, cref);
+
+ // Compute distance between service node and reference node
+ var rpos = cadr(ref).clone().rmove(npos.x, npos.y);
+ var dx = Math.pow(rpos.x - spos.x, 2);
+ var dy = Math.pow(rpos.y - spos.y, 2);
+
+ // Check for proximity threshold
+ var rdist = (dx < (graph.proxcx * graph.proxcx) && dy < (graph.proxcy * graph.proxcy))? Math.sqrt(dx + dy) : 25000000;
+
+ // Go through all the references in the component
+ return closerefs(npos, cdr(refs), spos, fdist < rdist? cref : mklist(car(ref), cadr(ref), caddr(ref), rdist));
+ }
+
+ if (isNil(nodes))
+ return cref;
+
+ // Skip non-component nodes
+ var node = car(nodes);
+ if (isNil(node.comp))
+ return closecomprefs(cdr(nodes), spos, cref);
+
+ // Compute the component absolute position
+ var npos = graph.abspos(node);
+
+ // Go through all the components and their references
+ return closecomprefs(append(nodeList(node.childNodes), cdr(nodes)), spos, closerefs(npos, node.refpos, spos, cref));
+ }
+
+ // Find closest reference node
+ var cref = closecomprefs(nodeList(g.childNodes), aspos, mklist(null, graph.mkpath(), null, 25000000));
+ if (car(cref) == null)
+ return compos;
+ if (cadddr(cref) == 25000000)
+ return compos;
+
+ // Wire component to that reference, un-promote it, and
+ // update the SCDL reference and composite
+ setElement(n.comp, graph.movecomp(graph.dragging.comp, null));
+ n.compos = null;
+ setElement(car(cref), append(mklist(element, "'reference", mklist(attribute, "'target", scdl.name(n.comp))), elementChildren(car(cref))));
+ var name = scdl.name(n.comp);
+ return append(mklist(element, "'composite"),
+ filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos)));
+}
+
+/**
+ * Display a list of graphical nodes.
+ */
+graph.display = function(nodes, g) {
+
+ // Append the nodes to the graphical canvas
+ appendNodes(nodes, g);
+ return nodes;
+};
+
+/**
+ * Hide a graph.
+ */
+graph.hide = function(g) {
+
+ // Remove 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));
+ return g;
+};
+
+/**
+ * Refresh a graph.
+ */
+graph.refresh = function(g) {
+ //debug('refresh');
+
+ // 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));
+
+ // Redisplay the composite associated with the graph
+ var nodes = graph.composite(g.compos, graph.mkpath().pos(graph.palcx,0), false);
+ appendNodes(nodes, g);
+ return nodes;
+};
+
+/**
+ * Display and enable editing of a composite and the graphical
+ * nodes that represent it.
+ */
+graph.edit = function(appname, compos, nodes, g) {
+
+ // Store the composite elements, and sort them to allow for change detection later
+ g.compos = compos;
+ var scompos = scdl.composite(g.compos);
+ setElement(scompos, graph.sortcompos(scompos));
+
+ // 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));
+
+ // Display the composite nodes
+ appendNodes(nodes, g);
+ return nodes;
+};
+
+/**
+ * Track the composition graph, whether it's visible or not and the selected component.
+ */
+var gvisible = true;
+var gcomp = null;
+var cdiv = $('contentdiv');
+var pdiv = $('playdiv');
+var graphdiv = $('graphdiv');
+
+/**
+ * Track the palettes.
+ */
+var gpalettes = new Array();
+var spalette = 'control';
+var bpalette = null;
+
+/**
+ * Get and display an application composite.
+ */
+function getapp(name, g) {
+ if (isNil(name))
+ return false;
+ showStatus('Loading');
+
+ return composites.get(name, function(doc) {
+
+ // Stop now if we didn't get a composite
+ if (doc == null) {
+ showError('App not available');
+ return false;
+ }
+
+ // Get the composite from the ATOM entry
+ var composentry = car(atom.readATOMEntry(mklist(doc)));
+ var content = namedElementChild("'content", composentry);
+ composite = isNil(content)? mklist() : elementChildren(content);
+ 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(graph.palcx,0), false, g), g);
+
+ // Track the saved composite XML
+ savedcomposxml = car(writeXML(composite, false));
+
+ // Enable author to edit the composite
+ author = elementValue(namedElementChild("'author", composentry));
+ editable = author == username;
+ cadd.disabled = !editable;
+ showStatus(editable? onlineStatus() : 'Read only');
+ return true;
+ });
+}
+
+/**
+ * Display a palette. Get it from the server if needed.
+ */
+function displaypalette(name, g, palette, gpalettes) {
+ if (isNil(name))
+ return;
+ if (isNil(gpalettes[name])) {
+
+ // Get the palette from the server
+ palettes.get(name, function(doc) {
+ var entry = car(atom.readATOMEntry(mklist(doc)));
+ var content = namedElementChild("'content", entry);
+ var compos = isNil(content)? mklist() : elementChildren(content);
+ gpalettes[name] = graph.composite(compos, graph.mkpath().move(2580,0), true, g);
+ graph.display(gpalettes[name], g);
+ });
+ return true;
+ }
+ graph.display(gpalettes[name], g);
+ 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);
+ b.onclick = function(e) {
+
+ // Swap the selected palette
+ graph.paletteselect(bpalette, false);
+ displaypalette(spalette, bg, palette, gpalettes);
+ bpalette = b;
+ graph.paletteselect(b, true);
+ spalette = name;
+ return displaypalette(spalette, 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, palette, gpalettes);
+
+ return b;
+}
+
+/**
+ * Save the current composite.
+ */
+function save(savexml) {
+ showStatus('Saving');
+ savedcomposxml = savexml;
+ var entry = '<?xml version="1.0" encoding="UTF-8"?>\n' + '<entry xmlns="http://www.w3.org/2005/Atom">' +
+ '<title type="text">' + appname + '</title><id>' + appname + '</id><author><email>' + author + '</email></author>' +
+ '<content type="application/xml">' + savedcomposxml + '</content></entry>';
+ composites.put(appname, entry, function(e) {
+ if (e) {
+ showStatus('Local copy');
+ return false;
+ }
+ showStatus('Saved');
+ return false;
+ });
+ return true;
+}
+
+/**
+ * Handle a composite change event.
+ */
+function oncomposchange(prop) {
+ if (!editable)
+ return false;
+
+ var newxml = car(writeXML(composite, false));
+ if (savedcomposxml == newxml)
+ return false;
+ showStatus('Modified');
+
+ // Save property changes right away
+ if (prop)
+ return save(newxml);
+
+ // Autosave other changes after 1 second
+ showStatus('Modified');
+ setTimeout(function() {
+ if (savedcomposxml == newxml) {
+ showStatus('Saved');
+ return false;
+ }
+ return save(newxml);
+ }, 1000);
+ return true;
+}
+
+/**
+ * Return the link to a component.
+ */
+function complink(appname, cname) {
+ if (cname == '' || isNil(cname))
+ return '';
+ var protocol = location.protocol;
+ var host = location.hostname;
+ var port = ':' + location.port;
+ if (port == ':80' || port == ':443' || port == ':')
+ port = '';
+ var link = protocol + '//' + host + port + '/' + appname + '/c/' + cname;
+ return link;
+}
+
+/**
+ * Handle a component select event.
+ */
+function oncompselect(gsel) {
+ if (gsel == gcomp)
+ return true;
+ gcomp = gsel;
+
+ cdelete.disabled = isNil(gsel) || !editable;
+ ccopy.disabled = isNil(gsel) || !editable;
+ cplay.disabled = isNil(gsel);
+ 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.value = '<';
+ gvisible = false;
+ pdiv.innerHTML = '';
+ pdiv.style.visibility = 'visible';
+
+ // Get the component result data
+ var comp = sca.component(gcomp.id, appname);
+ comp.get('', function(doc) {
+ function displaydata(t, w) {
+ pdiv.style.width = w;
+ pdiv.innerHTML = t;
+ return true;
+ }
+
+ // Stop now if we didn't get the doc
+ if (doc == null)
+ return displaydata('No content', '2500px');
+
+ // Format data table
+ if (json.isJSON(mklist(doc)))
+ return displaydata(ui.datatable(json.readJSON(mklist(doc))), '2500px');
+
+ if (atom.isATOMEntry(mklist(doc)))
+ return displaydata(ui.datatable(atom.readATOMEntry(mklist(doc))), '2500px');
+
+ if (atom.isATOMFeed(mklist(doc)))
+ return display(ui.datatable(atom.readATOMFeed(mklist(doc))), '2500px');
+
+ // Insert the doc as is in an iframe
+ var t = '<table class="datatable" style="width: 100%;">' +
+ '<tr><td class="datatdltop">' + 'value' + '</td>' + '<td class="datatdr">' +
+ '<iframe style="width: 100%; height: 5000px;" scrolling="no" frameborder="0" src="' + clink + '"/>' +
+ '</td></tr></table>'
+ return displaydata(t, '100%');
+ });
+
+ setTimeout(function() {
+ graphdiv.style.visibility = 'hidden'
+ }, 0);
+ return true;
+}
+
+/**
+ * Show the composition graph.
+ */
+function showgraph(gcomp) {
+ if (gvisible)
+ return true;
+ cplay.value = '>';
+ graphdiv.style.visibility = 'visible'
+ gvisible = true;
+ graph.compselect(gcomp, true, atitle, cvalue, ccopy, cdelete);
+ setTimeout(function() {
+ pdiv.style.visibility = 'hidden';
+ pdiv.innerHTML = '';
+ }, 0);
+ 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.
+ */
+graph.mkedit(graphdiv, graph.mkpath().move(-2500,0), atitle, cvalue, cadd, ccopy, cdelete, oncomposchange, oncompselect);
+
+/**
+ * Install the palettes.
+ */
+var bg = graph.mkgroup(graph.mkpath());
+var pos = graph.mkpath().move(0, 0);
+bpalette = installpalette('control', pos.rmove(5,2), graphdiv, bg, spalette, gpalettes);
+installpalette('values', pos.rmove(0,28), graphdiv, bg, spalette, gpalettes);
+installpalette('lists', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('transform', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('text', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('http', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('animation', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('talk', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('social', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('search', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('database', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('logic', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('math', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+installpalette('python', pos.rmove(0, 28), graphdiv, bg, spalette, gpalettes);
+
+/**
+ * Get and display the current app.
+ */
+getapp(appname, graphdiv);
+
+})();
+</script>
+
+</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-11 06:49:14 +0000