paco

familyark/app/node_modules/treant-js/examples/connectors/connectors.css

@@ -0,0 +1,36 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
+
+
+body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; }
+
+/* optional Container STYLES */
+.chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
+
+.node { font-size: 11px; }
+
+.node.big-commpany { 
+	cursor: pointer;
+	padding: 0 2px;
+	min-width: 60px;
+	text-align: center;
+	height: 30px;
+	border: 2px solid #E8E8E3; 
+	border-radius: 2px;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.5);
+	background: #fff; 
+}
+.node.big-commpany:active { 
+	box-shadow: inset 1px 1px 1px rgba(0,0,0,.1); 
+	margin: 1px 0 0 1px; 
+	border: 2px solid #D3D3CB;
+}
+
+.node.big-commpany .node-name {
+	line-height: 30px;
+	color: #9B9B9B;
+}
+
+.node.big-commpany:hover .node-name {
+	color: #8B8B8B;
+	text-shadow: 1px 1px rgba(0,0,0,.15);
+}

familyark/app/node_modules/treant-js/examples/connectors/connectors.js

@@ -0,0 +1,166 @@
+// fix arrow end issues:
+// https://github.com/DmitryBaranovskiy/raphael/issues/471
+
+var chart_config = {
+	chart: {
+		container: "#OrganiseChart-big-commpany",
+		levelSeparation: 45,
+
+		rootOrientation: "WEST",
+
+		nodeAlign: "BOTTOM",
+
+		connectors: {
+			type: "step",
+			style: {
+				"stroke-width": 2
+			}
+		},
+		node: {
+			HTMLclass: "big-commpany"
+		}
+	},
+
+	nodeStructure: {
+		text: { name: "CEO" },
+		connectors: {
+			style: {
+				'stroke': '#bbb',
+				'arrow-end': 'oval-wide-long'
+			}
+		},
+		children: [
+			{
+				text: { name: "Account" },
+				stackChildren: true,
+				connectors: {
+					style: {
+						'stroke': '#8080FF',
+						'arrow-end': 'block-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Receptionist"},
+						HTMLclass: "reception"
+					},
+					{
+						text: {name: "Author"}
+					}
+				]
+			},
+			{
+				text: { name: "Operation Manager" },
+				connectors: {
+					style: {
+						'stroke': '#bbb',
+						"stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
+						'arrow-start': 'classic-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Manager I"},
+						connectors: {
+							style: {
+								stroke: "#00CE67"
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								pseudo: true,
+								connectors: {
+									style: {
+										stroke: "#00CE67"
+									}
+								},
+								children: [
+									{
+										text: {name: "Worker II"}
+									}
+								]
+							},
+							{
+								text: {name: "Worker III"}
+							}
+						]
+					},
+					{
+						text: {name: "Manager II"},
+						connectors: {
+							type: "curve",
+							style: {
+								stroke: "#50688D"
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								text: {name: "Worker II"}
+							}
+						]
+					},
+					{
+						text: {name: "Manager III"},
+						connectors: {
+							style: {
+								'stroke': '#FF5555'
+							}
+						},
+						children: [
+							{
+								text: {name: "Worker I"}
+							},
+							{
+								pseudo: true,
+								connectors: {
+									style: {
+										'stroke': '#FF5555'
+									}
+								},
+								children: [
+									{
+										text: {name: "Worker II"}
+									},
+									{
+										text: {name: "Worker III"}
+									}
+								]
+							},
+							{
+								text: {name: "Worker IV"}
+							}
+						]
+					}
+				]
+			},
+			{
+				text: { name: "Delivery Manager" },
+				stackChildren: true,
+				connectors: {
+					stackIndent: 30,
+					style: {
+						'stroke': '#E3C61A',
+						'arrow-end': 'block-wide-long'
+					}
+				},
+				children: [
+					{
+						text: {name: "Driver I"}
+					},
+					{
+						text: {name: "Driver II"}
+					},
+					{
+						text: {name: "Driver III"}
+					}
+				]
+			}
+		]
+	}
+};

familyark/app/node_modules/treant-js/examples/connectors/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+	<title> Connectors style example </title>
+	<link rel="stylesheet" href="../../Treant.css">
+	<link rel="stylesheet" href="connectors.css">
+	
+	<link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
+	
+</head>
+<body>
+	<div class="chart" id="OrganiseChart-big-commpany"></div>
+	
+	<script src="../../vendor/raphael.js"></script>
+	<script src="../../Treant.js"></script>
+	<script src="connectors.js"></script>
+
+	<script>
+
+		new Treant( chart_config );
+
+	</script>
+
+</body>
+</html>