From 2dffb211b9e30269a0db1c7741a4f07ff5260952 Mon Sep 17 00:00:00 2001 From: jsdelfino Date: Thu, 13 Jan 2011 10:27:39 +0000 Subject: Refactor and minor improvements of the edit module. Add a palette of sample components. git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1058487 13f79535-47bb-0310-9956-ffa450edef68 --- sca-cpp/trunk/modules/edit/apps.py | 10 +- .../trunk/modules/edit/apps/relay/app.composite | 81 ++ .../trunk/modules/edit/apps/store/app.composite | 70 ++ .../trunk/modules/edit/apps/store2/app.composite | 70 ++ .../trunk/modules/edit/apps/store3/app.composite | 70 ++ .../trunk/modules/edit/apps/travel/app.composite | 240 +++++ sca-cpp/trunk/modules/edit/dashboard.py | 72 +- .../trunk/modules/edit/dashboards/joe@localhost | 1 + .../trunk/modules/edit/domains/relay/app.composite | 81 -- .../trunk/modules/edit/domains/store/app.composite | 70 -- .../modules/edit/domains/store2/app.composite | 70 -- .../modules/edit/domains/store3/app.composite | 70 -- .../modules/edit/domains/travel/app.composite | 240 ----- sca-cpp/trunk/modules/edit/edit.composite | 69 +- .../trunk/modules/edit/htdocs/dash/dashboard.html | 2 +- sca-cpp/trunk/modules/edit/htdocs/dash/index.html | 7 +- sca-cpp/trunk/modules/edit/htdocs/edit/edit.html | 69 -- sca-cpp/trunk/modules/edit/htdocs/edit/graph.js | 831 ------------------ sca-cpp/trunk/modules/edit/htdocs/edit/index.html | 64 -- sca-cpp/trunk/modules/edit/htdocs/graph/graph.html | 112 +++ sca-cpp/trunk/modules/edit/htdocs/graph/graph.js | 977 +++++++++++++++++++++ sca-cpp/trunk/modules/edit/htdocs/graph/index.html | 63 ++ sca-cpp/trunk/modules/edit/htdocs/index.html | 7 +- sca-cpp/trunk/modules/edit/htdocs/menu.html | 2 +- sca-cpp/trunk/modules/edit/htdocs/page/index.html | 41 + sca-cpp/trunk/modules/edit/htdocs/page/page.html | 50 ++ sca-cpp/trunk/modules/edit/htdocs/page/page.js | 204 +++++ sca-cpp/trunk/modules/edit/palettes.py | 32 + .../edit/palettes/control/palette.composite | 53 ++ .../edit/palettes/operators/palette.composite | 138 +++ .../edit/palettes/sensors/palette.composite | 32 + .../modules/edit/palettes/social/palette.composite | 81 ++ .../edit/palettes/variables/palette.composite | 72 ++ .../trunk/modules/edit/workspaces/joe@localhost | 1 - sca-cpp/trunk/modules/js/htdocs/scdl.js | 27 + sca-cpp/trunk/modules/js/htdocs/ui.css | 12 +- sca-cpp/trunk/modules/js/htdocs/ui.js | 26 +- 37 files changed, 2543 insertions(+), 1574 deletions(-) create mode 100644 sca-cpp/trunk/modules/edit/apps/relay/app.composite create mode 100644 sca-cpp/trunk/modules/edit/apps/store/app.composite create mode 100644 sca-cpp/trunk/modules/edit/apps/store2/app.composite create mode 100644 sca-cpp/trunk/modules/edit/apps/store3/app.composite create mode 100644 sca-cpp/trunk/modules/edit/apps/travel/app.composite create mode 100644 sca-cpp/trunk/modules/edit/dashboards/joe@localhost delete mode 100644 sca-cpp/trunk/modules/edit/domains/relay/app.composite delete mode 100644 sca-cpp/trunk/modules/edit/domains/store/app.composite delete mode 100644 sca-cpp/trunk/modules/edit/domains/store2/app.composite delete mode 100644 sca-cpp/trunk/modules/edit/domains/store3/app.composite delete mode 100644 sca-cpp/trunk/modules/edit/domains/travel/app.composite delete mode 100644 sca-cpp/trunk/modules/edit/htdocs/edit/edit.html delete mode 100644 sca-cpp/trunk/modules/edit/htdocs/edit/graph.js delete mode 100644 sca-cpp/trunk/modules/edit/htdocs/edit/index.html create mode 100644 sca-cpp/trunk/modules/edit/htdocs/graph/graph.html create mode 100644 sca-cpp/trunk/modules/edit/htdocs/graph/graph.js create mode 100644 sca-cpp/trunk/modules/edit/htdocs/graph/index.html create mode 100644 sca-cpp/trunk/modules/edit/htdocs/page/index.html create mode 100644 sca-cpp/trunk/modules/edit/htdocs/page/page.html create mode 100644 sca-cpp/trunk/modules/edit/htdocs/page/page.js create mode 100644 sca-cpp/trunk/modules/edit/palettes.py create mode 100644 sca-cpp/trunk/modules/edit/palettes/control/palette.composite create mode 100644 sca-cpp/trunk/modules/edit/palettes/operators/palette.composite create mode 100644 sca-cpp/trunk/modules/edit/palettes/sensors/palette.composite create mode 100644 sca-cpp/trunk/modules/edit/palettes/social/palette.composite create mode 100644 sca-cpp/trunk/modules/edit/palettes/variables/palette.composite delete mode 100644 sca-cpp/trunk/modules/edit/workspaces/joe@localhost (limited to 'sca-cpp') diff --git a/sca-cpp/trunk/modules/edit/apps.py b/sca-cpp/trunk/modules/edit/apps.py index 920bb635e6..61cdfe07ef 100644 --- a/sca-cpp/trunk/modules/edit/apps.py +++ b/sca-cpp/trunk/modules/edit/apps.py @@ -15,7 +15,7 @@ # specific language governing permissions and limitations # under the License. -# Workspace collection implementation +# Apps collection implementation import uuid import sys from util import * @@ -24,24 +24,24 @@ from util import * def appid(id): return ("'" + car(id), "'app.composite") -# Post a new app to the domains db +# Post a new app to the apps db def post(collection, app, cache): id = appid((str(uuid.uuid1()),)) cache.put((id,), app) return id -# Put an app into the domains db +# Put an app into the apps db def put(id, app, cache): cache.put(appid(id), app) return True -# Get an app from the domains db +# Get an app from the apps db def get(id, cache): if isNil(id): return ("Apps", "apps") return (car(id), car(id), cache.get(appid(id))) -# Delete an app from the domains db +# Delete an app from the apps db def delete(id, cache): cache.delete(appid(id)) return True diff --git a/sca-cpp/trunk/modules/edit/apps/relay/app.composite b/sca-cpp/trunk/modules/edit/apps/relay/app.composite new file mode 100644 index 0000000000..1e5015315c --- /dev/null +++ b/sca-cpp/trunk/modules/edit/apps/relay/app.composite @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/apps/store/app.composite b/sca-cpp/trunk/modules/edit/apps/store/app.composite new file mode 100644 index 0000000000..ec3fa32fa4 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/apps/store/app.composite @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + USD + + + + + + + + + + + + + + + + + + + + + + + + + + + localhost:11211 + + + diff --git a/sca-cpp/trunk/modules/edit/apps/store2/app.composite b/sca-cpp/trunk/modules/edit/apps/store2/app.composite new file mode 100644 index 0000000000..afec3cb1d3 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/apps/store2/app.composite @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + USD + + + + + + + + + + + + + + + + + + + + + + + + + + + localhost:11211 + + + diff --git a/sca-cpp/trunk/modules/edit/apps/store3/app.composite b/sca-cpp/trunk/modules/edit/apps/store3/app.composite new file mode 100644 index 0000000000..7cba2c19e1 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/apps/store3/app.composite @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + USD + + + + + + + + + + + + + + + + + + + + + + + + + + + localhost:11211 + + + diff --git a/sca-cpp/trunk/modules/edit/apps/travel/app.composite b/sca-cpp/trunk/modules/edit/apps/travel/app.composite new file mode 100644 index 0000000000..833944a855 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/apps/travel/app.composite @@ -0,0 +1,240 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GBP + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.23 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/dashboard.py b/sca-cpp/trunk/modules/edit/dashboard.py index 990476a84e..825bf8b405 100644 --- a/sca-cpp/trunk/modules/edit/dashboard.py +++ b/sca-cpp/trunk/modules/edit/dashboard.py @@ -15,68 +15,68 @@ # specific language governing permissions and limitations # under the License. -# Workspace collection implementation +# Dashboards collection implementation import uuid import sys from util import * -# Convert a particular user email to a workspace id -def workspaceid(user): +# Convert a particular user email to a dashboard id +def dashboardid(user): return ("'" + user.id(),) -# Get a workspace from the cache -def getworkspace(id, cache): - workspace = cache.get(id) - if isNil(workspace): +# Get a dashboard from the cache +def getdashboard(id, cache): + dashboard = cache.get(id) + if isNil(dashboard): return () - return workspace + return dashboard -# Post a new app to the user's workspace +# Post a new app to the user's dashboard def post(collection, app, user, cache): id = (str(uuid.uuid1()),) - workspace = cons((car(app), car(id), caddr(app)), getworkspace(workspaceid(user), cache)) - cache.put(workspaceid(user), workspace) + dashboard = cons((car(app), car(id), caddr(app)), getdashboard(dashboardid(user), cache)) + cache.put(dashboardid(user), dashboard) return id -# Put an app into the user's workspace +# Put an app into the user's dashboard def put(id, app, user, cache): - def putapp(app, workspace): - if isNil(workspace): + def putapp(app, dashboard): + if isNil(dashboard): return (app,) - if cadr(app) == cadr(car(workspace)): - return cons(app, cdr(workspace)) - return cons(car(workspace), putapp(app, cdr(workspace))) + if cadr(app) == cadr(car(dashboard)): + return cons(app, cdr(dashboard)) + return cons(car(dashboard), putapp(app, cdr(dashboard))) - workspace = putapp(app, getworkspace(workspaceid(user), cache)) - cache.put(workspaceid(user), workspace) + dashboard = putapp(app, getdashboard(dashboardid(user), cache)) + cache.put(dashboardid(user), dashboard) return True -# Get apps from the user's workspace +# Get apps from the user's dashboard def get(id, user, cache): - def findapp(id, workspace): - if isNil(workspace): + def findapp(id, dashboard): + if isNil(dashboard): return None - if car(id) == cadr(car(workspace)): - return car(workspace) - return findapp(id, cdr(workspace)) + if car(id) == cadr(car(dashboard)): + return car(dashboard) + return findapp(id, cdr(dashboard)) if isNil(id): - return ("Your Apps", user.id()) + getworkspace(workspaceid(user), cache) - return findapp(id, getworkspace(workspaceid(user), cache)) + return ("Your Apps", user.id()) + getdashboard(dashboardid(user), cache) + return findapp(id, getdashboard(dashboardid(user), cache)) -# Delete apps from the user's workspace +# Delete apps from the user's dashboard def delete(id, user, cache): if isNil(id): - return cache.delete(workspaceid(user)) + return cache.delete(dashboardid(user)) - def deleteapp(id, workspace): - if isNil(workspace): + def deleteapp(id, dashboard): + if isNil(dashboard): return () - if car(id) == cadr(car(workspace)): - return cdr(workspace) - return cons(car(workspace), deleteapp(id, cdr(workspace))) + if car(id) == cadr(car(dashboard)): + return cdr(dashboard) + return cons(car(dashboard), deleteapp(id, cdr(dashboard))) - workspace = deleteapp(id, getworkspace(workspaceid(user), cache)) - cache.put(workspaceid(user), workspace) + dashboard = deleteapp(id, getdashboard(dashboardid(user), cache)) + cache.put(dashboardid(user), dashboard) return True diff --git a/sca-cpp/trunk/modules/edit/dashboards/joe@localhost b/sca-cpp/trunk/modules/edit/dashboards/joe@localhost new file mode 100644 index 0000000000..b9419e75d0 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/dashboards/joe@localhost @@ -0,0 +1 @@ +(("Sample Online Store App" "store" ()) ("Layout Variation of the Online Store App" "store2" ()) ("Another Variation of the Online Store App" "store3" ()) ("Sample HTTP Relay App" "relay" ()) ("Travel Tutorial App" "travel" ())) diff --git a/sca-cpp/trunk/modules/edit/domains/relay/app.composite b/sca-cpp/trunk/modules/edit/domains/relay/app.composite deleted file mode 100644 index 1e5015315c..0000000000 --- a/sca-cpp/trunk/modules/edit/domains/relay/app.composite +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/sca-cpp/trunk/modules/edit/domains/store/app.composite b/sca-cpp/trunk/modules/edit/domains/store/app.composite deleted file mode 100644 index ec3fa32fa4..0000000000 --- a/sca-cpp/trunk/modules/edit/domains/store/app.composite +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - - - - USD - - - - - - - - - - - - - - - - - - - - - - - - - - - localhost:11211 - - - diff --git a/sca-cpp/trunk/modules/edit/domains/store2/app.composite b/sca-cpp/trunk/modules/edit/domains/store2/app.composite deleted file mode 100644 index afec3cb1d3..0000000000 --- a/sca-cpp/trunk/modules/edit/domains/store2/app.composite +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - - - - USD - - - - - - - - - - - - - - - - - - - - - - - - - - - localhost:11211 - - - diff --git a/sca-cpp/trunk/modules/edit/domains/store3/app.composite b/sca-cpp/trunk/modules/edit/domains/store3/app.composite deleted file mode 100644 index 7cba2c19e1..0000000000 --- a/sca-cpp/trunk/modules/edit/domains/store3/app.composite +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - - - - - - - - - - - - - - USD - - - - - - - - - - - - - - - - - - - - - - - - - - - localhost:11211 - - - diff --git a/sca-cpp/trunk/modules/edit/domains/travel/app.composite b/sca-cpp/trunk/modules/edit/domains/travel/app.composite deleted file mode 100644 index 833944a855..0000000000 --- a/sca-cpp/trunk/modules/edit/domains/travel/app.composite +++ /dev/null @@ -1,240 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - GBP - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1.23 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/sca-cpp/trunk/modules/edit/edit.composite b/sca-cpp/trunk/modules/edit/edit.composite index c73ac82037..49a5c84a56 100644 --- a/sca-cpp/trunk/modules/edit/edit.composite +++ b/sca-cpp/trunk/modules/edit/edit.composite @@ -39,6 +39,7 @@ + @@ -48,7 +49,7 @@ - + @@ -56,46 +57,74 @@ - + - + + + + + + + + + - - + + - - + + - + - workspaces + dashboards scheme - - + + + + + + + + + + + + + + + + + + + apps + xml + + - + - - + + - - + + - + - domains + palettes xml - - + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html index b69c760c99..60d869abde 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html @@ -82,7 +82,7 @@ function getapps(sync) { title = car(entry); apps += ''; - apps += '' + '' + name + ''; + apps += '' + '' + name + ''; apps += '' + title + ''; apps += ''; } diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html index 0abb384d75..d1da06d71c 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html @@ -30,14 +30,11 @@

