Lively Kernel - ProtoVis Demo

 0)) ? create(val) : new pv.Dom.Node(null)
					);
					subNode.nodeName = val.name;
				});
			return node;
		}

		var root = create(pv.dom(newData).$map);
		root.nodeName = newData.name || 'root';
		root.nodeValue = null;

		this._rootNode = root;
	},

	createSubNodes: function(node) {
		var subNode = node.appendChild(new pv.Dom.Node());
		subNode.nodeName = 'SubNode';

		node.nodeValue = null;
	},

	draw: function() {
		var self = this;

		var	w = (this._LKparent && this._LKparent.getExtent()) ? this._LKparent.getExtent().x - 18 : 400,
			h = (this._LKparent && this._LKparent.getExtent()) ? this._LKparent.getExtent().y - 18 : 650;

		var root = this._rootNode;

		var vis = new pv.Panel()
			.width(w)
			.height(h)
			.margin(5)
			.fillStyle("white")
			.event("mousedown", pv.Behavior.pan())
			.event("mousewheel", pv.Behavior.zoom());

		var partition = vis.add(pv.Layout.Partition.Fill)
			.nodes(function() { return root.nodes() })
			.size(function(d) { return d.firstChild ? 0 : 1; })
			.order("descending")
			.orient("radial");

		partition.node.add(pv.Wedge)
			.fillStyle(pv.Colors.category19().by(function(d) {
				if (d.toggled)
					return d.parentNode && d.parentNode.parentNode && d.parentNode.parentNode.nodeName;
				else
					return d.parentNode && d.parentNode.nodeName;
			}))
			.strokeStyle("#fff")
			.lineWidth(.5)
			.event("click", function() {
				selectedNode = this;
				if (this.data().parentNode)
					return toggle(this.data())
			});

		partition.label.add(pv.Label)
			.visible(function(d) { return d.angle * d.outerRadius >= 6; })
			.font(function(d) { return (d.firstChild || d.toggled ? 'bold ' : 'italic ') + '14px Helvetica' });

		function toggle(n) {
			n.toggle(pv.event.altKey);
			curNode = n;
			return partition.reset().root;
		}

		root.nodes().each(function(ea, i) {
			if (i != 0)
				ea.toggle();
		});

		return vis;
	},
});

ProtoVisDrawing.subclass('DynamicTreeDiagram', {
	initialize: function($super, parent) {
		$super();
		this._LKparent = parent;
		this.setData({});
		this.isNative = false;
	},

	removeCanvas: function () {
		var c = this.canvas();
		if (!c || !c.parentNode) return;
		c.parentNode.removeChild(c);
	},

	render: function($super) {
		$super();

		var self = this;
		function toLively() {
			var drawingElems = [];
			var importer = new Importer();
			var shapes = [];

			function allChildNodesFrom(node, parent) {
				$A(node.childNodes).each(function(ea) {
					var shape = lively.scene.Shape.importFromNode(importer, ea);
					if (shape) {
						if (parent)
							parent.add(shape);
						else
							shapes.push(shape);
					}

					drawingElems.push(ea);
					allChildNodesFrom(ea, (shape instanceof lively.scene.Group ? shape : undefined));
				});
			}
			allChildNodesFrom(self.vis.$canvas[0].firstChild);

			var diagMorph = new Morph(new lively.scene.Group());

			diagMorph.shape.setFill(null);
			diagMorph.shape.setStroke(null);
			diagMorph.shape.rawNode.setAttributeNS(null, 'stroke-width', '1.5');

			diagMorph.shape.setContent(shapes);
			if (self._LKparent)
				self._LKparent.addMorph(diagMorph);
			else
				diagMorph.openInWorld();
			self.removeCanvas();
		}

		this.isNative && this._LKparent && toLively();

		if (this._LKparent && this._LKparent.getPosition) {
			this.setPosition(this._LKparent.getPosition().addPt(pt(9,9)));
		}
	},

	setData: function(newData) {
		function create(data) {
			var node = new pv.Dom.Node;
			if (data.children)
				data.children.each(function(val) {
					var subNode = node.appendChild(
						(val.children.length && (val.children.length > 0)) ? create(val) : new pv.Dom.Node(null)
					);
					subNode.nodeName = val.name;
				});
			return node;
		}

		var root = create(pv.dom(newData).$map);
		root.nodeName = newData.name || 'root';
		root.nodeValue = null;

		this._rootNode = root;
	},

	createSubNodes: function(node) {
		var subNode = node.appendChild(new pv.Dom.Node());
		subNode.nodeName = 'SubNode';

		node.nodeValue = null;
	},

	draw: function() {
		var self = this;

		var	w = (this._LKparent && this._LKparent.getExtent()) ? this._LKparent.getExtent().x - 18 : 400,
			h = (this._LKparent && this._LKparent.getExtent()) ? this._LKparent.getExtent().y - 18 : 650;

		var root = this._rootNode.sort(function(a, b) {
			return pv.naturalOrder(a.nodeName, b.nodeName)
		});;

		var vis = new pv.Panel()
			.width(w)
			.height(h)
			.margin(0)
			.fillStyle("white")
			.event("mousedown", pv.Behavior.pan())
			.event("mousewheel", pv.Behavior.zoom());

		var layout = vis.add(pv.Layout.Indent)
			.nodes(function() { return root.nodes() })
			.depth(12)
			.breadth(18);

		layout.link.add(pv.Line);

		var node = layout.node.add(pv.Panel)
			.top(function(n) { return n.y - 6 })
			.height(12)
			.right(6)
			.strokeStyle(null)
			.events("all")
			.event("mousedown", toggle);

		node.anchor("left").add(pv.Dot)
			.strokeStyle("#1f77b4")
			.fillStyle(function(n) {
				return n.toggled ? "#1f77b4" : (n.firstChild ? "#aec7e8" : "#ff7f0e");
			})
			.title(function t(d) {
				return d.parentNode ? (t(d.parentNode) + "." + d.nodeName) : d.nodeName;
			})
			.anchor('right').add(pv.Label)
			.text(function(n) { return n.nodeName; })
			.font('14px Helvetica');

		function toggle(n) {
			n.toggle(pv.event.altKey);
			return layout.reset().root;
		}

		root.nodes().each(function(ea) {
			ea.toggle();
		});

		return vis;
	},
});

