diff --git a/Source/Core/Canvas.js b/Source/Core/Canvas.js index dfc9b5a..8da693f 100644 --- a/Source/Core/Canvas.js +++ b/Source/Core/Canvas.js @@ -116,14 +116,13 @@ The _init_ method is only called once, at the instanciation of the background canvas. The _plot_ method is called for plotting a Canvas image. */ -this.Canvas = (function(){ +var Canvas = (function(){ var config = { 'injectInto': 'id', 'width': false, 'height': false, 'useCanvas': false, 'labels': 'HTML', //can also be 'SVG' or 'Native' - 'backgroundCanvas': false }; diff --git a/Source/Core/Core.js b/Source/Core/Core.js index 46c132c..54fbec4 100644 --- a/Source/Core/Core.js +++ b/Source/Core/Core.js @@ -364,7 +364,7 @@ var Event = { }; //common json manipulation methods -$jit.$json = { +$jit.json = { /* Method: prune diff --git a/Source/Graph/Graph.js b/Source/Graph/Graph.js index 9529662..0203e9c 100644 --- a/Source/Graph/Graph.js +++ b/Source/Graph/Graph.js @@ -46,7 +46,7 @@ */ -this.Graph = new Class({ +var Graph = new Class({ initialize: function(opt, Node, Edge) { var innerOptions = { diff --git a/Source/Visualizations/ForceDirected.js b/Source/Visualizations/ForceDirected.js index 0d14de8..320c19d 100644 --- a/Source/Visualizations/ForceDirected.js +++ b/Source/Visualizations/ForceDirected.js @@ -144,8 +144,13 @@ $jit.ForceDirected = new Class( { "Fx", "Tips", "NodeStyles", "Controller"), config, controller); var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; - this.canvas = new Canvas(canvasConfig); + if(canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { + this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } this.graphOptions = { 'complex': true, diff --git a/Source/Visualizations/Hypertree.js b/Source/Visualizations/Hypertree.js index 1b38faa..f3a5121 100644 --- a/Source/Visualizations/Hypertree.js +++ b/Source/Visualizations/Hypertree.js @@ -255,8 +255,13 @@ $jit.Hypertree = new Class( { "Fx", "Tips", "NodeStyles", "Controller"), config, controller); var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; - this.canvas = new Canvas(canvasConfig); + if(canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { + this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } this.graphOptions = { 'complex': false, diff --git a/Source/Visualizations/RGraph.js b/Source/Visualizations/RGraph.js index 6d82c3a..aea2dc3 100644 --- a/Source/Visualizations/RGraph.js +++ b/Source/Visualizations/RGraph.js @@ -153,8 +153,13 @@ $jit.RGraph = new Class( { "Fx", "Controller", "Tips", "NodeStyles"), config, controller); var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; - this.canvas = new Canvas(canvasConfig); + if(canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { + this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } this.graphOptions = { 'complex': false, diff --git a/Source/Visualizations/Spacetree.js b/Source/Visualizations/Spacetree.js index 987c705..394c3e0 100644 --- a/Source/Visualizations/Spacetree.js +++ b/Source/Visualizations/Spacetree.js @@ -221,8 +221,14 @@ $jit.ST= (function() { "Tips", "NodeStyles"), config, controller); var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; - this.canvas = new Canvas(canvasConfig); + if(canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { + this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } + this.graphOptions = { 'complex': true }; diff --git a/Source/Visualizations/Sunburst.js b/Source/Visualizations/Sunburst.js index d0e0510..6a1e235 100644 --- a/Source/Visualizations/Sunburst.js +++ b/Source/Visualizations/Sunburst.js @@ -157,8 +157,13 @@ $jit.Sunburst = new Class({ "Fx", "Tips", "NodeStyles", "Controller"), config, controller); var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; - this.canvas = new Canvas(canvasConfig); + if(canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { + this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } this.graphOptions = { 'complex': false, @@ -389,7 +394,7 @@ $jit.Sunburst.$extend = true; */ Sunburst.Label.Native = new Class( { - Extends: Graph.Label.Native, + Implements: Graph.Label.Native, initialize: function(viz) { this.viz = viz; @@ -644,9 +649,9 @@ $jit.Sunburst.$extend = true; var ctx = canvas.getCtx(); ctx.moveTo(0, 0); + ctx.beginPath(); ctx.arc(0, 0, polarNode.rho, begin, end, false); ctx.arc(0, 0, polarNode.rho + ldist, end, begin, true); - ctx.beginPath(); ctx.moveTo(p1coord.x, p1coord.y); ctx.lineTo(p4coord.x, p4coord.y); ctx.moveTo(p2coord.x, p2coord.y); diff --git a/Source/Visualizations/Treemap.js b/Source/Visualizations/Treemap.js index 477718a..55d61ee 100644 --- a/Source/Visualizations/Treemap.js +++ b/Source/Visualizations/Treemap.js @@ -1,462 +1,474 @@ $jit.TM = {}; +var TM = $jit.TM; + $jit.TM.$extend = true; -(function(TM) { +TM.Base = { + layout: { + orientation: "h", + vertical: function(){ + return this.orientation == "v"; + }, + horizontal: function(){ + return this.orientation == "h"; + }, + change: function(){ + this.orientation = this.vertical()? "h" : "v"; + } + }, - TM.Base = { - layout: { + initialize: function(controller){ + var config = { orientation: "h", - vertical: function() { - return this.orientation == "v"; + titleHeight: 13, + offset: 2, + levelsToShow: 3, + constrained: false, + addLeftClickHandler: false, + addRightClickHandler: false, + selectPathOnHover: false, + withLabels: true, + Node: { + type: 'rectangle', + overridable: true }, - horizontal: function() { - return this.orientation == "h"; + Edge: { + type: 'none' }, - change: function() { - this.orientation = this.vertical() ? "h" : "v"; - } - }, - - initialize: function(controller) { - var config = { - orientation: "h", - titleHeight: 13, - offset: 2, - levelsToShow: 3, - constrained: false, - addLeftClickHandler: false, - addRightClickHandler: false, - selectPathOnHover: false, - withLabels: true, - Node: { - type: 'rectangle', - overridable: true - }, - Edge: { - type: 'none' - }, - duration: 700, - fps: 25 - }; - - this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge", - "Fx", "Controller", "Tips", "NodeStyles"), config, controller); - this.layout.orientation = this.config.orientation; - - var canvasConfig = this.config; - this.config.labelContainer = canvasConfig.injectInto + '-label'; + duration: 700, + fps: 25 + }; + + this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge", + "Fx", "Controller", "Tips", "NodeStyles"), config, controller); + this.layout.orientation = this.config.orientation; + + var canvasConfig = this.config; + if (canvasConfig.useCanvas) { + this.canvas = canvasConfig.useCanvas; + this.config.labelContainer = this.canvas.id + '-label'; + } else { this.canvas = new Canvas(canvasConfig); + this.config.labelContainer = canvasConfig.injectInto + '-label'; + } - this.graphOptions = { - 'complex': true, - 'Node': { - 'selected': false, - 'exist': true, - 'drawn': true - } - }; - this.graph = new Graph(this.graphOptions, this.config.Node, - this.config.Edge); - this.labels = new TM.Label[canvasConfig.labels](this); - this.fx = new TM.Plot(this); - this.op = new TM.Op(this); - this.group = new TM.Group(this); - this.clickedNode = null; - // initialize extras - this.initializeExtras(); - }, - - refresh: function() { - this.compute(); - this.plot(); - }, + this.graphOptions = { + 'complex': true, + 'Node': { + 'selected': false, + 'exist': true, + 'drawn': true + } + }; + this.graph = new Graph(this.graphOptions, this.config.Node, + this.config.Edge); + this.labels = new TM.Label[canvasConfig.labels](this); + this.fx = new TM.Plot(this); + this.op = new TM.Op(this); + this.group = new TM.Group(this); + this.clickedNode = null; + // initialize extras + this.initializeExtras(); + }, + + refresh: function(){ + this.compute(); + this.plot(); + }, + + plot: function(){ + this.fx.plot(this.config); + }, + + leaf: function(n){ + return Graph.Util.getSubnodes(n, [ + 1, 1 + ], "ignore").length == 0; + }, + + enter: function(n){ + this.view(n.id); + }, + + onLeftClick: function(n){ + this.enter(n); + }, + + out: function(){ + var GUtil = Graph.Util, parents = GUtil.getParents(this.graph + .getNode(this.root)); + if (parents.length > 0) { + var parent = parents[0]; + if (this.controller.request) + this.op.prune(parent, this.config.levelsToShow); + this.view(parent.id); + } + }, + + onRightClick: function(){ + this.out(); + }, + + view: function(id){ + var config = this.config, that = this; + var rootNode = this.graph.getNode(this.root); + var clickedNode = this.graph.getNode(id); + var post = { + onComplete: function(){ + that.root = rootNode; + that.clickedNode = clickedNode; + that.plot(); + } + }; - plot: function() { - this.fx.plot(this.config); - }, + if (this.controller.request) { + this.requestNodes(clickedNode, post); + } else { + post.onComplete(); + } + }, + + requestNodes: function(node, onComplete){ + var handler = $.merge(this.controller, onComplete), lev = this.config.levelsToShow, GUtil = Graph.Util; + if (handler.request) { + var leaves = [], d = node._depth; + GUtil.eachLevel(node, 0, lev, function(n){ + if (n.drawn && !GUtil.anySubnode(n)) { + leaves.push(n); + n._level = lev - (n._depth - d); + } + }); + this.group.requestNodes(leaves, handler); + } else { + handler.onComplete(); + } + }, - leaf: function(n) { - return Graph.Util.getSubnodes(n, [ 1, 1 ], "ignore").length == 0; - }, + selectPath: function(node){ + var GUtil = Graph.Util, that = this; + GUtil.eachNode(this.graph, function(n){ + n.selected = false; + }); + function path(node){ + if (node == null || node.selected) + return; + node.selected = true; + $.each(that.group.getSiblings( [ + node + ])[node.id], function(n){ + n.exist = true; + n.drawn = true; + }); + var parents = GUtil.getParents(node); + parents = (parents.length > 0)? parents[0] : null; + path(parents); + } + path(node); + } +}; - enter: function(n) { - this.view(n.id); - }, +TM.Op = new Class( { + Implements: Graph.Op, - onLeftClick: function(n) { - this.enter(n); - }, + initialize: function(viz){ + this.viz = viz; + } +}); - out: function() { - var GUtil = Graph.Util, parents = GUtil.getParents(this.graph - .getNode(this.root)); - if (parents.length > 0) { - var parent = parents[0]; - if (this.controller.request) - this.op.prune(parent, this.config.levelsToShow); - this.view(parent.id); - } - }, +/* - onRightClick: function() { - this.out(); - }, +Performs operations on group of nodes. - view: function(id) { - var config = this.config, that = this; - var rootNode = this.graph.getNode(this.root); - var clickedNode = this.graph.getNode(id); - var post = { - onComplete: function() { - that.root = rootNode; - that.clickedNode = clickedNode; - that.plot(); - } - }; +*/ +TM.Group = new Class( { - if (this.controller.request) { - this.requestNodes(clickedNode, post); - } else { - post.onComplete(); - } - }, + initialize: function(viz){ + this.viz = viz; + this.canvas = viz.canvas; + this.config = viz.config; + }, - requestNodes: function(node, onComplete) { - var handler = $.merge(this.controller, onComplete), lev = this.config.levelsToShow, GUtil = Graph.Util; - if (handler.request) { - var leaves = [], d = node._depth; - GUtil.eachLevel(node, 0, lev, function(n) { - if (n.drawn && !GUtil.anySubnode(n)) { - leaves.push(n); - n._level = lev - (n._depth - d); + /* + + Calls the request method on the controller to request a subtree for each node. + */ + requestNodes: function(nodes, controller){ + var counter = 0, len = nodes.length, nodeSelected = {}; + var complete = function(){ + controller.onComplete(); + }; + var viz = this.viz; + if (len == 0) + complete(); + for ( var i = 0; i < len; i++) { + nodeSelected[nodes[i].id] = nodes[i]; + controller.request(nodes[i].id, nodes[i]._level, { + onComplete: function(nodeId, data){ + if (data && data.children) { + data.id = nodeId; + viz.op.sum(data, { + type: 'nothing' + }); } - }); - this.group.requestNodes(leaves, handler); - } else { - handler.onComplete(); - } - }, - - selectPath: function(node) { - var GUtil = Graph.Util, that = this; - GUtil.eachNode(this.graph, function(n) { - n.selected = false; + if (++counter == len) { + Graph.Util.computeLevels(viz.graph, viz.root, 0); + complete(); + } + } }); - function path(node) { - if (node == null || node.selected) - return; - node.selected = true; - $.each(that.group.getSiblings( [ node ])[node.id], function(n) { - n.exist = true; - n.drawn = true; - }); - var parents = GUtil.getParents(node); - parents = (parents.length > 0) ? parents[0] : null; - path(parents); - } - ; - path(node); } - }; + } +}); + +TM.Plot = new Class( { + + Implements: Graph.Plot, + + initialize: function(viz){ + this.viz = viz; + this.config = viz.config; + this.node = this.config.Node; + this.edge = this.config.Edge; + this.animation = new Animation; + this.nodeTypes = new TM.Plot.NodeTypes; + this.edgeTypes = new TM.Plot.EdgeTypes; + this.labels = viz.labels; + }, + + plot: function(opt, animating){ + var viz = this.viz, graph = viz.graph; + this.plotTree(graph.getNode(viz.root), $.merge(opt, { + 'withLabels': true, + 'hideLabels': !!animating, + 'plotSubtree': function(n, ch){ + return true; + } + }), animating); + } +}); - TM.Op = new Class( { - Implements: Graph.Op, +/* +Object: TM.Label - initialize: function(viz) { - this.viz = viz; - } - }); +Label interface implementation for the ST - /* +See Also: - Performs operations on group of nodes. +, , - */ - TM.Group = new Class( { +*/ +TM.Label = {}; - initialize: function(viz) { - this.viz = viz; - this.canvas = viz.canvas; - this.config = viz.config; - }, +/* + Class: ST.Label.Native - /* - - Calls the request method on the controller to request a subtree for each node. - */ - requestNodes: function(nodes, controller) { - var counter = 0, len = nodes.length, nodeSelected = {}; - var complete = function() { - controller.onComplete(); - }; - var viz = this.viz; - if (len == 0) - complete(); - for ( var i = 0; i < len; i++) { - nodeSelected[nodes[i].id] = nodes[i]; - controller.request(nodes[i].id, nodes[i]._level, { - onComplete: function(nodeId, data) { - if (data && data.children) { - data.id = nodeId; - viz.op.sum(data, { - type: 'nothing' - }); - } - if (++counter == len) { - Graph.Util.computeLevels(viz.graph, viz.root, 0); - complete(); - } - } - }); - } - } - }); + Implements labels natively, using the Canvas text API. - TM.Plot = new Class( { + Extends: - Implements: Graph.Plot, + - initialize: function(viz) { - this.viz = viz; - this.config = viz.config; - this.node = this.config.Node; - this.edge = this.config.Edge; - this.animation = new Animation; - this.nodeTypes = new TM.Plot.NodeTypes; - this.edgeTypes = new TM.Plot.EdgeTypes; - this.labels = viz.labels; - }, + See also: - plot: function(opt, animating) { - var viz = this.viz, graph = viz.graph; - this.plotTree(graph.getNode(viz.root), $.merge(opt, { - 'withLabels': true, - 'hideLabels': !!animating, - 'plotSubtree': function(n, ch) { - return true; - } - }), animating); - } - }); + , , , , , , . +*/ +TM.Label.Native = new Class( { + Implements: Graph.Label.Native, /* - Object: TM.Label - - Label interface implementation for the ST + Method: plotLabel + + Plots a label for a given node. - See Also: + Parameters: - , , + canvas - A instance. + node - A . + controller - A configuration object. See also , , . */ - TM.Label = {}; + plotLabel: function(canvas, node, controller){ + var ctx = canvas.getCtx(); + var coord = node.pos.getc(true); + ctx.save(); + ctx.fillStyle = ctx.strokeStyle = '#000'; + ctx.fillText(node.name, coord.x, coord.y); + ctx.restore(); + } +}); - /* - Class: ST.Label.Native +/* + Class: ST.Label.SVG - Implements labels natively, using the Canvas text API. + Implements labels using SVG (currently not supported in IE). - Extends: + Extends: - + , - See also: + See also: - , , , , , , . + , , , , , , . - */ - TM.Label.Native = new Class( { - Implements: Graph.Label.Native, - /* - Method: plotLabel - - Plots a label for a given node. +*/ +TM.Label.SVG = new Class( { + Implements: Graph.Label.SVG, - Parameters: + initialize: function(viz){ + this.viz = viz; + }, - canvas - A instance. - node - A . - controller - A configuration object. See also , , . + /* + Method: placeLabel - */ - plotLabel: function(canvas, node, controller) { - var ctx = canvas.getCtx(); - var coord = node.pos.getc(true); - ctx.save(); - ctx.fillStyle = ctx.strokeStyle = '#000'; - ctx.fillText(node.name, coord.x, coord.y); - ctx.restore(); - } - }); - - /* - Class: ST.Label.SVG + Overrides abstract method placeLabel in . - Implements labels using SVG (currently not supported in IE). + Parameters: - Extends: + tag - A DOM label element. + node - A . + controller - A configuration/controller object passed to the visualization. + + */ + placeLabel: function(tag, node, controller){ + var pos = node.pos.getc(true), canvas = this.viz.canvas; + var radius = canvas.getSize(); + var labelPos = { + x: Math.round(pos.x + radius.width / 2), + y: Math.round(pos.y + radius.height / 2) + }; + tag.setAttribute('x', labelPos.x); + tag.setAttribute('y', labelPos.y); - , + controller.onPlaceLabel(tag, node); + } +}); - See also: +/* + Class: ST.Label.HTML - , , , , , , . + Implements labels using plain old HTML. - */ - TM.Label.SVG = new Class( { - Implements: Graph.Label.SVG, + Extends: - initialize: function(viz) { - this.viz = viz; - }, + , - /* - Method: placeLabel - - Overrides abstract method placeLabel in . - - Parameters: - - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), canvas = this.viz.canvas; - var radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x + radius.width / 2), - y: Math.round(pos.y + radius.height / 2) - }; - tag.setAttribute('x', labelPos.x); - tag.setAttribute('y', labelPos.y); - - controller.onPlaceLabel(tag, node); - } - }); + See also: - /* - Class: ST.Label.HTML + , , , , , , . - Implements labels using plain old HTML. +*/ +TM.Label.HTML = new Class( { + Implements: Graph.Label.HTML, - Extends: + initialize: function(viz){ + this.viz = viz; + }, - , + /* + Method: placeLabel - See also: + Overrides abstract method placeLabel in . - , , , , , , . + Parameters: + tag - A DOM label element. + node - A . + controller - A configuration/controller object passed to the visualization. + */ - TM.Label.HTML = new Class( { - Implements: Graph.Label.HTML, + placeLabel: function(tag, node, controller){ + var pos = node.pos.getc(true), canvas = this.viz.canvas; + var radius = canvas.getSize(); + var labelPos = { + x: Math.round(pos.x + radius.width / 2), + y: Math.round(pos.y + radius.height / 2) + }; - initialize: function(viz) { - this.viz = viz; - }, + var style = tag.style; + style.left = labelPos.x + 'px'; + style.top = labelPos.y + 'px'; + style.display = ''; - /* - Method: placeLabel + controller.onPlaceLabel(tag, node); + } +}); - Overrides abstract method placeLabel in . +/* +Class: ST.Plot.NodeTypes - Parameters: +Here are implemented all kinds of node rendering functions. +Rendering functions implemented are 'none', 'circle', 'ellipse', 'rectangle' and 'square'. - tag - A DOM label element. - node - A . - controller - A configuration/controller object passed to the visualization. - - */ - placeLabel: function(tag, node, controller) { - var pos = node.pos.getc(true), canvas = this.viz.canvas; - var radius = canvas.getSize(); - var labelPos = { - x: Math.round(pos.x + radius.width / 2), - y: Math.round(pos.y + radius.height / 2) - }; +You can add new Node types by implementing a new method in this class - var style = tag.style; - style.left = labelPos.x + 'px'; - style.top = labelPos.y + 'px'; - style.display = ''; +Example: - controller.onPlaceLabel(tag, node); +(start code js) + ST.Plot.NodeTypes.implement({ + 'newnodetypename': function(node, canvas) { + //Render my node here. } }); - - /* - Class: ST.Plot.NodeTypes - - Here are implemented all kinds of node rendering functions. - Rendering functions implemented are 'none', 'circle', 'ellipse', 'rectangle' and 'square'. - - You can add new Node types by implementing a new method in this class - - Example: - - (start code js) - ST.Plot.NodeTypes.implement({ - 'newnodetypename': function(node, canvas) { - //Render my node here. +(end code) + +*/ +TM.Plot.NodeTypes = new Class( { + 'none': { + 'render': $.empty + }, + + 'rectangle': { + 'render': function(node, canvas){ + var leaf = this.viz.leaf(node); + var config = this.viz.config; + var offst = config.offset; + var titleHeight = config.titleHeight; + var pos = node.pos.getc(true); + var width = node.getData('width'); + var height = node.getData('height'); + var ctx = canvas.getCtx(); + var posx = pos.x + offst / 2, posy = pos.y + offst / 2; + if (leaf) { + var lg = ctx.createLinearGradient(posx, posy, posx + width - offst, + posy + height - offst); + lg.addColorStop(0, '#555'); + lg.addColorStop(1, '#ccc'); + ctx.fillStyle = lg; + ctx.fillRect(posx, posy, width - offst, height - offst); + } else { + var lg = ctx.createLinearGradient(posx, posy, posx + width - offst, + posy + titleHeight); + lg.addColorStop(0, '#111'); + lg.addColorStop(1, '#444'); + ctx.fillStyle = lg; + ctx.fillRect(pos.x + offst / 2, pos.y + offst / 2, width - offst, + titleHeight); } - }); - (end code) - - */ - TM.Plot.NodeTypes = new Class( { - 'none': { - 'render': $.empty }, - - 'rectangle': { - 'render': function(node, canvas) { - var leaf = this.viz.leaf(node); - var config = this.viz.config; - var offst = config.offset; - var titleHeight = config.titleHeight; - var pos = node.pos.getc(true); - var width = node.getData('width'); - var height = node.getData('height'); - var ctx = canvas.getCtx(); - var posx = pos.x + offst / 2, posy = pos.y + offst / 2; - if (leaf) { - var lg = ctx.createLinearGradient(posx, posy, posx + width - offst, - posy + height - offst); - lg.addColorStop(0, '#555'); - lg.addColorStop(1, '#ccc'); - ctx.fillStyle = lg; - ctx.fillRect(posx, posy, width - offst, height - offst); - } else { - var lg = ctx.createLinearGradient(posx, posy, posx + width - offst, - posy + titleHeight); - lg.addColorStop(0, '#111'); - lg.addColorStop(1, '#444'); - ctx.fillStyle = lg; - ctx.fillRect(pos.x + offst / 2, pos.y + offst / 2, width - offst, - titleHeight); - } - }, - 'contains': $.lambda(false) - } - }); - - TM.Plot.EdgeTypes = new Class( { - 'none': $.empty - }); - - TM.SliceAndDice = new Class( { - Implements: [ Loader, Extras, TM.Base, Layouts.TM.SliceAndDice ] - }); - - TM.Squarified = new Class( { - Implements: [ Loader, Extras, TM.Base, Layouts.TM.Squarified ] - }); - - TM.Strip = new Class( { - Implements: [ Loader, Extras, TM.Base, Layouts.TM.Strip ] - }); - -})($jit.TM); + 'contains': $.lambda(false) + } +}); + +TM.Plot.EdgeTypes = new Class( { + 'none': $.empty +}); + +TM.SliceAndDice = new Class( { + Implements: [ + Loader, Extras, TM.Base, Layouts.TM.SliceAndDice + ] +}); + +TM.Squarified = new Class( { + Implements: [ + Loader, Extras, TM.Base, Layouts.TM.Squarified + ] +}); + +TM.Strip = new Class( { + Implements: [ + Loader, Extras, TM.Base, Layouts.TM.Strip + ] +}); diff --git a/Tests/Other/test2.js b/Tests/Other/test2.js index 56cfc36..03ecb3e 100644 --- a/Tests/Other/test2.js +++ b/Tests/Other/test2.js @@ -235,6 +235,7 @@ function init() { //init rgraph var rgraph = new $jit.RGraph({ + 'useCanvas': pie.canvas, //Add node/edge styles and set //overridable=true if you want your //styles to be individually overriden diff --git a/Tests/Other/test3.js b/Tests/Other/test3.js index 96bb07b..8ae733a 100644 --- a/Tests/Other/test3.js +++ b/Tests/Other/test3.js @@ -146,13 +146,10 @@ function init() { }; //end - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; - //init nodetypes //Here we implement custom node rendering types for the RGraph //Using this feature requires some javascript and canvas experience. - RGraph.Plot.NodeTypes.implement({ + $jit.RGraph.Plot.NodeTypes.implement({ //This node type is used for plotting pie-chart slices as nodes 'shortnodepie': { 'render': function(node, canvas) { @@ -160,7 +157,7 @@ function init() { var span = node.angleSpan, begin = span.begin, end = span.end; var polarNode = node.pos.getp(true); - var polar = new Polar(polarNode.rho, begin); + var polar = new $jit.Polar(polarNode.rho, begin); var p1coord = polar.getc(true); polar.theta = end; @@ -190,7 +187,7 @@ function init() { } }); - ST.Plot.NodeTypes.implement({ + $jit.ST.Plot.NodeTypes.implement({ //Create a new node type that renders an entire RGraph visualization 'piechart': { 'render': function(node, canvas, animating) { @@ -205,12 +202,8 @@ function init() { //end //init pie - var pie = new RGraph({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h, - }, + var pie = new $jit.RGraph({ + 'injectInto': 'infovis', //Add node/edge styles and set //overridable=true if you want your //styles to be individually overriden @@ -234,7 +227,8 @@ function init() { //end //init st - var st = new ST(canvas, { + var st = new $jit.ST({ + 'useCanvas': pie.canvas, orientation: 'bottom', //Add node/edge styles Node: { @@ -276,7 +270,7 @@ function init() { //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(0, 200), "startPos"); + st.geom.translate(new $jit.Complex(0, 200), "startPos"); //Emulate a click on the root node. st.onClick(st.root, { Move: { diff --git a/Tests/Other/test4.js b/Tests/Other/test4.js index b1c57bc..d8952b9 100644 --- a/Tests/Other/test4.js +++ b/Tests/Other/test4.js @@ -360,37 +360,30 @@ function init(){ }; //end - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; - //init RGraph - var rgraph = new RGraph({ - Canvas: { + var rgraph = new $jit.RGraph({ //Where to append the canvas widget - 'injectInto': infovis, - 'width': w, - 'height': h, - 'labels': 'SVG', - //Optional: create a background canvas and plot - //concentric circles in it. - 'backgroundCanvas': { - 'styles': { - 'strokeStyle': '#555' - }, - 'impl': { - 'init': function(){}, - 'plot': function(canvas, ctx){ - var times = 6, d = 100; - var pi2 = Math.PI * 2; - for (var i = 1; i <= times; i++) { - ctx.beginPath(); - ctx.arc(0, 0, i * d, 0, pi2, true); - ctx.stroke(); - ctx.closePath(); - } - } - } - } + 'injectInto': 'infovis', + 'labels': 'SVG', + //Optional: create a background canvas and plot + //concentric circles in it. + 'backgroundCanvas': { + 'styles': { + 'strokeStyle': '#555' + }, + 'impl': { + 'init': function(){}, + 'plot': function(canvas, ctx){ + var times = 6, d = 100; + var pi2 = Math.PI * 2; + for (var i = 1; i <= times; i++) { + ctx.beginPath(); + ctx.arc(0, 0, i * d, 0, pi2, true); + ctx.stroke(); + ctx.closePath(); + } + } + } }, //Set Node and Edge colors. Node: { diff --git a/Tests/Spacetree/test1.js b/Tests/Spacetree/test1.js index b14236d..e59d9e6 100644 --- a/Tests/Spacetree/test1.js +++ b/Tests/Spacetree/test1.js @@ -1,19 +1,13 @@ function init(){ - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; var json = Feeder.makeTree(); //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', duration: 800, orientation: 'left', fps: 35, - transition: Trans.Quad.easeInOut, + transition: $jit.Trans.Quad.easeInOut, subtreeOffset: 8, siblingOffset: 5, levelDistance: 50, @@ -78,7 +72,7 @@ function init(){ //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(-200, 0), "pos"); + st.geom.translate(new $jit.Complex(-200, 0), "pos"); //Emulate a click on the root node. st.onClick(st.root); diff --git a/Tests/Spacetree/test10.js b/Tests/Spacetree/test10.js index 1894dd3..79e2dc0 100644 --- a/Tests/Spacetree/test10.js +++ b/Tests/Spacetree/test10.js @@ -740,34 +740,28 @@ function init(){ for(var i=0; i < len; i++) { if(i < len / 2) { arr[i].data.$orn = 'left'; - TreeUtil.each(arr[i], function(n) { + $jit.json.each(arr[i], function(n) { n.data.$orn = 'left'; }); } else { arr[i].data.$orn = 'right'; - TreeUtil.each(arr[i], function(n) { + $jit.json.each(arr[i], function(n) { n.data.$orn = 'right'; }); } } //end - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; //init st //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', //multitree multitree: true, //set duration for the animation duration: 800, //set animation transition type - transition: Trans.Quart.easeInOut, + transition: $jit.Trans.Quart.easeInOut, //set distance between node and its children levelDistance: 50, //set node and edge styles diff --git a/Tests/Spacetree/test11.js b/Tests/Spacetree/test11.js index f17632d..def07bf 100644 --- a/Tests/Spacetree/test11.js +++ b/Tests/Spacetree/test11.js @@ -5,20 +5,14 @@ function init(){ //init data var json = Feeder.makeTree(); //end - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; //init st //Create a new ST instance - var st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + var st = new $jit.ST({ + 'injectInto': 'infovis', //set duration for the animation duration: 800, //set animation transition type - transition: Trans.Quart.easeInOut, + transition: $jit.Trans.Quart.easeInOut, //set distance between node and its children levelDistance: 50, //set node and edge styles diff --git a/Tests/Spacetree/test2.js b/Tests/Spacetree/test2.js index 6c7c545..86baa50 100644 --- a/Tests/Spacetree/test2.js +++ b/Tests/Spacetree/test2.js @@ -1,15 +1,10 @@ function init(){ - var infovis = document.getElementById('infovis'); - var w = infovis.offsetWidth, h = infovis.offsetHeight; Feeder.p.color = false; var json = Feeder.makeTree(); //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', + Node: { overridable: true }, @@ -40,7 +35,7 @@ function init(){ //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(-200, 0), "pos"); + st.geom.translate(new $jit.Complex(-200, 0), "pos"); //Emulate a click on the root node. // Tree.Plot.plot(st.tree, st.canvas); st.onClick(st.root); diff --git a/Tests/Spacetree/test3.js b/Tests/Spacetree/test3.js index 76abd95..a6bd3b5 100644 --- a/Tests/Spacetree/test3.js +++ b/Tests/Spacetree/test3.js @@ -4,12 +4,11 @@ function init(){ Feeder.p.color = false; var json = Feeder.makeTree(); //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', + 'width': w, + 'height': h, + Node: { overridable:true }, @@ -38,7 +37,7 @@ function init(){ //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(-200, 0), "pos"); + st.geom.translate(new $jit.Complex(-200, 0), "pos"); //Emulate a click on the root node. st.onClick(st.root); diff --git a/Tests/Spacetree/test4.js b/Tests/Spacetree/test4.js index 1fc19d7..f7982ad 100644 --- a/Tests/Spacetree/test4.js +++ b/Tests/Spacetree/test4.js @@ -16,12 +16,10 @@ function init(){ 'children': [] }].concat(json.children); //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', + 'width': w, + 'height': h, levelDistance: 50, Node: { overridable: false, @@ -57,7 +55,7 @@ function init(){ //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(-200, 0), "pos"); + st.geom.translate(new $jit.Complex(-200, 0), "pos"); //Emulate a click on the root node. // Tree.Plot.plot(st.tree, st.canvas); st.onClick(st.root); diff --git a/Tests/Spacetree/test5.js b/Tests/Spacetree/test5.js index b748757..fc89444 100644 --- a/Tests/Spacetree/test5.js +++ b/Tests/Spacetree/test5.js @@ -10,12 +10,11 @@ function init(){ counter: 0 }); //Create a new ST instance - st = new ST({ - Canvas: { - 'injectInto': 'infovis', - 'width': w, - 'height': h - }, + st = new $jit.ST({ + 'injectInto': 'infovis', + 'width': w, + 'height': h, + orientation: "left", levelDistance: 50, Node: { @@ -76,7 +75,7 @@ function init(){ //compute node positions and layout st.compute(); //optional: make a translation of the tree - st.geom.translate(new Complex(-200, 0), "pos"); + st.geom.translate(new $jit.Complex(-200, 0), "pos"); //Emulate a click on the root node. // Tree.Plot.plot(st.tree, st.canvas); st.onClick(st.root); diff --git a/Tests/Spacetree/test6.js b/Tests/Spacetree/test6.js index da4bf3c..7597614 100644 --- a/Tests/Spacetree/test6.js +++ b/Tests/Spacetree/test6.js @@ -2,7 +2,7 @@ function init(){ var infovis = document.getElementById('infovis'); var w = infovis.offsetWidth, h = infovis.offsetHeight; var json = Feeder.makeTree(); - TreeUtil.each(json, function(n) { + $jit.json.each(json, function(n) { var num = Math.random() * 10 + 1; for(var i=0, text="text "; i