Welcome to your App Dashboard!

- - - diff --git a/sca-cpp/trunk/modules/edit/htdocs/edit/edit.html b/sca-cpp/trunk/modules/edit/htdocs/edit/edit.html deleted file mode 100644 index d5618834ba..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/edit/edit.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js b/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js deleted file mode 100644 index 5f122ac498..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/edit/graph.js +++ /dev/null @@ -1,831 +0,0 @@ -/* - * 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. - */ - -/** - * SVG and VML component rendering functions. - */ - -var graph = new Object(); - -/** - * Detect browser VML support. - */ -graph.supportsVML = function() { - if (typeof graph.supportsVML.supported != 'undefined') - return graph.supportsVML.supported; - graph.supportsVML.supported = navigator.appName == 'Microsoft Internet Explorer'; - return graph.supportsVML.supported; -}; - -/** - * Detect browser SVG support. - */ -graph.supportsSVG = function() { - if (typeof graph.supportsSVG.supported != 'undefined') - return graph.supportsSVG.supported; - graph.supportsSVG.supported = navigator.appName != 'Microsoft Internet Explorer'; - return graph.supportsSVG.supported; -}; - -/** - * Basic colors - */ -graph.colors = new Object(); -graph.colors.black = '#000000'; -graph.colors.blue = '#0000ff'; -graph.colors.cyan = '#00ffff'; -graph.colors.gray = '#808080' -graph.colors.green = '#008000'; -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'; - -/** - * Base path class. - */ -graph.BasePath = function() { - this.path = ''; - this.x = 0; - this.y = 0; - - this.pos = function(x, y) { - this.x = x; - this.y = y; - return this; - }; - - this.xpos = function() { - return this.x; - }; - - this.ypos = function() { - return this.y; - }; - - this.rmove = function(x, y) { - return this.move(this.x + x, this.y + y); - }; - - this.rline = function(x, y) { - return this.line(this.x + x, this.y + y); - }; - - this.rcurve = function(x1, y1, x, y) { - return this.curve(this.x + x1, this.y + y1, this.x + x1 + x, this.y + y1 + y); - }; - - this.str = function() { - return this.path; - }; -}; - -/** - * Rendering functions that work both with VML and SVG. - */ - -/** - * VML rendering. - */ -if (graph.supportsVML()) { - - graph.vmlns='urn:schemas-microsoft-com:vml'; - document.write(''); - - /** - * Make a graph. - */ - graph.mkgraph = function() { - var div = document.createElement('div'); - div.id = 'vmldiv'; - document.body.appendChild(div); - - var vmlg = document.createElement('v:group'); - vmlg.style.width = 2000; - vmlg.style.height = 2000; - vmlg.coordsize = '2000,2000'; - div.appendChild(vmlg); - - graph.dragging = null; - - function draggable(n) { - if (n == vmlg) - return null; - if (n.nodeName == 'group') - return n; - return draggable(n.parentNode); - } - - vmlg.onmousedown = function() { - window.event.returnValue = false; - graph.dragging = draggable(window.event.srcElement); - if (graph.dragging == null) - return false; - graph.dragging.parentNode.appendChild(graph.dragging); - graph.dragX = window.event.clientX; - graph.dragY = window.event.clientY; - vmlg.setCapture(); - return false; - }; - - vmlg.onmouseup = function() { - if (graph.dragging == null) - return false; - graph.dragging = null; - vmlg.releaseCapture(); - return false; - }; - - vmlg.onmousemove = function() { - if (graph.dragging == null) - return false; - var origX = graph.dragging.coordorigin.X; - var origY = graph.dragging.coordorigin.Y; - var newX = origX - (window.event.clientX - graph.dragX); - var newY = origY - (window.event.clientY - graph.dragY); - graph.dragX = window.event.clientX; - graph.dragY = window.event.clientY; - graph.dragging.setAttribute('coordorigin', newX + ' ' + newY); - return false; - }; - - graph.comptitlewidthdiv = document.createElement('span'); - graph.comptitlewidthdiv.style.visibility = 'hidden' - graph.comptitlewidthdiv.style.fontWeight = 'bold' - div.appendChild(graph.comptitlewidthdiv); - - graph.reftitlewidthdiv = document.createElement('span'); - graph.reftitlewidthdiv.style.visibility = 'hidden' - div.appendChild(graph.reftitlewidthdiv); - - return vmlg; - }; - - /** - * Make a shape path. - */ - graph.mkpath = function() { - function Path() { - this.BasePath = graph.BasePath; - this.BasePath(); - - this.clone = function() { - return graph.mkpath().pos(this.xpos(), this.ypos()); - }; - - this.move = function(x, y) { - this.path += 'M ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.line = function(x, y) { - this.path += 'L ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.curve = function(x1, y1, x, y) { - this.path += 'QB ' + x1 + ',' + y1 + ',' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.end = function() { - this.path += 'X E'; - return this; - }; - } - - return new Path(); - }; - - /** - * Return an element representing the title of a component. - */ - graph.comptitle = function(comp) { - var t = scdl.name(comp); - var tsvcs = graph.tsvcs(comp); - var lsvcs = graph.lsvcs(comp); - var title = document.createElement('v:textbox'); - title.style.left = '' + (isNil(lsvcs)? 5 : 25); - title.style.top = '' + (isNil(tsvcs)? 5 : 25); - title.style.position = 'absolute'; - title.style.fontWeight = 'bold'; - var tnode = document.createTextNode(t); - title.appendChild(tnode); - return title; - }; - - /** - * Return the width of the title of a component. - */ - graph.comptitlewidth = function(comp) { - var t = scdl.name(comp); - graph.comptitlewidthdiv.innerHTML = t; - var twidth = graph.comptitlewidthdiv.offsetWidth; - graph.comptitlewidthdiv.innerHTML = ''; - return twidth; - }; - - /** - * Return an element representing the title of a reference. - */ - graph.reftitle = function(ref) { - var t = scdl.name(ref); - var title = document.createElement('v:textbox'); - title.style.left = '' + 25; - title.style.top = '' + 25; - title.style.position = 'absolute'; - var tnode = document.createTextNode(t); - title.appendChild(tnode); - return title; - }; - - /** - * Return the width of the title of a reference. - */ - graph.reftitlewidth = function(ref) { - var t = scdl.name(ref); - graph.reftitlewidthdiv.innerHTML = t; - var twidth = graph.reftitlewidthdiv.offsetWidth; - graph.reftitlewidthdiv.innerHTML = ''; - return twidth; - }; - - /** - * Return a shape representing a component. - */ - graph.compshape = function(comp, cassoc, pos) { - var title = graph.comptitle(comp); - - var d = graph.comppath(comp, cassoc).str(); - - var shape = document.createElement('v:shape'); - shape.style.width = 2000; - shape.style.height = 2000; - shape.coordsize = '2000,2000'; - shape.path = d; - shape.fillcolor = graph.color(comp); - shape.stroked = 'false'; - - var contour = document.createElement('v:shape'); - contour.style.width = 2000; - contour.style.height = 2000; - contour.coordsize = '2000,2000'; - contour.setAttribute('path', d); - contour.filled = 'false'; - contour.strokecolor = graph.colors.gray; - contour.strokeweight = '2'; - contour.style.left = 1; - contour.style.top = 1; - var stroke = document.createElement('v:stroke'); - stroke.opacity = '20%'; - contour.appendChild(stroke); - - var g = document.createElement('v:group'); - g.id = scdl.name(comp); - g.style.width = 2000; - g.style.height = 2000; - g.coordsize = '2000,2000'; - g.style.left = pos.xpos(); - g.style.top = pos.ypos(); - g.appendChild(shape); - shape.appendChild(title); - g.appendChild(contour) - return g; - }; -} - -/** - * SVG rendering. - */ -if (graph.supportsSVG()) { - - graph.svgns='http://www.w3.org/2000/svg'; - - /** - * Make a graph. - */ - graph.mkgraph = function() { - var div = document.createElement('div'); - div.id = 'svgdiv'; - document.body.appendChild(div); - - var svg = document.createElementNS(graph.svgns, 'svg'); - svg.style.height = '100%'; - svg.style.width = '100%'; - div.appendChild(svg); - - graph.dragging = null; - - function draggable(n) { - if (n == svg) - return null; - if (n.nodeName == 'g') - return n; - return draggable(n.parentNode); - } - - svg.onmousedown = function(e) { - if (e.preventDefault) - e.preventDefault(); - else - e.returnValue= false; - graph.dragging = draggable(e.target); - if (graph.dragging == null) - return false; - graph.dragging.parentNode.appendChild(graph.dragging); - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - graph.dragX = pos.clientX; - graph.dragY = pos.clientY; - return false; - }; - - svg.ontouchstart = svg.onmousedown; - - svg.onmouseup = function(e) { - if (graph.dragging == null) - return false; - graph.dragging = null; - return false; - }; - - svg.ontouchend = svg.onmouseup; - - svg.onmousemove = function(e) { - if (graph.dragging == null) - return false; - var pmatrix = graph.dragging.parentNode.getCTM(); - var matrix = graph.dragging.getCTM(); - var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e); - var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f); - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - var newX = curX + (pos.clientX - graph.dragX); - var newY = curY + (pos.clientY - graph.dragY); - graph.dragX = pos.clientX; - graph.dragY = pos.clientY; - graph.dragging.setAttribute('transform', 'translate(' + newX + ',' + newY + ')'); - return false; - }; - - svg.ontouchmove = svg.onmousemove; - - graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); - graph.titlewidthsvg.style.visibility = 'hidden'; - graph.titlewidthsvg.style.height = '0px'; - graph.titlewidthsvg.style.width = '0px'; - div.appendChild(graph.titlewidthsvg); - - return svg; - }; - - /** - * Make a shape path. - */ - graph.mkpath = function() { - function Path() { - this.BasePath = graph.BasePath; - this.BasePath(); - - this.clone = function() { - return graph.mkpath().pos(this.xpos(), this.ypos()); - }; - - this.move = function(x, y) { - this.path += 'M' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.line = function(x, y) { - this.path += 'L' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.curve = function(x1, y1, x, y) { - this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.end = function() { - this.path += 'Z'; - return this; - }; - } - - return new Path(); - }; - - /** - * Return an element representing the title of a component. - */ - graph.comptitle = function(comp) { - var t = scdl.name(comp); - var title = document.createElementNS(graph.svgns, 'text'); - title.setAttribute('text-anchor', 'start'); - title.setAttribute('x', 5); - title.setAttribute('y', 15); - title.style.fontWeight = 'bold'; - title.appendChild(document.createTextNode(t)); - return title; - }; - - /** - * Return the width of the title of a component. - */ - graph.comptitlewidth = function(comp) { - var title = graph.comptitle(comp); - graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width; - graph.titlewidthsvg.removeChild(title); - return width; - }; - - /** - * Return an element representing the title of a reference. - */ - graph.reftitle = function(ref) { - var t = scdl.name(ref); - var title = document.createElementNS(graph.svgns, 'text'); - title.setAttribute('text-anchor', 'start'); - title.setAttribute('x', 5); - title.setAttribute('y', 15); - return title; - }; - - /** - * Return the width of the title of a reference. - */ - graph.reftitlewidth = function(ref) { - var title = graph.reftitle(ref); - graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width; - graph.titlewidthsvg.removeChild(title); - return width; - }; - - /** - * Return a shape representing a component. - */ - graph.compshape = function(comp, cassoc, pos) { - var title = graph.comptitle(comp); - - var d = graph.comppath(comp, cassoc).str(); - - var shape = document.createElementNS(graph.svgns, 'path'); - shape.setAttribute('d', d); - shape.setAttribute('fill', graph.color(comp)); - - var contour = document.createElementNS(graph.svgns, 'path'); - contour.setAttribute('d', d); - contour.setAttribute('fill', 'none'); - contour.setAttribute('stroke', graph.colors.gray); - contour.setAttribute('stroke-width', '4'); - contour.setAttribute('stroke-opacity', '0.20'); - contour.setAttribute('transform', 'translate(1,1)'); - - var g = document.createElementNS(graph.svgns, 'g'); - g.id = scdl.name(comp); - g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); - g.appendChild(shape); - g.appendChild(contour); - g.appendChild(title); - return g; - }; -} - -/** - * Return the services and references of a component. - */ -graph.tsvcs = function(comp) { - return memo(comp, 'tsvcs', function() { - var svcs = scdl.services(comp); - var l = filter(function(s) { return scdl.align(s) == 'top'; }, svcs); - if (isNil(l)) - return mklist(); - return mklist(car(l)); - }); -}; - -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); return a == null || a == 'left'; }, svcs); - if (isNil(l)) - return mklist(); - if (!isNil(graph.tsvcs(comp))) - return mklist(); - return mklist(car(l)); - }); -}; - -graph.brefs = function(comp) { - return memo(comp, 'brefs', function() { - return filter(function(r) { return scdl.align(r) == 'bottom'; }, scdl.references(comp)); - }); -}; - -graph.rrefs = function(comp) { - return memo(comp, 'rrefs', function() { - return filter(function(r) { var a = scdl.align(r); return a == null || a == 'right'; }, scdl.references(comp)); - }); -}; - -/** - * Return the color of a component. - */ -graph.color = function(comp) { - return memo(comp, 'color', function() { - var c = scdl.color(comp); - return c == null? graph.colors.blue : graph.colors[c]; - }); -}; - -/** - * Return the height of a reference on the right side of a component. - */ -graph.rrefheight = function(ref, cassoc) { - return memo(ref, 'height', function() { - var target = assoc(scdl.target(ref), cassoc); - if (isNil(target)) - return 60; - 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 max height of the references on the bottom side of a component. - */ -graph.brefsheight = function(refs, cassoc) { - if (isNil(refs)) - return 0; - return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc)); -}; - -/** - * Return the height of a component. - */ -graph.compheight = function(comp, cassoc) { - return memo(comp, 'height', function() { - var lsvcs = graph.lsvcs(comp); - var lsvcsh = Math.max(1, length(lsvcs)) * 60 + 20; - var rrefs = graph.rrefs(comp); - var rrefsh = graph.rrefsheight(rrefs, cassoc) + 20; - var height = Math.max(lsvcsh, rrefsh); - return height; - }); -}; - -/** - * Return the height of a component and the components wired to its bottom side. - */ -graph.compclosureheight = function(comp, cassoc) { - return memo(comp, 'closureheight', function() { - var brefs = graph.brefs(comp); - var height = graph.compheight(comp, cassoc) + graph.brefsheight(brefs, cassoc); - return height; - }); -}; - -/** - * Return the width of a reference on the bottom side of a component. - */ -graph.brefwidth = function(ref, cassoc) { - return memo(ref, 'width', function() { - var target = assoc(scdl.target(ref), cassoc); - if (isNil(target)) - return 60; - return graph.compclosurewidth(cadr(target), cassoc); - }); -}; - -/** - * Return the total width of the references on the bottom side of a component. - */ -graph.brefswidth = function(refs, cassoc) { - if (isNil(refs)) - return 0; - return graph.brefwidth(car(refs), cassoc) + graph.brefswidth(cdr(refs), 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.brefwidth(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 twidth = graph.comptitlewidth(comp) + 20; - var tsvcs = graph.tsvcs(comp); - var tsvcsw = Math.max(1, length(tsvcs)) * 60 + 20; - var brefs = graph.brefs(comp); - var brefsw = graph.brefswidth(brefs, cassoc) + 20; - var width = Math.max(twidth, Math.max(tsvcsw, brefsw)); - return width; - }); -}; - -/** - * Return the width of a component and all the components wired to its right side. - */ -graph.compclosurewidth = function(comp, cassoc) { - return memo(comp, 'closurewidth', function() { - var rrefs = graph.rrefs(comp); - var width = graph.compwidth(comp, cassoc) + graph.rrefswidth(rrefs, cassoc); - return width; - }); -}; - -/** - * Return a path representing a reference positioned to the right of a component. - */ -graph.rrefpath = function(ref, cassoc, path) { - var height = graph.rrefheight(ref, cassoc); - var ypos = path.ypos(); - return path.rline(0,10).rline(0,10).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rline(0,20).rcurve(0,5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,5).line(path.xpos(),ypos + height); -}; - -/** - * Return a path representing a reference positioned at the bottom of a component. - */ -graph.brefpath = function(ref, cassoc, path) { - var width = graph.brefwidth(ref, cassoc); - var xpos = path.xpos(); - return path.line(xpos - width + 60,path.ypos()).rline(-10,0).rline(-10,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rline(-20,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).line(xpos - width,path.ypos()); -}; - -/** - * Return a path representing a service positioned to the left of a component. - */ -graph.lsvcpath = function(svc, cassoc, path) { - var height = 60; - var ypos = path.ypos(); - return path.rline(0,-10).rline(0, -10).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rline(0,-20).rcurve(0,-5,5,0).rcurve(5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,-5).line(path.xpos(), ypos - height); -}; - -/** - * Return a path representing a service positioned at the top of a component. - */ -graph.tsvcpath = function(svc, cassoc, path) { - var width = 60; - var xpos = path.xpos(); - return path.rline(10,0).rline(10,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rline(20,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).line(xpos + width,path.ypos()); -}; - -/** -* Return a path representing a component. -*/ -graph.comppath = function(comp, cassoc) { - var height = graph.compheight(comp, cassoc); - var width = graph.compwidth(comp, cassoc); - - function renderpath(x, f, cassoc, path) { - if (isNil(x)) - return path; - return renderpath(cdr(x), f, cassoc, f(car(x), cassoc, path)); - } - - var tsvcs = graph.tsvcs(comp); - var path = graph.mkpath().move(10,0); - path = renderpath(tsvcs, graph.tsvcpath, cassoc, path); - - var rrefs = graph.rrefs(comp); - path = path.line(width - 10,path.ypos()).rcurve(10,0,0,10); - path = renderpath(rrefs, graph.rrefpath, cassoc, path); - - var brefs = reverse(graph.brefs(comp)); - var boffset = 10 + graph.brefswidth(brefs, cassoc); - path = path.line(path.xpos(),height - 10).rcurve(0,10,-10,0).line(boffset, path.ypos()); - path = renderpath(brefs, graph.brefpath, cassoc, path); - - var lsvcs = graph.lsvcs(comp); - var loffset = 10 + (length(lsvcs) * 60); - path = path.line(10,path.ypos()).rcurve(-10,0,0,-10).line(path.xpos(), loffset); - path = renderpath(lsvcs, graph.lsvcpath, cassoc, path); - - path = path.line(0,10).rcurve(0,-10,10,0); - return path.end(); -}; - -/** - * Render a composite. - */ -graph.composite = function(compos) { - var name = scdl.name(compos); - var comps = scdl.components(compos); - var cassoc = scdl.nameToElementAssoc(comps); - var proms = scdl.promotions(compos); - - function rendercomp(comp, cassoc, pos) { - function appendg(nodes, parent) { - if (isNil(nodes)) - return parent; - parent.appendChild(car(nodes)); - return appendg(cdr(nodes), parent); - } - - function renderrrefs(refs, cassoc, pos) { - function renderrref(ref, cassoc, pos) { - var target = assoc(scdl.target(ref), cassoc); - if (isNil(target)) - return mklist(); - return rendercomp(cadr(target), cassoc, pos); - } - - function rendermove(ref, cassoc, pos) { - return pos.clone().rmove(0, graph.rrefheight(ref, cassoc)); - } - - if (isNil(refs)) - return mklist(); - return append(renderrref(car(refs), cassoc, pos), renderrrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos))); - } - - function renderbrefs(refs, cassoc, pos) { - function renderbref(ref, cassoc, pos) { - var target = assoc(scdl.target(ref), cassoc); - if (isNil(target)) - return mklist(); - return rendercomp(cadr(target), cassoc, pos); - } - - function rendermove(ref, cassoc, pos) { - return pos.clone().rmove(graph.brefwidth(ref, cassoc), 0); - } - - if (isNil(refs)) - return mklist(); - return append(renderbref(car(refs), cassoc, pos), renderbrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos))); - } - - var gcomp = graph.compshape(comp, cassoc, pos); - - var rrefs = graph.rrefs(comp); - var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0); - appendg(renderrrefs(rrefs, cassoc, rpos), gcomp); - - var brefs = graph.brefs(comp); - var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc)); - appendg(renderbrefs(brefs, cassoc, bpos), gcomp); - - return mklist(gcomp); - } - - function renderproms(svcs, cassoc, pos) { - function renderprom(svc, cassoc, pos) { - var comp = assoc(scdl.promote(svc), cassoc); - if (isNil(comp)) - return mklist(); - return rendercomp(cadr(comp), cassoc, pos); - } - - function rendermove(svc, cassoc, pos) { - var comp = assoc(scdl.promote(svc), cassoc); - if (isNil(comp)) - return pos; - return pos.clone().rmove(0, graph.compclosureheight(cadr(comp), cassoc) + 20); - } - - if (isNil(svcs)) - return mklist(); - return append(renderprom(car(svcs), cassoc, pos), renderproms(cdr(svcs), cassoc, rendermove(car(svcs), cassoc, pos))); - } - - var rcomps = renderproms(proms, cassoc, graph.mkpath().rmove(20,20)); - return rcomps; -}; - diff --git a/sca-cpp/trunk/modules/edit/htdocs/edit/index.html b/sca-cpp/trunk/modules/edit/htdocs/edit/index.html deleted file mode 100644 index 34479a37a5..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/edit/index.html +++ /dev/null @@ -1,64 +0,0 @@ - - - -App Editor - - - - - - - - -

-
- - - - - - - diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html new file mode 100644 index 0000000000..618d638e7d --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js new file mode 100644 index 0000000000..88a2efd50b --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -0,0 +1,977 @@ +/* + * 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. + */ + +/** + * SVG and VML composite rendering functions. + */ + +var graph = new Object(); + +/** + * Basic colors + */ +graph.colors = new Object(); +graph.colors.black = '#000000'; +graph.colors.blue = '#0000ff'; +graph.colors.cyan = '#00ffff'; +graph.colors.gray = '#808080' +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'; + +/** + * Base path class. + */ +graph.BasePath = function() { + this.path = ''; + this.x = 0; + this.y = 0; + + this.pos = function(x, y) { + this.x = x; + this.y = y; + return this; + }; + + this.xpos = function() { + return this.x; + }; + + this.ypos = function() { + return this.y; + }; + + this.rmove = function(x, y) { + return this.move(this.x + x, this.y + y); + }; + + this.rline = function(x, y) { + return this.line(this.x + x, this.y + y); + }; + + this.rcurve = function(x1, y1, x, y) { + return this.curve(this.x + x1, this.y + y1, this.x + x1 + x, this.y + y1 + y); + }; + + this.str = function() { + return this.path; + }; +}; + +/** + * Rendering functions that work both with VML and SVG. + */ + +/** + * VML rendering. + */ +if (ui.isIE()) { + + graph.vmlns='urn:schemas-microsoft-com:vml'; + document.write(''); + + /** + * Make a graph. + */ + graph.mkgraph = function() { + var div = document.createElement('div'); + div.id = 'vmldiv'; + document.body.appendChild(div); + + var vmlg = document.createElement('v:group'); + vmlg.style.width = 5000; + vmlg.style.height = 5000; + vmlg.coordsize = '5000,5000'; + div.appendChild(vmlg); + + graph.dragging = null; + + function draggable(n) { + if (n == vmlg) + return null; + if (n.nodeName == 'group' && n.id != '') + return n; + return draggable(n.parentNode); + } + + function bringtotop(n) { + if (n == vmlg) + return null; + n.parentNode.appendChild(n); + return bringtotop(n.parentNode); + } + + vmlg.onmousedown = function() { + window.event.returnValue = false; + graph.dragging = draggable(window.event.srcElement); + if (graph.dragging == null) + return false; + bringtotop(graph.dragging); + graph.dragX = window.event.clientX; + graph.dragY = window.event.clientY; + vmlg.setCapture(); + return false; + }; + + vmlg.onmouseup = function() { + if (graph.dragging == null) + return false; + graph.dragging = null; + vmlg.releaseCapture(); + return false; + }; + + vmlg.onmousemove = function() { + if (graph.dragging == null) + return false; + var origX = graph.dragging.coordorigin.X; + var origY = graph.dragging.coordorigin.Y; + var newX = origX - (window.event.clientX - graph.dragX); + var newY = origY - (window.event.clientY - graph.dragY); + graph.dragX = window.event.clientX; + graph.dragY = window.event.clientY; + + if (graph.dragging.id.substring(0, 8) == 'palette:') { + // Clone an element dragged from the palette + var clone = graph.compshape(graph.dragging.comp, mklist(), graph.mkpath().move(ui.posn(graph.dragging.style.left), ui.posn(graph.dragging.style.top))); + graph.dragging.parentNode.appendChild(clone); + graph.dragging = clone; + } + graph.dragging.setAttribute('coordorigin', newX + ' ' + newY); + return false; + }; + + graph.comptitlewidthdiv = document.createElement('span'); + graph.comptitlewidthdiv.style.visibility = 'hidden' + graph.comptitlewidthdiv.style.fontWeight = 'bold' + div.appendChild(graph.comptitlewidthdiv); + + graph.reftitlewidthdiv = document.createElement('span'); + graph.reftitlewidthdiv.style.visibility = 'hidden' + div.appendChild(graph.reftitlewidthdiv); + + return vmlg; + }; + + /** + * Make a shape path. + */ + graph.mkpath = function() { + function Path() { + this.BasePath = graph.BasePath; + this.BasePath(); + + this.clone = function() { + return graph.mkpath().pos(this.xpos(), this.ypos()); + }; + + this.move = function(x, y) { + this.path += 'M ' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.line = function(x, y) { + this.path += 'L ' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.curve = function(x1, y1, x, y) { + this.path += 'QB ' + x1 + ',' + y1 + ',' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.end = function() { + this.path += 'X E'; + return this; + }; + } + + return new Path(); + }; + + /** + * Return an element representing a title. + */ + graph.mktitle = function(t, bold, pos) { + var title = document.createElement('v:textbox'); + title.style.left = pos.xpos(); + title.style.top = pos.ypos(); + title.style.position = 'absolute'; + if (bold) + title.style.fontWeight = 'bold'; + var tnode = document.createTextNode(t); + title.appendChild(tnode); + return title; + return title; + }; + + /** + * Return an element representing the title of a component. + */ + graph.comptitle = function(comp) { + var tsvcs = graph.tsvcs(comp); + var lsvcs = graph.lsvcs(comp); + var pos = graph.mkpath().move(isNil(lsvcs)? 5 : 25, isNil(tsvcs)? 5 : 25); + return graph.mktitle(graph.title(comp), true, pos); + }; + + /** + * Return the width of the title of a component. + */ + graph.comptitlewidth = function(comp) { + var t = graph.title(comp); + graph.comptitlewidthdiv.innerHTML = t; + var twidth = graph.comptitlewidthdiv.offsetWidth; + graph.comptitlewidthdiv.innerHTML = ''; + return twidth; + }; + + /** + * Return an element representing the title of a reference. + */ + graph.reftitle = function(ref) { + return graph.mktitle(graph.title(ref), false, graph.mkpath().move(25,25)); + }; + + /** + * Return the width of the title of a reference. + */ + graph.reftitlewidth = function(ref) { + var t = graph.title(ref); + graph.reftitlewidthdiv.innerHTML = t; + var twidth = graph.reftitlewidthdiv.offsetWidth; + graph.reftitlewidthdiv.innerHTML = ''; + return twidth; + }; + + /** + * Return a shape representing a component. + */ + graph.compshape = function(comp, cassoc, pos) { + var title = graph.comptitle(comp); + + var d = graph.comppath(comp, cassoc).str(); + + var shape = document.createElement('v:shape'); + shape.style.width = 5000; + shape.style.height = 5000; + shape.coordsize = '5000,5000'; + shape.path = d; + shape.fillcolor = graph.color(comp); + shape.stroked = 'false'; + + var contour = document.createElement('v:shape'); + contour.style.width = 5000; + contour.style.height = 5000; + contour.coordsize = '5000,5000'; + contour.setAttribute('path', d); + contour.filled = 'false'; + contour.strokecolor = graph.colors.gray; + contour.strokeweight = '2'; + contour.style.left = 1; + contour.style.top = 1; + var stroke = document.createElement('v:stroke'); + stroke.opacity = '20%'; + contour.appendChild(stroke); + + var g = document.createElement('v:group'); + g.id = scdl.name(comp); + g.style.width = 5000; + g.style.height = 5000; + g.coordsize = '5000,5000'; + g.style.left = pos.xpos(); + g.style.top = pos.ypos(); + g.appendChild(shape); + shape.appendChild(title); + g.appendChild(contour) + + // Store the component in the shape + g.comp = comp; + + return g; + }; + + /** + * Return a graphical group. + */ + graph.mkgroup = function(pos) { + var g = document.createElement('v:group'); + g.style.left = pos.xpos(); + g.style.top = pos.ypos(); + return g; + }; + + /** + * Return a shape representing a button. + */ + graph.mkbutton = function(t, pos) { + var title = graph.mktitle(t, true, pos); + var d = graph.buttonpath().str(); + + var shape = document.createElement('v:shape'); + shape.style.width = 5000; + shape.style.height = 5000; + shape.coordsize = '5000,5000'; + shape.path = d; + shape.fillcolor = graph.colors.blue; + shape.stroked = 'false'; + + var contour = document.createElement('v:shape'); + contour.style.width = 5000; + contour.style.height = 5000; + contour.coordsize = '5000,5000'; + contour.setAttribute('path', d); + contour.filled = 'false'; + contour.strokecolor = graph.colors.gray; + contour.strokeweight = '2'; + contour.style.left = 1; + contour.style.top = 1; + var stroke = document.createElement('v:stroke'); + stroke.opacity = '20%'; + contour.appendChild(stroke); + + var g = document.createElement('v:group'); + g.style.width = 5000; + g.style.height = 5000; + g.coordsize = '5000,5000'; + g.style.left = pos.xpos(); + g.style.top = pos.ypos(); + g.appendChild(shape); + shape.appendChild(title); + g.appendChild(contour) + return g; + }; + +} else { + + /** + * SVG rendering. + */ + graph.svgns='http://www.w3.org/2000/svg'; + + /** + * Make a graph. + */ + graph.mkgraph = function() { + var div = document.createElement('div'); + div.id = 'svgdiv'; + document.body.appendChild(div); + + var svg = document.createElementNS(graph.svgns, 'svg'); + svg.style.height = 5000; + svg.style.width = 5000; + div.appendChild(svg); + + graph.dragging = null; + + function draggable(n) { + if (n == svg) + return null; + if (n.nodeName == 'g' && n.id != '') + return n; + return draggable(n.parentNode); + } + + function bringtotop(n) { + if (n == svg) + return null; + n.parentNode.appendChild(n); + return bringtotop(n.parentNode); + } + + svg.onmousedown = function(e) { + if (e.preventDefault) + e.preventDefault(); + else + e.returnValue = false; + graph.dragging = draggable(e.target); + if (graph.dragging == null) + return false; + bringtotop(graph.dragging); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + graph.dragX = pos.clientX; + graph.dragY = pos.clientY; + return false; + }; + + svg.ontouchstart = svg.onmousedown; + + svg.onmouseup = function(e) { + if (graph.dragging == null) + return false; + graph.dragging = null; + return false; + }; + + svg.ontouchend = svg.onmouseup; + + svg.onmousemove = function(e) { + if (graph.dragging == null) + return false; + var pmatrix = graph.dragging.parentNode.getCTM(); + var matrix = graph.dragging.getCTM(); + var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e); + var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var newX = curX + (pos.clientX - graph.dragX); + var newY = curY + (pos.clientY - graph.dragY); + graph.dragX = pos.clientX; + graph.dragY = pos.clientY; + + if (graph.dragging.id.substring(0, 8) == 'palette:') { + // Clone an element dragged from the palette + var clone = graph.compshape(graph.dragging.comp, mklist(), graph.mkpath()); + graph.dragging.parentNode.appendChild(clone); + graph.dragging = clone; + } + graph.dragging.setAttribute('transform', 'translate(' + newX + ',' + newY + ')'); + return false; + }; + + svg.ontouchmove = svg.onmousemove; + + graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); + graph.titlewidthsvg.style.visibility = 'hidden'; + graph.titlewidthsvg.style.height = 0; + graph.titlewidthsvg.style.width = 0; + div.appendChild(graph.titlewidthsvg); + + return svg; + }; + + /** + * Make a shape path. + */ + graph.mkpath = function() { + function Path() { + this.BasePath = graph.BasePath; + this.BasePath(); + + this.clone = function() { + return graph.mkpath().pos(this.xpos(), this.ypos()); + }; + + this.move = function(x, y) { + this.path += 'M' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.line = function(x, y) { + this.path += 'L' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.curve = function(x1, y1, x, y) { + this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' '; + return this.pos(x, y); + }; + + this.end = function() { + this.path += 'Z'; + return this; + }; + } + + return new Path(); + }; + + /** + * Return an element representing a title. + */ + graph.mktitle = function(t, bold) { + var title = document.createElementNS(graph.svgns, 'text'); + title.setAttribute('text-anchor', 'start'); + title.setAttribute('x', 5); + title.setAttribute('y', 15); + if (bold) + title.style.fontWeight = 'bold'; + title.appendChild(document.createTextNode(t)); + return title; + }; + + /** + * Return an element representing the title of a component. + */ + graph.comptitle = function(comp) { + return graph.mktitle(graph.title(comp), true); + }; + + /** + * Return the width of the title of a component. + */ + graph.comptitlewidth = function(comp) { + var title = graph.comptitle(comp); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width; + graph.titlewidthsvg.removeChild(title); + return width; + }; + + /** + * Return an element representing the title of a reference. + */ + graph.reftitle = function(ref) { + return graph.mktitle(graph.title(ref), false); + }; + + /** + * Return the width of the title of a reference. + */ + graph.reftitlewidth = function(ref) { + var title = graph.reftitle(ref); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width; + graph.titlewidthsvg.removeChild(title); + return width; + }; + + /** + * Return a shape representing a component. + */ + graph.compshape = function(comp, cassoc, pos) { + var title = graph.comptitle(comp); + + var d = graph.comppath(comp, cassoc).str(); + + var shape = document.createElementNS(graph.svgns, 'path'); + shape.setAttribute('d', d); + shape.setAttribute('fill', graph.color(comp)); + + var contour = document.createElementNS(graph.svgns, 'path'); + contour.setAttribute('d', d); + contour.setAttribute('fill', 'none'); + contour.setAttribute('stroke', graph.colors.gray); + contour.setAttribute('stroke-width', '4'); + contour.setAttribute('stroke-opacity', '0.20'); + contour.setAttribute('transform', 'translate(1,1)'); + + var g = document.createElementNS(graph.svgns, 'g'); + g.id = scdl.name(comp); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + + // Store the component in the shape. + g.comp = comp; + + return g; + }; + + /** + * Return a graphical group. + */ + graph.mkgroup = function(pos) { + var g = document.createElementNS(graph.svgns, 'g'); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + return g; + }; + + /** + * Return a shape representing a button. + */ + graph.mkbutton = function(t, pos) { + var title = graph.mktitle(t, true); + var d = graph.buttonpath().str(); + + var shape = document.createElementNS(graph.svgns, 'path'); + shape.setAttribute('d', d); + shape.setAttribute('fill', graph.colors.blue); + + var contour = document.createElementNS(graph.svgns, 'path'); + contour.setAttribute('d', d); + contour.setAttribute('fill', 'none'); + contour.setAttribute('stroke', graph.colors.gray); + contour.setAttribute('stroke-width', '4'); + contour.setAttribute('stroke-opacity', '0.20'); + contour.setAttribute('transform', 'translate(1,1)'); + + var g = document.createElementNS(graph.svgns, 'g'); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + return g; + }; +} + +/** + * Return the title of a SCDL element. + */ +graph.title = function(e) { + var d = scdl.documentation(e); + return d != null? d : scdl.name(e); +}; + +/** + * Return the services and references of a component. + */ +graph.tsvcs = function(comp) { + return memo(comp, 'tsvcs', function() { + var svcs = scdl.services(comp); + var l = filter(function(s) { return scdl.align(s) == 'top'; }, svcs); + if (isNil(l)) + return mklist(); + return mklist(car(l)); + }); +}; + +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); return a == null || a == 'left'; }, svcs); + if (isNil(l)) + return mklist(); + if (!isNil(graph.tsvcs(comp))) + return mklist(); + return mklist(car(l)); + }); +}; + +graph.brefs = function(comp) { + return memo(comp, 'brefs', function() { + return filter(function(r) { return scdl.align(r) == 'bottom'; }, scdl.references(comp)); + }); +}; + +graph.rrefs = function(comp) { + return memo(comp, 'rrefs', function() { + return filter(function(r) { var a = scdl.align(r); return a == null || a == 'right'; }, scdl.references(comp)); + }); +}; + +/** + * Return the color of a component. + */ +graph.color = function(comp) { + return memo(comp, 'color', function() { + var c = scdl.color(comp); + return c == null? graph.colors.blue : graph.colors[c]; + }); +}; + +/** + * Return the height of a reference on the right side of a component. + */ +graph.rrefheight = function(ref, cassoc) { + return memo(ref, 'height', function() { + var target = assoc(scdl.target(ref), cassoc); + if (isNil(target)) + return 60; + 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 max height of the references on the bottom side of a component. + */ +graph.brefsheight = function(refs, cassoc) { + if (isNil(refs)) + return 0; + return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc)); +}; + +/** + * Return the height of a component. + */ +graph.compheight = function(comp, cassoc) { + return memo(comp, 'height', function() { + var lsvcs = graph.lsvcs(comp); + var lsvcsh = Math.max(1, length(lsvcs)) * 60 + 20; + var rrefs = graph.rrefs(comp); + var rrefsh = graph.rrefsheight(rrefs, cassoc) + 20; + var height = Math.max(lsvcsh, rrefsh); + return height; + }); +}; + +/** + * Return the height of a component and the components wired to its bottom side. + */ +graph.compclosureheight = function(comp, cassoc) { + return memo(comp, 'closureheight', function() { + var brefs = graph.brefs(comp); + var height = graph.compheight(comp, cassoc) + graph.brefsheight(brefs, cassoc); + return height; + }); +}; + +/** + * Return the width of a reference on the bottom side of a component. + */ +graph.brefwidth = function(ref, cassoc) { + return memo(ref, 'width', function() { + var target = assoc(scdl.target(ref), cassoc); + if (isNil(target)) + return 60; + return graph.compclosurewidth(cadr(target), cassoc); + }); +}; + +/** + * Return the total width of the references on the bottom side of a component. + */ +graph.brefswidth = function(refs, cassoc) { + if (isNil(refs)) + return 0; + return graph.brefwidth(car(refs), cassoc) + graph.brefswidth(cdr(refs), 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.brefwidth(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 twidth = graph.comptitlewidth(comp) + 20; + var tsvcs = graph.tsvcs(comp); + var tsvcsw = Math.max(1, length(tsvcs)) * 60 + 20; + var brefs = graph.brefs(comp); + var brefsw = graph.brefswidth(brefs, cassoc) + 20; + var width = Math.max(twidth, Math.max(tsvcsw, brefsw)); + return width; + }); +}; + +/** + * Return the width of a component and all the components wired to its right side. + */ +graph.compclosurewidth = function(comp, cassoc) { + return memo(comp, 'closurewidth', function() { + var rrefs = graph.rrefs(comp); + var width = graph.compwidth(comp, cassoc) + graph.rrefswidth(rrefs, cassoc); + return width; + }); +}; + +/** + * Return a path representing a reference positioned to the right of a component. + */ +graph.rrefpath = function(ref, cassoc, path) { + var height = graph.rrefheight(ref, cassoc); + var ypos = path.ypos(); + return path.rline(0,10).rline(0,10).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rline(0,20).rcurve(0,5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,5).line(path.xpos(),ypos + height); +}; + +/** + * Return a path representing a reference positioned at the bottom of a component. + */ +graph.brefpath = function(ref, cassoc, path) { + var width = graph.brefwidth(ref, cassoc); + var xpos = path.xpos(); + return path.line(xpos - width + 60,path.ypos()).rline(-10,0).rline(-10,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rline(-20,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).line(xpos - width,path.ypos()); +}; + +/** + * Return a path representing a service positioned to the left of a component. + */ +graph.lsvcpath = function(svc, cassoc, path) { + var height = 60; + var ypos = path.ypos(); + return path.rline(0,-10).rline(0, -10).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rline(0,-20).rcurve(0,-5,5,0).rcurve(5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,-5).line(path.xpos(), ypos - height); +}; + +/** + * Return a path representing a service positioned at the top of a component. + */ +graph.tsvcpath = function(svc, cassoc, path) { + var width = 60; + var xpos = path.xpos(); + return path.rline(10,0).rline(10,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rline(20,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).line(xpos + width,path.ypos()); +}; + +/** + * Return a path representing a component. + */ +graph.comppath = function(comp, cassoc) { + var height = graph.compheight(comp, cassoc); + var width = graph.compwidth(comp, cassoc); + + function renderpath(x, f, cassoc, path) { + if (isNil(x)) + return path; + return renderpath(cdr(x), f, cassoc, f(car(x), cassoc, path)); + } + + var tsvcs = graph.tsvcs(comp); + var path = graph.mkpath().move(10,0); + path = renderpath(tsvcs, graph.tsvcpath, cassoc, path); + + var rrefs = graph.rrefs(comp); + path = path.line(width - 10,path.ypos()).rcurve(10,0,0,10); + path = renderpath(rrefs, graph.rrefpath, cassoc, path); + + var brefs = reverse(graph.brefs(comp)); + var boffset = 10 + graph.brefswidth(brefs, cassoc); + path = path.line(path.xpos(),height - 10).rcurve(0,10,-10,0).line(boffset, path.ypos()); + path = renderpath(brefs, graph.brefpath, cassoc, path); + + var lsvcs = graph.lsvcs(comp); + var loffset = 10 + (length(lsvcs) * 60); + path = path.line(10,path.ypos()).rcurve(-10,0,0,-10).line(path.xpos(), loffset); + path = renderpath(lsvcs, graph.lsvcpath, cassoc, path); + + path = path.line(0,10).rcurve(0,-10,10,0); + return path.end(); +}; + +/** + * Return a path representing a button. + */ +graph.buttonpath = function(t) { + var height = 60; + var width = 120; + var path = graph.mkpath().move(10,0); + path = path.line(width - 10,path.ypos()).rcurve(10,0,0,10); + path = path.line(path.xpos(),height - 10).rcurve(0,10,-10,0).line(10, path.ypos()); + path = path.line(10,path.ypos()).rcurve(-10,0,0,-10).line(path.xpos(), 10); + path = path.line(0,10).rcurve(0,-10,10,0); + return path.end(); +}; + +/** + * Append a list of graphical elements to a parent. + */ +graph.append = function(nodes, p) { + if (isNil(nodes)) + return p; + p.appendChild(car(nodes)); + return graph.append(cdr(nodes), p); +}; + +/** + * Render a composite. + */ +graph.composite = function(compos, pos) { + var name = scdl.name(scdl.composite(compos)); + var comps = scdl.components(compos); + var cassoc = scdl.nameToElementAssoc(comps); + var proms = scdl.promotions(compos); + + function rendercomp(comp, cassoc, pos) { + function renderrrefs(refs, cassoc, pos) { + function renderrref(ref, cassoc, pos) { + var target = assoc(scdl.target(ref), cassoc); + if (isNil(target)) + return mklist(); + return rendercomp(cadr(target), cassoc, pos); + } + + function rendermove(ref, cassoc, pos) { + return pos.clone().rmove(0, graph.rrefheight(ref, cassoc)); + } + + if (isNil(refs)) + return mklist(); + return append(renderrref(car(refs), cassoc, pos), renderrrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos))); + } + + function renderbrefs(refs, cassoc, pos) { + function renderbref(ref, cassoc, pos) { + var target = assoc(scdl.target(ref), cassoc); + if (isNil(target)) + return mklist(); + return rendercomp(cadr(target), cassoc, pos); + } + + function rendermove(ref, cassoc, pos) { + return pos.clone().rmove(graph.brefwidth(ref, cassoc), 0); + } + + if (isNil(refs)) + return mklist(); + return append(renderbref(car(refs), cassoc, pos), renderbrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos))); + } + + var gcomp = graph.compshape(comp, cassoc, pos); + + var rrefs = graph.rrefs(comp); + var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0); + graph.append(renderrrefs(rrefs, cassoc, rpos), gcomp); + + var brefs = graph.brefs(comp); + var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc)); + graph.append(renderbrefs(brefs, cassoc, bpos), gcomp); + + return mklist(gcomp); + } + + function renderproms(svcs, cassoc, pos) { + function promcomp(svc, cassoc) { + var c = assoc(scdl.promote(svc), cassoc); + if (isNil(c)) + return mklist(); + return cadr(c); + } + + function comppos(comp, pos) { + var x = scdl.x(comp); + var y = scdl.y(comp); + return graph.mkpath().move(x != null? x : pos.xpos(), y != null? y : pos.ypos()); + } + + function rendermove(comp, cassoc, pos) { + return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 20); + } + + if (isNil(svcs)) + return mklist(); + + var comp = promcomp(car(svcs), cassoc); + if (isNil(comp)) + return renderproms(cdr(svcs), cassoc, rendermove(car(svcs), cassoc, pos)); + + var cpos = comppos(comp, pos); + return append(rendercomp(comp, cassoc, cpos), renderproms(cdr(svcs), cassoc, rendermove(comp, cassoc, cpos))); + } + + var rproms = renderproms(proms, cassoc, pos.clone().rmove(20,20)); + + if (name == 'palette') + return map(function(r) { + r.id = 'palette:' + r.id; + return r; + }, rproms); + return rproms; +}; + diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html new file mode 100644 index 0000000000..105e240389 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html @@ -0,0 +1,63 @@ + + + +App Editor + + + + + + + + +

+ +
+ + + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html index 52ed6259c7..d9791a8b78 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/index.html @@ -34,12 +34,13 @@

Try the App Dashboard to manage your collection of apps.

App Editor

-

Try the App Editor to edit an app.

+

Try the App Editor to edit an app.

- +

Page Editor

+

Try the Page Editor to edit an app page.

diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html index a4addf1f96..7bf2ef931e 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/menu.html +++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html @@ -29,7 +29,7 @@ ui.installwidget(); var mdiv = $('menu'); -mdiv.innerHTML = ui.menubar(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash'), ui.menu('Editor', '/edit?app=store')), mklist(ui.menu('Sign out', '/logout'))); +mdiv.innerHTML = ui.menubar(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')), mklist(ui.menu('Sign out', '/logout'))); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html new file mode 100644 index 0000000000..e34aca0bea --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -0,0 +1,41 @@ + + + +App Page Editor + + + + + + + + +

