and a live version here:<\/p>\n
http:\/\/mindfusion.dev\/demos\/jsdiagram\/Inheritance.html<\/a><\/p>\n Let’s start by creating shortcuts to some classes from the diagram model:<\/p>\n Next, create a function that takes a Diagram instance and a list of class names as parameters. It will create\u00a0a TableNode\u00a0for each class. Each property of the class prototype is listed in a TableNode cell. If the getBaseType function detects a class inherits another one from the list, we’ll create a link between their nodes. Finally, the diagram is arranged using the TreeLayout algorithm.<\/p>\n The\u00a0getBaseType implementation checks if a class was registered as a base for the argument using MindFusion.registerClass method or the common prototype inheritance pattern.<\/p>\n The ready handler creates a Diagram instance binding it to a #diagram canvas element.\u00a0It then calls createClassDiagram with a list of DiagramItem -derived classes as argument:<\/p>\n If you run the sample now, you should see this nice visualization of MindFusion classes \ud83d\ude42<\/p>\n For more information on MindFusion JavaScript diagram library, see its help reference<\/a> and overview page<\/a>.<\/p>\n Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":" In this post we will show how to use the JavaScript diagram library to generate a class inheritance diagram. The complete example is available here: InheritanceDiagram.zip and a live version here: http:\/\/mindfusion.dev\/demos\/jsdiagram\/Inheritance.html Let’s start by creating shortcuts to some classes … Continue reading var Diagram = MindFusion.Diagramming.Diagram;\n\nvar DiagramItem = MindFusion.Diagramming.DiagramItem;\nvar DiagramLink = MindFusion.Diagramming.DiagramLink;\nvar DiagramNode = MindFusion.Diagramming.DiagramNode;\nvar ShapeNode = MindFusion.Diagramming.ShapeNode;\nvar TableNode = MindFusion.Diagramming.TableNode;\nvar ContainerNode = MindFusion.Diagramming.ContainerNode;\nvar FreeFormNode = MindFusion.Diagramming.FreeFormNode;\nvar SvgNode = MindFusion.Diagramming.SvgNode;\n\nvar ScrollBar = MindFusion.Diagramming.ScrollBar;\nvar Rect = MindFusion.Drawing.Rect;\nvar Font = MindFusion.Drawing.Font;\nvar TreeLayout = MindFusion.Graphs.TreeLayout;\n<\/pre>\n
function createClassDiagram(diagram, classes)\n{\n var classConstructors = [];\n\n \/\/ create a table node for each class\n for (var i = 0; i < classes.length; i++)\n {\n var className = classes[i];\n var node = diagram.getFactory().createTableNode(20, 20, 42, 42);\n node.redimTable(1, 0);\n node.setText(className);\n node.setBrush(\"white\");\n node.setCaptionBackBrush(\"lightgray\");\n node.setCaptionFont(\n new Font(\"sans-serif\", 3, true \/*bold*\/, true \/*italic*\/));\n node.setScrollable(true);\n\n var ctor = eval(className);\n for (var property in ctor.prototype)\n {\n node.addRow();\n node.getCell(0, node.rows.length - 1).setText(property);\n }\n classConstructors.push(ctor);\n ctor.classNode = node;\n }\n\t\n \/\/ create a diagram link for each prototype inheritance\n classConstructors.forEach(function(ctor)\n {\n var base = getBaseType(ctor);\n if (base && base.classNode)\n {\n var link = diagram.factory.createDiagramLink(\n base.classNode,\n ctor.classNode);\n link.setHeadShape(null);\n link.setBaseShape(\"Triangle\");\n link.setBaseShapeSize(3);\n }\n });\n\n \/\/ arrange as a tree\n var treeLayout = new TreeLayout();\n treeLayout.linkType = MindFusion.Graphs.TreeLayoutLinkType.Cascading;\n diagram.arrange(treeLayout);\n}<\/pre>\nfunction getBaseType(ctor)\n{\n \/\/ if class registered using MindFusion.registerClass\n if (ctor.__baseType)\n return ctor.__baseType;\n\n \/\/ if prototypical inheritance with Child.prototype = new Parent()\n if (ctor.prototype && ctor.prototype.constructor != ctor)\n return ctor.prototype.constructor;\n\t\n return null;\n}<\/pre>\n$(document).ready(function ()\n{\n TableNode.prototype.useScrollBars = true;\n ScrollBar.prototype.background = \"Lavender\";\n ScrollBar.prototype.foreground = \"DarkGray\";\n\n \/\/ create a Diagram component that wraps the \"diagram\" canvas\n var diagram = Diagram.create($(\"#diagram\")[0]);\n\n createClassDiagram(diagram,\n [\n \"DiagramItem\",\n \"DiagramLink\",\n \"DiagramNode\",\n \"ShapeNode\",\n \"TableNode\",\n \"ContainerNode\",\n \"FreeFormNode\",\n \"SvgNode\"\n ]);\n});<\/pre>\n![\"JavaScript](\"http:\/\/mindfusion.dev\/samples\/javascript\/diagram\/inheritance_diagram.png\")
<\/p>\n