fabrikFunctionComponent = $morph('classVisualisationTextMorph').getOwnerWidget()
fabrikFunctionComponent.setResult(null);
fabrikFunctionComponent.execute()
]]>

true Demopage:ProtoVis48 Wikicontroltruetrue Morph86falsetruefalsetrue0falsefalse View8falsetruefalsetrue0falsefalse Model7falsetruefalsetrue0falsefalse BoxMorph51falsetruefalsetrue0falsefalse TextMorph7falsetruefalsetrue0falsefalse Widget37falsetruefalsetrue0falsefalse Component7falsetruefalsetrue0falsefalse Node10falsetruefalsetrue0falsefalse295.500005 3nullnulltruefalsefalsenulltruetrue 00.11 true truetrue false nullnull3 nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null-1.5707963267948966nullfalsetruenullfalse nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null-1.5707963267948966nullfalsetruenullfalse nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull nullnullfalsetruenullfalse traverseClass=function(klass){return{id:'node'+klass.name,name:klass.name,data:{"$color":"white","$area":Object.keys(klass.prototype).length},children:klass.directSubclasses().collect(function(ea){returntraverseClass(ea)}),}}vars=this.getClassName();if(s){varclassObj=Global[s.split("")[0]];if(classObj){json=traverseClass(classObj)json.isJSONConformant=truereturnjson}}truetruefalse 21truetruefalsetrue functionf(classname)falsenulltruefalse truefalsenull truefalsenull false nullnullnullnull updateProtoVis(type,config,json)truetruefalsetruetruefalsetrue functionf(json,type,config)falsenulltruefalse truefalsenull truefalsenull truefalsenull truefalsenull false nullnullnullnull //Allclasseswithminimumof10totalsubclassesintheGlobalNamespacereturnObject.allSubclasses().select(function(ea){returnea.allSubclasses().length>5&&Global[ea.name]}).reject(function(ea){return[Relay,Record,Node].include(ea)}).collect(function(ea){returnea.name+""+ea.allSubclasses().length}) 5 && Global[ea.name]\n}).reject(function(ea){return [Relay, Record, Node].include(ea)}).collect(function(ea) {\n\treturn ea.name + \" \" + ea.allSubclasses().length})"]]>truetruefalse 5 && Global[ea.name]\n}).reject(function(ea){return [Relay, Record, Node].include(ea)}).collect(function(ea) {\n\treturn ea.name + \" \" + ea.allSubclasses().length})"]]> 5 && Global[ea.name]\n}).reject(function(ea){return [Relay, Record, Node].include(ea)}).collect(function(ea) {\n\treturn ea.name + \" \" + ea.allSubclasses().length})"]]> 4truetruefalsetrue functionf(input)falsenulltruefalse truefalsenull truefalsenullfalse nullnullnull 5 && Global[ea.name]\n}).reject(function(ea){return [Relay, Record, Node].include(ea)}).collect(function(ea) {\n\treturn ea.name + \" \" + ea.allSubclasses().length})"]]> truefalsenull truefalsenull truefalsenull truenulltrue Treefalsetruefalsetrue0falsefalse Sunburstfalsefalsetruefalsetrue0false281.000005 0nullnulltruefalsefalsenulltruetrue 00.11 true truetrue false nullnull0 JavaScriptProtoVisToolKit17truetruefalsetruetruefalsetruefalse nullnull nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null1.5707963267948966nullfalsetruenullfalse nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null1.5707963267948966nullfalsetruenullfalse nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null1.5707963267948966nullfalsetruenullfalse nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull null1.5707963267948966nullfalsetruenullfalse return['Tree','Sunburst',]2truetruefalsetruetruefalsetrue functionf(input)falsenulltruefalse truefalsenull truefalsenullfalse nullnull return{injectInto:'infovis',background:{CanvasStyles:{strokeStyle:'darkgray'}},Label:{color:'darkblue',type:'Native'},Navigation:{enable:true,panning:true,zooming:5},Node:{color:'#ddeeff'},Edge:{color:'#C17878',lineWidth:1.0},isJSONConformant:true,}24truetruefalsetruetruefalsetrue functionf(input)falsenulltruefalse truefalsenull truefalsenullfalse nullnull truefalsenull truefalsenull truenulltrue nullnulltruenull nulltruenull nullfalsetruenull Fabrikfalsenulltruefalse false false false nullfalsefalsenullnullnullnullfalsetrue null112