Created
November 20, 2016 13:07
-
-
Save Alexlambertz/43c194689d67bc107c0fadbd513e4b3a to your computer and use it in GitHub Desktop.
ngTreant - Simple Angular JS wrapper for Treant.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app = angular.module("app", ["ngTreant"]); | |
angular.module('ngTreant', []) | |
.directive('treantGraph', function () { | |
return { | |
restrict: 'E', | |
scope: { | |
data: '=data' | |
}, | |
template: '<div class="chart" id="example-graph"></div>', | |
link: linkFn | |
}; | |
function linkFn(scope, element, attrs, ctrlFn) { | |
var tree = new Treant(scope.data); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
app.controller("CustomController", function ($scope) { | |
var ctrl = {}; | |
$scope.nodeSelectedLast = "(NONE)"; | |
ctrl.selectEvent = function (nodeId, node, event) { | |
$scope.nodeSelectedLast = nodeId; | |
$scope.$apply(); | |
} | |
$scope.graph = { | |
chart: { | |
container: "#example-graph", | |
levelSeparation: 45, | |
rootOrientation: "WEST", | |
nodeAlign: "BOTTOM", | |
connectors: { | |
type: "step", | |
style: { | |
"stroke-width": 2 | |
} | |
}, | |
node: { | |
HTMLclass: "big-commpany" | |
}, | |
callback: { | |
// This refers to custom callback available in https://github.com/Alexlambertz/treant-js | |
onClick: function (nodeId, node, event) { | |
ctrl.selectEvent(nodeId, node, event); | |
}.bind(this), | |
onTreeLoaded: function () { | |
console.log("Graph loaded!!"); | |
} | |
} | |
}, | |
nodeStructure: { | |
unique_name: "node1", | |
text: { | |
name: "CEO" | |
}, | |
connectors: { | |
style: { | |
'stroke': '#bbb', | |
'arrow-end': 'oval-wide-long' | |
} | |
}, | |
innerHTML: "<a ng-click=\"gotClick('test')\">LALILU</a>", | |
//link: { | |
// href: "http://www.google.com" | |
//}, | |
children: [{ | |
text: { | |
name: "Account" | |
}, | |
stackChildren: true, | |
collapsable: true, | |
collapsed: 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: "Worker IV" | |
} | |
}] | |
}, { | |
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" | |
} | |
}] | |
}] | |
} | |
}; | |
$scope.gotClick = function (temp) { | |
console.log("aa *****"); | |
console.log("temp = " + temp); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="treant-js/Treant.css"> | |
<link rel="stylesheet" href="con.css"> | |
</head> | |
<body ng-app="app"> | |
<div ng-controller="CustomController"> | |
<treant-graph data="graph"> </treant-graph> | |
{{nodeSelectedLast}} | |
</div> | |
<script src="bower_components/angular/angular.min.js"></script> | |
<script src="app.js"></script> | |
<script src="controller.js"></script> | |
<!-- I could not find the bower files --> | |
<script src="raphael/raphael.js"></script> | |
<script src="treant-js/Treant.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello @Alexlambertz !
I am wondering if this would support the user modifying the tree: adding more nodes, customizing existing ones, etc.
Thanks in advance!