diff options
Diffstat (limited to 'sourcecodes/js-graph-it.js')
| -rw-r--r-- | sourcecodes/js-graph-it.js | 1802 |
1 files changed, 1802 insertions, 0 deletions
diff --git a/sourcecodes/js-graph-it.js b/sourcecodes/js-graph-it.js new file mode 100644 index 00000000..8d9387b4 --- /dev/null +++ b/sourcecodes/js-graph-it.js @@ -0,0 +1,1802 @@ +/********************* + * browser detection * + *********************/ + +var ie=document.all; +var nn6=document.getElementById&&!document.all; + +/**************************************************** + * This class is a scanner for the visitor pattern. * + ****************************************************/ + +/** + * Constructor, parameters are: + * visitor: the visitor implementation, it must be a class with a visit(element) method. + * scanElementsOnly: a flag telling whether to scan html elements only or all html nodes. + */ +function DocumentScanner(visitor, scanElementsOnly) +{ + this.visitor = visitor; + this.scanElementsOnly = scanElementsOnly; + + /** + * Scans the element + */ + this.scan = function(element) + { + var i; + if(this.visitor.visit(element)) + { + // visit child elements + var children = element.childNodes; + for(i = 0; i < children.length; i++) + { + if(!this.scanElementsOnly || children[i].nodeType == 1) + { + this.scan(children[i]); + } + } + } + } +} + +/***************** + * drag and drop * + *****************/ + +var isdrag=false; // this flag indicates that the mouse movement is actually a drag. +var mouseStartX, mouseStartY; // mouse position when drag starts +var elementStartX, elementStartY; // element position when drag starts + +/** + * the html element being dragged. + */ +var elementToMove; + +/** + * an array containing the blocks being dragged. This is used to notify them of move. + */ +var blocksToMove; + +/** + * this variable stores the orginal z-index of the object being dragged in order + * to restore it upon drop. + */ +var originalZIndex; + +/** + * an array containing bounds to be respected while dragging elements, + * these bounds are left, top, left + width, top + height of the parent element. + */ +var bounds = new Array(4); + +/** + * this visitor is used to find blocks nested in the element being moved. + */ +function BlocksToMoveVisitor() +{ + this.visit = function(element) + { + if(isBlock(element)) + { + blocksToMove.push(findBlock(element.id)); + return false; + } + else + return true; + } +} + +var blocksToMoveScanner = new DocumentScanner(new BlocksToMoveVisitor(), true); + +function movemouse(e) +{ + if (isdrag) + { + var currentMouseX = nn6 ? e.clientX : event.clientX; + var currentMouseY = nn6 ? e.clientY : event.clientY; + var newElementX = elementStartX + currentMouseX - mouseStartX; + var newElementY = elementStartY + currentMouseY - mouseStartY; + + // check bounds + // note: the "-1" and "+1" is to avoid borders overlap + if(newElementX < bounds[0]) + newElementX = bounds[0] + 1; + if(newElementX + elementToMove.offsetWidth > bounds[2]) + newElementX = bounds[2] - elementToMove.offsetWidth - 1; + if(newElementY < bounds[1]) + newElementY = bounds[1] + 1; + if(newElementY + elementToMove.offsetHeight > bounds[3]) + newElementY = bounds[3] - elementToMove.offsetHeight - 1; + + // move element + elementToMove.style.left = newElementX + 'px'; + elementToMove.style.top = newElementY + 'px'; + +// elementToMove.style.left = newElementX / elementToMove.parentNode.offsetWidth * 100 + '%'; +// elementToMove.style.top = newElementY / elementToMove.parentNode.offsetHeight * 100 + '%'; + + elementToMove.style.right = null; + elementToMove.style.bottom = null; + + var i; + for(i = 0; i < blocksToMove.length; i++) + { + blocksToMove[i].onMove(); + } + return false; + } +} + +/** + * finds the innermost draggable element starting from the one that generated the event "e" + * (i.e.: the html element under mouse pointer), then setup the document's onmousemove function to + * move the element around. + */ +function startDrag(e) +{ + var eventSource = nn6 ? e.target : event.srcElement; + if(eventSource.tagName == 'HTML') + return; + + while (eventSource != document.body && !hasClass(eventSource, "draggable")) + { + eventSource = nn6 ? eventSource.parentNode : eventSource.parentElement; + } + + // if a draggable element was found, calculate its actual position + if (hasClass(eventSource, "draggable")) + { + isdrag = true; + elementToMove = eventSource; + + // set absolute positioning on the element + elementToMove.style.position = "absolute"; + + // calculate start point + elementStartX = elementToMove.offsetLeft; + elementStartY = elementToMove.offsetTop; + + // calculate mouse start point + mouseStartX = nn6 ? e.clientX : event.clientX; + mouseStartY = nn6 ? e.clientY : event.clientY; + + // calculate bounds as left, top, width, height of the parent element + if(getStyle(elementToMove.parentNode, "position") == 'absolute') + { + bounds[0] = 0; + bounds[1] = 0; + } + else + { + bounds[0] = calculateOffsetLeft(elementToMove.parentNode); + bounds[1] = calculateOffsetTop(elementToMove.parentNode); + } + bounds[2] = bounds[0] + elementToMove.parentNode.offsetWidth; + bounds[3] = bounds[1] + elementToMove.parentNode.offsetHeight; + + // either find the block related to the dragging element to call its onMove method + blocksToMove = new Array(); + + blocksToMoveScanner.scan(eventSource); + document.onmousemove = movemouse; + + originalZIndex = getStyle(elementToMove, "z-index"); + elementToMove.style.zIndex = "3"; + + return false; + } +} + +function stopDrag(e) +{ + isdrag=false; + if(elementToMove) + elementToMove.style.zIndex=originalZIndex; + elementToMove = null; + document.onmousemove = null; + +} + +document.onmousedown = startDrag; +document.onmouseup = stopDrag; + + + +/************* + * Constants * + *************/ +var LEFT = 1; +var RIGHT = 2; +var UP = 4; +var DOWN = 8; +var HORIZONTAL = LEFT + RIGHT; +var VERTICAL = UP + DOWN; +var AUTO = HORIZONTAL + VERTICAL; + +var START = 0; +var END = 1; +var SCROLLBARS_WIDTH = 18; + +/************** + * Inspectors * + **************/ + +var inspectors = new Array(); + +/** + * The canvas class. + * This class is built on a div html element. + */ +function Canvas(htmlElement) +{ + /* + * initialization + */ + this.id = htmlElement.id; + this.htmlElement = htmlElement; + this.blocks = new Array(); + this.connectors = new Array(); + this.offsetLeft = calculateOffsetLeft(this.htmlElement); + this.offsetTop = calculateOffsetTop(this.htmlElement); + + this.width; + this.height; + + // create the inner div element + this.innerDiv = document.createElement("div"); + + this.initCanvas = function() + { + // setup the inner div + var children = this.htmlElement.childNodes; + var i; + var el; + var n = children.length; + for(i = 0; i < n; i++) + { + el = children[0]; + this.htmlElement.removeChild(el); + this.innerDiv.appendChild(el); + if(el.style) + el.style.zIndex = "2"; + } + this.htmlElement.appendChild(this.innerDiv); + + this.htmlElement.style.overflow = "auto"; + this.htmlElement.style.position = "relative"; + this.innerDiv.id = this.id + "_innerDiv"; + this.innerDiv.style.border = "none"; + this.innerDiv.style.padding = "0px"; + this.innerDiv.style.margin = "0px"; + this.innerDiv.style.position = "absolute"; + this.innerDiv.style.top = "0px"; + this.innerDiv.style.left = "0px"; + this.width = 0; + this.height = 0; + this.offsetLeft = calculateOffsetLeft(this.innerDiv); + this.offsetTop = calculateOffsetTop(this.innerDiv); + + // inspect canvas children to identify first level blocks + new DocumentScanner(this, true).scan(this.htmlElement); + + // now this.width and this.height are populated with minimum values needed for the inner + // blocks to fit, add 2 to avoid border overlap; + this.height += 2; + this.width += 2; + + var visibleWidth = this.htmlElement.offsetWidth - 2; // - 2 is to avoid border overlap + var visibleHeight = this.htmlElement.offsetHeight - 2; // - 2 is to avoid border overlap + + // consider the scrollbars width calculating the inner div size + if(this.height > visibleHeight) + visibleWidth -= SCROLLBARS_WIDTH; + if(this.width > visibleWidth) + visibleHeight -= SCROLLBARS_WIDTH; + + this.height = Math.max(this.height, visibleHeight); + this.width = Math.max(this.width, visibleWidth); + + this.innerDiv.style.width = this.width + "px"; + this.innerDiv.style.height = this.height + "px"; + + // init connectors + for(i = 0; i < this.connectors.length; i++) + { + this.connectors[i].initConnector(); + } + } + + this.visit = function(element) + { + if(element == this.htmlElement) + return true; + + // check the element dimensions against the acutal size of the canvas + this.width = Math.max(this.width, calculateOffsetLeft(element) - this.offsetLeft + element.offsetWidth); + this.height = Math.max(this.height, calculateOffsetTop(element) - this.offsetTop + element.offsetHeight); + + if(isBlock(element)) + { + // block found initialize it + var newBlock = new Block(element, this); + newBlock.initBlock(); + this.blocks.push(newBlock); + return false; + } + else if(isConnector(element)) + { + // connector found, just create it, source or destination blocks may not + // have been initialized yet + var newConnector = new Connector(element, this); + this.connectors.push(newConnector); + return false; + } + else + { + // continue searching nested elements + return true; + } + } + + /* + * methods + */ + this.print = function() + { + var output = '<ul><legend>canvas: ' + this.id + '</legend>'; + var i; + for(i = 0; i < this.blocks.length; i++) + { + output += '<li>'; + output += this.blocks[i].print(); + output += '</li>'; + } + output += '</ul>'; + return output; + } + + /* + * This function searches for a nested block with a given id + */ + this.findBlock = function(blockId) + { + var result; + var i; + for(i = 0; i < this.blocks.length && !result; i++) + { + result = this.blocks[i].findBlock(blockId); + } + + return result; + } + + this.toString = function() + { + return 'canvas: ' + this.id; + } +} + +/* + * Block class + */ +function Block(htmlElement, canvas) +{ + /* + * initialization + */ + + this.canvas = canvas; + this.htmlElement = htmlElement; + this.id = htmlElement.id; + this.blocks = new Array(); + this.moveListeners = new Array(); + + if(this.id == 'description2_out1') + var merda = 0; + this.currentTop = calculateOffsetTop(this.htmlElement) - this.canvas.offsetTop; + this.currentLeft = calculateOffsetLeft(this.htmlElement) - this.canvas.offsetLeft; + + this.visit = function(element) + { + if(element == this.htmlElement) + { + // exclude itself + return true; + } + + if(isBlock(element)) + { + var innerBlock = new Block(element, this.canvas); + innerBlock.initBlock(); + this.blocks.push(innerBlock); + this.moveListeners.push(innerBlock); + return false; + } + else + return true; + } + + this.initBlock = function() + { + // inspect block children to identify nested blocks + + new DocumentScanner(this, true).scan(this.htmlElement); + } + + this.top = function() + { + return this.currentTop; + } + + this.left = function() + { + return this.currentLeft; + } + + this.width = function() + { + return this.htmlElement.offsetWidth; + } + + this.height = function() + { + return this.htmlElement.offsetHeight; + } + + /* + * methods + */ + this.print = function() + { + var output = 'block: ' + this.id; + if(this.blocks.length > 0) + { + output += '<ul>'; + var i; + for(i = 0; i < this.blocks.length; i++) + { + output += '<li>'; + output += this.blocks[i].print(); + output += '</li>'; + } + output += '</ul>'; + } + return output; + } + + /* + * This function searches for a nested block (or the block itself) with a given id + */ + this.findBlock = function(blockId) + { + if(this.id == blockId) + return this; + + var result; + var i; + for(i = 0; i < this.blocks.length && !result; i++) + { + result = this.blocks[i].findBlock(blockId); + } + + return result; + } + + this.move = function(left, top) + { + this.htmlElement.style.left = left; + this.htmlElement.style.top = top; + + this.onMove(); + } + + this.onMove = function() + { + var i; + this.currentLeft = calculateOffsetLeft(this.htmlElement) - this.canvas.offsetLeft; + this.currentTop = calculateOffsetTop(this.htmlElement) - this.canvas.offsetTop; + // notify listeners + for(i = 0; i < this.moveListeners.length; i++) + { + this.moveListeners[i].onMove(); + } + } + + this.toString = function() + { + return 'block: ' + this.id; + } +} + +/** + * This class represents a connector segment, it is drawn via a div element. + * A segment has a starting point defined by the properties startX and startY, a length, + * a thickness and an orientation. + * Allowed values for the orientation property are defined by the constants UP, LEFT, DOWN and RIGHT. + */ +function Segment(id, parentElement) +{ + this.id = id; + this.htmlElement = document.createElement('div'); + this.htmlElement.id = id; + this.htmlElement.style.position = 'absolute'; + this.htmlElement.style.overflow = 'hidden'; + parentElement.appendChild(this.htmlElement); + + this.startX; + this.startY; + this.length; + this.thickness; + this.orientation; + this.nextSegment; + this.visible = true; + + /** + * draw the segment. This operation is cascaded to next segment if any. + */ + this.draw = function() + { + // set properties to next segment + if(this.nextSegment) + { + this.nextSegment.startX = this.getEndX(); + this.nextSegment.startY = this.getEndY(); + } + + if(this.visible) + this.htmlElement.style.display = 'block'; + else + this.htmlElement.style.display = 'none'; + + switch(this.orientation) + { + case LEFT: + this.htmlElement.style.left = (this.startX - this.length) + "px"; + this.htmlElement.style.top = this.startY + "px"; + this.htmlElement.style.width = this.length + "px"; + this.htmlElement.style.height = this.thickness + "px"; + break; + case RIGHT: + this.htmlElement.style.left = this.startX + "px"; + this.htmlElement.style.top = this.startY + "px"; + if(this.nextSegment) + this.htmlElement.style.width = this.length + this.thickness + "px"; + else + this.htmlElement.style.width = this.length + "px"; + this.htmlElement.style.height = this.thickness + "px"; + break; + case UP: + this.htmlElement.style.left = this.startX + "px"; + this.htmlElement.style.top = (this.startY - this.length) + "px"; + this.htmlElement.style.width = this.thickness + "px"; + this.htmlElement.style.height = this.length + "px"; + break; + case DOWN: + this.htmlElement.style.left = this.startX + "px"; + this.htmlElement.style.top = this.startY + "px"; + this.htmlElement.style.width = this.thickness + "px"; + if(this.nextSegment) + this.htmlElement.style.height = this.length + this.thickness + "px"; + else + this.htmlElement.style.height = this.length + "px"; + break; + } + + if(this.nextSegment) + this.nextSegment.draw(); + } + + /** + * Returns the "left" coordinate of the end point of this segment + */ + this.getEndX = function() + { + switch(this.orientation) + { + case LEFT: return this.startX - this.length; + case RIGHT: return this.startX + this.length; + case DOWN: return this.startX; + case UP: return this.startX; + } + } + + /** + * Returns the "top" coordinate of the end point of this segment + */ + this.getEndY = function() + { + switch(this.orientation) + { + case LEFT: return this.startY; + case RIGHT: return this.startY; + case DOWN: return this.startY + this.length; + case UP: return this.startY - this.length; + } + } + + /** + * Append another segment to the end point of this. + * If another segment is already appended to this, cascades the operation so + * the given next segment will be appended to the tail of the segments chain. + */ + this.append = function(nextSegment) + { + if(!nextSegment) + return; + if(!this.nextSegment) + { + this.nextSegment = nextSegment; + this.nextSegment.startX = this.getEndX(); + this.nextSegment.startY = this.getEndY(); + } + else + this.nextSegment.append(nextSegment); + } + + this.detach = function() + { + var s = this.nextSegment; + this.nextSegment = null; + return s; + } + + /** + * hides this segment and all the following + */ + this.cascadeHide = function() + { + this.visible = false; + if(this.nextSegment) + this.nextSegment.cascadeHide(); + } +} +/** + * Connector class. + * The init function takes two Block objects as arguments representing + * the source and destination of the connector + */ +function Connector(htmlElement, canvas) +{ + /** + * declaring html element + */ + this.htmlElement = htmlElement; + + /** + * the canvas this connector is in + */ + this.canvas = canvas; + + /** + * the source block + */ + this.source = null; + + /** + * the destination block + */ + this.destination = null; + + /** + * preferred orientation + */ + this.preferredSourceOrientation = AUTO; + this.preferredDestinationOrientation = AUTO; + + /** + * css class to be applied to the connector's segments + */ + this.connectorClass; + + /** + * minimum length for a connector segment. + */ + this.minSegmentLength = 10; + + /** + * size of the connector, i.e.: thickness of the segments. + */ + this.size = 2; + + /** + * connector's color + */ + this.color = 'black'; + + /** + * move listeners, they are notify when connector moves + */ + this.moveListeners = new Array(); + + this.firstSegment; + + this.segmentsPool; + + this.segmentsNumber = 0; + + this.strategy; + + this.initConnector = function() + { + // detect the connector id + if(this.htmlElement.id) + this.id = this.htmlElement.id; + else + this.id = this.htmlElement.className; + + // split the class name to get the ids of the source and destination blocks + var splitted = htmlElement.className.split(' '); + if(splitted.length < 3) + { + alert('Unable to create connector \'' + id + '\', class is not in the correct format: connector <sourceBlockId>, <destBlockId>'); + return; + } + + this.connectorClass = splitted[0] + ' ' + splitted[1] + ' ' + splitted[2]; + + this.source = this.canvas.findBlock(splitted[1]); + if(!this.source) + { + alert('cannot find source block with id \'' + splitted[1] + '\''); + return; + } + + this.destination = this.canvas.findBlock(splitted[2]); + if(!this.destination) + { + alert('cannot find destination block with id \'' + splitted[2] + '\''); + return; + } + + // check preferred orientation + if(hasClass(this.htmlElement, 'vertical')) + { + this.preferredSourceOrientation = VERTICAL; + this.preferredDestinationOrientation = VERTICAL; + } + else if(hasClass(this.htmlElement, 'horizontal')) + { + this.preferredSourceOrientation = HORIZONTAL; + this.preferredDestinationOrientation = HORIZONTAL; + } + else + { + // check preferred orientation on source side + if(hasClass(this.htmlElement, 'vertical_start')) + this.preferredSourceOrientation = VERTICAL; + else if(hasClass(this.htmlElement, 'horizontal_start')) + this.preferredSourceOrientation = HORIZONTAL; + else if(hasClass(this.htmlElement, 'left_start')) + this.preferredSourceOrientation = LEFT; + else if(hasClass(this.htmlElement, 'right_start')) + this.preferredSourceOrientation = RIGHT; + else if(hasClass(this.htmlElement, 'up_start')) + this.preferredSourceOrientation = UP; + else if(hasClass(this.htmlElement, 'down_start')) + this.preferredSourceOrientation = DOWN; + + // check preferred orientation on destination side + if(hasClass(this.htmlElement, 'vertical_end')) + this.preferredDestinationOrientation = VERTICAL; + else if(hasClass(this.htmlElement, 'horizontal_end')) + this.preferredDestinationOrientation = HORIZONTAL; + else if(hasClass(this.htmlElement, 'left_end')) + this.preferredDestinationOrientation = LEFT; + else if(hasClass(this.htmlElement, 'right_end')) + this.preferredDestinationOrientation = RIGHT; + else if(hasClass(this.htmlElement, 'up_end')) + this.preferredDestinationOrientation = UP; + else if(hasClass(this.htmlElement, 'down_end')) + this.preferredDestinationOrientation = DOWN; + } + + // get the first strategy as default + this.strategy = strategies[0](this); + this.repaint(); + + this.source.moveListeners.push(this); + this.destination.moveListeners.push(this); + + // call inspectors for this connector + var i; + for(i = 0; i < inspectors.length; i++) + { + inspectors[i].inspect(this); + } + + // remove old html element + this.htmlElement.parentNode.removeChild(this.htmlElement); + } + + this.getStartSegment = function() + { + return this.firstSegment; + } + + this.getEndSegment = function() + { + var s = this.firstSegment; + while(s.nextSegment) + s = s.nextSegment; + return s; + } + + this.getMiddleSegment = function() + { + if(!this.strategy) + return null; + else + return this.strategy.getMiddleSegment(); + } + + this.createSegment = function() + { + var segment; + + // if the pool contains more objects, borrow the segment, create it otherwise + if(this.segmentsPool) + { + segment = this.segmentsPool; + this.segmentsPool = this.segmentsPool.detach(); + } + else + { + segment = new Segment(this.id + "_" + (this.segmentsNumber + 1), this.canvas.htmlElement); + segment.htmlElement.className = this.connectorClass; + if(!getStyle(segment.htmlElement, 'background-color')) + segment.htmlElement.style.backgroundColor = this.color; + segment.thickness = this.size; + } + this.segmentsNumber++; + + if(this.firstSegment) + this.firstSegment.append(segment); + else + this.firstSegment = segment; + segment.visible = true; + return segment; + } + + /** + * Repaints the connector + */ + this.repaint = function() + { + // check strategies fitness and choose the best fitting one + var i; + var maxFitness = 0; + var fitness; + var s; + + // check if any strategy is possible with preferredOrientation + for(i = 0; i < strategies.length; i++) + { + this.clearSegments(); + + fitness = 0; + s = strategies[i](this); + if(s.isApplicable()) + { + fitness++; + s.paint(); + // check resulting orientation against the preferred orientations + if((this.firstSegment.orientation & this.preferredSourceOrientation) != 0) + fitness++; + if((this.getEndSegment().orientation & this.preferredDestinationOrientation) != 0) + fitness++; + } + + if(fitness > maxFitness) + { + this.strategy = s; + maxFitness = fitness; + } + } + + this.clearSegments(); + + this.strategy.paint(); + this.firstSegment.draw(); + + // this is needed to actually hide unused html elements + if(this.segmentsPool) + this.segmentsPool.draw(); + } + + /** + * Hide all the segments and return them to pool + */ + this.clearSegments = function() + { + if(this.firstSegment) + { + this.firstSegment.cascadeHide(); + this.firstSegment.append(this.segmentsPool); + this.segmentsPool = this.firstSegment; + this.firstSegment = null; + } + } + + this.onMove = function() + { + this.repaint(); + + // notify listeners + var i; + for(i = 0; i < this.moveListeners.length; i++) + this.moveListeners[i].onMove(); + } +} + +var strategies = new Array(); + +function ConnectorEnd(htmlElement, connector, side) +{ + this.side = side; + this.htmlElement = htmlElement; + this.connector = connector; + connector.canvas.htmlElement.appendChild(htmlElement); + // strip extension + if(this.htmlElement.tagName.toLowerCase() == "img") + { + this.src = this.htmlElement.src.substring(0, this.htmlElement.src.lastIndexOf('.')); + this.srcExtension = this.htmlElement.src.substring(this.htmlElement.src.lastIndexOf('.')); + this.htmlElement.style.zIndex = getStyle(this.connector.htmlElement, "z-index"); + } + + this.orientation; + + this.repaint = function() + { + this.htmlElement.style.position = 'absolute'; + + var left; + var top; + var segment; + var orientation; + + if(this.side == START) + { + segment = connector.getStartSegment(); + left = segment.startX; + top = segment.startY; + orientation = segment.orientation; + // swap orientation + if((orientation & VERTICAL) != 0) + orientation = (~orientation) & VERTICAL; + else + orientation = (~orientation) & HORIZONTAL; + } + else + { + segment = connector.getEndSegment(); + left = segment.getEndX(); + top = segment.getEndY(); + orientation = segment.orientation; + } + + switch(orientation) + { + case LEFT: + top -= (this.htmlElement.offsetHeight - segment.thickness) / 2; + break; + case RIGHT: + left -= this.htmlElement.offsetWidth; + top -= (this.htmlElement.offsetHeight - segment.thickness) / 2; + break; + case DOWN: + top -= this.htmlElement.offsetHeight; + left -= (this.htmlElement.offsetWidth - segment.thickness) / 2; + break; + case UP: + left -= (this.htmlElement.offsetWidth - segment.thickness) / 2; + break; + } + + this.htmlElement.style.left = Math.ceil(left) + "px"; + this.htmlElement.style.top = Math.ceil(top) + "px"; + + if(this.htmlElement.tagName.toLowerCase() == "img" && this.orientation != orientation) + { + var orientationSuffix; + switch(orientation) + { + case UP: orientationSuffix = "u"; break; + case DOWN: orientationSuffix = "d"; break; + case LEFT: orientationSuffix = "l"; break; + case RIGHT: orientationSuffix = "r"; break; + } + this.htmlElement.src = this.src + "_" + orientationSuffix + this.srcExtension; + } + this.orientation = orientation; + } + + this.onMove = function() + { + this.repaint(); + } +} + +function SideConnectorLabel(connector, htmlElement, side) +{ + this.connector = connector; + this.htmlElement = htmlElement; + this.side = side; + this.connector.htmlElement.parentNode.appendChild(htmlElement); + + this.repaint = function() + { + this.htmlElement.style.position = 'absolute'; + var left; + var top; + var segment; + + if(this.side == START) + { + segment = this.connector.getStartSegment(); + left = segment.startX; + top = segment.startY; + if(segment.orientation == LEFT) + left -= this.htmlElement.offsetWidth; + if(segment.orientation == UP) + top -= this.htmlElement.offsetHeight; + + if((segment.orientation & HORIZONTAL) != 0 && top < this.connector.getEndSegment().getEndY()) + top -= this.htmlElement.offsetHeight; + if((segment.orientation & VERTICAL) != 0 && left < this.connector.getEndSegment().getEndX()) + left -= this.htmlElement.offsetWidth; + } + else + { + segment = this.connector.getEndSegment(); + left = segment.getEndX(); + top = segment.getEndY(); + if(segment.orientation == RIGHT) + left -= this.htmlElement.offsetWidth; + if(segment.orientation == DOWN) + top -= this.htmlElement.offsetHeight; + if((segment.orientation & HORIZONTAL) != 0 && top < this.connector.getStartSegment().startY) + top -= this.htmlElement.offsetHeight; + if((segment.orientation & VERTICAL) != 0 && left < this.connector.getStartSegment().startX) + left -= this.htmlElement.offsetWidth; + } + + this.htmlElement.style.left = Math.ceil(left) + "px"; + this.htmlElement.style.top = Math.ceil(top) + "px"; + } + + this.onMove = function() + { + this.repaint(); + } +} + +function MiddleConnectorLabel(connector, htmlElement) +{ + this.connector = connector; + this.htmlElement = htmlElement; + this.connector.canvas.htmlElement.appendChild(htmlElement); + + this.repaint = function() + { + this.htmlElement.style.position = 'absolute'; + + var left; + var top; + var segment = connector.getMiddleSegment(); + + if((segment.orientation & VERTICAL) != 0) + { + // put label at middle height on right side of the connector + top = segment.htmlElement.offsetTop + (segment.htmlElement.offsetHeight - this.htmlElement.offsetHeight) / 2; + left = segment.htmlElement.offsetLeft; + } + else + { + // put connector below the connector at middle widths + top = segment.htmlElement.offsetTop; + left = segment.htmlElement.offsetLeft + (segment.htmlElement.offsetWidth - this.htmlElement.offsetWidth) / 2;; + } + + this.htmlElement.style.left = Math.ceil(left) + "px"; + this.htmlElement.style.top = Math.ceil(top) + "px"; + } + + this.onMove = function() + { + this.repaint(); + } +} + +/* + * Inspector classes + */ + +function ConnectorEndsInspector() +{ + this.inspect = function(connector) + { + var children = connector.htmlElement.childNodes; + var i; + for(i = 0; i < children.length; i++) + { + if(hasClass(children[i], "connector-end")) + { + var newElement = new ConnectorEnd(children[i], connector, END); + newElement.repaint(); + connector.moveListeners.push(newElement); + } + else if(hasClass(children[i], "connector-start")) + { + var newElement = new ConnectorEnd(children[i], connector, START); + newElement.repaint(); + connector.moveListeners.push(newElement); + } + } + } +} + +function ConnectorLabelsInspector() +{ + this.inspect = function(connector) + { + var children = connector.htmlElement.childNodes; + var i; + for(i = 0; i < children.length; i++) + { + if(hasClass(children[i], "source-label")) + { + var newElement = new SideConnectorLabel(connector, children[i], START); + newElement.repaint(); + connector.moveListeners.push(newElement); + } + else if(hasClass(children[i], "middle-label")) + { + var newElement = new MiddleConnectorLabel(connector, children[i]); + newElement.repaint(); + connector.moveListeners.push(newElement); + } + else if(hasClass(children[i], "destination-label")) + { + var newElement = new SideConnectorLabel(connector, children[i], END); + newElement.repaint(); + connector.moveListeners.push(newElement); + } + } + } +} + +/* + * Inspector registration + */ + +inspectors.push(new ConnectorEndsInspector()); +inspectors.push(new ConnectorLabelsInspector()); + +/* + * an array containing all the canvases in document + */ +var canvases = new Array(); + +/* + * This function initializes the js_graph objects inspecting the html document + */ +function initPageObjects() +{ + if(isCanvas(document.body)) + { + var newCanvas = new Canvas(document.body); + newCanvas.initCanvas(); + canvases.push(newCanvas); + } + else + { + var divs = document.getElementsByTagName('div'); + var i; + for(i = 0; i < divs.length; i++) + { + if(isCanvas(divs[i]) && !findCanvas(divs[i].id)) + { + var newCanvas = new Canvas(divs[i]); + newCanvas.initCanvas(); + canvases.push(newCanvas); + } + } + } +} + + +/* + * Utility functions + */ + + +function findCanvas(canvasId) +{ + var i; + for(i = 0; i < canvases.length; i++) + if(canvases[i].id == canvasId) + return canvases[i]; + return null; +} + +function findBlock(blockId) +{ + var i; + for(i = 0; i < canvases.length; i++) + { + var block = canvases[i].findBlock(blockId); + if(block) + return block; + } + return null; +} + +/* + * This function determines whether a html element is to be considered a canvas + */ +function isBlock(htmlElement) +{ + return hasClass(htmlElement, 'block'); +} + +/* + * This function determines whether a html element is to be considered a block + */ +function isCanvas(htmlElement) +{ + return hasClass(htmlElement, 'canvas'); +} + +/* + * This function determines whether a html element is to be considered a connector + */ +function isConnector(htmlElement) +{ + return htmlElement.className && htmlElement.className.match(new RegExp('connector .*')); +} + +/* + * This function calculates the absolute 'top' value for a html node + */ +function calculateOffsetTop(obj) +{ + var curtop = 0; + if (obj.offsetParent) + { + curtop = obj.offsetTop + while (obj = obj.offsetParent) + curtop += obj.offsetTop + } + else if (obj.y) + curtop += obj.y; + return curtop; +} + +/* + * This function calculates the absolute 'left' value for a html node + */ +function calculateOffsetLeft(obj) +{ + var curleft = 0; + if (obj.offsetParent) + { + curleft = obj.offsetLeft + while (obj = obj.offsetParent) + { + curleft += obj.offsetLeft; + } + } + else if (obj.x) + curleft += obj.x; + return curleft; +} + +function parseBorder(obj, side) +{ + var sizeString = getStyle(obj, "border-" + side + "-width"); + if(sizeString && sizeString != "") + { + if(sizeString.substring(sizeString.length - 2) == "px") + return parseInt(sizeString.substring(0, sizeString.length - 2)); + } + return 0; +} + +function hasClass(element, className) +{ + if(!element || !element.className) + return false; + + var classes = element.className.split(' '); + var i; + for(i = 0; i < classes.length; i++) + if(classes[i] == className) + return true; + return false; +} + +/** + * This function retrieves the actual value of a style property even if it is set via css. + */ +function getStyle(node, styleProp) +{ + // if not an element + if( node.nodeType != 1) + return; + + var value; + if (node.currentStyle) + { + // ie case + styleProp = replaceDashWithCamelNotation(styleProp); + value = node.currentStyle[styleProp]; + } + else if (window.getComputedStyle) + { + // mozilla case + value = document.defaultView.getComputedStyle(node, null).getPropertyValue(styleProp); + } + + return value; +} + +function replaceDashWithCamelNotation(value) +{ + var pos = value.indexOf('-'); + while(pos > 0 && value.length > pos + 1) + { + value = value.substring(0, pos) + value.substring(pos + 1, pos + 2).toUpperCase() + value.substring(pos + 2); + pos = value.indexOf('-'); + } + return value; +} + + +/******************************* + * Connector paint strategies. * + *******************************/ + +/** + * Horizontal "S" routing strategy. + */ +function HorizontalSStrategy(connector) +{ + this.connector = connector; + + this.startSegment; + this.middleSegment; + this.endSegment; + + this.strategyName = "horizontal_s"; + + this.getMiddleSegment = function() + { + return this.middleSegment; + } + + this.isApplicable = function() + { + var sourceLeft = this.connector.source.left(); + var sourceWidth = this.connector.source.width(); + var destinationLeft = this.connector.destination.left(); + var destinationWidth = this.connector.destination.width(); + + return Math.abs(2 * destinationLeft + destinationWidth - (2 * sourceLeft + sourceWidth)) - (sourceWidth + destinationWidth) > 4 * this.connector.minSegmentLength; + } + + this.paint = function() + { + this.startSegment = connector.createSegment(); + this.middleSegment = connector.createSegment(); + this.endSegment = connector.createSegment(); + + var sourceLeft = this.connector.source.left(); + var sourceTop = this.connector.source.top(); + var sourceWidth = this.connector.source.width(); + var sourceHeight = this.connector.source.height(); + + var destinationLeft = this.connector.destination.left(); + var destinationTop = this.connector.destination.top(); + var destinationWidth = this.connector.destination.width(); + var destinationHeight = this.connector.destination.height(); + + var hLength; + + this.startSegment.startY = Math.floor(sourceTop + sourceHeight / 2); + + // deduce which face to use on source and destination blocks + if(sourceLeft + sourceWidth / 2 < destinationLeft + destinationWidth / 2) + { + // use left side of the source block and right side of the destination block + this.startSegment.startX = sourceLeft + sourceWidth; + hLength = destinationLeft - (sourceLeft + sourceWidth); + } + else + { + // use right side of the source block and left side of the destination block + this.startSegment.startX = sourceLeft; + hLength = destinationLeft + destinationWidth - sourceLeft; + } + + // first horizontal segment positioning + this.startSegment.length = Math.floor(Math.abs(hLength) / 2); + this.startSegment.orientation = hLength > 0 ? RIGHT : LEFT; + + // vertical segment positioning + var vLength = Math.floor(destinationTop + destinationHeight / 2 - (sourceTop + sourceHeight / 2)); + this.middleSegment.length = Math.abs(vLength); + if(vLength == 0) + this.middleSegment.visible = false; + this.middleSegment.orientation = vLength > 0 ? DOWN : UP; + + // second horizontal segment positioning + this.endSegment.length = Math.floor(Math.abs(hLength) / 2); + this.endSegment.orientation = hLength > 0 ? RIGHT : LEFT; + } +} + +/** + * Vertical "S" routing strategy. + */ +function VerticalSStrategy(connector) +{ + this.connector = connector; + + this.startSegment; + this.middleSegment; + this.endSegment; + + this.strategyName = "vertical_s"; + + this.getMiddleSegment = function() + { + return this.middleSegment; + } + + this.isApplicable = function() + { + var sourceTop = this.connector.source.top(); + var sourceHeight = this.connector.source.height(); + var destinationTop = this.connector.destination.top(); + var destinationHeight = this.connector.destination.height(); + return Math.abs(2 * destinationTop + destinationHeight - (2 * sourceTop + sourceHeight)) - (sourceHeight + destinationHeight) > 4 * this.connector.minSegmentLength; + } + + this.paint = function() + { + this.startSegment = connector.createSegment(); + this.middleSegment = connector.createSegment(); + this.endSegment = connector.createSegment(); + + var sourceLeft = this.connector.source.left(); + var sourceTop = this.connector.source.top(); + var sourceWidth = this.connector.source.width(); + var sourceHeight = this.connector.source.height(); + + var destinationLeft = this.connector.destination.left(); + var destinationTop = this.connector.destination.top(); + var destinationWidth = this.connector.destination.width(); + var destinationHeight = this.connector.destination.height(); + + var vLength; + + this.startSegment.startX = Math.floor(sourceLeft + sourceWidth / 2); + + // deduce which face to use on source and destination blocks + if(sourceTop + sourceHeight / 2 < destinationTop + destinationHeight / 2) + { + // use bottom side of the source block and top side of destination block + this.startSegment.startY = sourceTop + sourceHeight; + vLength = destinationTop - (sourceTop + sourceHeight); + } + else + { + // use top side of the source block and bottom side of the destination block + this.startSegment.startY = sourceTop; + vLength = destinationTop + destinationHeight - sourceTop; + } + + // first vertical segment positioning + this.startSegment.length = Math.floor(Math.abs(vLength) / 2); + this.startSegment.orientation = vLength > 0 ? DOWN : UP; + + // horizontal segment positioning + var hLength = Math.floor(destinationLeft + destinationWidth / 2 - (sourceLeft + sourceWidth / 2)); + this.middleSegment.length = Math.abs(hLength); + this.middleSegment.orientation = hLength > 0 ? RIGHT : LEFT; + + // second vertical segment positioning + this.endSegment.length = Math.floor(Math.abs(vLength) / 2); + this.endSegment.orientation = vLength > 0 ? DOWN : UP; + } +} + +/** + * A horizontal "L" connector routing strategy + */ +function HorizontalLStrategy(connector) +{ + this.connector = connector; + + this.destination; + + this.startSegment; + this.endSegment; + + this.strategyName = "horizontal_L"; + + this.isApplicable = function() + { + var destMiddle = Math.floor(this.connector.destination.left() + this.connector.destination.width() / 2); + var sl = this.connector.source.left(); + var sw = this.connector.source.width(); + var dt = this.connector.destination.top(); + var dh = this.connector.destination.height(); + var sourceMiddle = Math.floor(this.connector.source.top() + this.connector.source.height() / 2); + + if(destMiddle > sl && destMiddle < sl + sw) + return false; + if(sourceMiddle > dt && sourceMiddle < dt + dh) + return false; + return true; + } + + /** + * Chooses the longest segment as the "middle" segment. + */ + this.getMiddleSegment = function() + { + if(this.startSegment.length > this.endSegment.length) + return this.startSegment; + else + return this.endSegment; + } + + this.paint = function() + { + this.startSegment = this.connector.createSegment(); + this.endSegment = this.connector.createSegment(); + + var destMiddleX = Math.floor(this.connector.destination.left() + this.connector.destination.width() / 2); + var sl = this.connector.source.left(); + var sw = this.connector.source.width(); + var dt = this.connector.destination.top(); + var dh = this.connector.destination.height(); + + this.startSegment.startY = Math.floor(this.connector.source.top() + this.connector.source.height() / 2); + + // decide which side of the source block to connect to + if(Math.abs(destMiddleX - sl) < Math.abs(destMiddleX - (sl + sw))) + { + // use the left face + this.startSegment.orientation = (destMiddleX < sl) ? LEFT : RIGHT; + this.startSegment.startX = sl; + } + else + { + // use the right face + this.startSegment.orientation = (destMiddleX > (sl + sw)) ? RIGHT : LEFT; + this.startSegment.startX = sl + sw; + } + + this.startSegment.length = Math.abs(destMiddleX - this.startSegment.startX); + + // decide which side of the destination block to connect to + if(Math.abs(this.startSegment.startY - dt) < Math.abs(this.startSegment.startY - (dt + dh))) + { + // use the upper face + this.endSegment.orientation = (this.startSegment.startY < dt) ? DOWN : UP; + this.endSegment.length = Math.abs(this.startSegment.startY - dt); + } + else + { + // use the lower face + this.endSegment.orientation = (this.startSegment.startY > (dt + dh)) ? UP : DOWN; + this.endSegment.length = Math.abs(this.startSegment.startY - (dt + dh)); + } + } +} + +/** + * Vertical "L" connector routing strategy + */ +function VerticalLStrategy(connector) +{ + this.connector = connector; + + this.startSegment; + this.endSegment; + + this.strategyName = "vertical_L"; + + this.isApplicable = function() + { + var sourceMiddle = Math.floor(this.connector.source.left() + this.connector.source.width() / 2); + var dl = this.connector.destination.left(); + var dw = this.connector.destination.width(); + var st = this.connector.source.top(); + var sh = this.connector.source.height(); + var destMiddle = Math.floor(this.connector.destination.top() + this.connector.destination.height() / 2); + + if(sourceMiddle > dl && sourceMiddle < dl + dw) + return false; + if(destMiddle > st && destMiddle < st + sh) + return false; + return true; + } + + /** + * Chooses the longest segment as the "middle" segment. + */ + this.getMiddleSegment = function() + { + if(this.startSegment.length > this.endSegment.length) + return this.startSegment; + else + return this.endSegment; + } + + this.paint = function() + { + this.startSegment = this.connector.createSegment(); + this.endSegment = this.connector.createSegment(); + + var destMiddleY = Math.floor(this.connector.destination.top() + this.connector.destination.height() / 2); + var dl = this.connector.destination.left(); + var dw = this.connector.destination.width(); + var st = this.connector.source.top(); + var sh = this.connector.source.height(); + + this.startSegment.startX = Math.floor(this.connector.source.left() + this.connector.source.width() / 2); + + // decide which side of the source block to connect to + if(Math.abs(destMiddleY - st) < Math.abs(destMiddleY - (st + sh))) + { + // use the upper face + this.startSegment.orientation = (destMiddleY < st) ? UP : DOWN; + this.startSegment.startY = st; + } + else + { + // use the lower face + this.startSegment.orientation = (destMiddleY > (st + sh)) ? DOWN : UP; + this.startSegment.startY = st + sh; + } + + this.startSegment.length = Math.abs(destMiddleY - this.startSegment.startY); + + // decide which side of the destination block to connect to + if(Math.abs(this.startSegment.startX - dl) < Math.abs(this.startSegment.startX - (dl + dw))) + { + // use the left face + this.endSegment.orientation = (this.startSegment.startX < dl) ? RIGHT : LEFT; + this.endSegment.length = Math.abs(this.startSegment.startX - dl); + } + else + { + // use the right face + this.endSegment.orientation = (this.startSegment.startX > dl + dw) ? LEFT : RIGHT; + this.endSegment.length = Math.abs(this.startSegment.startX - (dl + dw)); + } + } +} + +function HorizontalCStrategy(connector, startOrientation) +{ + this.connector = connector; + + this.startSegment; + this.middleSegment; + this.endSegment; + + this.strategyName = "horizontal_c"; + + this.getMiddleSegment = function() + { + return this.middleSegment; + } + + this.isApplicable = function() + { + return true; + } + + this.paint = function() + { + this.startSegment = connector.createSegment(); + this.middleSegment = connector.createSegment(); + this.endSegment = connector.createSegment(); + + var sign = 1; + if(startOrientation == RIGHT) + sign = -1; + + var startX = this.connector.source.left(); + if(startOrientation == RIGHT) + startX += this.connector.source.width(); + var startY = Math.floor(this.connector.source.top() + this.connector.source.height() / 2); + + var endX = this.connector.destination.left(); + if(startOrientation == RIGHT) + endX += this.connector.destination.width(); + var endY = Math.floor(this.connector.destination.top() + this.connector.destination.height() / 2); + + this.startSegment.startX = startX; + this.startSegment.startY = startY; + this.startSegment.orientation = startOrientation; + this.startSegment.length = this.connector.minSegmentLength + Math.max(0, sign * (startX - endX)); + + var vLength = endY - startY; + this.middleSegment.orientation = vLength > 0 ? DOWN : UP; + this.middleSegment.length = Math.abs(vLength); + + this.endSegment.orientation = startOrientation == LEFT ? RIGHT : LEFT; + this.endSegment.length = Math.max(0, sign * (endX - startX)) + this.connector.minSegmentLength; + } +} + +function VerticalCStrategy(connector, startOrientation) +{ + this.connector = connector; + + this.startSegment; + this.middleSegment; + this.endSegment; + + this.strategyName = "vertical_c"; + + this.getMiddleSegment = function() + { + return this.middleSegment; + } + + this.isApplicable = function() + { + return true; + } + + this.paint = function() + { + this.startSegment = connector.createSegment(); + this.middleSegment = connector.createSegment(); + this.endSegment = connector.createSegment(); + + var sign = 1; + if(startOrientation == DOWN) + sign = -1; + + var startY = this.connector.source.top(); + if(startOrientation == DOWN) + startY += this.connector.source.height(); + var startX = Math.floor(this.connector.source.left() + this.connector.source.width() / 2); + + var endY = this.connector.destination.top(); + if(startOrientation == DOWN) + endY += this.connector.destination.height(); + var endX = Math.floor(this.connector.destination.left() + this.connector.destination.width() / 2); + + this.startSegment.startX = startX; + this.startSegment.startY = startY; + this.startSegment.orientation = startOrientation; + this.startSegment.length = this.connector.minSegmentLength + Math.max(0, sign * (startY - endY)); + + var hLength = endX - startX; + this.middleSegment.orientation = hLength > 0 ? RIGHT : LEFT; + this.middleSegment.length = Math.abs(hLength); + + this.endSegment.orientation = startOrientation == UP ? DOWN : UP; + this.endSegment.length = Math.max(0, sign * (endY - startY)) + this.connector.minSegmentLength; + } +} + + +strategies[0] = function(connector) {return new HorizontalSStrategy(connector)}; +strategies[1] = function(connector) {return new VerticalSStrategy(connector)}; +strategies[2] = function(connector) {return new HorizontalLStrategy(connector)}; +strategies[3] = function(connector) {return new VerticalLStrategy(connector)}; +strategies[4] = function(connector) {return new HorizontalCStrategy(connector, LEFT)}; +strategies[5] = function(connector) {return new HorizontalCStrategy(connector, RIGHT)}; +strategies[6] = function(connector) {return new VerticalCStrategy(connector, UP)}; +strategies[7] = function(connector) {return new VerticalCStrategy(connector, DOWN)}; \ No newline at end of file |