Grafoscopio/repository/Grafoscopio/MindMap.class.st

"
I provide support for minmapping Freemind import and d3js export.
In the future I'll plan to support exporting from Grafoscopio notebooks
to javascript enabled web presentations.
"
Class {
	#name : #MindMap,
	#superclass : #Object,
	#category : #'Grafoscopio-Model'
}

{ #category : #'as yet unclassified' }
MindMap class >> d3CSS [
	"I define the nodes geometrical form, their text and the links between them."
	^ ' .node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 3px;
 }

 .node text { font: 12px sans-serif; }

 .link {
   fill: none;
   stroke: #ccc;
   stroke-width: 2px;
 }'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3SVGAppender [
	"I append the SVG working area to the body of our web page and create a group elements 
	(<g>) that will contain the SVG objects (the nodes, text and links)"

	^'var svg = d3.select("body").append("svg")
 .attr("width", width + margin.right + margin.left)
 .attr("height", height + margin.top + margin.bottom)
  .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeDemoData [
	"I'm demo data for the tutorial contain at: https://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/"
	^ 'var treeData = {
    name: "/",
    contents: [
        {
            name: "Applications",
            contents: [
                { name: "Mail.app" },
                { name: "iPhoto.app" },
                { name: "Keynote.app" },
                { name: "iTunes.app" },
                { name: "XCode.app" },
                { name: "Numbers.app" },
                { name: "Pages.app" }
            ]
        },
        {
            name: "System",
            contents: []
        },
        {
            name: "Library",
            contents: [
                {
                    name: "Application Support",
                    contents: [
                        { name: "Adobe" },
                        { name: "Apple" },
                        { name: "Google" },
                        { name: "Microsoft" }
                    ]
                },
                {
                    name: "Languages",
                    contents: [
                        { name: "Ruby" },
                        { name: "Python" },
                        { name: "Javascript" },
                        { name: "C#" }
                    ]
                },
                {
                    name: "Developer",
                    contents: [
                        { name: "4.2" },
                        { name: "4.3" },
                        { name: "5.0" },
                        { name: "Documentation" }
                    ]
                }
            ]
        },
        {
            name: "opt",
            contents: []
        },
        {
            name: "Users",
            contents: [
                { name: "pavanpodila" },
                { name: "admin" },
                { name: "test-user" }
            ]
        }
    ]
};'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeDiagramProperties [
	^ 'var margin = {top: 20, right: 120, bottom: 20, left: 120},
 width = 960 - margin.right - margin.left,
 height = 500 - margin.top - margin.bottom;
 
var i = 0;

var tree = d3.layout.tree()
 .size([height, width]);'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeLinksDrawerFunction [
	^ 'var diagonal = d3.svg.diagonal()
 .projection(function(d) { return [d.y, d.x]; });'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeRootDefinition [
	"For an excellent explanation on whi this, look at:
	http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html"
	^ 'root = treeData[0];'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeUpdater [
	^ 'function update (source) { 
			// Compute the new tree layout.
			var nodes = tree.nodes(root).reverse(),
				links = tree.links(nodes);
				
			// Normalize for fixed-depth.
			nodes.forEach(function(d) { d.y = d.depth * 180 });
			
			// Declare the nodes
			var node = svg.selectAll("g.node")
				.data(nodes, function(d) { return d.id || (d.id = ++i); });
			
			// Enter the nodes.
			var nodeEnter = node.enter().append("g")
				.attr("class", "node")
				.attr("transform", function(d) { 
				 	return "translate(" + d.y + "," + d.x + ")";});
					
			nodeEnter.append("circle")
				.attr("r",10)
				.style("fill", "#fff");
				
			nodeEnter.append("text")
				.attr("x", function (d) { 
				 return d.children || d._children ? -13 : 13; })
				.attr("dy", ".35em")
				.attr("text-anchor", function(d) { 
				 return d.children || d._children ? "end" : "start"; })
				.text(function(d) { return d.name; })
				.style ("fill-opacity", 1);
				
			// Declare the links
			var link = svg.selectAll("path.link")
				.data(links, function(d) { return d.targed.id });
				
			// Enter the links.
			link.enter().insert("path","g")
				.attr("class", "link")
				.attr("d", diagonal);
			
	}'
]

{ #category : #'as yet unclassified' }
MindMap class >> d3TreeUpdaterCaller [
	^ 'update(root)'
]