Author: Nicolas Garcia Belmonte
Copyright: Copyright 2008 by Nicolas Garcia Belmonte.
License: BSD License
Homepage: http://thejit.org
Version: 1.0.7a
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
THIS SOFTWARE IS PROVIDED BY Nicolas Garcia Belmonte ``AS IS’’ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Nicolas Garcia Belmonte BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
| Spacetree.js | Author: Nicolas Garcia Belmonte |
| $_ | Provides some common utility functions. |
| Config | ST global configuration object. |
| Properties | |
| orientation | Sets the orientation layout. |
| labelContainer | The id for the label container. |
| levelsToShow | Depth of the plotted tree. |
| offsetBase | Separation offset between nodes. |
| Label | Configuration object to customize labels size and offset. |
| height | Label height (offset included) |
| realHeight | Label realHeight (offset excluded) |
| width | Label width (offset included) |
| realWidth | Label realWidth (offset excluded) |
| offsetHeight | Used on the currently expanded subtree. |
| offsetWidth | Used on the currently expanded subtree. |
| Node | Configuration object to customize node styles. |
| strokeStyle | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the node. |
| fillStyle | If the node <Config.Node.mode> property is setted to “fill”, this property will set the color of the node. |
| strokeStyleInPath | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the currently selected node and all its ancestors. |
| strokeStyleInPath | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the currently selected node and all its ancestors. |
| mode | |
| style | Node style. |
| animationTime | Time for the animation. |
| fps | Animation frames per second. |
| Canvas | A multi-purpose Canvas object decorator. |
| Functions | |
| Canvas | Canvas initializer. |
| getContext | Canvas context handler. |
| makeNodeStyleSelected | Sets the fill or stroke color to fillStyleInPath or strokeStyleInPath if selected. |
| makeEdgeStyleSelected | Sets the stroke color to strokeStyleInPath if selected. |
| makeRect | Draws a rectangle in canvas. |
| setPosition | Calculates canvas absolute position on HTML document. |
| getPosition | Canvas absolute position to the HTML document. |
| clear | Clears the canvas object. |
| clearReactangle | Same as clear but only clears a section of the canvas. |
| translateToCenter | Translates canvas coordinates system to the center of the canvas object. |
| getSize | An object that contains the canvas width and height. |
| path | Performs a beginPath executes action doing then a type (‘fill’ or ‘stroke’) and closing the path with closePath. |
| Complex | A multi-purpose Complex Class with common methods. |
| Functions | |
| Complex | Complex constructor. |
| clone | Returns a copy of the current object. |
| norm | Calculates the complex norm. |
| squaredNorm | Calculates the complex squared norm. |
| add | Returns the result of adding two complex numbers. |
| prod | Returns the result of multiplying two complex numbers. |
| conjugate | Returns the conjugate for this complex. |
| scale | Returns the result of scaling a Complex instance. |
| $add | Returns the result of adding two complex numbers. |
| $prod | Returns the result of multiplying two complex numbers. |
| $conjugate | Returns the conjugate for this complex. |
| $scale | Returns the result of scaling a Complex instance. |
| $div | Returns the division of two complex numbers. |
| Tree | Provides packages with useful methods for tree manipulation. |
| Functions | |
| Tree | Tree constructor. |
| Tree.Node | Enhances the json tree node with special properties. |
| Functions | |
| Tree.Node | Tree.Node constructor. |
| Properties | |
| selected | sets the node as selected. |
| drawn | sets the node as visible or not. |
| exist | treats the node as if it existed or not (somewhat similar to CSS display:none) |
| _parent | Node parent. |
| pos | Node position |
| startPos | node from position |
| endPos | node to position |
| startAlpha | not being used by the moment. |
| endAlpha | not being used by the moment. |
| alpha | not being used by the moment. |
| Tree.Util | Provides iterators and utility methods for trees. |
| Functions | |
| set | To set multiple values to multiple properties of a tree node. |
| addSubtree | Makes a proper Tree object from a Tree JSON structure and inserts it where specified by id. |
| removeSubtree | Deletes a subtree completely. |
| each | Iterates over tree nodes performing an action. |
| eachLevel | Iterates over tree nodes to a certain tree level performing an action. |
| atLevel | Iterates over tree nodes from a sepecified level performing an action. |
| getLevel | Returns the current level of the tree node. |
| getRoot | Returns the tree root node. |
| getLeaves | Returns an array of the tree leaves. |
| getSubtree | Returns the subtree of the node with specified id or null if it doesn’t find it. |
| Tree. | Provides iterators and utility methods for tree children. |
| Functions | |
| each | Iterates over a nodes children performing an action. |
| children | Returns true if the current node has at least one node with property set to true. |
| getChildren | Returns a filtered array of children for the current node. |
| getLength | Returns the length of a filtered children array. |
| Tree. | Performs operations on group of nodes. |
| Functions | |
| requestNodes | Calls the request method on the controller to request a subtree for each node. |
| hide | Collapses group of nodes. |
| show | Expands group of nodes. |
| getNodesWithChildren | Filters an array of nodes leaving only nodes with children. |
| Tree.Plot | Performs plotting operations. |
| Functions | |
| plot | Plots the spacetree |
| plotTree | Plots nodes and edges of the tree. |
| plotNode | Plots a tree node. |
| plotNodeSquared | Plots a square node. |
| plotEdge | Plots an Edge. |
| hideLabels | Hides all labels of the tree. |
| animate | Animates the graph by performing a translation from elem.startPos to elem.endPos. |
| fade | fades in or out nodes based on startAlpha and endAlpha. |
| Tree. | Permorfs all label operations like showing, hiding, setting a label to a particular position, adding/removing classNames, etc. |
| Functions | |
| chk | Checks if a label with the homologue id of the current tree node exists and if it doesn’t it creates a label with this id. |
| init | Creates a label with the same id of the specified node and sets some initial properties. |
| plotOn | Plots the label (if this fits in canvas). |
| fitsInCanvas | Returns true or false if the current position is between canvas limits or not. |
| setDivProperties | Intended for private use: sets some label properties, such as positioning and className. |
| addClass | Adds the specified className to the label. |
| setDimensions | Sets label width and height based on Config.Label realWidth and realHeight values. |
| removeClass | Removes a specified class from the label. |
| hasClass | Returns true if the specified class name is found in the label. |
| setClass | Sets the className property of the label with a cssClass String. |
| hide | Hides the label by adding a “hidden” className to it. |
| show | Displays the label by removing the “hidden” className. |
| Tree. | Performs geometrical computations like calculating bounding boxes, a subtree base size, etc. |
| Functions | |
| left | Displays the tree current orientation. |
| switchOrientation | Changes the tree current orientation from top to left or viceversa. |
| getSize | Returns label height or with, depending on the tree current orientation. |
| getOffsetSize | Returns label offsetHeight or offsetWidth, depending on the tree current orientation. |
| translate | Applys a translation to the tree. |
| getBoundingBox | Calculates a tree bounding box. |
| calculateCorners | Intended for private use. |
| getBaseSize | Calculates a subtree base size. |
| getTreeBaseSize | Calculates a subtree base size. |
| getEdge | Returns a Complex instance with the begin or end position of the edge to be plotted. |
| getScaledTreePosition | Adjusts the tree position due to canvas scaling or translation. |
| treeFitsInCanvas | Returns a Boolean if the current tree fits in canvas. |
| getFirstPos | Calculates the first children position given a node position. |
| nextPosition | Calculates a siblings node position given a node position. |
| setRightLevelToShow | Hides levels of the tree until it properly fits in canvas. |
| getRightLevelToShow | Returns the right level to show for the current tree in order to fit in canvas. |
| ST | The main Spacetree class. |
| Functions | |
| ST | Creates a new ST instance. |
| loadFromJSON | Loads a json object into the ST. |
| compute | Calculates positions from root node. |
| calculatePositions | This method implements the core algorithm to calculate node positioning. |
| plot | This method plots the tree. |
| switchPosition | Switches the tree orientation from vertical to horizontal or viceversa. |
| requestNodes | If the controller has a request method, it asynchonously requests subtrees for the leaves of the tree. |
| contract | Contracts selected nodes. |
| move | Performs the animation of the translation of the tree. |
| expand | Determines which nodes to expand (and expands their subtrees). |
| selectPath | Sets a “selected” flag to nodes that are in the path. |
| addSubtree | Adds a subtree, performing optionally an animation. |
| removeSubtree | Removes a subtree, performing optionally an animation. |
| onClick | This method is called when clicking on a tree node. |
| Trans | An object containing multiple type of transformations. |
| Animation | An object that performs animations. |
ST global configuration object. Contains important properties to enable customization and proper behavior for the ST.
| Properties | |
| orientation | Sets the orientation layout. |
| labelContainer | The id for the label container. |
| levelsToShow | Depth of the plotted tree. |
| offsetBase | Separation offset between nodes. |
| Label | Configuration object to customize labels size and offset. |
| height | Label height (offset included) |
| realHeight | Label realHeight (offset excluded) |
| width | Label width (offset included) |
| realWidth | Label realWidth (offset excluded) |
| offsetHeight | Used on the currently expanded subtree. |
| offsetWidth | Used on the currently expanded subtree. |
| Node | Configuration object to customize node styles. |
| strokeStyle | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the node. |
| fillStyle | If the node <Config.Node.mode> property is setted to “fill”, this property will set the color of the node. |
| strokeStyleInPath | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the currently selected node and all its ancestors. |
| strokeStyleInPath | If the node <Config.Node.mode> property is setted to “stroke”, this property will set the color of the boundary of the currently selected node and all its ancestors. |
| mode | |
| style | Node style. |
| animationTime | Time for the animation. |
| fps | Animation frames per second. |
The id for the label container. The label container should be a div dom element where label div dom elements will be injected. You have to put the label container div dom element explicitly on your page to run the ST.
Configuration object to customize node styles. Use Config.Label to configure node width and height.
A multi-purpose Canvas object decorator.
| Functions | |
| Canvas | Canvas initializer. |
| getContext | Canvas context handler. |
| makeNodeStyleSelected | Sets the fill or stroke color to fillStyleInPath or strokeStyleInPath if selected. |
| makeEdgeStyleSelected | Sets the stroke color to strokeStyleInPath if selected. |
| makeRect | Draws a rectangle in canvas. |
| setPosition | Calculates canvas absolute position on HTML document. |
| getPosition | Canvas absolute position to the HTML document. |
| clear | Clears the canvas object. |
| clearReactangle | Same as clear but only clears a section of the canvas. |
| translateToCenter | Translates canvas coordinates system to the center of the canvas object. |
| getSize | An object that contains the canvas width and height. |
| path | Performs a beginPath executes action doing then a type (‘fill’ or ‘stroke’) and closing the path with closePath. |
makeNodeStyleSelected: function( selected, mode )
Sets the fill or stroke color to fillStyleInPath or strokeStyleInPath if selected. Sets colors to default otherwise.
| selected | A Boolean value specifying if the node is selected or not. |
| mode | A String setting the “fill” or “stroke” properties. |
Same as clear but only clears a section of the canvas.
| top | An integer specifying the top of the rectangle. |
| right | An integer specifying the right of the rectangle. |
| bottom | An integer specifying the bottom of the rectangle. |
| left | An integer specifying the left of the rectangle. |
A multi-purpose Complex Class with common methods.
| Functions | |
| Complex | Complex constructor. |
| clone | Returns a copy of the current object. |
| norm | Calculates the complex norm. |
| squaredNorm | Calculates the complex squared norm. |
| add | Returns the result of adding two complex numbers. |
| prod | Returns the result of multiplying two complex numbers. |
| conjugate | Returns the conjugate for this complex. |
| scale | Returns the result of scaling a Complex instance. |
| $add | Returns the result of adding two complex numbers. |
| $prod | Returns the result of multiplying two complex numbers. |
| $conjugate | Returns the conjugate for this complex. |
| $scale | Returns the result of scaling a Complex instance. |
| $div | Returns the division of two complex numbers. |
Enhances the json tree node with special properties.
| Functions | |
| Tree.Node | Tree.Node constructor. |
| Properties | |
| selected | sets the node as selected. |
| drawn | sets the node as visible or not. |
| exist | treats the node as if it existed or not (somewhat similar to CSS display:none) |
| _parent | Node parent. |
| pos | Node position |
| startPos | node from position |
| endPos | node to position |
| startAlpha | not being used by the moment. |
| endAlpha | not being used by the moment. |
| alpha | not being used by the moment. |
Provides iterators and utility methods for trees.
| Functions | |
| set | To set multiple values to multiple properties of a tree node. |
| addSubtree | Makes a proper Tree object from a Tree JSON structure and inserts it where specified by id. |
| removeSubtree | Deletes a subtree completely. |
| each | Iterates over tree nodes performing an action. |
| eachLevel | Iterates over tree nodes to a certain tree level performing an action. |
| atLevel | Iterates over tree nodes from a sepecified level performing an action. |
| getLevel | Returns the current level of the tree node. |
| getRoot | Returns the tree root node. |
| getLeaves | Returns an array of the tree leaves. |
| getSubtree | Returns the subtree of the node with specified id or null if it doesn’t find it. |
addSubtree: function( tree, id, subtree )
Makes a proper Tree object from a Tree JSON structure and inserts it where specified by id.
| tree | A tree object. |
| id | A node identifier where this subtree will be appended. If the root of the appended subtree and the id match, then it will append the subtree children to the node specified by id |
| subtree | A JSON Tree object. |
The transformed and appended subtree.
Provides iterators and utility methods for tree children.
| Functions | |
| each | Iterates over a nodes children performing an action. |
| children | Returns true if the current node has at least one node with property set to true. |
| getChildren | Returns a filtered array of children for the current node. |
| getLength | Returns the length of a filtered children array. |
Performs operations on group of nodes.
| Functions | |
| requestNodes | Calls the request method on the controller to request a subtree for each node. |
| hide | Collapses group of nodes. |
| show | Expands group of nodes. |
| getNodesWithChildren | Filters an array of nodes leaving only nodes with children. |
Performs plotting operations.
| Functions | |
| plot | Plots the spacetree |
| plotTree | Plots nodes and edges of the tree. |
| plotNode | Plots a tree node. |
| plotNodeSquared | Plots a square node. |
| plotEdge | Plots an Edge. |
| hideLabels | Hides all labels of the tree. |
| animate | Animates the graph by performing a translation from elem.startPos to elem.endPos. |
| fade | fades in or out nodes based on startAlpha and endAlpha. |
Permorfs all label operations like showing, hiding, setting a label to a particular position, adding/removing classNames, etc.
| Functions | |
| chk | Checks if a label with the homologue id of the current tree node exists and if it doesn’t it creates a label with this id. |
| init | Creates a label with the same id of the specified node and sets some initial properties. |
| plotOn | Plots the label (if this fits in canvas). |
| fitsInCanvas | Returns true or false if the current position is between canvas limits or not. |
| setDivProperties | Intended for private use: sets some label properties, such as positioning and className. |
| addClass | Adds the specified className to the label. |
| setDimensions | Sets label width and height based on Config.Label realWidth and realHeight values. |
| removeClass | Removes a specified class from the label. |
| hasClass | Returns true if the specified class name is found in the label. |
| setClass | Sets the className property of the label with a cssClass String. |
| hide | Hides the label by adding a “hidden” className to it. |
| show | Displays the label by removing the “hidden” className. |
setDimensions: function ( node )
Sets label width and height based on Config.Label realWidth and realHeight values.
Performs geometrical computations like calculating bounding boxes, a subtree base size, etc.
| Functions | |
| left | Displays the tree current orientation. |
| switchOrientation | Changes the tree current orientation from top to left or viceversa. |
| getSize | Returns label height or with, depending on the tree current orientation. |
| getOffsetSize | Returns label offsetHeight or offsetWidth, depending on the tree current orientation. |
| translate | Applys a translation to the tree. |
| getBoundingBox | Calculates a tree bounding box. |
| calculateCorners | Intended for private use. |
| getBaseSize | Calculates a subtree base size. |
| getTreeBaseSize | Calculates a subtree base size. |
| getEdge | Returns a Complex instance with the begin or end position of the edge to be plotted. |
| getScaledTreePosition | Adjusts the tree position due to canvas scaling or translation. |
| treeFitsInCanvas | Returns a Boolean if the current tree fits in canvas. |
| getFirstPos | Calculates the first children position given a node position. |
| nextPosition | Calculates a siblings node position given a node position. |
| setRightLevelToShow | Hides levels of the tree until it properly fits in canvas. |
| getRightLevelToShow | Returns the right level to show for the current tree in order to fit in canvas. |