diff options
Diffstat (limited to 'sca-cpp/trunk/modules/js/htdocs/graph.js')
| -rw-r--r-- | sca-cpp/trunk/modules/js/htdocs/graph.js | 489 |
1 files changed, 489 insertions, 0 deletions
diff --git a/sca-cpp/trunk/modules/js/htdocs/graph.js b/sca-cpp/trunk/modules/js/htdocs/graph.js new file mode 100644 index 0000000000..07afa37a65 --- /dev/null +++ b/sca-cpp/trunk/modules/js/htdocs/graph.js @@ -0,0 +1,489 @@ +/* + * 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. + */ + +/** + * Detect browser VML support. + */ +function supportsVML() { + if (typeof supportsVML.supported != 'undefined') + return supportsVML.supported; + supportsVML.supported = navigator.appName == 'Microsoft Internet Explorer'; + return supportsVML.supported; +} + +/** + * Detect browser SVG support. + */ +function supportsSVG() { + if (typeof supportsSVG.supported != 'undefined') + return supportsSVG.supported; + supportsSVG.supported = navigator.appName != 'Microsoft Internet Explorer'; + return supportsSVG.supported; +} + +/** + * Basic colors + */ +var red = 'red'; +var green = 'green'; +var blue = 'blue'; +var yellow = 'yellow'; +var orange = '#ffa500'; +var gray = 'gray' + +/** + * Base path class. + */ +function BasePath() { + 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. + */ +var mkgraph; +var mkcompshape; +var graph; + +/** + * VML rendering. + */ +if (supportsVML()) { + + var vmlns='urn:schemas-microsoft-com:vml'; + + /** + * Make a shape path. + */ + var mkpath = function() { + function Path() { + this.BasePath = BasePath; + this.BasePath(); + + 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(); + } + + /** + * Make a title element. + */ + var mktitle = function(t) { + var title = document.createElement('v:textbox'); + title.style.left = '40'; + title.style.top = '30'; + title.style.position = 'absolute'; + var tnode = document.createTextNode(t); + title.appendChild(tnode); + return title; + } + + /** + * Return the width of a title. + */ + var textWidthDiv; + + var titlewidth = function(t) { + textWidthDiv.innerHTML = t; + var twidth = textWidthDiv.offsetWidth + 10; + textWidthDiv.innerHTML = ''; + return twidth; + } + + /** + * Make a component shape. + */ + mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) { + var title = mktitle(name); + var twidth = titlewidth(name); + + var d = mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str(); + + var shape = document.createElement('v:shape'); + shape.style.width = 500; + shape.style.height = 500; + shape.coordsize = '500,500'; + shape.path = d; + shape.fillcolor = color; + shape.stroked = 'false'; + + var contour = document.createElement('v:shape'); + contour.style.width = 500; + contour.style.height = 500; + contour.coordsize = '500,500'; + contour.setAttribute('path', d); + contour.filled = 'false'; + contour.strokecolor = gray; + contour.strokeweight = '3'; + contour.style.top = 1; + contour.style.left = 1; + var stroke = document.createElement('v:stroke'); + stroke.opacity = '20%'; + contour.appendChild(stroke); + + var g = document.createElement('v:group'); + g.style.width = 500; + g.style.height = 500; + g.coordsize = '500,500'; + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + return g; + } + + /** + * Drag and drop support. + */ + var dragX; + var dragY; + var dragging = null; + + /** + * Make a graph. + */ + mkgraph = function() { + var div = document.createElement('div'); + div.id = 'vmldiv'; + document.body.appendChild(div); + + textWidthDiv = document.createElement('span'); + textWidthDiv.style.visibility = 'hidden' + div.appendChild(textWidthDiv); + + var vmlg = document.createElement('v:group'); + vmlg.style.width = 500; + vmlg.style.height = 500; + vmlg.coordsize = '500,500'; + div.appendChild(vmlg); + + 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; + dragging = draggable(window.event.srcElement); + if (dragging == null) + return false; + dragging.parentNode.appendChild(dragging); + dragX = window.event.clientX; + dragY = window.event.clientY; + vmlg.setCapture(); + return false; + }; + + vmlg.onmouseup = function() { + if (dragging == null) + return false; + dragging = null; + vmlg.releaseCapture(); + return false; + }; + + vmlg.onmousemove = function() { + if (dragging == null) + return false; + var origX = dragging.coordorigin.X; + var origY = dragging.coordorigin.Y; + var newX = origX - (window.event.clientX - dragX); + var newY = origY - (window.event.clientY - dragY); + dragX = window.event.clientX; + dragY = window.event.clientY; + dragging.setAttribute('coordorigin', newX + ' ' + newY); + return false; + }; + + graph = vmlg; + return vmlg; + } + + document.write('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />'); +} + +/** + * SVG rendering. + */ +if (supportsSVG()) { + + var svgns='http://www.w3.org/2000/svg'; + + /** + * Make a shape path. + */ + var mkpath = function() { + function Path() { + this.BasePath = BasePath; + this.BasePath(); + + 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(); + } + + /** + * Make a title element. + */ + var mktitle = function(t) { + var title = document.createElementNS(svgns, 'text'); + title.setAttribute('text-anchor', 'start'); + title.setAttribute('x', 40); + title.setAttribute('y', 50); + title.appendChild(document.createTextNode(t)); + graph.appendChild(title); + return title; + } + + /** + * Make a component shape. + */ + mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) { + var title = mktitle(name); + var twidth = title.getBBox().width; + + var d = mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str(); + + var shape = document.createElementNS(svgns, 'path'); + shape.setAttribute('d', d); + shape.setAttribute('fill', color); + + var contour = document.createElementNS(svgns, 'path'); + contour.setAttribute('d', d); + contour.setAttribute('fill', 'none'); + contour.setAttribute('stroke', gray); + contour.setAttribute('stroke-width', '4'); + contour.setAttribute('stroke-opacity', '0.20'); + contour.setAttribute('transform', 'translate(1,1)'); + + var g = document.createElementNS(svgns, 'g'); + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + return g; + } + + /** + * Drag and drop support. + */ + var dragX; + var dragY; + var dragging = null; + + /** + * Make a graph. + */ + mkgraph = function() { + var div = document.createElement('div'); + div.id = 'svgdiv'; + document.body.appendChild(div); + + var svg = document.createElementNS(svgns, 'svg'); + svg.style.height = '100%'; + svg.style.width = '100%'; + div.appendChild(svg); + + 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; + dragging = draggable(e.target); + if (dragging == null) + return false; + dragging.parentNode.appendChild(dragging); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + dragX = pos.clientX; + dragY = pos.clientY; + return false; + }; + + svg.ontouchstart = svg.onmousedown; + + svg.onmouseup = function(e) { + if (dragging == null) + return false; + dragging = null; + return false; + }; + + svg.ontouchend = svg.onmouseup; + + svg.onmousemove = function(e) { + if (dragging == null) + return false; + var matrix = dragging.getCTM(); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var newX = Number(matrix.e) + (pos.clientX - dragX); + var newY = Number(matrix.f) + (pos.clientY - dragY); + dragX = pos.clientX; + dragY = pos.clientY; + dragging.setAttribute('transform', 'translate(' + newX + ',' + newY + ')'); + return false; + }; + + svg.ontouchmove = svg.onmousemove; + + graph = svg; + return svg; + } +} + +/** + * Make a reference shape path, positioned to the right of a component shape. + */ +function mkrrefpath(path) { + return path.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).rline(0,10); +} + +/** + * Make a reference shape path, positioned at the bottom of a component shape. + */ +function mkbrefpath(path) { + return path.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).rline(-10,0); +} + +/** + * Make a service shape path, positioned to the left of a component shape. + */ +function mklsvcpath(path) { + return path.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).rline(0,-10); +} + +/** + * Make a service shape path, positioned at the top of a component shape. + */ +function mktsvcpath(path) { + return path.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).rline(10,0); +} + + +/** +* Make a component shape path. +*/ +function mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs) { + var height = Math.max(lsvcs, rrefs) * 40 + 60; + var width = Math.max(Math.max(tsvcs, brefs) * 40 + 60, twidth + 20); + + var path = mkpath().rmove(40,30).rline(20,0); + for (var s = 0; s < tsvcs; s++) + path = mktsvcpath(path); + + path = path.line(20 + width,path.ypos()).rcurve(10,0,0,10).rline(0,20); + for (var r = 0; r < rrefs; r++) + path = mkrrefpath(path); + + var boffset = 10 + 30 + (brefs * 40); + path = path.line(path.xpos(),20 + height).rcurve(0,10,-10,0).line(20 + boffset,path.ypos()); + for (var r = 0; r < brefs; r++) + path = mkbrefpath(path); + + var loffset = 10 + 30 + (lsvcs * 40); + path = path.line(40,path.ypos()).rcurve(-10,0,0,-10).line(path.xpos(), 20 + loffset); + for (var s = 0; s < lsvcs; s++) + path = mklsvcpath(path); + + path = path.line(30,40).rcurve(0,-10,10,0); + return path.end(); +} + |