diff --git a/src/Grafoscopio/GrafoscopioNode.class.st b/src/Grafoscopio/GrafoscopioNode.class.st index 32861ec..efe2ead 100644 --- a/src/Grafoscopio/GrafoscopioNode.class.st +++ b/src/Grafoscopio/GrafoscopioNode.class.st @@ -917,6 +917,18 @@ GrafoscopioNode >> removeLastNode [ ] +{ #category : #utility } +GrafoscopioNode >> removeLeadingLineNumbersSized: anInteger [ + | cleanBody | + cleanBody := ''. + self body lines do: [ :line | | cleanLine | + line size >= anInteger + ifTrue: [ cleanLine := line copyFrom: anInteger to: line size. ] + ifFalse: [ cleanLine := '' ]. + cleanBody := cleanBody, cleanLine, String cr ]. + self body: cleanBody asString. +] + { #category : #'add/remove nodes' } GrafoscopioNode >> removeNode: aNode [ (self children includes: aNode) diff --git a/src/Grafoscopio/GrafoscopioNodeTest.class.st b/src/Grafoscopio/GrafoscopioNodeTest.class.st index 1d7da93..cfc578e 100644 --- a/src/Grafoscopio/GrafoscopioNodeTest.class.st +++ b/src/Grafoscopio/GrafoscopioNodeTest.class.st @@ -83,6 +83,39 @@ GrafoscopioNodeTest >> testPromoteNode [ ] +{ #category : #'tests-utility' } +GrafoscopioNodeTest >> testRemoveLeadingLineNumbersSized [ + | copiedCode testNode | + copiedCode := ' + 1var tree = d3.layout.tree() + 2 .sort(null) + 3 .size([size.height, size.width - maxLabelLength*options.fontSize]) + 4 .children(function(d) + 5 { + 6 return (!d.contents || d.contents.length === 0) ? null : d.contents; + 7 }); + 8 + 9var nodes = tree.nodes(treeData); +10var links = tree.links(nodes); +11 '. + testNode := GrafoscopioNode new + body: copiedCode. + testNode removeLeadingLineNumbersSized: 3. + self assert: testNode body equals: ' +var tree = d3.layout.tree() + .sort(null) + .size([size.height, size.width - maxLabelLength*options.fontSize]) + .children(function(d) + { + return (!d.contents || d.contents.length === 0) ? null : d.contents; + }); + +var nodes = tree.nodes(treeData); +var links = tree.links(nodes); + +' +] + { #category : #tests } GrafoscopioNodeTest >> testRemovingChildren [ | tree orig | diff --git a/src/Grafoscopio/MindMap.class.st b/src/Grafoscopio/MindMap.class.st new file mode 100644 index 0000000..e37f9e0 --- /dev/null +++ b/src/Grafoscopio/MindMap.class.st @@ -0,0 +1,185 @@ +" +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 + () 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)' +]