Editing: HTML Page

+
+ + + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html new file mode 100644 index 0000000000..75405ce163 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + +
+ + + +sample text + +
+ + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js new file mode 100644 index 0000000000..e4554195c1 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -0,0 +1,204 @@ +/* + * 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. + */ + +/** + * Page editing functions. + */ +var page = new Object(); + +if (ui.isIE()) { + + /** + * Init a page. + */ + page.initpage = function(elem) { + page.dragging = null; + + function draggable(n) { + if (n == elem) + return null; + if (n.id != '') + return n; + return draggable(n.parentNode); + } + + function bringtotop(n) { + if (n == elem) + return null; + n.parentNode.appendChild(n); + return bringtotop(n.parentNode); + } + + elem.onmousedown = function() { + window.event.returnValue = false; + page.dragging = draggable(window.event.srcElement); + if (page.dragging == null) + return false; + bringtotop(page.dragging); + page.dragX = window.event.clientX; + page.dragY = window.event.clientY; + elem.setCapture(); + return false; + }; + + elem.onmouseup = function() { + if (page.dragging == null) + return false; + page.dragging = null; + elem.releaseCapture(); + return false; + }; + + elem.onmousemove = function() { + if (page.dragging == null) + return false; + var origX = page.dragging.coordorigin.X; + var origY = page.dragging.coordorigin.Y; + var newX = origX - (window.event.clientX - page.dragX); + var newY = origY - (window.event.clientY - page.dragY); + page.dragX = window.event.clientX; + page.dragY = window.event.clientY; + + if (page.dragging.id.substring(0, 8) == 'palette:') { + // Clone the dragged element + page.dragging = page.clone(page.dragging); + } + page.dragging.style.left = newX; + page.dragging.style.top = newY; + return false; + }; + + return elem; + }; + +} else { + + /** + * Init a page. + */ + page.initpage = function(elem) { + page.dragging = null; + + function draggable(n) { + if (n == elem) + return null; + if (n.id != '') + return n; + return draggable(n.parentNode); + } + + function bringtotop(n) { + if (n == elem) + return null; + n.parentNode.appendChild(n); + return bringtotop(n.parentNode); + } + + elem.onmousedown = function(e) { + if (e.preventDefault) + e.preventDefault(); + else + e.returnValue = false; + page.dragging = draggable(e.target); + if (page.dragging == null) + return false; + bringtotop(page.dragging); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + page.dragX = pos.clientX; + page.dragY = pos.clientY; + return false; + }; + + elem.ontouchstart = elem.onmousedown; + + elem.onmouseup = function(e) { + if (page.dragging == null) + return false; + page.dragging = null; + return false; + }; + + elem.ontouchend = elem.onmouseup; + + elem.onmousemove = function(e) { + if (page.dragging == null) + return false; + var curX = ui.posn(page.dragging.style.left); + var curY = ui.posn(page.dragging.style.top); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var newX = curX + (pos.clientX - page.dragX); + var newY = curY + (pos.clientY - page.dragY); + page.dragX = pos.clientX; + page.dragY = pos.clientY; + + if (page.dragging.id.substring(0, 8) == 'palette:') { + // Clone the dragged element + page.dragging = page.clone(page.dragging); + } + page.dragging.style.left = newX; + page.dragging.style.top = newY; + return false; + }; + + elem.ontouchmove = elem.onmousemove; + + return elem; + }; +} + +/** + * Clone an HTML element. + */ +page.elemcount = 0; + +page.clone = function(e) { + function mkclone(e) { + if (e.nodeName == 'INPUT' && e.type == 'button') { + var ne = document.createElement('input'); + ne.type = 'button'; + ne.id = 'button' + (++page.elemcount); + ne.value = ne.id; + return ne; + } + if (e.nodeName == 'INPUT' && e.type == 'text') { + var ne = document.createElement('input'); + ne.type = 'text'; + ne.id = 'entry' + (++page.elemcount); + ne.value = ne.id; + return ne; + } + if (e.nodeName == 'SPAN') { + var ne = document.createElement('span'); + ne.id = 'text' + (++page.elemcount); + ne.innerHTML = ne.id; + return ne; + } + } + + function posclone(ne, e) { + ne.style.position = 'absolute'; + ne.style.left = ui.posn(e.style.left); + ne.style.top = ui.posn(e.style.top); + e.parentNode.appendChild(ne); + return ne; + } + + return posclone(mkclone(e), e); +}; + diff --git a/sca-cpp/trunk/modules/edit/palettes.py b/sca-cpp/trunk/modules/edit/palettes.py new file mode 100644 index 0000000000..9d07973cef --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes.py @@ -0,0 +1,32 @@ +# 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. + +# Palettes collection implementation +import uuid +import sys +from util import * + +# Convert an id to a palette id +def paletteid(id): + return ("'" + car(id), "'palette.composite") + +# Get a palette from the palettes db +def get(id, cache): + if isNil(id): + return ("Palettes", "palettes") + return (car(id), car(id), cache.get(paletteid(id))) + diff --git a/sca-cpp/trunk/modules/edit/palettes/control/palette.composite b/sca-cpp/trunk/modules/edit/palettes/control/palette.composite new file mode 100644 index 0000000000..21aa631217 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes/control/palette.composite @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + if else + + + + + + + + + for each + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/palettes/operators/palette.composite b/sca-cpp/trunk/modules/edit/palettes/operators/palette.composite new file mode 100644 index 0000000000..35f8dfdf9c --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes/operators/palette.composite @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + = + + + = + + + + + + + gt + + + gt + + + + + + + lt + + + lt + + + + + + + * + + + * + + + + + + + / + + + / + + + + + + + + + + + + + + + + + + + - + + + - + + + + + + diff --git a/sca-cpp/trunk/modules/edit/palettes/sensors/palette.composite b/sca-cpp/trunk/modules/edit/palettes/sensors/palette.composite new file mode 100644 index 0000000000..20ef8225ce --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes/sensors/palette.composite @@ -0,0 +1,32 @@ + + + + + + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/palettes/social/palette.composite b/sca-cpp/trunk/modules/edit/palettes/social/palette.composite new file mode 100644 index 0000000000..264e2ed137 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes/social/palette.composite @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sca-cpp/trunk/modules/edit/palettes/variables/palette.composite b/sca-cpp/trunk/modules/edit/palettes/variables/palette.composite new file mode 100644 index 0000000000..42fc43525b --- /dev/null +++ b/sca-cpp/trunk/modules/edit/palettes/variables/palette.composite @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + set variable + + + + + + + + make a list + + + + + + + + first of a list + + + + + + + rest of a list + + + + + + diff --git a/sca-cpp/trunk/modules/edit/workspaces/joe@localhost b/sca-cpp/trunk/modules/edit/workspaces/joe@localhost deleted file mode 100644 index b9419e75d0..0000000000 --- a/sca-cpp/trunk/modules/edit/workspaces/joe@localhost +++ /dev/null @@ -1 +0,0 @@ -(("Sample Online Store App" "store" ()) ("Layout Variation of the Online Store App" "store2" ()) ("Another Variation of the Online Store App" "store3" ()) ("Sample HTTP Relay App" "relay" ()) ("Travel Tutorial App" "travel" ())) diff --git a/sca-cpp/trunk/modules/js/htdocs/scdl.js b/sca-cpp/trunk/modules/js/htdocs/scdl.js index d0b229cae6..561a3e446b 100644 --- a/sca-cpp/trunk/modules/js/htdocs/scdl.js +++ b/sca-cpp/trunk/modules/js/htdocs/scdl.js @@ -22,6 +22,16 @@ */ var scdl = new Object(); +/** + * Returns a composite element. + */ +scdl.composite = function(l) { + var cs = namedElementChildren("'composite", l); + if (isNil(cs)) + return cs; + return car(cs); +}; + /** * Returns a list of components in a composite. */ @@ -59,6 +69,23 @@ scdl.name = function(l) { return namedAttributeValue("'name", l); }; +/** + * Returns the description of a component, componentType, service or reference. + */ +scdl.documentation = function(l) { + var d = namedElementChildren("'documentation", l); + if (isNil(d)) + return null; + if (!elementHasValue(car(d))) + return null; + var v = elementValue(car(d)); + if (v == 'gt') + return '>' + if (v == 'lt') + return '<'; + return v; +}; + /** * Returns the color of a component or componentType. */ diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css index d1413018a0..014cc5110d 100644 --- a/sca-cpp/trunk/modules/js/htdocs/ui.css +++ b/sca-cpp/trunk/modules/js/htdocs/ui.css @@ -35,10 +35,14 @@ border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; } td { -padding-left: 2px; padding-top: 2px; padding-right: 8px; vertical-align: text-top; +padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; } -iframe { +.tdw { +padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top; +} + +.widgetframe { visibility: hidden; width: 0px; height: 0px; } @@ -55,10 +59,6 @@ a:visited { color: blue; } -.tdw { -padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top; -} - .hd1 { font-size: 150%; font-weight: bold; } diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js index d8266c7af6..60ca01568e 100644 --- a/sca-cpp/trunk/modules/js/htdocs/ui.js +++ b/sca-cpp/trunk/modules/js/htdocs/ui.js @@ -23,6 +23,16 @@ var ui = new Object(); +/** + * Return true if the current browser is Internet Explorer. + */ +ui.isIE = function() { + if (typeof ui.isIE.detected != 'undefined') + return ui.isIE.detected; + ui.isIE.detected = navigator.appName == 'Microsoft Internet Explorer'; + return ui.isIE.detected; +}; + /** * Build a menu bar. */ @@ -222,7 +232,12 @@ ui.queryParams = function() { */ ui.widgets = new Array(); -ui.bindwidget = function(f, el) { +ui.loadwidget = function(el, doc) { + var f = el + 'Frame'; + var div = document.createElement('div'); + div.id = f + 'Div'; + div.innerHTML = ''; + document.body.appendChild(div); window.ui.widgets[f] = el; return f; }; @@ -245,3 +260,12 @@ ui.installwidget = function() { return true; }; +/** + * Convert a CSS position to a numeric position. + */ +ui.posn = function(p) { + if (p == '') + return 0; + return Number(p.substr(0, p.length - 2)); +}; + -- cgit v1.2.3